@font-face{font-family:'Pixelify Sans';src:url('/vendor/pixelify-sans.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/vendor/dm-sans.woff2') format('woff2');font-weight:100 1000;font-display:swap}
:root{--page:#151718;--panel:#1d2021;--ink:#f3f1e8;--muted:#9b9f9b;--line:#333636;--red:#ff544c;--green:#a8bd83;--pixel:'Pixelify Sans',monospace;--body:'DM Sans',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--page);font:15px/1.6 var(--body)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
a{color:inherit;text-underline-offset:4px}
button:disabled{cursor:default;opacity:.4}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:5px}
[hidden]{display:none!important}
h1,h2,h3,p,dl{margin:0}
.wrap{width:min(1200px,calc(100% - 96px));margin-inline:auto}
.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:700;color:var(--muted)}
.skip-link{position:absolute;left:20px;top:-80px;background:var(--red);color:var(--page);padding:12px;z-index:100}
.skip-link:focus{top:12px}
.masthead{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{font:600 30px/1 var(--pixel);display:inline-flex;align-items:center;text-decoration:none;letter-spacing:-1px;white-space:nowrap}
.brand>span:not(.brand-mark){color:var(--red)}
.brand-mark{width:23px;height:23px;position:relative;margin-right:12px;background:linear-gradient(var(--red) 0 43%,var(--page) 43% 56%,var(--ink) 56%);clip-path:polygon(25% 0,75% 0,75% 12%,88% 12%,88% 25%,100% 25%,100% 75%,88% 75%,88% 88%,75% 88%,75% 100%,25% 100%,25% 88%,12% 88%,12% 75%,0 75%,0 25%,12% 25%,12% 12%,25% 12%)}
.brand-mark:after{content:'';position:absolute;width:7px;height:7px;background:var(--ink);border:2px solid var(--page);left:8px;top:8px}
.masthead nav{display:flex;gap:32px;font-size:12px}
.masthead nav a{color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:7px}
.masthead nav a:hover,.masthead nav .nav-active{color:var(--ink)}
.nav-dot{width:4px;height:4px;background:var(--red)}
.header-note{font-size:9px;font-weight:600;letter-spacing:1.1px;display:flex;align-items:center;gap:8px}
.live-dot{display:inline-block;width:5px;height:5px;background:var(--green);flex-shrink:0}
.daily-strip{height:64px;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.1px;color:var(--muted)}
.daily-strip>span{display:flex;align-items:center;gap:10px}
.strip-divider{color:#4e5251;margin-inline:4px}
.daily-strip time{color:var(--ink)}
.daily-strip strong{font:500 16px var(--pixel);color:var(--ink);font-variant-numeric:tabular-nums;min-width:64px}
.hero{display:grid;grid-template-columns:.87fr 1.13fr;align-items:center;gap:60px;padding:32px 0 62px}
.hero-copy{padding:5px 0;min-width:0}
.hero-copy .eyebrow{display:flex;align-items:center;gap:9px;color:#c4c7be;margin-bottom:21px}
.tiny-line{width:18px;height:2px;background:var(--red)}
h1{font:600 clamp(48px,5.7vw,80px)/.94 var(--pixel);letter-spacing:-2px}
h1>span{color:var(--red)}
.hero-description{font-size:13px;color:var(--muted);line-height:1.9;margin:23px 0 27px}
.hero-actions{max-width:328px}
.button-play{width:100%;display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid var(--red);background:var(--red);color:#171818;font-size:13px;font-weight:800;padding:15px 20px;box-shadow:3px 3px 0 #733731;transition:transform .16s,background .16s,box-shadow .16s}
.button-play:hover:not(:disabled){background:#ff6c64;transform:translate(-1px,-1px);box-shadow:4px 4px 0 #733731}
.button-play:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 #733731}
.button-play>span:last-child:not(:first-child){font-size:22px;font-weight:400;line-height:1}
.practice-button{width:100%;padding:17px 0 5px;color:var(--muted);border:0;background:none;display:flex;gap:14px;align-items:center;justify-content:center;font-size:12px}
.practice-button:hover:not(:disabled){color:var(--ink)}
.play-note{margin-top:25px;font-size:8px;letter-spacing:.8px;color:var(--muted);display:flex;align-items:center;gap:7px}
.play-note>span:first-child{color:var(--green);font-size:12px}
.note-dot{color:#525753}
.console{min-width:0;background:#222525;border:1px solid #414644;padding:0 10px;box-shadow:7px 7px 0 #0e1011;position:relative}
.console:before,.console:after{position:absolute;content:'+';color:#707572;font:12px monospace;top:11px}
.console:before{left:10px}.console:after{right:10px}
.console-top{height:41px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font:500 10px var(--pixel);letter-spacing:1.4px;color:#9ea59b}
.console-top>span:first-child{display:flex;align-items:center;gap:8px}
.console-led{width:4px;height:4px;background:var(--green);box-shadow:0 0 6px #a8bd8340}
.console-number{color:#b5b8af}
.screen{position:relative;aspect-ratio:3/2;overflow:hidden;background:#151f28;container-type:size;border:1px solid #111718}
.game-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;image-rendering:pixelated}
.card{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:24px;text-align:center;background:#1b242a}
.app[data-state=title] .card-title,.app[data-state=loading] .card-loading,.app[data-state=error] .card-error{display:flex}
.card-title{padding:0;background:#253440}
.scene{position:absolute;inset:0;overflow:hidden;background:linear-gradient(#1d2a35,#45515a)}
.scene:after{content:'';position:absolute;inset:0;opacity:.13;background:repeating-linear-gradient(0deg,transparent 0 3px,#080f17 3px 4px);pointer-events:none}
.scene-moon{width:13%;aspect-ratio:1;position:absolute;right:14%;top:12%;background:#9fafa9;clip-path:polygon(25% 0,75% 0,75% 12%,88% 12%,88% 25%,100% 25%,100% 75%,88% 75%,88% 88%,75% 88%,75% 100%,25% 100%,25% 88%,12% 88%,12% 75%,0 75%,0 25%,12% 25%,12% 12%,25% 12%);opacity:.62}
.mountain{position:absolute;width:120%;left:-10%;height:65%;bottom:7%;clip-path:polygon(0 70%,8% 54%,12% 54%,21% 21%,26% 21%,35% 0,42% 26%,48% 26%,60% 64%,64% 64%,78% 13%,84% 13%,92% 45%,100% 30%,100% 100%,0 100%);background:#617078}
.mountain:after{content:'';position:absolute;inset:0;background:#a5b3b5;clip-path:polygon(13% 39%,21% 21%,26% 21%,35% 0,42% 26%,48% 26%,53% 41%,42% 35%,33% 29%,27% 40%,22% 31%)}
.mountain-front{bottom:-7%;left:-28%;background:#34444e;transform:scale(1.2,.6);transform-origin:bottom}
.summit{position:absolute;bottom:-16%;left:12%;width:100%;height:55%;background:#56625f;clip-path:polygon(20% 0,67% 0,67% 7%,77% 7%,77% 17%,87% 17%,87% 28%,95% 28%,95% 100%,0 100%,0 32%,9% 32%,9% 17%,20% 17%);box-shadow:inset 0 14px #c5d1cb}
.summit-snow{position:absolute;inset:0;background:#b0bbb3;clip-path:polygon(0 0,100% 0,100% 27%,86% 27%,86% 17%,73% 17%,73% 25%,55% 25%,55% 16%,28% 16%,28% 30%,16% 30%,16% 40%,0 40%)}
.summit-path{position:absolute;width:13%;height:77%;top:26%;left:41%;background:repeating-linear-gradient(#3b494a 0 7px,#78837a 7px 11px);transform:skewX(-24deg)}
.trainer{position:absolute;left:48%;top:28%;height:40%;display:flex;align-items:center;justify-content:center}
.red-sprite{height:100%;width:auto;image-rendering:pixelated;filter:drop-shadow(4px 5px 0 #18232960)}
.speech-bubble{position:absolute;top:-19%;right:-18%;font:600 26px/.7 var(--pixel);color:#24312f;background:#dedfd0;padding:1px 12px 12px;box-shadow:3px 3px #0e191a60}
.speech-bubble:after{content:'';position:absolute;bottom:-5px;left:7px;width:5px;height:5px;background:#dedfd0}
.scene-caption{position:absolute;top:7%;left:5%;font:400 clamp(14px,1.5vw,20px)/1.3 var(--pixel);text-align:left;color:#d6dfdb;letter-spacing:.2px}
.screen-bottom{position:absolute;left:5%;right:5%;bottom:6%;display:flex;align-items:center;justify-content:space-between;font:400 12px var(--pixel);text-shadow:1px 2px #152b31}
.waiting{display:flex;gap:8px;align-items:center;letter-spacing:1.2px}
.waiting .live-dot{background:var(--red)}
.coordinates{font-size:9px;color:#d5dbd4}
.snow{position:absolute;inset:-100% 0 0;background-image:radial-gradient(2px 2px at 10% 16%,#f0f4ec 99%,transparent),radial-gradient(2px 2px at 38% 62%,#f0f4ec 99%,transparent),radial-gradient(1px 1px at 74% 21%,#f0f4ec 99%,transparent),radial-gradient(2px 2px at 92% 70%,#f0f4ec 99%,transparent);background-size:146px 181px;animation:snowfall 18s linear infinite;opacity:.65;pointer-events:none}
@keyframes snowfall{to{transform:translateY(50%)}}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:3px 8px}
.toolbar-label{font:400 10px var(--pixel);color:var(--muted);display:flex;align-items:center;gap:8px;letter-spacing:1px}
.pixel-cross{color:#b7bcae;font-size:22px}
.toolbar>div{display:flex;gap:12px}
.button-quiet{color:var(--ink);background:transparent;border:0;padding:8px 0;font-size:10px}
.button-quiet:hover:not(:disabled){color:var(--red)}
.console-caption{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #3b4140;margin:0 8px;padding:11px 0;font-size:7px;letter-spacing:.9px;color:#91988e}
.record{display:grid;grid-template-columns:1fr 2fr;border-block:1px solid var(--line);padding:28px 0;gap:40px}
.record-heading h2{font:500 27px var(--pixel);margin:4px 0}
.record-heading>p:last-child{font-size:11px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);align-items:center}
.stats>div{border-left:1px solid var(--line);padding:5px 24px}
.stats dt{font-size:8px;letter-spacing:.7px;color:var(--muted);display:flex;justify-content:space-between;gap:6px;white-space:nowrap}
.stats dt>span{color:#aab29f;font-size:13px;line-height:1}
.stats dd{font:500 47px/1.2 var(--pixel);margin:7px 0 0}
.stats .streak-stat dd,.stats .streak-stat dt>span{color:var(--red)}
.how-section{padding:62px 0 36px}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:29px}
.section-heading h2{font:500 33px/1.2 var(--pixel);margin-top:8px;letter-spacing:-.4px}
.section-tag{font-size:8px;letter-spacing:1.5px;color:var(--muted);padding-bottom:4px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:#1a1d1d}
.steps article{padding:25px 28px 22px;display:flex;flex-direction:column;align-items:start;position:relative}
.steps article+article{border-left:1px solid var(--line)}
.step-number{font:400 14px var(--pixel);color:var(--red);margin-bottom:14px}
.steps h3{font:500 23px var(--pixel);margin-bottom:10px}
.steps p{font-size:12px;line-height:1.85;color:var(--muted);max-width:29ch}
.mini-team,.step-decoration{margin-top:24px;height:29px;display:flex;gap:9px;align-items:center}
.mini-team>span{font:500 13px var(--pixel);width:24px;height:24px;border:1px solid #4d5550;color:#9da897;display:grid;place-items:center;background:linear-gradient(#2f3932 46%,#1a1d1d 46% 55%,#262c28 55%);clip-path:polygon(20% 0,80% 0,80% 10%,90% 10%,90% 20%,100% 20%,100% 80%,90% 80%,90% 90%,80% 90%,80% 100%,20% 100%,20% 90%,10% 90%,10% 80%,0 80%,0 20%,10% 20%,10% 10%,20% 10%)}
.step-decoration{font:500 16px var(--pixel);color:#b0b6a5;letter-spacing:1px;gap:20px}
.step-decoration>span{color:var(--red);font-size:12px}
.days{gap:10px}
.days>span{color:#1a1d1d;font:400 11px var(--pixel);background:#a1b28c;width:19px;height:21px;display:grid;place-items:center}
.days>span:nth-last-child(-n+2){background:none;color:#829177;border:1px dashed #53604b}
.daily-rule{font-size:11px;line-height:1.8;color:var(--muted);margin-top:17px}
.daily-rule>span{color:var(--red);margin-right:7px}
.controls-section{display:flex;align-items:center;justify-content:space-between;padding:23px 0 30px;border-bottom:1px solid var(--line);gap:24px}
.controls-heading{display:flex;align-items:center;gap:16px}
.controls-heading .pixel-cross{font-size:31px}
.controls-heading h2{font:500 22px var(--pixel)}
.controls-heading p{font-size:10px;color:var(--muted);margin-top:3px}
.keys{display:flex;gap:27px;align-items:start}
.keys>div{text-align:center}
.keys dt{display:flex;gap:3px;justify-content:center}
kbd{min-width:22px;height:25px;padding:1px 5px;border:1px solid #474d47;border-bottom:3px solid #474d47;font:400 12px/20px var(--pixel);color:#dce0d5;background:#242928}
.keys dd{font-size:9px;margin:7px 0 0;color:var(--muted)}
.faq{padding:40px 0;display:grid;grid-template-columns:1fr 2fr;gap:40px}
.faq h2{font:500 28px var(--pixel)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;font-size:12px;padding:15px 0;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';font:20px/.9 var(--pixel);color:var(--muted)}
.faq details[open] summary:after{content:'−';color:var(--red)}
.faq details p{font-size:12px;line-height:1.8;color:var(--muted);padding:0 28px 17px 0}
.footer{border-top:1px solid var(--line);padding:27px 0 30px}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:20px}
.footer .brand{font-size:22px}
.footer-top>span{font:400 12px var(--pixel);letter-spacing:1px;color:#939c88}
.footer-top>div{display:flex;gap:22px;font-size:10px;color:var(--muted)}
.footer-top a{text-decoration:none}
.footer-top a:hover{color:var(--red)}
.footer>p{font-size:9px;line-height:1.8;color:#858b83;margin-top:19px;max-width:770px}
.card-heading{font:500 25px var(--pixel)}
.card-note{font-size:12px;color:#aebcaf;max-width:38ch;line-height:1.6}
.loading-tip{color:#839184;font-size:10px}
.meter{height:5px;background:#3d4b40;width:65%}
.meter-fill{height:100%;width:0;background:var(--red);transition:width .2s}
.loading-ball{width:28px;height:28px;border:2px solid #d7dfd4;background:linear-gradient(var(--red) 0 44%,#162023 44% 55%,#d7dfd4 55%);border-radius:50%;animation:load-spin 1.7s steps(8) infinite}
@keyframes load-spin{to{transform:rotate(360deg)}}
.error-icon{font:500 29px var(--pixel);color:var(--red)}
.card-error .button-play{width:auto;padding:9px 25px}
.played{border-left:2px solid var(--red);padding:7px 0 7px 18px}
.played-result{font:500 24px var(--pixel);color:var(--ink)}
.played-next{font:400 15px var(--pixel);color:var(--muted);margin-top:4px}
.text-button{background:none;color:var(--red);border:0;padding:8px 0 0;font-size:11px}
.copy-feedback{font-size:10px;color:var(--green);overflow-wrap:anywhere;white-space:pre-line}
.practice-note{margin-top:15px}
.practice-note a{display:inline-block;margin-top:5px}
.noscript{position:fixed;bottom:0;inset-inline:0;background:var(--red);color:#151718;padding:18px;text-align:center}
.pad{display:none;user-select:none;-webkit-user-select:none;touch-action:none;padding:14px 6px 19px;grid-template-areas:'dpad face' 'meta meta';grid-template-columns:1fr 1fr;gap:8px}
.dpad{grid-area:dpad;width:132px;height:132px;position:relative;touch-action:none}
.dpad-arm{position:absolute;width:44px;height:44px;background:#414740;border:1px solid #5e6759}
.dpad-up{left:44px;top:0;border-bottom:0}.dpad-down{left:44px;bottom:0;border-top:0}
.dpad-left{left:0;top:44px;border-right:0}.dpad-right{right:0;top:44px;border-left:0}
.dpad-center{left:44px;top:44px;border:0}
.dpad-center:after{content:'';position:absolute;inset:14px;background:#2b302c}
.dpad[data-dir=up] .dpad-up,.dpad[data-dir=down] .dpad-down,.dpad[data-dir=left] .dpad-left,.dpad[data-dir=right] .dpad-right{background:var(--red)}
.face{grid-area:face;display:flex;align-items:center;justify-content:end;gap:13px}
.pad-button{width:52px;height:52px;border-radius:50%;border:1px solid #fc776f;border-bottom:4px solid #9e3932;font:500 26px var(--pixel);color:#171818;background:var(--red);touch-action:none}
.pad-a{transform:translateY(-18px)}
.pad-button.is-down,.pad-pill.is-down{background:#ffa496}
.meta{grid-area:meta;display:flex;justify-content:center;gap:18px}
.pad-pill{font:500 13px var(--pixel);background:#3c453b;color:var(--ink);border:1px solid #586551;padding:7px 17px;touch-action:none}
.app[data-state=playing] .console{border-color:#7e8e72}
.console:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#121718;padding:16px}
.console:fullscreen .bezel{width:min(100%,calc((100dvh - 110px)*1.5));margin:auto auto 0}
.console:fullscreen .console-top,.console:fullscreen .console-caption{display:none}
.console:fullscreen .toolbar{width:min(100%,900px);margin:0 auto auto}
.app[data-state=playing] .toolbar-label{font-size:0}
.app[data-state=playing] .toolbar-label:after{content:'YOUR MOVE.';font:400 10px var(--pixel);color:var(--green)}
@media(min-width:801px){
  .hero-copy,.console{animation:arrive .55s both}.console{animation-delay:.08s}
  @keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
}
@media(max-width:1100px){
  .wrap{width:calc(100% - 64px)}.hero{gap:35px}.header-note{display:none}
  .hero-description{font-size:12px}.stats>div{padding:5px 16px}.keys{gap:16px}
  .steps article{padding:22px}.controls-heading p{max-width:24ch}
}
@media(max-width:800px){
  .wrap{width:calc(100% - 40px)}.masthead{height:79px}.masthead nav{gap:20px;font-size:11px}
  .brand{font-size:26px}.brand-mark{width:21px;height:21px;margin-right:8px}
  .hero{grid-template-columns:1fr;gap:30px;padding-top:20px;padding-bottom:38px}
  .hero-copy{max-width:560px}h1{font-size:69px;line-height:.95}
  .hero-description{font-size:14px;max-width:400px;margin-block:20px}
  .hero-copy .eyebrow{margin-bottom:18px}.hero-actions{max-width:360px}.play-note{margin-top:17px}
  .console{max-width:620px;width:100%;justify-self:center}.scene-caption{font-size:22px}
  .record{grid-template-columns:1fr;gap:22px;padding:25px 0}
  .record-heading{display:grid;grid-template-columns:1fr auto;align-items:center}
  .record-heading .eyebrow{grid-column:1/-1}.record-heading h2{font-size:24px}
  .record-heading>p:last-child{font-size:10px}
  .stats>div:first-child{border-left:0;padding-left:0}.stats>div:last-child{padding-right:0}.stats dd{font-size:40px}
  .how-section{padding:39px 0 23px}.section-heading h2{font-size:29px}.section-tag{display:none}
  .steps article{padding:20px 16px}.steps h3{font-size:21px}.steps p{font-size:11px}
  .mini-team{gap:5px}.mini-team>span{width:19px;height:19px}
  .controls-section{flex-direction:column;align-items:start;gap:22px}.controls-heading p{max-width:none}
  .keys{width:100%;justify-content:space-between;gap:10px}.faq{gap:22px;grid-template-columns:1fr}
  .footer-top{flex-wrap:wrap}.footer-top>span{font-size:10px}.footer-top>div{width:100%}
  .card-heading{font-size:23px}
}
@media(max-width:520px){
  .wrap{width:calc(100% - 36px)}.masthead{height:73px}.masthead .brand{font-size:24px}
  .brand-mark{display:none}.masthead nav{gap:15px;font-size:10px}.masthead nav a:last-child{display:none}
  .daily-strip{font-size:8px;height:55px;letter-spacing:.4px}.daily-strip>span{gap:6px}
  .strip-divider{margin:0}.daily-strip strong{font-size:14px;min-width:55px}
  .hero{padding-top:15px;gap:30px}h1{font-size:clamp(48px,16vw,64px)}
  .hero-copy .eyebrow{font-size:9px;letter-spacing:1.6px}.hero-description{font-size:12px;line-height:1.8}
  .hero-actions{max-width:none}.hero-copy{width:100%}
  .play-note{font-size:7px;justify-content:center;gap:6px}
  .console{padding:0 6px;box-shadow:4px 4px #0e1011}.console-top{height:33px;font-size:8px;padding-inline:16px}
  .console:before,.console:after{top:9px;font-size:10px}.scene-caption{font-size:17px}
  .speech-bubble{font-size:23px;padding:1px 9px 9px}.screen-bottom{font-size:10px}
  .waiting{letter-spacing:.5px;gap:5px}.coordinates{font-size:7px}
  .console-caption{font-size:6px;gap:4px;margin-inline:4px;letter-spacing:.4px}
  .toolbar{min-height:43px;padding-inline:5px}.toolbar-label{font-size:9px;letter-spacing:.5px}
  .toolbar>div{gap:11px}.button-quiet{font-size:9px;padding:12px 0}
  .record-heading h2{font-size:23px}.record-heading>p:last-child{font-size:9px;max-width:19ch;text-align:right}
  .stats>div{padding-inline:12px}.stats dt{font-size:7px;letter-spacing:.2px}.stats dt>span{display:none}
  .stats dd{font-size:37px}.section-heading h2{font-size:28px;max-width:18ch}.eyebrow{font-size:8px;letter-spacing:1.3px}
  .steps{grid-template-columns:1fr}.steps article{display:grid;grid-template-columns:23px 1fr;gap:12px;padding:22px}
  .steps article+article{border-left:0;border-top:1px solid var(--line)}.step-number{margin-top:4px}
  .steps h3{font-size:24px}.steps p{max-width:none;font-size:12px}
  .mini-team,.step-decoration{grid-column:2;margin-top:5px}.mini-team{gap:9px}.mini-team>span{width:24px;height:24px}
  .daily-rule{font-size:10px}.controls-heading h2{font-size:22px}
  .keys{flex-wrap:wrap;justify-content:start;column-gap:26px;row-gap:18px}.keys>div{text-align:left}.keys dt{justify-content:start}
  .card{padding:16px;gap:10px}.card-title{padding:0}.card-heading{font-size:19px}
  .card-note{font-size:10px;max-width:32ch}.card-error .button-play{font-size:11px;padding:7px 18px}
  .loading-tip{font-size:9px}.faq{padding:29px 0}.faq h2{font-size:26px}.footer{padding-top:22px}
  .app[data-state=playing] .pad{display:grid}
  .console:fullscreen .bezel{width:min(100%,calc((100dvh - 265px)*1.5))}
  .console:fullscreen .pad{max-width:430px;width:100%;margin:auto}.console:fullscreen .toolbar{margin-bottom:0}
}
@media(pointer:coarse){
  .app[data-state=playing] .pad{display:grid}
  .console:fullscreen .bezel{width:min(100%,calc((100dvh - 300px)*1.5))}
  .console:fullscreen .pad{max-width:480px;width:100%;margin:0 auto auto}.console:fullscreen .toolbar{margin-bottom:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}
}