:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#eff4fa;background:#15171b;font-size:16px;--blue:#58b6ff;--orange:#ffa660;--mint:#76efd1}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button,a,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}button{color:inherit}a{color:#aad7ff}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}.stage{height:100vh;height:100dvh;width:100vw;display:flex;align-items:center;justify-content:center;padding:86px 14px 12px;background:radial-gradient(ellipse at 50% 48%,#343b44 0,#20252c 46%,#15171b 85%)}.device{position:relative;height:100%;max-height:calc((100vw - 28px)*1320/1126);aspect-ratio:1126/1320;border-radius:1.6%;overflow:hidden;filter:drop-shadow(0 20px 30px #0008);flex-shrink:0}.device img{height:100%;width:100%;display:block}#hotspots{position:absolute;inset:0}.hotspot{position:absolute;border:2px solid transparent;background:transparent;padding:0;border-radius:8px;transition:box-shadow .18s,background .18s}.hotspot.round{border-radius:50%}.hotspot:hover{background:#7bbcff2b;border-color:#d3eaffaa}.hotspot.related{border-color:#62bcff;background:#50b6ff22;box-shadow:0 0 9px 2px #55b5ff80}.hotspot.on-press{border-color:#c1e6ff;background:#58b6ff70;box-shadow:0 0 13px 4px #58b6ff,inset 0 0 9px #b3deff}.hotspot.on-hold{border-color:#ffdab6;background:#ffa66077;box-shadow:0 0 13px 4px #ffa660,inset 0 0 9px #ffd2aa}.hotspot.on-turn{border-color:#c2fff2;background:#76efd15e;box-shadow:0 0 13px 4px #76efd1,inset 0 0 9px #afffec}.search-area{position:fixed;top:max(18px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(580px,calc(100vw - 32px));z-index:10}.search-box{display:flex;align-items:center;gap:14px;border:1px solid #c4cad3;background:#fafbfc;color:#596372;border-radius:28px;padding:0 17px;height:52px;box-shadow:0 4px 20px #0004}.search-box:focus-within{border-color:#93c9f7;box-shadow:0 0 0 3px #7dbaff25,0 5px 20px #0004}.search-box input{min-width:0;flex:1;background:none;border:0;outline:0;color:#1d2939;font-size:16px}.search-box input::placeholder{color:#697586}.search-box input::-webkit-search-cancel-button{display:none}.search-box button{display:flex;align-items:center;justify-content:center;width:28px;height:30px;color:#647084;background:none;border:0;padding:0}.search-divider{width:1px;height:23px;background:#dce0e6}.suggestion-panel{margin-top:8px;background:#fafbfc;color:#243246;border-radius:17px;border:1px solid #d8dde5;overflow:hidden;box-shadow:0 16px 35px #0006}.suggestion-header{display:flex;align-items:center;justify-content:space-between;padding:15px 18px 10px;font-size:12px;color:#7b8493;letter-spacing:.5px}.suggestion-header>span:first-child{text-transform:uppercase;font-weight:600}#suggestions{max-height:min(420px,calc(100dvh - 165px));overflow:auto;padding:0 7px 8px;scrollbar-width:thin}.suggestion{display:flex;gap:13px;align-items:center;padding:11px 12px;border-radius:10px;cursor:pointer;font-size:15px;line-height:1.4}.suggestion.selected,.suggestion:hover{background:#eaf2fc}.suggestion-icon{color:#8e9baa;font-size:18px;width:20px;flex-shrink:0}.suggestion-title{font-weight:500}.suggestion-meta{font-size:12px;color:#8691a1;margin-top:2px}.suggestion mark{background:none;font-weight:750;color:#182941}.empty{padding:20px 14px 28px;font-size:14px;color:#7a8698}.intro-hint{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#171e28d9;backdrop-filter:blur(12px);padding:10px 17px;border:1px solid #58677a70;box-shadow:0 4px 18px #0003;border-radius:24px;font-size:13px;color:#d3dce8;white-space:nowrap;pointer-events:none;z-index:3}.hint-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-right:7px}.info{position:fixed;right:22px;bottom:max(22px,env(safe-area-inset-bottom));width:360px;max-width:calc(100vw - 28px);background:#17212ff2;border:1px solid #53667d9c;backdrop-filter:blur(18px);border-radius:16px;box-shadow:0 14px 40px #0006;z-index:6;max-height:calc(100dvh - 106px);overflow:auto;scrollbar-width:thin}.info-head{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 18px 12px;gap:12px}.info-head>div:first-child{min-width:0}#info-type{font-size:11px;color:#96b2ce;font-weight:600;letter-spacing:1.1px;text-transform:uppercase}h1{font-size:21px;line-height:1.25;margin:5px 0 0;font-weight:600;letter-spacing:-.4px}.info-tools{display:flex;gap:2px}.info-tools button{background:none;border:0;color:#bdcbda;min-width:29px;min-height:29px;font-size:19px;padding:0}.info-tools #dismiss{font-size:15px}#info-content{padding:0 18px 17px}#description{font-size:16px;line-height:1.6;color:#e1e8f2;margin:3px 0 13px}#keycaps{display:flex;flex-wrap:wrap;gap:6px}.keycap{padding:4px 7px;border:1px solid #45759c;color:#c7e8ff;background:#263c52;border-radius:5px;font-size:12px;font-weight:600}.keycap.hold{border-color:#906b48;color:#ffd0a8;background:#423326}.keycap.turn{border-color:#428571;color:#b7fbe8;background:#24443a}.keycap small{font-size:10px;font-weight:400;opacity:.7;margin-right:4px}.step-nav{display:flex;align-items:center;gap:9px;border-top:1px solid #4a5a6c55;margin-top:15px;padding-top:13px}.step-nav button{border:1px solid #42546b;background:#293a50;border-radius:6px;padding:5px 10px;min-height:34px}.step-nav #prev{font-size:23px;line-height:1;min-width:35px}#step-label{font-size:12px;color:#a1b4ca;flex:1}.step-nav #auto{font-size:20px;line-height:1}#auto.playing{color:var(--mint)}.step-nav #next{font-size:13px;background:#b5daff;color:#173b5d;border-color:#b5daff;font-weight:600}.legend{display:flex;gap:16px;font-size:11px;color:#a5b8cc;margin-top:12px}.legend span{display:flex;align-items:center;gap:5px}.legend i{display:inline-block;width:6px;height:6px;border-radius:50%}.legend .press{background:var(--blue)}.legend .hold{background:var(--orange)}.legend .turn{background:var(--mint)}details{margin-top:14px;font-size:13px;color:#9eb7d2}summary{cursor:pointer;min-height:26px}#details-content{margin:8px 0;max-height:240px;overflow:auto}.detail-button{border:0;width:100%;text-align:left;background:#233448;border-radius:6px;padding:9px 10px;margin:3px 0;font-size:13px;line-height:1.5;color:#c7d7e9}.detail-button.active{background:#365676;color:white}#note{margin:12px 0;font-size:12px;line-height:1.6;color:#dfc49e}#manual{display:inline-block;font-size:12px;margin-top:8px;color:#85b7e9;text-decoration:none}.info.collapsed .info-head{padding-bottom:17px}.info.collapsed #info-content{display:none}@media(min-width:1400px){.info{right:36px;bottom:28px;width:380px}}@media(max-width:900px){.info{right:14px;bottom:max(14px,env(safe-area-inset-bottom));width:340px}}@media(max-width:620px){.stage{padding:82px 6px 6px;align-items:flex-start}.device{height:auto;width:100%;max-width:calc((100dvh - 88px)*1126/1320);max-height:none}.search-area{top:max(13px,env(safe-area-inset-top));width:calc(100vw - 24px)}.search-box{height:49px;padding:0 14px}.info{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:auto;max-width:none;max-height:46dvh;border-radius:14px}.info-head{padding:13px 15px 8px}h1{font-size:18px}#info-content{padding:0 15px 13px}#description{font-size:15px;line-height:1.5;margin-bottom:10px}.step-nav{margin-top:11px;padding-top:9px}.intro-hint{font-size:12px;padding:9px 13px;max-width:calc(100vw - 22px);white-space:normal;text-align:center;width:max-content}.suggestion{padding:10px 9px}.legend{margin-top:9px}#info-type{font-size:10px}.info.collapsed .info-head{padding-bottom:13px}}@media(max-height:530px) and (min-width:621px){.stage{padding-top:72px}.search-area{top:10px}.search-box{height:45px}.info{max-height:calc(100dvh - 84px);width:310px;bottom:12px}.info-head{padding:13px 15px 8px}#info-content{padding:0 15px 13px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Follow the enclosure edge while keeping the original control coordinates. */
.device{overflow:visible;border-radius:0}.device img{clip-path:polygon(5.3% 1.25%,25.8% 1.25%,25.8% .75%,26.4% .5%,27.4% .45%,29.5% .6%,30.6% .9%,30.6% 1.25%,94.5% 1.25%,95.7% 1.7%,97.2% 3%,98.8% 4.5%,99.2% 5.7%,99.2% 7%,98.4% 33%,97.6% 66%,96.7% 96.8%,96.2% 98%,95% 98.8%,94% 99.1%,4.4% 99.1%,3.3% 98.8%,2.6% 98%,2.1% 96.8%,1.7% 64%,1.2% 33%,.6% 7%,.8% 5.5%,1.4% 4.2%,3.2% 2.6%,4.3% 1.7%)}
:root{color-scheme:dark;--ui-bg:#202832;--ui-border:#475362;--ui-text:#e7edf5;--ui-muted:#a6b2c1;--ui-hover:#2c3c50;--ui-highlight:#c6e3ff;--ui-divider:#45505f;--card-bg:#17212ff2;--card-text:#e1e8f2;--card-muted:#9eb7d2}
.search-box{background:var(--ui-bg);border-color:var(--ui-border);color:var(--ui-muted)}.search-box input{color:var(--ui-text)}.search-box input::placeholder,.search-box button{color:var(--ui-muted)}.search-box button{flex-shrink:0}.search-divider{background:var(--ui-divider)}.suggestion-panel{background:var(--ui-bg);border-color:var(--ui-border);color:var(--ui-text)}.suggestion-header,.suggestion-meta,.suggestion-icon,.empty{color:var(--ui-muted)}.suggestion.selected,.suggestion:hover{background:var(--ui-hover)}.suggestion mark{color:var(--ui-highlight)}.info{background:var(--card-bg);color:var(--ui-text)}#description{color:var(--card-text)}
:root[data-theme="light"]{color-scheme:light;color:#1e2b3d;background:#edf1f5;--ui-bg:#ffffff;--ui-border:#c5cfdb;--ui-text:#203048;--ui-muted:#617085;--ui-hover:#edf4fc;--ui-highlight:#1a4d7d;--ui-divider:#d7dfe8;--card-bg:#fbfdfff5;--card-text:#2b3d53;--card-muted:#5b7593}
[data-theme="light"] .stage{background:radial-gradient(ellipse at 50% 48%,#fff 0,#eef2f7 46%,#dce3ec 95%)}[data-theme="light"] .device{filter:drop-shadow(0 15px 25px #25395430)}[data-theme="light"] .intro-hint{background:#ffffffec;color:#435670;border-color:#b7c6d9;box-shadow:0 4px 18px #213b5915}[data-theme="light"] .info{border-color:#bccbdc;box-shadow:0 14px 40px #243f6129}[data-theme="light"] #info-type,[data-theme="light"] #step-label,[data-theme="light"] .legend,[data-theme="light"] details{color:#5c7390}[data-theme="light"] .info-tools button{color:#647891}[data-theme="light"] .step-nav{border-color:#cbd6e2}[data-theme="light"] .step-nav button{background:#e6eef8;color:#365572;border-color:#bacce0}[data-theme="light"] .step-nav #next{background:#235e95;color:white;border-color:#235e95}[data-theme="light"] .detail-button{background:#eaf1f9;color:#334e6c}[data-theme="light"] .detail-button.active{background:#d0e2f5;color:#1f4266}[data-theme="light"] #note{color:#845c27}[data-theme="light"] #manual{color:#245d97}[data-theme="light"] .keycap{color:#1f5480;background:#deefff;border-color:#8eb9de}[data-theme="light"] .keycap.hold{color:#8a4a11;background:#ffead6;border-color:#d9ad83}[data-theme="light"] .keycap.turn{color:#1b6856;background:#dbf6ed;border-color:#86bca9}[data-theme="light"] #auto.playing{color:#18735d}
.coffee-footer{position:fixed;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom));min-height:60px;display:flex;justify-content:center;align-items:center;z-index:7;pointer-events:none}.coffee-footer a{pointer-events:auto}.stage{padding-bottom:86px}.intro-hint{bottom:90px}.info{bottom:max(88px,calc(env(safe-area-inset-bottom) + 78px));max-height:calc(100dvh - 176px)}@media(max-width:620px){.stage{padding-bottom:82px}.device{max-width:calc((100dvh - 164px)*1126/1320)}.intro-hint{bottom:86px}.info{bottom:max(84px,calc(env(safe-area-inset-bottom) + 74px));max-height:43dvh}}@media(max-height:530px) and (min-width:621px){.info{bottom:82px;max-height:calc(100dvh - 156px)}.intro-hint{bottom:82px}}

/* The explanation and hardware occupy separate grid cells at every size. */
.stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:16px;padding:86px 14px 86px;align-items:stretch}
.hardware-area{min-width:0;min-height:0;container-type:size;display:flex;justify-content:center;align-items:center}
.device{height:min(100cqh,calc(100cqw * 1320 / 1126));width:auto;max-width:none;max-height:none;aspect-ratio:1126/1320}
.stage:has(.info:not([hidden])){grid-template-columns:minmax(0,1fr) min(360px,42vw);padding-bottom:max(14px,env(safe-area-inset-bottom))}
.info{position:relative;inset:auto;transform:none;width:100%;max-width:none;max-height:100%;min-height:0;align-self:end;z-index:8}
.coffee-footer{z-index:2}
@media(max-width:760px){
.stage{padding-top:82px;gap:12px}
.stage:has(.info:not([hidden])){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,40%);padding:82px 12px max(12px,env(safe-area-inset-bottom))}
.stage:has(.info.collapsed:not([hidden])){grid-template-rows:minmax(0,1fr) auto}
.info{position:relative;inset:auto;width:100%;max-height:100%;max-width:none}
.device{height:min(100cqh,calc(100cqw * 1320 / 1126));width:auto;max-width:none;max-height:none}
}
@media(max-height:530px) and (min-width:761px){.stage{padding-top:72px}.info{position:relative;inset:auto;width:100%;max-height:100%}}