:root{--paper:#f6f5ef;--ink:#202622;--lime:#b5ec43;--edge:#1a4a22;--well:#161a17;--travel:8px}*{box-sizing:border-box}html,body{margin:0;background:var(--paper);color:var(--ink);}body{max-width:1120px;margin:0 auto;padding:16px 20px 28px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.site-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px}.brand{font-weight:700;font-size:18px}.tag{font-weight:400;font-size:14px;opacity:.72;margin-left:.4em}.demo-mark{margin:0;font-size:14px;opacity:.7}.hero{display:grid;grid-template-columns:1fr minmax(280px,400px);gap:28px 36px;align-items:start}.left-copy h1{margin:0 0 18px;font-size:clamp(32px,5vw,58px);line-height:1.12;font-weight:750;letter-spacing:-.02em}.tally-label{margin:0;opacity:.7}.tally strong{display:block;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.tally-note{margin:6px 0 0;font-size:14px;opacity:.65}.machine{position:relative;width:100%;max-width:400px;height:300px;background:linear-gradient(165deg,#2a2f2b,#1c201d 55%,#141714);border-radius:10px;box-shadow:0 18px 28px rgba(20,24,20,.28),inset 0 1px 0 rgba(255,255,255,.08);overflow:visible}.screws{position:absolute;inset:10px;pointer-events:none}.screws i{position:absolute;width:7px;height:7px;border-radius:50%;background:#0e110f;box-shadow:inset 0 1px 0 #3a403c,0 0 0 1px #0a0c0a}.screws i:nth-child(1){top:0;left:0}.screws i:nth-child(2){top:0;right:0}.screws i:nth-child(3){bottom:0;left:0}.screws i:nth-child(4){bottom:0;right:0}.etch{position:absolute;top:14px;font:14px/1 "Arial Black",Arial,sans-serif;letter-spacing:.18em;color:#b9c6ae;opacity:.85;text-shadow:0 1px 0 rgba(0,0,0,.55)}.etch-l{left:22px}.etch-r{right:22px}.ticks{position:absolute;left:16px;right:16px;bottom:14px;height:8px;background:repeating-linear-gradient(90deg,#3d443f 0 1px,transparent 1px 12px);opacity:.45}.key-well{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:min(320px,86%);height:190px;background:var(--well);border-radius:6px;box-shadow:inset 0 10px 16px rgba(0,0,0,.55),inset 0 -2px 0 rgba(255,255,255,.04);padding:14px 16px}#strike-light{position:absolute;inset:8px;border-radius:4px;background:radial-gradient(ellipse at 30% 20%,rgba(181,236,67,.35),transparent 60%);opacity:0;pointer-events:none;transition:opacity .12s linear}.machine.is-hit #strike-light{opacity:1}#reset-key{appearance:none;border:0;padding:0;background:transparent;width:100%;height:100%;cursor:pointer;display:block}#reset-key:focus-visible{outline:3px solid var(--lime);outline-offset:3px}.keycap{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(180deg,#d4f86a 0%,var(--lime) 42%,#9ed62e 100%);border-radius:4px;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 10px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 10px);box-shadow:0 var(--travel) 0 var(--edge),0 calc(var(--travel) + 2px) 0 #0c1a0e,inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(40,80,10,.25);transform:translateY(0);transition:transform .12s cubic-bezier(.2,.7,.2,1),opacity .12s linear;position:relative}.keycap::before{content:"";position:absolute;top:8px;left:14%;right:22%;height:18%;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);border-radius:40% 40% 50% 50%;pointer-events:none}.key-en{font:italic 700 42px/1 "Arial Black",Arial,sans-serif;letter-spacing:.04em;color:#1a2a12;text-shadow:0 1px 0 rgba(255,255,255,.35)}.key-cn{margin-top:8px;font-size:18px;font-weight:600;color:#243318}#reset-key.is-down .keycap{transform:translateY(8px)}#reset-key.is-auto:not(.is-down) .keycap{transform:translateY(2px)}body[data-feel="spring"] .keycap{transition-timing-function:cubic-bezier(.18,1.4,.32,1);transition-duration:.22s}.personal{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:14px;font-size:16px}#plus-one{display:inline-block;min-width:1.6em;opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s}#plus-one.is-visible{opacity:1;transform:none}#sound-toggle,#clear-personal,#ambient-toggle,select{min-height:44px;font:inherit;font-size:14px;border:1px solid #c9c6bc;background:#fff;color:var(--ink);border-radius:6px;padding:0 12px}#sound-toggle:focus-visible,#clear-personal:focus-visible,#ambient-toggle:focus-visible,select:focus-visible{outline:3px solid var(--lime);outline-offset:2px}#audio-note{font-size:14px;opacity:.7}.controls{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:end;margin-top:28px;padding-top:16px;border-top:1px solid #e4e1d8}.controls label{display:flex;flex-direction:column;gap:4px;font-size:14px}footer{margin-top:22px;font-size:14px;opacity:.65}@media (max-width:700px){.hero{display:flex;flex-direction:column}.left-copy{display:contents}.left-copy h1{order:1;font-size:34px;max-width:18em}.tally{order:3}.right-play{order:2}.controls{order:4;display:grid;grid-template-columns:1fr 1fr}.controls button{grid-column:1/-1}footer{order:5}.machine{height:240px;max-width:272px}.key-well{height:150px;width:min(240px,88%)}#reset-key.is-down .keycap{transform:translateY(6px)}.tally strong{white-space:nowrap}.site-head{flex-direction:column;gap:4px}}@media (min-width:701px) and (max-width:768px){.hero{grid-template-columns:1fr 1fr}.left-copy h1{font-size:40px}.tally strong}@media (prefers-reduced-motion:reduce){.keycap,#plus-one,#strike-light{transition:none}#reset-key.is-auto:not(.is-down) .keycap{transform:none}}
/* Supervisor refinements: visible key travel, legible numbers, compact mobile rhythm. */
.hero{grid-template-columns:minmax(0,1fr) minmax(280px,400px)}
.left-copy,.right-play,.tally{min-width:0}
.tally strong{white-space:nowrap}
.tally-label{opacity:1}

#reset-key{position:relative;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
#reset-key::before{content:"";position:absolute;inset:8px 0 -8px;background:linear-gradient(#547c17,#294b11);border-radius:6px;box-shadow:0 4px 5px #090f0a}
.keycap{z-index:1;box-shadow:inset 0 2px 0 #e7ffa7,inset 0 -4px 0 #85b22a}
.keycap::before{left:8%;right:8%;top:5px;height:2px;border-radius:0;opacity:.6}
.key-en{font-size:54px;font-weight:900;letter-spacing:0}
#reset-key.is-down .keycap{transition-duration:35ms;transition-timing-function:cubic-bezier(.2,.8,.2,1)}
#reset-key.is-auto:not(.is-down) .keycap{transition-duration:100ms}
.personal p{margin:0}.personal{row-gap:6px}
#plus-one{color:#345e16;font-weight:800;transition-timing-function:cubic-bezier(.2,.8,.2,1)}
.controls select{max-width:100%;min-width:0}
@media(max-width:700px){
 body{padding:18px 20px 24px}.site-head{margin-bottom:24px}.brand{font-size:20px}.brand .tag{display:block;margin-left:0}
 .demo-mark{font-size:14px}.hero{gap:22px;align-items:stretch}.left-copy h1{font-size:36px;margin:0}
 .right-play{width:100%;display:flex;flex-direction:column;align-items:center}.machine{max-width:320px;height:228px}
 .key-well{width:86%;height:152px;padding:10px 12px}.key-en{font-size:46px}
 .personal{width:100%;justify-content:center;margin-top:20px;gap:8px 10px}.personal p{font-size:16px}
 #audio-note{flex-basis:100%;text-align:center;min-height:20px}.tally{text-align:center}
 .tally strong{letter-spacing:-.045em;line-height:1.12}
 .controls{margin-top:24px;gap:12px}.controls label:last-of-type{grid-column:1/-1}
 .controls select{width:100%}.etch{font-size:14px}.etch-l{left:26px}.etch-r{right:26px}
}
@media(max-width:340px){body{padding-left:20px;padding-right:20px}.left-copy h1{font-size:32px}.machine{max-width:272px;height:214px}.key-en{font-size:42px}.key-cn{font-size:17px}.tally strong}
@media(prefers-reduced-motion:reduce){#reset-key .keycap,#reset-key.is-down .keycap,#plus-one,#strike-light{transition:none}#reset-key.is-auto:not(.is-down) .keycap{transform:none}}

@media(min-width:701px) and (max-width:950px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px}.machine{height:280px}.key-en{font-size:48px}}

.personal-en{font-size:14px;color:#596057;margin-left:6px}@media(max-width:700px){.personal p{flex-basis:100%;text-align:center}}