@font-face{font-family:Departure;src:url('/fonts/departure-mono-latin.woff2') format('woff2');font-display:swap}
.device-native{color-scheme:dark;font-synthesis:none;--bg:#0d0e12;--panel:#17191f;--border:#343840;--ink:#e8eddf;--dim:#959ba8;--accent:#dc4056;--screen:#0c151a;--screen-ink:#ddeacb;--screen-dim:#93a7ab;--selected:#293e41;--dur:160ms;font:15px/1.5 system-ui,sans-serif;color:var(--ink)}
.device-native *{box-sizing:border-box}.device-native button,.device-native a,.device-native input{-webkit-tap-highlight-color:transparent}.device-native button{position:relative;font:inherit;cursor:pointer;touch-action:manipulation;color:inherit}.device-native button:disabled{cursor:default}.device-native button:focus-visible,.device-native a:focus-visible,.device-native input:focus-visible{outline:2px solid #f9e59c;outline-offset:4px}.device-native a{color:inherit;text-underline-offset:4px}.device-native button{border:1px solid var(--border);background:var(--panel);border-radius:5px;min-height:44px;padding:8px 14px}.device-native button:hover:not(:disabled){border-color:var(--dim)}.device-native button:active:not(:disabled){background:#313641}[hidden]{display:none!important}
.device-native #generations{display:flex;gap:5px;padding:16px 0;overflow-x:auto;scrollbar-width:thin}.device-native #generations button{flex:1;min-width:58px;font:12px Departure,monospace;padding:8px}.device-native #generations button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}.device-title{display:flex;align-items:center;justify-content:space-between;max-width:940px;margin:10px auto 0}.device-title h2{font:24px Departure,monospace;margin:0}.device-title p{font-size:12px;color:var(--dim);margin:4px 0}.device-title>span{font:12px Departure,monospace;color:var(--dim)}
#stage{position:relative;isolation:isolate;overflow:clip;width:940px;max-width:100%;min-width:270px;aspect-ratio:940/760;margin:4px auto;perspective:1600px}#rig{position:absolute;width:940px;height:760px;transform-origin:top left;transform-style:preserve-3d}.device-layer,.layer-face{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d}.layer-face{backface-visibility:hidden}.device-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.device-layer.moving{z-index:2}.device-layer.fixed-hinge{z-index:3}.device-layer g[data-rocker]{transition:transform 70ms}.device-layer g[data-rocker].held{transform:translateY(var(--press-travel,4px))}
#rig[data-device=gold],#rig[data-device=ruby],#rig[data-device=diamond],#rig[data-device=heartgold],#rig[data-device=black]{filter:drop-shadow(0 10px 8px #0007)}
.hardware{position:absolute;padding:0;margin:0;min-height:0;background:transparent!important;border:0;border-radius:5px;pointer-events:auto;user-select:none;touch-action:none;isolation:isolate}.hardware.round{border-radius:50%}.hardware.direction{border-radius:0}.hardware .cap{display:block;position:absolute;inset:0 0 4px;background:var(--cap);border:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #253039,inset 1px 2px 0 #79878e80,inset -1px -1px 0 #0e182766;pointer-events:none;overflow:hidden;transition:transform 70ms,filter 100ms}.hardware.held .cap{transform:translateY(var(--press-travel,4px));filter:brightness(.87)}.hardware.ack .cap{filter:brightness(1.25)}.hardware.direction .cap{display:none}.hardware:focus-visible{outline-offset:2px;background:#ffe88a33!important}.hardware:disabled{pointer-events:none}.hardware:hover:not(:disabled) .cap{filter:brightness(1.12)}
.device-native button.hardware{position:absolute;min-width:0;min-height:0;padding:0;border:0}
/* The fixed apertures determine screen density. Only the content pane scrolls;
   navigation stays inside the glass at every size. Departure is a regular pixel face. */
.hardware.pill{border-radius:999px}
:root{--screen:#0d1117;--screen-ink:#c2cdd8;--screen-dim:#a6b3c1;--selected:#293a40}
.device-native{background:radial-gradient(ellipse at 50% 36%,#22141dcc 0,transparent 68%)}
.glass{position:absolute;pointer-events:auto;background:var(--screen);border-radius:3px;color:var(--screen-ink);scrollbar-width:thin;overscroll-behavior:contain;display:flex;flex-direction:column;gap:6px;overflow:hidden;padding:12px;font:12px/1.5 Departure,monospace}
.glass.side{font-size:12px;gap:8px}
.glass h2{font:400 13px/1.4 Departure,monospace;margin:0;overflow-wrap:break-word}
.glass p{margin:0}
.glass .tag{font:10px/1.4 Departure,monospace;color:var(--screen-tag,#86b5cc);letter-spacing:0}
.screen-heading{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #3b4b55;color:var(--screen-dim);flex:none;font:400 10px/1.3 Departure,monospace;letter-spacing:0;border-color:#3b4b55;padding-bottom:6px;margin:0}
.screen-content{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain}
.screen-content>p,.screen-content>.facts{margin:8px 0 0}
.screen-content>.tag{margin-top:4px}
.screen-rows{display:grid;gap:2px}
.screen-row{display:flex;align-items:center;justify-content:space-between;text-align:left;border:0;border-radius:0;background:none;gap:8px;font:400 12px/1.4 Departure,monospace;min-height:26px;padding:4px 6px;color:var(--screen-ink)}
.screen-row span:first-child{min-width:0;overflow-wrap:break-word}
.screen-row span:last-child{flex:none;font:400 9px Departure,monospace;color:var(--screen-dim);font-variant-numeric:tabular-nums}
.screen-row[aria-current=true]{background:var(--selected);color:var(--selected-ink,#e9f3cf)}
.device-native .screen-row:focus-visible{outline:2px solid #f9e59c;outline-offset:-3px}
.screen-nav{display:flex;border-top:1px solid #3b4b55;flex:none;gap:8px;margin:0;padding-top:5px;border-color:#3b4b55}
.screen-nav button{border:0;min-height:16px;padding:1px 3px;background:transparent;font:400 9px/1.4 Departure,monospace;color:var(--screen-dim);text-align:left;flex:initial}
.screen-nav button:hover{background:var(--selected);color:var(--screen-ink)}
.glass.compact{gap:4px;padding:8px}
.glass.compact .screen-row{font-size:11px;line-height:1.25;min-height:20px;padding:3px 5px}
.glass.compact h2{font-size:13px}
.glass .screen-hint{font:9px/1.4 Departure,monospace;color:#88a0b4;margin-top:auto}
.glass.side .screen-content{display:flex;flex-direction:column;gap:7px}
#reader-content .screen-content{overflow:visible}
#reader-content .tag{color:var(--dim);font-size:13px}
#reader-content .screen-row{color:var(--ink)}
#reader-content h2{overflow-wrap:break-word}
#rig[data-device=diamond]{--selected:#473643}
#rig[data-device=gold]{--selected:#32443a}
#rig[data-device=ruby]{--selected:#393f34}

#rig[data-device=red] .glass.side .tag{font-size:9px;color:#b1bece}
#reader-content{font:16px/1.5 system-ui,sans-serif}
#reader-content .screen-row{font:14px/1.4 Departure,monospace}

.glass.off{visibility:visible!important;background:#303638!important;color:transparent!important;box-shadow:inset 0 0 18px #0008!important}.glass.off>*{visibility:hidden}.glass .facts{padding-left:17px}.glass a{font-size:12px}

.lock-screen{position:absolute;display:grid;place-content:center;text-align:center;padding:12px;background:var(--screen);color:var(--screen-ink);border-radius:3px;font:18px/1.6 Departure,monospace;pointer-events:none}.lock-screen small{font-size:12px;color:var(--screen-dim)}
#cover-drag{position:absolute;border:0;background:transparent;inset:0;width:100%;height:100%;padding:0;touch-action:pan-y;cursor:grab;z-index:5}#cover-drag:active{cursor:grabbing}.opening{max-width:430px;margin:6px auto 0}#slide-track{position:relative;height:56px;background:#191d24;border:1px solid #474c55;border-radius:9px;user-select:none;touch-action:pan-y;overflow:hidden}#slide-label{position:absolute;inset:0;display:grid;place-items:center;padding-inline:55px;font:12px Departure,monospace;color:var(--dim);pointer-events:none}#slide-handle{position:absolute;left:4px;top:4px;width:48px;min-height:46px;padding:0;border:1px solid #e8dfb0;background:#ecebd7;color:#29322c;border-radius:6px;font:24px Departure,monospace;touch-action:none;cursor:grab;will-change:transform}#slide-handle:active{cursor:grabbing;background:#ffffe9}.opening-tools{display:flex;justify-content:center;gap:6px;margin-top:8px}.opening-tools button{background:none;border:0;color:var(--dim);padding:6px 9px;font-size:12px}#status{text-align:center;color:var(--dim);font:12px Departure,monospace;min-height:18px;margin:8px 0 24px}
#reader{max-width:1060px;margin:28px auto 44px;padding:30px;border:1px solid var(--border);background:var(--panel);display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:38px}#reader h2{font:24px Departure,monospace;margin:0 0 20px}#reader p{max-width:60ch}#reader .screen-heading{margin-bottom:14px}#reader .screen-rows{gap:10px}#reader .screen-row{min-height:56px;font-size:15px;padding:14px 18px}.reader-tag{color:var(--dim);font-size:12px}#reader-controls{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-content:start}#reader-controls button{font-size:12px;min-height:56px;padding:12px}.asset-heading h2{font:24px Departure,monospace;margin-bottom:5px}.asset-heading p{color:var(--dim)}#asset-panel{padding:24px 0;border-top:1px solid var(--border)}#asset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.asset-card{display:block;text-align:left;padding:14px;background:#15171d;border:1px solid var(--border)}.asset-card[aria-pressed=true]{border-color:var(--accent)}.asset-card svg{width:100%;height:auto;aspect-ratio:940/760;display:block}.asset-card strong{font:15px Departure,monospace}.asset-card small{display:block;font-size:12px;color:var(--dim);margin-top:4px}.reference-detail{padding:22px 0;max-width:760px;font-size:12px;color:var(--dim)}.reference-detail button{margin:8px 18px 0 0;font-size:12px}.reference-detail label{display:inline-flex;gap:7px;align-items:center}
.reduced .hardware .cap,.reduced [data-rocker]{transition:none!important;transform:none!important}.reduced #rig *{scroll-behavior:auto}body.dragging{cursor:grabbing}body.dragging .moving{will-change:transform}
@media(max-width:700px){.device-native{font-size:17px}.device-native #generations{gap:6px;flex-wrap:wrap}.device-native #generations button{min-width:calc(20% - 6px);min-height:48px;flex:1;font-size:14px}.device-title{margin-inline:8px}#stage{width:100%;min-width:0;margin:16px auto;max-width:600px}.opening{padding:0 10px}.device-native #slide-label{font-size:14px}.device-native .opening-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.device-native .opening-tools button{min-height:48px;padding:10px 8px;font-size:14px}.device-native #status{font-size:14px;line-height:1.5}#reader{grid-template-columns:1fr;gap:24px;padding:24px 18px}#reader-content{font-size:18px}#reader-content .screen-rows{gap:12px}#reader-content .screen-row{min-height:58px;padding:15px 16px;font-size:16px}#reader-controls{grid-template-columns:repeat(2,1fr);gap:12px}#reader-controls button{min-height:56px;font-size:14px}.effect-controls button{min-height:48px;font-size:13px}#asset-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.asset-card{padding:8px}.asset-card strong{font-size:14px}.reference-detail{padding-inline:8px}.button-tooltip{font-size:14px;line-height:1.5}}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hardware .cap,[data-rocker]{transform:none!important}}
.hardware.round{clip-path:none}.screen-inactive>*{visibility:hidden}
/* Original ticket-35 caps retain their palette and inset edges. Other devices use
   their own cap colors with the same flat finish; their SVG owns the mounting well. */
#rig[data-device=red] .hardware .cap{inset:0 0 4px;border:0;background:#21262c;box-shadow:inset 0 0 0 1px #253039,inset 1px 2px 0 #79878e80,inset -1px -1px 0 #0e182766}
#rig[data-device=red] .hardware[data-kind=cyan] .cap{background:#5eafcb;box-shadow:inset 0 0 0 1px #2d6278,inset 1px 2px 0 #a7dbe2,inset -1px -1px 0 #387c9566}
#rig[data-device=red] .hardware[data-kind=blue] .cap{background:#457fbc}
#rig[data-device=red] .hardware[data-kind=red] .cap,#rig[data-device=red] .hardware[data-kind=round-red] .cap{background:#d7424c}
#rig[data-device=red] .hardware[data-kind=white] .cap{background:#e5e5d9;box-shadow:inset 0 0 0 1px #6f796f,inset 1px 2px 0 #fffef3,inset -1px -1px 0 #a0ada766}
#rig[data-device=red] .hardware[data-kind=round-yellow] .cap{background:#edc936;box-shadow:inset 0 0 0 1px #947324,inset 1px 2px 0 #f8e58e,inset -1px -1px 0 #a2883166}
#rig:not([data-device=red]):not([data-device=ruby]) .hardware[data-kind=white] .cap{background:#e5e5d9;box-shadow:inset 0 0 0 1px #6f796f,inset 1px 2px 0 #fffef3,inset -1px -1px 0 #a0ada766}
#rig:not([data-device=red]):not([data-device=ruby]) .hardware[data-kind=green] .cap{background:var(--cap);box-shadow:inset 0 0 0 1px #285c37,inset 1px 2px 0 #b2e3aa,inset -1px -1px 0 #285c3766}
/* Desktop displays the 940-unit drawing at 1:1 when space permits. Phone widths
   retain the equivalent readable controls. */

.effect-controls{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:0 auto 28px;max-width:600px}.effect-controls button{font-size:12px}.effect-status{flex-basis:100%;text-align:center;font-size:12px;color:var(--dim)}
.phone-turn,.phone-front,.phone-back{position:absolute;inset:0}.phone-turn{transform-style:preserve-3d;transform-origin:50% 50%;transition:transform 500ms cubic-bezier(.22,.72,.22,1)}.phone-turn.back-facing{transform:rotateY(180deg)}.phone-front,.phone-back{backface-visibility:hidden;transform-style:flat}.phone-front{transform:translateZ(1px)}.phone-back{transform:rotateY(180deg) translateZ(1px)}.phone-back-hit{position:absolute;left:285px;top:147px;width:364px;height:526px;background:transparent!important;border:0;padding:0;border-radius:32px;cursor:grab}
#rig[data-device=x] .glass{isolation:isolate}.glass.scanning:after{content:'';position:absolute;left:0;right:0;top:0;height:28%;background:linear-gradient(transparent,#a7ffff88);border-bottom:2px solid #e2ffff;box-shadow:0 4px 20px #80ffff99;pointer-events:none;animation:scan-pass 850ms ease-in-out both}.glass.scanning>*{animation:scan-reveal 700ms ease-out both}@keyframes scan-pass{from{transform:translateY(-110%)}to{transform:translateY(470%)}}@keyframes scan-reveal{from{clip-path:inset(0 0 100%)}to{clip-path:inset(0)}}
#rig[data-device=sun-moon] [data-motion="left-arm"]{transform-origin:248px 417px;transform:translateX(var(--rotom-left-arm-shift,0px)) rotate(calc(var(--rotom-left-unfold,0deg) + var(--arm-look,0deg)))}
#rig[data-device=sun-moon] [data-motion="right-arm"]{transform-origin:692px 356px;transform:translateX(var(--rotom-right-arm-shift,0px)) rotate(calc(var(--rotom-right-unfold,0deg) + var(--arm-look,0deg)))}
#rig[data-device=sun-moon] [data-motion="rear-stowed-left-arm"]{transform-origin:366px 404px;transform:translateX(var(--rotom-rear-left-exit,0px)) rotate(var(--rotom-rear-left-turn,0deg))}
#rig[data-device=sun-moon] [data-motion="rear-stowed-right-arm"]{transform-origin:574px 405px;transform:translateX(var(--rotom-rear-right-exit,0px)) rotate(var(--rotom-rear-right-turn,0deg))}
.rotom-awake .device-layer{animation:rotom-float 5s ease-in-out infinite}.rotom-awake [data-motion$="eye"]{transform:translate(var(--look-x,0px),var(--look-y,0px));transition:transform 120ms ease-out}.rotom-awake [data-motion="left-arm"]{transform-origin:248px 417px;transform:rotate(var(--arm-look,0deg));transition:transform 160ms}.rotom-awake [data-motion="right-arm"]{transform-origin:692px 356px;transform:rotate(var(--arm-look,0deg));transition:transform 160ms}.rotom-awake.reacting [data-motion="left-arm"]{animation:rotom-left-wave 900ms ease-in-out}.rotom-awake.reacting [data-motion="right-arm"]{animation:rotom-right-wave 900ms ease-in-out}.rotom-awake.reacting .rotom-lid{animation:rotom-lid-blink 900ms ease}@keyframes rotom-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes rotom-left-wave{0%,100%{transform:rotate(0)}30%,65%{transform:rotate(18deg)}45%,80%{transform:rotate(7deg)}}@keyframes rotom-right-wave{0%,100%{transform:rotate(0)}30%,65%{transform:rotate(-15deg)}45%,80%{transform:rotate(-4deg)}}@keyframes rotom-lid-blink{0%,15%,45%,100%{opacity:0}24%,30%{opacity:1}}
.effects-reduced .phone-turn{transition:none}.effects-reduced .device-layer,.effects-reduced [data-motion],.effects-reduced .glass:after,.effects-reduced .glass>*{animation:none!important;transition:none!important}.effects-reduced .glass:after{display:none}
.phone-turn.slide-turn{transition:none}
#rig[data-device=sun-moon] [data-motion=antenna]{transform-origin:410px 195px}
#rig[data-device=sun-moon] [data-motion=left-foot]{transform-origin:337px 605px}
#rig[data-device=sun-moon] [data-motion=right-foot]{transform-origin:603px 605px}
.rotom-awake [data-motion=antenna]{animation:rotom-antenna 4.8s ease-in-out infinite}
.rotom-awake [data-motion=left-foot]{animation:rotom-toe 3.8s ease-in-out infinite}
.rotom-awake [data-motion=right-foot]{animation:rotom-toe 3.8s ease-in-out -1.9s infinite reverse}
.rotom-awake .rotom-lid{animation:rotom-idle-blink 6.4s linear infinite}
#rig.rotom-awake[data-emotion=curious] .device-layer{animation:rotom-curious 1.5s ease-in-out}
#rig.rotom-awake[data-emotion=surprised] .device-layer{animation:rotom-surprise 1.5s ease-out}
#rig.rotom-awake[data-emotion=curious] [data-motion$=eye]{transform:translate(4px,-3px)}
#rig.rotom-awake[data-emotion=surprised] [data-motion$=eye]{transform-box:fill-box;transform-origin:center;transform:scale(.78)}

/* Pixel-native scrolling and effect controls. */
.device-native #generations,.screen-content{scrollbar-width:thin;scrollbar-color:#dc4056 #111820}
.screen-content::-webkit-scrollbar,.device-native #generations::-webkit-scrollbar{width:12px;height:12px}
.screen-content::-webkit-scrollbar-track,.device-native #generations::-webkit-scrollbar-track{background:#111820;border:2px solid #34414b}
.screen-content::-webkit-scrollbar-thumb,.device-native #generations::-webkit-scrollbar-thumb{background:#dc4056;border:2px solid #f5c2a8;box-shadow:inset 0 0 0 2px #8d2338}
.screen-content::-webkit-scrollbar-button,.device-native #generations::-webkit-scrollbar-button{display:none}
#slide-handle{transform-origin:center;transition:filter 100ms}
.effect-controls{max-width:700px}
.effect-controls button{min-width:126px;border:3px solid #5b2834;border-radius:2px;background:#c83d55;color:#fff7da;box-shadow:inset 0 0 0 2px #f06a72,4px 4px 0 #140b12;font:11px/1.2 Departure,monospace;text-transform:uppercase}
.effect-controls button::before{content:'◆';margin-right:8px;color:#7ee8fa}
.effect-controls button:hover:not(:disabled){border-color:#fff0a6;transform:translate(-1px,-1px);box-shadow:inset 0 0 0 2px #f06a72,6px 6px 0 #140b12}
.effect-controls button[aria-pressed=true]{background:#182d49;color:#7ee8fa;box-shadow:inset 0 0 0 3px #0b1524,2px 2px 0 #140b12}
.effect-controls button:disabled{filter:grayscale(.7);opacity:.55}
.effect-status{font:11px Departure,monospace;color:#ffd966;text-shadow:2px 2px #090b12}
#rig.rotom-awake[data-emotion=surprised] [data-motion=antenna]{animation:rotom-antenna-jolt 1.5s ease-out}
#rig.rotom-awake[data-emotion=curious] [data-motion=left-arm],#rig.rotom-awake[data-emotion=curious] [data-motion=right-arm]{animation:none;transform:rotate(-7deg)}
#rig.rotom-awake[data-emotion=surprised] [data-motion=left-arm]{animation:rotom-startle-left 1.5s ease-out}
#rig.rotom-awake[data-emotion=surprised] [data-motion=right-arm]{animation:rotom-startle-right 1.5s ease-out}
@keyframes rotom-antenna{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(2deg)}}
@keyframes rotom-toe{0%,65%,100%{transform:rotate(0)}80%{transform:rotate(7deg)}}
@keyframes rotom-idle-blink{0%,90%,96%,100%{opacity:0}92%,94%{opacity:1}}
@keyframes rotom-curious{0%,100%{transform:translateY(0) rotate(0)}35%,70%{transform:translateY(-5px) rotate(-4deg)}}
@keyframes rotom-surprise{0%,100%{transform:translateY(0)}18%{transform:translateY(-18px)}35%{transform:translateY(3px)}55%{transform:translateY(-5px)}}
@keyframes rotom-antenna-jolt{0%,100%{transform:rotate(0)}18%{transform:rotate(8deg)}36%{transform:rotate(-5deg)}55%{transform:rotate(2deg)}}
@keyframes rotom-startle-left{0%,100%{transform:rotate(0)}18%,45%{transform:rotate(22deg)}}
@keyframes rotom-startle-right{0%,100%{transform:rotate(0)}18%,45%{transform:rotate(-20deg)}}
/* X/Y uses the same cyan glass while compact and extended. Hidden content must
   not leave an opaque black rectangle across the compact card's luminous seam. */
#rig[data-device=x]{--screen-ink:#123d52;--screen-dim:#235368;--screen-tag:#235368;--selected-ink:#123d52;--selected:#e0fcff99}
#rig[data-device=x] .glass{background:linear-gradient(135deg,#ecffff55,#74dafa44);box-shadow:inset 0 0 20px #b5fbff66;color:var(--screen-ink)}
#rig[data-device=x] .screen-heading,#rig[data-device=x] .screen-nav{border-color:#43859c88}
#rig[data-device=x] .screen-nav button{background:#e0fcff99;color:#123d52}
#rig[data-device=x] .screen-row:not([aria-current=true]){background:#123d52;color:#f4fdff}
#rig[data-device=x] .screen-row:not([aria-current=true]) span:last-child{color:#c8f4ff}
#rig[data-device=x] .glass.off{background:linear-gradient(135deg,#ecffff55,#74dafa44)!important;box-shadow:inset 0 0 20px #b5fbff66!important}
#rig[data-device=sword-shield] .glass.off{background:#273b42!important;box-shadow:inset 0 0 16px #9dd8de22!important}
#rig[data-device=scarlet-violet] .glass.off{background:#3d302d!important;box-shadow:inset 0 0 16px #f3b09a22!important}
#rig[data-device=sun-moon] .phone-back-hit{left:242px;top:192px;width:454px;height:431px}

.embedded-device header,.embedded-device footer,.embedded-device .device-title,.embedded-device #asset-panel{display:none!important}
.embedded-device main{padding-top:0;max-width:1120px}
.embedded-device #generations{padding-top:10px;scroll-margin-top:12px}
.embedded-device #stage{width:100%;margin-top:0}
.embedded-device .opening{margin-top:0}
.embedded-device #status{margin-bottom:8px}

/* Production-native controls use one chunky handheld language. */
.device-native #slide-track{height:64px;border:3px solid var(--accent);border-radius:4px;background:repeating-linear-gradient(90deg,#101722 0 14px,#151f2d 14px 28px);box-shadow:inset 0 0 0 2px #05080d,6px 6px 0 #05070b;overflow:visible}
.device-native #slide-track::before{content:"";position:absolute;inset:8px;border:1px dashed #ffffff24;pointer-events:none}
.device-native #slide-label{color:#c8d1df;font-size:12px;letter-spacing:.06em;text-shadow:2px 2px #05070b}
.device-native #slide-handle{top:5px;left:6px;width:50px;min-height:50px;border:3px solid #111722;border-radius:50%;background:linear-gradient(#e34858 0 44%,#111722 44% 56%,#f4f1df 56%);color:#111722;box-shadow:3px 4px 0 #05070b;transition:filter 100ms,box-shadow 100ms}
.device-native #slide-handle::before{content:"";position:absolute;inset:18px;border:3px solid #111722;border-radius:50%;background:#f4f1df}
.device-native #slide-handle span{position:relative;z-index:1;color:transparent}
.device-native #slide-handle:hover{filter:brightness(1.12)}.device-native #slide-handle:active{box-shadow:1px 2px 0 #05070b}
.device-native #slide-handle{width:56px;min-height:56px;top:1px;background-color:transparent;background-image:url('/logos/pokeball-sprites.png');background-repeat:no-repeat;background-size:249px 147px;background-position:-5px -5px;border:0;border-radius:0;box-shadow:none;image-rendering:pixelated}.device-native #slide-handle::before{display:none}.device-native #slide-handle:active{box-shadow:none;filter:brightness(.9)}
.device-native button.phone-back-hit{border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;padding:0}
.device-native .opening-tools button{border:1px solid transparent;border-bottom-color:#59626d;border-radius:0;background:#0b111bcf;color:#bdc8d7;font-family:Departure,monospace}.device-native .opening-tools button:hover{border-color:var(--accent);color:#fff}
.button-tooltip{position:fixed;z-index:202;width:min(290px,calc(100vw - 32px));padding:10px 12px;border:2px solid var(--time-accent,#f9e59c);border-radius:0;background:var(--time-deep,#080b10);color:#fff;box-shadow:4px 4px 0 #0009;font:12px/1.4 Departure,monospace;pointer-events:none}.button-tooltip strong,.button-tooltip span{display:block}.button-tooltip strong{color:var(--time-accent,#f9e59c);font-weight:400;text-transform:uppercase}.button-tooltip span{margin-top:5px;color:#fff;line-height:1.5}
.callout-line{position:fixed;z-index:201;inset:0;width:100vw;height:100vh;overflow:visible;pointer-events:none}.callout-line polyline{fill:none;stroke:var(--time-accent,#f9e59c);stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(2px 2px 0 #0008)}
.device-native #status{color:#fff;margin-block:16px 30px;text-shadow:2px 2px #05070b}
.device-native #generations{gap:8px;padding-block:18px}
.device-native .opening-tools{gap:12px;margin-top:14px;padding-inline:8px}.device-native .opening-tools button{padding:9px 12px;color:#fff}
.device-native .opening{position:relative;z-index:10;margin-top:18px}
body[data-generation=red] .device-native .opening{margin-top:88px;padding-bottom:12px}
body[data-generation=red] .device-native #stage{overflow:visible}
.device-native .effect-controls{gap:14px;margin-top:18px;margin-bottom:32px;padding-inline:12px}
#rig[data-device=gold] .glass:not(.off),#rig[data-device=ruby] .glass:not(.off),#rig[data-device=diamond] .glass:not(.off),#rig[data-device=sun-moon] .glass:not(.off){visibility:visible;opacity:1;background:#0c151a;isolation:isolate;z-index:5}
.device-native #generations button{min-height:44px}
@media(max-width:700px){.device-native #generations button{min-height:48px}}