:root{color-scheme:dark;background:#000}html,body{width:100%;min-height:100%;margin:0;background:#000;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.siri-page{position:relative;display:grid;place-items:center;min-height:100svh;background:#000}.siri-canvas{position:fixed;inset:0;display:block;width:100vw;height:100svh;background:#000;touch-action:none}.siri-hint{position:fixed;left:50%;bottom:max(32px,env(safe-area-inset-bottom));z-index:2;margin:0;transform:translate(-50%);color:#ffffffc7;font:500 15px/1 system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,sans-serif;letter-spacing:.2px;white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;text-shadow:0 1px 10px rgb(0 0 0 / .55)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ── corner overlays: byline (top-left) + credits (top-right) ───────────── */
.byline,
.credits{position:fixed;top:max(20px,env(safe-area-inset-top));z-index:3;
font:500 13px/1 system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,sans-serif;
letter-spacing:.2px;text-shadow:0 1px 10px rgb(0 0 0 / .55);user-select:none;-webkit-user-select:none}
.byline{left:24px;color:#ffffffc7;text-decoration:none;transition:color .25s ease}
.byline:hover{color:#fff}
.credits{right:24px;text-align:right}
.credits-label{display:block;color:#ffffff8c;cursor:default;transition:color .25s ease}
.credits:hover .credits-label,
.credits:focus-within .credits-label{color:#ffffffc7}
.credits-list{position:absolute;top:calc(100% + 10px);right:0;
display:flex;flex-direction:column;gap:8px;
opacity:0;transform:translateY(-4px);pointer-events:none;
transition:opacity .25s ease,transform .25s ease}
.credits-list nav{display:flex;flex-direction:column;gap:8px}
.credits-note{margin:4px 0 0;font-weight:400;font-size:12px;line-height:1.6;
color:#ffffff70;white-space:nowrap}
.credits:hover .credits-list,
.credits:focus-within .credits-list{opacity:1;transform:none;pointer-events:auto}
.credits-list a{color:#ffffffc7;text-decoration:none;white-space:nowrap;transition:color .2s ease}
.credits-list a:hover{color:#fff}
/* ── backdrop switcher: three quiet dots, top center ────────────────────── */
.backdrops{position:fixed;top:max(22px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);
z-index:3;display:flex;gap:10px;padding:4px}
.backdrops button{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
opacity:.45;transition:opacity .25s ease}
.backdrops button:hover{opacity:.8}
.backdrops button[aria-pressed="true"]{opacity:1}
/* dot color via custom property, restated on :hover at (0,2,1) specificity —
base.css ships a button:hover{background:...} that would paint them gray */
.backdrops button,.backdrops button:hover{background-color:var(--dot)}
.dot-white{--dot:#fff;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .15)}
.dot-black{--dot:#111;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .3)}
.dot-tahoe{--dot:#4a8ab8}
.dot-sonoma{--dot:#e09a52}
/* ── pill overlay: everything lives INSIDE the glass pill ─────────────────
ask panel (input + suggestion chips) and the streamed answer stack in one
grid cell. The WebGL panel IS the glass — nothing here gets its own
backdrop-filter; chips are quiet hairline capsules on the material. */
.pill-overlay{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
width:min(400px,76vw);display:grid;place-items:center;pointer-events:none}
.ask-panel,.answer-card{grid-area:1/1;width:100%;margin:0;
font:400 17px/1.45 system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,sans-serif;
letter-spacing:.1px;color:#fff;text-shadow:0 1px 6px rgb(0 0 0 / .4);
opacity:0;transition:opacity .3s ease;pointer-events:none}
.ask-panel.on{opacity:1;transition:opacity .4s ease .2s;pointer-events:auto}
.answer-card.on{opacity:1;transition:opacity .45s ease .25s;pointer-events:auto}
.ask-panel{display:flex;flex-direction:column;gap:18px}
.ask-form{width:100%;margin:0}
.ask-form input{width:100%;background:none;border:0;outline:none;padding:0;margin:0;
font:inherit;letter-spacing:inherit;color:#fff;caret-color:#fff;text-shadow:inherit}
.ask-form input::placeholder{color:#ffffff5e}
/* the answer scrolls inside the pill once it hits the square cap; the
fade vars are scroll-position-driven (main.js) so each edge only fades
when there is more text hiding behind it */
.answer-card{max-height:var(--answer-max,104px);overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:none;--fade-top:0px;--fade-bottom:0px;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade-top),#000 calc(100% - var(--fade-bottom)),transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade-top),#000 calc(100% - var(--fade-bottom)),transparent 100%)}
.answer-card::-webkit-scrollbar{display:none}
/* paced reveal: each segment condenses out of a blur (Apple Intelligence
materialize) — the pacer in main.js controls WHEN, this controls HOW */
.answer-card .reveal{opacity:0;animation:answer-reveal .5s ease-out forwards}
@keyframes answer-reveal{from{opacity:0;filter:blur(7px)}to{opacity:1;filter:blur(0)}}
@media (prefers-reduced-motion:reduce){.answer-card .reveal{animation:none;opacity:1}}
/* suggestion chips: text + hit area only — the glass body is rendered by the
WebGL glass pass as refractive capsules (renderer.chipLenses), so the DOM
stays fully transparent: no background, no border, no backdrop-filter */
.ask-chips{display:flex;gap:8px;flex-wrap:wrap}
.ask-chips button{
font:400 13px/1 system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,sans-serif;
letter-spacing:.1px;color:#ffffffd6;text-shadow:0 1px 4px rgb(0 0 0 / .35);
padding:9px 13px;border-radius:999px;border:0;cursor:pointer;
background:transparent;white-space:nowrap}
/* hover feedback lives entirely in the glass pass (the face whitens);
the :hover restatement outguns base.css's button:hover gray fill */
.ask-chips button:hover{background:transparent}
.ask-chips button:active{opacity:.75}