@font-face{font-family:"GC Sans";font-weight:300;src:url(./noto-300.woff2) format("woff2")}
@font-face{font-family:"GC Sans";font-weight:400;src:url(./noto-400.woff2) format("woff2")}
@font-face{font-family:"GC Sans";font-weight:500;src:url(./noto-500.woff2) format("woff2")}
@font-face{font-family:"GC Sans";font-weight:600;src:url(./noto-600.woff2) format("woff2")}
/* Motion: no-motion first; everything below only runs when the viewer allows motion.
   Timings: Material 3 emphasized-decelerate for entrances, 50-60 ms stagger (Alexa+ cards fade in left to right). */
:root { --ease-enter: cubic-bezier(.05,.7,.1,1); --ease-std: cubic-bezier(.2,0,0,1); }
@media (prefers-reduced-motion: no-preference) {
  .m-in { animation: m-in 380ms var(--ease-enter) both; animation-delay: calc(var(--i, 0) * 60ms); }
  @keyframes m-in { from { opacity: 0; transform: translateY(10px); } }
  .m-fade { animation: m-fade 300ms var(--ease-std) both; animation-delay: calc(var(--i, 0) * 60ms); }
  @keyframes m-fade { from { opacity: 0; } }
  .m-draw { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); animation: m-draw 1000ms var(--ease-enter) 200ms forwards; }
  @keyframes m-draw { to { stroke-dashoffset: 0; } }
  .m-pop { animation: m-pop 420ms cubic-bezier(.34,1.56,.64,1) both; animation-delay: var(--d, 0ms); }
  @keyframes m-pop { from { opacity: 0; transform: scale(.6); } }
  .m-plane { offset-rotate: auto; animation: m-plane 2200ms var(--ease-std) 500ms both; }
  @keyframes m-plane { from { offset-distance: 0%; } to { offset-distance: var(--to, 100%); } }
  .m-sun { animation: m-sun 1400ms var(--ease-enter) 150ms both; }
  @keyframes m-sun { from { transform: translateY(18px); opacity: 0; } }
  .m-pulse { animation: m-pulse 1600ms ease-in-out 2; }
  @keyframes m-pulse { 50% { transform: scale(1.04); } }
  /* Departure-board flip: each digit falls into place from its top edge, left to right. */
  .roll { display: inline-block; perspective: 320px; }
  .roll > span { display: inline-block; transform-origin: 50% 8%; backface-visibility: hidden; animation: flip 620ms cubic-bezier(.3,1.35,.5,1) both; animation-delay: calc(var(--k, 0) * 55ms + 140ms); }
  @keyframes flip { 0% { transform: rotateX(-100deg); opacity: 0; } 35% { opacity: 1; } 100% { transform: rotateX(0); } }
  /* AM/PM lands last and a little heavy: the one thing GateCue never lets you misread. */
  .ampm { display: inline-block; animation: stamp 560ms cubic-bezier(.2,1.5,.35,1) both; animation-delay: var(--stamp, 420ms); }
  @keyframes stamp { 0% { transform: scale(1.9); opacity: 0; filter: blur(3px); } 55% { opacity: 1; filter: none; } 100% { transform: scale(1); } }
}
@media (prefers-reduced-motion: reduce) {
  .m-plane { offset-distance: var(--to, 100%); }
}
/* Scene layers: slow, continuous, transform/opacity only. Each scene has at most a few moving parts. */
@media (prefers-reduced-motion: no-preference) {
  .scene .s-drift { animation: s-drift var(--dur, 80s) ease-in-out infinite alternate; }
  @keyframes s-drift { to { transform: translateX(var(--dx, 26px)); } }
  .scene .s-twinkle { animation: s-tw 3.2s ease-in-out var(--d, 0s) infinite; }
  @keyframes s-tw { 50% { opacity: .2; } }
  .scene .s-blink { animation: s-blink 2.4s ease-in-out var(--d, 0s) infinite; }
  @keyframes s-blink { 50% { opacity: .35; } }
  .scene .s-beacon { animation: s-beacon 1.6s steps(1) infinite; }
  @keyframes s-beacon { 50% { opacity: 0; } }
  .scene .s-glow { animation: s-glow 5s ease-in-out infinite; }
  @keyframes s-glow { 50% { opacity: .82; } }
  .scene .s-sun { animation: s-rise 1600ms var(--ease-enter) 100ms both; }
  @keyframes s-rise { from { transform: translateY(14px); opacity: 0; } }
  .scene .s-taxi { animation: s-taxi 16s ease-in-out infinite alternate; }
  @keyframes s-taxi { from { transform: translateX(-10px); } to { transform: translateX(8px); } }
  .scene .s-climb { animation: s-climb 9s ease-in-out infinite alternate; }
  @keyframes s-climb { from { transform: translate(-6px, 4px); } to { transform: translate(8px, -4px); } }
  .scene .s-idle { animation: s-idle 1.8s ease-in-out infinite; }
  @keyframes s-idle { 50% { transform: translateY(.5px); } }
  .journey .j-car { animation: j-car 1.6s var(--ease-enter) 300ms both; }
  @keyframes j-car { from { transform: translateX(0); } to { transform: translateX(440px); } }
  .push { animation: push 14s ease-in-out infinite alternate; transform-origin: 60% 60%; }
  @keyframes push { from { transform: scale(1); } to { transform: scale(1.06); } }
}
@media (prefers-reduced-motion: reduce) { .journey .j-car { transform: translateX(440px); } }

