:root{color-scheme:dark;--bg:#0d0f12;--panel:#15181d;--text:#f4f0e6;--muted:#98a2af;--line:#353b45;--lime:#d6ff68;--red:#ff654d;--blue:#5fd8ff;--paper:#f2ecde;--ink:#17191c}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
button,input{font:inherit}
button{touch-action:manipulation}
.app-shell{min-height:100vh;padding:0 20px 80px}
.topbar{width:min(1120px,100%);min-height:68px;margin:0 auto;display:flex;align-items:center;gap:14px;border-bottom:1px solid #2a2e35}
.home-link{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);color:var(--text);text-decoration:none;font-size:22px}
.brand{font-size:12px;font-weight:950;letter-spacing:.12em;flex:1}
.session-pill{font-size:12px;color:#8f98a6;text-transform:uppercase;letter-spacing:.12em}
.view{display:none;width:min(860px,100%);margin:0 auto;padding-top:50px}
.view.active{display:block}
.case-stamp{display:inline-flex;border:2px solid var(--red);color:var(--red);padding:7px 10px 5px;font-size:12px;font-weight:950;letter-spacing:.17em;transform:rotate(-1.4deg)}
.eyebrow{margin:25px 0 10px;color:var(--lime);font-size:12px;font-weight:950;letter-spacing:.16em}
h1,h2{margin:0;letter-spacing:-.055em;font-weight:950}
h1{font-size:clamp(38px,7vw,70px);line-height:1}
h1 em{color:var(--text);font-style:normal}
h2{font-size:clamp(34px,6vw,56px);line-height:1.04}
.lead{max-width:720px;margin:24px 0 0;color:#b9c0ca;font-size:16px;line-height:1.85}
.lead strong{color:var(--text)}
.helper{margin:14px 0 26px;color:var(--muted);font-size:14px;line-height:1.7}
.case-card{margin-top:30px;background:var(--paper);color:var(--ink);border:1px solid #d6cdbb;padding:24px;box-shadow:9px 9px 0 #252930}
.case-top{display:flex;justify-content:space-between;gap:16px;color:#6d6a63;font-size:12px;font-weight:950;letter-spacing:.12em}
.case-top b{color:#c54d3b;border:1px solid #c54d3b;padding:4px 6px;transform:rotate(3deg)}
.case-card>p{margin:17px 0;font-size:15px;line-height:1.75;font-weight:700}
.case-card blockquote{margin:18px 0;padding:17px 18px;background:#181a1d;color:#fff4ec;border-left:5px solid var(--red);font-size:clamp(20px,4vw,28px);line-height:1.4;font-weight:950}
.restriction-line{display:flex;align-items:flex-start;gap:12px;padding-top:14px;border-top:1px solid #c9c0ad}
.restriction-line>span{background:var(--red);color:var(--ink);padding:3px 7px;font-size:12px;font-weight:950}
.restriction-line p{margin:0;font-size:14px;line-height:1.6;font-weight:750}
.meter-block{margin-top:28px;border:1px solid #323741;padding:20px;background:#14171b}
.meter-head,.range-labels,.before-after{display:flex;justify-content:space-between;align-items:center;gap:14px}
.meter-head{font-size:13px;color:#c6ccd5;font-weight:800}.meter-head strong{font-size:32px;color:var(--text)}
.range{width:100%;margin:20px 0 10px;accent-color:var(--lime)}
.range-labels,.before-after{color:#7f8996;font-size:12px;font-weight:800}.before-after strong{color:var(--lime);font-size:18px}
.primary,.next,.hold{width:100%;min-height:58px;margin-top:20px;border:0;cursor:pointer;font-weight:950}
.primary{display:flex;align-items:center;justify-content:space-between;background:var(--lime);color:#101215;padding:0 20px;font-size:16px}
.primary span{font-size:25px}
.next{background:var(--paper);color:var(--ink);font-size:15px}
.safety-note{color:#8f98a6;font-size:12px;line-height:1.7;margin:16px 0 0}
.step-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:18px;color:var(--lime);font-size:12px;font-weight:950;letter-spacing:.14em}.step-head b{color:#818b98}
.evidence-card{min-height:220px;background:var(--paper);color:var(--ink);border:1px solid #d1c9b9;padding:23px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:8px 8px 0 #252930}
.evidence-card span{color:#777168;font-size:12px;font-weight:950;letter-spacing:.14em}
.evidence-card p{margin:38px 0 0;font-size:clamp(27px,5vw,44px);line-height:1.2;letter-spacing:-.035em;font-weight:950}
.bucket-grid{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bucket{min-height:122px;background:var(--panel);color:#f0ece3;border:1px solid var(--line);padding:17px;text-align:left;cursor:pointer}
.bucket strong{display:block;font-size:14px;line-height:1.35}.bucket span{display:block;margin-top:8px;color:#7f8996;font-size:12px;line-height:1.5}
.bucket.correct{background:var(--lime);color:#111316;border-color:var(--lime)}.bucket.correct span{color:#465019}
.bucket:disabled{cursor:default}
.feedback{display:none;margin-top:17px;padding:15px 17px;border-left:4px solid var(--blue);background:#151b20;color:#cbd3dc;font-size:13px;line-height:1.7;font-weight:700}
.feedback.show{display:block}
.control-board{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.control-chip{min-height:94px;display:flex;align-items:flex-start;gap:13px;background:var(--panel);color:#dfe3e8;border:1px solid var(--line);padding:17px;text-align:left;cursor:pointer;font-size:13px;line-height:1.55;font-weight:800}
.control-chip .mark{flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;border:1px solid #59616c;color:#8d97a3}
.control-chip.active{border-color:var(--lime);background:#1d2416;color:#efffc5}.control-chip.active .mark{background:var(--lime);border-color:var(--lime);color:#101215}
.reply-paper{background:var(--paper);color:var(--ink);border:1px solid #d1c9b9;padding:21px;min-height:210px;box-shadow:8px 8px 0 #252930}
.paper-top{display:flex;justify-content:space-between;gap:12px;padding-bottom:11px;border-bottom:1px solid #c7bdab;color:#7b7469;font-size:12px;font-weight:950;letter-spacing:.14em}
.built-reply p{margin:15px 0 0;font-size:14px;line-height:1.7;font-weight:750}.built-reply b{display:inline-block;width:28px;color:#c54d3b}.built-reply .empty{color:#91897d}
.reply-parts{margin-top:22px;display:grid;gap:9px}
.reply-part{width:100%;display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:start;background:var(--panel);color:#e6e9ed;border:1px solid var(--line);padding:15px 17px;text-align:left;cursor:pointer}
.reply-part>span{color:var(--blue);font-size:12px;font-weight:950;letter-spacing:.08em}.reply-part p{margin:0;font-size:13px;line-height:1.6;font-weight:750}.reply-part.used{opacity:.32}
.pressure-box{margin-top:20px;border:1px solid #5a2b27;background:#221514;padding:21px}.pressure-box>span{color:var(--red);font-size:12px;font-weight:950;letter-spacing:.14em}.pressure-box blockquote{margin:16px 0 0;color:#fff0ea;font-size:clamp(25px,5vw,40px);line-height:1.3;letter-spacing:-.035em;font-weight:950}
.hold{background:transparent;color:var(--lime);border:2px solid var(--lime);font-size:15px;user-select:none;touch-action:none}.hold.pressing{background:var(--lime);color:#111316}
.steady-box{margin-top:20px;background:var(--lime);color:#111316;padding:20px}.steady-box span{font-size:12px;font-weight:950;letter-spacing:.14em}.steady-box p{margin:11px 0 0;font-size:16px;line-height:1.7;font-weight:850}
.result-grid{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}
.result-grid>div{min-height:112px;padding:16px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between}.result-grid>div:last-child{border-right:0}.result-grid span{color:#8c96a3;font-size:12px;line-height:1.4;font-weight:800}.result-grid strong{color:var(--lime);font-size:28px}
.rule-box{margin-top:22px;padding:20px;border:1px solid #3b4631;background:#151b12}.rule-box>span{color:var(--lime);font-size:12px;font-weight:950;letter-spacing:.12em}.rule-box p{margin:10px 0 0;color:#d9dfd2;font-size:14px;line-height:1.8}.rule-box strong{color:#fff}
.saved-panel{margin-top:18px;padding:17px;border:1px solid #3b4631;background:#171d14;color:#dce8c2;font-size:13px;line-height:1.6}.saved-panel b{color:var(--lime)}
.sync-status{margin:12px 0 0;color:#7f8996;font-size:12px;line-height:1.6}
.result-actions{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:9px}.result-actions button,.result-actions a{min-height:48px;border:1px solid var(--line);background:var(--panel);color:var(--text);display:grid;place-items:center;padding:10px;text-decoration:none;font-size:12px;font-weight:850;cursor:pointer}.result-actions a{grid-column:1/-1}
.hidden{display:none!important}
@media(max-width:680px){
  .app-shell{padding:0 14px 64px}.topbar{min-height:60px}.brand{font-size:12px}.session-pill{font-size:12px}
  .view{padding-top:34px}h1{font-size:clamp(34px,11vw,52px)}h2{font-size:clamp(31px,9vw,44px)}
  .lead{font-size:14px}.case-card{padding:18px;box-shadow:6px 6px 0 #252930}.case-top b{font-size:12px}
  .bucket-grid{grid-template-columns:1fr}.bucket{min-height:78px}.control-board{grid-template-columns:1fr}.control-chip{min-height:76px}
  .reply-part{grid-template-columns:76px 1fr;padding:14px}.result-grid{grid-template-columns:1fr 1fr}.result-grid>div{min-height:94px;border-bottom:1px solid var(--line)}.result-grid>div:nth-child(2){border-right:0}
  .primary,.next,.hold{min-height:56px}.meter-block{padding:17px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}