:root{--paper:#f5f4f2;--surface:#fff;--ink:#292927;--muted:#858580;--line:#e3e1dc;--orange:#ed7842;--orange-light:#fff0e6;--noise:repeating-linear-gradient(17deg,#ffffff06 0px,#ffffff06 .6px,#00000004 .6px,#00000004 1.5px)}
*{box-sizing:border-box}html,body{margin:0;height:100%;width:100%;overflow:hidden}body{font-family:'Segoe UI Variable Text','Segoe UI',Arial,sans-serif;background:var(--paper);color:var(--ink);font-size:13px;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.5}button,a,input,select,textarea{-webkit-app-region:no-drag}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #ed78428c;outline-offset:4px}button{border:0;background:none}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button svg{pointer-events:none}a{color:inherit}code,kbd{font-family:Consolas,'SFMono-Regular',monospace}code{font-size:.9em;background:#eeece8;padding:3px 5px;border-radius:4px;color:#4e4d48}button,select,input{accent-color:var(--orange)}[hidden]{display:none!important}.app-scroll{height:100vh;overflow:auto;scrollbar-width:thin;scrollbar-color:#cecbc5 transparent;scroll-padding-top:90px}.titlebar+.app-scroll{height:calc(100vh - 27px)}.content-width{width:calc(100% - 100px);max-width:1120px;margin:0 auto}.titlebar{height:27px;display:flex;align-items:center;justify-content:space-between;padding-left:20px;-webkit-app-region:drag;background:var(--paper);border-bottom:1px solid #e9e6e0}.titlebar>span{font-size:8px;font-weight:600;letter-spacing:1.6px;color:#888781}.titlebar>span i{font-style:normal;color:#c0bdb7;margin:0 9px}.titlebar>div{height:100%;display:flex}.titlebar button{width:43px;height:100%;color:#8b8880;font-size:18px}.titlebar button:hover{background:#e6e3dc}.titlebar button:last-child:hover{background:#cd4b42;color:white}.site-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:18px max(32px,calc((100% - 1120px)/2));background:#f5f4f2eb;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid #e9e6df8c;min-height:77px}.wordmark{display:flex;align-items:center;gap:10px;padding:0;font-size:24px;letter-spacing:-1.1px;font-weight:700;flex-shrink:0}.brand-period{color:var(--orange)}.brand-key{display:grid;place-items:center;width:31px;height:32px;background:linear-gradient(135deg,#424244,#1e1e20);color:#fff;border-radius:8px;font-style:normal;font-size:21px;font-weight:500;box-shadow:inset 0 1px 0 #ffffff55,0 3px 0 #141416,0 5px 6px #0002;transform:rotate(-8deg);padding-bottom:2px}.site-nav nav{display:flex;gap:24px;margin-right:auto;margin-left:22px;align-items:center}.site-nav nav button{color:#85847e;font-size:11px;padding:6px 0;white-space:nowrap;transition:color .15s}.site-nav nav button:hover{color:var(--ink)}.nav-actions{display:flex;align-items:center;gap:10px}.audio-toggle{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:24px;background:#fffc;font-size:10px;padding:10px 12px;color:#77766f;white-space:nowrap}.status-dot{width:5px;height:5px;border-radius:50%;background:#c5bfb4}.sound-paused .status-dot{background:#c7c1b6}body[data-has-pack=true]:not(.sound-paused) .status-dot{background:#86a789;box-shadow:0 0 0 3px #86a78916}.icon-btn{display:inline-grid;place-items:center;width:33px;height:33px;border-radius:50%;color:#8b8880;flex-shrink:0;transition:background .18s}.icon-btn:hover{background:#eae6df;color:var(--ink)}.icon-btn svg{width:16px;height:16px}.icon-btn.small{width:25px;height:25px}.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 18px;border:1px solid transparent;border-radius:28px;font-weight:550;font-size:11px;white-space:nowrap;transition:transform .15s,background .15s,box-shadow .15s}.button:active{transform:translateY(1px)}.button svg{width:14px;height:14px}.button.black{background:linear-gradient(#353533,#222221);color:#fff;box-shadow:inset 0 1px 0 #ffffff24,0 2px 3px #0000000a}.button.black:hover{background:#151514;box-shadow:0 4px 10px #0002}.button.white{background:#f4f3ef;color:#292927;box-shadow:inset 0 1px 0 #fff}.button.outline{border-color:#dcd8d0;background:transparent;color:#77746b}.button.danger{background:#b94a3e;color:white}.intro{display:flex;align-items:center;justify-content:space-between;gap:70px;padding-top:43px;padding-bottom:30px;min-height:248px;max-width:1050px}.eyebrow{font-size:8px;font-weight:650;letter-spacing:2px;text-transform:uppercase;color:#99988f;display:flex;align-items:center;gap:7px;margin:0 0 17px}.eyebrow>i{height:5px;width:5px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px #ed784214}.intro h1{font-family:'Segoe UI Variable Display','Segoe UI',Arial,sans-serif;font-size:clamp(43px,4.9vw,64px);line-height:1.04;letter-spacing:-3px;font-weight:720;margin:0}.intro h1 em{font-style:normal;color:#95938c;font-weight:500}.intro-text{font-size:12px;line-height:1.85;color:#99968e;margin:17px 0 0}.cap-scene{position:relative;width:230px;height:210px;margin:0 57px 0 0;flex-shrink:0;perspective:700px}.hero-cap{position:absolute;left:50%;top:13px;width:130px;height:132px;padding:0;border-radius:20px;background:linear-gradient(120deg,#363638,#0f0f11);box-shadow:inset 1px 1px 1px #ffffff30,inset -1px -1px 2px #000a,5px 9px 0 #222224,7px 12px 0 #0d0d0f,10px 16px 7px -4px #0004;transform:translateY(0);transform-style:preserve-3d;transition:transform .13s ease-out,box-shadow .13s ease-out;touch-action:none;user-select:none;cursor:pointer;margin-left:-65px}.hero-cap:before{content:'';position:absolute;inset:8px 11px 23px;border-radius:13px;background:var(--noise),radial-gradient(ellipse at 48% 68%,#333335,#424245);box-shadow:inset 0 2px 3px #ffffff18,inset 0 -1px 2px #0008,0 0 2px #0008}.hero-cap.pushed{transform:translateY(8px);box-shadow:inset 1px 1px 1px #ffffff30,3px 4px 0 #222224,4px 6px 0 #111113,5px 8px 8px -4px #0004;cursor:pointer;transition:transform .06s ease-out,box-shadow .06s ease-out}.hero-cap-face{position:absolute;inset:10px 12px 25px;display:grid;place-items:center;color:#eeeae4;font-size:53px;font-weight:500;letter-spacing:-3px;text-shadow:0 1px 1px #000a}.hero-cap-face i{height:2px;width:23px;border-radius:3px;position:absolute;bottom:9px;left:50%;transform:translateX(-50%);background:#222223;box-shadow:0 1px 1px #ffffff15}.cap-shadow{position:absolute;width:143px;height:22px;left:50%;top:151px;transform:none;background:#201d1855;filter:blur(13px);border-radius:50%;margin-left:-71.5px}.hand-note{position:absolute;top:178px;left:0;white-space:nowrap;transform:rotate(-6deg);font:italic 15px Georgia,serif;color:#b6a58f}.hand-note b{display:inline-block;font-size:25px;transform:translateY(-6px) rotate(-13deg);margin-left:7px;font-weight:400}.cap-caption{position:absolute;font-size:7px;letter-spacing:2px;left:75px;top:166px;color:#bbb3a6;white-space:nowrap}.playground{padding-top:20px;scroll-margin-top:15px}.playground-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.playground-heading>.eyebrow{margin:0}.test-toolbar{display:flex;align-items:center;gap:20px}.durations{display:flex;gap:5px}.durations button{font-size:10px;color:#aaa69d;padding:5px 8px;border-radius:12px}.durations button.selected{background:#e7e2d9;color:#666054}.plain-button{display:flex;align-items:center;gap:5px;padding:0;color:#928d83;font-size:9px}.plain-button svg{width:12px;height:12px}.plain-button:hover{color:#2b2925}.typing-stats{display:flex;gap:18px;align-items:center;font-size:9px;color:#aaa294;margin:22px 0 7px}.typing-stats strong{font-size:15px;font-weight:550;color:#c17a4d;margin-right:3px;font-variant-numeric:tabular-nums}.typing-stats>span:nth-child(2) strong{color:#858078}.typing-stats>span:nth-child(3) strong{color:#858078}.typing-stats #test-result{margin-left:auto;font-size:10px;color:#b27d57}.typing-box{height:94px;position:relative;overflow:hidden;max-width:100%;margin-bottom:8px;mask-image:linear-gradient(#000 0%,#000 76%,#0000 100%)}.typing-words{font-family:'Segoe UI Variable Text','Segoe UI',sans-serif;font-weight:550;font-size:25px;letter-spacing:-.3px;line-height:1.65;color:#c9c5bc;white-space:pre-wrap;position:relative;pointer-events:none;transition:transform .13s}.typing-words>span{position:relative}.typing-words .correct{color:#6e6b64}.typing-words .incorrect{color:#c85f47;background:#c85f4710;text-decoration:underline;text-decoration-color:#d9a190;text-underline-offset:4px}.typing-words .current:before{content:'';position:absolute;width:2px;top:1px;bottom:0;left:-2px;background:var(--orange);animation:caret 1.05s step-end infinite;border-radius:1px}.typing-input,.typing-box textarea{resize:none;position:absolute;inset:0;height:100%;width:100%;opacity:.015;color:transparent;caret-color:transparent;font-size:24px;border:0;background:transparent;outline:0;cursor:text;z-index:2;padding:0}.typing-hint{display:flex;align-items:center;gap:7px;position:absolute;inset:0;z-index:1;justify-content:center;color:#a3937d;background:#f5f4f2d4;backdrop-filter:blur(4px);font-size:11px;transition:opacity .2s}.typing-hint svg{width:15px;height:15px}.typing-box:focus-within .typing-hint,.typing-box.has-started .typing-hint{opacity:0}.test-finished .typing-words{opacity:.6}.typing-box:focus-within .typing-words .current:before{animation:none}.keyboard-stage{position:relative;padding:12px 0 26px;perspective:1400px;isolation:isolate}.board-ambient{position:absolute;width:75%;height:70%;left:12%;bottom:0;border-radius:50%;background:radial-gradient(ellipse,#b3a49035,transparent 70%);filter:blur(25px);z-index:-1}.keyboard{width:100%;position:relative;padding:13px 13px 25px;border:1px solid #4b4b4c;border-radius:20px;background:linear-gradient(145deg,#7d7d7d,#4b4b4c 16%,#4d4d4f 85%,#777779);box-shadow:inset 0 1px 1px #e7e7e79c,inset 0 -2px 1px #111a,0 6px 0 #39393b,0 8px 0 #262628,0 20px 24px -12px #322a2040;transform:rotateX(5deg);transform-origin:50% 100%;user-select:none;-webkit-user-select:none}.keyboard:before{content:'';position:absolute;inset:5px;border:1px solid #ffffff12;border-radius:16px;pointer-events:none}.key-row{display:flex;gap:5px;margin-bottom:5px}.key-row:last-of-type{margin-bottom:0}.key{position:relative;display:block;flex-basis:0!important;min-width:0;height:clamp(37px,4.2vw,52px);padding:0;border:1px solid #444448;border-radius:8px;background:linear-gradient(150deg,#b8b8b8,#9c9c9d 35%,#d0d0d0 80%,#a6a6a7);box-shadow:0 1px 2px #0007,inset 0 1px 0 #fff9;transition:transform 65ms,box-shadow 65ms;touch-action:manipulation}.key-face{position:absolute;inset:2px 4px 7px;border:1px solid #dddeda;border-radius:6px 6px 7px 7px;background:var(--noise),radial-gradient(ellipse at 50% 73%,#fffefb 15%,#f6f5f1 66%,#e6e6e3 100%);color:#575754;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #d0d1cf,0 1px 1px #8888;transition:background .09s,transform 65ms;color-scheme:light}.key .legend{font-size:11px;font-weight:500;position:relative;pointer-events:none;line-height:1}.key .legend.small{font-size:8px;font-weight:400}.key .key-face:has(small){flex-direction:column;gap:7px}.key .key-face small{font-size:8px;font-weight:400;line-height:.6;opacity:.6;pointer-events:none}.row-0 .key{height:34px}.row-0 .key .legend{font-size:8px;font-weight:400}.row-0{margin-bottom:8px}.key-spacer{flex-basis:0;min-width:0}.key.modifier{background:linear-gradient(150deg,#5c5c5d,#414143 60%,#5c5c5f);border-color:#3d3d40;box-shadow:0 1px 2px #0007,inset 0 1px 0 #ffffff42}.key.modifier .key-face{background:var(--noise),radial-gradient(ellipse at 50% 70%,#777777,#7b7b7c);border-color:#737375;color:#e5e3dd;box-shadow:inset 0 1px 1px #ffffff2b,inset 0 -1px 1px #0002,0 1px 1px #0003}.key.accent{background:linear-gradient(145deg,#c2784b,#95582f);border-color:#844b29}.key.accent .key-face{background:var(--noise),radial-gradient(ellipse at 50% 70%,#eb8252,#e47a49);border-color:#e88753;color:#662f12;box-shadow:inset 0 1px 0 #ffb2858c,inset 0 -1px 1px #ae4f2e,0 1px 1px #0002}.key.pressed{transform:translateY(3px);box-shadow:0 0 0 1px #eda77466,0 0 13px #e7844144}.key.pressed .key-face{transform:translateY(1px);background:var(--noise),radial-gradient(ellipse at center,#ecac7b,#e68c51);border-color:#ffc197;color:#663c1f;box-shadow:inset 0 1px 1px #ffe3c99c,inset 0 -1px 2px #a5683c44}.key.fading .key-face{border-color:#d5a37d}.key:not(.pressed):hover .key-face{filter:brightness(.98);border-color:#bda98b}.key.space .key-face{inset-left:5px;inset-right:5px}.space-mark{width:26px;height:1px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#ceccc5;box-shadow:0 1px 0 #fff}.homing{position:absolute;bottom:6px;width:8px;height:1px;background:#c4c2bb;box-shadow:0 1px 0 #fff}.case-mark{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);font-size:6px;font-weight:550;letter-spacing:2px;color:#ffffff32;display:flex;align-items:center;gap:5px;line-height:1}.case-mark i{width:2px;height:2px;border-radius:50%;background:#ed784280}.no-labels .legend,.no-labels .key-face small{visibility:hidden}.theme-silver.keyboard{background:linear-gradient(140deg,#e1e1e3,#bfc0c2 25%,#d5d5d7 85%,#f0f0f2);border-color:#b6b7b9;box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #a2a3a8,0 6px 0 #b5b6b9,0 8px 0 #a4a5a9,0 20px 24px -12px #322a2040}.theme-silver .key{border-color:#a8aaad;box-shadow:0 1px 2px #0004,inset 0 1px 0 #fffc}.theme-silver .key.modifier{background:linear-gradient(150deg,#bdbfc2,#c6c7ca 75%,#d6d8db);border-color:#acadb0}.theme-silver .key.modifier .key-face{background:var(--noise),radial-gradient(ellipse at 50% 73%,#fafaf8,#eeeef0);border-color:#d8d8db;color:#7d7c78;box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #c3c5c7}.theme-silver .case-mark{color:#71727577}.theme-midnight.keyboard{background:linear-gradient(145deg,#373739,#222224 40%,#2b2b2d);border-color:#19191b;box-shadow:inset 0 1px 1px #ffffff4d,inset 0 -1px 1px #000,0 6px 0 #19191b,0 8px 0 #111113,0 20px 24px -12px #322a2040}.theme-midnight .key{background:linear-gradient(150deg,#414143,#29292c 75%,#414146);border-color:#171719;box-shadow:0 1px 2px #0009,inset 0 1px 0 #ffffff24}.theme-midnight .key-face{background:var(--noise),radial-gradient(ellipse at 50% 73%,#38383b,#424246);border-color:#3b3b3e;color:#c5c3bc;box-shadow:inset 0 1px 1px #ffffff1a,inset 0 -1px 1px #0008}.theme-midnight .key.modifier .key-face{background:var(--noise),radial-gradient(ellipse at 50% 73%,#2e2e31,#353538);border-color:#2f2f32}.theme-midnight .key.accent .key-face{background:var(--noise),radial-gradient(ellipse at center,#dc783c,#c26733);border-color:#df824e;color:#51250b}.theme-midnight .key.pressed .key-face,.theme-silver .key.pressed .key-face{background:linear-gradient(#e9a470,#dc8850);border-color:#ffc197;color:#663c1f}.theme-midnight .space-mark,.theme-midnight .homing{background:#252528;box-shadow:0 1px 0 #ffffff12}.board-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:45px;padding:0 2px}.switch-picker{display:flex;align-items:center;gap:12px}.micro-label{font-size:7px;letter-spacing:1.6px;color:#a8a197;white-space:nowrap}.switch-picker select{padding:7px 26px 7px 10px;border:1px solid #dfdbd3;border-radius:20px;background:#faf9f7;color:#867e71;max-width:230px;min-width:160px;font-size:10px}.key-readout{display:flex;align-items:center;justify-content:center;gap:6px;color:#aaa294;font-size:9px;min-width:120px}.key-readout>i{height:4px;width:4px;background:#b4b6a7;border-radius:50%;transition:background .1s}.key-readout.active>i{background:#e7854f;box-shadow:0 0 0 4px #e7854f15}.surface-picker{display:flex;align-items:center;gap:7px}.surface{padding:4px;border:1px solid transparent;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}.surface>i{height:14px;width:14px;border-radius:50%;border:1px solid #0002;background:linear-gradient(130deg,#fcfcfc,#c8c8cb)}.surface.graphite>i{background:linear-gradient(130deg,#a0a09d,#545453)}.surface.midnight>i{background:linear-gradient(130deg,#414144,#171719)}.surface.selected{border-color:#b29e86}.empty-pack{background:#efebe4a8;border:1px solid #e9e3d9;border-radius:10px;padding:13px 17px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:17px;font-size:11px;color:#97846b}.empty-pack>span{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.empty-pack small{font-size:9px;color:#afa08e;margin-left:5px}.empty-pack svg{width:15px;height:15px}.text-button{display:inline-flex;align-items:center;gap:6px;padding:0;color:#b58a60;font-size:10px;white-space:nowrap}.text-button svg{width:13px;height:13px}.text-button:hover{color:#7e512e}.playground-foot{display:flex;justify-content:space-between;align-items:center;padding-top:16px;font-size:8px;color:#b0a89b}.playground-foot>span:last-child{display:flex;align-items:center;gap:5px}.playground-foot svg{width:11px;height:11px}.native-note{padding:10px 14px;border-radius:8px;background:#fff0d8;border:1px solid #e9cda4;color:#a47d3e;font-size:10px}.sound-lab{padding-top:95px;scroll-margin-top:25px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:29px}.section-heading .eyebrow{margin-bottom:12px}.section-heading h2{font-size:44px;line-height:1.08;letter-spacing:-2px;font-weight:650;margin:0}.section-heading h2 em{font-style:normal;color:#a7a197;font-weight:500}.section-heading>p{font-size:11px;color:#a29a8c;line-height:1.8;margin:0 0 3px}.studio-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.tone-card,.playback-card{background:var(--surface);border:1px solid #e8e3db;border-radius:19px;padding:26px 28px;box-shadow:0 4px 10px #39332802}.card-title{display:flex;align-items:center;justify-content:space-between;gap:15px}.card-title h3{font-size:13px;font-weight:550;margin:0}.card-title .text-button{font-size:9px;color:#aaa08e}.card-title .text-button svg{width:11px;height:11px}.tone-workspace{padding:24px 22px 19px;position:relative;width:100%;max-width:350px;margin:auto}.tone-pad{height:205px;width:100%;position:relative;overflow:hidden;border:1px solid #dfd5c7;border-radius:10px;background:radial-gradient(ellipse at 90% 15%,#f8e7da,transparent 70%),radial-gradient(ellipse at 10% 100%,#dcd7cd,transparent 80%),#f5f2ec;touch-action:none;cursor:crosshair;box-shadow:inset 0 1px 5px #48371605}.tone-cross{position:absolute;pointer-events:none;background:#d2c4b330}.tone-cross.horizontal{height:1px;width:100%;top:50%;left:0}.tone-cross.vertical{width:1px;height:100%;top:0;left:50%}.tone-pad:after{content:'';position:absolute;inset:25%;border:1px dashed #cdbba335;border-radius:50%;pointer-events:none}.tone-knob{position:absolute;width:24px;height:24px;transform:translate(-50%,-50%);background:linear-gradient(145deg,#faac78,#e47c40);border-radius:50%;border:1px solid #f9a56d;box-shadow:inset 0 1px 1px #ffd5b4,0 2px 4px #a86c3b44,0 0 0 7px #df9f6f18;z-index:2;pointer-events:none}.tone-knob b{position:absolute;inset:8px;border:1px solid #a5532829;border-radius:50%;background:#db824820}.tone-bright,.tone-warm{position:absolute;font-size:7px;letter-spacing:1.2px;color:#b3a18b;left:0;top:50%;writing-mode:vertical-rl;transform:rotate(180deg)}.tone-bright{top:45px}.tone-warm{top:auto;bottom:46px}.tone-axis{position:absolute;left:22px;right:22px;bottom:2px;display:flex;justify-content:space-between;font-size:7px;letter-spacing:1.2px;color:#b3a18b}.tone-footer{display:flex;align-items:center;justify-content:space-between;font-size:9px;margin-top:14px;color:#b7a992;gap:15px}.tone-footer>span:first-child{background:#f6f0e6;color:#b18d64;border:1px solid #eee4d5;padding:6px 8px;border-radius:6px;font-size:8px}.recording-heading{display:flex;align-items:center;gap:12px}.recording-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#f2eee7;color:#b9a58c}.recording-icon svg{width:17px;height:17px}.recording-heading h3{font-size:13px;font-weight:550;margin:0 0 4px}.recording-heading p{font-size:9px;color:#b1a697;margin:0}.recording-heading>.icon-btn{margin-left:auto;border:1px solid #e9e2d7}.wave-bars{display:flex;gap:2px;align-items:center;justify-content:center;height:62px;padding:0 5px}.wave-bars>i{width:3px;flex:1;max-height:48px;background:#d9a370;border-radius:3px;min-height:2px}.wave-empty{height:62px;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px}.wave-empty>span{width:100%;height:1px;background:linear-gradient(to right,transparent,#ddd4c8,transparent)}.wave-empty small{font-size:8px;color:#c3b5a3}.volume-label{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#a19381;margin-bottom:12px}.volume-label label{display:flex;align-items:center;gap:7px}.volume-label svg{height:13px;width:13px}input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:4px;border-radius:5px;background:linear-gradient(to right,#d4a67f var(--progress,50%),#eee9e0 var(--progress,50%));cursor:pointer;display:block;margin:0 0 16px}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;background:#d6a477;border:3px solid white;border-radius:50%;box-shadow:0 1px 5px #9b775844}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid #f0ebe3}.setting-row:last-child{border-bottom:0}.setting-row>div{display:flex;gap:12px;align-items:center}.setting-row>div>svg{width:16px;height:16px;color:#b3a18b}.setting-row strong{font-size:11px;font-weight:500;display:block;color:#787064}.setting-row small{font-size:9px;color:#b0a28f;display:block;line-height:1.6;margin-top:3px}.playback-options .setting-row{padding:10px 0}.playback-options .setting-row small{font-size:8px}.switch{width:33px;height:20px;flex-shrink:0;position:relative;display:inline-block;line-height:0}.switch input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}.switch>span{position:absolute;inset:0;background:#d8d2c8;border-radius:20px;transition:background .15s}.switch>span:after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #0002;transition:transform .15s}.switch input:checked+span{background:#c3956e}.switch input:checked+span:after{transform:translateX(13px)}.switch input:focus-visible+span{outline:3px solid #ed78428c;outline-offset:4px}.details{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-top:23px}.detail-card{background:#eeece7;border:1px solid #e8e4dc;border-radius:17px;padding:20px 21px 21px}.detail-demo{height:95px;display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:10px}.mini-cap{position:relative;display:grid;place-items:center;width:42px;height:43px;border-radius:8px;background:linear-gradient(140deg,#fdfbf8,#dfdcd6);border:1px solid #d5cfc6;box-shadow:inset 0 1px 1px #fff,2px 4px 0 #cac3b8,3px 6px 9px #42372918;font-size:13px;color:#b1a28c;transform:rotate(-5deg);transition:transform .12s,box-shadow .12s}.mini-cap:active{transform:rotate(-5deg) translateY(3px);box-shadow:1px 1px 0 #c7beb0,2px 2px 4px #42372918}.mini-cap svg{width:18px;height:18px}.stereo-track{display:flex;align-items:center;gap:3px}.stereo-track i{width:2px;background:#c6b596;border-radius:2px;height:7px}.stereo-track i:nth-child(2),.stereo-track i:nth-child(4){height:14px}.stereo-track i:nth-child(3){height:21px;background:#d09866}.detail-card h3{font-size:12px;font-weight:550;margin:0 0 10px;letter-spacing:-.2px}.detail-card p{font-size:10px;color:#a49a89;line-height:1.8;margin:0 0 15px;min-height:52px}.detail-card .text-button{font-size:8px}.detail-card .text-button svg{width:11px;height:11px}.press-demo>span{font-size:6px;letter-spacing:1px;line-height:1.5;color:#bbb09e;text-align:center}.press-demo>span i{font-size:10px;color:#c19e76}.press-demo .mini-cap:last-child{transform:rotate(6deg)}.mouse-demo{position:relative;width:57px;height:79px;display:flex;background:linear-gradient(140deg,#eeebe5,#d6d1c8);border:1px solid #c9c0b2;border-radius:30px;box-shadow:inset 0 2px 2px #fff8,3px 5px 1px #c6bdb0,4px 7px 8px #5b442b15;transform:rotate(-9deg);overflow:hidden}.mouse-demo:after{content:'';position:absolute;left:0;right:0;height:1px;top:37px;background:#c3b9aa;pointer-events:none}.mouse-demo button{flex:1;padding:8px 0 38px;font-size:7px;color:#a7977e}.mouse-demo button:active{background:#e4bb95}.mouse-demo .mouse-wheel{position:absolute;top:10px;left:23px;height:19px;width:7px;background:repeating-linear-gradient(0deg,#beb4a5 0px,#d1c8bc 2px);border:1px solid #b7ab98;border-radius:7px;padding:0;z-index:2}.privacy-lock{width:46px;height:39px;background:linear-gradient(140deg,#d6c5ac,#baa68b);border:1px solid #c7b59a;border-radius:10px;position:relative;display:grid;place-items:center;box-shadow:inset 0 1px 1px #f9e9d2,0 4px 0 #b2a084;margin-top:15px}.privacy-lock>i{position:absolute;top:-24px;width:29px;height:31px;border:5px solid #c2b298;border-radius:19px 19px 2px 2px;border-bottom:0;box-shadow:inset 0 1px 1px #f7e7cd}.privacy-lock svg{color:#f9f4ec;width:20px;height:20px}.local-badge{display:flex;gap:6px;align-items:center;font-size:6px;letter-spacing:1.1px;color:#a39780}.local-badge>i{width:4px;height:4px;border-radius:50%;background:#9caa83}.manual-section{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;background:#2a2927;border:1px solid #32312f;border-radius:22px;padding:48px 55px;margin-top:88px;overflow:hidden;position:relative;min-height:420px}.manual-art{position:relative;height:280px;isolation:isolate;perspective:900px}.manual-art:before{content:'';position:absolute;inset:-50px;background:radial-gradient(ellipse,#7d716133,transparent 70%);z-index:-1}.manual-cap{width:137px;height:140px;border-radius:20px;background:linear-gradient(130deg,#dfddd7,#aba69d);box-shadow:inset 0 1px 1px #fff9,7px 10px 0 #a39b8d,8px 13px 0 #8a8174,10px 20px 20px #0004;position:absolute;top:26px;left:20px;transform:rotate(-15deg)}.manual-cap>span{position:absolute;inset:8px 12px 24px;border-radius:13px;background:var(--noise),radial-gradient(ellipse at 50% 70%,#f4f1eb,#dcd8cf);box-shadow:inset 0 1px 2px #fffc,inset 0 -1px 1px #7773;display:grid;place-items:center;color:#b3a58f;font-size:34px}.manual-cap.cap-dark{background:linear-gradient(130deg,#3f3d3a,#1c1b19);left:160px;top:103px;transform:rotate(12deg);box-shadow:inset 0 1px 1px #ffffff22,5px 10px 0 #1a1917,7px 12px 0 #141310,10px 18px 20px #0005}.manual-cap.cap-dark>span{background:var(--noise),radial-gradient(ellipse at 50% 70%,#484440,#3b3733);color:#c7b194;box-shadow:inset 0 1px 1px #ffffff1a,inset 0 -1px 2px #0007}.manual-art-note{position:absolute;bottom:-8px;left:15px;font:italic 17px Georgia,serif;color:#8c8071;transform:rotate(-6deg)}.manual-copy>.eyebrow{color:#8b7b66;font-size:7px;letter-spacing:1.6px;margin-bottom:13px}.manual-copy h2{font-size:43px;line-height:1.07;letter-spacing:-2px;font-weight:600;color:#eee9e0;margin:0}.manual-copy h2 em{font-style:normal;color:#bfa786;font-weight:450}.manual-copy ol{list-style:none;padding:0;margin:24px 0 27px;display:grid;gap:18px}.manual-copy li{display:flex;gap:13px;align-items:flex-start}.manual-copy li>i{font-size:8px;font-style:normal;color:#948169;border:1px solid #5d5142;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;flex-shrink:0}.manual-copy li strong{font-size:11px;color:#c4b7a4;font-weight:500;display:block}.manual-copy li small{font-size:9px;color:#807466;display:block;line-height:1.6;margin-top:3px}.manual-copy code{background:#3e3932;color:#ab9477;border-radius:3px;font-size:8px}.manual-copy>div:last-child{display:flex;align-items:center;gap:18px}.manual-copy .button{padding:11px 15px;font-size:9px}.manual-copy .text-button{font-size:9px;color:#9f8768}.site-footer{padding:45px 0 35px;display:flex;justify-content:space-between;gap:25px;align-items:center;font-size:8px;color:#aaa091}.footer-wordmark{font-size:22px;font-weight:700;letter-spacing:-1px;color:#999085}.site-footer>div{display:flex;gap:19px;align-items:center}.site-footer button{padding:0;font-size:8px;color:#aaa091}.site-footer button:hover{color:#5e5140}.sheet{position:fixed;inset:0 0 0 auto;margin:0;width:min(660px,100vw);max-width:none;height:100%;max-height:none;border:0;border-left:1px solid #fff8;border-radius:22px 0 0 22px;background:#faf9f6;color:#413a31;padding:0;box-shadow:-15px 0 70px #1c130f22;overflow:auto;scrollbar-width:thin;scrollbar-color:#cfc6b8 transparent}.sheet[open]{animation:sheet-in .2s ease-out}.sheet::backdrop{background:#23201bc2;backdrop-filter:blur(7px)}#panel-body{padding:33px 35px 40px}.sheet-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.sheet-header .eyebrow{font-size:7px;margin-bottom:10px;letter-spacing:1.6px;color:#c0a080}.sheet-header h2{font-size:29px;letter-spacing:-1.2px;font-weight:600;margin:0;line-height:1.12}.sheet-header>.icon-btn{margin:-8px -9px 0 0;background:#eee9e1}.sheet-description{font-size:11px;color:#a39481;line-height:1.8;margin:17px 0 24px;max-width:490px}.import-box{border:1px dashed #cfc1ac;border-radius:13px;padding:25px 25px 17px;background:linear-gradient(145deg,#f4f0e9,#f8f5ef);transition:background .15s,border .15s}.import-box.drag-over{background:#fbe5d3;border-color:#d68b55}.import-box>div:first-child{display:flex;flex-direction:column;align-items:center;gap:10px}.import-box>div:first-child>svg{width:22px;height:22px;color:#b69c7c;margin-bottom:5px}.import-box strong{font-size:14px;font-weight:500;color:#8b7558}.import-box>div:first-child>span{font-size:8px;color:#bba98f}.pack-name-label{font-size:9px;display:block;color:#b49d7f;margin-top:20px}.pack-name-label input{background:#fff8;border:1px solid #ded2c0;border-radius:6px;padding:10px 11px;color:#887153;width:100%;font-size:11px;margin-top:6px;outline-offset:2px}.pack-name-label input::placeholder{color:#c7b79f}.import-actions{display:flex;gap:10px;justify-content:center;margin:17px 0 10px}.import-actions .button{font-size:10px;padding:10px 14px}.import-box>small{display:block;text-align:center;color:#c0ae95;font-size:8px}.import-box #import-progress{font-size:10px;color:#ae683d;line-height:1.7;margin:10px 0 0}.naming-tip{display:flex;align-items:center;gap:7px;padding:14px 0}.naming-tip code{font-size:8px;color:#b5976f;background:#eee7dc}.naming-tip>span{font-size:8px;color:#b5a285;margin-left:5px}.naming-tip button{display:inline-flex;align-items:center;gap:3px;color:#b38b5a;font-size:8px;padding:0}.naming-tip svg{width:10px;height:10px}.library-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:25px 0 13px}.library-header h3{font-size:12px;font-weight:550;margin:0}.library-header h3>span{font-size:9px;background:#ece4d7;border-radius:4px;padding:2px 5px;color:#b29b7d;margin-left:5px}.library-header>span{font-size:8px;color:#bbaa91}.pack-list{display:grid;gap:7px}.pack-row{display:flex;align-items:center;gap:3px;background:#f0ede6;border:1px solid #e9e2d7;border-radius:9px;padding:4px 9px 4px 4px}.pack-row.active{border-color:#c5aa86;background:#f0e7d9}.pack-pick{display:flex;align-items:center;gap:12px;flex:1;padding:7px 9px;text-align:left;min-width:0}.pack-pick>span:nth-child(2){min-width:0;flex:1}.pack-pick strong{font-size:11px;font-weight:500;display:block;color:#8b7455;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pack-pick small{font-size:8px;color:#b3a084;display:block;margin-top:4px}.pack-pick>i{color:#b3936b}.pack-pick>i svg{width:13px;height:13px}.pack-key{font-style:normal;font-size:18px;color:#b19977;border:1px solid #d3c5af;background:linear-gradient(140deg,#f5f0e7,#daceb9);width:32px;height:31px;display:grid;place-items:center;border-radius:7px;box-shadow:2px 3px 0 #c6b79e;transform:rotate(-5deg);flex-shrink:0}.pack-row .icon-btn{height:27px;width:27px;color:#b5a184}.pack-row .icon-btn svg{width:12px;height:12px}.library-empty{padding:23px;text-align:center;background:#f1ede5;border:1px solid #e8dfd1;border-radius:9px;color:#b2a082;font-size:10px}.delete-confirm{border:1px solid #d7aa8c;background:#f8eadd;border-radius:8px;padding:13px;margin-top:12px;font-size:10px;color:#a97a58}.delete-confirm p{margin:0 0 10px;line-height:1.7}.delete-confirm .button{font-size:9px;padding:7px 12px}.sample-table{max-height:360px;overflow:auto;border:1px solid #e5dbcd;border-radius:9px;scrollbar-width:thin}.sample-row{display:grid;grid-template-columns:25px minmax(80px,1fr) 130px 85px;align-items:center;gap:9px;padding:9px 10px;border-bottom:1px solid #ece4d9}.sample-row:last-child{border-bottom:0}.sample-row>span{font:9px Consolas,monospace;color:#aa8b61;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sample-row>.icon-btn{width:23px;height:23px;color:#b89a70}.sample-row>.icon-btn svg{width:11px;height:11px}.sample-row select{min-width:0;font-size:8px;color:#a38c6c;border:1px solid #ded0bc;background:#f8f3ec;padding:6px 5px;border-radius:5px}.assignment-note{font-size:9px;line-height:1.8;color:#b89d78}.settings-heading{font-size:8px;text-transform:uppercase;letter-spacing:1.5px;color:#b39670;font-weight:550;margin:28px 0 6px}.sheet .setting-row{padding:15px 0;border-color:#e9e1d5}.sheet .setting-row strong{font-size:11px;color:#897455}.sheet .setting-row small{font-size:9px;color:#b6a082}.sheet .setting-row>div>svg{color:#bca17d}.sheet .switch input:checked+span{background:#bd9567}.field{margin:18px 0}.field>label{display:block;font-size:9px;color:#ad936f;margin-bottom:8px}.field select{width:100%;padding:10px;border:1px solid #dcd0bb;background:#f4efe6;color:#a58a64;font-size:10px;border-radius:7px}.field input[type=range]{margin-top:14px}.quit-button{margin-top:20px}.guide-steps{padding:0;margin:25px 0;list-style:none;display:grid;gap:28px}.guide-steps>li{display:flex;gap:16px}.guide-steps>li>b{width:25px;height:25px;border-radius:50%;background:#eee5d6;color:#b08f60;display:grid;place-items:center;font-size:10px;flex-shrink:0;font-weight:500}.guide-steps h3{font-size:13px;font-weight:550;margin:3px 0 9px}.guide-steps p{font-size:11px;color:#ad9879;line-height:1.8;margin:0 0 10px}.guide-steps code{color:#b18b58;background:#ede2d0}.guide-table{font-size:9px;width:100%;border-collapse:collapse;margin:15px 0}.guide-table td{padding:9px 6px;border-bottom:1px solid #e5d9c6;color:#ad9776;vertical-align:middle}.guide-table td:first-child{width:51%}.guide-table code{white-space:normal;line-height:1.7;display:inline-block}.guide-callout{padding:15px 18px;border-radius:9px;border:1px solid #e2d4be;background:#f1e8d9;color:#b19a75;font-size:10px;line-height:1.9;margin:24px 0}.guide-actions{display:flex;gap:10px;margin-top:25px}.guide-actions .button{font-size:9px;padding:10px 14px}.feature-checklist{margin-top:20px}.feature-checklist article{display:flex;align-items:flex-start;gap:13px;border-bottom:1px solid #e7dccb;padding:14px 0}.feature-checklist article>span{font-size:8px;color:#bea789;padding-top:3px}.feature-checklist article>div{flex:1}.feature-checklist h3{font-size:11px;font-weight:500;margin:0 0 5px}.feature-checklist p{font-size:9px;color:#b49e7d;line-height:1.7;margin:0;max-width:340px}.feature-checklist b{font-size:7px;font-weight:500;white-space:nowrap;border:1px solid #d6c9b1;background:#eee5d4;border-radius:4px;padding:4px 5px;color:#a08b63;margin-top:1px}.feature-checklist b.pending{background:#f4e4d4;border-color:#e0b997;color:#b6824f}#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,14px);opacity:0;pointer-events:none;max-width:85%;font-size:11px;line-height:1.6;color:#f7f1e7;background:#322e29f5;padding:12px 20px;border:1px solid #5f554899;border-radius:10px;box-shadow:0 10px 25px #0002;z-index:999;transition:opacity .18s,transform .18s}#toast.show{opacity:1;transform:translate(-50%,0)}#browser-floating{position:fixed;top:120px;left:100px;width:430px;z-index:70;pointer-events:none;padding:8px}.mini.keyboard{padding:7px 7px 16px;border-radius:12px;transform:none;box-shadow:inset 0 1px 1px #ffffff5c,0 3px 0 #262628,0 7px 12px #0002}.mini .key-row{gap:2px;margin-bottom:2px}.mini .row-0{margin-bottom:4px}.mini .key{height:21px;border-radius:4px}.mini .row-0 .key{height:17px}.mini .key-face{inset:1px 2px 4px;border-radius:3px}.mini .key .legend{font-size:6px}.mini .key .legend.small,.mini .row-0 .key .legend{font-size:4px}.mini .key .key-face small{font-size:4px;line-height:.5}.mini .key .key-face:has(small){gap:3px}.mini .space-mark{width:12px}.mini .homing{width:4px;bottom:3px}.mini .case-mark{bottom:5px;font-size:3px;letter-spacing:1.2px}.mini .key.pressed{transform:translateY(1px)}.overlay-mode{background:transparent!important;overflow:hidden}.overlay-mode #toast{display:none}.overlay-root{padding:9px;pointer-events:none}.overlay-root .mini .key{height:23px}.overlay-root .mini .row-0 .key{height:18px}.overlay-root .mini .key .legend{font-size:7px}.overlay-root .mini .key .legend.small{font-size:5px}.overlay-root .mini .key .key-face small{font-size:5px}.zen-exit{display:none;position:fixed;z-index:90;top:24px;right:28px;border:1px solid #d9d0c1;background:#f9f6f0f0;border-radius:20px;color:#a28e70;font-size:9px;padding:9px 12px;align-items:center;gap:7px}.zen-exit svg{width:12px;height:12px}.zen-exit kbd{font-size:7px;padding:2px 4px;border:1px solid #e2d6c1;border-radius:3px;margin-left:4px}.zen-mode .site-nav,.zen-mode .intro,.zen-mode .sound-lab,.zen-mode .details,.zen-mode .manual-section,.zen-mode .site-footer,.zen-mode .empty-pack,.zen-mode .playground-foot,.zen-mode .playground-heading{display:none}.zen-mode .playground{padding-top:0;max-width:1040px}.zen-mode main{min-height:calc(100vh - 28px);display:flex;align-items:center}.zen-mode .typing-box{height:128px;margin-bottom:20px}.zen-mode .typing-words{font-size:30px;line-height:1.7}.zen-mode .typing-stats{margin:10px 0 15px}.zen-mode .zen-exit{display:flex}.zen-mode .app-scroll{scrollbar-width:none}.startup-error{padding:50px;max-width:700px;margin:auto}.startup-error h1{font-size:25px}.startup-error p{line-height:1.8;color:#a68f70}.dark{--paper:#22211f;--surface:#2d2a26;--ink:#e8e0d3;--muted:#b5a88f;--line:#484034}.dark .site-nav{background:#22211feb;border-color:#3c352c}.dark .titlebar{border-color:#3c352c}.dark .audio-toggle{background:#332d24;color:#c9b18f}.dark .intro h1 em{color:#a99577}.dark .intro-text{color:#97856b}.dark .typing-hint{background:#22211fd4;color:#bca382}.dark .typing-words{color:#5f574c}.dark .typing-words .correct{color:#d6c1a0}.dark .typing-words .incorrect{color:#d87c62}.dark .durations button.selected{background:#4d3f2c;color:#d7b58a}.dark .switch-picker select,.dark .empty-pack{background:#30291f;border-color:#57462f;color:#b99970}.dark .empty-pack small{color:#9e8360}.dark .tone-card,.dark .playback-card,.dark .detail-card{border-color:#4a3c29}.dark .detail-card{background:#30291f}.dark .tone-pad{background:radial-gradient(ellipse at 90% 10%,#6a4a2e,#3d3529);border-color:#765435}.dark .tone-footer>span:first-child{background:#473621;border-color:#62482b}.dark .recording-icon{background:#4a3924}.dark .recording-heading>.icon-btn{border-color:#57442b}.dark .setting-row{border-color:#4c3b26}.dark .setting-row strong{color:#d1b38c}.dark .setting-row small{color:#9a7f5c}.dark .manual-section{border-color:#4a3c29}.dark .surface.selected{border-color:#d0ad7d}.dark .sheet{background:#2c251c;border-color:#635038;color:#debd8f}.dark .sheet-header>.icon-btn{background:#49371f}.dark .import-box{background:linear-gradient(140deg,#3b2e1c,#362919);border-color:#856136}.dark .pack-name-label input{background:#271d12;border-color:#70512c;color:#d8b480}.dark .library-empty,.dark .pack-row{background:#3b2c1b;border-color:#624725}.dark .pack-row.active{background:#49351e;border-color:#a67b3e}.dark .pack-pick strong{color:#d0aa72}.dark .sheet-description,.dark .guide-steps p{color:#b29368}.dark .guide-table td,.dark .feature-checklist article{border-color:#624827}.dark .guide-callout{background:#46321b;border-color:#70502a}.dark .sample-table,.dark .sample-row{border-color:#624626}.dark .sample-row select,.dark .field select{background:#382815;border-color:#71502a;color:#caa16a}.dark .feature-checklist h3{color:#ddbb8b}.dark .guide-steps h3{color:#debd8f}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}@keyframes sheet-in{from{transform:translateX(20px);opacity:.7}to{transform:none;opacity:1}}
@media(min-width:1500px){.intro{padding-top:60px;padding-bottom:40px}.intro h1{font-size:70px}.cap-scene{transform:scale(1.12)}.playground{padding-top:26px}.typing-box{height:110px}.typing-words{font-size:28px}.key{height:57px}.row-0 .key{height:38px}.keyboard{padding:15px 15px 27px}.key-row{gap:6px;margin-bottom:6px}.key .legend{font-size:12px}.key .legend.small{font-size:9px}.mini .key{height:21px}.mini .row-0 .key{height:17px}.mini .key .legend{font-size:6px}.mini .key .legend.small{font-size:4px}}
@media(max-width:1100px){.site-nav{padding-left:35px;padding-right:35px;gap:15px}.site-nav nav{gap:17px;margin-left:10px}.site-nav nav button{font-size:10px}.content-width{width:calc(100% - 70px)}.intro{gap:40px;padding-top:30px;padding-bottom:20px;min-height:230px}.cap-scene{margin-right:20px;transform:scale(.9);transform-origin:50% 50%}.intro h1{font-size:55px}.intro-text{font-size:11px}.key{height:45px}.row-0 .key{height:30px}.keyboard{padding:11px 11px 24px}.key-row{gap:4px;margin-bottom:4px}.key-face{inset:2px 3px 6px}.key .legend{font-size:10px}.key .legend.small{font-size:7px}.key .key-face small{font-size:7px}.empty-pack small{display:none}.detail-card{padding:17px 15px}.manual-section{padding:40px 34px;gap:30px}.manual-art{transform:scale(.85);transform-origin:40% 50%}.tone-card,.playback-card{padding:23px}.manual-copy h2{font-size:38px}.intro .eyebrow{font-size:7px}.nav-actions{gap:5px}.button.add-sounds{font-size:10px;padding:10px 13px}.audio-toggle{font-size:9px;padding:9px 10px}}
@media(max-width:800px){.site-nav nav{display:none}.content-width{width:calc(100% - 40px)}.site-nav{padding:15px 20px;min-height:65px}.wordmark{font-size:23px}.intro{padding:30px 0 20px;gap:20px}.intro h1{font-size:45px;letter-spacing:-2px}.intro-text{font-size:10px}.cap-scene{width:170px;transform:scale(.8);margin:0 -15px 0 0}.hero-cap{left:50%}.cap-shadow{left:50%}.hand-note{left:-25px}.cap-caption{left:45px}.playground{padding-top:12px}.typing-words{font-size:22px}.keyboard-stage{overflow-x:auto;padding-bottom:24px;scrollbar-width:thin}.keyboard-stage #main-keyboard{min-width:690px;padding:0 4px}.key{height:39px}.row-0 .key{height:27px}.key .legend{font-size:9px}.key .legend.small{font-size:6px}.key .key-face small{font-size:6px}.board-controls{gap:10px}.micro-label{font-size:6px;letter-spacing:1px}.switch-picker{gap:6px}.switch-picker select{min-width:120px;max-width:160px;font-size:9px}.key-readout{display:none}.test-toolbar{gap:13px}.plain-button{font-size:8px}.playground-heading>.eyebrow{font-size:7px;letter-spacing:1.4px}.studio-grid{gap:13px}.tone-card,.playback-card{padding:20px 17px}.tone-pad{height:175px}.tone-workspace{padding:25px 15px 18px}.tone-axis{left:15px;right:15px}.tone-bright,.tone-warm{left:0;font-size:6px}.tone-footer{font-size:7px}.tone-footer>span:first-child{font-size:6px}.card-title h3,.recording-heading h3{font-size:11px}.recording-heading p{font-size:8px}.recording-icon{width:28px;height:28px}.recording-heading{gap:8px}.recording-heading>.icon-btn{width:25px;height:25px}.setting-row strong{font-size:10px}.details{grid-template-columns:repeat(2,1fr)}.detail-card p{min-height:36px}.manual-section{gap:5px;padding:30px 25px;min-height:400px;margin-top:60px}.manual-art{transform:scale(.65);transform-origin:15% 50%;width:270px}.manual-copy h2{font-size:34px}.manual-copy>div:last-child{flex-wrap:wrap;gap:15px}.manual-copy>.eyebrow{font-size:6px}.manual-copy li small{font-size:8px}.manual-copy li strong{font-size:10px}.manual-copy ol{gap:16px}.manual-copy li>i{width:18px;height:18px;font-size:6px}.section-heading h2{font-size:37px}.section-heading>p{font-size:9px}.section-heading .eyebrow{font-size:7px}.sound-lab{padding-top:65px}.site-footer>span:nth-child(2){display:none}.site-footer{font-size:7px}.site-footer>div{gap:13px}.empty-pack{font-size:10px;padding:11px 12px}.empty-pack .text-button{font-size:9px}.playground-foot{font-size:7px}.zen-mode .playground{width:calc(100% - 40px)}.zen-mode .typing-words{font-size:25px}}
@media(max-width:540px){.content-width{width:calc(100% - 32px)}.site-nav{padding:13px 16px;gap:10px}.wordmark{font-size:22px;gap:8px}.brand-key{width:26px;height:28px;font-size:18px}.audio-toggle{font-size:0;padding:9px;width:26px;height:26px;display:grid;place-items:center;border:0;background:transparent}.audio-toggle .status-dot{width:6px;height:6px}.audio-toggle>span{display:none}.nav-actions{gap:4px}.nav-actions>.icon-btn{height:27px;width:27px}.button.add-sounds{font-size:9px;padding:9px 11px}.intro{min-height:220px;padding-top:33px;padding-bottom:18px;gap:0}.intro h1{font-size:39px;letter-spacing:-2px}.intro-text{font-size:9px;line-height:1.8;max-width:225px}.intro .eyebrow{font-size:5.5px;letter-spacing:1.3px;margin-bottom:13px}.cap-scene{width:100px;transform:scale(.62);margin:0 -16px 0 0;transform-origin:20% 50%}.hero-cap{left:50%;top:8px}.cap-shadow{left:50%;top:143px}.hand-note{font-size:13px;left:-10px;top:178px}.cap-caption{font-size:5px;left:30px;top:165px;letter-spacing:1.5px}.test-toolbar{gap:9px}.plain-button span{display:none}.plain-button svg{width:12px;height:12px}.durations{gap:0}.durations button{font-size:8px;padding:4px 6px}.playground-heading>.eyebrow{font-size:6px;letter-spacing:1.4px}.typing-stats{gap:13px;margin-top:16px}.typing-stats strong{font-size:13px}.typing-stats>span{font-size:7px}.typing-words{font-size:21px;line-height:1.65}.typing-box{height:82px}.typing-hint{font-size:9px}.keyboard-stage #main-keyboard{min-width:625px}.key{height:35px}.row-0 .key{height:25px}.keyboard{padding:10px 10px 22px;border-radius:15px}.key-row{gap:3px;margin-bottom:3px}.key{border-radius:5px}.key-face{border-radius:4px;inset:1px 2px 5px}.key .legend{font-size:8px}.key .legend.small{font-size:5px}.key .key-face small{font-size:5px}.key .key-face:has(small){gap:5px}.board-controls{flex-wrap:wrap;min-height:50px;gap:5px}.switch-picker{gap:5px}.switch-picker .micro-label{display:none}.switch-picker select{font-size:8px;min-width:135px;padding:6px 20px 6px 8px}.surface-picker .micro-label{font-size:5px;letter-spacing:1px}.surface{width:22px;height:22px}.surface>i{width:12px;height:12px}.surface-picker{gap:3px}.empty-pack{align-items:flex-start;margin-top:12px;font-size:8px;gap:12px;padding:12px}.empty-pack>span{gap:7px;line-height:1.6;max-width:57%}.empty-pack>span>svg{width:12px;height:12px}.empty-pack .text-button{font-size:8px;white-space:normal;max-width:40%;line-height:1.5}.playground-foot>span:last-child{display:none}.playground-foot{font-size:7px;line-height:1.6}.studio-grid{grid-template-columns:1fr;gap:17px}.tone-card,.playback-card{padding:22px}.tone-pad{height:215px}.tone-workspace{max-width:295px}.tone-footer{font-size:8px}.tone-footer>span:first-child{font-size:7px}.recording-heading h3{font-size:12px}.recording-heading p{font-size:9px}.setting-row strong{font-size:11px}.card-title h3{font-size:13px}.section-heading h2{font-size:34px}.section-heading>p{display:none}.section-heading .eyebrow{font-size:6px}.details{gap:10px;margin-top:17px}.detail-card{padding:18px 14px}.detail-card h3{font-size:10px}.detail-card p{font-size:9px;min-height:65px}.detail-card .text-button{font-size:7px;white-space:normal;line-height:1.5}.detail-demo{height:82px;gap:6px}.mini-cap{width:32px;height:35px;font-size:11px}.stereo-track{gap:2px}.stereo-track i{width:1px}.press-demo>span{font-size:4px}.detail-card .text-button svg{width:10px;height:10px}.local-badge{font-size:5px;letter-spacing:.6px}.mouse-demo{transform:rotate(-9deg) scale(.85)}.privacy-lock{transform:scale(.85)}.manual-section{grid-template-columns:1fr;padding:25px 26px 35px;gap:15px;margin-top:50px}.manual-art{height:210px;width:280px;margin:auto;transform:scale(.8);transform-origin:35% 30%}.manual-art-note{bottom:-9px;left:25px;font-size:14px}.manual-copy h2{font-size:38px}.manual-copy>.eyebrow{font-size:6px}.manual-copy li strong{font-size:11px}.manual-copy li small{font-size:9px}.manual-copy>div:last-child{gap:15px}.manual-copy li>i{width:22px;height:22px;font-size:8px}.site-footer{padding-top:30px;align-items:flex-start}.site-footer>div{flex-direction:column;align-items:flex-end;gap:10px}.footer-wordmark{font-size:21px}#panel-body{padding:27px 21px}.sheet-header h2{font-size:25px}.sheet-description{font-size:10px}.import-box{padding:21px 16px 17px}.import-box strong{font-size:13px}.import-box>div:first-child>span{font-size:7px;text-align:center;line-height:1.7}.naming-tip{flex-wrap:wrap}.naming-tip>span{margin:4px 0 0;flex-basis:100%}.sample-row{grid-template-columns:20px minmax(48px,1fr) 90px 70px;gap:4px;padding:8px 5px}.sample-row>span{font-size:7px}.sample-row select{font-size:7px;padding:6px 3px}.guide-steps{gap:22px}.guide-steps>li{gap:10px}.guide-steps h3{font-size:12px}.guide-steps p{font-size:10px}.guide-table{font-size:8px}.guide-table td{padding:8px 3px}.guide-callout{font-size:9px;padding:12px 14px}.guide-actions{flex-wrap:wrap}.feature-checklist h3{font-size:10px}.feature-checklist p{font-size:8px}.feature-checklist article{gap:9px}.feature-checklist b{font-size:6px;max-width:75px;white-space:normal}.zen-mode .playground{width:calc(100% - 30px)}.zen-mode .typing-words{font-size:23px}#browser-floating{width:315px}.mini .key,.overlay-root .mini .key{height:17px}.mini .row-0 .key{height:14px}.mini .key .legend,.overlay-root .mini .key .legend{font-size:4px}.mini .key .legend.small,.overlay-root .mini .key .legend.small{font-size:3px}.mini .key .key-face small{font-size:3px}}
.intro-text,.detail-card p,.section-heading>p{color:#858179}.typing-hint{inset:auto 0 4px auto;width:max-content;max-width:90%;padding:5px 9px;border:1px solid #e5dfd4;border-radius:20px;font-size:8px;background:#f7f5efeb;backdrop-filter:blur(3px)}.typing-hint svg{width:11px;height:11px}.typing-words{color:#bbb7ae}.sheet{background:#fcfbf8}.sheet-description,.guide-steps p,.guide-table td,.guide-callout,.feature-checklist p{color:#82776a}.sheet .setting-row strong,.guide-steps h3,.library-header h3,.sheet-header h2{color:#4c453a}.sheet .setting-row small,.field>label,.library-header>span,.sample-row>span,.assignment-note{color:#9b8c78}.import-box strong{color:#776850}.import-box>div:first-child>span,.import-box>small,.naming-tip>span{color:#a3937c}.pack-name-label{color:#8d7b61}.pack-name-label input{color:#67543a}.pack-name-label input::placeholder{color:#aa9b83}.library-empty{color:#9c896c}.pack-pick strong{color:#796346}.sample-row select,.field select{color:#8d7554}.guide-table code{color:#98713e}.dark .sheet{background:#2c251c}.dark .sheet-header h2,.dark .guide-steps h3,.dark .library-header h3{color:#ddbb8b}.dark .sheet .setting-row strong{color:#cba77b}
@media(min-width:801px) and (max-height:900px){.site-nav{min-height:62px;padding-top:12px;padding-bottom:12px}.intro{min-height:175px;padding-top:22px;padding-bottom:15px}.intro h1{font-size:48px;line-height:1.02;letter-spacing:-2.2px}.intro .eyebrow{margin-bottom:10px;font-size:7px}.intro-text{margin-top:11px;font-size:10px;line-height:1.7}.cap-scene{height:150px;transform:scale(.78);transform-origin:70% 25%;margin-top:-3px}.playground{padding-top:8px}.typing-stats{margin-top:15px;margin-bottom:6px}.typing-words{font-size:22px;line-height:1.65}.typing-box{height:68px;margin-bottom:4px}.keyboard-stage{padding-top:8px;padding-bottom:21px}.key{height:45px}.row-0 .key{height:29px}.key-row{gap:4px;margin-bottom:4px}.row-0{margin-bottom:7px}.keyboard{padding:11px 11px 22px}.case-mark{bottom:6px}.board-controls{min-height:35px}.empty-pack{margin-top:12px;padding:10px 14px}.playground-foot{padding-top:12px}.zen-mode .typing-box{height:118px}.zen-mode .typing-words{font-size:28px}.mini .key{height:21px}.mini .row-0 .key{height:17px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Orby-inspired typography and quiet, monochrome surfaces. Fonts ship locally. */
@font-face{font-family:Inter;src:url('fonts/Inter.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:Nunito;src:url('fonts/Nunito.ttf') format('truetype');font-weight:200 1000;font-display:swap}
:root{--paper:#f8f9f7;--surface:#fff;--ink:#202220;--muted:#6c706b;--line:#e0e4de;--accent:#bdd19b;--nav-bg:#f8f9f7ed;--soft:#eff1ed;--secondary:#696e67}
body{font-family:Inter,'Segoe UI',sans-serif}
.dark{--paper:#0b0c0b;--surface:#141614;--ink:#f0f2ed;--muted:#a0a69c;--line:#2b302a;--accent:#c4d8a3;--nav-bg:#0b0c0bed;--soft:#1c201b;--secondary:#a3aa9e}
.wordmark,.footer-wordmark,h1,h2,h3,.hero-cap-face,.manual-cap{font-family:Nunito,Inter,sans-serif}
.intro h1{font-family:Nunito,Inter,sans-serif;font-weight:750;letter-spacing:-2.6px;line-height:1.06}
.intro h1 em,.dark .intro h1 em{color:var(--secondary);font-weight:650}
.intro-text,.dark .intro-text{color:var(--secondary);font-size:13px;line-height:1.85}
.intro .eyebrow{display:inline-flex;padding:8px 12px;border:1px solid var(--line);background:var(--surface);border-radius:40px;letter-spacing:1.4px}
.intro .eyebrow>i{background:var(--accent);box-shadow:0 0 0 3px #a9bf8520}
.brand-period{color:#8da46e}.site-nav,.dark .site-nav{background:var(--nav-bg);border-color:var(--line);gap:16px}
.site-nav nav{gap:16px;margin-left:8px}.site-nav nav button{color:var(--secondary);font-size:10px}
.titlebar,.dark .titlebar{background:var(--paper);border-color:var(--line)}
.titlebar>span,.titlebar button{color:var(--secondary)}
.audio-toggle,.dark .audio-toggle{background:var(--surface);color:var(--secondary);border-color:var(--line)}
.appearance-control{--theme-index:2;position:relative;display:inline-flex;isolation:isolate;background:var(--soft);border:1px solid var(--line);padding:3px;border-radius:30px;flex-shrink:0;height:34px}
.appearance-control button{position:relative;z-index:1;width:32px;height:26px;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:20px;color:var(--secondary);padding:0;transition:color .25s}
.appearance-control button[aria-pressed=true]{color:var(--ink)}.appearance-control button>span{font-size:16px;line-height:1}.appearance-control small{display:none}
.appearance-thumb{position:absolute;z-index:0;top:3px;left:3px;width:32px;height:26px;border-radius:25px;background:var(--surface);box-shadow:0 1px 5px #0002;transform:translateX(calc(var(--theme-index)*32px));transition:transform .38s cubic-bezier(.2,.85,.2,1),background .3s}
.sheet .appearance-control{margin-bottom:12px;height:40px}.sheet .appearance-control button{width:96px;height:32px}.sheet .appearance-control small{display:inline;font-size:11px}.sheet .appearance-thumb{width:96px;height:32px;transform:translateX(calc(var(--theme-index)*96px))}
.button.black{background:var(--ink);color:var(--paper);box-shadow:0 2px 6px #00000012}.button.black:hover{background:var(--secondary)}
.button.white{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:none}.button.outline{color:var(--secondary);border-color:var(--line)}
.icon-btn{color:var(--secondary)}.icon-btn:hover,.titlebar button:hover{background:var(--soft);color:var(--ink)}
.tone-card,.playback-card,.detail-card,.dark .tone-card,.dark .playback-card,.dark .detail-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:0 8px 28px #00000004}
.detail-card p,.section-heading>p,.manual-copy li small,.playground-foot,.eyebrow,.micro-label,.plain-button,.tone-footer>span,.recording-heading p,.dark .setting-row small{color:var(--secondary)}
.typing-words,.dark .typing-words{color:#adb5a8}.dark .typing-words{color:#596353}.typing-words .correct,.dark .typing-words .correct{color:var(--ink)}
.typing-hint,.dark .typing-hint{background:var(--surface);border-color:var(--line);color:var(--secondary)}
.durations button.selected,.dark .durations button.selected{background:var(--soft);color:var(--ink)}
.switch-picker select,.dark .switch-picker select,.empty-pack,.dark .empty-pack{background:var(--surface);color:var(--ink);border-color:var(--line)}
.empty-pack small,.dark .empty-pack small{color:var(--secondary)}.empty-pack{border-radius:16px}.text-button{color:var(--secondary)}
.dark .tone-pad,.tone-pad{background:radial-gradient(ellipse at 90% 10%,#c4d8a355,transparent),var(--soft);border-color:var(--line)}
.tone-footer>span:first-child,.dark .tone-footer>span:first-child,.recording-icon,.dark .recording-icon{background:var(--soft);border-color:var(--line);color:var(--secondary)}
.setting-row,.dark .setting-row{border-color:var(--line)}.setting-row strong,.dark .setting-row strong,.sheet .setting-row strong,.dark .sheet .setting-row strong{color:var(--ink)}
.recording-heading>.icon-btn,.dark .recording-heading>.icon-btn{border-color:var(--line)}
.manual-section,.dark .manual-section{background:var(--soft);border-color:var(--line);border-radius:28px}.manual-copy li strong{color:var(--ink)}
.sheet,.dark .sheet{background:var(--paper);color:var(--ink);border-color:var(--line)}
.sheet-header h2,.dark .sheet-header h2,.library-header h3,.dark .library-header h3,.guide-steps h3,.dark .guide-steps h3,.feature-checklist h3,.dark .feature-checklist h3{color:var(--ink)}
.sheet-header>.icon-btn,.dark .sheet-header>.icon-btn{background:var(--soft)}
.sheet-description,.dark .sheet-description,.guide-steps p,.dark .guide-steps p,.guide-table td,.feature-checklist p,.guide-callout,.sheet .setting-row small,.field>label,.library-header>span,.sample-row>span,.assignment-note,.naming-tip>span{color:var(--secondary)}
.import-box,.dark .import-box{background:var(--surface);border-color:var(--line);border-radius:22px}.import-box.drag-over{border-color:#8ca36a;background:var(--soft)}
.import-box strong{color:var(--ink)}.import-box>div:first-child>span,.import-box>small,.pack-name-label{color:var(--secondary)}
.pack-name-label input,.dark .pack-name-label input,.sample-row select,.dark .sample-row select,.field select,.dark .field select{background:var(--surface);border-color:var(--line);color:var(--ink)}
.pack-name-label input::placeholder{color:var(--muted)}
.library-empty,.dark .library-empty,.pack-row,.dark .pack-row{background:var(--surface);color:var(--secondary);border-color:var(--line)}
.pack-row.active,.dark .pack-row.active{background:var(--soft);border-color:#92aa71}.pack-pick strong,.dark .pack-pick strong{color:var(--ink)}
.guide-table td,.dark .guide-table td,.feature-checklist article,.dark .feature-checklist article,.sample-table,.dark .sample-table,.sample-row,.dark .sample-row{border-color:var(--line)}
.guide-callout,.dark .guide-callout,code,.guide-table code{background:var(--soft);color:var(--secondary);border-color:var(--line)}
.surface.selected,.dark .surface.selected{border-color:var(--secondary)}.local-badge{background:var(--soft);color:var(--secondary)}
body,.site-nav,.titlebar,.sheet,.tone-card,.playback-card,.detail-card,.manual-section,.import-box,.pack-row,.empty-pack,.appearance-control,.typing-hint,input,select,code{transition:background-color .32s ease,color .32s ease,border-color .32s ease,box-shadow .32s ease}
.overlay-mode{background:transparent!important}
@media(max-width:1100px){.site-nav nav{gap:12px;margin-left:0}.site-nav{gap:12px}.nav-actions{gap:6px}.audio-toggle span{display:none}.audio-toggle{padding:12px}.intro-text{font-size:12px}}
@media(max-width:600px){.site-nav{flex-wrap:wrap;gap:12px}.site-nav .wordmark{margin-right:auto}.site-nav .nav-actions{gap:5px}.site-nav .audio-toggle{display:none}.appearance-control button{width:28px}.appearance-thumb{width:28px;transform:translateX(calc(var(--theme-index)*28px))}.intro h1{font-size:43px}.intro-text{font-size:11px}.site-nav .add-sounds{padding:9px 11px}.intro .eyebrow{font-size:6px;padding:6px 8px}.sheet .appearance-thumb{width:96px;transform:translateX(calc(var(--theme-index)*96px))}.sheet .appearance-control button{width:96px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Keymere 0.4 — a tactile, playful little desktop playground. */
:root{--paper:#f6f6f5;--surface:#fff;--ink:#242426;--muted:#727274;--line:#e7e6e3;--soft:#f0efec;--secondary:#737376;--orange:#f28b37;--nav-bg:#f6f6f5e8;--accent:#f28b37;--game-stage:#faf9f7;--game-grid:#dedbd63b}
.dark{--paper:#111113;--surface:#1b1b1e;--ink:#f4f3f1;--muted:#a3a2a7;--line:#303034;--soft:#242427;--secondary:#aaa8ae;--nav-bg:#111113e8;--accent:#ff9d51;--game-stage:#161618;--game-grid:#ffffff08}
.content-width{max-width:1080px;width:calc(100% - 96px)}
.site-nav{padding:17px max(32px,calc((100% - 1160px)/2));border-bottom:1px solid transparent;min-height:76px}
.wordmark{font-weight:850;font-size:26px;letter-spacing:-1.2px}.brand-period{color:var(--orange)}.brand-key{background:linear-gradient(145deg,#ffbd6d,#eb720d);box-shadow:inset 0 1px 2px #fff8,0 3px 0 #bb4c04,0 5px 8px #b4671930;border-radius:10px;font-weight:850}
.site-nav nav button{font-size:12px}.nav-actions{gap:10px}.audio-toggle{font-size:11px}.button{font-size:12px;font-weight:650;padding:13px 20px}.icon-btn{width:36px;height:36px}.button.black{background:linear-gradient(#39393b,#202022);color:#fff;box-shadow:inset 0 1px 0 #ffffff20,0 3px 8px #0000000d}.button.black:hover{background:linear-gradient(#474749,#2a2a2d);box-shadow:0 5px 18px #0002}.dark .button.black{background:linear-gradient(#faf9f6,#ddddd8);color:#242426;box-shadow:inset 0 1px 0 #fff,0 3px 8px #0002}.dark .button.black:hover{background:#fff}.button.outline{background:var(--surface);color:var(--ink);border-color:var(--line)}
.intro{position:relative;min-height:330px;padding:38px 36px 42px;gap:40px;max-width:1080px;align-items:center}.intro h1{font-size:clamp(44px,4.7vw,62px);font-weight:850;letter-spacing:-2.8px;line-height:1.05}.intro h1 em,.dark .intro h1 em{color:var(--orange);font-weight:850}.intro .eyebrow{border:0;background:none;padding:0;font-size:9px;letter-spacing:1.4px;color:var(--secondary);margin-bottom:18px}.intro .eyebrow>i{background:var(--orange);box-shadow:0 0 0 4px #f28b3710}.intro-text{font-size:13px;margin-top:18px;line-height:1.85;color:var(--secondary)}.hero-actions{display:flex;gap:10px;margin-top:24px}.hero-facts{display:flex;gap:18px;align-items:center;color:var(--muted);font-size:9px;margin-top:18px}.hero-facts>span{display:flex;gap:6px;align-items:center}.hero-facts i{display:block;width:5px;height:5px;background:#85a780;border-radius:50%}
.cap-scene{width:260px;height:260px;margin:0 30px 0 0;transform:none}.cap-halo{position:absolute;inset:-25px;background:radial-gradient(ellipse,#ffb85827,transparent 67%);border-radius:50%;pointer-events:none}.hero-cap{left:50%;top:42px;width:142px;height:145px;border-radius:28px;background:linear-gradient(140deg,#ffb960,#e76505);box-shadow:inset 1px 1px 3px #fff9,inset -2px -2px 5px #bc4e04,0 10px 0 #c65709,0 14px 0 #9b3c06,0 20px 22px -5px #b56d3a35;transform:translateY(0);margin-left:-71px}.hero-cap:before{inset:9px 11px 22px;border-radius:21px;background:radial-gradient(ellipse at 45% 65%,#ffb558,#ff9e27);box-shadow:inset 0 2px 3px #fff9,inset 0 -1px 3px #db790a,0 0 2px #b96e2a}.hero-cap-face{inset:10px 12px 24px;font-family:Nunito,sans-serif;font-weight:850;font-size:70px;letter-spacing:-6px;color:#fffaf1;text-shadow:0 2px 1px #c36d2833}.hero-cap-face i{display:none}.cap-dot{color:#ffefcb}.hero-cap.pushed{transform:translateY(8px);box-shadow:inset 1px 1px 3px #fff8,0 3px 0 #c65709,0 6px 0 #a94308,0 10px 10px #b56d3a40}.cap-shadow{left:50%;top:204px;width:150px;background:#b8763e2e;filter:blur(15px);margin-left:-75px}.cap-caption{left:85px;top:221px;font-size:7px;color:var(--muted);letter-spacing:1.7px}.hand-note{top:250px;left:25px;font-family:Nunito,sans-serif;font-size:15px;font-style:italic;font-weight:650;color:#ac9b89;transform:rotate(-8deg)}
.playground{padding:28px 28px 22px;background:var(--surface);border:1px solid var(--line);border-radius:30px;box-shadow:0 18px 65px #00000004;scroll-margin-top:95px}.playground-heading{gap:20px;align-items:center;margin-bottom:24px}.playground-title .eyebrow{font-size:8px;letter-spacing:1.8px;margin:0 0 6px;color:var(--muted)}.playground-title h2{font-family:Nunito,sans-serif;font-size:27px;line-height:1.1;font-weight:850;letter-spacing:-.8px;margin:0}.game-tabs{display:flex;gap:3px;border:1px solid var(--line);padding:4px;background:var(--soft);border-radius:28px}.game-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:23px;font-size:11px;color:var(--secondary);transition:background .25s,color .25s,box-shadow .25s}.game-tabs button[aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:0 2px 6px #00000009}.game-tabs svg{width:14px;height:14px}.game-tabs button>span{font-size:6px;letter-spacing:.8px;background:#f28b3720;color:#cf752c;padding:3px 5px;border-radius:7px;font-weight:750}.test-toolbar{justify-content:flex-end;gap:18px}.plain-button{font-size:10px}.durations button{font-size:11px}.typing-stats{margin-top:10px;gap:22px}.typing-stats>span{font-size:10px}.typing-stats strong{font-size:19px;font-weight:500}.typing-words,.dark .typing-words{font-family:Nunito,Inter,sans-serif;font-size:23px;font-weight:650;color:var(--muted);opacity:.7}.typing-words .correct{opacity:1}.typing-box{height:88px;margin-bottom:10px}.typing-hint{font-size:9px}.keyboard-stage{padding:12px 0 25px}.board-controls{padding:0 4px}.switch-picker select{font-size:11px;min-width:195px}.micro-label{font-size:7px}.key-readout{font-size:10px}.empty-pack{background:var(--game-stage);border:1px dashed var(--line);padding:15px 17px;font-size:11px}.empty-pack small{font-size:10px}.playground-foot{font-size:9px}.sound-lab{padding-top:80px}.section-heading h2,.manual-copy h2{font-weight:850;font-family:Nunito,sans-serif;letter-spacing:-1.5px}.section-heading h2 em,.manual-copy h2 em{font-style:normal;color:var(--orange)}.section-heading>p{font-size:13px;line-height:1.8}.card-title h3,.recording-heading h3{font-size:16px;font-weight:800}.recording-heading p{font-size:11px}.setting-row strong{font-size:12px}.setting-row small{font-size:10px}.detail-card h3{font-size:16px;font-weight:800}.detail-card p{font-size:11px;line-height:1.8}.detail-card .text-button{font-size:10px}.detail-card{transition:transform .25s,box-shadow .25s,background-color .3s}.detail-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px #00000007}.manual-copy li strong{font-size:13px}.manual-copy li small{font-size:11px}.site-footer{font-size:10px}.sheet-description,.guide-steps p{font-size:12px;line-height:1.8}.sheet-header h2{font-family:Nunito,sans-serif;font-weight:850}.import-box strong{font-family:Nunito,sans-serif;font-size:20px;font-weight:800}.import-box>div:first-child>span{font-size:10px}.sheet .eyebrow{color:var(--muted)}.naming-tip code,.library-header h3 span{background:var(--soft);color:var(--secondary)}
/* Keyfall is keyboard-first, with a small touch keyboard on compact screens. */
.fall-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px}.fall-toolbar>div{display:flex;align-items:center;gap:10px}.fall-badge{font-size:8px;font-weight:800;letter-spacing:1.5px;color:var(--orange)}.fall-toolbar p{margin:0;color:var(--secondary);font-size:11px}.fall-difficulty{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--muted);margin-left:auto}.fall-difficulty select{background:var(--soft);color:var(--ink);border:1px solid var(--line);border-radius:15px;padding:7px 10px;font-size:10px}.fall-stats{display:flex;align-items:center;gap:30px;padding:16px 2px 18px}.fall-stats>span{display:flex;flex-direction:column;gap:6px;min-width:48px}.fall-stats small{font-size:7px;letter-spacing:1.5px;color:var(--muted)}.fall-stats strong{font-size:24px;font-family:Nunito,sans-serif;font-weight:800;line-height:1}.fall-stats strong span{font-size:14px}.fall-stats>span:first-child strong{color:var(--orange)}#fall-lives{display:flex;margin-left:auto;gap:5px}#fall-lives i{font-size:17px;color:var(--line);font-style:normal;transition:color .2s}#fall-lives .alive{color:#e79b78}.keyfall-arena{position:relative;height:330px;background:var(--game-stage);border:1px solid var(--line);border-radius:22px;overflow:hidden;outline-offset:4px}.fall-grid{position:absolute;inset:0;background:linear-gradient(90deg,var(--game-grid) 1px,transparent 1px);background-size:calc(100% / 6) 100%;mask-image:linear-gradient(transparent,#000 22%,#000 88%,transparent)}#fall-notes{position:absolute;inset:16px 0 55px;pointer-events:none}.fall-note{position:absolute;display:grid;place-items:center;width:47px;height:49px;border:1px solid #ebd6bd;border-radius:12px;background:linear-gradient(145deg,#fffaf2,#f3e6d3);box-shadow:inset 0 2px 0 #fff,0 4px 0 #dcc7a8,0 7px 10px #8c694518;color:#90643c;font:800 24px Nunito,sans-serif;transform:translate(-50%,-50%) rotate(var(--tilt));will-change:top;transition:background .15s,color .15s}.dark .fall-note{background:linear-gradient(145deg,#494038,#342d27);border-color:#69523b;box-shadow:inset 0 1px 0 #8e715a,0 4px 0 #241b13,0 8px 12px #0003;color:#f9d7ae}.fall-note.danger{background:linear-gradient(#ffd9c3,#f5b38e);color:#a44927;border-color:#e5ad89}.fall-floor{position:absolute;bottom:36px;left:22px;right:22px;display:flex;align-items:center;gap:12px;pointer-events:none}.fall-floor span{font-size:6px;letter-spacing:1.5px;color:var(--muted);white-space:nowrap}.fall-floor i{height:1px;background:var(--line);flex:1}.fall-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:color-mix(in srgb,var(--game-stage) 88%,transparent);backdrop-filter:blur(7px);z-index:2;padding:24px}.fall-cover h3{font-size:29px;font-weight:850;line-height:1.08;letter-spacing:-.8px;margin:14px 0 0}.fall-cover p{font-size:11px;line-height:1.8;color:var(--secondary);margin:11px 0 17px}.fall-cover>small{font-size:8px;color:var(--muted);margin-top:12px}.fall-intro-keys{height:46px;display:flex;align-items:center;gap:8px}.fall-intro-keys span{display:grid;place-items:center;width:37px;height:40px;border-radius:10px;background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 0 var(--line);font:800 21px Nunito,sans-serif;color:var(--secondary);transform:rotate(-9deg)}.fall-intro-keys span:nth-child(2){transform:translateY(-7px) rotate(7deg);background:linear-gradient(#ffbf79,#f38b30);border-color:#f2a35c;color:#fff;box-shadow:0 4px 0 #d27729}.fall-intro-keys span:nth-child(3){transform:rotate(13deg)}.fall-pause-symbol{font-size:28px;color:var(--orange);font-weight:750}.fall-result-number{font:850 45px Nunito,sans-serif;color:var(--orange)}.fall-cover .text-button{margin-top:13px;font-size:10px}.fall-feedback{position:absolute;bottom:10px;left:12px;right:12px;font-size:9px;text-align:center;color:var(--secondary)}#fall-effects{position:absolute;inset:0;pointer-events:none}.fall-burst{position:absolute;color:var(--orange);font:850 19px Nunito,sans-serif;animation:fall-burst .6s ease-out forwards;transform:translate(-50%,-50%)}@keyframes fall-burst{to{opacity:0;transform:translate(-50%,-180%) scale(1.15)}}.fall-foot{display:flex;justify-content:space-between;gap:15px;margin:12px 0 6px;font-size:9px;color:var(--muted);line-height:1.6}.fall-foot kbd{font-size:8px}.fall-touch{display:none}.keyfall-arena[data-state=paused] #fall-notes{filter:blur(3px)}.zen-mode .playground-title{display:none}.zen-mode .game-tabs{margin-left:auto}.zen-mode .playground{border:0;background:transparent;box-shadow:none}.zen-mode .keyfall-arena{height:380px}
@media(min-width:801px) and (max-height:900px){.intro{padding-top:24px;padding-bottom:30px;min-height:300px}.intro h1{font-size:51px}.intro-text{font-size:12px}.cap-scene{height:240px;transform:scale(.9);transform-origin:center}.hero-actions{margin-top:18px}.hero-facts{margin-top:14px}.playground{padding:22px}.playground-heading{margin-bottom:17px}.typing-box{height:72px}.typing-words{font-size:22px}.typing-stats{margin-top:5px}.keyfall-arena{height:300px}}
@media(max-width:1100px){.site-nav nav{gap:15px}.site-nav nav button{font-size:10px}.content-width{width:calc(100% - 60px)}.intro{padding-left:15px;padding-right:15px}.cap-scene{margin-right:12px;width:230px}.intro h1{font-size:50px}.hero-facts{font-size:8px;gap:12px}.audio-toggle span{display:none}.playground{padding:23px}.button.add-sounds{font-size:10px}.nav-actions{gap:6px}.empty-pack small{display:none}}
@media(max-width:800px){.site-nav nav{display:none}.intro{padding-top:32px;padding-bottom:37px;gap:15px;min-height:330px}.intro h1{font-size:43px}.intro-text{font-size:11px}.cap-scene{transform:scale(.8);transform-origin:center;width:180px;margin-right:10px}.hero-actions .button{font-size:10px;padding:11px 15px}.hero-facts{flex-wrap:wrap;gap:10px}.playground{padding:21px}.playground-title h2{font-size:23px}.game-tabs button{padding:9px 12px;font-size:10px}.game-tabs svg{width:12px}.keyboard-stage #main-keyboard{min-width:640px}.fall-toolbar p{display:none}.fall-toolbar{gap:8px}.fall-stats{gap:24px}.fall-foot{font-size:8px}.detail-card h3{font-size:15px}.detail-card p{font-size:11px}.card-title h3,.recording-heading h3{font-size:15px}.section-heading>p{font-size:11px}.typing-hint{font-size:8px}}
@media(max-width:540px){.site-nav{padding:14px 17px;gap:8px;min-height:65px}.wordmark{font-size:23px}.nav-actions{gap:5px}.site-nav .nav-actions>.icon-btn{display:none}.content-width{width:calc(100% - 28px)}.intro{flex-direction:column-reverse;text-align:center;padding:0 10px 32px;gap:0;min-height:0}.intro-copy{width:100%}.intro .eyebrow{justify-content:center;font-size:7px;margin-bottom:13px}.intro h1{font-size:44px;letter-spacing:-2px}.intro-text{font-size:12px;max-width:none;margin-top:14px}.cap-scene{height:195px;width:250px;transform:scale(.67);transform-origin:50% 30%;margin:0 0 -12px}.hero-cap{left:50%;top:24px}.cap-caption{top:206px;left:85px}.hand-note{display:none}.cap-shadow{top:185px}.hero-actions{justify-content:center;margin-top:21px}.hero-actions .button{font-size:11px;padding:12px 17px}.hero-facts{justify-content:center;font-size:8px;margin-top:16px;gap:13px}.hero-facts>span:last-child{display:none}.playground{padding:18px 14px;border-radius:23px}.playground-heading{flex-direction:column;gap:16px;align-items:stretch;margin-bottom:18px}.playground-title{text-align:center}.playground-title .eyebrow{justify-content:center;font-size:6px}.playground-title h2{font-size:24px}.game-tabs{align-self:center}.game-tabs button{min-width:132px;font-size:11px;padding:10px 14px}.typing-stats{gap:20px}.typing-stats strong{font-size:18px}.typing-stats>span{font-size:8px}.typing-words{font-size:20px}.typing-box{height:83px}.test-toolbar{justify-content:center}.durations button{font-size:10px}.keyboard-stage{padding:10px 0 22px;margin-left:-5px;margin-right:-5px}.switch-picker select{font-size:9px;min-width:130px}.board-controls{padding:0}.empty-pack{font-size:9px;padding:12px;gap:10px}.empty-pack .text-button{font-size:9px}.playground-foot{font-size:8px}.fall-stats{gap:15px;padding-top:8px}.fall-stats>span{min-width:38px}.fall-stats strong{font-size:21px}.fall-stats small{font-size:6px}.fall-stats>span:nth-child(3){display:none}#fall-lives{gap:2px}#fall-lives i{font-size:13px}.fall-difficulty{gap:5px;font-size:9px}.fall-difficulty select{font-size:9px;max-width:140px}.fall-toolbar .plain-button{font-size:9px}.fall-toolbar{flex-wrap:wrap}.keyfall-arena{height:325px;border-radius:17px}.fall-note{width:34px;height:37px;font-size:20px;border-radius:9px}.fall-cover{padding:20px 10px}.fall-cover h3{font-size:27px}.fall-foot{flex-direction:column;gap:2px;text-align:center;font-size:8px}.fall-touch{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:15px 0 5px}.fall-touch button{padding:7px 0;background:var(--soft);border:1px solid var(--line);border-radius:6px;font-size:10px;font-weight:600}.fall-touch button:active{background:var(--orange);color:#fff}.sound-lab{padding-top:54px}.section-heading h2{font-size:37px}.details{gap:10px}.detail-card h3{font-size:14px}.detail-card p{font-size:10px}.detail-card .text-button{font-size:9px}.manual-copy h2{font-size:38px}.manual-copy li small{font-size:10px}.manual-copy li strong{font-size:12px}.site-footer{font-size:9px}.zen-mode .playground-heading{align-items:center}.zen-mode .game-tabs{margin:auto}.zen-mode .keyfall-arena{height:340px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.fall-note{transform:translate(-50%,-50%)}.fall-burst{display:none}}
/* Readability pass: shared type scale for the website and Windows app. */
:root{--muted:#626267;--secondary:#626267}
.dark{--muted:#bab9c0;--secondary:#bab9c0}
body{font-size:16px;line-height:1.55}
button,input,select,textarea{font-size:14px}
.content-width{max-width:1160px}
.site-nav{padding:18px max(24px,calc((100% - 1240px)/2));gap:20px;flex-wrap:wrap}
.site-nav nav{gap:22px;margin-left:6px}
.site-nav nav button{font-size:14px;padding:10px 0;color:var(--secondary)}
.nav-actions{gap:10px}.audio-toggle,.button.add-sounds{font-size:14px}.audio-toggle{padding:11px 14px}.button{font-size:15px;padding:13px 20px;min-height:44px}.icon-btn{width:40px;height:40px}.icon-btn.small{width:34px;height:34px}.icon-btn svg{width:19px;height:19px}
.titlebar{height:34px}.titlebar+.app-scroll{height:calc(100vh - 34px)}.titlebar>span{font-size:11px;letter-spacing:1.4px}.titlebar button{width:46px;font-size:21px}
.intro{min-height:360px;padding-top:38px;padding-bottom:45px}.intro h1{line-height:1.1}.intro-text,.dark .intro-text{font-size:16px;line-height:1.8;color:var(--secondary)}
.eyebrow,.intro .eyebrow,.playground-title .eyebrow,.section-heading .eyebrow,.manual-copy>.eyebrow{font-size:12px;line-height:1.5;letter-spacing:1.2px;color:var(--secondary)}
.hero-facts{font-size:13px;gap:18px;line-height:1.6}.hero-actions{gap:12px}.hero-actions .button{font-size:15px}
.cap-caption{font-size:11px;letter-spacing:1px;left:62px;top:226px}.hand-note{font-size:17px;top:252px;left:5px}
.playground{padding:30px}.playground-heading{gap:20px;flex-wrap:wrap;margin-bottom:26px}.playground-title h2{font-size:30px}.playground-title .eyebrow{margin-bottom:8px}
.game-tabs button{font-size:14px;padding:11px 18px;min-height:44px}.game-tabs svg{width:17px;height:17px}.game-tabs button>span{font-size:10px;letter-spacing:.5px;padding:3px 6px}
.test-toolbar{gap:20px;flex-wrap:wrap}.durations button{font-size:14px;padding:8px 12px}.plain-button{font-size:14px;gap:7px;min-height:36px}.plain-button svg{width:17px;height:17px}
.typing-stats{gap:24px;margin:18px 0 12px;flex-wrap:wrap}.typing-stats>span{font-size:14px}.typing-stats strong{font-size:25px}.typing-words,.dark .typing-words{font-size:25px;line-height:1.65;opacity:1;color:var(--muted)}.typing-box{height:112px;margin-bottom:18px}.typing-hint{font-size:12px;line-height:1.5;padding:6px 10px;color:var(--secondary)}.typing-hint svg{width:14px;height:14px}
.keyboard-stage{overflow-x:auto;padding:14px 0 27px;scrollbar-width:thin}.keyboard-stage #main-keyboard{min-width:990px}
#main-keyboard .keyboard{padding:13px 13px 28px}#main-keyboard .key{height:54px}#main-keyboard .row-0 .key{height:37px}#main-keyboard .key-row{gap:5px;margin-bottom:5px}
#main-keyboard .key .legend,#main-keyboard .key .legend.small{font-family:Inter,sans-serif;font-size:12px;line-height:1.2;color:#414145}#main-keyboard .key .key-face small{font-size:11px;line-height:1.2;color:#5a5a5f}
#main-keyboard .modifier .legend,#main-keyboard .accent .legend{color:#fafafa}#main-keyboard .theme-midnight .key .legend{color:#f7f6f3}#main-keyboard .theme-midnight .key .key-face small{color:#d5d3d9}#main-keyboard .case-mark{font-size:10px;bottom:6px;letter-spacing:1.6px}
.board-controls{gap:16px;padding:8px 2px;flex-wrap:wrap}.micro-label{font-size:12px;letter-spacing:1px;color:var(--secondary)}.switch-picker{gap:10px;flex-wrap:wrap}.switch-picker select,.dark .switch-picker select{font-size:14px;min-width:200px;max-width:280px;padding:10px 30px 10px 12px;line-height:1.5}.key-readout{font-size:13px;color:var(--secondary)}.surface-picker{gap:7px}.surface{width:32px;height:32px}.surface>i{width:19px;height:19px}
.empty-pack,.dark .empty-pack{font-size:14px;line-height:1.6;padding:17px 18px;gap:18px}.empty-pack small,.dark .empty-pack small{font-size:13px;display:block;color:var(--secondary)}.empty-pack .text-button{font-size:14px;line-height:1.5}.text-button{font-size:14px;line-height:1.5}.playground-foot{font-size:13px;line-height:1.65;gap:18px;flex-wrap:wrap}
.section-heading>p{font-size:16px;line-height:1.8}.card-title h3,.recording-heading h3{font-size:21px;line-height:1.35}.recording-heading p{font-size:14px;line-height:1.6}.card-title{gap:16px;flex-wrap:wrap}.recording-heading{align-items:flex-start;gap:12px}.recording-heading>.icon-btn{width:40px;height:40px}.recording-icon{width:40px;height:40px}.recording-icon svg{width:20px;height:20px}
.tone-bright,.tone-warm,.tone-axis{font-size:12px;letter-spacing:1px;color:var(--secondary)}.tone-workspace{padding-top:35px;padding-bottom:25px}.tone-footer{font-size:14px;line-height:1.65;flex-wrap:wrap;gap:12px}.tone-footer>span:first-child{font-size:12px;line-height:1.5;padding:6px 9px}.tone-footer>span:last-child{font-size:13px}.volume-label{font-size:14px}.volume-label label,.volume-label>span{font-size:14px}.wave-empty small{font-size:13px;color:var(--secondary)}
.setting-row{padding:17px 0;gap:18px}.setting-row strong,.sheet .setting-row strong{font-size:16px;line-height:1.45}.setting-row small,.sheet .setting-row small,.dark .setting-row small{font-size:14px;line-height:1.65;color:var(--secondary)}.setting-row>div{gap:12px}.setting-row>div>svg{width:20px;height:20px}.switch{flex-shrink:0}
.detail-card{padding:25px 22px}.detail-card h3{font-size:20px;line-height:1.3}.detail-card p{font-size:15px;line-height:1.8;min-height:0}.detail-card .text-button{font-size:14px;line-height:1.6;white-space:normal}.local-badge{font-size:12px;line-height:1.5;letter-spacing:.7px}.press-demo>span{font-size:10px;line-height:1.6}.press-demo>span i{font-size:12px}.mini-cap{font-size:17px}.manual-copy li strong{font-size:17px;line-height:1.5}.manual-copy li small{font-size:15px;line-height:1.8}.manual-copy li>i{width:30px;height:30px;font-size:12px;flex-shrink:0}.manual-copy ol{gap:22px}.manual-art-note{font-size:19px}.manual-copy>div:last-child{gap:16px;flex-wrap:wrap}.site-footer{font-size:13px;line-height:1.6;gap:20px;flex-wrap:wrap}.site-footer>div{gap:18px;flex-wrap:wrap}.site-footer button{font-size:13px}
.sheet{width:min(780px,100vw);font-size:16px}#panel-body{padding:35px 34px}.sheet-header h2{font-size:34px;line-height:1.2}.sheet-description,.dark .sheet-description{font-size:16px;line-height:1.8;margin-bottom:24px}.sheet .eyebrow{font-size:12px;color:var(--secondary)}.sheet-header>.icon-btn{width:42px;height:42px}
.import-box{padding:26px 24px}.import-box strong{font-size:24px;line-height:1.35}.import-box>div:first-child>span,.import-box>small{font-size:13px;line-height:1.8;color:var(--secondary)}.pack-name-label{font-size:14px;line-height:1.6}.pack-name-label input{font-size:16px;line-height:1.5;padding:12px 14px}.import-actions{gap:12px;flex-wrap:wrap}.naming-tip{gap:10px;flex-wrap:wrap}.naming-tip code{font-size:13px}.naming-tip>span,.naming-tip>span button{font-size:14px;line-height:1.7;color:var(--secondary)}.library-header h3{font-size:20px}.library-header h3 span,.library-header>span{font-size:13px}.library-empty{font-size:15px;padding:25px;line-height:1.8}.pack-pick strong,.dark .pack-pick strong{font-size:16px;line-height:1.5}.pack-pick small{font-size:13px;line-height:1.6;color:var(--secondary)}.pack-row{padding:10px}.pack-key{font-size:22px;width:45px;height:47px}.assignment-header{font-size:16px;line-height:1.6;flex-wrap:wrap;gap:10px}.assignment-header>span,.assignment-note{font-size:13px;line-height:1.8}.sample-row{grid-template-columns:36px minmax(100px,1fr) 155px 120px;gap:10px;padding:13px 10px}.sample-row>span{font-size:14px;line-height:1.6;overflow-wrap:anywhere;color:var(--secondary)}.sample-row select,.dark .sample-row select,.field select,.dark .field select{font-size:14px;line-height:1.6;padding:10px 12px;border-radius:10px}.sample-row .icon-btn{width:34px;height:34px}.field>label{font-size:14px;line-height:1.6;margin-bottom:9px}.settings-heading{font-size:19px;line-height:1.4;margin:28px 0 10px}.sheet .appearance-control button small{font-size:14px}.sheet .appearance-control{height:46px}.sheet .appearance-control button{width:104px;height:38px}.sheet .appearance-thumb{width:104px;height:38px;transform:translateX(calc(var(--theme-index)*104px))}
.guide-steps{gap:28px}.guide-steps h3,.dark .guide-steps h3{font-size:20px;line-height:1.4}.guide-steps p,.dark .guide-steps p{font-size:15px;line-height:1.85}.guide-steps>li>b{font-size:14px;width:30px;height:30px;flex-shrink:0}.guide-table{font-size:14px;line-height:1.7}.guide-table td{padding:12px 8px;font-size:14px;overflow-wrap:anywhere}.guide-table code{font-size:13px}.guide-callout{font-size:14px;line-height:1.85;padding:20px}.guide-actions{gap:12px;flex-wrap:wrap}.feature-checklist h3,.dark .feature-checklist h3{font-size:17px;line-height:1.5}.feature-checklist p{font-size:14px;line-height:1.8}.feature-checklist b{font-size:12px;line-height:1.6;white-space:normal;max-width:120px}.feature-checklist article{gap:15px;padding:18px 0}.delete-confirm{font-size:14px;line-height:1.7;flex-wrap:wrap}#import-progress{font-size:14px;line-height:1.7}#toast{font-size:14px;line-height:1.7;padding:14px 20px;max-width:min(560px,calc(100vw - 28px))}.native-note{font-size:14px;line-height:1.7}.zen-exit{font-size:14px}.zen-exit kbd{font-size:12px}
.fall-toolbar{gap:16px;flex-wrap:wrap}.fall-badge{font-size:12px;letter-spacing:1px}.fall-toolbar p{font-size:14px;line-height:1.6}.fall-difficulty{font-size:14px;line-height:1.6;gap:10px}.fall-difficulty select{font-size:14px;max-width:none;padding:10px 13px}.fall-stats{gap:34px;padding:20px 3px}.fall-stats small{font-size:12px;letter-spacing:1px}.fall-stats strong{font-size:29px}.fall-stats>span{min-width:65px;gap:9px}#fall-lives i{font-size:22px}.keyfall-arena{height:390px}.fall-cover{padding:26px}.fall-cover h3{font-size:32px;line-height:1.15}.fall-cover p{font-size:15px;line-height:1.7;margin:13px 0 20px}.fall-cover>small{font-size:12px;line-height:1.6}.fall-cover .text-button{font-size:14px}.fall-floor span{font-size:11px;letter-spacing:1px}.fall-feedback{font-size:13px;line-height:1.6;bottom:8px}.fall-floor{bottom:43px}.fall-foot{font-size:13px;line-height:1.7;gap:18px}.fall-foot kbd{font-size:12px}#fall-notes{bottom:63px}.fall-touch button{font-size:14px;min-height:40px}.fall-result-number{font-size:50px}.fall-pause-symbol{font-size:30px}
@media(max-width:1200px){.site-nav{gap:14px;padding:16px 25px}.site-nav nav{order:3;width:100%;justify-content:center;margin:0;gap:28px}.site-nav nav button{font-size:14px;padding:4px 0}.nav-actions{margin-left:auto}.audio-toggle>span{display:inline}.intro h1{font-size:52px}.details{grid-template-columns:repeat(2,1fr)}.detail-card p{min-height:0}.studio-grid{gap:20px}.tone-card,.playback-card{padding:25px}.tone-footer{flex-direction:column;align-items:flex-start}}
@media(max-width:800px){.content-width{width:calc(100% - 40px)}.site-nav nav{display:flex}.site-nav nav button{font-size:13px}.audio-toggle{display:none}.intro{padding:30px 10px 40px;min-height:360px}.intro h1{font-size:46px}.intro-text,.dark .intro-text{font-size:15px}.hero-facts{font-size:12px;gap:12px}.intro .eyebrow{font-size:11px}.hero-actions .button{font-size:14px;padding:12px 16px}.playground{padding:24px}.studio-grid{grid-template-columns:1fr}.tone-footer{flex-direction:row;flex-wrap:wrap}.tone-pad{height:240px}.section-heading>p{font-size:15px}.manual-section{grid-template-columns:1fr;padding:30px}.manual-art{height:220px;width:280px;margin:auto;transform:scale(.8);transform-origin:50% 30%}.manual-copy li strong{font-size:17px}.manual-copy li small{font-size:15px}.site-footer{font-size:13px}.fall-toolbar p{display:none}.fall-stats{gap:24px}.fall-cover h3{font-size:30px}.playground-title .eyebrow{font-size:11px}}
@media(max-width:540px){.content-width{width:calc(100% - 24px)}.site-nav{padding:14px 14px 11px;gap:13px}.wordmark{font-size:24px}.site-nav nav{gap:20px}.site-nav nav button{font-size:12px}.nav-actions{gap:7px}.site-nav .add-sounds{font-size:13px;padding:10px 12px;min-height:40px}.site-nav .nav-actions>.icon-btn{display:grid;width:35px;height:35px}.appearance-control{height:38px}.appearance-control button{width:27px;height:30px}.appearance-thumb{width:27px;height:30px;transform:translateX(calc(var(--theme-index)*27px))}.appearance-control button>span{font-size:17px}.brand-key{width:27px;height:29px}.wordmark{gap:7px}.intro{padding:0 12px 32px;min-height:0}.intro h1{font-size:42px;letter-spacing:-1.8px}.intro-text,.dark .intro-text{font-size:15px;line-height:1.8}.intro-text br{display:none}.intro .eyebrow{font-size:11px;letter-spacing:.8px;margin-bottom:15px}.cap-scene{margin-bottom:0}.cap-caption{display:none}.hero-facts{font-size:12px;gap:13px}.hero-actions{gap:10px}.hero-actions .button{font-size:14px;padding:12px 16px}.playground{padding:22px 16px;border-radius:23px}.playground-title h2{font-size:28px}.playground-title .eyebrow{font-size:11px}.game-tabs{width:100%;max-width:340px}.game-tabs button{font-size:14px;min-width:0;flex:1;padding:11px 10px;gap:6px}.game-tabs button>span{font-size:9px}.game-tabs svg{width:16px}.test-toolbar{gap:14px;justify-content:center}.plain-button span{display:inline}.plain-button{font-size:13px;min-height:40px}.plain-button svg{width:16px}.durations button{font-size:14px;padding:8px 11px}.typing-stats{gap:18px;margin:16px 0 12px}.typing-stats strong{font-size:23px}.typing-stats>span{font-size:13px}.typing-words,.dark .typing-words{font-size:23px}.typing-box{height:115px;margin-bottom:14px}.typing-hint{font-size:12px;max-width:100%;white-space:normal;text-align:right}.board-controls{gap:14px;padding:9px 0}.switch-picker{width:100%;gap:7px;flex-wrap:nowrap}.switch-picker .micro-label{display:inline;font-size:11px;letter-spacing:.5px;white-space:nowrap}.switch-picker select{min-width:0;flex:1;max-width:none;font-size:14px;padding:10px 20px 10px 10px}.surface-picker{margin-left:auto;gap:7px}.surface-picker .micro-label{font-size:11px;letter-spacing:.6px}.surface{width:31px;height:31px}.key-readout{display:none}.empty-pack{font-size:14px;flex-direction:column;align-items:flex-start;padding:15px;gap:12px}.empty-pack>span,.empty-pack .text-button{max-width:none;width:auto;font-size:14px;line-height:1.6}.empty-pack small{display:none}.empty-pack>span>svg{width:18px;height:18px}.playground-foot{font-size:12px;line-height:1.7}.details{grid-template-columns:1fr;gap:16px}.detail-card{padding:26px}.detail-card h3{font-size:22px}.detail-card p{font-size:15px;line-height:1.8}.detail-card .text-button{font-size:14px}.detail-demo{height:105px}.mini-cap{width:45px;height:47px;font-size:20px}.press-demo>span{font-size:11px}.local-badge{font-size:12px}.tone-card,.playback-card{padding:25px 22px}.card-title h3,.recording-heading h3{font-size:20px}.recording-heading p{font-size:14px}.setting-row strong{font-size:16px}.setting-row small{font-size:14px}.section-heading h2{font-size:39px}.section-heading .eyebrow{font-size:12px}.tone-footer{font-size:14px}.tone-footer>span:first-child{font-size:12px}.manual-section{padding:28px 24px}.manual-copy h2{font-size:42px}.manual-copy>.eyebrow{font-size:11px}.manual-copy li strong{font-size:17px}.manual-copy li small{font-size:15px}.manual-copy li>i{font-size:12px;width:30px;height:30px}.manual-copy ol{gap:22px}.site-footer{font-size:13px;align-items:center;padding:30px 6px}.site-footer>div{gap:14px;align-items:flex-end}.site-footer button{font-size:13px}
 #panel-body{padding:28px 20px}.sheet-header{gap:12px}.sheet-header h2{font-size:30px}.sheet-description{font-size:16px}.sheet .eyebrow{font-size:11px}.import-box{padding:25px 17px}.import-box strong{font-size:23px}.import-box>div:first-child>span,.import-box>small{font-size:13px}.import-box>div:first-child>span{text-align:center}.naming-tip{gap:9px}.naming-tip>span{font-size:14px}.library-header{flex-wrap:wrap;gap:10px}.library-header h3{font-size:20px}.library-header>span{font-size:12px}.pack-pick{gap:9px;padding:7px 3px}.pack-pick strong{font-size:16px}.pack-pick small{font-size:13px}.pack-row{gap:3px;padding:7px}.pack-row>.icon-btn{width:30px;height:36px}.pack-key{width:34px;height:37px;font-size:21px}.sample-row{grid-template-columns:34px minmax(0,1fr);gap:10px;padding:16px 8px}.sample-row>span{grid-column:2;font-size:14px;white-space:normal}.sample-row [data-map-code]{grid-column:2}.sample-row [data-map-direction]{grid-column:2}.sample-row select{width:100%;font-size:14px;padding:10px 12px}.assignment-header{font-size:16px}.assignment-note{font-size:13px}.sheet .appearance-control button{width:91px;height:38px}.sheet .appearance-thumb{width:91px;height:38px;transform:translateX(calc(var(--theme-index)*91px))}.sheet .appearance-control button small{font-size:14px}.guide-steps>li{gap:12px}.guide-steps h3{font-size:20px}.guide-steps p{font-size:15px}.guide-table,.guide-table td{font-size:13px}.guide-table td{padding:11px 5px}.guide-table code{font-size:12px;white-space:normal;overflow-wrap:anywhere}.guide-callout{font-size:14px;padding:17px}.feature-checklist article{flex-wrap:wrap;gap:12px}.feature-checklist h3{font-size:17px}.feature-checklist p{font-size:14px}.feature-checklist b{font-size:12px;max-width:100%}
 .fall-toolbar{gap:12px}.fall-badge{font-size:12px}.fall-difficulty{font-size:13px;gap:7px}.fall-difficulty select{font-size:13px;max-width:185px;padding:10px}.fall-toolbar .plain-button{font-size:13px}.fall-stats{gap:20px;flex-wrap:wrap;padding:19px 0}.fall-stats small{font-size:11px}.fall-stats strong{font-size:27px}.fall-stats>span{min-width:50px}.fall-stats>span:nth-child(3){display:flex}#fall-lives{width:100%;margin-left:0;gap:6px}#fall-lives i{font-size:20px}.keyfall-arena{height:410px}.fall-cover{padding:25px 15px}.fall-cover h3{font-size:30px}.fall-cover p{font-size:15px;line-height:1.7}.fall-cover>small{font-size:12px}.fall-cover .text-button{font-size:14px}.fall-floor{left:12px;right:12px;gap:8px;bottom:44px}.fall-floor span{font-size:10px;letter-spacing:.6px}.fall-feedback{font-size:12px}.fall-foot{font-size:12px;line-height:1.7;gap:7px}.fall-foot kbd{font-size:12px}.fall-touch{gap:4px;grid-template-columns:repeat(9,1fr)}.fall-touch button{font-size:14px;min-height:42px;padding:9px 0}.zen-mode .keyfall-arena{height:410px}
}
@media(max-width:380px){.site-nav .wordmark{font-size:22px}.site-nav .nav-actions>.icon-btn{display:none}.site-nav nav{gap:14px}.site-nav nav button{font-size:12px}.hero-actions .button{padding:12px 13px}.intro h1{font-size:39px}.fall-stats{gap:15px}.game-tabs button{font-size:13px}.game-tabs button>span{display:none}}
.titlebar>span{font-size:12px}
.card-title .text-button,.manual-copy .text-button,.manual-copy .button,.import-actions .button,.guide-actions .button{font-size:14px;line-height:1.6;color:var(--ink)}
.manual-copy .button,.import-actions .button,.guide-actions .button{padding:12px 17px;min-height:44px}
.manual-copy .button.black,.import-actions .button.black,.guide-actions .button.black{color:#fff}.dark .manual-copy .button.black,.dark .import-actions .button.black,.dark .guide-actions .button.black{color:#242426}
.playback-options .setting-row small{font-size:14px;line-height:1.65;color:var(--secondary)}
.manual-copy code{font-size:13px;line-height:1.6;color:var(--ink);background:var(--surface)}
.feature-checklist article>span{font-size:12px;line-height:1.6;color:var(--secondary)}
.intro .eyebrow,.playground-title .eyebrow,.manual-copy>.eyebrow,.sheet .eyebrow,.surface-picker .micro-label,.switch-picker .micro-label,.fall-stats small,.fall-floor span{font-size:12px;letter-spacing:.8px}
.game-tabs button>span{font-size:12px;letter-spacing:.3px;padding:3px 6px}
.settings-heading{font-size:18px;letter-spacing:1px;color:var(--secondary)}
#main-keyboard .theme-graphite .key.modifier .key-face,#main-keyboard .theme-midnight .key.modifier .key-face{background:linear-gradient(140deg,#55555b,#3e3e44)}
#main-keyboard .theme-graphite .key.modifier .legend,#main-keyboard .theme-midnight .key.modifier .legend{color:#fff}
#main-keyboard .theme-silver .key.modifier .legend{color:#35353a}
@media(max-width:540px){.game-tabs button>span{display:none}.fall-stats{column-gap:15px}.fall-stats>span{min-width:48px}}
/* A quiet writing room. Typewriter is drawn in CSS; the paper stays readable. */
@font-face{font-family:'Courier Prime';src:url('fonts/CourierPrime.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
.cap-presentation{width:300px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:16px;margin-right:22px}.cap-presentation .cap-scene{width:260px;height:224px;margin:0;transform:none}.cap-scene-label{font-family:Inter,sans-serif;font-size:15px;line-height:1.6;color:var(--secondary);font-weight:450;letter-spacing:0;transform:none;text-align:center}.manual-art-note{font-family:Inter,sans-serif;font-size:16px;font-style:normal;letter-spacing:0;line-height:1.6;transform:none;color:var(--secondary)}
.hero-facts,.micro-label,.playground-foot,.fall-foot,.fall-stats small,.fall-floor span,.site-footer,.site-footer button,.local-badge{font-size:14px;line-height:1.65;letter-spacing:0}.intro .eyebrow,.playground-title .eyebrow,.sheet .eyebrow,.section-heading .eyebrow,.manual-copy>.eyebrow{font-size:13px;letter-spacing:.8px}.surface-picker .micro-label,.switch-picker .micro-label{font-size:13px}.tone-bright,.tone-warm,.tone-axis,.tone-footer>span:first-child,.wave-empty small,.pack-pick small,.library-header>span,.assignment-note,.assignment-header>span,.feature-checklist b,.feature-checklist article>span,.import-box>small{font-size:14px;line-height:1.65}.typing-hint{font-size:13px}.guide-table,.guide-table td,.guide-table code{font-size:14px}.playground-heading{align-items:center}.game-tabs{max-width:none}.game-tabs button{white-space:nowrap}
#playground[data-game-mode=typewriter]>.keyboard-stage,#playground[data-game-mode=typewriter]>.board-controls,#playground[data-game-mode=typewriter]>.empty-pack,#playground[data-game-mode=typewriter]>.playground-foot{display:none}
.typewriter-room{--tw-body:#91aaa0;--tw-body-light:#c1d0c5;--tw-body-mid:#8fa59a;--tw-body-dark:#687f75;--tw-body-shadow:#3b5149;--tw-paper:#fcf8ed;--tw-paper-ink:#39342e;--tw-stage:#ebe7de;--tw-frame:#d3cfc5}
.tw-introduction{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 2px 24px}.tw-introduction h3{font:850 31px/1.2 Nunito,sans-serif;letter-spacing:-.7px;margin:5px 0 9px}.tw-introduction p{font-size:15px;line-height:1.7;color:var(--secondary);margin:0}.tw-introduction p.tw-kicker{font-size:12px;font-weight:650;letter-spacing:1.4px;color:var(--secondary)}.tw-introduction .button{gap:8px}
.tw-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:22px}.tw-mode{display:flex;padding:4px;background:var(--soft);border:1px solid var(--line);border-radius:28px;gap:3px}.tw-mode button{border-radius:23px;font-size:14px;line-height:1.5;padding:10px 16px;color:var(--secondary)}.tw-mode button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 2px 7px #00000008}.tw-sound-label{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--secondary)}.tw-sound-label select{font-size:14px;line-height:1.5;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:10px 14px;border-radius:15px;max-width:220px}
.tw-challenge{background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:20px 24px;margin-bottom:20px}.tw-challenge>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:20px}.tw-challenge strong{font-size:16px;font-weight:650}.tw-challenge #tw-passage{font-family:Inter,sans-serif;font-size:16px;line-height:1.9;color:var(--muted);margin:16px 0}.tw-challenge .right{color:var(--ink)}.tw-challenge .wrong{color:#b44631;background:#f5b49d30;border-radius:3px}.tw-challenge-bottom{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--secondary)}.tw-progress{height:4px;margin-top:13px;background:var(--line);border-radius:4px;overflow:hidden}.tw-progress i{display:block;width:0;height:100%;background:#a2b799;border-radius:4px;transition:width .15s}#tw-challenge-result{font-size:15px;color:var(--ink);margin:10px 0 0}#tw-challenge-result:empty{display:none}
.tw-desk{position:relative;isolation:isolate;padding:28px 42px 48px;border-radius:26px;background:radial-gradient(ellipse at 48% 5%,#f9f7f1,var(--tw-stage) 80%);border:1px solid var(--tw-frame);overflow:hidden}.tw-desk:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(9deg,#00000002 0,#00000002 1px,transparent 1px,transparent 4px);z-index:8}.tw-desk[data-finish=ink]{--tw-body:#424951;--tw-body-light:#737b81;--tw-body-mid:#474e56;--tw-body-dark:#293139;--tw-body-shadow:#151f27}.tw-desk[data-finish=cream]{--tw-body:#c6bdab;--tw-body-light:#e5ddc9;--tw-body-mid:#c6bba7;--tw-body-dark:#a39986;--tw-body-shadow:#766d5f}.dark .tw-desk{--tw-stage:#27272a;--tw-frame:#3b3b40;background:radial-gradient(ellipse at 48% 6%,#44413c,#27272a 78%)}
.tw-paper-view{height:330px;position:relative;z-index:1;width:100%;overflow:hidden}.tw-carriage{--carriage:0px;position:absolute;top:15px;left:50%;width:min(640px,calc(100% - 70px));height:100%;transform:translateX(calc(-50% + var(--carriage)));transition:transform 90ms cubic-bezier(.2,.8,.2,1);will-change:transform}.tw-sheet{--feed:0px;position:absolute;top:0;width:100%;min-height:760px;padding:30px 44px 65px;background:var(--tw-paper);color:var(--tw-paper-ink);border:1px solid #d8d0bf;box-shadow:0 0 1px #fff,0 8px 22px #3c332418,inset 0 1px 0 #fff;transform:translateY(var(--feed));transition:transform .22s ease;transform-origin:50% 100%}.tw-sheet:before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(91deg,#6b593603 0,#6b593603 1px,transparent 1px,transparent 3px);opacity:.7}.tw-paper-heading{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #d8cebd;padding-bottom:14px;color:#746c5e;font-family:Inter,sans-serif;font-size:12px;line-height:1.6;letter-spacing:1px}.tw-paper-heading span:last-child{font-family:'Courier Prime',monospace;font-size:17px}.tw-lines{padding-top:30px;font-family:'Courier Prime',Courier,monospace;font-size:18px;line-height:29px;letter-spacing:0;font-weight:400;white-space:pre}.tw-line{height:29px;position:relative}.tw-ink-glyph:nth-child(11n){opacity:.84}.tw-ink-glyph:nth-child(17n){opacity:.92}.tw-paper-cursor{display:inline-block;vertical-align:-3px;height:21px;width:0;border-left:2px solid #ad7957;animation:tw-blink 1.1s steps(1) infinite}.tw-paper-prompt{position:absolute;top:102px;left:44px;margin:0;font-family:'Courier Prime',Courier,monospace;font-size:19px;line-height:1.8;color:#887d6b;pointer-events:none}.tw-watermark{position:absolute;bottom:30px;left:44px;font:13px/1.6 Inter,sans-serif;color:#8f8370}.tw-input{position:absolute;inset:0;width:100%;height:100%;resize:none;opacity:.002;z-index:5;padding:0;border:0;border-radius:15px;color:transparent;caret-color:transparent;background:transparent;cursor:text;font-size:18px}.tw-input:focus-visible{outline:none}.tw-paper-focus{position:absolute;inset:5px 18px;z-index:6;border:2px solid transparent;border-radius:12px;pointer-events:none}.tw-input:focus-visible~.tw-paper-focus{border-color:#a790693b}.tw-is-writing .tw-paper-prompt{color:#9b8d77}.tw-is-writing .tw-paper-cursor{border-color:#986446}
.tw-machine{position:relative;z-index:3;margin:0 auto;width:min(850px,100%);padding:0 20px 13px;border-radius:25px 25px 46px 46px;background:linear-gradient(112deg,var(--tw-body-light),var(--tw-body) 27%,var(--tw-body-mid) 71%,var(--tw-body-light));border:1px solid var(--tw-body-shadow);box-shadow:inset 0 2px 1px #ffffffe0,inset 0 -8px 0 var(--tw-body-dark),0 8px 0 var(--tw-body-shadow),0 24px 30px #2d322742}.tw-machine:before,.tw-machine:after{content:'';position:absolute;bottom:-16px;width:60px;height:16px;background:linear-gradient(#33342d,#171b15);border-radius:0 0 12px 12px;z-index:-1;box-shadow:0 4px 4px #0003}.tw-machine:before{left:45px}.tw-machine:after{right:45px}.tw-platen{position:relative;height:42px;margin:-27px 7px 0}.tw-roller{position:absolute;top:2px;left:9px;right:9px;height:31px;border-radius:9px;background:linear-gradient(#5c5c56,#252923 32%,#121a16 67%,#353d33);border:1px solid #161d17;box-shadow:inset 0 2px 1px #767c72,0 5px 0 #b3b9ab,inset 0 -2px 2px #0c110b}.tw-roller>span{position:absolute;height:5px;left:20px;right:20px;bottom:3px;border-radius:5px;background:linear-gradient(#e2e3da,#8a9285);box-shadow:0 1px 2px #0005}.tw-platen-knob{position:absolute;top:-3px;width:27px;height:43px;border-radius:9px;background:repeating-linear-gradient(0deg,#292f29 0,#292f29 2px,#4a5148 2px,#4a5148 3px);border:2px solid #1a241a;box-shadow:inset 2px 0 2px #8d958766,0 4px 6px #0003}.tw-platen-knob.left{left:-22px}.tw-platen-knob.right{right:-22px}.tw-return-lever{position:absolute;left:-23px;top:-59px;height:62px;width:120px;z-index:7;transform-origin:15px 100%;transform:rotate(-8deg);transition:transform .3s;padding:0;color:#26362e}.tw-return-lever>i{position:absolute;left:5px;bottom:9px;width:104px;height:8px;border:1px solid #858d80;background:linear-gradient(#f5f6ec,#a6ad9f);border-radius:8px;box-shadow:0 2px 1px #3f4e3f55}.tw-return-lever>span{position:absolute;top:9px;right:1px;font-size:22px;width:42px;height:32px;border-radius:7px;background:linear-gradient(#e5e7dc,#b9c1b3);box-shadow:inset 0 1px 0 #fff,0 3px 0 #7d8979;border:1px solid #8f9c87;display:grid;place-items:center}.tw-return-lever:hover{transform:rotate(-13deg)}.tw-returning .tw-return-lever{transform:rotate(14deg)}
.tw-backplate{position:relative;min-height:104px;margin-top:-2px;border-radius:14px 14px 18px 18px;background:linear-gradient(150deg,var(--tw-body-light),var(--tw-body) 60%);box-shadow:inset 0 2px 2px #fff7,inset 0 -2px 3px var(--tw-body-dark);overflow:hidden;border:1px solid var(--tw-body-dark)}.tw-paper-guides{position:absolute;inset:0;z-index:4}.tw-paper-guides i{position:absolute;top:0;width:11px;height:28px;background:linear-gradient(90deg,#919b8b,#e5e9df,#77846f);border:1px solid #717c68;box-shadow:0 2px 3px #3943324d;border-radius:0 0 3px 3px}.tw-paper-guides i:first-child{left:27%}.tw-paper-guides i:last-child{right:27%}.tw-typebars{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:230px;height:65px;background:radial-gradient(ellipse at 50% 0,#171f17,#697667 70%,#84917a);border-radius:0 0 50% 50%;border:2px solid #67715f;overflow:hidden;box-shadow:inset 0 0 12px #18261899}.tw-typebars>i{position:absolute;bottom:0;left:50%;height:70px;width:2px;background:linear-gradient(90deg,#c7ccbc,#69745f);transform-origin:50% 100%;transform:rotate(calc(var(--bar)*8deg));box-shadow:1px 0 1px #0008}.tw-striker{position:absolute;left:50%;bottom:-12px;width:7px;height:47px;background:linear-gradient(90deg,#a0a88e,#e6e5d1,#6f775b);transform-origin:50% 100%;transform:rotateX(75deg);border:1px solid #53634c}.tw-striker.strike{animation:tw-strike .14s ease-out}.tw-ribbon{position:absolute;top:7px;width:138px;height:9px;left:50%;transform:translateX(-50%);background:linear-gradient(#262524 0 50%,#7f3931 50%);box-shadow:0 1px 1px #0004;border:1px solid #313d28}.tw-machine-name{position:absolute;bottom:19px;left:20px;right:20px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:#263d30;text-shadow:0 1px 0 #ffffff6b}.tw-machine-name>span{font:850 29px/1 Nunito,sans-serif;letter-spacing:-1.4px}.tw-machine-name>span>span{font:10px/1 Inter,sans-serif;letter-spacing:0;vertical-align:super;margin-left:4px}.tw-machine-name small{font:12px/1.5 Inter,sans-serif;letter-spacing:1px}.tw-desk[data-finish=ink] .tw-machine-name{color:#e4e6dd;text-shadow:0 1px 1px #0006}.tw-escapement{position:absolute;left:23%;right:23%;bottom:4px;height:5px;border-radius:4px;background:#0002}.tw-escapement i{display:block;position:absolute;top:-1px;width:5px;height:7px;background:#e3e6d9;border:1px solid #6a7c60;border-radius:1px;transition:left .08s}
.tw-keyboard{position:relative;margin:16px 0 0;padding:12px 12px 5px;overflow-x:auto;background:linear-gradient(#2b342d,#414a3f);border:1px solid var(--tw-body-shadow);box-shadow:inset 0 4px 10px #0c170f70,0 1px 0 #eaf5dc55;border-radius:19px 19px 27px 27px;scrollbar-width:thin;scrollbar-color:#a6afa1 #3e493e}.tw-key-row{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 auto 10px;min-width:540px}.tw-key{position:relative;display:grid;place-items:center;flex:0 0 37px;width:37px;height:36px;padding:0;background:linear-gradient(140deg,#e1e0d1,#9d9e8e 45%,#c8ccbb);border:1px solid #1f3021;border-radius:50%;color:#373a30;box-shadow:inset 0 1px 0 #fff,0 4px 0 #17271b,0 6px 5px #0005;transform:translateY(0);transition:transform .05s,box-shadow .05s}.tw-key>span{display:grid;place-items:center;position:absolute;inset:3px;border:1px solid #acac9a;border-radius:50%;background:radial-gradient(ellipse at 40% 35%,#fcf7e9,#e6e1cc);box-shadow:inset 0 1px 2px #9c9b8055;font:650 14px/1 Inter,sans-serif;text-shadow:0 1px 0 #fff9;pointer-events:none}.tw-key:hover>span{background:#fff9ec}.tw-key:active,.tw-key.pressed,.tw-key[aria-pressed=true]{transform:translateY(4px);box-shadow:inset 0 1px 0 #fff5,0 1px 0 #17271b,0 2px 3px #0006}.tw-key[aria-pressed=true]>span{background:#f0c79c}.tw-key-wide,.tw-key-return{flex-basis:44px;width:44px}.tw-key-shift{flex-basis:47px;width:47px}.tw-key-shift>span,.tw-key-return>span{font-size:20px}.tw-key-row:nth-child(2){padding-left:19px}.tw-key-row:nth-child(3){padding-left:12px}.tw-bottom-row{gap:24px;margin-top:2px}.tw-space{width:290px;flex-basis:290px;height:28px;border-radius:9px;box-shadow:inset 0 1px 0 #fff8,0 4px 0 #17271b,0 5px 5px #0004}.tw-space>span{border-radius:6px;font-size:12px;letter-spacing:3px;background:linear-gradient(#e1e4d6,#b7c2ac)}.tw-screw{width:13px;height:13px;border-radius:50%;background:linear-gradient(135deg,#e2e7d6,#788570);border:1px solid #172d1b;position:relative;box-shadow:inset 0 1px 1px #fff8}.tw-screw:after{content:'';position:absolute;left:3px;right:3px;top:5px;height:1px;background:#384e2f;transform:rotate(22deg)}.tw-chassis-bottom{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 4px;color:#314a3a}.tw-chassis-bottom>span{font:11px/1.6 Inter,sans-serif;letter-spacing:1.2px}.tw-chassis-bottom>i{width:4px;height:4px;border-radius:50%;background:#64765d;box-shadow:0 1px 0 #fff7}.tw-desk[data-finish=ink] .tw-chassis-bottom{color:#e3e5db}.tw-ground-shadow{position:absolute;bottom:24px;left:12%;right:12%;height:26px;border-radius:50%;background:#0003;filter:blur(18px);z-index:1}
.tw-document-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:15px;padding:16px 0;font-size:14px;line-height:1.6;color:var(--secondary);border-bottom:1px solid var(--line)}.tw-page-controls{display:flex;align-items:center;gap:8px}.tw-page-controls button{font-size:25px;width:34px;height:34px}.tw-bottom-tools{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px}.tw-finishes{display:flex;gap:6px;flex-wrap:wrap}.tw-finishes button{display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:22px;border:1px solid transparent;font-size:14px;line-height:1.5;color:var(--secondary)}.tw-finishes button[aria-pressed=true]{border-color:var(--line);background:var(--soft);color:var(--ink)}.tw-finishes i{width:15px;height:15px;border-radius:50%;border:1px solid #0002;background:#9eafa2}.tw-finishes [data-tw-finish=ink] i{background:#464d56}.tw-finishes [data-tw-finish=cream] i{background:#d0c5ae}.tw-actions{display:flex;flex-wrap:wrap;gap:10px}.tw-actions .button{font-size:14px;padding:11px 17px}.tw-save-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:22px 0;font-size:14px;line-height:1.7;color:var(--secondary)}.tw-save-row label{display:flex;align-items:center;gap:9px;font-size:14px}.tw-save-row input{width:17px;height:17px;accent-color:#789582}.tw-bottom-note{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:14px;line-height:1.8;color:var(--secondary)}.tw-bottom-note kbd{font-size:13px;background:var(--soft);padding:3px 5px;border-radius:4px;border:1px solid var(--line)}.tw-credits{max-width:420px;font-size:14px;line-height:1.8}.tw-credits summary{cursor:pointer}.tw-credits p{font-size:14px;margin:10px 0}.tw-new-page .tw-sheet{animation:tw-new-sheet .6s ease-out}.tw-new-page .tw-carriage{transition:transform .4s ease}
@keyframes tw-blink{50%{opacity:0}}@keyframes tw-strike{0%,100%{transform:rotateX(75deg)}40%{transform:translateY(-17px) rotateX(0deg)}}@keyframes tw-new-sheet{0%{opacity:.4;transform:translateY(-90px)}100%{opacity:1;transform:translateY(var(--feed))}}
@media(max-width:1100px){.cap-presentation{width:240px;margin-right:0}.cap-presentation .cap-scene{width:240px}.game-tabs button{padding:11px 14px;gap:7px}.tw-desk{padding:28px 25px 42px}.tw-machine{padding-left:15px;padding-right:15px}.tw-key-row{gap:7px}.tw-machine-name small{font-size:11px;letter-spacing:.5px}.tw-carriage{width:min(640px,calc(100% - 58px))}}
@media(max-width:800px){.cap-presentation{width:190px}.cap-presentation .cap-scene{transform:scale(.8);transform-origin:50% 40%;margin-left:-10px}.cap-scene-label{font-size:14px;margin-top:-15px}.playground-heading{flex-direction:column;align-items:flex-start}.game-tabs{width:100%;justify-content:center}.game-tabs button{flex:1}.tw-introduction h3{font-size:29px}.tw-desk{padding:23px 15px 36px}.tw-paper-view{height:310px}.tw-sheet{padding:25px 30px}.tw-lines{padding-top:25px}.tw-paper-prompt{left:30px;top:95px}.tw-machine-name{left:15px;right:15px}.tw-machine-name small{font-size:10px;max-width:160px;text-align:right}.tw-chassis-bottom>span{font-size:10px;letter-spacing:.7px}.tw-keyboard{padding:12px 8px 5px}.tw-key-row{min-width:520px;gap:7px}.tw-key{width:35px;flex-basis:35px;height:34px}.tw-space{width:260px;flex-basis:260px;height:28px}.tw-return-lever{width:100px}.tw-return-lever>i{width:89px}.tw-backplate{min-height:96px}.tw-carriage{width:calc(100% - 58px)}}
@media(max-width:540px){.cap-presentation{height:220px;width:260px;margin:0 auto 22px;gap:0}.cap-presentation .cap-scene{height:220px;width:250px;transform:scale(.72);transform-origin:50% 0;margin:0}.cap-scene-label{font-size:14px;line-height:1.6;margin-top:-26px}.intro .eyebrow{font-size:13px}.hero-facts{font-size:14px}.playground-heading{align-items:stretch}.game-tabs{max-width:none;gap:1px}.game-tabs button{font-size:13px;line-height:1.4;padding:10px 7px;min-height:47px;white-space:normal}.game-tabs button svg{display:none}.tw-introduction{align-items:flex-start;gap:12px;padding-top:5px}.tw-introduction h3{font-size:27px;letter-spacing:-.5px}.tw-introduction p{font-size:15px;line-height:1.7}.tw-introduction p.tw-kicker{font-size:12px;letter-spacing:.6px}.tw-introduction .button{min-width:44px;width:44px;height:44px;padding:10px;font-size:0;gap:0}.tw-introduction .button svg{width:19px;height:19px}.tw-toolbar{gap:15px;flex-direction:column;align-items:stretch}.tw-mode button{flex:1;font-size:14px;padding:10px 12px}.tw-sound-label{justify-content:space-between;font-size:14px}.tw-sound-label select{flex:1;max-width:230px;font-size:14px}.tw-challenge{padding:20px 17px}.tw-challenge>div:first-child{align-items:flex-start;gap:12px}.tw-challenge strong{font-size:16px}.tw-challenge .text-button{font-size:14px}.tw-challenge #tw-passage{font-size:15px;line-height:1.85}.tw-challenge-bottom{font-size:14px}.tw-desk{padding:20px 9px 32px;border-radius:18px;margin:0 -6px}.tw-paper-view{height:300px}.tw-carriage{width:calc(100% - 26px);top:8px}.tw-sheet{padding:23px 22px;min-height:750px}.tw-paper-heading{font-size:11px;letter-spacing:.2px;gap:8px}.tw-paper-heading span:last-child{font-size:16px}.tw-lines{font-size:16px;line-height:29px;padding-top:29px}.tw-paper-prompt{left:22px;top:95px;font-size:18px}.tw-machine{padding-left:10px;padding-right:10px;border-radius:20px 20px 28px 28px}.tw-platen{margin-left:11px;margin-right:11px}.tw-platen-knob{width:20px;height:39px}.tw-platen-knob.left{left:-17px}.tw-platen-knob.right{right:-17px}.tw-return-lever{left:-6px;width:85px;height:56px;top:-50px}.tw-return-lever>i{width:70px}.tw-return-lever>span{font-size:21px;width:34px;height:28px;top:9px}.tw-backplate{min-height:106px}.tw-typebars{width:180px}.tw-machine-name{left:12px;right:12px;bottom:20px;flex-direction:column;align-items:center;gap:5px}.tw-machine-name>span{font-size:27px}.tw-machine-name small{font-size:10px;letter-spacing:.5px;max-width:none;text-align:center}.tw-ribbon{width:115px}.tw-paper-guides i:first-child{left:20%}.tw-paper-guides i:last-child{right:20%}.tw-keyboard{margin-top:12px;border-radius:15px 15px 18px 18px;padding-bottom:6px}.tw-key-row{min-width:505px;gap:7px;margin-bottom:11px}.tw-key>span{font-size:14px}.tw-key-shift>span,.tw-key-return>span{font-size:19px}.tw-space{flex-basis:255px;width:255px;height:27px}.tw-space>span{font-size:12px}.tw-chassis-bottom{padding:13px 6px 4px}.tw-chassis-bottom>span{font-size:9px;letter-spacing:.4px;text-align:center}.tw-chassis-bottom>i{display:none}.tw-machine:before{left:24px}.tw-machine:after{right:24px}.tw-document-bar{font-size:14px;gap:10px;padding:15px 0}.tw-page-controls{width:100%;justify-content:center}.tw-bottom-tools{gap:18px;justify-content:center}.tw-finishes{width:100%;justify-content:center}.tw-actions{justify-content:center;width:100%;gap:8px}.tw-actions .button{font-size:14px;padding:10px 12px;flex:1}.tw-save-row{font-size:14px;gap:12px;padding:21px 0}.tw-save-row label{font-size:14px}.tw-bottom-note{font-size:14px;line-height:1.9;gap:14px}.tw-bottom-note kbd{font-size:12px}.tw-credits{font-size:14px}.manual-art-note{font-size:16px}.fall-stats small,.fall-floor span,.playground-foot,.fall-foot,.site-footer,.site-footer button,.local-badge{font-size:14px}.tone-footer>span:first-child{font-size:14px}.guide-table,.guide-table td,.guide-table code{font-size:14px}.surface-picker .micro-label,.switch-picker .micro-label{font-size:13px}.sheet .eyebrow{font-size:13px}.typing-hint{font-size:13px}}
@media(prefers-reduced-motion:reduce){.tw-carriage,.tw-sheet,.tw-striker,.tw-key,.tw-return-lever,.tw-progress i{animation:none!important;transition:none!important}.tw-paper-cursor{animation:none!important}}
.tw-machine-name small{font-size:12px;letter-spacing:.4px;max-width:none}.tw-chassis-bottom>span{font-size:12px;letter-spacing:.5px;line-height:1.6;text-align:center}.tw-paper-heading{font-size:12px}.tw-introduction p.tw-kicker{font-size:13px}@media(max-width:540px){.tw-machine-name small{font-size:12px;letter-spacing:.2px}.tw-chassis-bottom>span{font-size:12px;letter-spacing:0}.tw-paper-heading{font-size:12px;letter-spacing:0}}

.typewriter-sounding:not(.sound-paused) .status-dot{background:#86a789;box-shadow:0 0 0 3px #86a78916}.tw-desk{scroll-margin-top:110px}

/* Fixed printing point, short typebars and a mechanical paper escapement. */
.tw-striker{display:none}
.tw-paper-view{overflow:hidden;height:350px}
.tw-carriage{transition:transform 85ms cubic-bezier(.15,.85,.25,1)}
.tw-carriage-return .tw-carriage{transition:transform 300ms cubic-bezier(.25,.7,.2,1)}
.tw-sheet{transition:transform 170ms cubic-bezier(.2,.75,.2,1)}
.tw-striking .tw-carriage,.tw-striking .tw-sheet{transition:none}
.tw-awaiting-ink{opacity:0!important}
.tw-paper-cursor{border-left:0;width:0;overflow:visible;position:relative}
.tw-paper-cursor:after{content:'';position:absolute;left:1px;bottom:-3px;width:9px;height:1px;background:#a17858;opacity:.6}
.tw-paper-focus{border:0!important}
.tw-sheet{background:linear-gradient(0deg,#cfc7b540,transparent 90px),var(--tw-paper);box-shadow:0 1px 1px #fff,0 8px 24px #30271c26,inset 0 1px #fff}
.tw-print-mechanism{position:absolute;left:50%;top:-32px;width:80px;height:55px;transform:translateX(-50%);z-index:9;pointer-events:none}
.tw-print-point{position:absolute;left:50%;top:0;width:0;height:0}
.tw-type-guide{position:absolute;left:50%;top:5px;width:26px;height:28px;transform:translateX(-50%);border-bottom:4px solid #778078;border-radius:0 0 7px 7px;filter:drop-shadow(0 2px 1px #0005)}
.tw-type-guide i{position:absolute;top:0;width:6px;height:23px;background:linear-gradient(90deg,#69736b,#eff0df 45%,#778278);border:1px solid #687269;border-radius:2px 2px 0 0}
.tw-type-guide i:first-child{left:0;transform:rotate(-8deg)}.tw-type-guide i:last-child{right:0;transform:rotate(8deg)}
.tw-ribbon-lift{position:absolute;left:6px;right:6px;top:5px;height:18px;transform:translateY(12px);transition:transform 40ms ease-out}
.tw-ribbon-lift b{position:absolute;left:0;right:0;top:0;height:12px;background:linear-gradient(#242325 0 53%,#763c39 54%);box-shadow:inset 0 1px #ffffff12,0 1px 1px #0006}
.tw-ribbon-lift i{position:absolute;top:-3px;width:4px;height:20px;border:1px solid #667067;background:linear-gradient(90deg,#707d73,#d9dfd4);z-index:1}
.tw-ribbon-lift i:first-child{left:0}.tw-ribbon-lift i:last-child{right:0}
.tw-ribbon-raised .tw-ribbon-lift{transform:translateY(-9px)}
.tw-typebars{top:-8px;width:260px;height:93px;background:radial-gradient(ellipse at 50% 0,#101613 12%,#343d34 55%,#778376 98%);border-color:#637064;border-radius:8% 8% 48% 48%;box-shadow:inset 0 5px 13px #0009,0 1px 0 #e8eee066}
.tw-typebars>i{height:101px;width:3px;bottom:5px;background:linear-gradient(90deg,#4d594f,#b5b9a5 55%,#5b6759);transform:rotate(calc(var(--bar)*7deg));box-shadow:1px 0 1px #000b}
.tw-backplate{min-height:142px;background:linear-gradient(155deg,var(--tw-body-light),var(--tw-body) 65%);box-shadow:inset 0 2px 2px #fff8,inset 0 -3px 5px var(--tw-body-dark)}
.tw-ribbon{top:6px;width:270px;height:8px;z-index:2}
.tw-spool{position:absolute;top:9px;width:53px;height:37px;border-radius:50%;z-index:3;background:repeating-radial-gradient(ellipse at center,#313630 0 2px,#4c5449 3px 4px,#232c25 5px 6px);border:3px solid #889483;box-shadow:inset 0 0 0 2px #202c23,0 3px 0 #52624f,0 6px 7px #15231855}
.tw-spool.left{left:calc(50% - 172px)}.tw-spool.right{right:calc(50% - 172px)}
.tw-spool:before,.tw-spool:after{content:'';position:absolute;top:10px;width:8px;height:6px;border-radius:50%;background:#131e17;box-shadow:0 1px #8d988477}.tw-spool:before{left:6px}.tw-spool:after{right:6px}
.tw-spool i{position:absolute;top:50%;left:50%;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(120deg,#e1e7d6,#72806c);box-shadow:0 1px 2px #0009}
.tw-strike-assembly{position:absolute;width:0;height:0;z-index:8;pointer-events:none;perspective:550px;transform:rotate(var(--strike-angle));transform-origin:0 0}
.tw-flying-typebar{position:absolute;left:-2.5px;bottom:0;width:5px;height:var(--strike-length);transform-origin:50% 100%;animation:tw-mechanical-strike 190ms linear both;filter:drop-shadow(1px 2px 1px #121a144d)}
.tw-bar-shaft{position:absolute;inset:3px 0 0;border:1px solid #5a645c;border-radius:2px;background:linear-gradient(90deg,#58635b,#e5e8dc 43%,#829080 65%,#4e5c50)}
.tw-type-slug{position:absolute;top:-5px;left:50%;width:13px;height:10px;transform:translateX(-50%);border-radius:2px;border:1px solid #424b43;background:linear-gradient(110deg,#d6dccb,#8c9887 50%,#4a584a);box-shadow:0 2px 0 #334432,inset 0 1px #eff2e7}
.tw-bar-hinge{position:absolute;bottom:-3px;left:-1px;width:7px;height:7px;border:2px solid #8c9984;border-radius:50%;background:#343f34}
.tw-fresh-ink{animation:tw-ink-settle 130ms ease-out both}
@keyframes tw-mechanical-strike{0%{transform:rotateX(-76deg);opacity:.5}15%{transform:rotateX(-45deg);opacity:1}25%,32%{transform:rotateX(0deg)}42%{transform:rotateX(-20deg)}70%{transform:rotateX(-69deg);opacity:.8}100%{transform:rotateX(-76deg);opacity:0}}
@keyframes tw-ink-settle{0%{opacity:.65;filter:blur(.3px)}100%{opacity:1;filter:none}}
@media(max-width:540px){.tw-paper-view{height:300px}.tw-typebars{width:184px;height:85px}.tw-spool{width:35px;height:27px;top:11px}.tw-spool.left{left:calc(50% - 123px)}.tw-spool.right{right:calc(50% - 123px)}.tw-spool:before,.tw-spool:after{top:7px;width:5px;height:4px}.tw-spool:before{left:3px}.tw-spool:after{right:3px}.tw-ribbon{width:210px}.tw-backplate{min-height:157px}.tw-machine-name{bottom:18px}.tw-print-mechanism{top:-31px}}
@media(prefers-reduced-motion:reduce){.tw-strike-assembly{display:none}.tw-awaiting-ink{opacity:1!important}.tw-fresh-ink{animation:none}.tw-ribbon-lift{transition:none}.tw-carriage,.tw-sheet{transition:none!important}}

/* One shared shell, with dedicated Keyboard and Games spaces. */
.area-page[hidden]{display:none!important}
.site-nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:22px}
.site-nav .wordmark{justify-self:start;margin:0}
.site-nav .nav-actions{justify-self:end;margin:0;flex-wrap:nowrap}
.site-nav .primary-switch{display:flex;position:relative;isolation:isolate;justify-self:center;align-items:stretch;gap:0;margin:0;padding:4px;border-radius:999px;background:var(--soft);border:1px solid var(--line);width:280px;order:0}
.primary-switch-thumb{position:absolute;z-index:-1;left:4px;top:4px;bottom:4px;width:calc((100% - 8px)/2);border-radius:999px;background:var(--surface);box-shadow:0 2px 7px #0000000e,inset 0 1px #ffffff20;transform:translateX(calc(var(--area-index,0)*100%));transition:transform 260ms cubic-bezier(.22,.8,.2,1),background-color .3s}
.site-nav .primary-switch button{display:flex;flex:1;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 15px;border-radius:999px;font:650 16px/1.4 Inter,sans-serif;color:var(--secondary);transition:color .2s}
.site-nav .primary-switch button[aria-selected=true]{color:var(--ink)}
.primary-switch button svg{width:19px;height:19px;flex-shrink:0}
.primary-switch button[aria-selected=true] svg{color:var(--orange)}
.primary-switch button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.keyboard-shortcuts{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.keyboard-shortcuts .text-button{font-size:14px;gap:7px}
.keyboard-shortcuts svg{width:17px;height:17px}
.games-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:48px 6px 34px}
.games-intro .eyebrow{font-size:13px;letter-spacing:1.4px;color:var(--secondary);margin:0 0 16px}
.games-intro h1{font:850 56px/1.04 Nunito,Inter,sans-serif;letter-spacing:-2px;color:var(--ink);margin:0}
.games-intro h1 em{font-style:normal;color:var(--orange)}
.games-intro>p{font:400 16px/1.8 Inter,sans-serif;color:var(--secondary);margin:0 0 5px}
.games-page .playground{margin-bottom:36px}
.games-page .game-tabs button{min-width:0}
.game-keyboard-stage{border-top:1px solid var(--line);margin-top:20px;padding-top:24px}
.zen-mode .games-intro{display:none}
.zen-mode #keyboard-page{display:none!important}
@media(max-width:1100px){.site-nav{gap:15px}.site-nav .primary-switch{width:258px}.site-nav .primary-switch button{font-size:15px;padding:10px 12px}.nav-actions .add-sounds{font-size:14px}}
@media(max-width:900px){.site-nav{grid-template-columns:1fr auto;row-gap:14px}.site-nav .primary-switch{grid-column:1/-1;grid-row:2;width:300px;order:3}.site-nav .nav-actions{grid-column:2;grid-row:1}.games-intro{padding-top:34px}.games-intro h1{font-size:48px}.games-intro>p{font-size:15px}.keyboard-shortcuts{gap:16px}.keyboard-stage #games-keyboard{min-width:640px}}
@media(max-width:540px){.site-nav{padding:14px 17px;gap:13px 8px}.site-nav .primary-switch{width:100%;max-width:320px}.site-nav .primary-switch button{font-size:16px;min-height:44px}.site-nav .nav-actions .add-sounds{font-size:13px;padding:10px 12px}.site-nav .wordmark{font-size:23px}.games-intro{display:block;padding:29px 4px 25px}.games-intro h1{font-size:43px;letter-spacing:-1.5px}.games-intro h1 br{display:none}.games-intro .eyebrow{font-size:12px;margin-bottom:12px}.games-intro>p{margin:14px 0 0;font-size:15px}.games-intro>p br{display:none}.keyboard-shortcuts{justify-content:center;gap:18px}.keyboard-shortcuts .text-button{font-size:14px}.games-page .game-tabs{width:100%;max-width:100%}.games-page .game-tabs button{font-size:14px;min-width:0;padding:10px 8px}.game-keyboard-stage{margin-left:0;margin-right:0}}
@media(prefers-reduced-motion:reduce){.primary-switch-thumb,.primary-switch button{transition:none}}
@media(max-width:540px){.games-intro h1 br{display:block}}
@media(max-width:540px){.site-nav .nav-actions .add-sounds{width:42px;height:42px;min-width:42px;padding:11px;font-size:0;gap:0}.site-nav .nav-actions .add-sounds svg{width:19px;height:19px}}
/* Shared shop, sound library and information pages. */
.launch-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0 0;font-size:14px;color:var(--secondary)}
.launch-bar>span{display:flex;align-items:center;gap:9px}.launch-bar>span>i{width:7px;height:7px;border-radius:50%;background:var(--orange)}
.launch-bar>div{display:flex;gap:24px;align-items:center}.launch-bar .text-button{font-size:14px}.launch-bar .button{font-size:14px;padding:12px 18px}
.button.gumroad-button,.dark .button.gumroad-button{background:#ff90c3;color:#292027;border:1px solid #e87caf;border-radius:999px;text-decoration:none;font-weight:650;box-shadow:0 2px 0 #b7507f22}
.button.gumroad-button:hover:not(:disabled){background:#ffa4cf;transform:translateY(-2px)}
.button:disabled{cursor:not-allowed}.gumroad-button:disabled{opacity:.88}.checkout-soon{font-size:12px;padding:3px 7px;border-radius:20px;background:#0000000c;font-weight:600}
.default-sounds{margin:24px 0;padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--surface)}
.default-sounds-heading{display:flex;gap:15px;align-items:center;justify-content:space-between;margin-bottom:25px}.default-sounds h3{font-size:25px;letter-spacing:-.5px;margin:7px 0 0}.default-sounds .eyebrow{font-size:12px}
.sound-choice-row{display:grid;grid-template-columns:125px 1fr;gap:18px;align-items:center;margin-top:18px}.sound-choice-row>span{font-size:15px;font-weight:600}.sound-choice-row>div{display:flex;gap:8px;flex-wrap:wrap}
.sound-choice{display:flex;align-items:center;gap:9px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);font:500 14px Inter,sans-serif;transition:background .2s,transform .2s,border-color .2s;min-height:46px}
.sound-choice svg{width:16px;height:16px}.sound-choice small{font-size:12px;color:var(--secondary)}.sound-choice:disabled{cursor:not-allowed;opacity:.72}.sound-choice:not(:disabled):hover{transform:translateY(-2px);border-color:var(--orange)}.sound-choice[aria-pressed=true]{background:var(--soft);border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}.sound-choice i{height:6px;width:6px;border-radius:50%;background:var(--line)}.sound-choice[aria-pressed=true] i{background:var(--orange)}
.sound-choice-note{font-size:14px;line-height:1.7;color:var(--secondary);margin:22px 0 0}.mouse-source-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:24px 0;font-size:15px}.mouse-source-row small{font-size:13px;color:var(--secondary)}.mouse-source-row .button{font-size:14px;padding:10px 14px}.mouse-source-row [aria-pressed=true]{border-color:var(--orange)}
.feature-showcase{padding-top:110px}.marketing-heading{max-width:670px;margin:0 auto 34px;text-align:center}.marketing-heading .eyebrow{font-size:12px;letter-spacing:2px;line-height:1.7}.marketing-heading h2,.faq-section h2{font-size:58px;letter-spacing:-2px;font-weight:750;line-height:1.12;margin:18px 0}.marketing-heading h2 em,.faq-section h2 em{font-style:normal;color:var(--orange)}.marketing-heading>p:last-child{font-size:17px;line-height:1.85;color:var(--secondary);max-width:550px;margin:22px auto 0}
.feature-jumps{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:32px 0 60px}.feature-jumps button{background:var(--surface);border:1px solid var(--line);border-radius:50px;padding:12px 19px;font:500 14px Inter,sans-serif;color:var(--secondary)}.feature-jumps button:hover{border-color:var(--orange);color:var(--ink)}
.feature-story{display:grid;grid-template-columns:1.08fr 1fr;gap:65px;align-items:center;margin:0 0 64px;scroll-margin-top:130px}.feature-story.reverse .feature-art{order:2}.feature-story.reverse .feature-copy{order:1}.feature-copy h3{font-size:39px;font-weight:750;line-height:1.14;letter-spacing:-1px;margin:16px 0 20px}.feature-number{font-size:12px;letter-spacing:2px;font-weight:600;color:var(--secondary)}.feature-copy p{font-size:16px;line-height:1.85;color:var(--secondary);margin:0 0 22px}.feature-copy ul,.price-card ul{list-style:none;padding:0;margin:0 0 25px}.feature-copy li,.price-card li{position:relative;font-size:15px;line-height:1.8;margin:10px 0;padding-left:25px;color:var(--ink)}.feature-copy li:before,.price-card li:before{content:'✓';position:absolute;left:0;color:var(--orange);font-weight:700}.feature-copy .text-button{font-size:15px}
.feature-art{min-height:390px;border:1px solid var(--line);border-radius:28px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:32px;overflow:hidden;position:relative;background:var(--soft);gap:25px}.art-label{font-size:11px;letter-spacing:1.7px;font-weight:600;color:var(--secondary);text-align:center}.sound-art{background:radial-gradient(ellipse at 50% 45%,#f5c6a44a,transparent 65%),var(--soft)}.art-wave{height:115px;display:flex;align-items:center;justify-content:center;gap:6px;width:100%}.art-wave i{width:5px;max-width:2%;height:var(--wave);background:var(--orange);border-radius:6px;opacity:.7}.art-pills{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.art-pills span{font-size:13px;border:1px solid var(--line);border-radius:30px;padding:8px 12px;background:var(--surface);color:var(--secondary)}.feature-art .button{font-size:14px}
.desktop-art{background:radial-gradient(ellipse at 50% 45%,#a8c29833,transparent 70%),var(--soft)}.desktop-mini-window{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 24px 45px #00000012;transform:rotate(-3deg)}.desktop-mini-window>div:first-child{display:flex;gap:5px;margin-bottom:23px}.desktop-mini-window i{width:6px;height:6px;background:var(--line);border-radius:50%}.desktop-mini-window>span{font:600 23px/1.5 Nunito,sans-serif;color:var(--ink)}.demo-key-row{display:flex;gap:5px;margin-top:24px;padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--soft)}.demo-key-row b{flex:1;text-align:center;padding:11px 0;border-radius:4px;background:var(--surface);box-shadow:0 3px 0 var(--line);font:500 14px Inter,sans-serif}.art-bottom{font-size:13px;color:var(--secondary);text-align:center;line-height:1.7}
.play-art{background:radial-gradient(ellipse at 50% 45%,#9ca5ce25,transparent 70%),var(--soft)}.game-art-keys{display:flex;gap:18px;padding:30px 0}.game-art-keys b{display:grid;place-items:center;width:70px;height:77px;background:linear-gradient(145deg,var(--surface),var(--soft));border:1px solid var(--line);box-shadow:0 7px 0 var(--line),0 20px 25px #00000012;border-radius:14px;font:600 35px Nunito,sans-serif;transform:rotate(-10deg)}.game-art-keys b:nth-child(2){transform:translateY(18px) rotate(6deg);color:var(--orange)}.game-art-keys b:last-child{transform:rotate(13deg)}
.quiet-promises{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;padding:30px 0 45px;border-bottom:1px solid var(--line)}.quiet-promises b{font:750 22px Nunito,sans-serif}.quiet-promises p{font-size:15px;line-height:1.85;color:var(--secondary);margin:13px 0}
.pricing-section{padding-top:100px}.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:920px;margin:44px auto 0}.price-card{padding:36px;border:1px solid var(--line);border-radius:26px;background:var(--surface);display:flex;flex-direction:column;align-items:flex-start}.direct-price{border-color:color-mix(in srgb,var(--orange) 48%,var(--line))}.gumroad-price{background:linear-gradient(135deg,#ff90c30a,transparent),var(--surface)}.price-badge{font-size:11px;letter-spacing:1.4px;font-weight:650;border:1px solid var(--line);border-radius:30px;padding:8px 11px;color:var(--secondary)}.price-card h3{font-size:26px;letter-spacing:-.5px;margin:25px 0 19px}.price{display:flex;align-items:baseline;gap:10px}.price strong{font:800 62px/1 Nunito,sans-serif;letter-spacing:-2px}.price>span{font-size:14px;color:var(--secondary)}.price-card>p{font-size:15px;line-height:1.85;color:var(--secondary);min-height:84px;margin:22px 0 14px}.price-card ul{margin-bottom:25px}.price-card>.button{margin-top:auto;width:100%;justify-content:center;font-size:16px;min-height:50px}.price-card>small{font-size:13px;color:var(--secondary);line-height:1.7;margin-top:15px;min-height:44px}.pricing-footnote{max-width:830px;margin:22px auto 0;font-size:13px;color:var(--secondary);text-align:center;line-height:1.8}
.cashback-banner{margin:45px 0 0;display:flex;justify-content:space-between;align-items:center;gap:35px;padding:36px 40px;background:var(--soft);border:1px solid var(--line);border-radius:24px}.cashback-banner>div{max-width:650px}.cashback-banner h3{font-size:29px;line-height:1.25;margin:12px 0}.cashback-banner p{font-size:15px;color:var(--secondary);line-height:1.85;margin:0}.cashback-banner .eyebrow{font-size:11px}.cashback-banner>.button{white-space:nowrap;text-decoration:none;font-size:14px}
.faq-section{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px;padding-top:100px;padding-bottom:100px}.faq-section h2{font-size:46px}.faq-section .eyebrow{font-size:12px}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:16px;font-weight:550;padding:22px 0;cursor:pointer;line-height:1.6}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-size:23px;font-weight:300;color:var(--secondary);transition:transform .2s}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list details p{font-size:15px;line-height:1.9;color:var(--secondary);margin:0 0 25px}
.commerce-footer{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;border-top:1px solid var(--line);padding:45px 0 25px}.commerce-footer>div{display:flex;flex-direction:column;align-items:flex-start;gap:14px}.commerce-footer .wordmark{font:800 35px Nunito,sans-serif;letter-spacing:-1px}.commerce-footer p{font-size:15px;line-height:1.8;color:var(--secondary);margin:0 0 5px}.commerce-footer h3{font:700 16px Inter,sans-serif;margin:8px 0 6px}.commerce-footer a:not(.button),.commerce-footer button:not(.button):not(.wordmark){font:400 14px Inter,sans-serif;color:var(--secondary);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}.commerce-footer a:hover,.commerce-footer button:hover{color:var(--ink)}.commerce-footer .button{font-size:14px;padding:12px 18px}.commerce-footer .footer-bottom{grid-column:1/-1;flex-direction:row;justify-content:space-between;border-top:1px solid var(--line);padding-top:24px;margin-top:18px;font-size:12px;color:var(--secondary)}
.info-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:70px;padding:60px 0 80px;align-items:start}.info-nav{display:flex;flex-direction:column;gap:7px;position:sticky;top:120px}.info-nav a{font-size:14px;text-decoration:none;color:var(--secondary);padding:11px 14px;border-radius:10px}.info-nav a[aria-current=page]{background:var(--soft);color:var(--ink);font-weight:600}.info-nav a:hover{background:var(--soft)}.info-document{max-width:760px}.info-document>.text-button{margin-bottom:36px;font-size:14px}.info-document>.eyebrow{font-size:12px}.info-document h1{font:750 53px/1.12 Nunito,sans-serif;letter-spacing:-1.8px;margin:17px 0 24px;outline:none}.info-intro{font-size:19px!important;line-height:1.75!important;color:var(--secondary)}.info-document .info-date{font-size:13px;color:var(--secondary);margin:22px 0 40px;padding-bottom:25px;border-bottom:1px solid var(--line)}.info-document section{margin:32px 0}.info-document h2{font:750 27px/1.3 Nunito,sans-serif;letter-spacing:-.4px;margin:0 0 16px}.info-document p,.info-document li{font-size:16px;line-height:1.9;color:var(--secondary);margin:12px 0}.info-document strong{color:var(--ink);font-weight:600}.info-document ul,.info-document ol{padding-left:24px}.info-document a{color:var(--ink);text-underline-offset:4px;overflow-wrap:anywhere}.info-document code{font-size:14px;color:var(--ink);background:var(--soft);padding:3px 6px;border-radius:4px}.info-end{padding:25px 0;border-top:1px solid var(--line);margin-top:40px;font-size:15px;color:var(--secondary);line-height:1.8}.reading-info .primary-switch-thumb{opacity:0}.reading-info .launch-bar{display:none}.zen-mode .launch-bar,.zen-mode .commerce-footer{display:none}
@media(max-width:1000px){.feature-story{gap:35px}.feature-art{padding:25px;min-height:370px}.feature-copy h3{font-size:33px}.feature-copy li{font-size:14px}.cashback-banner{padding:30px;gap:25px}.cashback-banner h3{font-size:26px}.info-layout{gap:40px;grid-template-columns:170px minmax(0,1fr)}}
@media(max-width:760px){.launch-bar{padding-top:18px;justify-content:center}.launch-bar>span{display:none}.feature-showcase,.pricing-section{padding-top:70px}.marketing-heading h2{font-size:43px}.marketing-heading>p:last-child{font-size:16px}.feature-story{grid-template-columns:1fr;gap:30px;margin-bottom:55px}.feature-story.reverse .feature-art{order:0}.feature-story.reverse .feature-copy{order:1}.feature-art{min-height:330px}.feature-copy h3{font-size:34px}.feature-copy h3 br{display:none}.feature-copy li{font-size:15px}.quiet-promises{grid-template-columns:1fr;gap:18px}.quiet-promises p{margin:8px 0}.pricing-grid{grid-template-columns:1fr;max-width:500px}.price-card{padding:28px}.price-card>p{min-height:0}.cashback-banner{flex-direction:column;align-items:flex-start}.faq-section{grid-template-columns:1fr;gap:25px;padding-top:65px;padding-bottom:65px}.faq-section h2{font-size:39px}.faq-section h2 br{display:none}.commerce-footer{grid-template-columns:1fr 1fr}.commerce-footer .footer-brand{grid-column:1/-1;margin-bottom:12px}.commerce-footer .footer-bottom{flex-direction:column;font-size:12px}.info-layout{display:block;padding-top:25px}.info-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:3px;padding-bottom:25px;margin-bottom:25px;border-bottom:1px solid var(--line)}.info-nav a{font-size:13px;padding:9px 11px}.info-document h1{font-size:40px}.info-document p,.info-document li{font-size:16px}.info-document>.text-button{margin-bottom:28px}.default-sounds{padding:22px}.sound-choice-row{grid-template-columns:1fr;gap:10px}.default-sounds-heading{align-items:flex-start}.default-sounds h3{font-size:23px}.default-sounds-heading>.text-button{font-size:13px;white-space:nowrap}}
@media(max-width:440px){.launch-bar>div{gap:18px}.launch-bar .button{padding:10px 13px;font-size:13px}.launch-bar .text-button{font-size:13px}.default-sounds-heading{display:block}.default-sounds-heading>.text-button{margin-top:13px}.sound-choice{font-size:13px;padding:11px 12px}.sound-choice-row>span{font-size:14px}.sound-choice-note{font-size:13px}.art-label{font-size:10px}.game-art-keys b{width:58px;height:65px}.feature-art{padding:25px 19px}.feature-copy h3{font-size:30px}.feature-jumps{gap:7px;margin-bottom:35px}.feature-jumps button{padding:10px 14px;font-size:13px}.marketing-heading h2{font-size:39px}.price-badge{font-size:10px;letter-spacing:1px}.cashback-banner{padding:26px}.cashback-banner h3{font-size:25px}.info-document h1{font-size:36px}.info-document h2{font-size:25px}.info-intro{font-size:17px!important}}


.info-document h1:focus-visible{outline:none!important}

/* Clear, shared category switches and master mute. */
.sound-controls{padding:24px 0 5px}
.sound-controls-heading{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:13px}
.sound-controls-heading>span{font:750 19px/1.4 Nunito,Inter,sans-serif;letter-spacing:-.2px;color:var(--ink)}
.sound-controls-heading p{font:400 13px/1.6 Inter,sans-serif;color:var(--secondary);margin:0}
.sound-control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sound-control{display:flex;align-items:center;gap:13px;min-height:78px;padding:17px 20px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:19px;text-align:left;cursor:pointer;transition:background .22s,border-color .22s,box-shadow .22s}
.sound-control:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line));box-shadow:0 3px 12px #00000005}
.sound-control-icon{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;background:var(--soft);border:1px solid var(--line);border-radius:12px;color:var(--secondary);transition:color .2s,background .2s}
.sound-control-icon svg{width:20px;height:20px}
.sound-control-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.sound-control-copy strong{font:600 15px/1.4 Inter,sans-serif;color:var(--ink);white-space:nowrap}
.sound-control-copy small{font:400 13px/1.4 Inter,sans-serif;color:var(--secondary)}
.sound-control-track{position:relative;flex-shrink:0;margin-left:auto;width:42px;height:25px;border-radius:20px;background:var(--line);transition:background .22s}
.sound-control-track i{position:absolute;left:3px;top:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #00000020;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.sound-control[aria-checked=true] .sound-control-track{background:var(--orange)}
.sound-control[aria-checked=true] .sound-control-track i{transform:translateX(17px)}
.sound-control[aria-checked=true]:not(.master-mute) .sound-control-icon{color:var(--orange)}
.sound-control.master-mute[aria-checked=true]{border-color:var(--orange);background:color-mix(in srgb,var(--orange) 6%,var(--surface))}
.sound-control.overridden .sound-control-icon{color:var(--secondary)}
.sound-control.overridden .sound-control-track{background:var(--secondary)}
.zen-mode .sound-controls{display:none}
@media(max-width:1000px){.sound-control{padding:15px;gap:10px}.sound-control-icon{width:32px;height:34px}.sound-control-copy strong{font-size:14px}.sound-control-track{width:38px;height:23px}.sound-control-track i{width:17px;height:17px}.sound-control[aria-checked=true] .sound-control-track i{transform:translateX(15px)}}
@media(max-width:700px){.sound-controls{padding-top:21px}.sound-controls-heading{display:block;margin-bottom:14px;padding:0 2px}.sound-controls-heading>span{font-size:20px}.sound-controls-heading p{font-size:13px;margin-top:5px}.sound-control-grid{grid-template-columns:1fr;gap:8px}.sound-control{min-height:66px;padding:12px 17px;gap:13px;border-radius:16px}.sound-control-icon{width:35px;height:35px}.sound-control-copy{flex:1;flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px}.sound-control-copy strong{font-size:15px}.sound-control-copy small{font-size:13px;min-width:22px}.sound-control-track{margin-left:5px;width:42px;height:25px}.sound-control-track i{width:19px;height:19px}.sound-control[aria-checked=true] .sound-control-track i{transform:translateX(17px)}}
@media(prefers-reduced-motion:reduce){.sound-control,.sound-control-icon,.sound-control-track,.sound-control-track i{transition:none}}
@media(min-width:901px) and (max-width:1400px){.site-nav{grid-template-columns:1fr auto;row-gap:14px}.site-nav .primary-switch{grid-column:1/-1;grid-row:2;width:300px}.site-nav .nav-actions{grid-column:2;grid-row:1}}



.sound-choice-row>span:has(.switch){display:flex;flex-direction:column;align-items:flex-start;gap:10px}.sound-choice-row>span>.switch{flex-shrink:0}.sound-choice-note{max-width:760px}

/* Independent scroll control, with master mute on its own centered row. */
.sound-control-grid .master-mute{grid-column:1/-1;justify-self:center;width:calc((100% - 24px)/3);min-width:230px;max-width:360px}
#browser-floating{transition:opacity .18s ease-out}
.sheet.result-sheet{inset:0;margin:auto;width:min(540px,calc(100vw - 32px));height:max-content;max-height:calc(100vh - 48px);border:1px solid var(--line);border-radius:30px;background:var(--surface);color:var(--ink);overflow:visible;box-shadow:0 28px 100px #00000030}
.sheet.result-sheet[open]{animation:result-appear .18s ease-out}
.sheet.result-sheet #panel-body{padding:35px 34px 29px}
.typing-result{text-align:center;position:relative}
.result-close{position:absolute;right:-9px;top:-10px;font:400 29px Inter,sans-serif;background:var(--soft);color:var(--secondary);width:39px;height:39px;z-index:3}
.typing-result>.eyebrow{font-size:11px;letter-spacing:1.8px;justify-content:center;margin:0 25px 19px;line-height:1.7;color:var(--secondary)}
.result-emblem{font:600 35px/1 Nunito,sans-serif;color:var(--orange);margin:0 0 12px}
.typing-result h2{font:800 38px/1.15 Nunito,sans-serif;letter-spacing:-1px;margin:0 0 12px;color:var(--ink)}
.typing-result #typing-result-description{font:400 15px/1.75 Inter,sans-serif;color:var(--secondary);margin:0}
.result-primary{display:flex;flex-direction:column;align-items:center;margin:25px 0 21px;gap:0}
.result-primary strong{font:850 85px/1 Nunito,sans-serif;letter-spacing:-3px;color:var(--orange)}
.result-primary>span{font:500 15px/1.8 Inter,sans-serif;color:var(--secondary);margin-top:5px}
.result-details{display:grid;grid-template-columns:1fr 1fr;background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:19px 10px;margin-bottom:18px}
.result-details>div{display:flex;flex-direction:column;align-items:center;gap:5px}
.result-details>div+div{border-left:1px solid var(--line)}
.result-details strong{font:800 34px/1.2 Nunito,sans-serif;letter-spacing:-.7px;color:var(--ink)}
.result-details span{font:400 14px/1.5 Inter,sans-serif;color:var(--secondary)}
.result-note{font:400 13px/1.8 Inter,sans-serif;color:var(--secondary);margin:0 0 22px}
.result-retry{width:100%;font-size:16px;min-height:49px}
.typing-result>.text-button{font-size:14px;margin:17px auto 0;color:var(--secondary)}
.result-confetti{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.result-confetti i{position:absolute;left:var(--origin);top:24%;width:8px;height:12px;border-radius:var(--shape);background:var(--color);opacity:0;animation:result-confetti 1.2s var(--delay) cubic-bezier(.15,.65,.35,1) both;will-change:transform,opacity}
@keyframes result-confetti{0%{transform:translate(0,-20px) rotate(0deg);opacity:0}8%{opacity:1}28%{transform:translate(calc(var(--x)*.55),-90px) rotate(calc(var(--spin)*.45));opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--spin));opacity:0}}
@keyframes result-appear{from{opacity:0}to{opacity:1}}
@media(max-width:700px){.sound-control-grid .master-mute{width:100%;max-width:320px;min-width:0;margin-top:4px}}
@media(max-width:540px){.sheet.result-sheet{width:calc(100vw - 26px);border-radius:24px}.sheet.result-sheet #panel-body{padding:29px 23px 25px}.typing-result h2{font-size:32px}.typing-result>.eyebrow{font-size:10px;margin-bottom:14px}.result-emblem{font-size:29px}.result-primary{margin:19px 0}.result-primary strong{font-size:72px}.result-details strong{font-size:29px}.result-details span{font-size:13px}.result-note{font-size:12px;margin-bottom:18px}.result-close{right:-6px;top:-7px}}
@media(max-height:720px){.sheet.result-sheet{max-height:calc(100vh - 28px);overflow-y:auto;overflow-x:hidden}.sheet.result-sheet #panel-body{padding-top:23px;padding-bottom:22px}.result-emblem{display:none}.typing-result h2{font-size:31px}.result-primary{margin:13px 0}.result-primary strong{font-size:63px}.result-details{padding:13px 10px;margin-bottom:12px}.result-note{margin-bottom:15px}.typing-result>.eyebrow{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){#browser-floating{transition:none}.result-confetti{display:none}.sheet.result-sheet[open]{animation:none}}

/* Native fullscreen keeps every game, its controls and result dialogs in one document. */
.tw-view-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.game-fullscreen-button{white-space:nowrap}
.game-fullscreen-exit{gap:9px;flex-shrink:0}
.game-fullscreen-exit kbd{font-size:12px;opacity:.65}
html:fullscreen{background:var(--paper)}
.game-fullscreen .titlebar,.game-fullscreen .site-nav,.game-fullscreen .games-intro,.game-fullscreen #browser-floating,.game-fullscreen .zen-exit{display:none!important}
.game-fullscreen .app-scroll{height:100vh;height:100dvh;scroll-padding-top:95px}
.game-fullscreen main{display:block;min-height:100vh;min-height:100dvh}
.game-fullscreen main>:not(#games-page){display:none!important}
.game-fullscreen #playground{width:calc(100% - 48px);max-width:1180px;margin:0 auto;padding:24px 0 36px;border:0;background:transparent;box-shadow:none}
.game-fullscreen .playground-heading{position:sticky;top:0;z-index:25;display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:12px 0;margin:0 0 22px;background:var(--paper)}
.game-fullscreen .playground-title{display:none}
.game-fullscreen .game-tabs{width:auto;max-width:100%}
.game-fullscreen [data-action=zen],.game-fullscreen [data-tw-action=focus],.game-fullscreen .game-fullscreen-button{display:none}
.game-fullscreen .keyfall-arena{height:clamp(280px,calc(100dvh - 330px),680px)}
.game-fullscreen #playground[data-game-mode=typewriter]{max-width:1100px}
.game-fullscreen .tw-introduction{display:none}
.game-fullscreen .tw-desk{padding-top:16px;padding-bottom:26px}
.game-fullscreen .tw-paper-view{height:clamp(150px,calc(100dvh - 620px),300px)}
@media(max-width:700px){.tw-introduction{flex-wrap:wrap}.tw-view-actions .game-fullscreen-button{width:auto;min-height:44px;font-size:14px;padding:10px 14px;gap:8px}}
@media(max-width:640px){.tw-view-actions{gap:8px}.game-fullscreen #playground{width:calc(100% - 28px);padding-top:8px}.game-fullscreen .playground-heading{gap:10px}.game-fullscreen .game-tabs{width:100%;order:2}.game-fullscreen .game-fullscreen-exit{margin-left:auto;font-size:13px;min-height:40px;padding:8px 13px}.game-fullscreen .keyfall-arena{height:clamp(280px,calc(100dvh - 370px),500px)}}


.license-settings{border:1px solid var(--line);border-radius:18px;padding:20px;margin:0 0 28px}.license-settings strong{font-size:16px}.license-settings p{font-size:14px;line-height:1.7;color:var(--secondary)}.license-settings small{display:block;font-size:13px;line-height:1.7;margin-top:13px;color:var(--secondary)}

/* Wordfall: sculpted physical keycaps, a quiet tabletop and readable game controls. */
.wordfall-game{padding:9px 0 0}.wf-heading{display:flex;align-items:center;justify-content:space-between;gap:28px;margin:12px 0 28px}.wf-heading .eyebrow{font-size:12px;letter-spacing:1.6px;margin:0 0 12px;color:var(--secondary)}.wf-heading h3{font:850 clamp(32px,4vw,45px)/1.06 Nunito,Inter,sans-serif;letter-spacing:-1.5px;margin:0}.wf-heading h3 em{font-style:normal;color:var(--orange)}.wf-heading p:last-child{color:var(--secondary);font-size:15px;line-height:1.7;margin:14px 0 0}.wf-tools{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-end;gap:12px;max-width:330px}.wf-tools label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--secondary)}.wf-tools select{font:500 15px Inter,sans-serif;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);min-height:44px}.wf-scoreboard{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;border-top:1px solid var(--line);padding:24px 3px 20px}.wf-scoreboard>div{display:flex;flex-direction:column;gap:7px}.wf-scoreboard span{font:600 12px/1.5 Inter,sans-serif;letter-spacing:1px;color:var(--secondary)}.wf-scoreboard strong{font:800 clamp(24px,3vw,34px)/1 Nunito,Inter,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink)}.wf-time-stat{text-align:right}.wf-time-stat strong{color:var(--orange)}.wf-scoreboard small{font-size:17px;font-weight:500;color:var(--secondary)}
.wf-arena{position:relative;height:370px;overflow:hidden;isolation:isolate;border-radius:24px;background:linear-gradient(165deg,#f3eee4 0%,#e6e0d6 100%);border:1px solid #d5cfc480;box-shadow:inset 0 2px 12px #8f765a0a,inset 0 -1px 0 #fff9}.dark .wf-arena{background:radial-gradient(ellipse at 30% -20%,#39342e 0%,#22221f 60%,#1a1b19 100%);border-color:#ffffff0c}.wf-stage-light{position:absolute;inset:0;background:radial-gradient(ellipse at 28% 5%,#ffffffb5,transparent 64%);opacity:.55;pointer-events:none}.dark .wf-stage-light{opacity:.08}.wf-scene-label{position:absolute;left:24px;right:24px;top:22px;display:flex;justify-content:space-between;gap:12px;color:#8f8375;font:600 11px/1.5 Inter,sans-serif;letter-spacing:2px;z-index:0}.dark .wf-scene-label{color:#999185}.wf-scene-label span:first-child{letter-spacing:3px}.wf-floor{position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(#b3a28e15,#b8a58d27);border-top:1px solid #b7a58c35;box-shadow:0 -1px 0 #fff3}.dark .wf-floor{background:linear-gradient(#0000,#0003);border-color:#fff1}.wf-caps,.wf-shadows{position:absolute;inset:0;pointer-events:none}.wf-cap{position:absolute;left:0;top:0;will-change:transform;perspective:650px;transform-origin:50% 50%;filter:drop-shadow(0 3px 2px #1f1b1820)}.wf-cap-shell{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(14deg + var(--wf-pitch,0deg))) rotateY(-9deg);border-radius:18%;background:linear-gradient(135deg,#a49a8c,#a49c8e 32%,#b9afa0 50%,#746c61 100%);box-shadow:inset 1px 1px 1px #ffffffb0,inset -1px -1px 1px #322d285c,0 5px 0 #776d61,0 6px 1px #342f2a70}.wf-cap-face{position:absolute;inset:5% 7% 17%;display:grid;place-items:center;transform:translateZ(5px);border-radius:17%;background:radial-gradient(ellipse at 52% 58%,#ded4c4 0%,#e9e1d4 58%,#f4eee3 86%,#fff9ef 100%);box-shadow:inset 0 1px 2px #fff,inset 1px 0 1px #fff6,inset 0 -2px 3px #b3a48b66,0 0 0 1px #95836d66,0 2px 2px #76674c3b;overflow:hidden}.wf-cap-face:after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(25deg,#fff0 0px,#fff0 2px,#ffffff09 3px,#00000003 4px);mix-blend-mode:soft-light;pointer-events:none}.wf-cap-face b{font:800 clamp(23px,3vw,35px)/1 Nunito,Inter,sans-serif;color:#51483c;text-shadow:0 1px 0 #fff8;transform:translateY(-1px)}.wf-cap-face>i{position:absolute;left:17%;right:17%;bottom:6%;height:1px;background:#fff4;border-radius:100%;filter:blur(.5px)}.wf-cap-front{position:absolute;left:7%;right:6%;height:21%;bottom:0;border-radius:0 0 12% 12%;background:linear-gradient(#9c8d79,#b9ab96 45%,#8b7c68);transform:translateZ(-1px);box-shadow:inset 0 -1px 0 #65574377}.wf-cap-left{position:absolute;left:0;top:8%;bottom:9%;width:9%;background:linear-gradient(90deg,#c7beaf,#d7cfc1);border-radius:30% 0 0 30%}.wf-cap-right{position:absolute;right:0;top:8%;bottom:8%;width:8%;background:linear-gradient(90deg,#8e8171,#7d7164);border-radius:0 30% 30% 0}.wf-cap-orange .wf-cap-shell{background:linear-gradient(135deg,#ffbf6e,#f49a2b 45%,#af4707);box-shadow:inset 1px 1px 1px #fff9,inset -1px -1px 1px #8c380860,0 5px 0 #ac4b0a,0 6px 1px #71330650}.wf-cap-orange .wf-cap-face{background:radial-gradient(ellipse at 48% 56%,#f49c31,#ffb54d 65%,#ffd18a 98%);box-shadow:inset 0 1px 2px #fff9,inset 0 -2px 3px #e47b1a66,0 0 0 1px #ac611d55,0 2px 2px #aa4e2033}.wf-cap-orange .wf-cap-face b{color:#fff9eb;text-shadow:0 1px 1px #ab520d65}.wf-cap-orange .wf-cap-front{background:linear-gradient(#d77013,#de801b 45%,#b95b0c)}.wf-cap-orange .wf-cap-left{background:linear-gradient(90deg,#e68624,#ffb457)}.wf-cap-orange .wf-cap-right{background:linear-gradient(90deg,#ca6314,#b9530b)}.wf-shadows>i{position:absolute;background:#291e16;border-radius:50%;will-change:transform,opacity}.wf-sockets{position:absolute;top:48%;left:20px;right:20px;display:flex;justify-content:center;align-items:center;gap:10px;transform:translateY(-50%);opacity:0;transition:opacity .35s}.wf-sockets>i{width:clamp(30px,6vw,68px);height:clamp(34px,6vw,68px);border:1px solid #9e8f7920;border-radius:14px;background:#b7a88e09}.wf-assembling .wf-sockets{opacity:1}.wf-points{position:absolute;top:69%;left:0;right:0;text-align:center;font:800 28px Nunito,Inter,sans-serif;color:#8f591e;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .5s;pointer-events:none}.dark .wf-points{color:#f2b365}.wf-assembling .wf-points{opacity:1;transform:translateY(0)}.wf-cover{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:22px;background:#f1ecdf40;backdrop-filter:blur(4px)}.dark .wf-cover{background:#1717145c}.wf-cover[hidden]{display:none}.wf-intro-card{text-align:center;padding:25px 32px;border:1px solid #ffffff9c;border-radius:23px;background:#fffdf1e0;box-shadow:0 18px 45px #76634715;max-width:400px}.dark .wf-intro-card{background:#262723ed;border-color:#ffffff16;box-shadow:0 18px 45px #0003}.wf-small-label{font:600 11px/1.6 Inter,sans-serif;letter-spacing:1.5px;color:var(--secondary)}.wf-intro-card h4,.wf-result h4{font:850 31px/1.12 Nunito,Inter,sans-serif;letter-spacing:-1px;margin:13px 0;color:var(--ink)}.wf-intro-card p{font-size:15px;line-height:1.7;color:var(--secondary);margin:0 0 20px}.wf-next{align-self:end;margin-bottom:24px}.wf-arena[data-state=solved] .wf-cover,.wf-arena[data-state=revealed] .wf-cover{background:none;backdrop-filter:none;pointer-events:none}.wf-next{pointer-events:auto}.wf-arena[data-state=finished] .wf-cover{backdrop-filter:blur(10px);background:#f0ebdfd9}.dark .wf-arena[data-state=finished] .wf-cover{background:#22231feb}.wf-result{text-align:center;max-width:620px}.wf-result>strong{display:block;font:850 64px/1 Nunito,Inter,sans-serif;letter-spacing:-3px;color:var(--orange);margin:13px 0 8px}.wf-result h4{font-size:25px;margin:7px 0}.wf-result p{font-size:14px;line-height:1.7;color:var(--secondary);margin:8px 0 14px}.wf-round-history{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:17px}.wf-round-history>span{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 8px;font-size:12px;color:var(--secondary)}.wf-round-history b{margin-left:5px;font-size:11px}.wf-round-history .wf-found{color:var(--ink)}.wf-time-track{height:3px;background:var(--line);border-radius:0 0 10px 10px;overflow:hidden;margin:0 16px}.wf-time-track>i{height:100%;display:block;background:var(--orange);transition:width .15s linear}.wf-time-low~.wf-time-track>i{background:#b95d36}.wf-answer{max-width:680px;margin:28px auto 0}.wf-answer>label{display:block;font:600 12px/1.6 Inter,sans-serif;letter-spacing:1.6px;color:var(--secondary);margin-bottom:11px}.wf-answer>div{display:flex;gap:12px}.wf-answer input{min-width:0;flex:1;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:14px;font:750 23px/1.3 Nunito,Inter,sans-serif;letter-spacing:3px;padding:15px 18px;outline:none;min-height:61px}.wf-answer input::placeholder{font:400 17px Inter,sans-serif;letter-spacing:0;color:var(--muted)}.wf-answer input:focus{border-color:var(--orange);box-shadow:0 0 0 3px #f7931c14}.wf-answer .button{padding:15px 20px;min-width:145px}.wf-answer button>span{opacity:.55;margin-left:8px}.wf-answer>p{min-height:48px;font-size:14px;line-height:1.75;color:var(--secondary);margin:13px 0 0}.wf-answer .wf-error{color:#ba5a3e}.wf-actions{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;padding:7px 0 24px}.wf-actions .button,.wf-actions .text-button{font-size:14px}.wf-actions button>span{font-size:12px;color:var(--secondary);margin-left:7px}.wf-actions #wf-prefix{font:800 18px Nunito,sans-serif;letter-spacing:3px;color:var(--orange)}.wf-rules{border-top:1px solid var(--line);padding:19px 0 4px;font-size:14px;line-height:1.8;color:var(--secondary)}.wf-rules summary{cursor:pointer;font-weight:550;color:var(--ink);min-height:35px}.wf-rules>div{max-width:800px;padding:3px 0 7px}.wf-rules p{margin:10px 0}.wf-wrong{animation:wf-no .25s ease-in-out}@keyframes wf-no{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
#playground[data-game-mode=wordfall]>.game-keyboard-stage{display:none}.game-fullscreen #playground[data-game-mode=wordfall]{max-width:1140px}.game-fullscreen .wf-heading{margin:0 0 17px}.game-fullscreen .wf-heading h3{font-size:32px}.game-fullscreen .wf-heading h3 br{display:none}.game-fullscreen .wf-heading .eyebrow,.game-fullscreen .wf-heading p:last-child{display:none}.game-fullscreen .wf-arena{height:clamp(250px,calc(100dvh - 410px),580px)}.game-fullscreen .wf-answer{margin-top:18px}.games-page .game-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:auto;gap:2px}.games-page .game-tabs button{padding:12px 16px;gap:8px;font-size:15px;white-space:nowrap}.games-page .playground-heading{flex-wrap:wrap;gap:18px}
.game-trial-content{position:relative}.game-panel{position:relative}.game-trial-status{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0 20px;color:var(--secondary);font:500 14px/1.7 Inter,sans-serif}.game-trial-status>span{display:flex;align-items:center;gap:9px}.game-trial-status i{width:6px;height:6px;background:var(--orange);border-radius:50%}.game-trial-status .text-button{font-size:14px}.game-trial-gate{position:relative;z-index:8;display:flex;flex-direction:column;align-items:center;text-align:center;margin:3px 0 0;padding:38px 25px 37px;border:1px solid var(--line);border-radius:23px;background:radial-gradient(ellipse at 50% 0%,#ffb96912,transparent 65%),var(--soft)}.trial-gated>.game-trial-content{display:none}.game-trial-gate[hidden]{display:none}.game-trial-gate .eyebrow{font-size:11px;letter-spacing:1.8px;margin:25px 0 13px;color:var(--secondary)}.game-trial-gate h3{font:850 clamp(30px,4vw,42px)/1.08 Nunito,Inter,sans-serif;letter-spacing:-1.5px;margin:0 0 15px}.game-trial-gate>p:not(.eyebrow){font-size:16px;line-height:1.8;color:var(--secondary);max-width:520px;margin:0 0 23px}.trial-gate-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}.trial-gate-actions .button{font-size:14px;min-height:48px}.game-trial-gate>small{font-size:12px;line-height:1.9;color:var(--muted);margin-top:23px}.trial-key-art{position:relative;width:64px;height:67px;background:linear-gradient(145deg,#ffc271,#d8640e);border-radius:15px;box-shadow:inset 1px 1px 2px #fffb,inset -1px -1px 2px #a43d0877,0 6px 0 #a94b09,0 15px 24px #b5642030}.trial-key-art>span{position:absolute;inset:5px 6px 12px;border-radius:11px;display:grid;place-content:center;font:850 36px Nunito,Inter,sans-serif;color:#fff7e7;letter-spacing:-3px;background:radial-gradient(ellipse at 45% 60%,#f9a331,#ffc064);box-shadow:inset 0 1px 2px #fffa,0 0 1px #a96929;transform:none}.trial-key-art i{display:none}.brand-key.brand-key-image{width:37px;height:42px;object-fit:contain;display:block;background:none;box-shadow:none;transform:none;border-radius:0}.footer-wordmark .brand-key-image{display:inline-block;vertical-align:middle;margin-right:9px}.activation-brand-key{width:68px;height:76px;object-fit:contain}
@media(max-width:1000px){.games-page .playground-heading{align-items:stretch}.games-page .game-tabs{width:100%;order:2}.games-page .game-tabs button{font-size:14px;padding:11px 10px}.wf-tools{max-width:245px}}
@media(max-width:600px){.wf-heading{display:block;margin-bottom:22px}.wf-heading h3{font-size:34px}.wf-heading h3 br{display:none}.wf-heading .eyebrow{font-size:11px;line-height:1.7;letter-spacing:1px}.wf-tools{max-width:none;justify-content:space-between;align-items:center;margin-top:20px;gap:12px}.wf-tools label{flex:1;font-size:13px;gap:6px}.wf-tools select{font-size:13px;padding:11px 9px;min-width:0;width:100%}.wf-tools .plain-button{font-size:13px;padding:8px 5px}.wf-scoreboard{gap:10px;padding:20px 0 17px}.wf-scoreboard span{font-size:10px;letter-spacing:.7px}.wf-scoreboard strong{font-size:25px}.wf-scoreboard>div:nth-child(3){display:none}.wf-scoreboard{grid-template-columns:repeat(4,1fr)}.wf-arena{height:325px;border-radius:18px}.wf-scene-label{left:15px;right:15px;top:17px;font-size:9px;letter-spacing:1px}.wf-cap-face b{font-size:25px}.wf-intro-card{padding:24px 15px}.wf-intro-card h4{font-size:28px}.wf-intro-card p{font-size:14px}.wf-answer{margin-top:23px}.wf-answer>div{gap:8px}.wf-answer input{font-size:21px;padding:14px 12px;letter-spacing:2px;min-height:56px}.wf-answer input::placeholder{font-size:15px}.wf-answer .button{min-width:100px;padding:13px 11px;font-size:13px;gap:4px}.wf-answer .button span{display:none}.wf-answer>p{font-size:13px;min-height:48px}.wf-actions{gap:13px;padding-top:10px}.wf-actions .button{padding:11px 12px;font-size:13px}.wf-actions .text-button{font-size:13px}.wf-actions button>span{font-size:11px;margin-left:4px}.wf-rules{font-size:14px}.wf-result>strong{font-size:55px}.wf-round-history{gap:5px}.wf-round-history>span{font-size:11px;padding:4px 7px}.games-page .game-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;border-radius:18px;padding:5px}.games-page .game-tabs button{font-size:14px;padding:12px 7px;min-height:43px}.games-page .game-tabs svg{display:inline;width:16px;height:16px}.game-trial-status{font-size:12px;gap:10px;align-items:flex-start;line-height:1.7}.game-trial-status .text-button{font-size:12px;max-width:120px;text-align:right;line-height:1.7}.game-trial-gate{padding:33px 17px}.game-trial-gate>p:not(.eyebrow){font-size:15px}.trial-gate-actions{flex-direction:column;width:100%;max-width:330px}.trial-gate-actions .button{width:100%;font-size:13px}.game-trial-gate>small{font-size:11px}.brand-key.brand-key-image{width:32px;height:37px}.game-fullscreen .wf-arena{height:300px}.game-fullscreen .wf-heading h3{font-size:28px}}
@media(prefers-reduced-motion:reduce){.wf-wrong{animation:none}.wf-points,.wf-time-track>i,.wf-sockets{transition:none}}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.launch-bar>div{min-width:0;flex-wrap:wrap;row-gap:12px}.launch-bar .button{white-space:nowrap}@media(max-width:760px){.launch-bar>div{justify-content:center;column-gap:16px}}

/* The meaning clue stays readable in both appearance modes and fullscreen. */
.wf-clue{margin:22px 0 8px;padding:20px 24px;border:1px solid var(--line);border-radius:20px;background:var(--surface);text-align:left}.wf-clue>span{display:flex;align-items:center;gap:10px;font:700 12px Inter,sans-serif;letter-spacing:.1em;color:var(--secondary)}.wf-clue small{font:700 10px Inter,sans-serif;letter-spacing:.06em;padding:4px 7px;border-radius:6px;background:var(--ink);color:var(--surface)}.wf-clue p{font:600 clamp(16px,1.8vw,19px)/1.6 Nunito,sans-serif;color:var(--ink);margin:10px 0 0;overflow-wrap:anywhere}.wf-clue-credit{font-size:14px!important;line-height:1.6}.wf-clue-credit a{color:inherit;text-underline-offset:3px}@media(max-width:600px){.wf-clue{padding:17px 18px;border-radius:16px}}

.trial-level-picker{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:12px;color:var(--secondary);font:500 14px Inter,sans-serif;margin:0 0 24px}.trial-level-picker select{font:500 14px Inter,sans-serif;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink)}.wf-cap-face b{font-size:clamp(15px,calc(var(--wf-cap-size,70px)*.5),35px)}

.launch-bar>div{justify-content:flex-end}.price-card>.purchase-delivery-note,.price-card>.purchase-offer-note{min-height:0;margin:16px 0 0;font-size:14px;line-height:1.75}.direct-price>.button{ text-decoration:none;white-space:normal;text-align:center;line-height:1.4}.launch-bar .button{text-decoration:none;max-width:100%;white-space:normal;text-align:center;line-height:1.4}@media(max-width:760px){.launch-bar>div{justify-content:center;width:100%}}@media(max-width:480px){.launch-bar .button{font-size:14px;padding:12px 18px}.launch-bar>div>.button{width:100%;justify-content:center}}

.cashback-promo{display:flex;align-items:center;gap:15px;margin:20px auto 0;padding:16px 20px;border:1px solid color-mix(in srgb,var(--orange) 25%,var(--line));border-radius:21px;background:color-mix(in srgb,var(--orange) 7%,var(--surface));text-decoration:none;color:var(--ink);transition:background .2s,transform .2s}
.cashback-promo:hover{background:color-mix(in srgb,var(--orange) 12%,var(--surface));transform:translateY(-1px)}.cashback-promo:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.cashback-promo-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;flex-shrink:0;background:var(--orange);color:#21170d;font:700 24px Nunito,sans-serif}
.cashback-promo-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.cashback-promo strong{font:750 17px/1.4 Nunito,Inter,sans-serif}.cashback-promo small{font:400 14px/1.55 Inter,sans-serif;color:var(--secondary)}
.cashback-promo-cta{margin-left:auto;flex-shrink:0;font:600 14px Inter,sans-serif;display:flex;align-items:center;gap:12px}.cashback-promo-cta b{font-size:20px;font-weight:500}.game-fullscreen .cashback-promo,.zen-mode .cashback-promo{display:none}
.cashback-formats{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}.cashback-formats span{border:1px solid var(--line);border-radius:20px;padding:8px 13px;background:var(--surface);color:var(--ink);font:500 14px Inter,sans-serif}
.cashback-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.cashback-steps article{padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.cashback-steps article>span{font:700 14px Inter,sans-serif;color:var(--orange)}.cashback-steps h3{font:800 23px/1.2 Nunito,sans-serif;color:var(--ink);margin:13px 0 10px}.info-document .cashback-steps p{font-size:15px;line-height:1.7;margin:0}.info-document a.cashback-claim-button{font:600 15px/1.5 Inter,sans-serif;text-decoration:none;padding:14px 20px;white-space:normal;text-align:center;min-height:48px}
@media(max-width:760px){.cashback-promo{gap:12px;padding:16px}.cashback-promo-cta{font-size:14px;gap:6px}.cashback-steps{grid-template-columns:1fr}.cashback-steps article{padding:20px}.cashback-promo strong{font-size:16px}}
@media(max-width:540px){.cashback-promo{flex-wrap:wrap;gap:10px 12px;border-radius:18px}.cashback-promo-copy{flex:1;min-width:0}.cashback-promo-cta{margin-left:52px}.cashback-promo-mark{width:40px;height:40px}.cashback-promo small{font-size:14px}}
@media(prefers-reduced-motion:reduce){.cashback-promo{transition:none}.cashback-promo:hover{transform:none}}

.seo-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:24px}.seo-header nav,.seo-links{display:flex;flex-wrap:wrap;gap:20px}.seo-header a,.seo-links a{color:var(--ink);text-decoration:none}.seo-links{padding-block:32px}.seo-game-list{padding-bottom:64px}.seo-game-list article{margin:32px 0}.seo-game-list p{font-size:17px;line-height:1.8;color:var(--secondary)}@media(max-width:600px){.seo-header{align-items:flex-start;flex-direction:column}.seo-header nav{gap:16px}}