@font-face{font-family:"Fraunces 72pt";src:url(Fraunces72pt-SemiBold.ttf) format("truetype");font-weight:600}@font-face{font-family:Schola;src:url(texgyreschola-regular.otf) format("opentype");font-weight:400}@font-face{font-family:Schola;src:url(texgyreschola-italic.otf) format("opentype");font-weight:400;font-style:italic}@font-face{font-family:Schola;src:url(texgyreschola-bold.otf) format("opentype");font-weight:700}:root{--bg: #ffffff;--panel: #fbf4d5;--panel-2: #eaf4dd;--line: #eee3bd;--line-2: #dcecd0;--edge: #7e6f60;--ink: #33261f;--muted: #6e6055;--accent: #2e7d32;--grad-a: #b07a00;--grad-b: #3f7d2f;--btn-a: #f7e98a;--btn-b: #cdeaa5;--down: #ffd9e6;--down-black: #ffc2d6;--guide: #c01e62;--focus: #1d4ed8;--halo: #fff7f9;--err: #b3341f}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:16px/1.55 Schola,Georgia,serif}#approot{display:contents}.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}a{color:var(--accent)}a:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}#page{min-height:100%;display:flex;flex-direction:column;gap:1.4rem;padding:2.2rem clamp(1rem,5vw,4rem);max-width:1180px;margin:0 auto}#mid{display:flex;flex-direction:column;gap:1.4rem}#top{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}h1{font-family:"Fraunces 72pt",serif;font-weight:600;font-size:2.6rem;margin:0;letter-spacing:.01em;background:linear-gradient(100deg,var(--grad-a),var(--grad-b));-webkit-background-clip:text;background-clip:text;color:transparent}#sub{color:var(--muted);font-style:italic}#sub.err{color:var(--err);font-style:normal}#controls{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;padding:1rem 1.25rem;background:var(--panel);border-radius:14px;border:1px solid var(--line);box-shadow:0 1px 2px #33261f0a,0 1px 4px #33261f0f}.ctl{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}.ctl>span{color:var(--muted);font-size:.8rem;font-variant:small-caps;letter-spacing:.04em}select,input[type=range]{accent-color:var(--accent)}select{max-width:100%;background:#fff;color:var(--ink);border:1px solid var(--edge);border-radius:8px;padding:.3rem .55rem;font:inherit;font-size:.9rem;box-shadow:0 1px 1px #33261f0d}select:focus-visible,input[type=range]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}#range{display:flex;align-items:center;justify-content:space-between;gap:.5rem .8rem;flex-wrap:wrap;background:var(--panel-2);border:1px solid var(--line-2);border-radius:14px;padding:.55rem 1rem;box-shadow:0 1px 2px #33261f0a,0 1px 4px #33261f0f}.rangetext{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}.shiftb{font:inherit;font-size:.9rem;font-variant:small-caps;letter-spacing:.04em;color:var(--ink);background:#fff;border:1px solid var(--edge);border-radius:999px;padding:.45rem 1.1rem;cursor:pointer;box-shadow:0 1px 1px #33261f0d}.shiftb:hover{border-color:var(--accent);box-shadow:0 2px 5px #33261f1a}.shiftb:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.shiftb[aria-disabled=true]{opacity:.55}#keyboard{display:flex;height:clamp(180px,30vh,260px);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;border-radius:12px;overflow:hidden;border:2px solid #26241f;background:#26241f;padding:0 1px;box-shadow:0 2px 6px #33261f1a,0 8px 24px #33261f14}.cell{position:relative;flex:1 1 0;min-width:0}.key{appearance:none;border:none;margin:0;padding:0;font:inherit;touch-action:none;cursor:pointer}.key.white{position:absolute;inset:0 1px 0 0;background:#fff;border-radius:0 0 3px 3px;display:flex;align-items:flex-end;justify-content:center}.key.white.down{background:var(--down);transform:translateY(2px)}.key.black{position:absolute;top:0;right:-30%;width:60%;height:60%;background:#1d1b19;border-radius:0 0 3px 3px;z-index:2}.key.black.down{background:var(--down-black);transform:translateY(2px)}.key:after{content:"";position:absolute;top:0;left:12%;right:12%;height:5px;border-radius:0 0 3px 3px;background:transparent}.key.down:after{background:var(--guide);box-shadow:0 0 10px 2px #ff82aa8c}.key:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--halo),inset 0 0 0 5px var(--focus);z-index:3}.key .n{color:#5c5348;font-size:.62rem;padding-bottom:.5rem;pointer-events:none;font-variant-numeric:tabular-nums}@media(prefers-reduced-motion:no-preference){.key,.key:after{transition:background .18s ease-out,transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease-out}.key.down,.key.down:after{transition-duration:.02s}}#foot{margin-top:auto;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:.85rem;font-style:italic;border-top:1px solid var(--line);padding-top:.9rem}#foot .who{color:var(--accent);font-style:normal}#foot a{font-style:normal}#about{max-width:38rem;display:block}#about p{margin:0 0 1rem}@media(max-width:959px){#page{padding:1.2rem clamp(.9rem,4vw,2rem);gap:1rem}#mid{gap:1rem}h1{font-size:2.1rem}}