/* AM is sunrise gold, PM is dusk violet, everywhere GateCue shows a time over a picture. */
.ampm.am { color: #FFD98A; } .ampm.pm { color: #CDBDFF; }

/* Simulator chrome modelled on real Alexa+ Echo Show captures (aboutamazon.com): black status bar, navy conversation sheet with a
   soft blue glow, grab handle, round history/keyboard buttons, reply text at a 5% margin, slate follow-up chips, blue light bar. */
:root { --bg:#070b10; --chrome:#12181f; --text:#e8edf3; --muted:#9aa6b4; --sheet:#0E1A27; --glow:#124F70; --pill:#1A3A55; --chip:#2B4359; --blue:#2F6BE6; }
:root[data-theme="light"] { --sheet:#F2F5F9; --glow:#BFD8F0; --pill:#DCE7F3; --chip:#E1E9F2; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font: 15px/1.4 "GC Sans", system-ui, sans-serif; height:100vh; display:flex; flex-direction:column; }
.bar { display:flex; gap:14px; align-items:center; padding:10px 16px; background:var(--chrome); flex-wrap:wrap; }
.bar nav { display:flex; gap:6px; flex-wrap:wrap; }
.bar button, .say button { background:#232b36; color:#e8edf3; border:0; border-radius:999px; padding:7px 12px; font:inherit; cursor:pointer; }
.bar button[aria-pressed="true"] { background:#e8edf3; color:#0b0f14; font-weight:600; }
#status { color:var(--muted); margin-left:auto; font-size:13px; }
.stage { flex:1; min-height:0; display:flex; justify-content:center; align-items:center; overflow:hidden; }
.frame { flex:none; background:#030405; border-radius:40px; padding:30px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.screen { position:relative; overflow:hidden; border-radius:10px; background:#000; display:flex; flex-direction:column; }
/* Echo Show layout, in device pixels (1280x800 logical) */
.statusbar { height:100px; flex:none; display:flex; align-items:center; gap:24px; padding:0 64px; background:#000; color:#dfe6ee; }
.round { width:56px; height:56px; border-radius:50%; background:#1C232C; display:grid; place-items:center; }
.round svg { width:28px; height:28px; fill:none; stroke:#dfe6ee; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.weather { margin-left:auto; display:flex; align-items:center; gap:10px; font-size:40px; font-weight:300; }
.weather svg { width:44px; height:44px; } .weather .sun { fill:#FFC940; } .weather .cloud { fill:#E6ECF2; }
.clock { font-size:48px; font-weight:300; letter-spacing:.01em; }
.sheet { position:relative; flex:1; min-height:0; background:radial-gradient(120% 90% at 85% 115%, var(--glow) 0%, transparent 55%), var(--sheet); display:flex; flex-direction:column; }
.handle { width:84px; height:6px; border-radius:6px; background:#6E767D; margin:14px auto 0; opacity:.8; }
.sheet-tools { position:absolute; right:64px; top:26px; display:flex; gap:20px; }
.sheet-tools .round { background:#25303C; }
.convo { flex:1; overflow-y:auto; padding:40px 64px 60px; display:flex; flex-direction:column; gap:24px; scroll-behavior:smooth; scrollbar-width:none; }
.convo::-webkit-scrollbar { display:none; }
.turn p { margin:0; }
.turn.user { align-self:flex-end; max-width:70%; background:var(--pill); color:#fff; padding:12px 24px; border-radius:30px; font-size:26px; }
:root[data-theme="light"] .turn.user { color:#0F1419; }
.turn.user.tap::before { content:"Tapped "; opacity:.65; }
.turn.alexa { color:#fff; }
:root[data-theme="light"] .turn.alexa { color:#0F1419; }
.turn.alexa .say-text { font-size:32px; line-height:1.3; max-width:78%; font-weight:400; }
.turn.alexa .say-text.add { font-size:24px; color:rgba(255,255,255,.78); margin-top:6px; }
:root[data-theme="light"] .turn.alexa .say-text.add { color:rgba(11,21,34,.72); }
body[data-device="mobile"] .turn.alexa .say-text.add { font-size:15px; }
@media (prefers-reduced-motion: no-preference) {
  .turn { animation: tin 420ms cubic-bezier(.05,.7,.1,1) both; }
  @keyframes tin { from { opacity:0; transform:translateY(12px); } }
}
iframe.card { display:block; width:100%; border:0; margin-top:22px; background:transparent; min-height:60px; color-scheme: normal; }
.followups { display:flex; gap:14px; margin-top:22px; flex-wrap:wrap; align-items:center; }
.followups .round { width:48px; height:48px; background:var(--chip); }
.followups .round svg { width:22px; height:22px; }
.chip { background:var(--chip); color:#fff; border:0; border-radius:999px; padding:0 26px; height:52px; font:inherit; font-size:22px; cursor:pointer; }
:root[data-theme="light"] .chip { color:#0F1419; }
.thinking { display:flex; gap:10px; height:32px; align-items:center; }
.thinking i { width:12px; height:12px; border-radius:50%; background:#5AC8FA; animation: dot 1s ease-in-out infinite; }
.thinking i:nth-child(2){ animation-delay:.15s } .thinking i:nth-child(3){ animation-delay:.3s }
@keyframes dot { 50% { transform:translateY(-8px); opacity:.5; } }
.watching .say-text { color:#9aa6b4; font-size:24px !important; }
.lightbar { position:absolute; left:0; right:0; bottom:0; height:6px; background:linear-gradient(90deg, #0F467D, #0DB4E3 50%, #0F467D); opacity:0; transition:opacity .4s; }
body[data-speaking="1"] .lightbar { opacity:1; box-shadow:0 0 28px #0DB4E3; }
body[data-notify="1"] .lightbar { opacity:1; background:linear-gradient(90deg,#8a5a00,#FFB547 50%,#8a5a00); box-shadow:0 0 28px #FFB547; }
/* Phone: Alexa app */
body[data-device="mobile"] .frame { border-radius:56px; padding:18px; }
body[data-device="mobile"] .statusbar { height:54px; padding:0 22px; background:transparent; position:absolute; top:0; left:0; right:0; z-index:2; }
body[data-device="mobile"] .statusbar .menu, body[data-device="mobile"] .weather { display:none; }
body[data-device="mobile"] .clock { font-size:17px; font-weight:600; }
body[data-device="mobile"] .sheet { padding-top:54px; }
body[data-device="mobile"] .handle, body[data-device="mobile"] .sheet-tools { display:none; }
body[data-device="mobile"] .convo { padding:16px 16px 28px; gap:14px; }
body[data-device="mobile"] .turn.user { font-size:16px; padding:9px 14px; border-radius:20px; max-width:85%; }
body[data-device="mobile"] .turn.alexa .say-text { font-size:18px; max-width:100%; }
body[data-device="mobile"] iframe.card { margin-top:12px; }
body[data-device="mobile"] .followups { gap:8px; margin-top:12px; }
body[data-device="mobile"] .followups .round { display:none; }
body[data-device="mobile"] .chip { height:38px; font-size:15px; padding:0 16px; }
/* Voice only: round speaker with light ring */
body[data-device="voice"] .frame { border-radius:50%; background:radial-gradient(circle at 50% 38%, #2b3038, #0d0f12 72%); }
body[data-device="voice"] .screen { background:transparent; border-radius:50%; }
body[data-device="voice"] .statusbar, body[data-device="voice"] .handle, body[data-device="voice"] .sheet-tools, body[data-device="voice"] .followups { display:none; }
body[data-device="voice"] .sheet { background:transparent; }
body[data-device="voice"] .convo { padding:110px 76px; text-align:center; }
body[data-device="voice"] .turn:not(:nth-last-child(-n+2)) { display:none; }
body[data-device="voice"] .turn.user { align-self:center; background:transparent; color:#9aa6b4; font-size:18px; padding:0; }
body[data-device="voice"] .turn.alexa .say-text { font-size:21px; max-width:100%; }
body[data-device="voice"] .lightbar { left:15%; right:15%; bottom:48px; height:10px; border-radius:10px; opacity:.35; }
.fullscreen { position:absolute; inset:0; background:var(--sheet); z-index:5; padding:24px 64px 40px; overflow:auto; overscroll-behavior:contain; }
.fullscreen iframe.card { margin:0; }
.fullscreen .close { position:sticky; top:0; display:block; margin:0 -24px 24px auto; z-index:6; box-shadow:0 6px 24px rgba(0,0,0,.4); font:inherit; font-size:22px; padding:12px 24px; border-radius:999px; border:0; background:#25303C; color:#fff; }
.modal { position:absolute; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; justify-content:center; z-index:10; }
.modal[hidden], .fullscreen[hidden] { display:none; }
.sheet2 { width:min(880px,94%); background:#16273A; color:#fff; border-radius:34px 34px 0 0; padding:34px 44px 40px; font-size:26px; }
@media (prefers-reduced-motion: no-preference) { .sheet2 { animation: up 380ms cubic-bezier(.05,.7,.1,1) both; } @keyframes up { from { transform: translateY(40px); opacity:0; } } }
.sheet2 h2 { font-size:30px; font-weight:400; margin:0 0 20px; line-height:1.3; }
.sheet2 .sub { color:#C3D0DD; margin:0 0 20px; font-size:22px; }
.sheet2 fieldset { border:0; padding:0; margin:0 0 16px; } .sheet2 legend { color:#C3D0DD; margin-bottom:10px; font-size:22px; }
.sheet2 .opt, .sheet2 .check { display:flex; gap:16px; align-items:center; padding:14px 20px; border-radius:20px; background:#1E3246; margin-bottom:10px; min-height:66px; cursor:pointer; }
.sheet2 .check { border:2px solid #FF8A7A; }
.sheet2 input[type=checkbox], .sheet2 input[type=radio] { width:30px; height:30px; accent-color:#2F6BE6; }
.sheet2 .acts { display:flex; gap:14px; margin-top:24px; justify-content:flex-end; }
.sheet2 .acts button { font:inherit; border:0; border-radius:999px; padding:0 32px; height:64px; background:#2B4359; color:#fff; cursor:pointer; }
.sheet2 .acts .primary { background:#2F6BE6; }
.sheet2 .acts .primary:disabled { opacity:.45; cursor:not-allowed; }
.lock { display:inline-flex; gap:8px; align-items:center; }
body[data-device="mobile"] .sheet2 { font-size:16px; padding:22px; border-radius:22px 22px 0 0; }
body[data-device="mobile"] .sheet2 h2 { font-size:18px; } body[data-device="mobile"] .sheet2 .sub, body[data-device="mobile"] .sheet2 legend { font-size:14px; }
body[data-device="mobile"] .sheet2 .opt, body[data-device="mobile"] .sheet2 .check { min-height:48px; padding:10px 14px; }
body[data-device="mobile"] .sheet2 input { width:20px !important; height:20px !important; }
body[data-device="mobile"] .sheet2 .acts button { height:46px; padding:0 18px; }
.say { display:flex; gap:8px; padding:10px 16px; background:var(--chrome); }
.say input { flex:1; background:#0f141a; color:#e8edf3; border:1px solid #2a313c; border-radius:999px; padding:10px 16px; font:inherit; }
.caption { position:absolute; left:50%; bottom:26px; transform:translate(-50%, 12px); max-width:80%; background:rgba(4,12,20,.72); color:#e8f3ff; font-size:24px; padding:10px 26px; border-radius:999px; opacity:0; transition:opacity .25s, transform .35s cubic-bezier(.05,.7,.1,1); pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:4; }
.caption.on { opacity:1; transform:translate(-50%, 0); }
body[data-device="mobile"] .caption { font-size:14px; bottom:16px; padding:6px 14px; }
body[data-device="voice"] .caption { display:none; }
body[data-device="mobile"] .convo { padding-top:16px; }
.turn.alexa:first-child .say-text { padding-right:150px; }
/* The newest response can always scroll to the top of the sheet, like a fresh screen on the device. */
.convo > .turn.alexa:last-child { min-height: 88%; }
:root[data-theme="light"] .followups .round { background:#DCE5EF; }
:root[data-theme="light"] .followups .round svg { stroke:#0F1419; }
.scene-select { background:#232b36; color:#e8edf3; border:0; border-radius:999px; padding:7px 12px; font:inherit; }
.convo > .turn.old { display:none; }
body.history .convo > .turn.old { display:block; opacity:.55; }
.sheet-tools { pointer-events:auto; } .sheet-tools .round { cursor:pointer; }

/* ---- Premium pass: stage, device, ambient home, wake, light bar ------------------------------------- */
body { background: radial-gradient(1200px 700px at 50% 38%, #13233A 0%, #0A1220 45%, #05080E 100%); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(600px 300px at 50% 92%, rgba(13,180,227,.10), transparent 70%); }
.bar { background: rgba(10,16,26,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.06); position: relative; z-index: 2; }
.bar strong { letter-spacing: .01em; }
.bar button, .say button, .scene-select { transition: background .2s, color .2s; }
.bar button:hover, .scene-select:hover { background: #2d3746; }
.frame { background: linear-gradient(160deg, #1a1d22 0%, #0b0c0e 40%, #050607 100%); box-shadow: 0 50px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05) inset, 0 1px 0 rgba(255,255,255,.08) inset; }
.frame::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -34px; height: 30px; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); filter: blur(6px); pointer-events: none; }
.frame { position: relative; }
.say { background: rgba(10,16,26,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.06); position: relative; z-index: 2; }
.say input:focus { outline: 2px solid #2F6BE6; outline-offset: 1px; }

/* Ambient home screen (idle). */
.ambient { position: absolute; inset: 0; z-index: 3; color: #fff; overflow: hidden; transition: opacity .6s cubic-bezier(.2,0,0,1), transform .8s cubic-bezier(.05,.7,.1,1); }
.amb-scene, .amb-scene img, .amb-scene video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.amb-scene video { opacity: 0; transition: opacity 1s; } .amb-scene video.on { opacity: 1; }
.amb-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,16,.55) 0%, rgba(4,8,16,0) 38%, rgba(4,8,16,0) 60%, rgba(4,8,16,.55) 100%); }
@media (prefers-reduced-motion: no-preference) { .amb-scene img, .amb-scene video { animation: push 30s ease-in-out infinite alternate; transform-origin: 55% 60%; } }
.amb-top { position: absolute; top: 34px; left: 64px; right: 64px; display: flex; justify-content: space-between; align-items: center; font-size: 30px; font-weight: 300; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.amb-wx { display: flex; align-items: center; gap: 10px; } .amb-wx svg { width: 42px; height: 42px; } .amb-wx .sun { fill: #FFC940; } .amb-wx .cloud { fill: #E6ECF2; }
.amb-time { position: absolute; left: 60px; top: 96px; font-size: 180px; font-weight: 300; line-height: 1; letter-spacing: -.02em; text-shadow: 0 4px 40px rgba(0,0,0,.35); font-variant-numeric: tabular-nums; }
.amb-card { position: absolute; left: 64px; bottom: 56px; max-width: 620px; display: grid; gap: 6px; padding: 22px 28px; border-radius: 26px; background: rgba(8,14,26,.46); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(255,255,255,.12); }
.amb-k { font-size: 20px; color: #9FD8F2; letter-spacing: .02em; } .amb-v { font-size: 28px; line-height: 1.3; }
body.awake .ambient { opacity: 0; transform: scale(1.04); pointer-events: none; }
.sheet { transition: transform .7s cubic-bezier(.05,.7,.1,1), opacity .4s; }
body:not(.awake) .sheet { transform: translateY(40px); opacity: 0; }
body[data-device="voice"] .ambient { display: none; }
body[data-device="mobile"] .amb-top { top: 64px; left: 22px; right: 22px; font-size: 16px; }
body[data-device="mobile"] .amb-wx svg { width: 22px; height: 22px; }
body[data-device="mobile"] .amb-time { left: 20px; top: 96px; font-size: 84px; }
body[data-device="mobile"] .amb-card { left: 16px; right: 16px; bottom: 28px; padding: 14px 16px; border-radius: 18px; }
body[data-device="mobile"] .amb-k { font-size: 13px; } body[data-device="mobile"] .amb-v { font-size: 17px; }

/* Light bar: Alexa-style flowing cyan-blue; brighter while listening, amber for a proactive notification. */
.lightbar { height: 8px; overflow: hidden; background: none; opacity: 0; transition: opacity .35s; z-index: 6; }
.lightbar i { position: absolute; inset: 0; width: 300%; left: -100%; background: linear-gradient(90deg, #0B3F7A, #1F6FE0 18%, #12C3EE 33%, #7BE7FF 40%, #12C3EE 47%, #1F6FE0 62%, #0B3F7A 80%, #1F6FE0 100%); }
body[data-speaking="1"] .lightbar, body.listening .lightbar { opacity: 1; box-shadow: 0 0 36px 4px rgba(18,195,238,.55); }
body.listening .lightbar { height: 12px; }
body[data-notify="1"] .lightbar { opacity: 1; box-shadow: 0 0 36px 4px rgba(255,181,71,.55); }
body[data-notify="1"] .lightbar i { background: linear-gradient(90deg, #6b4300, #FFB547 30%, #FFE3A3 40%, #FFB547 50%, #6b4300 80%, #FFB547 100%); }
@media (prefers-reduced-motion: no-preference) {
  body[data-speaking="1"] .lightbar i, body.listening .lightbar i, body[data-notify="1"] .lightbar i { animation: flow 1.8s linear infinite; }
  @keyframes flow { to { transform: translateX(33.333%); } }
  .amb-card { animation: floatin 900ms cubic-bezier(.05,.7,.1,1) 300ms both; }
  @keyframes floatin { from { opacity: 0; transform: translateY(16px); } }
}

/* Narrow windows: compact header that scrolls sideways instead of stacking three rows high. */
@media (max-width: 760px) {
  .bar { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 8px 10px; scrollbar-width: none; }
  .bar::-webkit-scrollbar { display: none; }
  .bar > * { flex: none; }
  .bar strong { display: none; }
  #status { display: none; }
  .bar button, .scene-select { padding: 6px 10px; font-size: 13px; }
  .say { padding: 8px 10px; } .say input { font-size: 14px; }
}

/* ==== Motion system ===================================================================================
   One idea runs through everything: the GateCue mark is a gate and a dot (you). The dot runs the arch while
   Alexa thinks, the gate opens onto the home screen, and every time is tagged AM (sunrise gold) or PM (dusk violet).
   Each sequence is short, lands on a clean static frame, and is skipped under prefers-reduced-motion. */
:root { --am:#FFD98A; --am-bg:rgba(255,210,122,.16); --pm:#CDBDFF; --pm-bg:rgba(185,163,255,.18); --cue:#FFB547; }
:root[data-theme="light"] { --am:#8A5200; --am-bg:#FFF1DC; --pm:#5B3FC4; --pm-bg:#EEE9FF; }

/* Reply typography */
.say-text .w { display:inline-block; }
.say-text .tm { font-variant-numeric:tabular-nums; font-weight:500; white-space:nowrap; }
.say-text .ap { display:inline-block; font-size:.6em; font-weight:600; letter-spacing:.05em; padding:.1em .42em .12em; border-radius:.55em; vertical-align:.2em; margin-left:.08em; }
.ap.am { color:var(--am); background:var(--am-bg); } .ap.pm { color:var(--pm); background:var(--pm-bg); }
.say-text .dp { background:linear-gradient(90deg, currentColor, currentColor) 0 100% / 100% 2px no-repeat; padding-bottom:.04em; }
.say-text .dp.am { background-image:linear-gradient(90deg, var(--am), var(--am)); } .say-text .dp.pm { background-image:linear-gradient(90deg, var(--pm), var(--pm)); }
@media (prefers-reduced-motion: no-preference) {
  .say-text .w { animation: w-in 600ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--w, 0) * 26ms); }
  @keyframes w-in { from { opacity:0; transform:translateY(.32em); filter:blur(6px); } }
  .say-text .tm .ap { animation: ap-pop 560ms cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(var(--w, 0) * 26ms + 300ms); }
  @keyframes ap-pop { from { transform:scale(1.8); opacity:0; } }
  .say-text .dp { animation: dp-line 700ms cubic-bezier(.2,.8,.2,1) both, w-in 600ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--w, 0) * 26ms + 260ms), calc(var(--w, 0) * 26ms); }
  @keyframes dp-line { from { background-size:0 2px; } }
}

/* Thinking: the dot runs the gate's arch, trailing a short comet of light. */
.thinking.cue { height:auto; }
.thinking.cue svg { width:46px; height:48px; overflow:visible; }
.cue-track { fill:none; stroke:rgba(255,255,255,.14); stroke-width:3.2; stroke-linecap:round; }
:root[data-theme="light"] .cue-track { stroke:rgba(11,21,34,.14); }
.cue-comet { fill:none; stroke:var(--cue); stroke-width:3.2; stroke-linecap:round; stroke-dasharray:18 200; filter:drop-shadow(0 0 6px rgba(255,181,71,.7)); animation: comet 1.5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes comet { 0% { stroke-dashoffset:18; } 50% { stroke-dashoffset:-82; } 100% { stroke-dashoffset:18; } }
.cue-dot { fill:#FFF3C9; filter:drop-shadow(0 0 8px rgba(255,181,71,.9)); }
body[data-device="mobile"] .thinking.cue svg { width:30px; height:32px; }
@media (prefers-reduced-motion: reduce) { .cue-comet { animation:none; stroke-dasharray:none; opacity:.5; } }

/* Light bar while thinking: a single bright comet sweeping, distinct from the flowing speaking state. */
body.is-thinking .lightbar { opacity:1; box-shadow:0 0 30px 2px rgba(18,195,238,.35); }
body.is-thinking .lightbar i { background:linear-gradient(90deg, transparent 0 41%, #1F6FE0 45%, #7BE7FF 49%, #fff 50%, #7BE7FF 51%, #1F6FE0 55%, transparent 59% 100%); }
@media (prefers-reduced-motion: no-preference) {
  body.is-thinking .lightbar i { animation: sweep 1.15s cubic-bezier(.45,0,.55,1) infinite alternate; }
  @keyframes sweep { from { transform:translateX(-16%); } to { transform:translateX(16%); } }
}

/* Responses arrive from depth: the new screen rises out of the sheet, the old one has already stepped back into history. */
@media (prefers-reduced-motion: no-preference) {
  .sheet { perspective:1400px; }
  .turn.alexa { animation: depth-in 680ms cubic-bezier(.12,.75,.15,1) both; transform-origin:50% 0%; }
  @keyframes depth-in { from { opacity:0; transform:translate3d(0,46px,-180px) rotateX(9deg); filter:blur(5px); } }
  .turn.alexa iframe.card { animation: card-in 760ms cubic-bezier(.12,.75,.15,1) 120ms both; }
  @keyframes card-in { from { opacity:0; transform:translateY(22px) scale(.985); } }
  .followups { animation: chips-in 560ms cubic-bezier(.12,.75,.15,1) 520ms both; }
  @keyframes chips-in { from { opacity:0; transform:translateY(10px); } }
  .turn.proactive { animation: depth-in 680ms cubic-bezier(.12,.75,.15,1) both, glowpulse 1.8s ease-out 400ms 1; }
  @keyframes glowpulse { 30% { filter:drop-shadow(0 0 24px rgba(255,181,71,.35)); } }
}

/* Wake: the home screen dollies away behind the rising sheet while its clock flies into the status bar. */
.ambient { transition: opacity .7s cubic-bezier(.2,0,0,1), transform .9s cubic-bezier(.3,0,.1,1), filter .9s; }
body.awake .ambient { transform:scale(1.09); filter:blur(10px) brightness(.8); }
.clock-ghost { position:absolute; z-index:12; margin:0; pointer-events:none; color:#fff; will-change:transform; }
body[data-device="mobile"] .clock-ghost { color:#fff; }

/* Opening: the mark draws, the dot lands, the name sets, then the gate opens onto the day. */
.intro { position:absolute; inset:0; z-index:8; display:grid; place-content:center; justify-items:center; gap:0; background:radial-gradient(60% 60% at 50% 45%, #0f1c2e 0%, #05080e 70%); cursor:pointer; }
.intro-mark { width:120px; height:131px; overflow:visible; }
.intro-mark .arch { fill:none; stroke:var(--cue); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; filter:drop-shadow(0 0 3px rgba(255,181,71,.6)); animation: i-draw 820ms cubic-bezier(.6,0,.2,1) 120ms forwards; }
@keyframes i-draw { to { stroke-dashoffset:0; } }
.intro-mark .dot { fill:var(--cue); transform-box:fill-box; transform-origin:50% 100%; animation: i-drop 640ms cubic-bezier(.3,0,.3,1) 600ms both; }
@keyframes i-drop { 0% { transform:translateY(-34px) scale(.6); opacity:0; } 55% { transform:translateY(0) scale(1.15,.8); opacity:1; } 75% { transform:translateY(-3px) scale(.95,1.06); } 100% { transform:none; } }
.intro-word { margin-top:26px; font-size:58px; font-weight:500; letter-spacing:-.01em; color:#fff; display:flex; }
.intro-word span { display:inline-block; animation: i-letter 620ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(760ms + var(--k) * 40ms); }
@keyframes i-letter { from { opacity:0; transform:translateY(18px) rotateX(-70deg); filter:blur(6px); } }
.intro-tag { margin-top:10px; font-size:22px; color:#9fb3c8; letter-spacing:.02em; animation: i-letter 700ms cubic-bezier(.2,.8,.2,1) 1080ms both; }
body[data-device="mobile"] .intro-mark { width:72px; height:79px; }
body[data-device="mobile"] .intro-word { font-size:34px; margin-top:16px; } body[data-device="mobile"] .intro-tag { font-size:14px; }

/* Home-screen glance: the next trip, with its arc drawn and the plane flying it once. */
.amb-trip { position:absolute; right:64px; bottom:56px; width:390px; display:grid; gap:6px; padding:20px 26px 22px; border-radius:26px; background:rgba(8,14,26,.46); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); border:1px solid rgba(255,255,255,.12); }
.amb-trip[hidden] { display:none; }
.amb-route { display:flex; align-items:center; gap:10px; font-size:22px; letter-spacing:.06em; }
.amb-route svg { flex:1; height:40px; overflow:visible; }
.g-track { fill:none; stroke:rgba(255,255,255,.25); stroke-width:2; stroke-dasharray:2 6; stroke-linecap:round; }
.g-line { fill:none; stroke:var(--cue); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; }
.g-plane { fill:#fff; }
.amb-trip .amb-v { font-size:28px; } .amb-trip .amb-s { font-size:20px; color:#c9d8ea; }
.amb-trip .ap { display:inline-block; font-size:.6em; font-weight:600; letter-spacing:.05em; padding:.1em .42em .12em; border-radius:.55em; vertical-align:.2em; margin-left:.08em; }
.amb-trip .ap.am { color:#FFD98A; background:rgba(255,210,122,.16); } .amb-trip .ap.pm { color:#CDBDFF; background:rgba(185,163,255,.18); }
.amb-trip .dp.am, .amb-trip .dp.pm { background:none; }
@media (prefers-reduced-motion: no-preference) {
  .amb-trip:not([hidden]) { animation: floatin 900ms cubic-bezier(.05,.7,.1,1) 500ms both; }
  .g-line { stroke-dashoffset:1; animation: i-draw 2.4s cubic-bezier(.4,0,.2,1) 900ms forwards; }
}
body[data-device="mobile"] .amb-trip { left:16px; right:16px; width:auto; bottom:142px; padding:12px 16px; border-radius:18px; gap:2px; }
body[data-device="mobile"] .amb-route { font-size:13px; } body[data-device="mobile"] .amb-route svg { height:24px; }
body[data-device="mobile"] .amb-trip .amb-v { font-size:17px; } body[data-device="mobile"] .amb-trip .amb-s { font-size:13px; }
body.intro-on .amb-card, body.intro-on .amb-trip, body.intro-on .amb-time, body.intro-on .amb-top { animation:none !important; opacity:0; }
@media (prefers-reduced-motion: no-preference) {
  .amb-time { animation: amb-time-in 900ms cubic-bezier(.12,.75,.15,1) 120ms both; }
  .amb-top { animation: floatin 800ms cubic-bezier(.05,.7,.1,1) 220ms both; }
  @keyframes amb-time-in { from { opacity:0; transform:translateY(24px); filter:blur(8px); letter-spacing:.04em; } }
}

/* Push-to-talk */
.say .mic { width:42px; height:42px; padding:0; display:grid; place-items:center; border-radius:50%; background:#232b36; flex:none; }
.say .mic svg { width:20px; height:20px; fill:none; stroke:#e8edf3; stroke-width:2; stroke-linecap:round; }
.say .mic[aria-pressed="true"] { background:#12C3EE; box-shadow:0 0 0 6px rgba(18,195,238,.22); }
.say .mic[aria-pressed="true"] svg { stroke:#04121c; }
@media (prefers-reduced-motion: no-preference) { body.mic-on .say .mic { animation: micpulse 1.2s ease-in-out infinite; } @keyframes micpulse { 50% { box-shadow:0 0 0 12px rgba(18,195,238,.08); } } }
.bar #voice[aria-pressed="false"] { opacity:.7; }