:root{color:#44392f;--paper:#faf8f2;--grid:#ded8cb;--ink:#44392f;--yellow:#e7b937;--sage:#8f9f78;--red:#b96f4f;--shadow:0 22px 70px #44392f1f;--site-header-height:84px;--play-block-gap:12px;--command-strip-height:72px;background:#f2efe7;font-family:PingFang SC,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box}html{background:#f2efe7;min-width:320px}body{min-height:100vh;margin:0}button,textarea{font:inherit}button{color:inherit}[hidden]{display:none!important}#site-shell{background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);background-size:38px 38px;min-height:100vh}.site-header{width:min(1440px,100% - 48px);min-height:var(--site-header-height);border-bottom:2px solid #44392f2e;justify-content:space-between;align-items:center;margin:0 auto;display:flex}.home-view,.play-view{width:min(1440px,100% - 48px);margin:0 auto;padding:56px 0 80px}.hero{grid-template-columns:minmax(320px,.82fr) minmax(520px,1.18fr);align-items:center;gap:clamp(40px,7vw,108px);min-height:620px;display:grid}.hero h1{letter-spacing:-.045em;text-wrap:balance;max-width:640px;margin:14px 0 24px;font:700 clamp(48px,4.8vw,76px)/.94 Courier New,monospace}.preview-sheet,.game-frame{border:4px solid var(--ink);background:var(--paper);box-shadow:var(--shadow);border-radius:28px 22px 30px 24px;margin:0;overflow:hidden}#home-preview{width:100%;height:auto;display:block}#game-root,#game-root canvas{width:100%;height:100%;display:block}.steps__list{border-top:3px solid var(--ink);grid-template-columns:repeat(3,1fr);padding:0;list-style:none;display:grid}.steps__list li{border-right:1px solid var(--grid);min-height:190px;padding:28px}.steps__list li:last-child{border-right:0}#site-shell[data-mode=play]{height:100vh;height:100dvh;overflow:hidden}.play-view{height:calc(100vh - var(--site-header-height));height:calc(100dvh - var(--site-header-height));padding-block:var(--play-block-gap)}.game-stage{width:min(100%, 1280px, calc((100dvh - var(--site-header-height) - var(--command-strip-height) - var(--play-block-gap) - var(--play-block-gap)) * 16 / 9));margin-inline:auto;position:relative}.game-frame{aspect-ratio:16/9;width:100%;margin:0}.command-strip{height:var(--command-strip-height);border:4px solid var(--ink);background:#faf8f2f5;border-top:0;border-radius:0 0 24px 20px;place-items:center;padding:8px 14px;display:grid}.command-strip__hint{color:#44392fad;text-align:center;margin:0;font:15px Courier New,monospace}.result-actions{justify-content:center;gap:14px;width:100%}.result-actions__buttons{justify-content:center;gap:10px}.result-actions button{margin:0}.share-status{min-width:0;color:var(--sage);margin:0}.share-fallback{z-index:12;right:clamp(12px,8%,80px);bottom:calc(var(--command-strip-height) + 12px);border:3px solid var(--ink);background:var(--paper);max-height:min(220px,38dvh);box-shadow:var(--shadow);margin:0;padding:14px;position:absolute;left:clamp(12px,8%,80px);overflow:auto}.primary-button,.secondary-button,.text-button{border:2px solid var(--ink);cursor:pointer;min-height:44px}button:disabled{cursor:not-allowed;opacity:.48;box-shadow:none}.primary-button{background:var(--yellow);box-shadow:4px 4px 0 var(--ink);padding:12px 24px}.secondary-button{background:var(--paper);padding:10px 20px}.text-button{background:0 0;border-color:#0000;padding:8px 12px}button:focus-visible,textarea:focus-visible{outline:4px solid var(--yellow);outline-offset:4px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:20;color:var(--paper);background:var(--ink);padding:10px 14px;position:fixed;top:12px;left:12px;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.brand{color:inherit;align-items:center;gap:10px;text-decoration:none;display:inline-flex}.brand img{object-fit:contain}.brand span{font:700 22px Courier New,monospace}.site-header__identity,.site-header__actions,.result-actions,.result-actions__buttons{align-items:center;display:flex}.site-header__identity{gap:10px}.site-header__actions{gap:14px}.site-header__back{white-space:nowrap}.play-language{padding:8px 12px;font:18px Courier New,monospace}.record-chip{border-bottom:2px solid var(--yellow);padding:8px 12px}.eyebrow{color:var(--sage);letter-spacing:.12em;text-transform:uppercase;margin:0;font:700 15px/1.4 Courier New,monospace}.hero__body{max-width:640px;margin:0 0 32px;font-size:20px;line-height:1.75}.hero__record{color:#44392fad;margin-top:22px;font:16px Courier New,monospace}.steps{padding-top:36px}.site-footer{border-top:1px solid var(--grid);justify-content:flex-end;margin-top:36px;padding-top:24px;display:flex}.feedback-link{color:#44392fb8;text-underline-offset:4px;font:14px Courier New,monospace}.feedback-link:focus-visible{outline:4px solid var(--yellow);outline-offset:4px}.steps__list h2{margin:18px 0 10px;font:700 27px Courier New,monospace}.steps__list p{margin:0;line-height:1.7}.steps__list span{color:var(--yellow);font:700 18px Courier New,monospace}.share-fallback label{margin-bottom:6px;display:block}.share-fallback textarea{resize:vertical;width:100%;color:var(--ink);border:2px solid var(--ink);background:#fffdf7;padding:10px}@keyframes site-reveal{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.hero__copy,.preview-sheet{animation:.36s ease-out both site-reveal}.preview-sheet{transition:transform .18s ease-out,box-shadow .18s ease-out;animation-delay:70ms}.primary-button{transition:transform .12s ease-out,box-shadow .12s ease-out}.primary-button:active{box-shadow:1px 1px 0 var(--ink);transform:translate(3px,3px)}@media (hover:hover){.preview-sheet:hover{transform:translateY(-4px);box-shadow:0 26px 74px #44392f29}}@media (max-width:980px){.hero{grid-template-columns:1fr;min-height:auto;padding:32px 0 64px}.preview-sheet{max-width:780px}}@media (max-width:680px){:root{--site-header-height:74px;--command-strip-height:82px}.site-header,.home-view,.play-view{width:min(100% - 24px,1440px)}.brand img{width:40px;height:40px}.brand span{font-size:18px}.record-chip{font-size:14px}.hero h1{font-size:clamp(40px,12vw,52px)}.result-actions{gap:6px}.result-actions__buttons{gap:5px;width:100%}.result-actions__buttons button{min-height:40px;margin:0;padding:7px 9px;font-size:13px}.share-status{display:none}.steps__list{grid-template-columns:1fr}.steps__list li{border-right:0;border-bottom:1px solid var(--grid)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}