/* DY-01: category display keys and compact instrument controls. */
.device-page { height: auto; min-height: 100dvh; overflow: auto; }
.device-page .keyboard-main { position: relative; inset: auto; grid-template-columns: minmax(0,1fr); min-height: 100vh; min-height: 100dvh; padding: 24px 12px 64px; overflow: visible; }
.device-stage { position: relative; width: 364px; height: 658px; }
.device-page .keyboard-stack { position: absolute; top: 0; left: 0; transform: scale(var(--device-scale,1)); transform-origin: top left; transition: none; }
.device-page .keyboard-stack,.device-page .keyboard { height: var(--device-height,658px); }
.device-page .keyboard-stack { --keyboard-scale-height: 1; }
.device-page .keyboard-display { top: 76px; height: 280px; }
.device-page .app-card { grid-template-columns: 144px minmax(0,1fr); column-gap: 24px; padding: 12px; }
.device-page .app-card-heading { display: flex; align-items: flex-start; flex-direction: column; gap: 8px; }
.device-page .app-card-icon { width: 22px; height: 22px; background: none; border: 0; place-items: start; }
.icon-lightweight { --key-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2 8h3V6h2v12H5v-2H2zm20 0v8h-3v2h-2V6h2v2h3zM7 11h10v2H7z'/%3E%3C/svg%3E"); }
.device-page .app-card h2,.device-page .app-card.is-support h2 { font-size: 22px; line-height: 1.12; letter-spacing: -.04em; overflow-wrap: anywhere; }
.device-page .app-card[data-app="lightweight"] h2 { font-size: 18px; }
.device-page .app-card p { font-size: 9px; line-height: 1.6; margin: 12px 0; }
.device-page .app-card-action { min-height: 32px; padding: 4px 5px; font-size: 9px; }
.device-page .app-card-visual { padding-top: 25px; }
.device-page .app-card-visual canvas { width: 100%; max-width: none; }
.device-page .app-likes { right: 10px; top: 8px; }
.device-page .like-button { font-size: 8px; }
/* Three narrow graphite mode keys sit on the case between screen and app bank. */
/* Balance visible edges around the raised keycaps, including their recessed wells. */
.device-page .device-bank { top: 414px; height: auto; padding: 16px 13px 14px; border-radius: 20px; overflow: visible; }
.category-buttons { position: absolute; top: 358px; left: 43px; width: 280px; display: grid; grid-template-columns: repeat(3,84px); gap: 14px; height: 54px; }
.category-key { position: relative; width: 84px; height: 54px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #d2d6cb; font: 400 9px/1 Silkscreen,ui-monospace,monospace; text-transform: uppercase; cursor: pointer; touch-action: manipulation; }
.category-key::before { content: ''; position: absolute; inset: 11px -3px 11px 7px; border-radius: 6px; background: #30362d; box-shadow: inset 0 2px 3px #0008,0 1px 0 #ffffff45; }
.category-key span { position: absolute; inset: 14px 0 14px 10px; display: grid; place-items: center; padding-left: 8px; border: 1px solid #72796b; border-radius: 3px; background: repeating-linear-gradient(0deg,#ffffff04 0 1px,transparent 1px 3px),linear-gradient(165deg,#454843,#363a34 48%,#2b2e2a); box-shadow: inset 0 1px 0 #ffffff25,inset 0 -1px 1px #0005,0 2px 0 #191d18,0 3px 3px #0004; text-shadow: 0 1px 1px #0008; }
.category-key[aria-pressed="true"] span { color: #dbffb8; text-shadow: 0 0 4px #b6ed7e55; transform: translateY(1px); background: linear-gradient(165deg,#30362d,#272d24); box-shadow: inset 0 1px 3px #0005,0 1px 0 #191d18; }
.category-key span::before { content: ""; position: absolute; left: 6px; top: calc(50% - 6px); width: 3px; height: 12px; border-radius: 1px; background: #18271c; box-shadow: inset 0 1px 2px #000b,0 1px 0 #ffffff20; }
.category-key[aria-pressed="true"] span::before { background: #c6e5a7; box-shadow: 0 0 5px #b6ed7e88,inset 0 1px 0 #efffce; }
.category-key:disabled span::before { background: #18271c; box-shadow: inset 0 1px 2px #000b,0 1px 0 #ffffff20; }
/* German labels use the full key width while preserving the device footprint. */
:root:lang(de) .category-buttons { left: 42px; }
:root:lang(de) .category-key span { inset-inline: 0; padding-left: 12px; }
:root:lang(de) .category-key::before { inset-inline: -3px; }
:root:lang(de) .device-page .app-card.is-support h2 { font-size: 16px; }
.category-key:active span { transform: translateY(2px); }
.category-key:focus-visible { outline: none; }
.category-key:focus-visible span { outline: 2px solid var(--focus); outline-offset: 3px; }
.category-key:disabled { cursor: default; }
.category-key:disabled span { color: #90978c; text-shadow: none; }
.bank-pager { display: flex; align-items: center; justify-content: center; gap: 16px; height: 54px; margin-top: 8px; color: #c4d2bd; font: 9px/1 ui-monospace,monospace; letter-spacing: .08em; }
.bank-pager[hidden],.app-display-key[hidden] { display: none; }
.bank-pager button { width: 54px; height: 54px; padding: 0; border: 0; border-radius: 5px; background: none; color: #e2ebd9; font: 24px/1 ui-monospace,monospace; cursor: pointer; touch-action: manipulation; }
.bank-pager button:disabled { opacity: .3; cursor: default; }
.bank-pager button:focus-visible { outline: 2px solid #c3ffd2; }
.app-key-grid { display: grid; grid-template-columns: repeat(3,84px); gap: 14px; }
.app-display-key { height: 54px; border-radius: 10px; }
.app-display-key::before { border-radius: 12px; inset: -3px; }
.app-display-key .keycap { border-radius: 9px; background: linear-gradient(145deg,#465045,#1d241e); border-color: #6c766860; box-shadow: inset 1px 1px 1px #ffffff20,inset -2px -3px 4px #0006,0 5px 0 #111810,0 8px 5px #0007; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.app-display-key .keycap::after { content: ''; position: absolute; inset: 3px; border-radius: 5px; pointer-events: none; background: repeating-linear-gradient(0deg,transparent 0 2px,#00000018 2px 3px); }
.app-display-key .slot-icon { width: 22px; height: 22px; color: #c4ddc0; opacity: .9; filter: drop-shadow(0 0 3px #bcff9d35); }
.app-display-key .slot-label { color: #c4ddc0; font: 7px/1 Silkscreen,monospace; letter-spacing: -.06em; }
.slot-number { position: absolute; top: 4px; left: 5px; color: #8b9d80; font: 5px/1 ui-monospace,monospace; }
.app-display-key.is-selected .keycap { transform: translateY(0); border-color: #d2e99780; background: linear-gradient(145deg,#99b96a,#536c36); box-shadow: inset 1px 1px 3px #0004,0 1px 0 #1b2610,0 3px 3px #0005; }
.app-display-key.is-selected .slot-icon,.app-display-key.is-selected .slot-label { color: #f2ffdb; }
.app-display-key.is-selected .slot-number { color: #d1e8b2; }
.app-display-key:is(:active,.is-pressed) .keycap { transform: translateY(2px); }
.app-display-key:disabled .keycap { background: #222822; opacity: .48; }
.app-display-key:disabled { cursor: default; }
.app-display-key:focus-visible { outline: none; }
.app-display-key:focus-visible .keycap { outline: 2px solid #c5f597; outline-offset: 2px; }
@media(prefers-reduced-motion:reduce) { .device-page .keyboard-stack { transition: none; } }
/* Compact utility caps use their full key area instead of the large-key inset. */
.device-controls .keyboard-key { pointer-events: auto; }
.device-controls .keyboard-key::before { background: var(--key-well); box-shadow: inset 0 2px 5px #000b,0 1px 0 #ffffff20; }
.device-controls .keyboard-key::after { display: none; }
.device-controls .keycap { inset: 0; }
.app-display-key:disabled .slot-icon,.app-display-key:disabled .slot-label { display: none; }

.device-page .device-rail { top: 19px; left: 26px; height: 34px; }
.device-page .device-name strong { font-size: 17px; }
.device-controls .key-home svg { width: 20px; height: 20px; }
.key-row.device-controls { margin-top: 0; height: 34px; }
.device-controls { position: absolute; top: 19px; left: auto; right: 31px; gap: 5px; align-items: center; }
.device-controls::before { content: ''; position: absolute; inset: -4px 41px -4px -5px; border-radius: 7px; background: #292e2d; box-shadow: inset 0 2px 4px #0009,0 1px 0 #ffffff55; }
.device-controls .keyboard-key,.device-controls .key-sound { width: 30px; height: 30px; flex-basis: 30px; border-radius: 4px; color: #acb5b1; }
.device-controls .keyboard-key::before { inset: 0; border: 0; border-radius: 4px; background: #161a19; box-shadow: none; }
.device-controls .keyboard-key .keycap { border-radius: 4px; border: 1px solid #7f8b8033; color: #aeb8b2; background: linear-gradient(155deg,#505953,#343c37); transform: translateY(-1px); box-shadow: inset 0 1px 0 #ffffff14,0 2px 0 #171c18,0 3px 3px #0006; }
.device-controls .key-symbol { width: 14px; height: 14px; }
.device-controls svg,.display-standby svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.device-controls .keyboard-key .keycap::after { content: ''; position: absolute; width: 7px; height: 2px; bottom: 3px; left: calc(50% - 3.5px); border-radius: 1px; background: #18271c; box-shadow: inset 0 1px 1px #0008; }
.device-controls .keyboard-key[aria-pressed="true"] .keycap,.device-controls .keyboard-key[aria-checked="true"] .keycap { transform: translateY(0); color: #e0e8dc; background: linear-gradient(155deg,#414b43,#303932); box-shadow: inset 0 1px 3px #0005,0 1px 0 #171c18; }
.device-controls .keyboard-key[aria-pressed="true"] .keycap::after,.device-controls .keyboard-key[aria-checked="true"] .keycap::after { background: #c6e5a7; box-shadow: 0 0 5px #b6ed7e88; }
.device-controls .key-support[aria-pressed="true"] .keycap::after { background: #dce9eb; box-shadow: 0 0 5px #d4e8ee66; }
.device-controls .key-home { order: 4; margin-left: 0; width: 60px; flex-basis: 60px; height: 60px; border-radius: 50%; }
.device-controls .key-home::before { inset: 5px; border-radius: 50%; background: #323632; box-shadow: inset 0 2px 4px #0008,0 1px 0 #fff5; }
.device-controls .key-home .keycap,.device-controls .key-home[aria-pressed="true"] .keycap { inset: 8px; border-radius: 50%; border-color: #b56b5860; color: #f0d3bb; background: linear-gradient(110deg,#a95a46,#834533); box-shadow: inset 1px 1px 1px #e4b29455,0 2px 0 #532c23,0 3px 3px #0007; }
.device-controls .key-home .keycap::after { background: #b88953; }
.device-controls .key-home[aria-pressed="true"] .keycap::after { background: #ffe1ac; box-shadow: 0 0 5px #ffc981; }
.device-controls .keyboard-key:is(:active,.is-pressed) .keycap { transform: translateY(2px); }
.device-controls .keyboard-key:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
.device-controls .keyboard-key:disabled { opacity: .55; cursor: default; }
.device-controls .keyboard-key:disabled .keycap::after { background: #18271c; box-shadow: none; }
.device-page .keyboard-display { top: 76px; }
.device-page .display-home { justify-content: flex-start; padding-top: 18px; }
.device-page .display-wordmark { margin-bottom: 27px; color: #b3c5b7; font-size: 9px; }
.device-page .display-home h1 { position: relative; z-index: 1; }
.device-page .display-home p { max-width: 235px; margin-top: 15px; font-size: 10px; line-height: 1.7; }
.category-emblem { position: absolute; top: 13px; right: 13px; width: 39px; height: 39px; opacity: .4; color: #bfffcb; }
.category-home-actions { display: grid; grid-template-columns: minmax(0,2.65fr) minmax(0,1fr); gap: 6px; margin-top: auto; padding-bottom: 3px; }
.device-page .device-home-cta { justify-content: center; min-width: 0; min-height: 36px; padding: 6px 4px; white-space: nowrap; cursor: pointer; }
.device-home-cta-primary { color: #ffe6a0; border-color: #ffe28a66; background: #ffe28a0d; box-shadow: 0 0 8px #ffd04c12; text-shadow: 0 0 5px #ffe28a38; }
.device-home-cta-primary:hover { color: #fff0c6; background: #ffe28a20; border-color: #ffe28a99; box-shadow: 0 0 12px #ffd04c20; }
.display-home[data-home-category="games"] .category-emblem { color: #a7eaff; }
.display-home[data-home-category="games"] h1 { color: #d6f6ff; }
.display-home[data-home-category="tools"] .category-emblem { color: #ffe1a1; }
.display-home[data-home-category="tools"] h1 { color: #fff0ce; }
/* A single cool reflection sweeps across the metal shell. */
.keyboard.support-shimmer::before { background: linear-gradient(110deg,transparent 38%,#ecf8ff18 45%,#f4fcff88 50%,#ecf8ff18 55%,transparent 62%); background-size: 250% 100%; animation: support-shimmer 1.1s ease-in-out both; }
@keyframes support-shimmer { 0% { opacity: 0; background-position: 100% 0; } 18%,75% { opacity: .8; } 100% { opacity: 0; background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .keyboard.support-shimmer::before { animation: none; opacity: 0; } }
.display-standby { position: absolute; inset: 8px; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: 14px; background: #080d09; color: #778e7d; font: 8px/1 Silkscreen,monospace; }
.display-standby svg { width: 24px; height: 24px; opacity: .5; }
.is-standby .display-home,.is-standby .app-card { opacity: 0; pointer-events: none; }

.crt-boot { display: none; position: absolute; inset: 8px; z-index: 6; pointer-events: none; border-radius: 13px; background: #dfffe4; }
.is-booting .crt-boot { display: block; animation: crt-start .65s ease-out both; }
.is-booting .display-home { animation: crt-content .65s ease-out both; }
@keyframes crt-start { 0% { opacity: 1; transform: scale(.015,.004); } 30% { opacity: .9; transform: scale(1,.007); } 65% { opacity: .18; transform: scale(1,1); } 100% { opacity: 0; transform: scale(1,1); } }
@keyframes crt-content { 0%,32% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .is-booting .crt-boot { display: none; animation: none; } .is-booting .display-home { animation: none; } }

/* Radio: one live station controlled by the hardware button. */
.device-controls .key-home { order: 5; }
.radio-panel { position: absolute; inset: 8px; z-index: 4; padding: 12px; display: flex; flex-direction: column; color: #cde6d2; font-family: Silkscreen,monospace; }
.is-radio-open .display-home { opacity: 0; pointer-events: none; }
.radio-topline,.radio-credit { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 7px; line-height: 1.5; }
.radio-topline { color: #9daf9e; }
.radio-status::before { content: '●'; padding-right: 5px; color: #718377; }
[data-radio-state="playing"] .radio-status { color: #dbefb4; }
[data-radio-state="playing"] .radio-status::before { color: #d6fba3; text-shadow: 0 0 6px #d6fba399; }
.radio-panel h2 { margin: 14px 0 12px; font: 22px/1.12 Silkscreen,monospace; letter-spacing: -.04em; font-weight: 400; }
.radio-station { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 43px; padding: 7px 9px; background: #b6ffc00a; border: 1px solid #accbb342; color: inherit; font-family: inherit; text-align: left; cursor: pointer; border-radius: 3px; touch-action: manipulation; }
.radio-channel { font-size: 20px; color: #adc4ae; }
.radio-station strong { display: block; font-size: 10px; font-weight: 400; }
.radio-station small { display: block; font-size: 6px; margin-top: 4px; color: #90a393; }
.radio-station-selected { margin-left: auto; font-size: 6px; color: #a4bc9f; }
.radio-station.is-tuned { background: #c7ec9220; border-color: #c5ee9870; color: #e3f7c6; }
.radio-signal { height: 13px; display: flex; align-items: end; gap: 3px; margin-top: 8px; }
.radio-signal i { width: 5px; height: 2px; background: #bce3bb; opacity: .3; }
[data-radio-state="playing"] .radio-signal i { opacity: .7; height: 9px; animation: radio-bars .85s ease-in-out infinite alternate; }
[data-radio-state="playing"] .radio-signal i:nth-child(3n) { animation-delay: -.35s; height: 5px; }
[data-radio-state="playing"] .radio-signal i:nth-child(2n) { animation-delay: -.65s; height: 12px; }
.radio-help { font-size: 6px; line-height: 1.5; margin: 6px 0 7px; color: #a4bca9; }
.radio-volume { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 7px; }
.radio-volume input { flex: 1; min-width: 0; height: 24px; margin: 0; accent-color: #bddbb7; cursor: pointer; }
.radio-volume output { min-width: 20px; text-align: right; }
.radio-credit { margin-top: auto; font-size: 6px; padding-top: 7px; color: #91a896; }
.radio-credit a { color: inherit; text-decoration: none; }
.radio-station:focus-visible,.radio-credit a:focus-visible { outline: 1px solid #d4f3b4; outline-offset: 3px; }
[data-radio-state="playing"] .key-radio .keycap::after { background: #caedaa; box-shadow: 0 0 5px #caedaa80; }
@keyframes radio-bars { to { transform: scaleY(.25); } }
@media (prefers-reduced-motion: reduce) { [data-radio-state="playing"] .radio-signal i { animation: none; } }
.is-radio-open .display-home,.is-radio-open .app-card { visibility: hidden; }

/* Radio: hardware playback toggle, one master mute, station display only. */
.radio-station { cursor: default; }
[data-radio-muted="true"] .radio-signal i { animation: none; height: 2px; opacity: .3; }
[data-radio-muted="true"] .radio-status::before { color: #718377; text-shadow: none; }

/* Radio: connection state is the primary display information. */
.radio-panel.is-connecting h2 { margin: 64px 0 14px; font-size: 22px; line-height: 1.25; }
.radio-panel.is-connecting .radio-help { max-width: 238px; margin: 0; font-size: 9px; line-height: 1.7; }
/* Account controls share the same display and navigation as every app preview. */
.device-page .display-home.is-personal h1 { font-size: 18px; overflow-wrap: anywhere; }
.device-account-panel { position: absolute; inset: 8px; z-index: 4; padding: 10px; display: flex; flex-direction: column; gap: 10px; color: #cde6d2; font: 9px/1.5 Silkscreen,ui-monospace,monospace; }
.device-account-panel[hidden] { display: none; }
.device-account-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 8px; }
.device-account-top button,.device-account-tabs button,.device-account-settings button,.device-account-link { background: transparent; border: 1px solid #baffca40; border-radius: 3px; color: #c5fbd3; font: inherit; padding: 6px; cursor: pointer; }
.device-account-top button { min-height: 26px; }
.device-account-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 0 3px 8px 0; scrollbar-width: thin; scrollbar-color: #789581 #122218; }
.device-account-panel h2 { font: 400 16px/1.3 Silkscreen,ui-monospace,monospace; margin: 0 0 12px; overflow-wrap: anywhere; }
.device-account-panel p { margin: 8px 0; }
.device-account-panel form { display: flex; flex-direction: column; gap: 8px; }
.device-account-panel [hidden] { display: none !important; }
.device-account-panel label { display: flex; flex-direction: column; gap: 4px; }
.device-account-panel input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 34px; padding: 6px; border: 1px solid #baffca55; border-radius: 3px; background: #080f0b; color: #d7f4df; font: 16px/1.2 ui-monospace,monospace; }
.device-account-panel :is(button,input,a):focus-visible { outline: 2px solid #e0f7c9; outline-offset: 2px; }
.device-account-panel button:disabled { opacity: .5; cursor: wait; }
.device-account-panel .app-card-action { justify-content: center; min-height: 34px; cursor: pointer; }
.device-account-panel .device-account-fine { color: #a9c3b0; font-size: 8px; }
.device-account-panel a { color: #d8ebaf; }
.device-account-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.device-account-tabs button { flex: 1; }
.device-account-tabs button[aria-pressed="true"] { color: #ffe6a0; border-color: #ffe28a88; background: #ffe28a0d; }
.device-account-notice { border-left: 2px solid #ffe6a0; padding: 6px 8px; color: #ffe6a0; }
.device-account-notice[data-kind="error"] { color: #ffcfbc; border-color: #ffcfbc; }
.device-account-email { overflow-wrap: anywhere; color: #a9c3b0; }
.device-account-settings { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.is-account-open .display-home,.is-account-open .app-card { visibility: hidden; }
.device-account-panel h2:focus { outline: none; }
.device-account-panel:has([data-account-view="auth"]:not([hidden])) h2 { font-size: 12px; margin-bottom: 6px; }
.device-account-tabs { margin-bottom: 6px; }
.device-account-tabs button { padding-block: 4px; }
[data-account-view="auth"] form { gap: 6px; }
[data-account-view="auth"] label { gap: 2px; }
[data-account-view="auth"] input { min-height: 30px; padding-block: 4px; }
[data-account-view="auth"] .app-card-action { min-height: 30px; }
/* Portfolio updates live in the same display as apps and account settings. */
.device-changelog-panel { position: absolute; inset: 8px; z-index: 4; padding: 10px; display: flex; flex-direction: column; gap: 8px; color: #cde6d2; font: 9px/1.5 Silkscreen,ui-monospace,monospace; }
.device-changelog-panel[hidden] { display: none; }
.is-changelog-open .display-home,.is-changelog-open .app-card { visibility: hidden; }
.device-changelog-panel h2 { margin: 0; font: 400 16px/1.25 Silkscreen,ui-monospace,monospace; }
.device-changelog-panel h2:focus { outline: none; }
.changelog-filter { display: flex; align-items: center; gap: 10px; }
.changelog-filter select { min-height: 28px; min-width: 0; flex: 1; padding: 4px; border: 1px solid #baffca55; border-radius: 3px; background: #101d15; color: #cde6d2; font: inherit; }
.changelog-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #789581 #122218; }
.changelog-entry { border-top: 1px solid #baffca30; padding: 10px 0; }
.changelog-entry:first-child { border-top: 0; padding-top: 2px; }
.changelog-entry-meta { color: #a8c5b1; font-size: 8px; }
.changelog-entry h3 { margin: 4px 0 7px; color: #e0eccf; font: 400 10px/1.5 Silkscreen,ui-monospace,monospace; }
.changelog-entry ul { margin: 0; padding-left: 13px; font-size: 9px; line-height: 1.65; }
.changelog-entry li + li { margin-top: 5px; }
.changelog-entry a { color: #ffe6a0; }
.device-changelog-panel :is(button,a,select,.changelog-scroll):focus-visible { outline: 2px solid #d9efb8; outline-offset: 2px; }
.changelog-unread { position: absolute; width: 4px; height: 4px; top: 3px; right: 3px; border-radius: 50%; background: #ffe6a0; box-shadow: 0 0 4px #ffe6a0aa; }
.changelog-unread[hidden] { display: none; }

.device-about-panel { position:absolute; inset:8px; z-index:4; padding:10px; display:flex; flex-direction:column; gap:10px; color:#cde6d2; font:9px/1.7 Silkscreen,ui-monospace,monospace; }
.device-about-panel[hidden] { display:none; }
.is-about-open .display-home,.is-about-open .app-card { visibility:hidden; }
.device-about-panel h2 { margin:0; font:400 16px/1.25 Silkscreen,ui-monospace,monospace; }
.device-about-panel h2:focus { outline:none; }
.device-about-scroll { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-right:4px; scrollbar-width:thin; scrollbar-color:#789581 #122218; }
.device-about-scroll p { margin:0 0 12px; }
.device-about-scroll p:last-child { margin-bottom:2px; }
.device-about-promise { color:#e0eccf; }
.device-about-contact { padding-top:10px; border-top:1px solid #baffca30; }
.device-about-contact a { color:#ffe6a0; display:inline-flex; align-items:center; min-height:30px; overflow-wrap:anywhere; }
.device-about-panel :is(button,a,.device-about-scroll):focus-visible { outline:2px solid #d9efb8; outline-offset:2px; }

/* Support and power have their own wells, apart from the utility bank. */
.device-controls:not(.device-power-controls) { right: 137px; }
.device-controls:not(.device-power-controls)::before { inset: -4px -5px; }
.key-row.device-power-controls { top: 6px; right: 16px; height: 60px; gap: 6px; }
.device-power-controls::before { display: none; }
/* Leave breathing room between the circular power well and the case edge. */
.device-power-controls .key-home { margin-left: 0; left: 6px; top: 0; }
.device-power-controls .key-support { width: 34px; height: 34px; flex-basis: 34px; }
.device-power-controls .key-support::before { inset: -3px; border-radius: 8px; background: #323632; box-shadow: inset 0 2px 4px #0008,0 1px 0 #fff5; }
.device-power-controls .key-support .keycap,.device-power-controls .key-support[aria-pressed="true"] .keycap { border-radius: 5px; border-color: #d3aa4960; color: #392607; background: linear-gradient(120deg,#e2ba51,#b88727); box-shadow: inset 1px 1px 1px #fff0aa70,0 2px 0 #715015,0 3px 3px #0007; }
.device-power-controls .key-support[aria-pressed="true"] .keycap::after { background: #fff0b5; box-shadow: 0 0 5px #ffe095; }

.device-secret { display: grid; place-items: center; min-height: 34px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.device-secret:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.device-secret:disabled { cursor: default; }
.snake-panel { position: absolute; inset: 8px; z-index: 5; padding: 6px 10px; display: flex; flex-direction: column; justify-content: space-between; gap: 5px; color: #cde6d2; background: #102017; font: 8px/1.4 Silkscreen,monospace; }
.is-snake-open .display-home { opacity: 0; pointer-events: none; }
.snake-top { display: flex; justify-content: space-between; align-items: center; }
.snake-panel button { border: 1px solid #baffca55; border-radius: 3px; background: #162d20; color: #d2f6d9; font: inherit; cursor: pointer; }
.snake-top button { padding: 4px 6px; min-height: 27px; }
.snake-panel canvas { display: block; width: 100%; aspect-ratio: 12 / 7; min-height: 0; image-rendering: pixelated; touch-action: none; border: 1px solid #95c8a344; }
.snake-status { margin: 0; min-height: 12px; font-size: 7px; }
.snake-controls { display: flex; gap: 5px; }
.snake-controls button { min-width: 33px; min-height: 32px; padding: 4px; font-size: 12px; }
.snake-controls [data-snake-play] { flex: 1; font-size: 8px; }
.snake-panel :focus-visible { outline: 2px solid #e4fac3; outline-offset: 2px; }
.display-home[data-home-category="vibes"] h1 { color: #eee1ff; }

.snake-panel::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg,transparent 0 2px,#0002 2px 3px); }

/* Zoom belongs to the workbench; all device geometry scales as one unit. */
.device-zoom { position: fixed; z-index: 10; right: 24px; bottom: 12px; display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--border-strong); border-radius: 9px; color: var(--text); background: var(--surface); box-shadow: 0 2px 8px #0000000b; font: 12px/1.2 ui-monospace,monospace; }
.device-zoom[hidden] { display: none; }
.device-zoom button { display: grid; place-items: center; min-width: 36px; min-height: 36px; border: 0; border-radius: 5px; padding: 6px; color: inherit; background: transparent; font: inherit; cursor: pointer; touch-action: manipulation; }
.device-zoom button[data-zoom-in],.device-zoom button[data-zoom-out] { font-size: 20px; }
.device-zoom button[data-zoom-fit] { margin-left: 3px; padding-inline: 10px; border-left: 1px solid var(--border); border-radius: 0 5px 5px 0; }
.device-zoom button:hover { background: var(--border); }
.device-zoom button:disabled { opacity: .35; cursor: default; }
.device-zoom button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.device-zoom output { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 38rem),(pointer: coarse) { .device-zoom { display: none; } }

.radio-consent { font: 12px/1.5 ui-sans-serif,system-ui,sans-serif; max-width: 36rem; }
.radio-consent[hidden] { display: none; }
.radio-consent p { margin: 0 0 10px; }
.radio-consent a { color: inherit; }
.radio-consent button { display: block; margin-top: 12px; }