/* One composition, three art directions. Controls belong to the local concept. */
:root{--hero-sub:#c9d6d9;--haze:#315f6a70;--edge:#829d9d55;--presence:#f1d9a6;--presence-bg:#182127e8;--focus:#edcf94;--rear:#d8e5e4;--rear-fill:linear-gradient(135deg,#c8dfdd36,#7b9ba928)}
body[data-palette=midnight]{--night:#111529;--ink:#262d48;--paper:#e9ecf5;--gold:#bfd2ff;--teal:#bfccea;--white:#f0f2fc;--muted:#b9c2da;--hero-sub:#c7cfe7;--haze:#384db76b;--edge:#8b9bd856;--presence:#ffe2ac;--presence-bg:#14172ce8;--focus:#bfd2ff;--rear:#dbe3ff;--rear-fill:linear-gradient(135deg,#aabbff38,#6276ba28)}
body[data-palette=ivory]{--night:#f2efe7;--ink:#3d3830;--paper:#e7e1d5;--gold:#826126;--white:#343b37;--muted:#62685f;--hero-sub:#59635b;--haze:#b5cbbb7d;--edge:#7e847254;--presence:#7b5316;--presence-bg:#f7f2e8ee;--focus:#74521b;--rear:#465b4f;--rear-fill:linear-gradient(135deg,#fffaf1c4,#ceddcd9c)}
.study-bar{gap:18px;min-height:52px;padding-block:5px;background:#e8ede9}
.palette-switch{display:flex;align-items:center;gap:5px;margin-inline:auto}
.palette-switch button{display:flex;align-items:center;gap:8px;min-height:40px;padding:5px 13px;border:1px solid transparent;border-radius:8px;font-size:16px;line-height:1.2;color:#4e5d60}
.palette-switch button[aria-pressed=true]{color:#1d3439;background:#fffdf7;border-color:#a8b8b3;box-shadow:0 2px 5px #203b3c12}
.palette-switch i{display:block;width:15px;height:15px;border-radius:50%;border:1px solid #3c4b4955;background:linear-gradient(135deg,#17262b 55%,#edcf94 56%)}
.palette-switch [data-palette=midnight] i{background:linear-gradient(135deg,#151c3e 55%,#bfd2ff 56%)}
.palette-switch [data-palette=ivory] i{background:linear-gradient(135deg,#faf4e8 55%,#ba954d 56%)}
.study-bar button:focus-visible{outline-color:#315b61}.study-bar>button{min-width:80px}
.cold-haze{background:radial-gradient(ellipse at 55% 70%,var(--haze),transparent 64%)}
.hero-lede{color:var(--hero-sub)}.live-dot{background:var(--gold);box-shadow:none}
.stage-caption{color:var(--muted)}.rear-window{color:var(--rear);background:var(--rear-fill)}.rear-window>p{color:inherit}
.presence-scene{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:clip}
.display-edge{position:absolute;left:9%;right:0;top:16px;height:1px;background:linear-gradient(90deg,transparent,var(--edge) 18%,var(--edge) 82%,transparent)}
.camera-cutout{position:absolute;top:0;left:58%;width:148px;height:29px;transform:translateX(-50%);border-radius:0 0 12px 12px;background:linear-gradient(#090c12,#11151a);border:1px solid #70858c35;border-top:0;box-shadow:0 5px 14px #0002;z-index:2}
.camera-cutout i{position:absolute;width:6px;height:6px;border-radius:50%;left:calc(50% - 3px);top:10px;background:#162633;border:1px solid #253039}
.camera-cutout:after{content:'';position:absolute;bottom:-2px;left:28px;right:28px;height:3px;border-radius:100%;background:#fff4d2;box-shadow:0 0 9px #ffdfa0,0 4px 24px #f8c267;opacity:0;transition:opacity .7s}
body[data-phase=listening] .camera-cutout:after,body[data-phase=processing] .camera-cutout:after{opacity:1}
.presence-scene .beam-field{position:absolute;width:1050px;height:560px;left:58%;top:0;transform:translateX(-50%);opacity:1;mask-image:none}
.presence-label{position:absolute;left:58%;top:53px;transform:translateX(-50%);color:var(--presence);background:var(--presence-bg);border:1px solid var(--edge);border-radius:22px;padding:6px 14px;font-size:16px;white-space:nowrap;box-shadow:0 4px 18px #0001}
.rear-window{top:122px}.desktop-note{top:228px}
.listening-state{justify-content:flex-start;inset:82px 30px 20px;gap:20px}.waiting-cursor{height:29px;width:2px;background:#6a8075}.listening-state p{max-width:230px}
.translation-options{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px;font-size:16px;color:#435d66}
.translation-options select{font:inherit;color:var(--ink);background:#fffdf6;border:1px solid #899e9b;border-radius:9px;min-height:44px;min-width:154px;padding:6px 35px 6px 12px;cursor:pointer}
.translation-options select:focus-visible{outline:3px solid #315b61;outline-offset:3px}
#languageHint{color:#4b626b;font-size:14px}
.site-footer>span:first-child{color:var(--white)}
body[data-palette=midnight] .floor{background:radial-gradient(ellipse at center,#a5b7ff32 0,#96a3e326 22%,transparent 58%);box-shadow:0 0 80px #7c90e720}
body[data-palette=midnight] .desktop-note{background:linear-gradient(125deg,#fcfcff,#e4e9f6);color:#2a3452;border-color:#eceeff;box-shadow:2px 3px 0 #a4afc7,6px 8px 0 #535d82,0 30px 75px #03041766}
body[data-palette=midnight] .key-face{background:linear-gradient(135deg,#d6ddf1,#f4f5fc 48%,#aab7d0);color:#303b5a}
body[data-palette=midnight] .label,body[data-palette=midnight] .listening-state{color:#4b646d}
body[data-palette=midnight] h2 em{color:#52618f}
body[data-palette=midnight] .source-paper{background:#fbfcff;border-color:#cbd2e1}
body[data-palette=midnight] .result-paper{background:linear-gradient(120deg,#edf0ff,#cfd9f5);border-color:#bbc6e1;box-shadow:0 3px 0 #a0acca,0 18px 35px #2736601c}
body[data-palette=midnight] .paper-label,body[data-palette=midnight] .result-controls{color:#505d7a}
body[data-palette=midnight] .spoken-request{background:#273457}
body[data-palette=midnight] .scene-arrow{color:#6878a5}
body[data-palette=midnight] [aria-pressed=true][data-mode]{color:#34426e;border-color:#34426e}
body[data-palette=midnight][data-mode=improve] #sourceText,body[data-palette=midnight][data-mode=translate] #sourceText{background:#e0e6f4;box-shadow:6px 0 #e0e6f4,-6px 0 #e0e6f4}
body[data-palette=ivory] .floor{background:radial-gradient(ellipse at center,#ad9b7330 0,#9aafa32b 22%,transparent 58%);box-shadow:0 0 80px #a8b7a71c}
body[data-palette=ivory] .floor i{border-color:#7c8e7838}
body[data-palette=ivory] .desktop-note{background:linear-gradient(125deg,#fffefa,#ecf0e5);color:#38483e;border-color:#fffdf5;box-shadow:2px 3px 0 #b6b9a3,6px 8px 0 #8f9b87,0 30px 60px #425d3d30}
body[data-palette=ivory] .rear-window{opacity:.86;border-color:#a6b4a577;box-shadow:0 20px 35px #557c4017,inset 1px 1px 1px #fffff8cc}
body[data-palette=ivory] .rear-top{border-color:#7e907630}
body[data-palette=ivory] .rear-lines i{background:#6c89752e}
body[data-palette=ivory] .scene-shadow{background:#55604445}
body[data-palette=ivory] .physical-key{box-shadow:0 8px 0 #a2a28c,0 9px 0 #727f6c,0 18px 32px #4b513733}
body[data-palette=ivory][data-phase=listening] .physical-key{box-shadow:0 3px 0 #a2a28c,0 4px 0 #727f6c,0 9px 18px #4b513733}
body[data-palette=ivory] .key-face{background:linear-gradient(135deg,#e4d6b3,#fff4d6 48%,#c3ceb5);color:#4a503b}
body[data-palette=ivory] .result-paper{background:linear-gradient(120deg,#fcf4df,#ebd8ac)}
body[data-palette=ivory] .spoken-request{background:#3e4b40}
body[data-palette=ivory] .ask-key{color:#efdaa5}
body[data-palette=ivory] h2 em{color:#775c2e}
body[data-palette=ivory] .paper-label,body[data-palette=ivory] .result-controls{color:#656044}
body[data-palette=ivory] .site-header a:focus-visible,body[data-palette=ivory] .hero button:focus-visible{outline-color:#74521b}
@media(max-width:1000px){.presence-scene .beam-field{width:940px}.rear-window{top:122px}.desktop-note{top:235px}}
@media(max-width:780px){.desktop-stage{height:520px;margin-top:35px}.display-edge{left:0;right:0}.camera-cutout,.presence-label{left:50%}.presence-scene .beam-field{left:50%;top:1px;width:980px;height:530px}.rear-window{top:99px}.desktop-note{top:158px}.stage-caption{bottom:0}.presence-label{top:50px}}
@media(max-width:580px){.study-bar{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:5px 12px}.study-bar>span{font-size:14px}.palette-switch{grid-column:1/-1;grid-row:2;justify-content:space-between;width:100%;gap:8px;margin:2px 0 0}.palette-switch button{flex:1;justify-content:center;min-height:40px;padding:5px 8px;font-size:16px}.study-bar>button{justify-self:end;font-size:14px;min-height:32px;min-width:0}.camera-cutout{width:136px;height:26px}.desktop-stage{height:545px;margin-top:28px}.rear-window{top:100px}.desktop-note{top:158px}.presence-scene .beam-field{width:1000px;height:520px}.presence-label{top:49px}.translation-options{gap:10px 14px}.translation-options #languageHint{flex-basis:100%}.listening-state{inset-inline:21px}}