:root{font-family:system-ui,-apple-system,"PingFang SC",sans-serif;color:#33414d;background:#e9edf0;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
main{max-width:900px;margin:auto;padding:16px 28px 24px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.back{color:#526575;text-decoration:none;font-size:13px}
.badge{font-size:11px;letter-spacing:.08em;color:#4d6478;border:1px solid #b9c7d2;border-radius:20px;padding:7px 12px}
.intro{text-align:center;margin:10px 0 12px}
.eyebrow{font-size:10px;letter-spacing:.24em;color:#6b7f90}
h1{font-size:28px;letter-spacing:.15em;margin:7px 0 10px;font-weight:650}
h1 small{font-size:13px;letter-spacing:.1em;font-weight:500;vertical-align:middle;border-left:1px solid #b9c7d2;margin-left:5px;padding-left:12px;color:#6b7f90}
.intro>p:last-child{font-size:13px;margin:0;color:#65717b}
.picker{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:6px auto 10px;font-size:12px;color:#526575}
.picker select{font:13px system-ui;padding:7px 10px;border:1px solid #b9c7d2;border-radius:10px;background:#fff;color:#33414d;max-width:100%}
.picker .meta{font-variant-numeric:tabular-nums;color:#6b7f90}
.status{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:620px;margin:auto;font-size:12px;color:#65717b}
.status strong{font-size:24px;color:#33414d;margin-left:6px}
#progress{font-size:11px;font-variant-numeric:tabular-nums}
.board-wrap{width:100%;height:clamp(400px,calc(100svh - 360px),700px);min-height:380px}
canvas{width:100%;height:100%;display:block;touch-action:manipulation}
.message{margin:4px 0 16px;text-align:center;font-size:13px;min-height:36px;line-height:1.6}
.controls{display:flex;justify-content:center;gap:14px}
button{font:24px system-ui;color:#526575;background:#f9fbfc;border:1px solid #cfd9e1;border-radius:18px;min-width:74px;min-height:66px;padding:6px 12px;cursor:pointer;box-shadow:0 3px 0 #c5d1da}
button span{display:block;font-size:11px}
button:hover{background:#fff}
button:active{transform:translateY(2px);box-shadow:0 1px 0 #c5d1da}
button:disabled{opacity:.4;cursor:default}
button.hinted{border-color:#5b7a94;box-shadow:0 3px 0 #5b7a94,0 0 0 4px rgba(91,122,148,.25);animation:hint-pulse .7s ease-in-out infinite alternate}
@keyframes hint-pulse{from{transform:translateY(0)}to{transform:translateY(-4px)}}
button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #5b7a94;outline-offset:4px}
.evidence{max-width:620px;margin:22px auto 0;border-top:1px solid #cfd9e1;padding-top:14px}
.evidence h2{font-size:11px;letter-spacing:.18em;color:#6b7f90;margin:0 0 10px;font-weight:600}
.evidence dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:0;font-size:12.5px}
.evidence dl>div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed #d8e0e6;padding-bottom:6px}
.evidence dt{color:#6b7f90}
.evidence dd{margin:0;font-variant-numeric:tabular-nums;text-align:right;color:#33414d}
.witness{margin:12px 0 0;font-size:12px;color:#526575;font-variant-numeric:tabular-nums;text-align:center}
footer{text-align:center;margin:18px auto 0;max-width:560px;font-size:11px;color:#6b757e;line-height:1.7}
footer code{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;background:#dfe6ec;padding:1px 4px;border-radius:3px}
@media(max-width:540px){main{padding:16px 14px 20px}.board-wrap{height:380px;min-height:0}.controls{gap:9px}button{min-width:57px;min-height:60px;padding:5px 9px}.message{font-size:12px;margin-bottom:12px}.evidence dl{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){button:active{transform:none}}