@font-face{font-family:Typewriter;src:url(typewriter.otf)}
:root{color-scheme:dark;--bg:#191a18;--ink:#a6a79e;--key:#444541;--key-active:#777970;--keyboard:#252623;--cream:#e7dfca}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overscroll-behavior:none}body{background:var(--bg);color:var(--ink);font-family:Typewriter,'Courier New',monospace;overflow:hidden}button,input,textarea{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer;font:inherit;border:0;background:none}button:focus-visible,input:focus-visible{outline:2px solid #cbbc8f;outline-offset:4px}button:disabled{opacity:.35}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.machine{position:relative;width:min(100%,680px);height:100dvh;max-height:1100px;min-height:540px;margin:0 auto;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);isolation:isolate}.topbar{height:94px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:16px}.icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0}.icon:hover{background:#ffffff08}.top-right{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:1px}.wordmark{font:10px Typewriter;letter-spacing:1px;opacity:.35;position:absolute;left:50%;transform:translateX(-50%);pointer-events:none}.stage{position:relative;flex:1;min-height:230px;overflow:hidden}canvas{width:100%;height:100%;display:block}textarea{position:absolute;z-index:3;inset:0;width:100%;height:100%;resize:none;color:transparent;caret-color:transparent;background:transparent;border:0;opacity:.01;font:20px Typewriter;cursor:text;outline:none}.first-line{position:absolute;z-index:5;top:33%;left:50%;transform:translateX(-50%);font-size:13px;white-space:nowrap;opacity:.65}.first-line:hover{opacity:1}.hint{position:absolute;bottom:19px;left:0;right:0;text-align:center;font:12px system-ui,sans-serif;letter-spacing:2px;color:#9d9e93;pointer-events:none;transition:opacity .8s}.hint.hidden{opacity:0}.controls{height:73px;flex:none;display:flex;align-items:center;gap:24px;padding:9px 30px 15px;background:#30312e;transition:background .6s}.controls label{display:flex;flex-direction:column;min-width:0;flex:1;gap:9px}.controls label>span{display:flex;justify-content:space-between;gap:3px;font-size:11px;letter-spacing:.5px;color:#979a8e}.controls output{white-space:nowrap}.controls input{appearance:none;-webkit-appearance:none;width:100%;height:13px;margin:0;cursor:pointer;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),#8b8d8166 calc(12.5% - 1px),#8b8d8166 12.5%),linear-gradient(#898b8055,#898b8055) center/100% 1px no-repeat;border-radius:0}.controls input::-webkit-slider-thumb{appearance:none;width:8px;height:17px;border:2px solid #d6d7c7;border-radius:1px;background:#81867c;box-shadow:0 0 5px #ffffff20}.controls input::-moz-range-thumb{width:5px;height:13px;border:2px solid #d6d7c7;border-radius:1px;background:#81867c}.sun{font:38px Georgia;padding-bottom:3px;color:#c0c0ad;width:36px}.keyboard{position:relative;flex:none;padding:0 8px max(15px,env(safe-area-inset-bottom));border-radius:28px 28px 0 0;background:var(--keyboard);box-shadow:0 -1px 0 #ffffff04;z-index:6}.keyboard-top{height:51px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;gap:8px;font-size:10px;letter-spacing:1px;color:#8c8d85}.keyboard-top button{display:flex;align-items:center;gap:7px;min-height:40px;font-size:12px;letter-spacing:0}.keyboard-top svg{width:17px;height:17px}.keyboard-top #modeLabel{opacity:.45;white-space:nowrap}.key-row{display:flex;justify-content:center;gap:7px;margin-bottom:10px}.key-row:nth-child(2){padding:0 4.8%}.key{position:relative;height:51px;flex:1;min-width:0;padding:0;border-radius:7px;background:var(--key);color:#efefe6;font:26px system-ui,sans-serif;box-shadow:0 2px 0 #14151155,inset 0 1px 0 #ffffff09;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:background .06s,transform .06s}.key:hover{background:#50524b}.key.pressed,.key:active{background:var(--key-active);transform:translateY(2px);box-shadow:inset 0 1px 4px #0003}.key.wide{flex:1.45;font-size:20px}.key.small{font-size:16px}.key.space{flex:5.8;font:10px Typewriter;letter-spacing:3px;color:#777a70}.key.shift.active{background:#95978b;color:#1d201b}.key svg{width:24px;height:24px;vertical-align:middle;stroke-width:1.5}.key-pop{position:absolute;bottom:0;left:-8px;right:-8px;height:92px;background:#63665b;border-radius:10px;display:flex;justify-content:center;align-items:flex-start;padding-top:8px;font-size:34px;pointer-events:none;box-shadow:0 0 2px #1115;z-index:15}.key-pop::after{content:'';position:absolute;bottom:0;height:50px;left:8px;right:8px;background:var(--key-active);border-radius:6px}footer{height:32px;display:flex;gap:8px;align-items:end;padding:0 12px;color:#74786b;font:11px system-ui,sans-serif}footer .tiny-dot{width:4px;height:4px;border-radius:50%;background:#9eaa75;margin-bottom:5px}footer #status{flex:1}.keyboard-note{font:11px Typewriter}body.day .controls{background:#e8e4d6}body.day .controls label>span{color:#6f7564}body.day .sun{color:#4b5241}body.day .hint{color:#686d5b}body.day .first-line{color:#676759}dialog{max-width:340px;width:90%;background:#282c25;border:1px solid #727b5a;border-radius:16px;padding:25px;color:#e3e5d8;font-family:system-ui;box-shadow:0 25px 90px #0008}dialog::backdrop{background:#1119;backdrop-filter:blur(5px)}dialog p{margin:0 0 12px;font-size:21px}dialog>span{font-size:14px;color:#b2b7a5}dialog>div{display:flex;justify-content:end;margin-top:25px;gap:14px}dialog button{padding:10px 16px;border-radius:7px;background:#424b37;font-size:14px}dialog button:first-child{background:#32362d}
@media(min-width:800px){body{background:radial-gradient(ellipse at center,#292b24 0,#171916 70%)}.machine{max-height:1000px;padding-top:6px}.topbar{height:84px}.keyboard{border-radius:25px;padding-left:15px;padding-right:15px;padding-bottom:20px}.key{height:53px}.keyboard-top{height:48px}.stage{min-height:320px}.controls{height:78px}.wordmark{opacity:.6}.machine::after{content:'';position:absolute;z-index:-1;inset:100px 0 0;box-shadow:0 0 140px #0006;border-radius:40px}}
@media(max-width:480px){.topbar{height:80px;padding:0 20px}.wordmark{display:none}.key-row{gap:6px;margin-bottom:10px}.key{font-size:23px;height:46px}.keyboard-top{height:46px;padding:0 7px}.keyboard-top #modeLabel{font-size:9px;letter-spacing:0}.keyboard-top button{font-size:11px}.controls{height:66px;padding:7px 22px 13px;gap:20px}.controls label>span{font-size:10px}.sun{width:30px;font-size:34px}.keyboard-note{display:none}.hint{bottom:15px;font-size:11px;letter-spacing:1px}.first-line{font-size:12px}.keyboard{padding-bottom:max(15px,env(safe-area-inset-bottom))}}
@media(max-height:740px){.topbar{height:55px}.keyboard-top{height:38px}.key{height:39px;font-size:21px}.key-row{margin-bottom:7px}.keyboard{padding-bottom:8px}.controls{height:58px}.hint{bottom:7px}footer{height:24px}.stage{min-height:190px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}