:root{--paper:#fffaf0;--ink:#344e43;--muted:#708277;--green:#4e7c59;--line:#e6e6d9;--yellow:#f5d675;--coral:#e98767;--round:"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;--progress:0}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--round);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #325d7f;outline-offset:5px}button:disabled{cursor:default}button svg{width:22px;height:22px;fill:currentColor;flex-shrink:0}[hidden]{display:none!important}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.app-shell{width:min(1120px,calc(100% - 80px));margin:auto}.site-header{height:108px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-size:23px;letter-spacing:.035em;font-weight:800;white-space:nowrap}.brand-icon{width:45px;height:43px;border-radius:14px;background:#f4d98a;display:grid;place-items:center;transform:rotate(-6deg);color:#5d6145}.brand-icon svg{width:29px;height:26px}.brand-highlight{color:#54805a}.header-actions{display:flex;gap:12px;align-items:center}.header-caption{font-size:11px;letter-spacing:.08em;color:var(--muted);margin-right:12px}.icon-button{background:transparent;border:1px solid #dcded0;border-radius:50px;height:38px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;font-size:11px;font-weight:700}.icon-button:hover{background:#f0efdf}.sound-button svg{width:17px;height:17px}.help-button{width:38px;padding:0;font-size:17px}.game-topline{height:47px;display:flex;align-items:center;justify-content:space-between;position:relative;gap:12px}.course-label{font-size:12px;letter-spacing:.09em;font-weight:700}.tiny-flower{display:inline-block;color:#de9670;font-size:22px;vertical-align:-2px;margin-right:8px}.top-note{color:var(--muted);font-size:11px;letter-spacing:.04em}.play-card{background:#fffef9;border:1px solid #e1e3d5;border-radius:24px;overflow:hidden;box-shadow:0 7px 0 #e9eadb66;position:relative}.landscape{height:250px;position:relative;background:#e8f2ed;isolation:isolate;overflow:hidden}.scenery{position:absolute;height:100%;width:100%;inset:0}.scene-sticker{position:absolute;top:25px;left:29px;background:#fffdf4bc;border:1px solid #fffdf4;padding:9px 14px;border-radius:30px;color:#64816b;font-size:10px;letter-spacing:.07em}.scene-sticker span{color:#c6a052;margin-right:4px}.start-marker{position:absolute;left:7%;bottom:52px;letter-spacing:.1em;font-size:9px;font-weight:800;color:#6b855e}.finish-marker{position:absolute;left:89%;bottom:32px;display:flex;align-items:center;flex-direction:column;transform:translateX(-50%)}.finish-marker svg{width:35px;height:53px}.finish-marker span{font-size:9px;letter-spacing:.1em;font-weight:800;color:#52624d;margin-top:4px}.car{position:absolute;left:calc(8% + var(--progress)*81%);bottom:26px;transform:translateX(-50%);width:112px;height:72px;z-index:3;transition:left .32s cubic-bezier(.2,.75,.3,1)}.car>svg{width:100%;height:100%;overflow:visible}.car-puff{position:absolute;width:11px;height:11px;border-radius:50%;background:#fff9e5;left:0;bottom:17px;opacity:0}.car.moving>svg{animation:car-hop .32s ease}.car.moving .car-puff{animation:puff .5s ease-out}.landscape.resetting .car{transition:none}.word-celebration{position:absolute;left:50%;top:28px;transform:translateX(-50%);text-align:center;background:#fffdf4f5;border:2px solid #f1d273;border-radius:20px;padding:13px 28px;box-shadow:0 4px 0 #8b995411;min-width:240px;z-index:4}.word-celebration strong{font-size:25px;display:block}.word-celebration span{font-size:12px;display:block;margin-top:3px;color:#65784f}.word-celebration b{font-size:18px;color:#b06b37}.start-screen{text-align:center;padding:34px 28px 25px;position:relative}.eyebrow{font-size:11px;font-weight:700;color:#88916d;letter-spacing:.14em}.start-screen h1{font-size:43px;line-height:1.4;margin:8px 0 13px;font-weight:900;letter-spacing:.06em}.start-screen h1 span{position:relative;z-index:1}.start-screen h1 span:after{content:"";position:absolute;height:11px;background:#f4d986;bottom:2px;left:0;right:0;border-radius:8px;z-index:-1}.intro-copy{font-size:14px;line-height:1.95;letter-spacing:.07em;margin:0 0 23px;color:#738170}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:36px;min-width:230px;min-height:58px;background:var(--green);color:#fffef3;border:1px solid #47734e;border-radius:17px;box-shadow:0 4px 0 #365b40;font-size:19px;letter-spacing:.1em;font-weight:700;padding:12px 25px;transition:transform .15s,box-shadow .15s,background .15s}.primary-button:hover{background:#416e4b;transform:translateY(-1px);box-shadow:0 5px 0 #365b40}.primary-button:active{transform:translateY(3px);box-shadow:0 1px 0 #365b40}.start-hints{display:flex;justify-content:center;gap:25px;font-size:10px;color:#8b9384;letter-spacing:.02em;margin:21px 0 0}.start-hints span{display:flex;align-items:center;gap:5px}.start-hints svg{width:15px;height:15px;fill:#bfaf78}.start-example{position:absolute;right:33px;bottom:42px;transform:rotate(6deg);width:145px;display:flex;gap:4px;justify-content:center;flex-wrap:wrap}.sample-key{font:700 16px/31px ui-monospace,monospace;width:31px;height:34px;background:#f8f6eb;color:#9aab91;border:1px solid #dce1d1;border-bottom:3px solid #dce1d1;border-radius:7px}.sample-key:first-child{background:#fbefc2;color:#85895a;border-color:#e7dba6}.example-caption{width:100%;font-size:9px;letter-spacing:.1em;color:#99a18d;margin-top:5px}.page-footer{display:flex;justify-content:space-between;font-size:10px;color:#8c9686;letter-spacing:.08em;margin:22px 2px 27px;gap:20px}.footer-dot{width:6px;height:6px;background:#93ae7d;display:inline-block;border-radius:50%;margin-right:7px;vertical-align:1px}.session-progress{display:flex;gap:9px;position:absolute;left:50%;transform:translateX(-50%);align-items:center}.progress-dot{width:24px;height:24px;background:#ebeadd;border:1px solid transparent;display:grid;place-items:center;border-radius:50%;color:#a3aa94;font-size:10px}.progress-dot.current{border:2px solid #7b9770;background:#fffaf0;color:#5b7952;font-weight:700}.progress-dot.done{background:#f4d981;color:#686b3f;font-size:14px}.progress-caption{font-size:10px;color:var(--muted);margin-left:5px}.pause-button{border:0;background:transparent;font-size:11px;color:#73816e;display:flex;align-items:center;gap:7px;padding:9px 0 9px 12px}.pause-button span{font:700 16px/1 system-ui}.word-area{display:grid;grid-template-columns:150px 1fr 100px;align-items:center;gap:25px;padding:19px 46px 20px;min-height:202px}.word-picture{text-align:center}.word-picture svg{width:118px;height:103px;display:block;margin:auto}.word-picture h1{font-size:19px;letter-spacing:.16em;margin:1px 0 0;font-weight:700}.typing-area{text-align:center}.typing-instruction{font-size:12px;letter-spacing:.07em;margin:0 0 15px;color:#7b8975}.letter-tiles{display:flex;justify-content:center;gap:12px}.letter-tile{position:relative;display:grid;place-items:center;background:#f5f5eb;border:2px solid #e4e7d8;border-bottom-width:5px;border-radius:13px;color:#899681;width:65px;height:73px;font:700 36px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;transition:background .2s,transform .2s}.letter-tile.next{background:#ffefb4;border-color:#d1b255;color:#42543a;transform:translateY(-3px);box-shadow:0 0 0 4px #fdf4d4}.letter-tile.done{background:#e9f1e3;border-color:#c8d9bd;color:#5b7b52}.letter-tile.done:after{content:"✓";position:absolute;right:-4px;top:-8px;border-radius:50%;background:#6b9164;border:2px solid #fffdf6;color:#fff;width:21px;height:21px;font:700 12px/18px system-ui}.letter-tile.nudge{animation:key-nudge .55s ease}.gentle-feedback{margin:13px 0 0;color:#8b947c;font-size:10px;letter-spacing:.07em;min-height:16px}.score-card{border-left:1px solid #e9e9dc;display:flex;align-items:center;flex-direction:column;padding-left:21px}.score-card svg{width:23px;height:23px;fill:#dec36a;margin-bottom:4px}.score-card>span:first-of-type{font:700 30px/1.3 ui-rounded,system-ui,sans-serif;color:#657a52}.score-unit{font-size:10px;color:#8d967f;letter-spacing:.1em}.keyboard-section{padding:17px 30px 18px;background:#f8f8ef;border-top:1px solid #eaeadd}.keyboard-heading{max-width:620px;margin:0 auto 13px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#939b86;letter-spacing:.06em}.small-label:before{content:"";display:inline-block;width:5px;height:5px;background:#a7b49b;border-radius:50%;margin-right:7px;vertical-align:1px}#next-hint{color:#71835f}#next-hint b{font:700 13px/1 ui-monospace,monospace;background:#f3e6b3;padding:3px 7px;border-radius:4px;margin-left:4px;min-width:20px;display:inline-block;text-align:center}.keyboard{display:flex;flex-direction:column;gap:7px;align-items:center}.keyboard-row{display:flex;gap:7px}.keyboard-key{width:48px;height:42px;border:1px solid #dfe3d2;border-bottom:3px solid #d5dcc8;border-radius:8px;background:#fffef7;display:grid;place-items:center;font:600 16px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#9aa58d;position:relative}.keyboard-key.is-next{background:#f6da7e;color:#4f5b3c;border:2px solid #c2a34e;border-bottom-width:4px;transform:translateY(-2px);box-shadow:0 0 0 3px #f5ecca}.keyboard-key.is-next:after{content:"▼";position:absolute;top:-13px;font-size:9px;color:#aa914b}.keyboard-key.is-next.nudge{animation:key-nudge .55s ease}.keyboard-note{font-size:9px;color:#97a18b;text-align:center;margin:13px 0 0;letter-spacing:.05em}.result-screen{text-align:center;padding:26px 24px 25px}.result-stars{font-size:24px;letter-spacing:7px;color:#dcba54}.result-screen h1{font-size:35px;margin:8px 0;letter-spacing:.12em;outline:none}.result-copy{font-size:12px;color:#839074;margin:8px 0}.result-score{font-size:13px;color:#7e8f6b}.result-score>span:first-child{font:800 58px/1.15 ui-rounded,system-ui,sans-serif;letter-spacing:-.04em;margin-right:7px;color:#4e7652}.completed-words{display:flex;justify-content:center;gap:17px;margin:14px 0 23px}.completed-word{background:#f7f6e9;border-radius:12px;padding:6px 8px 7px;min-width:66px;font-size:10px;color:#778365}.completed-word svg{display:block;width:48px;height:42px;margin:auto}.completed-word span{display:block}.text-button{display:block;margin:15px auto 0;background:none;border:0;font-size:10px;color:#8c967e;padding:6px 12px;text-decoration:underline;text-underline-offset:4px}.pause-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#f8faeaa8;backdrop-filter:blur(7px);z-index:10}.pause-panel{text-align:center;background:#fffdf4;border:1px solid #e4e7d2;border-radius:25px;box-shadow:0 12px 50px #5c6f5222;padding:35px 45px}.pause-flower{font-size:44px;color:#e6bc65}.pause-panel h2{font-size:27px;margin:8px 0}.pause-panel p{font-size:12px;color:#8a957d;margin:13px 0 24px}.mobile-note{display:none;text-align:center;font-size:11px;color:#879277}.confetti{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}.confetti i{position:absolute;top:-15px;width:9px;height:15px;border-radius:2px;animation:confetti-fall 2s ease-in forwards;background:var(--confetti-color);left:var(--x);animation-delay:var(--delay);transform:rotate(var(--rotation))}dialog{border:1px solid #e2e4d3;border-radius:24px;background:#fffdf4;color:var(--ink);padding:36px;width:min(500px,calc(100% - 32px));box-shadow:0 20px 80px #273c4422;line-height:1.9}dialog::backdrop{background:#39483c50;backdrop-filter:blur(3px)}dialog h2{font-size:25px;margin:6px 0 14px}dialog ol{font-size:13px;padding-left:23px}dialog li{margin:9px 0}dialog p{font-size:12px;color:#75816b}dialog details{font-size:12px;padding:10px 0;border-block:1px solid #e9e9da}dialog summary{cursor:pointer}dialog .help-small{font-size:10px;margin-bottom:0}.dialog-close{position:absolute;right:16px;top:14px;border:0;background:#f1f2e5;border-radius:50%;width:32px;height:32px;font-size:24px;line-height:1}.noscript{text-align:center;background:#ffe9bb;padding:24px}
@keyframes car-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-5px) rotate(-2deg)}}@keyframes puff{0%{opacity:.8;transform:translateX(-3px) scale(.6)}100%{opacity:0;transform:translateX(-30px) scale(2.3)}}@keyframes key-nudge{0%,100%{box-shadow:0 0 0 3px #f5ecca}50%{box-shadow:0 0 0 8px #efd17366;transform:translateY(-4px)}}@keyframes confetti-fall{to{transform:translateY(500px) rotate(360deg);opacity:0}}
@media(min-width:1000px) and (max-height:850px){.site-header{height:85px}.landscape{height:214px}.word-area{min-height:180px;padding-top:12px;padding-bottom:13px}.keyboard-section{padding-top:13px;padding-bottom:13px}.keyboard-key{height:37px}.keyboard-heading{margin-bottom:10px}.keyboard-note{margin-top:10px}.start-screen{padding-top:25px;padding-bottom:23px}.start-screen h1{font-size:40px}.page-footer{margin-top:18px}.car{bottom:20px}.start-marker{bottom:43px}.finish-marker{bottom:22px}}
@media(min-width:1400px){.app-shell{width:1120px}.site-header{height:120px}.game-topline{height:52px}.start-screen{padding-top:38px;padding-bottom:35px}.landscape{height:265px}}
@media(max-width:900px){.app-shell{width:calc(100% - 36px)}.site-header{height:85px}.header-caption{display:none}.brand{font-size:20px}.start-example{display:none}.word-area{padding:20px 22px;grid-template-columns:115px 1fr 75px;gap:12px}.letter-tile{width:58px;height:67px;font-size:32px}.letter-tiles{gap:9px}.score-card{padding-left:14px}.landscape{height:215px}.car{bottom:20px;width:96px}.finish-marker{bottom:23px}.start-marker{bottom:45px}.scene-sticker{font-size:9px}.page-footer{letter-spacing:0}.word-picture svg{width:105px;height:92px}}
@media(max-width:620px){.app-shell{width:calc(100% - 24px)}.site-header{height:76px}.brand{font-size:16px;gap:8px;letter-spacing:0}.brand-icon{width:34px;height:34px;border-radius:10px}.brand-icon svg{width:24px;height:24px}.header-actions{gap:7px}.sound-button{padding:0 9px}.sound-button span{display:none}.icon-button{height:33px}.help-button{width:33px}.top-note{display:none}.course-label{font-size:10px}.game-topline{height:42px}.play-card{border-radius:18px}.landscape{height:175px}.scene-sticker{left:15px;top:16px;font-size:8px;padding:7px 11px}.car{width:81px;height:56px;bottom:15px}.finish-marker{bottom:14px;left:88%}.finish-marker svg{width:29px;height:44px}.start-marker{bottom:36px;font-size:7px}.start-screen{padding:28px 15px 26px}.start-screen h1{font-size:31px;margin-top:12px}.intro-copy{font-size:12px}.eyebrow{font-size:9px}.start-hints{gap:15px;font-size:9px}.primary-button{font-size:17px;min-height:54px;min-width:210px}.word-area{grid-template-columns:85px 1fr;gap:10px;padding:21px 13px 18px}.score-card{display:none}.word-picture svg{width:80px;height:70px}.word-picture h1{font-size:16px}.typing-instruction{font-size:9px;margin-bottom:13px;letter-spacing:0}.letter-tile{width:40px;height:52px;font-size:26px;border-radius:9px}.letter-tiles{gap:7px}.gentle-feedback{font-size:9px;margin-top:12px}.keyboard-section{padding:16px 8px}.keyboard{gap:6px}.keyboard-row{gap:4px}.keyboard-key{width:calc((100vw - 96px)/10);max-width:42px;height:35px;font-size:12px;border-radius:6px}.keyboard-note{font-size:8px}.keyboard-heading{font-size:8px;max-width:350px}.session-progress{gap:5px;position:static;transform:none;margin-left:auto}.progress-dot{width:19px;height:19px;font-size:8px}.progress-caption{display:none}.pause-button{font-size:0;padding-left:5px}.pause-button span{font-size:17px}.page-footer{font-size:8px;gap:10px}.page-footer>span:last-child{display:none}.mobile-note{display:block;line-height:1.7;margin-bottom:25px}.word-celebration{top:17px;padding:10px 20px;min-width:200px}.word-celebration strong{font-size:21px}.word-celebration span{font-size:10px}.result-screen h1{font-size:30px}.completed-words{gap:7px}.completed-word{min-width:51px;padding:5px}.result-copy{font-size:10px}.pause-panel{padding:25px 20px;max-width:90%}.pause-panel p{font-size:11px}dialog{padding:30px 24px}.result-score>span:first-child{font-size:50px}}
/* Include the 0-adjacent minus key and align letter rows like a physical QWERTY keyboard. */
.game-screen:focus{outline:none}
.keyboard{--key-width:48px;--key-gap:7px}
.keyboard-row{width:calc(var(--key-width)*10 + var(--key-gap)*9);gap:var(--key-gap)}
.keyboard-row[data-row="numbers"]{width:calc(var(--key-width)*11 + var(--key-gap)*10)}
.keyboard-row[data-row="home"]{padding-left:calc((var(--key-width) + var(--key-gap))*.25)}
.keyboard-row[data-row="bottom"]{padding-left:calc((var(--key-width) + var(--key-gap))*.75)}
.keyboard-key{width:var(--key-width);flex:0 0 var(--key-width)}
@media(max-width:620px){.keyboard{--key-width:min(42px,calc((100vw - 88px)/11));--key-gap:4px}.car{left:calc(12% + var(--progress)*76%)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.confetti{display:none}}