:root{color-scheme:light;--ink:#242424;--brand-red:#8f302d;--muted:#545454;--line:#dcd7d3;--paper:#f6f2ed;--accent:#8f302d;--c0:#80a8d1;--c1:#294e79;--c2:#b55752;--c3:#702b2c;--c4:#6b6b6b;font-family:Inter,"DM Sans","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;color:var(--ink);background:var(--paper);font-size:15px;line-height:1.55}
*{box-sizing:border-box}
body{margin:0}
.wrap{width:min(1220px,calc(100% - 84px));margin:auto}
.mast{background:linear-gradient(110deg,#67201f,#8f302d 70%,#9d403a);color:#fffdf9}
.mast-in{height:67px;display:flex;align-items:center;gap:18px}
.brand{font-weight:800;letter-spacing:.12em;font-size:21px;display:flex;align-items:center;gap:12px}
.mark{position:relative;width:29px;height:29px;border:1.5px solid #f6f2ed;border-radius:3px;background-image:linear-gradient(90deg,transparent 30%,#e4b7ad 31%,#e4b7ad 34%,transparent 35%,transparent 64%,#e4b7ad 65%,#e4b7ad 68%,transparent 69%),linear-gradient(transparent 30%,#e4b7ad 31%,#e4b7ad 34%,transparent 35%,transparent 64%,#e4b7ad 65%,#e4b7ad 68%,transparent 69%)}
.mark:after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#dd8b7e;top:4px;right:4px}
.mast-line{height:17px;border-left:1px solid #b87870}
.mast-type,.version{color:#f7e7e2;font-size:13px;letter-spacing:.08em}
.version{margin-left:auto;font-family:monospace}
.intro{padding:37px 0 31px}
.overline,.context,.engine,.foot-version,.axis,.code{font:600 11px/1.5 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.09em}
.overline{color:var(--muted);display:flex;align-items:center;gap:10px}
.overline i{width:30px;height:2px;background:var(--accent)}
h1,h2,h3,h4,p{margin:0}
h1{color:var(--brand-red);font-size:clamp(38px,4vw,60px);line-height:1.2;letter-spacing:-.055em;margin:9px 0;font-weight:850}
h1 span{color:#8f302d;font-size:.75em}
.intro p,.hint,.sub,.under,.explain,.empty,.note{color:var(--muted)}
.layout{display:grid;grid-template-columns:minmax(265px,320px) minmax(0,1fr);gap:26px;align-items:start}
.input-card,.workspace{border:1px solid var(--line);border-radius:13px;background:#fffdf9}
.input-card{padding:24px}
.input-card h2,.result-head h2,.dialog-head h2{font-size:23px;letter-spacing:-.03em}
.hint{font-size:14px;margin:6px 0 20px}
.input-card label,.edit-grid label,.edit-field{display:block;font-weight:650;font-size:14px;margin-top:17px}
label small{float:right;color:var(--muted);font-weight:400;font-size:12px}
input,textarea,select{display:block;width:100%;border:1px solid #c9a7a1;border-radius:6px;padding:10px 11px;font:inherit;font-size:14px;color:var(--ink);background:#fffdf9;margin-top:6px}
input::placeholder,textarea::placeholder{color:#696969;opacity:1}
textarea{resize:vertical;line-height:1.6}
button{cursor:pointer;color:var(--brand-red);font:inherit}
button:disabled{cursor:wait;opacity:.65}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #8f302d;outline-offset:3px}
.under,.panel-tools,.section-heading,.dialog-head,.dialog-actions,.result-head .sub{display:flex;align-items:center;justify-content:space-between;gap:10px}
.under{font-size:12px;margin-top:7px}
.cta,.primary{background:var(--brand-red);color:white;border:0;border-radius:6px;font-weight:700}
.cta{width:100%;padding:13px 15px;margin-top:20px;display:flex;justify-content:space-between}
.cta:hover,.primary:hover{background:#67201f}
.engine{border-top:1px solid var(--line);margin-top:18px;padding-top:13px;color:var(--muted);letter-spacing:.03em;display:flex;align-items:center;gap:8px}
.engine i,.context:before{width:7px;height:7px;border-radius:50%;background:#8f302d;display:inline-block}
.feedback:not(:empty){padding:10px;margin-top:12px;background:#f9ece8;border-radius:5px;font-size:13px}
.feedback.error{color:var(--ink);background:#fff0ed}
.workspace{overflow:hidden}
.result-head{padding:21px 25px 14px}
.context{color:var(--muted);display:flex;align-items:center;gap:7px;margin-bottom:4px}
.context:before{content:"";background:#8f302d}
.sub{font-size:13px;margin-top:4px}
.tabs{display:flex;padding:0 24px;border-bottom:1px solid var(--line);gap:23px}
.tabs button{padding:10px 1px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);font-weight:600}
.tabs button:disabled{cursor:default;opacity:.72}
.tabs button[aria-pressed=true]{border-color:var(--accent);color:var(--brand-red)}
#view{padding:18px 24px 22px}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted);margin:12px 0}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;background:var(--c4)}
.b0{--tone:var(--c0)}
.b1{--tone:var(--c1)}
.b2{--tone:var(--c2)}
.b3{--tone:var(--c3)}
.b4{--tone:var(--c4)}
.dot[class*=b]{background:var(--tone);box-shadow:inset 0 0 0 1px #67201f44}
.dot.b4{background:transparent;border:1px dashed var(--tone);box-shadow:none}
.axis{color:var(--muted);letter-spacing:0;font-size:12px;display:flex;flex-wrap:wrap;gap:4px 18px;margin:7px 0}
.board-hint,.note{font-size:13px;margin:7px 0}
.section-heading{margin:18px 0 10px}
.section-heading h3,h3{font-size:17px}
.catalog{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.group-card{padding:10px 0;border-top:1px solid var(--line);min-width:0}
.group-card h4{font-size:14px}
.group-card p{font-size:12px;color:var(--muted);margin:2px 0 5px}
.product-link{padding:3px 6px;border:1px solid #e4ccc7;background:#fff7f3;border-radius:5px;font-size:12px;line-height:1.65;margin:3px 3px 0 0;overflow-wrap:anywhere}
.product-link:hover,.minor:hover{border-color:var(--brand-red)}
.id{font:600 11px ui-monospace,monospace;color:var(--muted);margin-right:4px}
.empty,.explain{font-size:13px}
.rank-card,.path-card{border:1px solid var(--line);border-radius:7px;padding:14px 16px;margin:12px 0}
.rank-card:first-of-type{border-left:4px solid var(--brand-red)}
.rank-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.score{margin-left:auto;font:700 18px ui-monospace,monospace}
.score small{font-size:11px;color:var(--muted)}
.badge{padding:3px 7px;background:#eee9e6;border-radius:4px;color:var(--ink);font-size:12px;font-weight:700}
.rank-card p,.path-card p{margin-top:6px;font-size:14px}
.path-sel{max-width:290px}
.path-card ul{padding-left:20px;margin:8px 0}
.path-card li{margin:8px 0}
.path-card strong{font-size:14px}
.minor{padding:6px 10px;border-radius:5px;border:1px solid var(--line);background:#fffdf9;font-size:13px}
.primary{padding:9px 16px}
.note-panel{background:#faf0ea;border-radius:6px;padding:10px 13px}
.note-panel summary{font-size:13px;cursor:pointer}
.note-panel p{font-size:13px;color:var(--muted);margin-top:7px}
.close{border:none;background:none;font-size:24px;padding:0 5px}
dialog{color:var(--ink);border:1px solid var(--line);border-radius:10px;background:#fffdf9;padding:22px;width:min(540px,92vw);max-height:86vh}
dialog::backdrop{background:#67201f70}
.dialog-head{border-bottom:1px solid var(--line);padding-bottom:10px}
.edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.dialog-actions{justify-content:flex-end;margin-top:19px}
.dialog-note{margin:12px 0;font-size:14px}
.dialog-note b{display:block;font-size:12px;color:var(--muted)}
.factor-list{display:grid;grid-template-columns:repeat(2,1fr);gap:3px 12px}
.factor-list label{font-size:13px}
.factor-list select{margin-bottom:5px}
.dialog-actions .minor{padding:9px 15px}
.edit-field{margin:9px 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
footer.wrap{font-size:12px;color:var(--muted);margin:36px auto 18px;border-top:1px solid var(--line);padding-top:15px;display:flex;gap:10px}
footer span:first-child{font-weight:800}
.foot-version{margin-left:auto;letter-spacing:0} [hidden]{display:none!important}
@media(max-width:900px){.wrap{width:calc(100% - 38px)}
.layout{grid-template-columns:250px minmax(0,1fr);gap:14px}
.input-card{padding:17px}
#view,.result-head{padding-left:15px;padding-right:15px}
.tabs{gap:15px;padding:0 15px}}
@media(max-width:700px){.mast-in{height:55px;gap:10px}
.brand{font-size:18px}
.wrap{width:calc(100% - 28px)}
.intro{padding:23px 0 20px}
.intro p{font-size:14px}
.layout{grid-template-columns:1fr}
.input-card h2,.result-head h2{font-size:21px}
.input-card textarea{height:115px}
.intro h1{font-size:40px}
.mast-type{font-size:12px}
.catalog{gap:6px 10px}
.tabs{gap:18px}
.legend{gap:5px 10px}
.foot-version{font-size:9px}
.factor-list,.edit-grid{column-gap:8px}}
@media(prefers-reduced-motion:no-preference){button{transition:background-color .15s,border-color .15s}}



#catalog-picker{border-top:1px solid var(--line);margin-top:20px}
.lookup{position:relative}
.suggestions{position:absolute;top:100%;left:0;right:0;z-index:4;background:#fffdf9;border:1px solid #c9a7a1;box-shadow:0 9px 20px #67201f22;border-radius:6px;padding:3px;margin:3px 0 0;list-style:none;max-height:min(290px,42vh);overflow:auto;overscroll-behavior:contain}
.suggestions li{cursor:pointer;display:grid;gap:2px;padding:8px 9px;line-height:1.45;border-radius:3px;overflow-wrap:anywhere}
.suggestions li+li{border-top:1px solid #eddbd6}
.suggestions strong{font-size:14px;font-weight:650}
.suggestions small,.picker-status{color:var(--muted);font-size:12px}
.suggestions li:hover,.suggestions [aria-selected=true]{background:#f6e5e0}
.picker-status:not(:empty){margin-top:7px}

.analysis-notice{margin:0 0 12px;padding:9px 12px;border-left:3px solid var(--brand-red);background:#f3d8d5;color:var(--ink);font-size:14px}
.mast{border-bottom:3px solid var(--brand-red)}
.input-card h2,.result-head h2,.dialog-head h2{color:var(--brand-red)}

/* The 19 lines occupy 90% of the square, leaving a traditional rim. */
.board-frame {
  width: min(100%, 566px);
  margin: 6px auto 16px;
}
.board {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1;
  container-type: inline-size;
  background: linear-gradient(125deg, #fff8ef, #f7ebdd);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #c18c7f, inset 0 0 0 4px #fff6ed99, 0 4px 12px #67201f14;
}
.goban-grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.heat-ring { fill: var(--wash); stroke: var(--edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.heat-ring.b0 { --wash: #e3edf7; --edge: #a6bbd1; }
.heat-ring.b1 { --wash: #c4d7e9; --edge: #93aec8; }
.heat-ring.b2 { --wash: #f4d9d2; --edge: #d5a79f; }
.heat-ring.b3 { --wash: #e6bdb8; --edge: #c38f89; }
.legend strong { color: var(--ink); }
.grid-lines line { stroke: #7e7772; stroke-width: 1; vector-effect: non-scaling-stroke; }
.grid-lines line:nth-child(19), .grid-lines line:nth-child(20) { stroke: #665e57; }
.stars { fill: #554741; }
.quadrant-labels {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 7px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.quadrant-labels span { max-width: 48%; overflow-wrap: anywhere; }
.quadrant-labels span:last-child { text-align: right; }
.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 4.55%;
  aspect-ratio: 1;
  border: 1px solid #67201f66;
  border-radius: 50%;
  padding: 0;
  color: #fffdf9;
  background: radial-gradient(circle at 32% 23%, #ffffff24, transparent 58%), var(--tone);
  box-shadow: inset 0 1px 1px #fffdf966, 0 1px 2px #67201f60;
  font: 700 clamp(9px, 2.1cqw, 13px)/1 ui-monospace, monospace;
}
.pin.b0 { color: #17283b; }
.pin:hover, .pin:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 1px; z-index: 1; }
::selection { background: #edc6bc; color: #67201f; }

/* Analysis and editing each get the full workspace width. */
.layout{display:block}
.work-switch,.source-tabs{display:flex;gap:6px;flex-wrap:wrap}
.work-switch{margin:0 0 14px}
.work-switch button,.source-tabs button{border:1px solid var(--line);border-radius:6px;padding:8px 14px;background:#fffaf6;color:var(--ink);font-weight:650}
.work-switch [aria-pressed=true],.source-tabs [aria-pressed=true]{color:var(--brand-red);border-color:var(--brand-red);background:#f8eae5}
.identity,.build-grid,.board-layout{display:grid;gap:22px}
.identity{grid-template-columns:1fr 1fr;max-width:880px}
.build-grid{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);margin-top:20px}
.source-tabs{margin-bottom:12px}.source-tabs button{font-size:14px}
#catalog-picker{margin:0;border:0}.suggestions{max-height:330px}
.draft,.piece-index{padding:18px;background:#f8f4ee;border:1px solid var(--line);border-radius:9px;align-self:start}
.draft .section-heading,.piece-index .section-heading{margin:0 0 10px}
.draft-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.draft-row:has(#row-name){display:block}.draft-row small{display:block;color:var(--muted);font-size:12px}.draft-row>div:last-child{flex:none}
#draft-rows{max-height:380px;overflow:auto}.draft details{margin-top:12px}.draft summary,.candidate summary{cursor:pointer}
.text-action{background:none;border:0;color:var(--brand-red);text-decoration:underline;text-underline-offset:3px;font-size:13px;padding:4px 6px}
#source-manual .minor,#source-website .minor{margin-top:9px}.web-list{max-height:440px;overflow:auto}
.candidate{border-bottom:1px solid var(--line);padding:7px 2px}.candidate summary{font-size:14px}.candidate a,.dialog-note a{color:var(--brand-red);overflow-wrap:anywhere}
.candidate input[type=checkbox]{display:inline-block;width:17px;height:17px;vertical-align:middle;padding:0;margin:0 8px;accent-color:var(--brand-red)}
.board-layout{grid-template-columns:minmax(0,1.45fr) minmax(235px,.7fr);align-items:start}
.board-frame{width:min(100%,600px);margin:0 auto}.quadrant-labels{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.quadrant{display:flex;align-items:center;gap:6px;min-width:0;text-align:left;border:1px solid #c9b7ac;border-left:4px solid #ab8b79;background:#fff9f3;color:var(--ink);border-radius:4px;padding:6px 8px;font-size:clamp(14px,1.5vw,20px);font-weight:700;overflow-wrap:anywhere}
.quadrant b{font:700 13px monospace;color:var(--brand-red)}.quadrant small{margin-left:auto;white-space:nowrap;font-size:11px;color:var(--muted)}
.quadrant[aria-pressed=true]{background:#fae9e3;border-color:var(--brand-red)}
.grid-lines line:nth-child(19),.grid-lines line:nth-child(20){stroke-width:1.7}
.pin.muted-pin{opacity:.55}.pin[aria-pressed=true]{outline:3px solid #312526;outline-offset:1px;z-index:1}
.piece-index ol{list-style:none;padding:0;margin:0}.index-entry{display:grid;width:100%;grid-template-columns:30px 1fr auto;align-items:center;gap:9px;background:transparent;border:0;border-top:1px solid var(--line);text-align:left;color:var(--ink);padding:7px 3px;font-size:14px}
.index-entry span{overflow-wrap:anywhere}.index-num{background:#fffdf9;border:1px solid #c9b9ad;border-radius:4px;text-align:center;font:700 12px/24px ui-monospace,monospace}
.index-entry small{color:var(--muted)}.index-entry[aria-pressed=true]{background:#f0ded6}.index-entry[aria-pressed=true] .index-num{background:var(--brand-red);border-color:var(--brand-red);color:white}
.index-entry[data-dim=true]{color:#676262}.selection-info,.piece-detail{padding:8px 0}.piece-detail p,.idea p,.memo p{font-size:14px;margin:5px 0}.idea{margin:10px 0;border:1px dashed #aa7064;border-radius:8px;background:#fff3ed;padding:14px}.idea-label{color:var(--brand-red)}.idea-tag{font-size:12px;margin-left:10px;color:var(--muted)}.idea h4{font-size:18px;margin-top:6px}.pair-label{font-size:13px}.pair-label select{max-width:300px}.memo{padding:8px 0;border-bottom:1px solid var(--line)}
@media(max-width:720px){.build-grid,.board-layout,.identity{grid-template-columns:1fr;gap:13px}.board-layout .piece-index{width:100%}.source-tabs{gap:4px}.source-tabs button{padding:7px 8px}.quadrant{padding:5px;gap:3px}.draft,.piece-index{padding:12px}.board-frame{width:100%}.piece-detail{scroll-margin-top:10px}}