:root{--bg: #141518;--panel: #1d1f23;--panel-2: #272a30;--ink: #ecebe7;--dim: #9c9fa6;--line: #34373e;--red: #e8705a;--blue: #6aa8f0;--green: #5cc27a;--good: #f4f1e6;--bad: #3a3d44;--earth: #8a7a63}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink)}body{font:15px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Hiragino Sans,sans-serif}main{max-width:1180px;margin:0 auto;padding:32px 24px 48px}h1{font-size:34px;margin:0 0 8px;letter-spacing:-.01em}h1 span{color:var(--green);font-weight:600;margin-left:6px}.sub{color:var(--dim);max-width:84ch;margin:0 0 24px}.sub strong{color:var(--ink);font-weight:600}.sub .red-t,.red-t{color:var(--red)}.sub .blue-t,.blue-t{color:var(--blue)}.green-t{color:var(--green)}.win-t,.sub .win-t{color:#9be3b0}.lose-t,.sub .lose-t{color:#ef6b7b}#wrap{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}.stage{flex:1 1 600px;min-width:0}.side{flex:0 1 380px;min-width:280px}h3{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--dim);font-weight:600;margin:0 0 10px}.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}.controls[hidden]{display:none}.sel{color:var(--dim);font-size:13px;display:inline-flex;gap:6px;align-items:center}.chk{cursor:pointer}select,button{font:inherit;font-size:13px;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:5px 10px;cursor:pointer}button:hover,select:hover{border-color:var(--dim)}button.primary{background:var(--green);color:#0d1a11;border-color:var(--green);font-weight:600}.pen.on{outline:2px solid var(--ink)}.pen.blue{color:var(--blue)}.pen.red{color:var(--red)}.pen.green{color:var(--green)}#boardwrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px}#board{width:100%;height:auto;display:block;-webkit-user-select:none;user-select:none}.editing #board{cursor:crosshair}#board .earth{fill:#24211c}#board .groundline{stroke:var(--earth);stroke-width:4}#board .edge{fill:none;stroke-width:6;stroke-linecap:round}#board .edge.blue{stroke:var(--blue)}#board .edge.red{stroke:var(--red)}#board .edge.green{stroke:var(--green)}#board .edge.gone{stroke-opacity:.09;stroke-dasharray:4 7}#board .edge.last{stroke-width:8}#board .hit{fill:none;stroke:transparent;stroke-width:18;stroke-linecap:round}#board .edge.open+.hit{cursor:pointer}#board .edge.open+.hit:hover{stroke:#ffffff1f}.editing #board .hit{cursor:pointer}.editing #board .hit:hover{stroke:#ef6b7b59}#board .vx{fill:#d9d6cc;stroke:#141518;stroke-width:1.5}#board .vx.ground{fill:var(--earth)}#board .vx.pending{fill:#fff;stroke:var(--green);stroke-width:3}#board .mark{pointer-events:none}#board .mark circle{stroke:#141518;stroke-width:1.5}#board .mark text{font:700 12px ui-sans-serif,system-ui,sans-serif}#board .mark.win circle{fill:var(--good)}#board .mark.win text{fill:#1b6b39}#board .mark.lose circle{fill:var(--bad)}#board .mark.lose text{fill:#ef8b97}#status{margin-top:10px;color:var(--dim);font-size:14px;min-height:1.6em}#status strong{font-weight:600}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:18px}.big{font:600 26px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-word}.big.long{font-size:15px;line-height:1.45}.dim{color:var(--dim)}.small{font-size:12.5px;margin:6px 0 0}.verdict{margin:6px 0 0;color:var(--ink)}.pieces{margin:6px 0 0;padding-left:22px;font-size:14px}.pieces span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.pieces em{color:var(--dim);font-style:normal;font-size:12px;margin-left:4px}.legend-panel p{margin:0 0 6px;font-size:13px;color:var(--dim)}.legend-panel b{color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.notes{margin-top:36px;max-width:80ch;color:var(--dim)}.notes h2{color:var(--ink);font-size:18px;margin:24px 0 8px}.notes em{color:var(--ink)}footer{margin-top:36px;color:var(--dim);font-size:13px}footer a,.notes a{color:var(--blue)}