:root{--canvas:#f5f2ee;--white:#fff;--cloud:#e8e4df;--fog:#c2beba;--graphite:#6e6b66;--ink:#141210;--violet:#bb24ed;--violet-wash:#bb24ed1f;--volt:#c7f900;--success:#16a22d;--danger:#dc2837;--warning:#b45309;--bw:2px;--r-sm:8px;--r-md:12px;--r-lg:16px;--shadow-rest:0 4px 0 var(--ink);--shadow-press:0 1px 0 var(--ink);--t-fast:.12s;--ease:cubic-bezier(.2, .8, .2, 1);--font-ui:"Bricolage Grotesque", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box;font-synthesis:none;margin:0}[hidden]{display:none!important}html,body{background:var(--canvas);color:var(--ink);font:500 14px/1.4 var(--font-ui);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}body{background-image:radial-gradient(var(--fog) 1px, transparent 1px);background-size:24px 24px}.page{grid-template:"bar bar"58px"left right"minmax(0,1fr)/1fr 612px;gap:10px 18px;width:1280px;height:clamp(600px,100vh,800px);margin:0 auto;padding:0 26px 18px;display:grid}.bar{grid-area:bar;align-items:center;gap:28px;display:flex}.logo{width:auto;height:30px;display:block}.pick{align-items:center;gap:12px;display:flex}.title{font:800 22px/1 var(--font-ui);letter-spacing:-.01em;text-align:center;min-width:150px}.title em{color:var(--violet);font-style:normal}.panel{background:var(--white);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--shadow-rest)}.left{flex-direction:column;grid-area:left;gap:8px;min-height:0;margin-bottom:4px;padding:10px;display:flex}.right{flex-direction:column;grid-area:right;gap:8px;min-height:0;margin-bottom:4px;padding:10px;display:flex}button,select{font:700 13px/1 var(--font-ui);letter-spacing:.04em;color:var(--ink);background:var(--white);border:var(--bw) solid var(--ink);border-radius:var(--r-sm);box-shadow:0 3px 0 var(--ink);cursor:pointer;transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);padding:9px 16px}button:active{box-shadow:var(--shadow-press);transform:translateY(2px)}button:focus-visible,select:focus-visible{outline:3px solid var(--violet);outline-offset:2px}button.act{background:var(--volt);min-width:120px}button.act.small{min-width:0}button.arrow{padding:7px 11px;font-size:12px}select.small{padding:7px 10px;font-size:12px}.editor{border:1.5px solid var(--ink);border-radius:var(--r-md);background:var(--white);flex:1;min-height:0;overflow:hidden}.words{font:500 11px/1.5 var(--font-mono);color:var(--graphite);white-space:pre-line}.stage-box{flex:1;min-height:0;display:flex;position:relative}.well{border-radius:var(--r-md);border:1.5px solid var(--ink);flex:1;position:relative;overflow:hidden}.views{z-index:2;align-items:center;gap:6px;display:flex;position:absolute;top:12px;left:12px}.views button{box-shadow:0 2px 0 var(--ink);padding:6px 9px;font-size:11px}.toggle{font:700 11px/1 var(--font-ui);letter-spacing:.04em;background:var(--white);border:var(--bw) solid var(--ink);border-radius:var(--r-sm);box-shadow:0 2px 0 var(--ink);cursor:pointer;align-items:center;gap:6px;padding:5px 9px;display:inline-flex}.toggle input{accent-color:var(--violet);margin:0}.corner-frame{z-index:2;pointer-events:none;border:var(--bw) solid var(--ink);width:210px;height:150px;box-shadow:0 3px 0 var(--ink);border-radius:6px;position:absolute;top:10px;right:10px}.corner-frame span{background:var(--ink);color:var(--white);font:600 10px/1.2 var(--font-mono);letter-spacing:.14em;border-radius:4px;padding:3px 7px;position:absolute;top:6px;left:6px}.meter{z-index:2;border-radius:var(--r-sm);background:var(--white);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);font:600 12px/1 var(--font-mono);letter-spacing:.08em;color:var(--ink);align-items:center;gap:10px;padding:8px 12px;display:flex;position:absolute;bottom:12px;right:12px}.meter-label{color:var(--graphite);letter-spacing:.14em;font-size:11px}.pips{gap:3px;display:flex}.pip{background:var(--cloud);border-radius:2px;width:9px;height:14px}.pip.on{background:var(--violet)}.pip.over{background:var(--danger)}.pips.many{gap:2px}.pips.many .pip{width:6px}.count{white-space:nowrap}.meter.over .count{color:var(--danger)}.meter.unsure{opacity:.55}.status-line{align-items:center;gap:10px;min-height:32px;padding:0 2px;display:flex}#status{font:600 15px/1.3 var(--font-ui);color:var(--graphite);flex:1}#status.good{color:var(--success)}#status.near{color:var(--warning)}#status.bad{color:var(--danger)}.controls{align-items:center;gap:10px;padding-bottom:2px;display:flex}.cm-running{background:var(--violet-wash);box-shadow:inset 3px 0 0 var(--violet)}.cm-mistake{box-shadow:inset 3px 0 0 var(--danger);background:#dc28371a}.cm-move{color:#2563eb}.cm-place{color:#15803d}.cm-material{color:#b45309}.cm-keyword{color:#7c3aed;font-weight:700}.cm-number{color:#c2410c}.cm-note{color:var(--graphite);font-style:italic}