:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#ff9b0c;background:#0c0b09}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:12px;background:radial-gradient(ellipse at center,#24211c,#080807)}main{width:min(1500px,100%)}.radio{position:relative;width:100%;aspect-ratio:1678/938;background:url('assets/home.png') center/100% 100% no-repeat;isolation:isolate;border-radius:22px;overflow:hidden;box-shadow:0 25px 65px #0009;container-type:inline-size}#clock{position:absolute;left:40%;top:7%;width:22%;height:7.5%;display:grid;place-items:center;background:#070400;font:bold 4.4cqw/1 'Courier New',monospace;letter-spacing:.3cqw;color:#ff9b00;text-shadow:0 0 12px #ff8b0040}#date{position:absolute;left:68.5%;top:8.6%;width:26.5%;height:4.7%;background:#070400;display:grid;place-items:center;font:bold 2cqw/1.1 'Courier New',monospace;letter-spacing:.03cqw;white-space:nowrap}.menu{position:absolute;left:6.6%;top:25%;width:26%;height:37.5%;display:flex;justify-content:center;flex-direction:column;gap:1.8cqw;background:repeating-linear-gradient(#020100 0 2px,#060301 2px 3px);font-size:1.6cqw;font-weight:700;line-height:1.4;padding:1cqw .5cqw}.menu:empty{display:none}.menu h1{font-size:1.65cqw;line-height:1.35;margin:0 0 .2cqw;text-decoration:underline;text-underline-offset:.3cqw}.menu p{margin:0;font-size:1.13cqw}.option{position:relative;padding-left:1.6cqw;min-height:2.1cqw}.option.focus::before{content:'>';position:absolute;left:0}.option.focus{color:#ffac27;text-shadow:0 0 9px #ff91002a}.option.active::after{content:' ●';font-size:.7em;color:#c47d22}#aside{position:absolute;left:68%;top:26%;width:27%;height:36%;padding:2.1cqw 1cqw;background:repeating-linear-gradient(#020100 0 2px,#060301 2px 3px);font-size:1.38cqw;font-weight:700;line-height:1.5;display:flex;justify-content:center;flex-direction:column}#aside:empty{display:none}#aside.success{font-size:1.9cqw;color:#ffad26}#caption{position:absolute;left:5%;right:5%;top:69.5%;height:4.7%;background:#030200;display:grid;place-items:center;font-size:1.8cqw;font-weight:bold;text-align:center}#caption:empty{display:none}#keys{position:absolute;left:6.55%;right:5.65%;top:83.6%;height:9.5%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2.1%}button{font-family:inherit;touch-action:manipulation}#keys button{background:linear-gradient(#242321,#080808 80%);border:0;border-radius:9px;margin:0;padding:.4cqw;color:#ff9a16;font-size:1.85cqw;font-weight:700;text-shadow:0 0 7px #ff8b0030;box-shadow:inset 0 1px #ffffff12;cursor:pointer;line-height:1.2}#keys button:hover:not(:disabled){background:linear-gradient(#3b3020,#100b04);color:#ffc367}#keys button:active:not(:disabled){box-shadow:inset 0 3px 10px #000;transform:translateY(1px)}#keys button:focus-visible{outline:2px solid #ffc367;outline-offset:-4px}#keys button:disabled{cursor:default}#keys svg{height:3.5cqw;width:3.5cqw;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linejoin:round}.status{display:flex;justify-content:space-between;padding:12px 5px;font-size:10px;letter-spacing:1px;color:#ae8146}details{border:1px solid #42301b;border-radius:8px;padding:12px;color:#bd945f;font-size:13px;background:#100d08}summary{cursor:pointer;color:#e3a24b}.test{display:flex;gap:24px;flex-wrap:wrap;margin-top:18px;align-items:center}select{background:#20180d;color:#ffb34e;border:1px solid #795020;padding:7px;border-radius:5px}input{accent-color:#ff9500}details p{line-height:1.6}#simulation{color:#ffc166}@media(max-width:600px){body{padding:3px}.status{font-size:7px;letter-spacing:0;padding:8px 3px}.radio{border-radius:10px}details{font-size:12px}.test{gap:12px}#keys button{border-radius:4px}}@media(prefers-reduced-motion:no-preference){#keys button{transition:background .15s}}
/* Preserve the original photographed keys. Only transparent hit areas sit above them. */
#keys button{background:transparent;border:0;box-shadow:none;color:transparent;text-shadow:none;border-radius:0;transition:none}
#keys button:hover:not(:disabled),#keys button:active:not(:disabled){background:transparent;color:transparent;box-shadow:none;transform:none}
#keys button:focus-visible{outline:1px solid #ffa328;outline-offset:-8px}
#keys svg{visibility:hidden}
/* For the two extra menus, reuse photographed MODE / SELECT / RESET keys. */
/* One immutable outer fascia for every page. Menu images are clipped inside. */
.radio{background-image:url('assets/home.png')!important}
#screen-art,#key-art{position:absolute;inset:0;pointer-events:none;background-position:center;background-size:100% 100%;background-repeat:no-repeat;z-index:-1}
#screen-art{clip-path:inset(20.2% 3.7% 25.7% 3.7% round 10px)}
/* Limit photographed key changes to the engraved amber legends, preserving surrounds. */
#key-art{clip-path:polygon(10% 86%,18% 86%,18% 91%,10% 91%,10% 86%,25% 86%,32% 86%,32% 91%,25% 91%,25% 86%,39% 86%,47% 86%,47% 91%,39% 91%,39% 86%,84% 86%,90% 86%,90% 91%,84% 91%,84% 86%,10% 86%)}
#key-art{clip-path:none;mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000);mask-size:8% 5%,8% 5%,8% 5%,8% 5%;mask-position:10.87% 90.53%,27.17% 90.53%,43.48% 90.53%,91.3% 90.53%;mask-repeat:no-repeat}
/* Use a complete original blank key face, avoiding fragments of baked-in labels. */
#key-art{display:none}
#keys button,#keys button:hover:not(:disabled),#keys button:active:not(:disabled){background-image:url('assets/home.png');background-size:760% 1052.6316%;background-position:60% 92.3757%;background-repeat:no-repeat;background-color:#090909;color:#ff9a16;text-shadow:0 0 7px #ff8b0030;box-shadow:none;border:0;border-radius:9px;transform:none}
#keys svg{visibility:visible}
#keys button:disabled{color:transparent}
#keys button:focus-visible{outline:1px solid #ffa328;outline-offset:-5px}
@media(max-width:600px){#keys button{border-radius:4px}}
/* Feather the inner artwork so its rectangular edges merge into the fixed display. */
#screen-art{clip-path:inset(20.2% 3.7% 25.7% 3.7% round 10px);mask-image:linear-gradient(to right,transparent 3.7%,#000 5.8%,#000 94.2%,transparent 96.3%),linear-gradient(to bottom,transparent 20.2%,#000 23%,#000 70.7%,transparent 74.3%);mask-composite:intersect}
/* Fade native text panels into the image instead of leaving hard rectangular patches. */
.menu,#aside{background:transparent;isolation:isolate}
.menu::before,#aside::before{content:'';position:absolute;inset:-1.3cqw;z-index:-1;background:repeating-linear-gradient(#020100 0 2px,#060301 2px 3px);mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
#caption{background:transparent;isolation:isolate}
#caption::before{content:'';position:absolute;inset:-.25cqw 0;z-index:-1;background:#030200;mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)}
/* Blend the blank face into each original key, preserving the photographed bevel. */
#keys button,#keys button:hover:not(:disabled),#keys button:active:not(:disabled){position:relative;isolation:isolate;background:none;border-radius:15%;overflow:visible}
#keys button::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:15%;background:url('assets/home.png') 60% 92.3757% / 760% 1052.6316% no-repeat;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);mask-composite:intersect;pointer-events:none}
/* Align the six hit areas with the centres of the original photographed keys. */
#keys{left:6.55%;right:5.65%;top:83.6%;height:9.5%;grid-template-columns:repeat(6,minmax(0,1fr));gap:2.1%;align-items:stretch}
#keys button,#keys button:hover:not(:disabled),#keys button:active:not(:disabled){display:flex;align-items:center;justify-content:center;margin:0;padding:0 .25cqw;font-family:'Arial Narrow','Roboto Condensed',Arial,Helvetica,sans-serif;font-size:1.72cqw;font-weight:700;line-height:1;letter-spacing:-.055cqw;color:#ff9908;text-align:center;text-shadow:0 0 4px #ff8b0050,0 0 10px #ff8b001c;transform:none}
#keys button::before{inset:0;border-radius:15%;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent)}
#keys svg{display:block;width:3.5cqw;height:3.5cqw;flex:none;stroke:#ff9908;stroke-width:2.3;filter:drop-shadow(0 0 3px #ff8b0040)}
#keys button:disabled{color:transparent;text-shadow:none}
/* Keep all original key bevels untouched: replace only the central lettering area. */
#keys button::before{inset:22% 6%;border-radius:0;background-image:url('assets/home.png');background-size:975% 1876%;background-position:59.4% 90.65%;background-repeat:no-repeat;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect;box-shadow:none;border:0}
#keys button,#keys button:hover:not(:disabled),#keys button:active:not(:disabled){border:0;box-shadow:none;background:none;border-radius:0}
/* Use the complete photographed key strip; never patch individual key faces. */
#key-art{display:block;clip-path:inset(81.5% 5% 4.5% 5%);mask-image:linear-gradient(to bottom,transparent 81.5%,#000 83%,#000 94%,transparent 95.5%);mask-size:100% 100%;mask-position:0 0;mask-repeat:no-repeat;mask-composite:add}
#keys button::before{content:none!important;display:none!important}
#keys button,#keys button:hover:not(:disabled),#keys button:active:not(:disabled){background:none!important;color:transparent!important;text-shadow:none!important;border:0!important;box-shadow:none!important}
#keys svg{visibility:hidden}

/* Shared photographed key component: identical geometry and artwork on every page. */
#key-art{display:block!important;background-image:url('assets/front.png')!important;clip-path:inset(81% 4.5% 3.5% 4.5%);mask-image:linear-gradient(to bottom,transparent 81%,#000 82.5%,#000 95%,transparent 96.5%);mask-size:100% 100%;mask-position:0 0;mask-repeat:no-repeat}
#keys{left:6%;right:5.25%;top:82%;height:13.4%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.65%;align-items:stretch}
#keys button,#keys button:hover:not(:disabled),#keys button:active:not(:disabled){position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate;background:url('assets/front.png') 59.7% 94.1% / 714% 740% no-repeat!important;border:0!important;border-radius:10%;box-shadow:none!important;color:#ff9908!important;text-shadow:0 0 5px #ff8b0030!important;font-family:'Arial Narrow',Arial,Helvetica,sans-serif;font-size:1.72cqw;line-height:1;font-weight:700;letter-spacing:-.04cqw;margin:0;padding:0 .2cqw;transform:none}
#keys button::before{display:none!important;content:none!important}
#keys button:disabled{color:transparent!important;text-shadow:none!important}
#keys svg{visibility:visible;display:block;width:3.5cqw;height:3.5cqw;fill:none;stroke:#ff9908;stroke-width:2.3;filter:drop-shadow(0 0 3px #ff8b0030)}
#keys button:focus-visible{outline:1px solid #ffa328;outline-offset:-9px}
/* Separate decorative car artwork from live text: no photographed text behind menus. */
.radio::before{content:'';position:absolute;inset:20% 3.5% 25%;z-index:-1;background:#030200;border-radius:10px}
#screen-art{clip-path:inset(23% 32.8% 35% 33.5%);mask-image:linear-gradient(to right,transparent 33.5%,#000 35%,#000 64%,transparent 67.2%),linear-gradient(to bottom,transparent 23%,#000 26%,#000 62%,transparent 65%);mask-composite:intersect}
.radio[data-page=home] #screen-art,.radio[data-page=exterior] #screen-art{clip-path:inset(23% 26% 35% 25%);mask-image:linear-gradient(to right,transparent 25%,#000 28%,#000 71%,transparent 74%),linear-gradient(to bottom,transparent 23%,#000 26%,#000 62%,transparent 65%);mask-composite:intersect}
.menu,#aside{background:transparent}
.menu::before,#aside::before,#caption::before{display:none}
#caption{top:67.3%;height:7.5%;border-top:2px solid #f08b00;padding-top:.6cqw;background:#030200;font-size:1.8cqw}
.radio[data-page=home] #caption{font-size:1.28cqw;white-space:nowrap;letter-spacing:0}
/* Remove the old photographed row beneath the shared keys, preventing doubled bezels. */
#key-art{display:block!important;inset:81% 4.8% 3.5% 4.8%;clip-path:none!important;mask-image:none!important;background-image:none!important;background-color:#151412;background-size:auto;background-position:center;border-radius:12px;box-shadow:inset 0 3px 10px #0009;z-index:-1}
#keys{left:6%;right:5.25%;top:82%;height:13.4%;gap:1.2%;grid-template-columns:repeat(6,minmax(0,1fr))}
/* Granulated dark fascia around and between the shared keys. */
#key-art{background-color:#171614!important;background-image:url('assets/texture.svg')!important;background-size:110px 110px!important;background-repeat:repeat!important;border:1px solid #25231f;box-shadow:inset 0 2px 5px #0008,inset 0 -1px 3px #0006}
/* Feather the texture strip into the original fascia without a rectangular seam. */
#key-art{inset:80.5% 3.5% 2.8% 3.5%;border:0!important;border-radius:16px;box-shadow:none!important;mask-image:linear-gradient(to right,transparent,#000 2.7%,#000 97.3%,transparent),linear-gradient(to bottom,transparent,#000 14%,#000 84%,transparent)!important;mask-size:100% 100%!important;mask-position:0 0!important;mask-repeat:no-repeat!important;mask-composite:intersect!important}
/* Blend the outermost pixels of each photographed key into the textured fascia. */
#keys button,#keys button:hover:not(:disabled),#keys button:active:not(:disabled){background:none!important;isolation:isolate;position:relative}
#keys button::before{content:''!important;display:block!important;position:absolute;inset:0;z-index:-1;background:url('assets/front.png') 59.7% 94.1% / 714% 740% no-repeat;border:0;border-radius:10%;box-shadow:none;pointer-events:none;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 94%,transparent);mask-size:100% 100%;mask-position:0 0;mask-repeat:no-repeat;mask-composite:intersect}

/* Match the surround's neutral charcoal tone and soften the remaining tonal join. */
#key-art{filter:grayscale(1) brightness(.86)}
#keys button::before{mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 90%,transparent);filter:grayscale(1)}
/* One continuous material covers both the old surround and the sprite margins. */
.radio::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;background:url('assets/texture.svg') repeat;background-size:110px 110px;filter:grayscale(1) brightness(.86);mask-image:url('assets/fascia-mask.svg');mask-size:100% 100%;mask-repeat:no-repeat}
/* Restore a single original material; discard synthetic surround and covering masks. */
.radio::after{display:none!important;content:none!important}
#key-art{display:none!important}
#keys{left:6.55%;right:5.65%;top:83.6%;height:9.5%;grid-template-columns:repeat(6,minmax(0,1fr));gap:2.1%;align-items:stretch}
#keys button,#keys button:hover:not(:disabled),#keys button:active:not(:disabled){background:none!important;border:0!important;box-shadow:none!important;border-radius:8px;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;padding:0;color:#ff9908!important;font-size:1.72cqw;line-height:1;transform:none}
#keys button::before{content:''!important;display:block!important;position:absolute;inset:0;z-index:-1;pointer-events:none;border:0;box-shadow:none;border-radius:8px;background:url('assets/home.png') 59.96% 92.34% / 776% 1053% no-repeat;filter:none;mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);mask-size:100% 100%;mask-position:0 0;mask-repeat:no-repeat;mask-composite:intersect}
#keys button:disabled{color:transparent!important;text-shadow:none!important}
#keys svg{visibility:visible}
/* Preserve original photographed button edges; replace only their central legends. */
#keys button::before{inset:18% 6%;border-radius:3px;background-image:url('assets/home.png');background-size:883% 1645%;background-position:59.14% 90.97%;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);filter:none}
/* Neutral key material; amber remains exclusive to live legends and icons. */
#keys button::before{filter:grayscale(1)}

/* OEM-inspired printed/backlit legends, matched to the supplied Business RDS photo. */
#keys button,#keys button:hover:not(:disabled),#keys button:active:not(:disabled){font-family:'Arial Narrow','Roboto Condensed','Liberation Sans Narrow',Arial,sans-serif;font-stretch:condensed;font-size:1.48cqw;font-weight:400;letter-spacing:-.025cqw;color:#c77449!important;text-shadow:0 0 2px #c45c2926!important;-webkit-font-smoothing:antialiased}
#keys svg{stroke:#c77449;stroke-width:1.8;filter:none;width:3.05cqw;height:3.05cqw}
#keys button:disabled{color:transparent!important;text-shadow:none!important}
/* Stronger OEM-style legends with readable medium-bold strokes. */
#keys button,#keys button:hover:not(:disabled),#keys button:active:not(:disabled){font-weight:600;font-size:1.6cqw;letter-spacing:.015cqw;color:#d17b48!important;text-shadow:0 0 2px #bd57251a!important}
#keys svg{stroke:#d17b48;stroke-width:2.1}
#keys button:disabled{color:transparent!important;text-shadow:none!important}
/* Subtle warm backlighting, like the original radio's illuminated legends. */
#keys button,#keys button:hover:not(:disabled),#keys button:active:not(:disabled){color:#df8b52!important;text-shadow:0 0 1px #ed9a6599,0 0 4px #da70394d,0 0 8px #bd54251f!important}
#keys svg{stroke:#df8b52;filter:drop-shadow(0 0 2px #da703955)}
#keys button:disabled{color:transparent!important;text-shadow:none!important}
/* Warm, restrained LCD palette inspired by the supplied original BMW radio. */
.radio::before{background:radial-gradient(ellipse at 50% 45%,#110704 0%,#080403 60%,#040302 100%)}
#screen-art{filter:hue-rotate(-15deg) saturate(.78) brightness(.82)}
#clock,#date{color:#df783b;background:#090403;text-shadow:0 0 2px #e7773780,0 0 7px #c34b242b}
.menu,#aside,#aside.success,.option.focus{color:#d9793e;text-shadow:0 0 2px #d664322e}
.option.active::after{color:#9e562e}
#caption{color:#d9793e;background:#080403;border-top-color:#b6602b;text-shadow:0 0 3px #d6643226}
.menu h1{text-decoration-color:#b6602b}
/* Optical alignment with the photographed rightmost key face. */
#keys .reset-label{display:inline-block;transform:translateX(-.4cqw)}
.radio[data-page=home] #caption{display:flex;justify-content:center;align-items:center;gap:1.7cqw;font-size:1.28cqw;padding-left:1cqw;padding-right:1cqw}
.radio[data-page=home] #caption span+span{border-left:1px solid #a35b30;padding-left:1.7cqw}
/* Balance the darker photographed RESET face against the SELECT key. */
#keys button:last-child::before{filter:grayscale(1) brightness(1.12)}
#keys .reset-label{color:inherit;text-shadow:inherit;font:inherit;letter-spacing:inherit}
/* Match the subtle amber lamp spill visible on the other photographed keys. */
#keys button:last-child:not(:disabled)::after{content:'';position:absolute;inset:16% 8%;z-index:-1;pointer-events:none;border-radius:6px;background:radial-gradient(ellipse at 50% 58%,#d76c2426 0%,#b8551714 40%,transparent 74%);filter:blur(2px)}
.lamp-preview{position:absolute;inset:0;pointer-events:none;z-index:2}
.lamp-preview[hidden]{display:none}
.lamp-preview svg{width:100%;height:100%;overflow:visible}
.lamp-dark{fill:#080503;opacity:.88}
.lamp-flash{fill:#ffb32c;filter:drop-shadow(0 0 4px #ff8a18);animation:rear-pulse 1.1s steps(1,end) infinite}
.lamp-preview.oem .reverse-zones{display:none}
.lamp-caption{position:absolute;left:34%;right:33%;top:64.1%;text-align:center;font:700 .67cqw/1.3 Arial,sans-serif;letter-spacing:.025cqw;color:#a76a3f}
@keyframes rear-pulse{0%,49%{opacity:1}50%,100%{opacity:.04}}
@media(prefers-reduced-motion:reduce){.lamp-flash{animation:none}}
.lamp-preview.reversing .lamp-flash{animation:none;fill:#fff2da;filter:drop-shadow(0 0 5px #fff1d3aa);opacity:1}
.lamp-preview.reversing.oem .reverse-zones{display:initial}
.lamp-preview.reversing.oem .indicator-zones{display:none}
/* Reverse preview: keep only the upper white strip, without the lower duplicate. */
.lamp-preview.reversing .reverse-zones{display:none!important}
.lamp-preview.reversing.oem .indicator-zones{display:initial}
/* Two adjacent bulbs in the upper strip, with a narrow physical separation. */
.lamp-preview.reversing.extended .reverse-zones{display:initial!important}
.lamp-preview.reversing.oem .reverse-zones{display:initial!important}
.lamp-preview.reversing.oem .indicator-zones{display:none!important}
/* Muted green saved-mode indicator, placed before the option and cursor. */
.option.active::after{content:none}
.option.active{position:relative}
.option.active{background:none}
.option.active::before{content:'●';position:absolute;left:-1.15cqw;top:.12em;font-size:.63em;color:#788d68;text-shadow:0 0 2px #788d681a}
.option.active.focus::before{content:'●';left:-1.15cqw;color:#788d68;font-size:.63em}
.option.focus{background:none}
.option.focus::after{content:'>';position:absolute;left:0;top:0;color:#d9793e;font-size:1em}
.option.focus::before{content:none}
.option.active.focus::before{content:'●'}
/* Keep the saved-state dot immediately before the option text. */
.option.active::before,.option.active.focus::before{left:.75cqw;top:.15em;color:#788d68;font-size:.63em}
/* One marker slot: saved choice uses a green dot; other focused rows use >. */
.option.active::before,.option.active.focus::before{content:'●';left:0;top:.35em;font-size:.65em;line-height:1;color:#788d68}
.option.active.focus::after{content:none}
/* Saved-choice dot after the label; retain the independent MODE cursor before it. */
.option.active::before,.option.active.focus::before{content:none}
.option.active::after{content:' ●';position:static;color:#788d68;font-size:.65em;text-shadow:none}
.option.focus::before,.option.active.focus::before{content:'>';position:absolute;left:0;top:0;font-size:1em;line-height:inherit;color:#d9793e}
.option.focus::after{content:none}
.option.active.focus::after{content:' ●';position:static;color:#788d68;font-size:.65em}
.lamp-preview.overview .cycle-lit{filter:drop-shadow(0 0 3px #edab6470)}
.radio[data-page=rear] #aside{font-size:1.15cqw;color:#b97848}
.presence-preview .presence-dark{fill:#0c0906;opacity:.93}
.presence-preview .angel-ring{fill:#14110b;stroke:#fff0d0;stroke-width:2.6;filter:drop-shadow(0 0 3px #ffe4a9aa)}
.presence-preview .presence-bulb{fill:#ffffff;filter:drop-shadow(0 0 4px #ffffff)}
.presence-preview .bulb-spill{fill:#ffffff;opacity:.12;filter:blur(3px)}
.front-turn{fill:#ffac38;filter:drop-shadow(0 0 3px #ff8e25aa)}
.left-turn{animation:front-left 6.6s steps(1,end) infinite}
.right-turn{animation:front-right 6.6s steps(1,end) infinite}
.daytime .left-turn{animation-name:front-day-left}
.daytime .right-turn{animation-name:front-day-right}
@keyframes front-left{0%,16.66%,33.33%{opacity:1}8.33%,25%,41.66%,50%,100%{opacity:0}}
@keyframes front-right{0%,100%{opacity:0}50%,66.66%,83.33%{opacity:1}58.33%,75%,91.66%{opacity:0}}
@keyframes front-day-left{0%,16.66%,33.33%,50%,100%{opacity:1}8.33%,25%,41.66%{opacity:0}}
@keyframes front-day-right{0%,50%,66.66%,83.33%,100%{opacity:1}58.33%,75%,91.66%{opacity:0}}
@media(prefers-reduced-motion:reduce){.front-turn{animation:none;opacity:.7}}
/* Dim the common front illustration so only the live lamps attract attention. */
.radio[data-page=front] #screen-art,.radio[data-page=frontIndicator] #screen-art,.radio[data-page=presence] #screen-art,.radio[data-page=example] #screen-art,.radio[data-page=interior] #screen-art,.radio[data-page=fan] #screen-art{filter:hue-rotate(-15deg) saturate(.72) brightness(.70)}
.front-indicator-preview .front-turn{fill:#ffb23c;filter:drop-shadow(0 0 2px #ff982a88)}

.front-cycle .overview-turn{fill:#ffb23c;filter:drop-shadow(0 0 3px #ff982a88)}
.radio[data-page=front] #aside{font-size:1.15cqw;color:#b97848}
#car-plate{position:absolute;inset:0;z-index:3;pointer-events:none}
#car-plate svg{width:100%;height:100%}
#car-plate text{fill:#d99355;font-family:'Arial Narrow',Arial,sans-serif;font-weight:700;letter-spacing:1px;paint-order:stroke;stroke:#090503;stroke-width:1.3px}
/* Plate inscription remains a subtle detail within the illustration. */
#car-plate text{fill:#795135;opacity:.55;stroke:#090503;stroke-width:.8px}
#car-plate text{fill:#60412d;opacity:.38}
/* Portuguese plate styling, subdued to remain a small illustration detail. */
#car-plate .portuguese-plate{opacity:.6;filter:brightness(.48) saturate(.6)}
#car-plate .plate-number{fill:#11100e;opacity:1;stroke:none;font-family:'Arial Narrow',Arial,sans-serif;font-size:43px;font-weight:700;letter-spacing:1px}
#car-plate .plate-country{fill:#deded7;opacity:1;stroke:none;font:700 18px Arial,sans-serif;letter-spacing:0}
#info-panel{display:none}
.radio[data-page=info] #screen-art,.radio[data-page=info] #car-plate,.radio[data-page=info] #menu,.radio[data-page=info] #aside{display:none}
.radio[data-page=info] #info-panel{display:block;position:absolute;left:8%;right:8%;top:23%;height:41%;overflow:auto;color:#d9793e;font-size:1.25cqw;line-height:1.5;scrollbar-width:thin;scrollbar-color:#7d4526 #100905}
#info-panel h1{margin:0 0 1.1cqw;font-size:1.9cqw;letter-spacing:.08cqw}
#info-panel dl{display:flex;gap:6cqw;margin:0 0 1cqw}
#info-panel dl div{display:flex;gap:1.2cqw;align-items:baseline}
#info-panel dt{color:#a8683e;font-size:1.05cqw}
#info-panel dd{margin:0;font-weight:bold}
#info-panel p{margin:.7cqw 0;max-width:94%}
#info-panel small{color:#a8683e;font-size:1.05cqw}
#keys .info-label{display:inline-block;transform:translateX(-.4cqw);font:inherit;letter-spacing:inherit;color:inherit;text-shadow:inherit}
.radio[data-page=home] #keys button:last-child::before{filter:grayscale(1)}
.radio[data-page=home] #keys button:last-child::after{display:none}
/* Restore the same warm, restrained lamp spill on INFO. */
.radio[data-page=home] #keys button:last-child:not(:disabled)::after{display:block;content:'';position:absolute;inset:16% 8%;z-index:-1;pointer-events:none;border-radius:6px;background:radial-gradient(ellipse at 50% 58%,#d76c2426 0%,#b8551714 40%,transparent 74%);filter:blur(2px)}
/* All key legends share the same text box and vertical baseline. */
#keys .key-label,#keys .info-label,#keys .reset-label{display:block;font:inherit;line-height:1;letter-spacing:inherit;color:inherit;text-shadow:inherit;margin:0;padding:0;position:relative;top:0;align-self:center}
#keys .key-label{transform:none}
#keys .info-label,#keys .reset-label{transform:translateX(-.4cqw)}

/* Optical centring of the home fan legend only. */
.radio[data-page=home] #keys button:nth-child(3) .key-label{transform:translateX(.65cqw)}
/* Identical lettering illumination on INFO and the other key labels. */
#keys .key-label,#keys .info-label,#keys .reset-label{color:#df8b52!important;text-shadow:0 0 1px #ed9a6599,0 0 4px #da70394d,0 0 8px #bd54251f!important;filter:none;opacity:1}
/* Concise system information, with a clear hierarchy instead of long paragraphs. */
.radio[data-page=info] #info-panel{left:9%;right:9%;top:24%;height:39%;font-size:1.25cqw;display:grid;grid-template-columns:.9fr 1.35fr;column-gap:6cqw;align-content:center;overflow:auto}
#info-panel .info-eyebrow{display:block;font-size:.85cqw;letter-spacing:.14cqw;color:#a56c46;margin-bottom:.8cqw}
#info-panel .info-intro h1{font-size:3.2cqw;letter-spacing:.13cqw;margin:0 0 .5cqw;font-weight:600}
#info-panel .info-intro p{font-size:1.12cqw;line-height:1.5;color:#b77b53;margin:0;max-width:21cqw}
#info-panel .info-facts{display:grid;grid-template-columns:1fr 1fr;gap:2.1cqw 2.7cqw;margin:0;padding:0 0 0 3cqw;border-left:1px solid #6f3e233d}
#info-panel .info-facts div{display:block}
#info-panel .info-facts dt{font-size:.8cqw;letter-spacing:.1cqw;color:#a56c46;margin-bottom:.4cqw}
#info-panel .info-facts dd{font-size:1.45cqw;font-weight:500;line-height:1.4;margin:0}
#info-panel .info-facts small{display:block;font-size:.72cqw;letter-spacing:.06cqw;color:#a56c46;margin-top:.2cqw}
#info-panel .info-bottom{grid-column:1/-1;border-top:1px solid #6f3e233d;margin-top:2.2cqw;padding-top:1.1cqw;display:flex;justify-content:space-between;align-items:center;gap:1cqw;color:#a56c46;font-size:.8cqw;letter-spacing:.04cqw}
#info-panel .info-bottom p{margin:0;font-size:.8cqw;letter-spacing:0}
#info-panel .info-facts .license-code{font-family:'Courier New',monospace;font-size:.92cqw;letter-spacing:.015cqw;overflow-wrap:anywhere}
#info-panel .info-facts{row-gap:1.25cqw}
#info-panel .info-modules{margin-top:1.6cqw}
#info-panel .info-modules h2{margin:0 0 .5cqw;font-size:.77cqw;font-weight:400;letter-spacing:.1cqw;color:#a56c46}
#info-panel .info-modules ul{margin:0;padding:0;list-style:none;font-size:1.03cqw;line-height:1.75;color:#c5875a}
#info-panel .info-modules li::before{content:'·';margin-right:.6cqw;color:#a56c46}
#info-panel .info-navigation{margin-top:1cqw;font-size:.75cqw;color:#cc8b59}
#info-panel .info-navigation span{color:#95613f}
.radio[data-page=info] #info-panel{top:23%;height:42%;align-content:center}
#info-panel .info-intro h1{font-size:2.8cqw}
#info-panel .info-facts{align-content:center;row-gap:1.4cqw}
#info-panel .info-bottom{margin-top:1.4cqw;padding-top:.85cqw}
#interior-art{display:none}
.radio[data-page=interior] #screen-art,.radio[data-page=interior] #car-plate{display:none}
.radio[data-page=interior] #interior-art{display:block;position:absolute;left:33%;right:6%;top:25%;height:38%;background:url('assets/interior.png') center/contain no-repeat;filter:hue-rotate(-8deg) saturate(.75) brightness(.83);mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect;pointer-events:none}
/* Centre the cabin illustration and blend its black backdrop into the display. */
.radio[data-page=interior] #interior-art{left:30%;right:30%;top:26%;height:38%;border:0;border-radius:0;box-shadow:none;background-color:transparent;background-position:center;background-size:contain;mix-blend-mode:screen;filter:hue-rotate(-8deg) saturate(.75) brightness(.95);mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 94%,transparent);mask-composite:intersect}
/* Neutralise the cabin asset's original tint, then apply the shared copper-amber tone. */
.radio[data-page=interior] #interior-art{filter:grayscale(1) sepia(1) saturate(2.2) hue-rotate(-18deg) brightness(1.32)}

.radio[data-page=interior] #interior-art::after{content:'PRE-VISUALIZAÇÃO';position:absolute;left:0;right:0;bottom:0;text-align:center;font:700 .67cqw/1.3 Arial,sans-serif;letter-spacing:.025cqw;color:#a76a3f}
.radio[data-page=interior] #interior-art::after{content:none}
#interior-preview-caption{display:none}
.radio[data-page=interior] #interior-preview-caption{display:block;position:absolute;left:34%;right:33%;top:64.1%;text-align:center;font:700 .67cqw/1.3 Arial,sans-serif;letter-spacing:.025cqw;color:#a76a3f;pointer-events:none}
.footwell-strip{display:none;position:absolute;top:58%;height:1.2%;border-radius:100%;background:linear-gradient(90deg,#665fa855,#739ba7b3,#a46d9b99);box-shadow:0 2px 6px 2px #617cb733,0 7px 14px 5px #617cb71a;opacity:.78}
.driver-strip{left:19%;width:20%;transform:rotate(1deg)}
.passenger-strip{left:55%;width:17%;transform:rotate(-1deg)}
.radio[data-page=interior][data-feet=on] .footwell-strip{display:block}
#footwell-preview{display:none;position:absolute;left:30%;right:30%;top:26%;height:38%;pointer-events:none}
.radio[data-page=interior] #footwell-preview{display:block}
/* Concealed RGB footwell lighting: soft reflected pools, with no visible strip. */
.footwell-strip{top:66%;height:19%;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#6f8bcc55 0%,#586eb82b 38%,transparent 72%);box-shadow:none;filter:blur(5px);opacity:.7;mix-blend-mode:screen;animation:footwell-fade 16s ease-in-out infinite}
.driver-strip{left:21%;width:24%;transform:rotate(-8deg);clip-path:polygon(5% 0,85% 0,100% 100%,0 100%)}
.passenger-strip{left:57%;width:23%;transform:rotate(6deg);clip-path:polygon(10% 0,90% 0,100% 100%,0 100%)}
@keyframes footwell-fade{0%,100%{filter:blur(5px) hue-rotate(0deg)}33%{filter:blur(5px) hue-rotate(100deg)}66%{filter:blur(5px) hue-rotate(230deg)}}
@media(prefers-reduced-motion:reduce){.footwell-strip{animation:none}}
/* Stronger reflected RGB light while retaining the concealed source. */
.footwell-strip{background:radial-gradient(ellipse at 50% 30%,#7a9ae6b3 0%,#637ed56b 36%,#4f66b32e 57%,transparent 76%);opacity:.95}


/* Align the passenger-side reflection with the footwell. */
.passenger-strip{transform:rotate(-3deg)}
/* Bring the passenger glow up against the underside of the dashboard. */
.passenger-strip{top:62.5%}
/* Shift the passenger reflection slightly toward the centre console. */
.passenger-strip{left:54.5%}
.passenger-strip{left:52%}
/* Align the inner tip of the passenger glow with the marked console corner. */
.passenger-strip{left:50.5%;width:24.5%}
/* Occlude the passenger glow along the seat's curved upper silhouette. */
.passenger-strip{clip-path:polygon(10% 0,90% 0,100% 64%,94% 61%,84% 58%,70% 57%,52% 57%,37% 58%,27% 61%,21% 67%,17% 78%,15% 100%,0 100%)}
/* Relax the seat cut-out so the reflection reaches the edge of the cushion. */
.passenger-strip{clip-path:polygon(10% 0,90% 0,100% 82%,94% 79%,84% 76%,70% 75%,52% 75%,37% 76%,27% 79%,21% 85%,17% 95%,15% 100%,0 100%)}
/* Small refinement to the inner seat corner, without moving the glow. */
.passenger-strip{clip-path:polygon(10% 0,90% 0,100% 84%,94% 81%,84% 78%,70% 77%,52% 77%,40% 78%,32% 80%,26% 83%,22% 88%,19% 94%,17% 100%,0 100%)}
/* Fine adjustment to the glow at the inner corner of the passenger seat. */
.passenger-strip{clip-path:polygon(10% 0,90% 0,100% 84%,94% 81%,84% 78%,70% 77%,52% 77%,40% 78%,31% 80%,24% 83%,19% 88%,15% 94%,12% 100%,0 100%)}

/* Extend the driver-side reflection toward the outer footwell tip. */
.driver-strip{left:16%;width:29%}
/* Bring the driver-side glow up to the dashboard underside. */
.driver-strip{top:63%}
/* Align the driver reflection with the dashboard, mirroring the passenger adjustment. */
.driver-strip{transform:rotate(3deg)}
/* Occlude the RGB reflection behind the round lower edge of the steering wheel. */
.driver-strip{mask-image:radial-gradient(ellipse 35% 105% at 53% -71%,transparent 97%,#000 100%);mask-size:100% 100%;mask-position:0 0;mask-repeat:no-repeat}
/* Feather the driver glow's perimeter while retaining the steering-wheel cut-out. */
.driver-strip{clip-path:none;mask-image:radial-gradient(ellipse 35% 105% at 53% -71%,transparent 95%,#000 100%),radial-gradient(ellipse at 50% 60%,#000 0%,#000 38%,#000a 60%,transparent 83%);mask-size:100% 100%;mask-position:0 0;mask-repeat:no-repeat;mask-composite:intersect}
/* Keep the driver reflection behind the seat's rounded upper edge as well. */
.driver-strip{mask-image:radial-gradient(ellipse 35% 105% at 53% -71%,transparent 95%,#000 100%),radial-gradient(ellipse at 50% 60%,#000 0%,#000 38%,#000a 60%,transparent 83%),radial-gradient(ellipse 60% 85% at 55% 160%,transparent 96%,#000 100%);mask-size:100% 100%;mask-position:0 0;mask-repeat:no-repeat;mask-composite:intersect}
.driver-door-handle{position:absolute;left:11.4%;top:53.5%;width:3.5%;height:14%;fill:#090604;stroke:#b77945;stroke-width:1.15;stroke-linejoin:round;opacity:.85;pointer-events:none}
/* Separate the door release from the existing window-control cluster. */
.driver-door-handle{left:10.8%;top:47.5%;width:2.9%;height:11%}
/* Reuse the actual passenger handle artwork instead of drawing a different handle. */
.driver-door-handle-copy{position:absolute;inset:0;background:url('assets/interior.png') center/contain no-repeat;clip-path:inset(53% 12% 32% 80%);transform:translateX(-7%) scaleX(-1);pointer-events:none;mix-blend-mode:screen}
.driver-door-handle-copy{transform:translate(-7%,3%) scaleX(-1)}
/* Isolate the handle itself, excluding adjacent door-trim lines. */
.driver-door-handle-copy{clip-path:inset(57% 14% 35% 82.6%)}

/* Match rear hologram grading to the front view. */
.radio[data-page=rear] #screen-art,.radio[data-page=rearIndicator] #screen-art,.radio[data-page=reverse] #screen-art,.radio[data-page=reset][data-reset-section=rear] #screen-art{filter:hue-rotate(-15deg) saturate(.72) brightness(.82)}

/* Nearly transparent exhaust vapour; gentle drift away from both tips. */
#exhaust-smoke{position:absolute;inset:0;z-index:3;pointer-events:none}
#exhaust-smoke[hidden]{display:none}
#exhaust-smoke svg{width:100%;height:100%;overflow:hidden}
.exhaust-wisp{fill:#baa899;opacity:0;animation:exhaust-drift 3.8s linear infinite;transform-origin:0 0}
@keyframes exhaust-drift{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:.21;transform:translate(-3px,-2px) scale(.8)}45%{opacity:.14;transform:translate(-10px,-16px) scale(1.5)}100%{opacity:0;transform:translate(-24px,-48px) scale(2.8)}}
@media(prefers-reduced-motion:reduce){#exhaust-smoke{display:none}}

#fan-preview{position:absolute;inset:0;z-index:4;pointer-events:none}
#fan-preview[hidden]{display:none}
#fan-preview svg{width:100%;height:100%;filter:hue-rotate(-15deg) saturate(.72) brightness(.70)}
#fan-preview .fan-rotor{transform-origin:827px 491px}

#fan-preview .fan-rotor{filter:blur(var(--fan-motion-blur,0px))}



/* Keep the full weekday and date comfortably inside the header frame. */
#date{left:68.5%;width:26.5%;padding:0 .65cqw;font-size:1.55cqw;letter-spacing:0;line-height:1.2;overflow:hidden;text-align:center}

/* Lower the selection confirmation within the preview area. */
#aside.success{left:74%;top:26%;width:22%;height:36%;padding:1cqw .5cqw;font-size:1.4cqw;line-height:1.5;background:transparent}

/* Gentle scan across the three-quarter hologram, with a quiet interval. */
.radio[data-page=home] #screen-art::after,
.radio[data-page=exterior] #screen-art::after{
 content:'';position:absolute;inset:0;pointer-events:none;
 background-image:inherit;background-position:inherit;background-size:inherit;background-repeat:no-repeat;
 mix-blend-mode:screen;filter:brightness(1.5) blur(.3px);opacity:0;
 animation:hologram-scan 3.5s linear infinite;
}
@keyframes hologram-scan{
 0%{clip-path:inset(0 75% 0 17%);opacity:.24}
 100%{clip-path:inset(0 18% 0 74%);opacity:.24}
}
@media(prefers-reduced-motion:reduce){.radio #screen-art::after{animation:none;display:none}}

/* Match the header lettering to the restrained copper interface. */
#brand-title{position:absolute;left:12%;top:8.3%;width:17%;height:5.3%;z-index:2;display:flex;align-items:center;justify-content:center;background:#090403;color:#df783b;font:700 2.3cqw/1 Arial,Helvetica,sans-serif;letter-spacing:.12cqw;text-shadow:0 0 2px #e7773780,0 0 7px #c34b242b;white-space:nowrap}

/* Compact copper badge beside the Individual wordmark. */
#brand-logo-cover{position:absolute;left:6.4%;top:6.9%;width:6%;height:7.8%;z-index:2;background:#090403;mask-image:radial-gradient(ellipse,#000 58%,transparent 76%);pointer-events:none}
#brand-logo{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;filter:sepia(.3) hue-rotate(-19deg) saturate(.65) brightness(.84)}
#brand-title{left:12%;width:22.6%;padding-left:1.6cqw;font-size:1.95cqw;letter-spacing:.08cqw}

#brand-logo-cover{left:6%;top:6.8%;width:7%;height:8%;background:#090403;mask-image:none}
#brand-logo{filter:none}

/* Equal seven-percent outer text margins; date remains anchored at the right. */
#brand-logo-cover{left:6%;width:29%;top:6.8%;height:8%}
#brand-title{left:10.4%;width:24.2%;padding-left:0;justify-content:flex-start}
#date{left:auto;right:7%;width:27%;padding:0;display:flex;align-items:center;justify-content:flex-end;text-align:right;direction:ltr;isolation:isolate;z-index:2;overflow:visible}
#date::before{content:'';position:absolute;inset:0 -3cqw 0 0;background:#090403;z-index:-1;pointer-events:none}

/* Radio display mode: only the native-style interface, fitted to the viewport. */
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#080605}
body{padding:0;min-height:0;display:grid;place-items:center}
main{width:min(100vw,calc(100dvh * 1678 / 938));max-width:none}
main>.status,main>details{display:none}
.radio{width:100%;box-shadow:none}
/* License entry shares the INFO panel and the six original radio keys. */
.radio[data-page=info] #info-panel{top:22%;height:45%;align-content:start;row-gap:1cqw;column-gap:3cqw;grid-template-columns:.9fr 1.35fr}
#info-panel .info-facts{padding-left:2cqw;row-gap:.8cqw;column-gap:1.8cqw}
#info-panel .info-facts dd{font-size:1.1cqw}
#info-panel .info-facts #license-dates{font-size:.88cqw}
#info-panel .info-intro h1{font-size:2.3cqw}
#info-panel .info-modules{margin-top:.8cqw}
#info-panel .info-modules ul{font-size:.9cqw;line-height:1.55}
#info-panel .info-navigation{margin-top:.6cqw}
#license-editor{grid-column:1/-1;display:flex;align-items:center;gap:2cqw;padding-top:.8cqw;border-top:1px solid #7d4b303d}
#license-editor[hidden]{display:none}
.license-entry{flex:1;min-width:0}
#license-editor label{display:block;font-size:.8cqw;letter-spacing:.08cqw;margin-bottom:.3cqw}
#license-input{width:100%;border:1px solid #8b5738;border-radius:.3cqw;background:#100906;color:#ed9a65;padding:.4cqw .6cqw;font:700 1.4cqw/1.2 'Courier New',monospace;letter-spacing:.1cqw;outline:none}
#license-input:focus{border-color:#ed9a65}
#info-panel #license-feedback{font-size:.8cqw;line-height:1.25;margin:.4cqw 0 0;min-height:1em;max-width:none;color:#cf895c}
.license-actions{display:flex;gap:.6cqw}
.license-actions button{background:#1a100b;border:1px solid #75462f;border-radius:.3cqw;color:#df8b52;font:bold .9cqw/1 Arial;padding:.8cqw;cursor:pointer}
.license-actions button:disabled{opacity:.35;cursor:default}
.license-actions button:focus-visible{outline:2px solid #ed9a65}

/* Fixed license screens controlled by the six radio keys. */
.radio[data-page=info] #info-panel{top:22%;height:32%;overflow:hidden;align-content:start}
#info-panel .info-facts{align-content:start;row-gap:.65cqw}
#info-panel .info-facts dt{margin-bottom:.2cqw}
#info-panel .info-eyebrow{margin-bottom:.4cqw}
.radio[data-page=info] #menu{display:flex;left:9%;width:82%;top:55%!important;height:9%!important;gap:.25cqw!important;padding:0;justify-content:center;font-size:1.2cqw}
.radio[data-page=info] #menu .option{min-height:1.65cqw;line-height:1.35}
#info-license-feedback{display:none}
.radio[data-page=info] #info-license-feedback{display:block;position:absolute;left:9%;right:9%;top:64%;height:3%;margin:0;color:#df783b;font-size:1cqw;line-height:1.4}
#license-entry-screen{display:none}
.radio[data-page=licenseAdd] #screen-art,.radio[data-page=licenseAdd] #car-plate,.radio[data-page=licenseAdd] #menu,.radio[data-page=licenseAdd] #aside{display:none}
.radio[data-page=licenseAdd] #license-entry-screen{position:absolute;display:flex;flex-direction:column;justify-content:center;left:9%;right:9%;top:25%;height:35%;color:#df783b}
#license-entry-screen h1{font-size:1.8cqw;letter-spacing:.1cqw;margin:0 0 1.7cqw}
#license-slots{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:.55cqw}
.license-slot{height:4.3cqw;border:1px solid #824725;border-radius:.3cqw;display:grid;place-items:center;background:#090503;font:bold 2.4cqw/1 'Courier New',monospace}
.license-slot.current{border-color:#df783b;box-shadow:0 0 .5cqw #df783b22}
#license-entry-screen #license-feedback{height:1.5cqw;font-size:1.05cqw;margin:1.5cqw 0 0;color:#df783b}

/* Keep license actions directly below its status. */
.radio[data-page=info] #info-panel{height:41%}
.radio[data-page=info] #menu{position:static;width:100%;height:auto!important;min-height:0;margin:.6cqw 0 .35cqw;gap:.2cqw!important;font-size:1.05cqw;justify-content:flex-start}
.radio[data-page=info] #menu .option{min-height:1.4cqw}

/* License status and actions share the lower information area. */
#license-summary{display:none}
.radio[data-page=info] #license-summary{display:block;position:absolute;left:45.5%;right:9%;top:57%;margin:0;color:#d9793e;font-size:1.05cqw;line-height:1.4}
#license-summary dt,#license-summary dd{display:inline;margin:0;font-weight:500}
#license-summary dt{margin-right:.5cqw}
.radio[data-page=info] #license-summary #menu{margin:.35cqw 0 0;gap:.15cqw!important}
.radio[data-page=info] #info-license-feedback{right:57%;top:61%;height:6%;font-size:.95cqw}

/* Independent information columns, without the former license gap. */
#info-panel .info-facts>div:nth-child(1){grid-column:1;grid-row:1}
#info-panel .info-facts>div:nth-child(2){grid-column:2;grid-row:1}
#info-panel .info-facts>div:nth-child(3){grid-column:2;grid-row:2}
#info-panel .info-facts>div:nth-child(4){grid-column:1;grid-row:2}
#info-panel .info-facts>div:nth-child(5){grid-column:2;grid-row:3}
#info-panel .info-facts>div:nth-child(6){grid-column:1;grid-row:3}
#info-panel .info-facts>div:nth-child(7){grid-column:2;grid-row:4}

/* Make the license selection obvious while using MODE and SELECT. */
.radio[data-page=info] #license-summary{top:49.5%}
.radio[data-page=info] #license-summary #menu{width:19cqw;margin:.65cqw 0 0;gap:.35cqw!important}
.radio[data-page=info] #license-summary #menu .option{padding:.35cqw .65cqw .35cqw 1.9cqw;min-height:2.1cqw;border:1px solid transparent;border-radius:.3cqw;color:#ac673e;line-height:1.35}
.radio[data-page=info] #license-summary #menu .option.focus{border-color:#c9753d;background:linear-gradient(90deg,#d9793e29,#d9793e0b);color:#ffa765;text-shadow:0 0 .4cqw #d9793e35;box-shadow:inset .2cqw 0 #e78b4e}
.radio[data-page=info] #license-summary #menu .option.focus::before{left:.65cqw;top:.35cqw;color:#ffa765}

/* INFO readability follows the 1.28cqw text on the home screen. */
#info-panel .info-intro p{font-size:1.28cqw;max-width:100%;line-height:1.45}
#info-panel .info-eyebrow,#info-panel .info-modules h2{font-size:1.05cqw;letter-spacing:.08cqw}
#info-panel .info-modules{margin-top:1.1cqw}
#info-panel .info-modules ul{font-size:1.28cqw;line-height:1.6;font-weight:500;color:#d18a58}
#info-panel .info-navigation{font-size:1.05cqw;margin-top:.85cqw}
#info-panel .info-facts dt{font-size:1.05cqw;letter-spacing:.04cqw}
#info-panel .info-facts dd{font-size:1.28cqw;line-height:1.4;font-weight:500}
#info-panel .info-facts small{font-size:1.05cqw;letter-spacing:0;line-height:1.35}
#info-panel .info-facts #license-dates{font-size:1.12cqw}
.radio[data-page=info] #license-summary{top:52%;font-size:1.28cqw}
.radio[data-page=info] #license-summary #menu{font-size:1.28cqw;width:21cqw}
.radio[data-page=info] #info-license-feedback{font-size:1.15cqw}

#update-panel{display:none}
.radio[data-page=update] #screen-art,.radio[data-page=update] #car-plate,.radio[data-page=update] #menu,.radio[data-page=update] #aside{display:none}
.radio[data-page=update] #update-panel{display:flex;position:absolute;left:9%;right:9%;top:25%;height:35%;flex-direction:column;justify-content:center;color:#df783b}
#update-panel h1{font-size:1.8cqw;margin:0 0 1cqw;line-height:1.4}
#update-panel p{font-size:1.1cqw;margin:0;line-height:1.5}


/* Amber instrument cluster, with independent live needles. */
#gauges-panel{display:none}
.radio[data-page=gauges] #screen-art,.radio[data-page=gauges] #car-plate,.radio[data-page=gauges] #menu,.radio[data-page=gauges] #aside{display:none}
.radio[data-page=gauges] #gauges-panel{display:block;position:absolute;left:14%;right:14%;top:22%;height:43%;color:#df783b}
.gauges-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2cqw;align-items:center}
.gauge svg{display:block;width:100%;height:auto;overflow:visible}
.dial-ticks{filter:drop-shadow(0 0 2px #ff8e3c80)}
.dial-number{fill:#efc398;font:italic 22px Arial,sans-serif;text-anchor:middle}
.dial-name{fill:#eabb8c;font:italic bold 17px Arial,sans-serif;text-anchor:middle}
.dial-unit{fill:#dba774;font:italic 14px Arial,sans-serif;text-anchor:middle}
.dial-reading{fill:#e7a467;font:15px 'Courier New',monospace;text-anchor:middle}
.gauge-needle{transform-origin:150px 150px;transition:transform .35s ease-out;filter:drop-shadow(1px 2px 2px #000)}
#gauges-status{margin:.2cqw 0 0;text-align:center;font-size:.9cqw;letter-spacing:.05cqw;color:#b67c51}
@media(prefers-reduced-motion:reduce){.gauge-needle{transition:none}}

/* Original photographic gauges; only the original needle layers rotate. */
.radio[data-page=gauges] #gauges-panel{left:10%;right:10%;top:22%;height:auto}
#gauges-panel>svg{display:block;width:100%;height:auto}
.photo-needle{transition:transform .18s ease-out}
@media(prefers-reduced-motion:reduce){.photo-needle{transition:none}}

/* Balance the visible dial rims between the screen top and caption divider. */
.radio[data-page=gauges] #gauges-panel{top:20.75%}

/* Quiet exact readings beside the instrument descriptions. */
.gauge-exact-values{font:italic 700 28px Arial,Helvetica,sans-serif;fill:#f4d7af;opacity:.38;letter-spacing:0;pointer-events:none}

#exact-volt{font-variant-numeric:tabular-nums;letter-spacing:0}

#exact-volt{dominant-baseline:alphabetic;alignment-baseline:alphabetic;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;font-kerning:none}