/* ===== app/globals.css ===== */
:root {
  --black: #050507;
  --deep-black: #0a0a0a;
  --graphite: #1a1a1d;
  --glass: rgba(31,31,39,.46);
  --glass-strong: rgba(28,28,35,.72);
  --white: #f7f7f8;
  --silver: #aaaab4;
  --muted: #777783;
  --purple: #8b5cf6;
  --purple-light: #a78bfa;
  --purple-shadow: #3e2a78;
  --focus-blue: #68c9ff;
  --focus-blue-soft: rgba(104,201,255,.18);
  --line: rgba(255,255,255,.13);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-compact: 12px;
  --radius-control: 16px;
  --radius-card: 22px;
  --radius-hero: 28px;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --ease-enter: cubic-bezier(.16,1,.3,1);
  --ease-exit: cubic-bezier(.4,0,1,1);
  --ease-focus: cubic-bezier(.22,.8,.2,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #030305; color: var(--white); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; }
button, textarea, input { font: inherit; }
button { cursor: pointer; }

.experience-shell { min-height: 100vh; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 48%,#171421 0, #07070b 35%,#020203 73%); }
.device { position:relative; height:min(844px,calc(100vh - 44px)); width:auto; aspect-ratio:390/844; overflow:hidden; transform:translateZ(0); border:1px solid rgba(255,255,255,.17); border-radius:52px; background:var(--black); box-shadow:0 55px 140px #000,inset 0 0 0 7px rgba(255,255,255,.035); }
.screen { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% -10%,rgba(105,88,173,.13),transparent 40%),var(--black); animation: enter .48s cubic-bezier(.22,.8,.22,1); }
.screen { scrollbar-width:none; }
.screen::-webkit-scrollbar { display:none; }
@keyframes enter { from { opacity:0; transform:scale(.988) } to { opacity:1; transform:scale(1) } }
.home-indicator { position:absolute; z-index:50; bottom:8px; left:50%; width:118px; height:4px; transform:translateX(-50%); border-radius:3px; background:rgba(255,255,255,.65); }

.brand-mark { display:block; object-fit:contain; }
.brand-mark.small { width:31px; height:31px; }
.brand-mark.regular { width:80px; height:80px; }
.brand-mark.large { width:126px; height:126px; filter:drop-shadow(0 0 32px rgba(149,134,255,.16)); }
.wordmark { display:block; width:57px; height:auto; }

.glass-panel, .glass-button, .circle-control, .glass-nav {
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 45px rgba(0,0,0,.22);
  backdrop-filter:blur(28px) saturate(130%);
  -webkit-backdrop-filter:blur(28px) saturate(130%);
}
.primary-button { position:relative; width:100%; height:54px; border:1px solid rgba(255,255,255,.9); border-radius:18px; color:#09090c; background:linear-gradient(180deg,#fff 0%,#f4f4f7 62%,#dedee3 100%); box-shadow:0 3px 0 #b6b6be,0 11px 25px rgba(0,0,0,.36),inset 0 1px 1px #fff,inset 0 -1px 1px rgba(0,0,0,.08); font-weight:680; transition:transform .16s var(--ease-standard),box-shadow .16s var(--ease-standard); }
.primary-button:active { transform:translateY(2px) scale(.985); box-shadow:0 1px 0 #b6b6be,0 6px 15px rgba(0,0,0,.32),inset 0 1px 1px #fff; }
.primary-button:disabled { opacity:.35; }
.quiet-button { border:0; background:none; color:#b5b5be; padding:13px; font-size:13px; }
.circle-control { width:44px; height:44px; padding:0; display:grid; place-items:center; border-radius:50%; color:var(--white); font-size:27px; line-height:1; transition:transform .16s var(--ease-standard),background-color .16s var(--ease-standard); }
.circle-control:active { transform:scale(.96); }
.glass-button { color:var(--white); }

.welcome-screen { padding:72px 26px 36px; display:flex; flex-direction:column; }
.welcome-screen::after { content:""; position:absolute; inset:-35px; background:linear-gradient(180deg,rgba(5,5,7,.38) 0%,rgba(5,5,7,.9) 54%,#050507 78%),url("/assets/prompt-cinema-diptych.png") center 20%/cover; filter:blur(14px) saturate(.7); opacity:.22; transform:scale(1.08); }
.aurora { position:absolute; border-radius:50%; filter:blur(22px); }
.welcome-aurora { width:340px; height:340px; left:25px; top:-62px; background:radial-gradient(circle,rgba(105,83,189,.22),transparent 66%); }
.welcome-brand { z-index:1; display:grid; justify-items:center; margin-top:20px; }
.welcome-brand .wordmark { width:80px; margin-top:11px; }
.welcome-message { z-index:1; margin-top:auto; }
.welcome-message h1 { margin:0 0 16px; font-size:37px; line-height:1.02; letter-spacing:-.052em; }
.welcome-message p { margin:0; max-width:300px; color:var(--silver); font-size:15px; line-height:1.5; }
.welcome-actions { z-index:1; display:grid; margin-top:30px; text-align:center; }
.welcome-actions span { color:#666671; font-size:10px; }
.welcome-actions .quiet-button { text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(255,255,255,.35); }

.auth-screen { padding:58px 26px 36px; text-align:center; }
.close-control { position:absolute; top:24px; left:22px; }
.auth-screen>.close-control{z-index:12}
.close-glyph { position:relative; display:block; width:14px; height:14px; }
.close-glyph i { position:absolute; top:6px; left:0; width:14px; height:1.5px; border-radius:2px; background:#fff; }
.close-glyph i:first-child { transform:rotate(45deg); }.close-glyph i:last-child { transform:rotate(-45deg); }
.auth-brand { height:105px; display:flex; gap:10px; align-items:center; justify-content:center; }
.auth-brand .wordmark { width:62px; }
.auth-copy h1 { margin:26px 0 9px; font-size:30px; letter-spacing:-.045em; }
.auth-copy p { margin:0 auto 31px; max-width:300px; color:var(--silver); font-size:14px; line-height:1.5; }
.auth-list { display:grid; gap:11px; }
.provider-button { position:relative; width:100%; height:54px; display:grid; grid-template-columns:40px 1fr 40px; align-items:center; border-radius:17px; color:var(--white); border:1px solid var(--line); font-weight:600; }
.provider-button img, .provider-button .mail-icon { grid-column:1; justify-self:center; width:18px; height:18px; }
.provider-button span:last-child { grid-column:2; }
.provider-apple { border-color:transparent; color:#060608; background:#fff; box-shadow:0 10px 26px rgba(0,0,0,.25); }
.mail-icon { position:relative; border:1.5px solid #fff; border-radius:3px; }
.mail-icon::after { content:""; position:absolute; left:2px; right:2px; top:2px; height:7px; border-bottom:1px solid #fff; transform:rotate(35deg); }
.guest-button { margin-top:0; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(255,255,255,.25); }
.legal { position:absolute; bottom:28px; left:42px; right:42px; margin:0; color:#666671; font-size:8.5px; line-height:1.35; }
.email-panel { padding:18px; border-radius:22px; display:grid; gap:11px; text-align:left; }
.email-panel label { color:var(--silver); font-size:11px; }
.email-panel input { height:52px; padding:0 15px; border:1px solid var(--line); border-radius:14px; outline:0; color:var(--white); background:rgba(0,0,0,.28); }
.email-panel input:focus { border-color:rgba(149,134,255,.72); box-shadow:0 0 0 3px rgba(149,134,255,.12); }

.discover-screen { padding:32px 24px 102px; overflow-y:auto; }
.discover-screen,.film-screen { scrollbar-width:none; }
.discover-screen::-webkit-scrollbar,.film-screen::-webkit-scrollbar { display:none; }
.app-header { display:flex; align-items:center; justify-content:space-between; }
.brand-home { display:flex; align-items:center; gap:8px; border:0; padding:0; background:none; }
.brand-home .wordmark { width:53px; }
.profile-control { width:38px; height:38px; border-radius:50%; color:var(--white); font-size:10px; }
.discover-heading { margin-top:38px; }
.discover-heading p { margin:0 0 4px; color:var(--silver); font-size:15px; }
.discover-heading h1 { margin:0; font-size:38px; letter-spacing:-.052em; }
.content-material { border:1px solid rgba(255,255,255,.09); background:linear-gradient(145deg,#202028,#111116); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 45px rgba(0,0,0,.23); }
.search-glass { margin-top:24px; padding:17px 16px 13px; border-radius:25px; }
.search-glass textarea { width:100%; height:105px; resize:none; border:0; outline:0; color:var(--white); background:transparent; font-size:15px; line-height:1.45; }
.search-glass textarea::selection { background:rgba(149,134,255,.5); }
.query-footer { display:flex; justify-content:space-between; align-items:end; }
.query-footer > span { color:#9797a2; font-size:9px; }
.edit-hint::before { content:"✎"; margin-right:5px; color:#bdb6ef; }
.query-footer > button { width:52px; height:52px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:none; }
.orb { position:relative; display:grid; place-items:center; width:166px; height:166px; }
.orb.compact { width:52px; height:52px; }
.orb-halo { position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle,rgba(159,143,255,.34),rgba(108,88,205,.15) 43%,transparent 70%); animation:orb-breathe 2.8s ease-in-out infinite; }
.orb-core { position:relative; width:88px; height:88px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.26); border-radius:50%; background:radial-gradient(circle at 33% 26%,#b4a9ff 0,#7461cf 18%,#302354 47%,#08070e 78%); box-shadow:inset -13px -18px 30px rgba(0,0,0,.52),0 0 34px rgba(132,108,255,.34); animation:orb-drift 5s ease-in-out infinite; }
.orb-core .brand-mark { width:35px; height:35px; opacity:.88; filter:drop-shadow(0 0 8px rgba(255,255,255,.25)); }
.orb-sheen { position:absolute; width:64%; height:35%; left:9%; top:8%; border-radius:50%; background:linear-gradient(150deg,rgba(255,255,255,.34),transparent 62%); filter:blur(4px); }
.orb.compact .orb-core { width:45px; height:45px; }.orb.compact .orb-core .brand-mark { width:20px; height:20px; }
@keyframes orb-breathe { 50% { transform:scale(1.08); opacity:.7 } }
@keyframes orb-drift { 50% { transform:translateY(-2px) rotate(1deg) } }
.inspiration { margin-top:27px; }
.section-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:11px; color:var(--silver); font-size:11px; }
.section-label button { border:0; padding:5px 0; color:#aaa1e0; background:none; font-size:10px; }
.prompt-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.prompt-card { position:relative; height:114px; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:20px; text-align:left; background-image:url("/assets/prompt-cinema-diptych.png"); background-size:200% 100%; box-shadow:0 15px 35px rgba(0,0,0,.28); }
.prompt-card.sci-fi { background-position:left center; }.prompt-card.rain { background-position:right center; }
.prompt-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,3,6,.02),rgba(4,4,8,.22) 40%,rgba(3,3,6,.92)); backdrop-filter:blur(.45px); }
.prompt-copy { position:absolute; inset:auto 13px 13px; color:white; font-size:12px; line-height:1.3; }
.prompt-copy b { display:block; margin-top:7px; color:#c6befb; font-size:9px; font-weight:500; }.prompt-copy i { font-style:normal; font-size:13px; }
.glass-nav { position:absolute; z-index:30; left:14px; right:14px; bottom:14px; height:68px; display:flex; align-items:center; justify-content:space-around; border-radius:24px; background:rgba(18,18,23,.65); }
.glass-nav button { display:grid; gap:5px; place-items:center; min-width:60px; border:0; color:#71717c; background:none; font-size:8px; }
.glass-nav button.active { color:white; }
.glass-nav button.active::after { content:""; position:absolute; bottom:4px; width:20px; height:2px; border-radius:2px; background:rgba(164,151,255,.8); box-shadow:0 0 10px rgba(149,134,255,.6); }
.glass-nav button > span { width:17px; height:17px; position:relative; }
.nav-search { border:1.5px solid currentColor; border-radius:50%; transform:scale(.65); }.nav-search::after { content:""; position:absolute; width:7px; height:1.5px; right:-5px; bottom:-2px; background:currentColor; transform:rotate(45deg); }
.nav-spark::before { content:"✦"; font-size:17px; }.nav-stack { border:1px solid currentColor; border-radius:3px; box-shadow:4px -4px 0 -1px #050507,4px -4px 0 0 currentColor; }.nav-person::before { content:"○"; font-size:19px; }

.prepare-screen { display:flex; flex-direction:column; align-items:center; padding:58px 20px 36px; }
.back-control { position:absolute; left:22px; top:24px; }
.preparing-orb { margin-top:26px; height:183px; }
.mystery-stage { position:relative; width:330px; height:330px; margin-top:3px; perspective:1100px; }
.mystery-shell { position:absolute; top:28px; width:112px; height:210px; border:1px solid rgba(255,255,255,.2); border-radius:24px; background:linear-gradient(145deg,rgba(49,46,63,.77),rgba(11,11,16,.94)); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px rgba(0,0,0,.38),0 0 36px rgba(115,91,219,.09); backdrop-filter:blur(24px); animation:card-float 5.6s ease-in-out infinite; }
.mystery-shell.card-3 { left:2px; transform:rotateY(8deg) rotateZ(-1.5deg) translateY(15px); animation-delay:-1.4s; }
.mystery-shell.card-2 { left:109px; z-index:2; transform:translateY(-4px); }
.mystery-shell.card-1 { right:2px; transform:rotateY(-8deg) rotateZ(1.5deg) translateY(15px); animation-delay:-2.7s; }
.mystery-edge { position:absolute; inset:1px; border-radius:23px; background:linear-gradient(125deg,rgba(255,255,255,.08),transparent 25%,transparent 72%,rgba(149,134,255,.09)); }
.mystery-number { position:absolute; top:15px; left:15px; color:#8f8aab; font-size:9px; letter-spacing:.14em; }
.mystery-emblem { position:absolute; left:50%; bottom:25px; transform:translateX(-50%); opacity:.38; }
@keyframes card-float { 50% { translate:0 -7px; } }
.prepare-copy { margin-top:-45px; text-align:center; }
.prepare-copy h1 { margin:0 0 8px; font-size:25px; letter-spacing:-.035em; }
.prepare-copy p { margin:0; color:var(--silver); font-size:12px; }

.reveal-screen { padding:24px 20px 32px; }
.reveal-topbar { display:flex; align-items:center; justify-content:space-between; }
.reveal-topbar > div { display:flex; align-items:center; gap:7px; }.reveal-topbar .wordmark { width:48px; }
.refine-control { display:flex; flex-direction:column; gap:3px; align-items:center; justify-content:center; }
.refine-control span { width:15px; height:1px; background:#fff; }.refine-control span:nth-child(2) { width:10px; }.refine-control span:nth-child(3) { width:6px; }
.reveal-copy { margin-top:22px; text-align:center; }
.reveal-copy h1 { margin:0 0 7px; font-size:28px; letter-spacing:-.045em; }
.reveal-copy p { margin:0; color:var(--silver); font-size:11px; }
.reveal-list { position:relative; height:530px; margin-top:4px; }
.result-card { position:absolute; width:132px; height:250px; padding:0; border:0; background:none; perspective:900px; transition:all .72s cubic-bezier(.2,.82,.2,1); animation:result-float 6s ease-in-out infinite; }
.result-card.rank-3 { left:2px; top:76px; transform:rotate(-2deg); animation-delay:-1.4s; }
.result-card.rank-2 { right:2px; top:76px; transform:rotate(2deg); animation-delay:-3.2s; }
.result-card.rank-1 { left:50%; top:44px; z-index:3; transform:translateX(-50%); }
@keyframes result-float { 50% { translate:0 -4px; } }
.result-inner, .result-back, .result-front { position:absolute; inset:0; border-radius:21px; }
.result-inner { transform-style:preserve-3d; transition:transform .78s cubic-bezier(.18,.82,.2,1); }
.result-card.is-revealed .result-inner { transform:rotateY(180deg); }
.result-back, .result-front { overflow:hidden; backface-visibility:hidden; border:1px solid rgba(255,255,255,.2); box-shadow:0 24px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.1); }
.result-back { background:linear-gradient(145deg,#252330,#09090e); }
.result-front { transform:rotateY(180deg); background-size:cover; background-position:center; }
.result-number,.poster-rank { position:absolute; top:14px; left:14px; color:rgba(255,255,255,.65); font-size:9px; letter-spacing:.15em; }
.result-mark { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); opacity:.42; }
.result-card.is-next .result-back { border-color:rgba(157,143,255,.53); box-shadow:0 24px 60px rgba(0,0,0,.42),0 0 42px rgba(123,99,231,.16),inset 0 1px 0 rgba(255,255,255,.13); }
.touch-ring { position:absolute; inset:43%; border-radius:50%; border:1px solid rgba(160,146,255,.5); animation:touch 2.2s ease-out infinite; }
@keyframes touch { to { inset:30%; opacity:0; } }
.poster-insomnia { background:radial-gradient(circle at 50% 27%,rgba(214,231,241,.8),transparent 18%),linear-gradient(165deg,#94a9b4,#303c45 40%,#090b0d 85%); }
.poster-wind { background:radial-gradient(ellipse at 48% 25%,#eff4f5 0,#95a3aa 22%,transparent 24%),linear-gradient(160deg,#aebbc1,#43515a 40%,#10161a 83%); }
.poster-dragon { background:radial-gradient(circle at 65% 22%,rgba(170,192,206,.55),transparent 17%),linear-gradient(150deg,#5e7180,#1d2832 45%,#07090c 83%); }
.poster-light { position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.15) 48%,rgba(0,0,0,.95)); }
.poster-copy { position:absolute; left:13px; right:13px; bottom:16px; text-align:left; }
.poster-copy strong { display:block; color:white; font-size:16px; line-height:1.02; letter-spacing:-.035em; }
.poster-copy span { display:block; margin-top:7px; color:#c5c5cd; font-size:8px; }
.match-chip { position:absolute; left:8px; right:8px; top:261px; height:39px; display:flex; gap:4px; align-items:center; justify-content:center; border-radius:13px; color:#b9b9c1; font-size:8px; }
.match-chip strong { color:#fff; font-size:12px; }
.revealed-3 .result-card { width:108px; height:216px; animation:none; }
.revealed-3 .result-card.rank-3 { left:0; top:32px; transform:none; }
.revealed-3 .result-card.rank-2 { left:auto; right:0; top:32px; z-index:1; transform:none; }
.revealed-3 .result-card.rank-1 { left:calc(50% - 54px); right:auto; top:18px; z-index:2; transform:scale(1.035); }
.revealed-3 .poster-copy strong { font-size:13px; }
.revealed-3 .poster-copy span { font-size:7px; }
.revealed-3 .match-chip { top:226px; left:2px; right:2px; }
.results-actions { position:absolute; left:24px; right:24px; bottom:29px; display:grid; text-align:center; }

.film-screen { overflow-y:auto; padding-bottom:34px; }
.film-hero { position:relative; height:470px; background-size:cover; }
.film-topbar { position:absolute; z-index:4; left:20px; right:20px; top:24px; display:flex; justify-content:space-between; }
.film-topbar .circle-control:last-child .brand-mark { width:22px; height:22px; }
.film-gradient { position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,5,8,.12),transparent 32%,#050507 100%); }
.film-title { position:absolute; z-index:2; left:24px; right:24px; bottom:28px; }
.film-title > span { color:#c9c2ff; font-size:10px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; }
.film-title h1 { margin:10px 0; font-size:35px; line-height:.98; letter-spacing:-.05em; }
.film-title p { margin:0; color:var(--silver); font-size:11px; }
.film-content { padding:0 22px 40px; }
.why-panel { padding:18px; border-radius:22px; }
.why-panel > div { display:flex; justify-content:space-between; font-size:11px; }.why-panel b { color:#c9c2ff; font-weight:550; }
.why-panel ul { margin:15px 0 0; padding-left:17px; color:var(--silver); font-size:11px; line-height:1.85; }
.watch-row { display:flex; justify-content:space-between; align-items:end; padding:21px 3px; color:var(--silver); font-size:10px; }
.watch-row div { display:grid; gap:5px; }.watch-row b { color:#fff; font-size:14px; }
.trailer-button { width:100%; height:52px; margin-top:10px; border-radius:17px; }

.destination-screen { padding:32px 24px 101px; overflow-y:auto; scrollbar-width:none; }
.destination-screen::-webkit-scrollbar { display:none; }
.destination-heading { margin-top:34px; }
.destination-heading p { margin:0 0 4px; color:var(--silver); font-size:14px; }
.destination-heading h1 { margin:0 0 24px; font-size:38px; letter-spacing:-.055em; }
.featured-collection { position:relative; width:100%; height:210px; display:block; border:1px solid rgba(255,255,255,.14); border-radius:25px; overflow:hidden; text-align:left; background-position:left center; }
.featured-collection > div { position:absolute; z-index:2; left:18px; right:18px; bottom:18px; }
.featured-collection small { color:#c9c2ff; font-size:8px; letter-spacing:.16em; }
.featured-collection h2 { margin:8px 0 13px; font-size:22px; line-height:1.02; letter-spacing:-.035em; }
.featured-collection button { border:0; padding:0; color:white; background:none; font-size:10px; }
.featured-collection i,.collection-list i,.library-sections i,.profile-list i,.taste-card i { font-style:normal; }
.collection-list { display:grid; gap:2px; margin-top:13px; }
.collection-list > button,.library-sections > button { min-height:68px; display:grid; grid-template-columns:54px 1fr 20px; gap:12px; align-items:center; border:0; border-bottom:1px solid rgba(255,255,255,.08); padding:7px 0; color:white; background:none; text-align:left; }
.collection-list button > span:nth-child(2),.library-sections button > span:nth-child(2) { display:grid; gap:4px; }
.collection-list strong,.library-sections strong { font-size:11px; line-height:1.2; }.collection-list small,.library-sections small { color:var(--muted); font-size:9px; }
.collection-thumb,.library-art { width:54px; height:54px; display:grid; place-items:center; border-radius:14px; background-size:cover; }
.collection-thumb.rain { background:linear-gradient(155deg,#384a5b,#111820); }.collection-thumb.space { background:linear-gradient(155deg,#5864a2,#18162e); }.collection-thumb.winter { background:linear-gradient(155deg,#bdcbd1,#34434c); }.collection-thumb.night { background:linear-gradient(155deg,#5a4765,#18111c); }
.library-summary { display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:17px; padding:17px 8px; border-radius:22px; }
.library-summary div { display:grid; gap:4px; text-align:center; border-right:1px solid rgba(255,255,255,.08); }.library-summary div:last-child { border:0; }
.library-summary strong { font-size:19px; }.library-summary span { color:var(--muted); font-size:8px; }
.library-sections { display:grid; }
.library-art.poster-dragon { background-size:cover; }.previous-art { background:#17151f; }.previous-art .brand-mark { width:29px;height:29px;opacity:.7; }.search-art { background:#1a1922; }.search-art .nav-search { width:20px;height:20px;color:#a9a0db; }
.profile-identity { margin:34px 0 24px; text-align:center; }
.profile-orb { width:70px;height:70px;display:grid;place-items:center;margin:auto;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:radial-gradient(circle at 35% 25%,#9b8ef2,#322655 45%,#0b0910 80%);box-shadow:0 0 35px rgba(149,134,255,.18);font-size:12px; }
.profile-identity h1 { margin:14px 0 5px;font-size:32px;letter-spacing:-.045em; }.profile-identity p { margin:0;color:var(--silver);font-size:11px; }
.taste-card { padding:17px;border-radius:22px; }.taste-card > div:first-child { display:flex;justify-content:space-between;color:#bcb4ee;font-size:9px;letter-spacing:.12em; }.taste-card b { color:var(--silver);font-weight:500;letter-spacing:0; }
.taste-spectrum { display:flex!important;gap:5px!important;align-items:end;height:48px;margin:13px 0 8px; }.taste-spectrum i { flex:1;border-radius:9px;background:linear-gradient(180deg,#9a8cff,#32284c); }.taste-spectrum i:nth-child(1){height:50%}.taste-spectrum i:nth-child(2){height:88%}.taste-spectrum i:nth-child(3){height:67%}.taste-spectrum i:nth-child(4){height:100%}.taste-spectrum i:nth-child(5){height:43%}
.taste-card p { margin:0;color:var(--silver);font-size:9px;line-height:1.5; }.taste-card button { border:0;padding:13px 0 0;color:white;background:none;font-size:10px; }
.profile-list { display:grid;margin-top:14px; }.profile-list button { min-height:48px;display:grid;grid-template-columns:1fr auto 14px;align-items:center;border:0;border-bottom:1px solid rgba(255,255,255,.08);padding:0 2px;color:white;background:none;text-align:left;font-size:10px; }.profile-list b { margin-right:8px;color:var(--muted);font-size:8px;font-weight:500; }
.calibration-screen { padding:58px 25px 34px;text-align:center; }.calibration-copy span { color:#a99fe6;font-size:8px;letter-spacing:.15em; }.calibration-copy h1 { margin:10px 0 5px;font-size:28px;letter-spacing:-.04em; }.calibration-copy p { margin:0;color:var(--muted);font-size:9px; }
.calibration-poster { position:relative;width:245px;height:420px;margin:32px auto 22px;border:1px solid rgba(255,255,255,.16);border-radius:27px;overflow:hidden;box-shadow:0 30px 65px rgba(0,0,0,.45);background-size:cover; }.calibration-poster > div:last-child { position:absolute;z-index:2;left:18px;right:18px;bottom:20px;display:grid;gap:5px;text-align:left; }.calibration-poster strong { font-size:24px; }.calibration-poster span { color:var(--silver);font-size:10px; }
.calibration-actions { display:grid;grid-template-columns:1fr 1fr;gap:10px; }.calibration-actions button { height:49px;border:1px solid var(--line);border-radius:16px;color:white;background:rgba(255,255,255,.06); }.calibration-actions button:last-child { color:#0b0b0d;background:#f4f4f7; }

/* V4 quality pass: restrained functional glass, cinematic content, signature motion */
.eyebrow { color:#aaa0ec; font-size:8px; font-weight:650; letter-spacing:.17em; }
.poster-snow,.poster-lake,.poster-future,.poster-rain {
  background-image:linear-gradient(180deg,transparent 35%,rgba(2,3,7,.88)),url("/assets/trio-cinematic-triptych-v1.png") !important;
  background-size:300% 100% !important;
}
.poster-snow { background-position:0 center !important; }
.poster-lake { background-position:50% center !important; }
.poster-future { background-position:100% center !important; }
.poster-rain { background-position:100% center !important; filter:saturate(.72) hue-rotate(18deg); }
.poster-insomnia { background-image:linear-gradient(180deg,transparent 30%,rgba(2,3,7,.9)),url("/assets/trio-cinematic-triptych-v1.png");background-size:300% 100%;background-position:50% center; }
.poster-wind { background-image:linear-gradient(180deg,transparent 30%,rgba(2,3,7,.9)),url("/assets/trio-cinematic-triptych-v1.png");background-size:300% 100%;background-position:0 center; }
.poster-dragon { background-image:linear-gradient(180deg,transparent 30%,rgba(2,3,7,.9)),url("/assets/trio-cinematic-triptych-v1.png");background-size:300% 100%;background-position:0 center; }

.orb { isolation:isolate; }
.orb-field { position:absolute; inset:-16%; border-radius:50%; filter:blur(8px); animation:field-breathe 4.2s ease-in-out infinite; }
.orb-field i { position:absolute; width:5px; height:5px; border-radius:50%; background:#dcd7ff; box-shadow:0 0 12px #9f8fff; animation:particle 5s ease-in-out infinite; }
.orb-field i:nth-child(1){left:18%;top:26%}.orb-field i:nth-child(2){right:16%;top:51%;animation-delay:-1.8s}.orb-field i:nth-child(3){left:44%;bottom:9%;animation-delay:-3.1s}
.orb-orbit { position:absolute; inset:18%; z-index:2; border-radius:50%; border:1px solid transparent; pointer-events:none; }
.orbit-a { border-top-color:rgba(225,219,255,.72); border-right-color:rgba(126,105,232,.18); animation:orbit-spin 6.4s linear infinite; }
.orbit-b { inset:25%; border-left-color:rgba(177,159,255,.48); transform:rotate(63deg); animation:orbit-spin 4.8s linear infinite reverse; }
.orbit-c { inset:8%; border-bottom-color:rgba(135,111,242,.22); transform:rotate(-22deg); animation:orbit-spin 9s linear infinite; }
.orb-halo { background:radial-gradient(circle,rgba(187,170,255,.36),rgba(92,65,210,.12) 42%,transparent 72%); filter:blur(2px); }
.orb-core { border-color:rgba(236,232,255,.4); background:radial-gradient(circle at 31% 23%,#e3dfff 0,#aa98ff 9%,#6851d0 27%,#24164b 53%,#06060b 79%); box-shadow:inset -18px -20px 32px rgba(0,0,0,.58),inset 8px 6px 16px rgba(255,255,255,.14),0 0 28px rgba(126,102,240,.4),0 0 70px rgba(86,57,195,.2); }
.orb-fluid { position:absolute; inset:-18%; border-radius:42% 58% 55% 45%; background:conic-gradient(from 40deg,transparent,rgba(255,255,255,.19),transparent 32%,rgba(109,85,218,.28),transparent 67%); mix-blend-mode:screen; animation:fluid-spin 8s linear infinite; }
.orb-caustic { position:absolute; inset:7%; border-radius:50%; background:radial-gradient(ellipse at 63% 70%,rgba(195,183,255,.16),transparent 35%); animation:caustic 3.4s ease-in-out infinite alternate; }
.orb-core .brand-mark { z-index:4; }
.orb.compact .orb-field { display:none; }.orb.compact .orb-orbit { inset:8%; }.orb.compact .orb-core { box-shadow:inset -8px -10px 16px rgba(0,0,0,.6),0 0 18px rgba(133,108,255,.55),0 0 36px rgba(89,56,205,.18); }
@keyframes orbit-spin { to{rotate:360deg} }
@keyframes fluid-spin { to{rotate:-360deg} }
@keyframes field-breathe { 50%{transform:scale(1.14);opacity:.72} }
@keyframes particle { 50%{transform:translate3d(8px,-11px,0) scale(.65);opacity:.35} }
@keyframes caustic { to{transform:translate(-5px,4px) scale(1.12)} }

.sensory-light { animation:sensory-light .22s ease; }.sensory-medium { animation:sensory-medium .32s ease; }.sensory-hero { animation:sensory-hero .55s cubic-bezier(.2,.9,.25,1); }
@keyframes sensory-light{50%{filter:brightness(1.04)}} @keyframes sensory-medium{40%{filter:brightness(1.08)}} @keyframes sensory-hero{30%{filter:brightness(1.13)}55%{transform:scale(1.003)}}
.toast { position:absolute; z-index:100; left:50%; bottom:98px; transform:translateX(-50%); width:max-content; max-width:310px; padding:12px 17px; border-radius:16px; color:#f7f7fa; font-size:11px; animation:toast-in .3s cubic-bezier(.2,.85,.2,1); }
@keyframes toast-in { from{opacity:0;transform:translate(-50%,12px)} }

.welcome-v4 .welcome-message .eyebrow { display:block; margin-bottom:11px; }
.welcome-v4 .welcome-message h1 { font-size:35px; }
.friday-ribbon { width:100%; margin-top:20px; padding:12px 14px; display:grid; grid-template-columns:1fr auto; gap:3px 10px; border-radius:18px; color:white; text-align:left; }
.friday-ribbon > span { grid-column:1/3; color:#b9b0f2; font-size:7px; letter-spacing:.15em; }.friday-ribbon > span i { display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:#a693ff;box-shadow:0 0 9px #8f77ff;animation:pulse-dot 2s ease infinite; }
.friday-ribbon strong { font-size:12px; }.friday-ribbon b { color:#cfc8ff;font-size:9px;font-weight:500; }
@keyframes pulse-dot{50%{opacity:.35;box-shadow:0 0 18px #8f77ff}}
.discover-v4 .discover-heading { margin-top:21px; }.discover-v4 .discover-heading h1 { font-size:34px; }.discover-v4 .search-glass { margin-top:17px; }.discover-v4 .search-glass textarea { height:86px; }.discover-v4 .inspiration { margin-top:18px; }

.onboarding-screen { padding:34px 25px 30px; text-align:center; }
.onboarding-screen > header { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:9px; }.onboarding-screen > header .quiet-button { padding:6px;color:#bdbdc5; }
.onboarding-copy { margin-top:28px; }.onboarding-copy h1 { margin:10px 0 7px;font-size:29px;letter-spacing:-.045em; }.onboarding-copy p { max-width:290px;margin:0 auto;color:var(--silver);font-size:11px;line-height:1.45; }
.onboarding-card { position:relative;width:225px;height:302px;margin:18px auto 16px;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:26px;background-repeat:no-repeat;box-shadow:0 32px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.025); }
.onboarding-card > div:last-child { position:absolute;z-index:3;left:18px;right:18px;bottom:20px;text-align:left; }.onboarding-card strong { display:block;font-size:23px;line-height:1.02; }.onboarding-card span { display:block;margin-top:7px;color:#cac8d1;font-size:9px; }
.onboarding-actions { display:grid;grid-template-columns:1fr 1fr;gap:10px; }.onboarding-actions button { height:50px;border:1px solid var(--line);border-radius:17px;color:#f7f7fa;background:rgba(255,255,255,.055);box-shadow:inset 0 1px rgba(255,255,255,.08); }.onboarding-actions button:last-child { color:#09090c;background:#f5f5f7;font-weight:650; }

.permission-screen { padding:48px 26px 32px;text-align:center; }.permission-screen .permission-orb { display:grid;place-items:center;height:184px; }.permission-screen > h1 { margin:11px 0 9px;font-size:34px;line-height:1.02;letter-spacing:-.052em; }.permission-screen > p { max-width:305px;margin:0 auto;color:var(--silver);font-size:11px;line-height:1.5; }
.permission-preview { margin:21px 0 18px;padding:15px;border-radius:20px;text-align:left; }.permission-preview span,.permission-preview strong,.permission-preview small { display:block; }.permission-preview span { color:#a99de7;font-size:7px;letter-spacing:.16em; }.permission-preview strong { margin-top:7px;font-size:12px; }.permission-preview small { margin-top:4px;color:var(--muted);font-size:8px; }

.prepare-v4 { background:radial-gradient(circle at 50% 31%,rgba(80,54,162,.2),transparent 35%),#050507; }.recognition-space { position:relative;height:205px;display:grid;place-items:center; }.recognition-space .orb { transform:scale(.92); }
.recognition-traces { position:absolute;inset:11px 14px; }.recognition-traces i { position:absolute;left:50%;top:50%;width:155px;height:155px;border:1px solid rgba(151,130,255,.13);border-radius:50%;transform:translate(-50%,-50%);animation:trace-out 3.1s ease-out infinite; }.recognition-traces i:nth-child(2){animation-delay:1s}.recognition-traces i:nth-child(3){animation-delay:2s}
@keyframes trace-out{0%{transform:translate(-50%,-50%) scale(.45);opacity:0}25%{opacity:.75}100%{transform:translate(-50%,-50%) scale(1.55);opacity:0}}
.prepare-v4 .mystery-stage { margin-top:-17px; }.prepare-v4 .prepare-copy { margin-top:-69px; }.prepare-v4 .prepare-copy .eyebrow { display:block;margin-bottom:9px; }.prepare-v4 .prepare-copy h1 { font-size:26px;line-height:1.06; }
.prepare-v4 .mystery-shell { overflow:hidden; }.prepare-v4 .mystery-shell::after { content:"";position:absolute;inset:-45%;background:linear-gradient(105deg,transparent 42%,rgba(198,184,255,.1),transparent 58%);animation:card-scan 3.7s ease-in-out infinite; }.prepare-v4 .card-2::after{animation-delay:.6s}.prepare-v4 .card-1::after{animation-delay:1.2s}
@keyframes card-scan{0%,20%{transform:translateX(-50%)}70%,100%{transform:translateX(50%)}}

.film-v4 .film-hero { height:500px;background-repeat:no-repeat; }.film-v4 .film-title h1 { margin:8px 0 7px;font-size:31px;line-height:.98;letter-spacing:-.05em; }.film-v4 .film-title > span { font-size:8px;letter-spacing:.13em; }.film-v4 .film-title p { font-size:10px; }
.decision-actions { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:-8px; }.decision-actions button { height:64px;display:grid;place-items:center;align-content:center;gap:5px;border:1px solid var(--line);border-radius:19px;color:white;background:rgba(255,255,255,.05);backdrop-filter:blur(24px);box-shadow:inset 0 1px rgba(255,255,255,.09); }.decision-actions i { display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-style:normal;font-size:15px; }.decision-actions span { font-size:8px; }.decision-actions .saved i { color:#111;background:#fff; }
.film-v4 .why-panel { margin-top:14px;border-radius:23px; }.film-v4 .why-panel li { display:flex;gap:8px;list-style:none; }.film-v4 .why-panel li i { color:#b5a8ff;font-style:normal; }.film-v4 .why-panel ul { padding-left:0; }.film-v4 .why-panel > button { width:100%;margin-top:10px;padding:11px 0 0;border:0;border-top:1px solid rgba(255,255,255,.07);color:#c7bef7;background:none;text-align:left;font-size:9px; }
.watch-options { margin-top:21px; }.watch-options > div { display:flex;justify-content:space-between;margin-bottom:10px; }.watch-options > div span { font-size:12px;font-weight:650; }.watch-options > div small { color:var(--muted);font-size:8px; }.watch-options button { width:100%;height:54px;display:grid;grid-template-columns:40px 1fr auto 12px;align-items:center;border:1px solid rgba(255,255,255,.08);border-radius:16px;color:white;background:#131318;text-align:left;margin-bottom:8px; }.watch-options button b { text-align:center;font-size:11px; }.watch-options button span { font-size:10px; }.watch-options button strong { font-size:9px; }.watch-options button i { color:var(--muted);font-style:normal; }
.spoiler-safe { padding:18px 0 40px; }.spoiler-safe > span { color:#b6aceb;font-size:9px; }.spoiler-safe p { color:var(--silver);font-size:11px;line-height:1.55; }.spoiler-safe button { border:0;padding:0;color:#c9c2f5;background:none;font-size:9px; }

.friday-screen { padding:26px 20px 31px;overflow:hidden;background:radial-gradient(circle at 50% 44%,rgba(95,62,208,.18),transparent 40%),#050507; }.friday-screen > header { display:flex;align-items:center;justify-content:space-between; }.friday-screen > header .wordmark { width:52px; }
.friday-copy { margin-top:28px;text-align:center; }.friday-copy h1 { margin:9px 0 8px;font-size:30px;letter-spacing:-.05em; }.friday-copy p { max-width:290px;margin:0 auto;color:var(--silver);font-size:11px;line-height:1.5; }
.friday-stage { position:relative;height:395px;margin-top:15px;perspective:1000px; }.friday-card { position:absolute;left:50%;top:28px;width:148px;height:280px;padding:0;border:0;background:none;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.18,.83,.18,1),left .7s,top .7s; }.friday-card.rank-3{transform:translateX(-50%) rotate(-4deg)}.friday-card.rank-2{transform:translateX(-50%)}.friday-card.rank-1{transform:translateX(-50%) rotate(4deg)}
.friday-card.rank-3{left:44%;top:42px;z-index:3}.friday-card.rank-2{z-index:2}.friday-card.rank-1{left:56%;top:42px;z-index:1}
.friday-back,.friday-front { position:absolute;inset:0;display:block;overflow:hidden;border:1px solid rgba(255,255,255,.19);border-radius:24px;backface-visibility:hidden;box-shadow:0 28px 65px rgba(0,0,0,.48); }.friday-back { background:linear-gradient(145deg,#272432,#09090e); }.friday-back b { position:absolute;left:15px;top:15px;color:#918aa9;font-size:8px;letter-spacing:.15em; }.friday-back .brand-mark { position:absolute;left:50%;bottom:25px;transform:translateX(-50%);opacity:.4; }
.friday-front { transform:rotateY(180deg);background-repeat:no-repeat; }.friday-front i { position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.94)); }.friday-front strong,.friday-front small { position:absolute;z-index:2;left:15px;right:15px;text-align:left; }.friday-front strong { bottom:34px;font-size:16px; }.friday-front small { bottom:17px;color:#d0cbdc;font-size:8px; }
.friday-card:not(.open) .friday-back { box-shadow:0 28px 65px rgba(0,0,0,.48),0 0 42px rgba(117,87,230,.13); }
.friday-card.open { transform:translateX(-50%) rotateY(180deg); }
.friday-progress-1 .rank-3 { left:13%;z-index:1;transform:rotateY(180deg) rotate(-4deg); }.friday-progress-1 .rank-2 { z-index:3; }
.friday-progress-2 .rank-3 { left:6%;z-index:1;transform:rotateY(180deg) rotate(-4deg); }.friday-progress-2 .rank-2 { left:38%;z-index:2;transform:rotateY(180deg); }.friday-progress-2 .rank-1 { left:70%;z-index:3; }
.friday-complete .friday-card { width:105px;height:210px;top:38px; }.friday-complete .friday-card.rank-3{left:17%;z-index:1;transform:rotateY(180deg)}.friday-complete .friday-card.rank-2{left:50%;z-index:2;transform:translateX(-50%) rotateY(180deg)}.friday-complete .friday-card.rank-1{left:auto;right:0;z-index:3;transform:rotateY(180deg)}
.friday-complete .friday-front strong { font-size:12px; }.friday-hint { margin-top:-48px;color:#8c859d;text-align:center;font-size:9px; }.friday-actions { position:absolute;left:24px;right:24px;bottom:28px;display:grid;text-align:center; }

.settings-screen,.watchlist-screen { padding:28px 24px 32px;overflow-y:auto;scrollbar-width:none; }.settings-screen > header,.watchlist-screen > header { display:grid;grid-template-columns:42px 1fr 42px;align-items:center;text-align:center; }.settings-screen > header h1,.watchlist-screen > header h1 { margin:0;font-size:19px; }.settings-group { margin-top:28px; }.settings-group > span { display:block;margin:0 0 8px 5px;color:#827a9e;font-size:8px;letter-spacing:.14em; }.settings-group button { width:100%;min-height:55px;display:grid;grid-template-columns:1fr auto;align-items:center;padding:10px 14px;border:0;border-bottom:1px solid rgba(255,255,255,.065);color:white;background:#111116;text-align:left; }.settings-group button:first-of-type { border-radius:17px 17px 0 0; }.settings-group button:last-child { border-radius:0 0 17px 17px;border-bottom:0; }.settings-group button b { font-size:11px; }.settings-group button small { grid-row:2;color:var(--muted);font-size:8px; }.settings-group button strong { color:#a8a1b8;font-size:9px;font-weight:400; }
.switch { position:relative;width:35px;height:21px;border-radius:12px;background:#36363e; }.switch::after { content:"";position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:#b4b4bc;transition:.25s; }.switch.on { background:#8f79e9; }.switch.on::after { left:17px;background:white; }.settings-note { margin-top:25px;padding:17px;border-radius:20px; }.settings-note strong { font-size:11px; }.settings-note p { margin:7px 0 0;color:var(--silver);font-size:9px;line-height:1.5; }

.watchlist-screen > header > div span { color:#9689d4;font-size:7px;letter-spacing:.15em; }.watchlist-screen > header > div h1 { margin-top:3px; }.watchlist-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;margin-top:25px;padding-bottom:25px; }.watchlist-grid button { border:0;padding:0;color:white;background:none;text-align:left; }.watchlist-grid button > span { display:block;height:215px;border:1px solid rgba(255,255,255,.12);border-radius:19px;background-repeat:no-repeat;box-shadow:0 18px 40px rgba(0,0,0,.35); }.watchlist-grid strong { display:block;margin-top:8px;font-size:10px;line-height:1.25; }.watchlist-grid small { display:block;margin-top:3px;color:#9c91d8;font-size:8px; }

.clarify-screen { padding:55px 27px 34px;text-align:center; }.clarify-mark { height:220px;display:grid;place-items:center; }.clarify-screen > h1 { margin:12px 0 11px;font-size:30px;line-height:1.04;letter-spacing:-.047em; }.clarify-screen > p { max-width:300px;margin:0 auto;color:var(--silver);font-size:11px;line-height:1.55; }.constraint-card { margin:28px 0 23px;padding:17px;border-radius:20px;text-align:left; }.constraint-card span { display:block;color:#9488d0;font-size:7px;letter-spacing:.15em; }.constraint-card strong { display:block;margin-top:8px;font-size:12px; }.clarify-screen > small { display:block;margin-top:5px;color:#686873;font-size:8px; }
.revealed-3 .poster-copy strong { font-size:10px;line-height:1.08; }.revealed-3 .result-card.rank-1 { transform:scale(1.015); }.revealed-3 .result-card.rank-1 .poster-copy strong { font-size:11px; }
.featured-collection { background-image:url("/assets/trio-cinematic-triptych-v1.png") !important;background-size:300% 100% !important;background-position:100% center !important; }
.collection-screen { overflow-y:auto;scrollbar-width:none;padding-bottom:35px; }.collection-hero { position:relative;height:335px;background-repeat:no-repeat; }.collection-hero::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,5,8,.12),transparent 30%,#050507 96%); }.collection-hero > header { position:absolute;z-index:3;left:20px;right:20px;top:24px;display:flex;justify-content:space-between; }.collection-hero > div { position:absolute;z-index:2;left:24px;right:24px;bottom:24px; }.collection-hero span { color:#b3a8ee;font-size:7px;letter-spacing:.14em; }.collection-hero h1 { max-width:290px;margin:8px 0 7px;font-size:30px;line-height:1.02;letter-spacing:-.047em; }.collection-hero p { margin:0;color:#c0bec7;font-size:10px; }
.collection-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;padding:5px 24px 30px; }.collection-grid button { border:0;padding:0;color:white;background:none;text-align:left; }.collection-grid button > span { display:block;height:205px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background-repeat:no-repeat;box-shadow:0 17px 38px rgba(0,0,0,.36); }.collection-grid strong { display:block;margin-top:8px;font-size:10px; }.collection-grid small { display:block;margin-top:3px;color:#978bd7;font-size:8px; }

@media (max-width: 620px) {
  .experience-shell { display:block; }
  .device { width:100vw; height:100dvh; border:0; border-radius:0; box-shadow:none; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

@media (prefers-reduced-transparency: reduce) {
  .glass-panel,.glass-button,.circle-control,.glass-nav { background:#1b1b22; backdrop-filter:none; }
}

/* Book of TRIPTIC — signature interaction expansion */
.screen::before { content:"";position:fixed;z-index:0;inset:-6% -18%;pointer-events:none;background:radial-gradient(ellipse at 0 42%,rgba(114,76,255,.12),transparent 26%),radial-gradient(ellipse at 100% 64%,rgba(104,70,237,.1),transparent 27%);filter:blur(18px); }
.screen > * { position:relative;z-index:1; }
.auth-screen::before { background:radial-gradient(ellipse at -3% 38%,rgba(129,88,255,.22),transparent 28%),radial-gradient(ellipse at 103% 72%,rgba(105,69,235,.18),transparent 30%); }

.glass-nav { position:fixed;left:calc(50% - 181px);right:auto;bottom:17px;width:362px;height:66px;background:linear-gradient(120deg,rgba(34,32,43,.52),rgba(11,11,16,.64));border-color:rgba(255,255,255,.16);backdrop-filter:blur(25px) saturate(165%);-webkit-backdrop-filter:blur(25px) saturate(165%);box-shadow:inset 0 1px rgba(255,255,255,.14),0 16px 45px rgba(0,0,0,.42),0 0 30px rgba(104,74,220,.08); }
.destination-screen,.discover-screen { padding-bottom:132px; }

.circle-control { position:relative;font-size:0;line-height:0; }
.back-chevron i { position:absolute;left:50%;top:50%;width:9px;height:9px;border-left:1.7px solid white;border-bottom:1.7px solid white;transform:translate(-38%,-50%) rotate(45deg); }
.share-glyph i,.action-share { position:relative;display:block;width:18px;height:17px;border:1.4px solid currentColor;border-radius:5px;margin-top:4px; }
.share-glyph i::before,.action-share::before { content:"";position:absolute;left:50%;top:-8px;width:7px;height:7px;border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:translateX(-50%) rotate(45deg); }
.share-glyph i::after,.action-share::after { content:"";position:absolute;left:50%;top:-7px;width:1.5px;height:11px;background:currentColor;transform:translateX(-50%); }
.settings-glyph i { width:17px;height:17px;border:1.5px solid white;border-radius:50%;box-shadow:inset 0 0 0 4px #08080c;outline:1.5px dotted white;outline-offset:3px; }

.orb-core { isolation:isolate; }
.orb-electric { position:absolute;inset:0;z-index:3;border-radius:50%;filter:drop-shadow(0 0 4px #d5ccff);animation:electric-turn 5s linear infinite; }
.orb-electric i { position:absolute;left:50%;top:50%;width:44%;height:1px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(158,137,255,.1));clip-path:polygon(0 35%,25% 0,44% 65%,67% 15%,100% 50%,65% 72%,38% 38%);opacity:.65;animation:electric-flicker 1.8s steps(2,end) infinite; }
.orb-electric i:nth-child(1){transform:rotate(14deg)}.orb-electric i:nth-child(2){transform:rotate(112deg);animation-delay:-.6s}.orb-electric i:nth-child(3){transform:rotate(208deg);animation-delay:-1.1s}.orb-electric i:nth-child(4){transform:rotate(302deg);animation-delay:-1.5s}
.orb:not(.compact) .orb-halo { box-shadow:0 0 40px rgba(140,108,255,.45),0 0 90px rgba(91,59,214,.24);animation:orb-breathe 2.5s ease-in-out infinite,electric-aura 4s ease-in-out infinite; }
@keyframes electric-turn{to{transform:rotate(360deg)}}@keyframes electric-flicker{0%,42%,100%{opacity:.18}45%,56%{opacity:.9}62%{opacity:.32}}@keyframes electric-aura{50%{filter:blur(4px);transform:scale(1.16)}}

.taste-deck { position:relative;height:320px;margin:10px auto 8px;perspective:900px; }
.taste-deck .onboarding-card { position:absolute;left:50%;top:0;margin:0;transform:translateX(-50%);touch-action:none;user-select:none;transition:transform .28s cubic-bezier(.2,.85,.2,1),opacity .25s;cursor:grab; }
.taste-ghost { position:absolute;left:50%;top:10px;width:215px;height:292px;border:1px solid rgba(255,255,255,.08);border-radius:25px;background:#111119;transform:translateX(-50%) scale(.96); }
.taste-ghost.ghost-b { top:19px;transform:translateX(-50%) scale(.91);opacity:.55; }
.taste-ghost.ghost-a { opacity:.82; }
.swipe-verdict { position:absolute!important;z-index:9!important;top:24px;bottom:auto!important;padding:7px 10px;border:2px solid;border-radius:7px;font-size:12px!important;font-weight:750;letter-spacing:.08em;opacity:var(--drag,0); }
.verdict-no { left:18px!important;right:auto!important;color:#ff7886;transform:rotate(-8deg) }.verdict-yes { left:auto!important;right:18px!important;color:#8ff0c1;transform:rotate(8deg) }
.taste-swipe-card.fly-left { transform:translateX(-180%) rotate(-24deg)!important;opacity:0 }.taste-swipe-card.fly-right { transform:translateX(80%) rotate(24deg)!important;opacity:0 }
.taste-actions { grid-template-columns:1fr 48px 1fr;align-items:center; }
.taste-actions button { display:flex;align-items:center;justify-content:center;gap:7px; }
.taste-actions button span { white-space:nowrap;font-size:8px; }
.taste-actions .undo-taste { width:44px;height:44px;padding:0;border-radius:50%;color:#aba4c1;background:rgba(255,255,255,.045);font-size:18px; }
.taste-actions .undo-taste:disabled { opacity:.25; }
.action-x { position:relative;width:15px;height:15px }.action-x::before,.action-x::after { content:"";position:absolute;left:7px;top:0;width:1.5px;height:15px;background:#ff8e99;transform:rotate(45deg) }.action-x::after{transform:rotate(-45deg)}
.action-heart { width:15px;height:15px;position:relative;transform:rotate(45deg);border-radius:3px 0;background:#a995ff }.action-heart::before,.action-heart::after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:#a995ff}.action-heart::before{left:-8px}.action-heart::after{top:-8px}
.taste-complete { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 30px; }
.taste-complete h1 { margin:16px 0 10px;font-size:32px;line-height:1.02;letter-spacing:-.05em }.taste-complete p{max-width:290px;margin:0 auto 32px;color:var(--silver);font-size:11px;line-height:1.5}.taste-complete .primary-button{width:100%}
.film-dna-finale { position:relative;height:220px;width:220px;display:grid;place-items:center }.film-dna-finale > i{position:absolute;inset:30px;border:1px solid rgba(156,134,255,.28);border-radius:48% 52% 62% 38%;animation:dna-orbit 7s linear infinite}.film-dna-finale > i:nth-of-type(2){inset:15px;animation-direction:reverse;animation-duration:10s}.film-dna-finale > i:nth-of-type(3){inset:48px;animation-duration:5s}@keyframes dna-orbit{to{transform:rotate(360deg)}}

.reveal-ceremony { overflow:hidden;background:radial-gradient(circle at 50% 53%,rgba(105,71,226,.2),transparent 38%),#050507; }
.reveal-list { height:390px;position:relative;margin-top:6px;perspective:1100px; }
.reveal-list .result-card { top:28px!important;left:50%!important;width:176px!important;height:302px!important;transform:translateX(-50%) scale(.78)!important;opacity:.36;transition:transform .8s cubic-bezier(.15,.86,.18,1),left .75s,opacity .55s; }
.reveal-list .result-card.is-next { z-index:10!important;opacity:1;transform:translateX(-50%) scale(1)!important; }
.charged-card:not(.open) { animation:charged-hover 2.25s ease-in-out infinite,charged-tremor .19s ease-in-out infinite alternate; }
.reveal-list .result-card.is-revealed { opacity:.9;transform:translateX(-50%) rotateY(180deg) scale(.72)!important; }
.reveal-list.revealed-1 .rank-3 { left:25%!important;top:66px!important; }.reveal-list.revealed-2 .rank-3{left:17%!important;top:82px!important}.reveal-list.revealed-2 .rank-2{left:38%!important;top:58px!important}.reveal-list.revealed-3 .rank-3{left:17%!important;top:78px!important}.reveal-list.revealed-3 .rank-2{left:50%!important;top:57px!important}.reveal-list.revealed-3 .rank-1{left:83%!important;top:78px!important}
.just-revealed { animation:poster-pop .75s cubic-bezier(.12,.9,.16,1) both!important; }
.reveal-burst { position:absolute;z-index:20;left:50%;top:48%;width:10px;height:10px;pointer-events:none; }
.reveal-burst i { position:absolute;width:5px;height:26px;border-radius:5px;background:linear-gradient(#fff,#9a82ff,transparent);opacity:0;transform-origin:50% 70px; }
.just-revealed .reveal-burst i,.just-open .reveal-burst i { animation:light-fragment .8s ease-out both }.reveal-burst i:nth-child(2){transform:rotate(60deg);animation-delay:.03s!important}.reveal-burst i:nth-child(3){transform:rotate(120deg);animation-delay:.06s!important}.reveal-burst i:nth-child(4){transform:rotate(180deg);animation-delay:.09s!important}.reveal-burst i:nth-child(5){transform:rotate(240deg);animation-delay:.12s!important}.reveal-burst i:nth-child(6){transform:rotate(300deg);animation-delay:.15s!important}
.charged-hint { margin:-24px 0 0;text-align:center;color:#9d95af;font-size:9px;letter-spacing:.02em;animation:hint-pulse 2s ease-in-out infinite; }
@keyframes charged-hover{50%{margin-top:-7px;filter:drop-shadow(0 0 24px rgba(140,111,255,.42))}}@keyframes charged-tremor{from{margin-left:-1px}to{margin-left:1px}}@keyframes poster-pop{0%{filter:brightness(2.1);opacity:.2}55%{filter:brightness(1.25)}100%{filter:brightness(1);opacity:1}}@keyframes light-fragment{0%{opacity:0;translate:0 0;scale:.4}25%{opacity:1}100%{opacity:0;translate:0 -95px;scale:1.1}}@keyframes hint-pulse{50%{opacity:.55}}

.friday-stage { height:384px; }
.friday-card { left:50%!important;top:34px!important;z-index:1!important;opacity:.26;transform:translateX(-50%) scale(.82)!important; }
.friday-card.is-active { z-index:10!important;opacity:1;transform:translateX(-50%) scale(1.04)!important; }
.friday-card.open { opacity:.9; }
.friday-card.just-open { z-index:8!important;animation:friday-pop .8s cubic-bezier(.12,.9,.16,1) both; }
.friday-progress-1 .rank-3{left:20%!important;top:80px!important;transform:rotateY(180deg) scale(.72)!important}.friday-progress-2 .rank-3{left:12%!important;top:90px!important;transform:rotateY(180deg) scale(.64)!important}.friday-progress-2 .rank-2{left:31%!important;top:70px!important;transform:rotateY(180deg) scale(.7)!important}
.friday-back em { position:absolute;left:0;right:0;bottom:64px;color:#bdb1fa;font-size:7px;font-style:normal;letter-spacing:.15em; }
.friday-complete .friday-card { opacity:1; }.friday-complete .rank-3{left:18%!important}.friday-complete .rank-2{left:50%!important}.friday-complete .rank-1{left:82%!important;right:auto!important}
@keyframes friday-pop{0%{filter:brightness(2.2);transform:translateX(-50%) rotateY(180deg) scale(.78)}60%{filter:brightness(1.2);transform:translateX(-50%) rotateY(180deg) scale(1.08)}100%{filter:brightness(1);transform:translateX(-50%) rotateY(180deg) scale(.92)}}

.action-bookmark { width:15px!important;height:19px!important;border:1.6px solid currentColor;border-radius:3px 3px 1px 1px!important;background:none!important;clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%) }
.action-play { width:22px!important;height:22px!important;border:1.4px solid currentColor;border-radius:50%!important;background:none!important;position:relative }.action-play::after{content:"";position:absolute;left:8px;top:6px;border-left:7px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent}
.action-share { background:none!important;border-radius:5px!important }
.apple-tv-lockup { display:flex;align-items:center;gap:3px;text-transform:none!important }.apple-tv-lockup i{position:relative;width:12px;height:14px;border-radius:48% 48% 45% 45%;background:white}.apple-tv-lockup i::before{content:"";position:absolute;width:6px;height:4px;right:-1px;top:-3px;border-radius:80% 0;background:white;transform:rotate(-35deg)}

.share-screen { padding:24px 24px 24px;overflow:hidden;background:radial-gradient(circle at 50% 39%,rgba(118,83,240,.21),transparent 35%),#050507 }.share-screen header{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;text-align:center}.share-screen header>span{color:#a69bdc;font-size:8px;letter-spacing:.15em}.share-preview{margin:24px auto 17px;width:260px;height:294px;overflow:hidden;border-radius:25px;box-shadow:0 38px 75px rgba(0,0,0,.55),0 0 50px rgba(108,72,233,.15)}.share-art{height:180px;background-repeat:no-repeat}.share-preview>div:last-child{padding:12px 15px}.share-preview span{color:#b4a7f2;font-size:7px;letter-spacing:.13em}.share-preview h1{margin:6px 0 4px;font-size:18px;line-height:1.02}.share-preview p{margin:0;color:var(--muted);font-size:8px}.share-copy{text-align:center}.share-copy h2{margin:0;font-size:23px;line-height:1.04;letter-spacing:-.04em}.share-copy p{max-width:300px;margin:7px auto 12px;color:var(--silver);font-size:9px;line-height:1.4}.share-destinations{display:flex;justify-content:center;gap:24px;margin-bottom:14px}.share-destinations button{display:grid;place-items:center;gap:5px;color:#cac6d4;background:none;border:0;font-size:7px}.share-destinations i{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(255,255,255,.06);font-style:normal}.share-message::after{content:"";width:17px;height:13px;border:1.4px solid white;border-radius:7px 7px 7px 2px}.share-link::after{content:"↗";font-size:18px}.share-more{font-size:14px}.share-screen>.primary-button{width:100%;height:46px}

@media (prefers-reduced-motion: reduce) {
  .charged-card,.orb-electric,.taste-complete i { animation:none!important; }
  .taste-swipe-card,.friday-card,.result-card { transition:opacity .2s ease!important; }
  .reveal-burst { display:none; }
}

/* Signature Experience Sprint — visual, physical and temporal polish */
.discover-v4 { padding-top:27px; padding-bottom:106px; }
.discover-v4 .friday-ribbon { margin-top:14px; }
.discover-v4 .discover-heading { margin-top:15px; }
.discover-v4 .discover-heading h1 { font-size:32px; }
.discover-v4 .search-glass { margin-top:13px; padding:14px 15px 10px; }
.discover-v4 .search-glass textarea { height:73px; }
.discover-v4 .inspiration { margin-top:13px; }
.discover-v4 .section-label { margin-bottom:8px; }
.discover-v4 .prompt-card { height:91px; }
.glass-nav { bottom:12px; height:62px; box-shadow:0 18px 55px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.12),0 0 0 .5px rgba(255,255,255,.08); }

.orb { transform:translateZ(0); }
.orb-status { position:absolute;inset:-12%;border-radius:50%;border:1px solid transparent;border-top-color:rgba(225,219,255,.7);border-left-color:rgba(125,98,255,.22);filter:drop-shadow(0 0 7px #8f78ff);animation:orb-status-drift 4.8s cubic-bezier(.55,.08,.35,.93) infinite; }
.orb-ready .orb-core,.search-glass .orb-core { animation:orb-ready-charge 2.7s cubic-bezier(.45,0,.2,1) infinite; }
.orb-ready .orb-electric,.search-glass .orb-electric { animation-duration:3.7s; }
.orb-recognising .orb-core,.recognition-space .orb-core { animation:orb-thinking 1.45s cubic-bezier(.45,0,.2,1) infinite; }
.orb-recognising .orb-electric,.recognition-space .orb-electric { animation-duration:.85s;filter:drop-shadow(0 0 7px #eeeaff); }
.orb-recognising .orb-field i,.recognition-space .orb-field i { animation-duration:1.1s;box-shadow:0 0 18px #c8bcff; }
.orb-complete .orb-core,.film-dna-finale .orb-core { animation:orb-resolve 1.5s cubic-bezier(.18,.9,.25,1) both; }
@keyframes orb-status-drift{0%,100%{transform:rotate(-24deg) scale(.92);opacity:.25}45%{transform:rotate(146deg) scale(1.04);opacity:.85}72%{transform:rotate(211deg) scale(.98);opacity:.45}}
@keyframes orb-ready-charge{0%,100%{transform:scale(.96);filter:saturate(.85)}46%{transform:scale(1.045);filter:saturate(1.35) brightness(1.12)}58%{transform:scale(1.01)}}
@keyframes orb-thinking{0%,100%{transform:scale(.94) rotate(-2deg)}35%{transform:scale(1.05) rotate(1deg)}67%{transform:scale(.99) rotate(2deg)}}
@keyframes orb-resolve{0%{transform:scale(.82);filter:brightness(1.8)}55%{transform:scale(1.1);filter:brightness(1.25)}100%{transform:scale(1);filter:brightness(1)}}

.result-card.opening { z-index:30!important;left:50%!important;top:20px!important;opacity:1!important;transform:translateX(-50%) scale(1.075)!important;animation:signature-suspend .95s cubic-bezier(.16,.88,.2,1) both!important; }
.result-card.opening .result-inner { transform:rotateY(180deg); }
.result-card.opening .reveal-burst i,.friday-card.opening .reveal-burst i { animation:light-fragment .9s ease-out both; }
.result-card.opening .poster-light,.friday-card.opening .friday-front>i { animation:reveal-flash .8s ease-out both; }
@keyframes signature-suspend{0%{filter:brightness(2.2);transform:translateX(-50%) scale(.94)}45%{filter:brightness(1.34);transform:translateX(-50%) scale(1.1)}100%{filter:brightness(1);transform:translateX(-50%) scale(1.075)}}
@keyframes reveal-flash{0%{opacity:1;background:rgba(255,255,255,.62)}100%{opacity:.12;background:transparent}}

.trio-final-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:22px 22px 0;align-items:start; }
.final-film { position:relative;display:flex;min-width:0;flex-direction:column;align-items:flex-start;text-align:left;color:#fff;background:none;border:0;padding:0; }
.final-film>span { width:100%;height:155px;border-radius:15px;border:1px solid rgba(255,255,255,.15);overflow:hidden;background-size:cover;background-position:center;box-shadow:0 20px 34px rgba(0,0,0,.42); }
.final-film>span i { display:block;width:100%;height:100%;background:linear-gradient(180deg,transparent 65%,rgba(0,0,0,.62)); }
.final-film>b { margin-top:9px;color:#81789c;font-size:7px;letter-spacing:.12em; }
.final-film>strong { width:100%;margin-top:3px;font-size:9px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.final-film>small { margin-top:3px;color:#a998ff;font-size:7px; }
.final-film.rank-1 { transform:translateY(-12px); }
.final-film.rank-1>span { border-color:rgba(179,158,255,.5);box-shadow:0 22px 44px rgba(0,0,0,.5),0 0 32px rgba(112,78,229,.22); }
.reveal-complete .results-actions { margin-top:20px; }

.friday-card.opening { z-index:30!important;left:50%!important;top:24px!important;opacity:1!important;transform:translateX(-50%) rotateY(180deg) scale(1.06)!important;animation:signature-suspend-friday 1s cubic-bezier(.16,.88,.2,1) both!important; }
@keyframes signature-suspend-friday{0%{filter:brightness(2.3);transform:translateX(-50%) rotateY(0) scale(.92)}48%{filter:brightness(1.32);transform:translateX(-50%) rotateY(180deg) scale(1.1)}100%{filter:brightness(1);transform:translateX(-50%) rotateY(180deg) scale(1.06)}}
.friday-complete .friday-stage { height:344px;display:flex;align-items:flex-start;justify-content:center;gap:8px;padding:22px 14px 0; }
.friday-complete .friday-card { position:relative!important;left:auto!important;top:auto!important;width:102px!important;height:244px!important;opacity:1!important;transform:rotateY(180deg) scale(1)!important; }
.friday-complete .friday-card.rank-1 { transform:rotateY(180deg) translateY(-12px) scale(1)!important; }
.friday-complete .friday-front strong { display:block!important;bottom:38px!important;color:#fff!important;font-size:10px!important;line-height:1.12!important;text-shadow:0 2px 10px #000,0 1px 3px #000; }
.friday-complete .friday-front small { display:block!important;bottom:16px!important;color:#d6d0df!important;font-size:7px!important;line-height:1.15!important;text-shadow:0 1px 6px #000; }
.friday-complete .friday-front strong { font-size:9px;white-space:normal; }
.friday-complete .friday-front small { font-size:7px; }

/* Gate B - global visual and motion language */
.glass-nav {
  position:fixed;
  left:14px;
  right:14px;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  width:auto;
  height:66px;
  border-radius:24px;
  background:linear-gradient(120deg,rgba(34,32,43,.52),rgba(11,11,16,.64));
  border-color:rgba(255,255,255,.16);
  backdrop-filter:blur(25px) saturate(165%);
  -webkit-backdrop-filter:blur(25px) saturate(165%);
  box-shadow:inset 0 1px rgba(255,255,255,.14),0 16px 45px rgba(0,0,0,.42),0 0 30px rgba(104,74,220,.08);
}
.glass-nav button {
  position:relative;
  min-width:64px;
  min-height:44px;
  gap:4px;
  font-size:11px;
  transition:color .18s var(--ease-standard),transform .18s var(--ease-standard);
}
.glass-nav button:active { transform:scale(.96); }
.glass-nav button.active::after { bottom:-3px; }
.glass-nav button > span { width:19px;height:19px; }

.welcome-v4 .welcome-message h1 {
  font-size:32px;
  line-height:1.01;
  letter-spacing:-.043em;
}
.welcome-actions > span { font-size:11px;line-height:1.35; }
.onboarding-screen > header { font-size:11px; }
.taste-actions { gap:8px; }
.taste-actions button { min-width:0;padding:0 8px;gap:9px; }
.taste-actions button span { font-size:11px; }
.taste-actions button > i:not(.action-x) { flex:0 0 22px; }
.taste-actions .action-heart {
  width:12px;
  height:12px;
  flex-basis:18px!important;
}
.taste-actions .action-heart::before,
.taste-actions .action-heart::after { width:12px;height:12px; }
.taste-actions .action-heart::before { left:-6px; }
.taste-actions .action-heart::after { top:-6px; }

.reveal-complete .trio-final-grid { margin-top:18px; }
.reveal-complete .final-film > span { height:142px; }
.reveal-complete .final-film > b,
.reveal-complete .final-film > strong,
.reveal-complete .final-film > small { font-size:11px; }
.reveal-complete .final-film > strong {
  min-height:38px;
  font-size:10px;
  white-space:normal;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
.reveal-complete .results-actions {
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  margin:26px 24px 0;
}

.profile-control,
.section-label button,
.mystery-number,
.result-number,
.poster-rank,
.poster-copy span,
.match-chip,
.revealed-3 .poster-copy span,
.film-title > span,
.film-title p,
.watch-row,
.featured-collection small,
.featured-collection button,
.collection-list small,
.library-sections small,
.library-summary span,
.taste-card > div:first-child,
.taste-card p,
.taste-card button,
.profile-list button,
.profile-list b,
.calibration-copy span,
.calibration-copy p,
.calibration-poster span,
.friday-ribbon b,
.onboarding-card span,
.permission-preview small,
.decision-actions span,
.watch-options button span,
.friday-back b,
.friday-front small,
.settings-group button small,
.settings-group button strong,
.watchlist-grid strong,
.clarify-screen > small,
.collection-hero p,
.collection-grid strong,
.share-screen header > span,
.share-preview span,
.share-preview p,
.share-destinations button,
.final-film > b,
.final-film > small,
.friday-back em,
.friday-complete .friday-front small {
  font-size:11px;
}

.eyebrow,
.friday-ribbon > span,
.permission-preview span,
.constraint-card span,
.collection-hero span,
.settings-group > span,
.watchlist-screen > header > div span,
.share-preview span,
.film-v4 .film-title > span {
  font-size:11px;
  line-height:1.2;
}

.legal { font-size:11px;line-height:1.4; }
.query-footer > span,
.prompt-copy b,
.film-v4 .why-panel > button,
.watch-options > div small,
.watch-options button strong,
.spoiler-safe > span,
.spoiler-safe button,
.friday-hint,
.settings-group button small,
.settings-group button strong,
.settings-note p,
.collection-grid small,
.watchlist-grid small,
.share-copy p,
.share-preview p,
.share-destinations button {
  font-size:11px;
}

.glass-panel,
.glass-button,
.circle-control,
.glass-nav {
  transition:
    transform .18s var(--ease-standard),
    border-color .22s var(--ease-standard),
    background-color .22s var(--ease-standard),
    box-shadow .22s var(--ease-standard);
}

.screen { animation:enter .42s var(--ease-enter); }
@keyframes enter {
  from { opacity:0;transform:scale(.992) }
  to { opacity:1;transform:scale(1) }
}

.orb-halo { animation:orb-breathe 4.1s var(--ease-standard) infinite; }
.orb-core { animation:orb-drift 6.2s var(--ease-standard) infinite; }
@keyframes orb-breathe {
  0%,100% { transform:scale(.985);opacity:.62 }
  43% { transform:scale(1.055);opacity:.82 }
  68% { transform:scale(1.025);opacity:.7 }
}
@keyframes orb-drift {
  0%,100% { transform:translateY(0) rotate(0) }
  46% { transform:translateY(-2.5px) rotate(.45deg) }
  72% { transform:translateY(-1px) rotate(-.2deg) }
}

.mystery-shell { animation-duration:6.6s;animation-timing-function:var(--ease-standard); }
.mystery-shell.card-3 { animation-duration:7.2s; }
.mystery-shell.card-2 { animation-duration:6.4s;animation-delay:-2.1s; }
.mystery-shell.card-1 { animation-duration:7.5s;animation-delay:-4.3s; }
@keyframes card-float {
  0%,100% { translate:0 0 }
  45% { translate:0 -3.5px }
  72% { translate:0 -1.5px }
}

.prompt-card,
.watchlist-grid button,
.collection-grid button,
.decision-actions button,
.result-card,
.friday-card {
  transition:transform .22s var(--ease-standard),filter .22s var(--ease-standard),box-shadow .22s var(--ease-standard);
}
.prompt-card:active,
.watchlist-grid button:active,
.collection-grid button:active,
.decision-actions button:active {
  transform:scale(.975);
}

@media (prefers-reduced-motion: reduce) {
  .screen { animation:reduced-enter .22s ease-out; }
  .orb-halo,.orb-core,.orb-electric,.mystery-shell,.charged-card,.friday-card,.auth-poster-track { animation:none!important; }
  .auth-poster-track.track-a{transform:translateY(-180px)}
  .auth-poster-track.track-b{transform:translateY(-410px)}
  .prompt-card,.watchlist-grid button,.collection-grid button,.decision-actions button,.result-card,.friday-card { transition:opacity .2s ease,filter .2s ease!important; }
  .prompt-card:active,.watchlist-grid button:active,.collection-grid button:active,.decision-actions button:active,.circle-control:active,.primary-button:active { transform:none; }
  @keyframes reduced-enter { from { opacity:0 } to { opacity:1 } }
}
.device.manual-reduced-motion .auth-poster-track{animation:none!important}
.device.manual-reduced-motion .auth-poster-track.track-a{transform:translateY(-180px)}
.device.manual-reduced-motion .auth-poster-track.track-b{transform:translateY(-410px)}

@media (prefers-contrast: more) {
  :root { --silver:#d1d1d8;--muted:#b2b2ba;--line:rgba(255,255,255,.32); }
  .glass-panel,.glass-button,.circle-control,.glass-nav,.content-material { border-color:var(--line); }
}

@media (prefers-reduced-transparency: reduce) {
  .glass-panel,.glass-button,.circle-control,.glass-nav {
    background:#1b1b22;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}
.friday-complete .friday-actions { bottom:25px; }

.taste-swipe-card { transition:transform .16s cubic-bezier(.2,.8,.25,1),filter .16s ease;will-change:transform; }
.taste-ghost { transition:transform .16s cubic-bezier(.2,.8,.25,1),opacity .16s ease; }
.taste-swipe-card.undo-arrival { animation:taste-return .52s cubic-bezier(.16,.9,.2,1) both; }
@keyframes taste-return{0%{transform:translateX(-115%) rotate(-12deg) scale(.94);opacity:.2}65%{transform:translateX(3%) rotate(1deg) scale(1.01);opacity:1}100%{transform:none}}

.apple-tv-lockup img { width:13px;height:16px;display:block;filter:brightness(0) invert(1); }

/* Gate B — unified cinematic environment */
:root {
  --cinema-black:#070611;
  --cinema-blue:#0b0b18;
  --trio-electric:#8b5cf6;
  --trio-electric-light:#b39cff;
  --trio-electric-deep:#5335b7;
  --trio-electric-shadow:#241545;
}
.device { background:var(--cinema-black); }
.screen {
  isolation:isolate;
  background:
    radial-gradient(ellipse at 108% 14%,rgba(139,92,246,.13),transparent 34%),
    radial-gradient(ellipse at -12% 72%,rgba(82,55,180,.11),transparent 38%),
    linear-gradient(165deg,var(--cinema-blue),var(--cinema-black) 46%,#05050a);
}
.screen::before {
  content:"";
  position:absolute;
  z-index:-2;
  inset:-18%;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 82% 20%,rgba(151,110,255,.12),transparent 26%),
    radial-gradient(ellipse at 16% 64%,rgba(82,52,178,.11),transparent 30%);
  filter:blur(24px);
  animation:ambient-drift 18s var(--ease-standard) infinite alternate;
}
.screen::after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E"),linear-gradient(180deg,transparent 68%,rgba(0,0,0,.45));
  mix-blend-mode:soft-light;
}
@keyframes ambient-drift { to { transform:translate3d(-2%,1.5%,0) scale(1.04); } }

.content-material {
  border-color:rgba(188,166,255,.13);
  background:
    linear-gradient(140deg,rgba(85,57,139,.20),rgba(19,18,31,.73) 46%,rgba(11,11,18,.82)),
    rgba(18,18,25,.72);
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 20px 48px rgba(0,0,0,.28),0 0 34px rgba(103,66,209,.045);
  backdrop-filter:blur(28px) saturate(145%);
}
.glass-panel,.circle-control,.glass-nav {
  background:linear-gradient(145deg,rgba(91,73,135,.15),rgba(20,20,29,.5));
  border-color:rgba(207,193,255,.16);
  backdrop-filter:blur(32px) saturate(150%);
}
.edge-energy { position:absolute;inset:-80px;pointer-events:none;background:radial-gradient(ellipse at 0 35%,rgba(139,92,246,.16),transparent 32%),radial-gradient(ellipse at 100% 72%,rgba(87,53,185,.17),transparent 32%);filter:blur(24px); }

/* Welcome */
.welcome-v4 { padding-top:52px; }
.welcome-v4::after { opacity:.12;filter:blur(18px) saturate(.8) hue-rotate(8deg); }
.welcome-v4 .welcome-brand { margin-top:0;filter:drop-shadow(0 0 42px rgba(139,92,246,.18)); }
.welcome-v4 .welcome-message { margin-top:44px; }
.welcome-v4 .welcome-message .eyebrow { display:block;margin-bottom:12px;color:#9a7cf2;letter-spacing:.17em; }
.welcome-v4 .welcome-message h1 { margin-bottom:15px; }
.welcome-v4 .welcome-actions { margin-top:24px; }
.welcome-v4 .primary-button,.taste-complete .primary-button { background:linear-gradient(180deg,#fff,#efedf5 58%,#d7d3e0);border-color:#fff;box-shadow:0 3px 0 #aaa5b6,0 14px 34px rgba(0,0,0,.42),0 0 28px rgba(139,92,246,.11),inset 0 1px #fff; }

/* Bottom navigation: one continuous floating lens */
.glass-nav { display:grid;grid-template-columns:repeat(4,1fr);justify-content:initial;padding:5px 6px;background:rgba(21,19,31,.56); }
.glass-nav button { width:100%;height:55px;min-width:0;z-index:1;border-radius:18px; }
.glass-nav button.active { color:#fff; }
.glass-nav button.active::before { content:"";position:absolute;z-index:-1;inset:0;border:1px solid rgba(198,181,255,.16);border-radius:18px;background:linear-gradient(145deg,rgba(139,92,246,.23),rgba(255,255,255,.05));box-shadow:inset 0 1px rgba(255,255,255,.11),0 0 20px rgba(116,78,226,.1); }
.glass-nav button.active::after { display:none; }
.nav-spark::before { content:"";position:absolute;inset:2px;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 38%);background:currentColor; }
.nav-person::before { content:"";position:absolute;left:6px;top:1px;width:7px;height:7px;border:1.4px solid currentColor;border-radius:50%; }
.nav-person::after { content:"";position:absolute;left:3px;bottom:1px;width:13px;height:7px;border:1.4px solid currentColor;border-bottom:0;border-radius:9px 9px 0 0; }

.friday-ribbon { background:linear-gradient(120deg,rgba(91,49,183,.66),rgba(47,29,94,.64) 52%,rgba(18,16,29,.62));border-color:rgba(180,151,255,.23);box-shadow:inset 0 1px rgba(255,255,255,.11),0 14px 35px rgba(0,0,0,.25),0 0 30px rgba(116,76,229,.12); }
.memory-links { display:flex;gap:8px;margin-top:10px; }
.memory-links button,.filter-pills button { border:1px solid rgba(189,171,255,.14);border-radius:999px;padding:7px 11px;color:#aaa4ba;background:rgba(34,30,51,.42);font-size:11px; }
.memory-links button:active,.filter-pills button.active { color:#fff;background:rgba(127,86,229,.24);border-color:rgba(190,169,255,.32); }

/* Explore and library expansion */
.list-search { height:46px;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:16px;margin:-11px 0 12px; }
.list-search .nav-search { width:17px;height:17px;color:#aaa4ba;position:relative; }
.list-search input { flex:1;border:0;outline:0;color:white;background:none;font-size:13px; }
.list-search input::placeholder { color:#777283; }
.filter-pills { display:flex;gap:7px;overflow-x:auto;margin:0 0 14px;scrollbar-width:none; }
.filter-pills button { white-space:nowrap; }
.explore-screen .featured-collection { height:185px; }
.collection-list button > span:nth-child(2) small:first-child { color:#9d82ee;font-size:8px;letter-spacing:.12em; }
.library-screen .library-sections { padding-bottom:12px; }
.library-art.previous-art,.library-art.search-art,.library-art.recent-art,.library-art.watched-art,.library-art.viewed-art,.library-art.friday-art,.library-art.inbox-art { background:linear-gradient(145deg,rgba(119,79,223,.4),rgba(19,18,28,.9));border:1px solid rgba(195,177,255,.14); }
.library-art .brand-mark { width:25px;height:25px;opacity:.75; }

/* Subpages and complete state coverage */
.sublist-screen { padding:30px 22px 34px;overflow-y:auto;scrollbar-width:none; }
.sublist-screen::-webkit-scrollbar { display:none; }
.subpage-header { display:grid;grid-template-columns:44px 1fr 44px;gap:10px;align-items:center; }
.subpage-header > div { min-width:0; }
.subpage-header span { color:#9b83e9;font-size:9px;letter-spacing:.14em; }
.subpage-header h1 { margin:3px 0 0;font-size:21px;line-height:1.05;letter-spacing:-.04em;white-space:normal; }
.more-control { font-size:14px;letter-spacing:2px; }
.subpage-intro { color:var(--silver);font-size:13px;line-height:1.45;margin:22px 2px 16px; }
.sublist { display:grid;gap:9px; }
.sublist > button { min-height:76px;display:grid;grid-template-columns:56px 1fr 15px;gap:12px;align-items:center;padding:9px;border-radius:18px;color:white;text-align:left; }
.sublist-art { width:56px;height:56px;border-radius:12px;background-size:cover; }
.sublist > button > span:nth-child(2) { display:grid;gap:5px; }
.sublist strong { font-size:12px;line-height:1.25; }
.sublist small { color:#8f899c;font-size:10px; }
.state-preview-link { display:block;margin:18px auto 0;border:0;background:none;color:#9f8bdc;font-size:11px;text-decoration:underline;text-underline-offset:4px; }

.account-identity { display:flex;align-items:center;gap:14px;margin:24px 0;padding:16px;border-radius:21px; }
.account-identity > div:last-child { display:grid;gap:4px; }
.account-identity small { color:var(--silver); }
.destructive-copy { color:#ff8d91!important; }
.subscription-screen,.decision-screen,.system-state-screen,.receiver-screen { padding:64px 26px 34px;text-align:center;display:flex;flex-direction:column;align-items:center; }
.subscription-screen > .brand-mark { margin-top:8px;filter:drop-shadow(0 0 34px rgba(139,92,246,.25)); }
.subscription-screen h1,.decision-screen h1,.system-state-screen h1,.receiver-screen h1 { margin:14px 0 12px;font-size:31px;line-height:1.02;letter-spacing:-.045em; }
.subscription-screen ul { width:100%;padding:0;margin:23px 0;display:grid;gap:12px;list-style:none;text-align:left;color:#d7d3df;font-size:13px; }
.subscription-screen li::before { content:"✓";color:#b39cff;margin-right:10px; }
.plan-card { width:100%;display:grid;gap:5px;padding:17px;border-radius:20px;margin-bottom:15px; }
.plan-card span { color:#a78bfa;font-size:9px;letter-spacing:.15em; }.plan-card strong { font-size:23px; }.plan-card small { color:var(--silver); }
.decision-screen { justify-content:center; }
.decision-screen p,.system-state-screen p,.receiver-screen p { color:var(--silver);font-size:14px;line-height:1.5;max-width:310px; }
.decision-symbol { width:64px;height:64px;display:grid;place-items:center;border-radius:22px;background:rgba(132,76,82,.23);border:1px solid rgba(255,139,145,.22);color:#ff9ba0;font-size:25px; }
.destructive-button { width:100%;height:54px;margin-top:25px;border:1px solid rgba(255,143,148,.28);border-radius:18px;color:#fff;background:linear-gradient(180deg,#b33d49,#852b35);font-weight:650; }
.state-orb { height:185px; }
.system-state-screen .primary-button { margin-top:24px; }
.state-gallery { overflow-y:auto; }
.state-grid { display:grid;gap:9px; }
.state-grid button { min-height:67px;padding:12px 14px;display:grid;grid-template-columns:1fr 20px;gap:4px;border-radius:17px;color:white;text-align:left; }
.state-grid span { grid-column:1;color:#9d83ec;font-size:8px;letter-spacing:.13em; }
.state-grid strong { font-size:12px; }.state-grid i { grid-column:2;grid-row:1/3;align-self:center;font-style:normal; }
.receiver-screen { justify-content:center; }
.receiver-screen > .brand-mark { margin:18px 0 0; }
.receiver-cards { width:230px;height:145px;position:relative;margin:24px 0; }
.receiver-cards > span { position:absolute;width:83px;height:130px;border:1px solid rgba(199,181,255,.22);border-radius:18px;background:linear-gradient(145deg,#2a233b,#0d0b14);box-shadow:0 22px 45px rgba(0,0,0,.4); }
.receiver-cards > span:nth-child(1){left:0;transform:rotate(-5deg) translateY(10px)}.receiver-cards > span:nth-child(2){left:74px;z-index:2}.receiver-cards > span:nth-child(3){right:0;transform:rotate(5deg) translateY(10px)}
.receiver-cards b { position:absolute;top:12px;left:12px;color:#9a90af;font-size:9px; }.receiver-cards .brand-mark { position:absolute;width:27px;height:27px;left:28px;bottom:17px;opacity:.48; }
.receiver-screen > small { color:#6e6878;font-size:9px;line-height:1.4;margin-top:12px; }

.auth-status .status-symbol { height:150px;display:grid;place-items:center; }
.auth-status .primary-button { margin-top:14px; }
.auth-status .state-preview-link { color:#6f687d; }
.auth-screen .auth-list { gap:9px; }
.auth-screen .provider-button { height:52px; }
.auth-screen .guest-button { height:28px;padding:4px;margin-top:1px; }
.auth-screen .legal { bottom:20px; }
.auth-screen .auth-brand { height:82px; }
.auth-screen .auth-copy h1 { margin-top:14px; }
.auth-screen .auth-copy p { margin-bottom:20px; }
.auth-screen{isolation:isolate;background:linear-gradient(180deg,rgba(7,6,15,.43),rgba(7,6,14,.76) 43%,#08070f 78%)}
.auth-screen::before{z-index:-1}
.auth-screen>.edge-energy{z-index:-1}
.auth-screen>.auth-brand,.auth-screen>.auth-copy,.auth-screen>.auth-list,.auth-screen>.email-panel,.auth-screen>.legal,.auth-screen>.status-symbol,.auth-screen>.primary-button,.auth-screen>.quiet-button,.auth-screen>.state-preview-link{position:relative;z-index:3}
.auth-cinema{position:absolute;z-index:-2;inset:-19% -15% 22%;overflow:hidden;transform:rotate(-7deg) scale(1.08);opacity:.68;pointer-events:none;mask-image:linear-gradient(180deg,#000 0 68%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 0 68%,transparent 100%)}
.auth-poster-track{position:absolute;top:-232px;width:128px;display:grid;gap:12px;will-change:transform}
.auth-poster-track.track-a{left:50px;animation:auth-reel-forward 38s linear infinite}
.auth-poster-track.track-b{right:37px;top:-302px;animation:auth-reel-reverse 44s linear infinite}
.auth-poster{display:block;width:128px;height:182px;border-radius:17px;border:1px solid rgba(225,216,255,.21);background-size:cover;background-position:center;box-shadow:0 24px 48px rgba(0,0,0,.62),0 0 0 .5px rgba(151,112,255,.12),inset 0 1px rgba(255,255,255,.13);filter:saturate(.94) contrast(1.08) brightness(.78)}
.auth-cinema-shade{position:absolute;inset:-5%;background:linear-gradient(180deg,rgba(4,3,10,.08),rgba(6,5,13,.39) 53%,#08070f 90%),radial-gradient(circle at 50% 42%,rgba(126,75,246,.23),transparent 34%),linear-gradient(90deg,rgba(4,3,10,.48),transparent 29% 71%,rgba(4,3,10,.52));backdrop-filter:blur(1.15px)}
.auth-screen::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 33%,rgba(134,84,255,.18),transparent 29%),linear-gradient(180deg,transparent 32%,rgba(8,7,15,.5) 58%,#08070f 83%);box-shadow:inset 0 0 80px rgba(0,0,0,.35)}
.auth-screen .guest-button{transform:translateY(-17px);margin-bottom:17px;color:#c2bdca}
.auth-screen .legal{position:absolute;left:34px;right:34px;bottom:17px;color:#918b9a;font-size:9.5px;line-height:1.42}
.auth-screen .legal u{color:#b1a7c3;text-decoration-color:rgba(177,167,195,.48);text-underline-offset:2px}
.auth-screen .email-panel{border:1px solid rgba(205,188,255,.22);background:linear-gradient(145deg,rgba(67,49,103,.34),rgba(16,14,25,.76));box-shadow:inset 0 1px rgba(255,255,255,.11),0 22px 50px rgba(0,0,0,.34),0 0 30px rgba(115,75,222,.08)}
.auth-screen .email-panel label{color:#c5bdcf}
.auth-screen .email-panel input{border-color:rgba(208,194,255,.18);background:rgba(5,4,11,.5);box-shadow:inset 0 1px 8px rgba(0,0,0,.22)}
.auth-screen .email-panel input::placeholder{color:#85808e}
@keyframes auth-reel-forward{from{transform:translateY(0)}to{transform:translateY(-776px)}}
@keyframes auth-reel-reverse{from{transform:translateY(-776px)}to{transform:translateY(0)}}

/* Gate B authentication master — optically balanced, platform-native, accessible */
.auth-screen{
  --auth-side:26px;
  padding:98px var(--auth-side) 96px;
  display:flex;
  flex-direction:column;
  text-align:center;
  isolation:isolate;
  background:linear-gradient(180deg,rgba(6,5,13,.3),rgba(7,6,15,.72) 45%,#08070f 82%);
}
.ios-status{
  position:absolute;z-index:15;top:18px;left:27px;right:27px;height:21px;
  display:flex;align-items:center;justify-content:space-between;color:#fff;
  font-size:13px;letter-spacing:-.02em;pointer-events:none;
}
.ios-status strong{font-weight:700}
.ios-status>span{display:flex;align-items:center;gap:6px}
.status-cell{width:16px;height:11px;background:linear-gradient(90deg,#fff 18%,transparent 18% 27%,#fff 27% 46%,transparent 46% 55%,#fff 55% 74%,transparent 74% 82%,#fff 82%);clip-path:polygon(0 100%,0 73%,22% 73%,22% 49%,48% 49%,48% 25%,74% 25%,74% 0,100% 0,100% 100%)}
.status-wifi{width:15px;height:11px;border:2px solid #fff;border-color:#fff transparent transparent;border-radius:50%;position:relative}
.status-wifi::after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;left:4px;top:3px}
.status-battery{width:20px;height:10px;border:1.5px solid rgba(255,255,255,.9);border-radius:3px;position:relative}
.status-battery::before{content:"";position:absolute;inset:1.5px;background:#fff;border-radius:1px}
.status-battery::after{content:"";position:absolute;right:-3px;top:2px;width:2px;height:4px;border-radius:0 2px 2px 0;background:rgba(255,255,255,.75)}
.auth-screen>.close-control{
  position:absolute;z-index:16;top:48px;right:20px;left:auto;
  width:44px;height:44px;border-color:rgba(232,226,255,.18);
  background:linear-gradient(145deg,rgba(60,49,88,.48),rgba(12,10,21,.5));
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 10px 30px rgba(0,0,0,.25);
}
@media (hover: hover) and (pointer: fine){.auth-screen>.close-control:hover{background:linear-gradient(145deg,rgba(79,62,119,.55),rgba(18,14,31,.58))}}/* (29 October 2026) hover only for a real pointer: a finger leaves :hover on whatever it last touched (hub/docs/TASTE-INTRO-2026-10-29.md) */
.auth-screen>.close-control:active{transform:scale(.93)}
.auth-screen>.auth-back{
  position:absolute;z-index:16;top:48px;left:20px;
  width:44px;height:44px;border-color:rgba(232,226,255,.18);
  background:linear-gradient(145deg,rgba(60,49,88,.48),rgba(12,10,21,.5));
}
.auth-screen>.auth-back i{width:9px;height:9px;border-width:0 0 1.6px 1.6px}
.close-glyph{width:13px;height:13px}
.close-glyph i{top:5.6px;width:13px;height:1.25px;transform-origin:center}
.auth-screen .auth-brand{
  flex:0 0 58px;height:58px;gap:9px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
}
.auth-screen .auth-brand .brand-mark{width:28px;height:28px}
.auth-screen .auth-brand .wordmark{width:62px}
.auth-screen .auth-copy{margin-top:34px}
.auth-screen .auth-copy h1{
  margin:0 0 11px;font-size:29px;line-height:1.08;letter-spacing:-.047em;font-weight:650;
  text-wrap:balance;
}
.auth-screen .auth-copy p{
  margin:0 auto;max-width:310px;color:#bbb5c4;font-size:13px;line-height:1.52;
  text-wrap:balance;
}
.auth-screen .auth-list{display:grid;gap:10px;margin-top:28px}
.auth-screen .provider-button{
  height:55px;border-radius:17px;grid-template-columns:42px 1fr 42px;
  border-color:rgba(224,215,255,.17);
  background:linear-gradient(145deg,rgba(47,38,68,.58),rgba(14,12,23,.69));
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 12px 30px rgba(0,0,0,.25),0 0 22px rgba(125,82,237,.035);
  backdrop-filter:blur(30px) saturate(145%);
  font-size:15px;font-weight:590;letter-spacing:-.012em;
  transition:transform .16s var(--ease-standard),border-color .16s var(--ease-standard),background .16s var(--ease-standard);
}
.auth-screen .provider-button:active{transform:translateY(1px) scale(.985);border-color:rgba(225,213,255,.28)}
.auth-screen .provider-button img,.auth-screen .provider-button .mail-icon{width:18px;height:18px}
.auth-screen .provider-apple{
  color:#08080b;border-color:rgba(255,255,255,.98);
  background:linear-gradient(180deg,#fff 0,#fafafa 58%,#e9e9ed 100%);
  box-shadow:0 2px 0 #c9c9ce,0 12px 30px rgba(0,0,0,.32),inset 0 1px #fff;
}
.auth-screen .guest-button{
  transform:none;height:auto;margin:2px 0 0;padding:7px;color:#d0cad7;font-size:12px;
  text-decoration:underline;text-decoration-color:rgba(208,202,215,.48);text-underline-offset:4px;
}
.auth-screen .legal{
  position:absolute!important;z-index:5;left:38px;right:38px;bottom:30px;
  display:block;margin:0;color:#817b89;font-size:9.5px;line-height:1.55;text-align:center;text-wrap:balance;
}
.auth-screen .legal button{
  border:0;padding:0;background:none;color:#aaa0bc;font:inherit;text-decoration:underline;
  text-decoration-color:rgba(170,160,188,.47);text-underline-offset:2px;
}
.auth-screen .legal span{white-space:normal}
.auth-cinema{
  inset:-17% -14% 24%;transform:rotate(-6deg) scale(1.075);opacity:.72;
  mask-image:linear-gradient(180deg,#000 0 72%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 72%,transparent 100%);
}
.auth-poster-track{width:130px;gap:12px}
.auth-poster{width:130px;height:184px;border-radius:18px;filter:saturate(.88) contrast(1.07) brightness(.72)}
.auth-cinema-shade{
  background:linear-gradient(180deg,rgba(4,3,10,.06),rgba(6,5,13,.38) 48%,#08070f 92%),
  radial-gradient(circle at 50% 44%,rgba(129,79,247,.25),transparent 35%),
  linear-gradient(90deg,rgba(4,3,10,.54),transparent 28% 72%,rgba(4,3,10,.56));
  backdrop-filter:blur(1.4px)
}
.auth-screen::after{
  background:radial-gradient(ellipse at 50% 34%,rgba(139,89,255,.19),transparent 30%),
  linear-gradient(180deg,transparent 34%,rgba(8,7,15,.52) 59%,#08070f 84%);
}
.auth-email .auth-copy{margin-top:28px}
.auth-email .email-panel{
  margin-top:25px;padding:18px;border-radius:22px;gap:8px;
  border-color:rgba(217,201,255,.2);
  background:linear-gradient(145deg,rgba(55,43,81,.55),rgba(14,12,23,.78));
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 22px 50px rgba(0,0,0,.32);
}
.auth-email .email-panel label{font-size:11px;color:#c9c3d0}
.auth-email .email-panel input{
  height:54px;border-radius:15px;font-size:15px;padding:0 15px;
  border-color:rgba(216,201,255,.18);background:rgba(6,5,12,.55);
}
.auth-email .email-panel input:focus{border-color:rgba(157,118,255,.75);box-shadow:0 0 0 3px rgba(145,94,255,.14),inset 0 1px 8px rgba(0,0,0,.2)}
.auth-email .email-panel input[aria-invalid="true"]{border-color:rgba(255,145,153,.6)}
.auth-email .email-panel small{min-height:14px;color:#8f8998;font-size:9px;line-height:1.4;text-align:left}
.auth-email .email-panel .email-error{color:#ff9ca4;margin-top:-4px}
.auth-email .email-panel .primary-button{margin-top:4px}
.auth-status{align-items:center}
.auth-status .status-symbol{height:158px;margin-top:27px}
.auth-status .auth-copy{margin-top:18px}
.auth-status .auth-copy p{max-width:290px}
.auth-status>.primary-button,.auth-status>.quiet-action{margin-top:28px;width:100%}
.auth-status>.quiet-action{
  min-height:50px;border:1px solid rgba(218,205,255,.18);border-radius:17px;color:#d5cfdf;
  background:linear-gradient(145deg,rgba(48,38,69,.52),rgba(13,11,21,.69));
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 14px 32px rgba(0,0,0,.24);
}
.status-state-icon{
  width:64px;height:64px;display:grid;place-items:center;border-radius:22px;color:#fff;font-size:24px;font-weight:600;
  border:1px solid rgba(214,197,255,.24);
  background:radial-gradient(circle at 35% 27%,rgba(190,167,255,.65),rgba(116,77,220,.5) 35%,rgba(24,18,39,.9) 76%);
  box-shadow:0 0 42px rgba(133,83,246,.25),inset 0 1px rgba(255,255,255,.18);
}
.status-state-icon svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px rgba(255,255,255,.22))}
.status-state-icon.status-verified{color:#eefcff;border-color:rgba(132,226,255,.44);background:radial-gradient(circle at 35% 27%,rgba(139,224,255,.7),rgba(103,88,239,.62) 38%,rgba(24,18,39,.92) 77%);box-shadow:0 0 46px rgba(93,187,255,.3),0 0 72px rgba(171,84,255,.18),inset 0 1px rgba(255,255,255,.2)}
.status-state-icon.status-email-sent{color:#eff8ff;border-color:rgba(155,214,255,.36)}
.auth-state-failure .status-state-icon,.auth-state-offline .status-state-icon,.auth-state-timeout .status-state-icon{color:#ffc4c8;background:linear-gradient(145deg,rgba(116,52,66,.7),rgba(29,17,26,.9))}
.auth-status>.quiet-button{margin-top:10px}

@media (max-height:760px){
  .auth-screen{padding-top:86px;padding-bottom:82px}
  .auth-screen>.close-control,.auth-screen>.auth-back{top:43px}
  .auth-screen .auth-copy{margin-top:20px}
  .auth-screen .auth-list{margin-top:19px;gap:8px}
  .auth-screen .provider-button{height:50px}
  .auth-screen .legal{bottom:24px}
  .auth-status .status-symbol{height:124px;margin-top:14px}
  .auth-email .email-panel{margin-top:17px}
}
@media (prefers-reduced-transparency:reduce){
  .auth-screen .provider-button,.auth-screen .email-panel,.auth-status>.quiet-action,.auth-screen>.circle-control{backdrop-filter:none;background:#171421}
  .auth-screen .provider-apple{color:#08080b;background:#fff}
}
.device.manual-solid .auth-screen .provider-button,
.device.manual-solid .auth-screen .email-panel,
.device.manual-solid .auth-status>.quiet-action,
.device.manual-solid .auth-screen>.circle-control{backdrop-filter:none;background:#171421}
.device.manual-solid .auth-screen .provider-apple{color:#08080b;background:#fff}
.device.manual-large-text .auth-screen .auth-copy h1{font-size:31px}
.device.manual-large-text .auth-screen .auth-copy p{font-size:15px}
.device.manual-large-text .auth-screen .provider-button{font-size:16px}
.device.manual-large-text .auth-screen .legal{font-size:11px;left:28px;right:28px}

/* Gate B Discover master — search is the hero, everything else supports it */
.discover-v4{
  --discover-side:24px;
  isolation:isolate;
  padding:57px var(--discover-side) 118px;
  overflow-x:hidden;
  overflow-y:auto;
  background:
    radial-gradient(ellipse at 88% 15%,rgba(111,70,219,.17),transparent 28%),
    radial-gradient(ellipse at -5% 57%,rgba(86,54,174,.12),transparent 31%),
    linear-gradient(180deg,#080711 0,#07060d 52%,#05050a 100%);
  scroll-padding-bottom:118px;
}
.discover-v4>.edge-energy{z-index:-1;opacity:.82}
.discover-v4::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 78% 30%,rgba(150,106,255,.09),transparent 18%),
    linear-gradient(125deg,transparent 32%,rgba(122,82,226,.055) 48%,transparent 64%);
}
.discover-v4 .ios-status{top:17px}
.discover-v4 .app-header{position:relative;z-index:2;height:38px}
.discover-v4 .brand-home{gap:9px}
.discover-v4 .brand-home .brand-mark{width:29px;height:29px}
.discover-v4 .brand-home .wordmark{width:56px}
.discover-v4 .profile-control{
  width:40px;height:40px;border-radius:50%;font-size:10px;color:#e7e1f2;
  border-color:rgba(213,197,255,.18);
  background:linear-gradient(145deg,rgba(82,62,121,.32),rgba(16,14,25,.66));
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 12px 26px rgba(0,0,0,.25);
}
.discover-v4 .friday-ribbon{
  position:relative;overflow:hidden;min-height:61px;margin-top:18px;padding:12px 15px 13px;
  grid-template-columns:1fr auto;border-radius:19px;
  border-color:rgba(193,165,255,.27);
  background:
    radial-gradient(circle at 8% 26%,rgba(184,133,255,.28),transparent 21%),
    linear-gradient(112deg,rgba(105,56,207,.72),rgba(54,31,108,.68) 52%,rgba(18,15,29,.72));
  box-shadow:inset 0 1px rgba(255,255,255,.14),0 15px 34px rgba(0,0,0,.27),0 0 34px rgba(119,74,226,.13);
}
.discover-v4 .friday-ribbon::after{
  content:"";position:absolute;right:-25px;top:-50px;width:125px;height:125px;border-radius:50%;
  border:1px solid rgba(214,194,255,.11);box-shadow:0 0 38px rgba(155,106,255,.12);pointer-events:none;
}
.discover-v4 .friday-ribbon>span{color:#d0c0ff;font-size:8px;letter-spacing:.16em}
.discover-v4 .friday-ribbon strong{font-size:13px;line-height:1.2;font-weight:630;letter-spacing:-.015em}
.discover-v4 .friday-ribbon b{align-self:center;color:#ded4ff;font-size:10px}
.discover-v4 .discover-heading{margin-top:24px}
.discover-v4 .discover-heading p{margin:0 0 5px;color:#a9a3b2;font-size:13px;line-height:1.3}
.discover-v4 .discover-heading h1{margin:0;font-size:37px;line-height:.98;letter-spacing:-.052em;font-weight:680}
.discover-v4 .search-glass{
  position:relative;min-height:157px;margin-top:18px;padding:17px 17px 12px;border-radius:25px;
  border-color:rgba(203,184,255,.21);
  background:
    radial-gradient(circle at 88% 86%,rgba(136,84,255,.17),transparent 24%),
    linear-gradient(142deg,rgba(79,57,119,.30),rgba(20,17,31,.79) 45%,rgba(10,9,17,.88));
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 24px 52px rgba(0,0,0,.31),0 0 38px rgba(115,70,221,.075);
}
.discover-v4 .request-label{
  display:block;color:#a990ed;font-size:8px;font-weight:650;letter-spacing:.15em;text-align:left;
}
.discover-v4 .search-glass textarea{
  display:block;width:calc(100% - 56px);height:78px;margin-top:8px;padding:0;border:0;outline:0;resize:none;
  color:#f3f0f7;background:transparent;font-size:15px;line-height:1.43;letter-spacing:-.012em;
  caret-color:#b59aff;overflow:hidden;scrollbar-width:none;
}
.discover-v4 .search-glass textarea::-webkit-scrollbar{display:none}
.discover-v4 .search-glass textarea:focus{color:#fff}
.discover-v4 .query-footer{position:absolute;left:17px;right:12px;bottom:11px;align-items:center}
.discover-v4 .query-footer>span{color:#8f8999;font-size:9px}
.discover-v4 .edit-hint::before{color:#b39bf4}
.discover-v4 .query-footer>button{
  width:58px;height:58px;border:1px solid rgba(211,194,255,.16);
  background:radial-gradient(circle,rgba(106,67,198,.19),rgba(21,17,34,.5));
  box-shadow:0 0 28px rgba(115,71,229,.12),inset 0 1px rgba(255,255,255,.1);
}
.discover-v4 .query-footer .orb.compact{width:52px;height:52px}
.discover-v4 .search-preferences{gap:7px;margin-top:11px}
.discover-v4 .search-preferences button{
  min-height:31px;padding:7px 11px;border-radius:999px;color:#aaa4b3;font-size:9.5px;
  border-color:rgba(190,169,255,.15);background:rgba(30,26,43,.57);
}
.discover-v4 .search-preferences button.active{
  color:#f3edff;border-color:rgba(193,165,255,.38);
  background:linear-gradient(145deg,rgba(126,78,230,.31),rgba(53,38,83,.47));
}
.discover-v4 .memory-links{gap:8px;margin-top:8px}
.discover-v4 .memory-links button{
  display:flex;align-items:center;gap:6px;min-height:29px;padding:6px 10px;
  border-color:transparent;color:#9992a3;background:transparent;font-size:10px;
}
.discover-v4 .memory-links button:active{color:#ded5f5;background:rgba(126,86,214,.13)}
.history-glyph,.saved-glyph{position:relative;display:block;width:12px;height:12px;color:#9f91c8}
.history-glyph{border:1px solid currentColor;border-radius:50%}
.history-glyph::after{content:"";position:absolute;left:5px;top:2px;width:1px;height:4px;background:currentColor;box-shadow:2px 3px currentColor;transform-origin:bottom}
.saved-glyph{border:1px solid currentColor;border-radius:2px}
.saved-glyph::after{content:"";position:absolute;left:2px;right:2px;bottom:-1px;height:5px;background:#080711;clip-path:polygon(0 0,50% 70%,100% 0,100% 100%,0 100%)}
.discover-v4 .inspiration{margin-top:18px;padding-bottom:8px}
.discover-v4 .section-label{margin-bottom:10px}
.discover-v4 .section-label>span{color:#bbb4c4;font-size:11px;font-weight:540}
.discover-v4 .section-label>button{color:#a994e7;font-size:10px}
.discover-v4 .section-label i{font-style:normal}
.discover-v4 .prompt-grid{gap:10px}
.discover-v4 .prompt-card{
  height:106px;border-radius:19px;border-color:rgba(211,199,255,.16);
  box-shadow:0 18px 34px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.1);
}
.discover-v4 .prompt-card .prompt-shade{
  background:linear-gradient(180deg,rgba(5,5,10,.03),rgba(7,6,12,.42) 48%,rgba(6,5,10,.92));
}
.discover-v4 .prompt-copy{left:12px;right:11px;bottom:10px;font-size:11px;line-height:1.18}
.discover-v4 .prompt-copy b{margin-top:7px;color:#d7c9ff;font-size:8px;letter-spacing:.01em}
.discover-v4 .glass-nav{
  left:14px;right:14px;bottom:12px;height:68px;padding:5px 6px;border-radius:25px;
  background:linear-gradient(145deg,rgba(38,33,54,.69),rgba(12,11,18,.72));
  border-color:rgba(214,202,255,.18);
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 18px 48px rgba(0,0,0,.49),0 0 30px rgba(103,65,201,.08);
}
.discover-v4 .glass-nav button{height:57px;border-radius:19px;color:#7f7988;font-size:10px}
.discover-v4 .glass-nav button.active::before{
  border-color:rgba(201,178,255,.21);
  background:linear-gradient(145deg,rgba(127,79,229,.28),rgba(76,53,120,.15));
  box-shadow:inset 0 1px rgba(255,255,255,.11),0 0 24px rgba(116,76,226,.13);
}

@media (max-height:760px){
  .discover-v4{padding-top:52px;padding-bottom:108px}
  .discover-v4 .friday-ribbon{margin-top:11px;min-height:52px;padding-top:8px;padding-bottom:8px}
  .discover-v4 .discover-heading{margin-top:14px}
  .discover-v4 .discover-heading h1{font-size:33px}
  .discover-v4 .search-glass{min-height:145px;margin-top:11px}
  .discover-v4 .search-glass textarea{height:66px}
  .discover-v4 .search-preferences{margin-top:8px}
  .discover-v4 .memory-links{margin-top:4px}
  .discover-v4 .inspiration{margin-top:8px}
  .discover-v4 .prompt-card{height:80px}
  .discover-v4 .glass-nav{height:64px}
}
@media (max-height:680px){
  .discover-v4{padding-top:47px;padding-bottom:98px}
  .discover-v4 .app-header{height:34px}
  .discover-v4 .brand-home .brand-mark{width:26px;height:26px}
  .discover-v4 .profile-control{width:36px;height:36px}
  .discover-v4 .friday-ribbon{margin-top:7px;min-height:48px;padding:7px 12px}
  .discover-v4 .discover-heading{margin-top:10px}
  .discover-v4 .discover-heading p{font-size:12px}
  .discover-v4 .discover-heading h1{font-size:30px}
  .discover-v4 .search-glass{min-height:132px;margin-top:8px;padding-top:13px}
  .discover-v4 .search-glass textarea{height:58px;margin-top:5px;font-size:14px}
  .discover-v4 .search-preferences{margin-top:6px}
  .discover-v4 .search-preferences button{min-height:28px;padding-top:5px;padding-bottom:5px}
  .discover-v4 .memory-links{margin-top:1px}
  .discover-v4 .inspiration{margin-top:5px}
  .discover-v4 .section-label{margin-bottom:7px}
  .discover-v4 .prompt-card{height:70px}
  .discover-v4 .prompt-copy{font-size:10px}
  .discover-v4 .prompt-copy b{margin-top:4px}
  .discover-v4 .glass-nav{height:60px}
  .discover-v4 .glass-nav button{height:51px}
}
.device.manual-solid .discover-v4 .search-glass,
.device.manual-solid .discover-v4 .friday-ribbon,
.device.manual-solid .discover-v4 .glass-nav{backdrop-filter:none;background:#171421}
.device.manual-large-text .discover-v4 .discover-heading p{font-size:15px}
.device.manual-large-text .discover-v4 .search-glass textarea{font-size:17px}
.device.manual-large-text .discover-v4 .prompt-copy{font-size:12px}
.taste-card > small { display:block;margin-top:7px;color:#d7d0ee;font-size:11px;line-height:1.4; }
.taste-card > button { display:block;width:100%;text-align:left;margin-top:2px; }
.settings-group button { background:linear-gradient(145deg,rgba(45,39,63,.66),rgba(17,16,25,.84)); }

/* Prevent mirrored brand artwork during 3D reveals */
.friday-card,.friday-back,.friday-front { transform-style:preserve-3d; }
.friday-back,.friday-front { backface-visibility:hidden;-webkit-backface-visibility:hidden; }
.friday-front { transform:rotateY(180deg); }
.friday-card.open .friday-back,.friday-card.opening .friday-back { visibility:hidden; }

@media (max-height:760px) {
  .welcome-v4 { padding-top:35px; }
  .welcome-v4 .brand-mark.large { width:103px;height:103px; }
  .welcome-v4 .welcome-message { margin-top:26px; }
  .welcome-v4 .welcome-message h1 { font-size:29px; }
  .welcome-v4 .welcome-actions { margin-top:18px; }
}
@media (prefers-reduced-motion: reduce) {
  .screen::before { animation:none; }
}
@media (prefers-reduced-transparency: reduce) {
  .content-material,.list-search { background:#191724;backdrop-filter:none;-webkit-backdrop-filter:none; }
}

/* Launch completeness: first session, correction and sharing */
.splash-screen { display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; }
.poster-reel { position:absolute;inset:-9% -17% 37%;overflow:hidden;transform:rotate(-7deg);opacity:.28;mask-image:linear-gradient(180deg,#000 52%,transparent); }
.poster-reel::after { content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 65%,rgba(121,77,238,.3),transparent 28%),linear-gradient(180deg,rgba(5,5,12,.1),#080712 95%); }
.poster-reel > span { position:absolute;width:112px;height:164px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background-size:cover;box-shadow:0 20px 50px rgba(0,0,0,.55); }
.poster-reel .tile-0{left:0;top:16px}.poster-reel .tile-1{left:124px;top:-12px}.poster-reel .tile-2{right:0;top:20px}.poster-reel .tile-3{left:47px;top:188px}.poster-reel .tile-4{left:171px;top:170px}.poster-reel .tile-5{right:-45px;top:202px}
.splash-reel { inset:-8%;opacity:.36;animation:reel-drift 12s linear infinite alternate; }
@keyframes reel-drift { to { transform:rotate(-5.5deg) translate3d(-10px,7px,0); } }
.splash-brand { z-index:2;display:grid;justify-items:center;gap:12px;filter:drop-shadow(0 0 28px rgba(139,92,246,.42));animation:splash-resolve 1s var(--ease-enter) both; }
.splash-brand .wordmark { width:96px; }
.splash-screen > p { z-index:2;margin:26px 0 0;color:#aaa5b4;font-size:16px;letter-spacing:.01em; }
@keyframes splash-resolve { from { opacity:0;transform:scale(.94);filter:blur(5px) } to { opacity:1;transform:none;filter:none } }
.welcome-v4 .poster-reel { inset:-5% -16% 52%;opacity:.18; }
.welcome-v4 .welcome-brand,.welcome-v4 .welcome-message,.welcome-v4 .welcome-actions { position:relative;z-index:2; }

.notification-premium { padding-top:34px;overflow-y:auto;scrollbar-width:none; }
.notification-premium > .wordmark { width:72px;margin:4px auto 0;filter:hue-rotate(8deg) sepia(.15); }
.notification-object { position:relative;width:210px;height:192px;margin:3px auto -4px;filter:drop-shadow(0 0 28px rgba(139,92,246,.34));transform:scale(.82);transform-origin:50% 42%; }
.bell-loop { position:absolute;left:83px;top:15px;width:46px;height:43px;border:3px solid #8061e5;border-radius:50%;box-shadow:0 0 18px rgba(147,105,255,.5),inset 0 0 15px rgba(143,98,255,.22); }
.bell-body { position:absolute;left:35px;top:42px;width:142px;height:145px;border:1px solid rgba(220,207,255,.5);border-radius:72px 72px 28px 28px;background:radial-gradient(circle at 64% 22%,rgba(223,212,255,.62),transparent 18%),linear-gradient(135deg,#372471,#0b0914 52%,#5937b4);box-shadow:inset -18px -18px 40px rgba(0,0,0,.5),inset 8px 8px 24px rgba(189,164,255,.16),0 0 28px rgba(120,76,226,.34); }
.bell-body::after { content:"";position:absolute;left:-9px;right:-9px;bottom:-2px;height:21px;border:2px solid rgba(192,166,255,.62);border-radius:50%;background:#20143e;box-shadow:0 0 16px rgba(142,91,255,.44); }
.bell-clapper { position:absolute;left:91px;top:179px;width:31px;height:31px;border-radius:50%;background:linear-gradient(145deg,#6e4ccb,#1d123b);box-shadow:0 0 18px rgba(139,92,246,.45); }
.notification-object > i { position:absolute;inset:17px 0 0;border-radius:50%;background:radial-gradient(circle,rgba(131,86,246,.2),transparent 63%);animation:orb-breathe 4.2s var(--ease-standard) infinite; }
.notification-object > .brand-mark { position:absolute;z-index:2;width:42px;height:42px;left:85px;top:91px;opacity:.84; }
.notification-premium > h1 { margin:5px 0 8px;font-size:28px;line-height:1.02;letter-spacing:-.045em; }
.notification-premium > p { max-width:310px;margin:0 auto 10px;color:var(--silver);font-size:12px;line-height:1.42; }
.notification-premium .permission-preview { margin:0 auto 10px;padding:12px 14px; }
.notification-premium .primary-button { height:50px; }
.notification-premium .quiet-button { padding:8px; }
.permission-footnote { display:block;margin-top:2px;color:#6e6878;font-size:9px; }

.decision-actions { grid-template-columns:repeat(4,1fr); }
.decision-actions button { min-width:0; }
.decision-actions span { font-size:9px!important; }
.refinement-screen { padding:64px 25px 34px;text-align:center; }
.replacement-screen { padding:44px 25px 28px;text-align:center; }
.refinement-screen h1,.replacement-screen h1,.reason-sheet h1 { margin:12px 0 8px;font-size:30px;letter-spacing:-.045em; }
.refinement-screen > p,.replacement-screen > p,.reason-sheet > p { color:var(--silver);font-size:13px;line-height:1.48; }
.refine-chips { display:flex;flex-wrap:wrap;gap:8px;margin:25px 0 18px; }
.refine-chips button { padding:9px 12px;border:1px solid rgba(182,156,255,.2);border-radius:999px;color:#d8d1e9;background:rgba(88,56,151,.18);font-size:11px; }
.refinement-screen label { display:grid;gap:8px;padding:14px;border-radius:19px;text-align:left;margin-bottom:18px; }
.refinement-screen label span { color:#9f8de0;font-size:9px;letter-spacing:.1em;text-transform:uppercase; }
.refinement-screen textarea { height:86px;border:0;resize:none;outline:0;color:white;background:none;font-size:13px;line-height:1.45; }
.reason-sheet { padding:35px 24px 28px;top:auto;height:610px;border-radius:32px 32px 0 0;background:linear-gradient(160deg,#1d192a,#090810 75%);box-shadow:0 -25px 70px rgba(0,0,0,.6); }
.sheet-handle { width:42px;height:5px;margin:0 auto 30px;border-radius:3px;background:#5c5765; }
.reason-sheet > div:nth-of-type(2) { display:grid;margin-top:22px; }
.reason-sheet > div:nth-of-type(2) button { min-height:55px;display:flex;justify-content:space-between;align-items:center;border:0;border-bottom:1px solid rgba(255,255,255,.08);color:white;background:none;text-align:left; }
.reason-sheet i { font-style:normal; }
.replacement-art { width:115px;height:165px;margin:0 auto 13px;border-radius:18px;box-shadow:0 24px 55px rgba(0,0,0,.45),0 0 32px rgba(106,67,210,.12); }
.replacement-screen h1 { margin:8px 0 6px; }
.replacement-screen > p { margin:0 auto;max-width:310px; }
.replacement-screen .confidence-card { margin:14px 0; }
.replacement-screen .primary-button { height:50px; }
.replacement-screen .quiet-button { padding:8px; }
.confidence-card { display:grid;gap:6px;padding:15px;border-radius:19px;margin:20px 0; text-align:left; }
.confidence-card span { color:#ad95f2;font-size:9px;letter-spacing:.13em; }.confidence-card strong { font-size:13px; }.confidence-card small { color:var(--silver);font-size:10px;line-height:1.4; }
.destructive-button.compact { margin-top:26px; }
.share-trio-preview { height:245px;display:flex;align-items:center;justify-content:center;padding:18px;border-radius:25px; }
.share-trio-preview > span { position:relative;width:91px;height:180px;margin-left:-18px;border:1px solid rgba(207,188,255,.2);border-radius:18px;overflow:hidden;background:linear-gradient(145deg,#2b243b,#0c0a12);box-shadow:0 20px 40px rgba(0,0,0,.42); }
.share-trio-preview > span:first-child { margin-left:0;transform:rotate(-3deg) translateY(8px); }.share-trio-preview > span:nth-child(2){z-index:2}.share-trio-preview > span:nth-child(3){transform:rotate(3deg) translateY(8px)}
.share-trio-preview b { position:absolute;top:10px;left:10px;font-size:8px;color:#aca4b9; }.share-trio-preview .brand-mark { position:absolute;width:25px;height:25px;left:33px;bottom:17px;opacity:.45; }.share-trio-preview > span > i { position:absolute;inset:0;background-size:cover; }
.share-toggle { display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:16px;margin:16px 0 3px; }
.share-toggle button { height:38px;border:0;border-radius:12px;color:#8d8798;background:none;font-size:10px; }.share-toggle button.active { color:white;background:rgba(130,87,230,.24); }

@media (prefers-reduced-motion: reduce) {
  .splash-reel,.splash-brand,.notification-object > i { animation:none; }
}
.search-preferences { display:flex;gap:7px;margin-top:10px;overflow-x:auto;scrollbar-width:none; }
.search-preferences button { white-space:nowrap;border:1px solid rgba(188,166,255,.14);border-radius:999px;padding:7px 10px;color:#9a94a6;background:rgba(28,25,40,.54);font-size:10px; }
.search-preferences button.active { color:white;border-color:rgba(183,153,255,.34);background:rgba(105,67,195,.28);box-shadow:0 0 18px rgba(111,70,214,.1); }
.understood-summary { margin:12px 24px 0;padding:12px 14px;border-radius:17px;text-align:left; }
.understood-summary span { color:#a98ff1;font-size:8px;letter-spacing:.13em; }
.understood-summary p { margin:6px 0;color:#b6b0be;font-size:10px;line-height:1.4; }
.understood-summary button { border:0;padding:0;color:#c8b9f9;background:none;font-size:10px; }
.reveal-complete .results-actions { margin-top:15px; }
.feedback-link { width:100%;margin:20px 0 0;border:0;color:#8e859e;background:none;font-size:10px;text-decoration:underline;text-underline-offset:4px; }
.preserve-symbol { width:78px;height:78px;display:grid;place-items:center;border:1px solid rgba(194,170,255,.2);border-radius:25px;background:linear-gradient(145deg,rgba(116,76,213,.3),rgba(19,16,29,.8));box-shadow:0 0 36px rgba(125,78,236,.18); }
.preserve-symbol .brand-mark { width:38px;height:38px; }
.account-value-prompt .primary-button { margin-top:25px; }
.demo-screen { padding:62px 26px 34px;text-align:center; }
.demo-screen > .brand-mark { margin:20px auto;filter:drop-shadow(0 0 30px rgba(139,92,246,.24)); }
.demo-screen h1 { margin:12px 0;font-size:30px;line-height:1.02;letter-spacing:-.045em; }
.demo-screen > p { color:var(--silver);font-size:13px;line-height:1.48; }
.demo-actions { display:grid;gap:9px;margin:24px 0 18px; }
.demo-actions button { min-height:62px;display:grid;gap:4px;padding:12px 15px;border-radius:17px;color:white;text-align:left; }
.demo-actions small { color:var(--silver);font-size:10px; }
.choice-cards { display:grid;gap:10px;margin-top:24px; }
.choice-cards button { position:relative;min-height:84px;display:grid;gap:6px;padding:16px 18px;border-radius:20px;color:white;text-align:left; }
.choice-cards button.active { border-color:rgba(184,155,255,.4);box-shadow:0 0 28px rgba(111,68,213,.12),inset 0 1px rgba(255,255,255,.11); }
.choice-cards strong { font-size:14px; }.choice-cards small { max-width:270px;color:var(--silver);font-size:11px;line-height:1.4; }.choice-cards i { position:absolute;right:17px;top:17px;color:#b69df7;font-style:normal; }
.settings-note .quiet-button { padding-left:0;color:#b59cf6; }
.accessibility-screen { padding:30px 22px 34px;overflow-y:auto;scrollbar-width:none; }
.accessibility-screen::-webkit-scrollbar { display:none; }
.film-dna-screen{overflow-y:auto;scrollbar-width:none}
.film-dna-screen::-webkit-scrollbar{display:none}
.dna-stages{display:grid;gap:9px;margin-top:15px}
.dna-stages>div{display:flex;align-items:center;gap:13px;padding:13px 14px}
.dna-stages>div>i{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;border:1px solid rgba(172,140,255,.3);color:var(--purple-light);font-size:11px;font-style:normal;flex:none}
.dna-stages>div>span{display:grid;gap:3px;text-align:left}
.dna-stages strong{font-size:13px;font-weight:560}
.dna-stages small{font-size:10px;line-height:1.35;color:var(--text-soft)}
.dna-stages>div.active{border-color:rgba(155,111,255,.48);box-shadow:0 0 30px rgba(113,55,255,.12)}
.dna-stages>div.active>i{background:linear-gradient(145deg,#9d71ff,#5734c8);color:white;border-color:transparent}
.a11y-preview { display:grid;justify-items:center;gap:8px;padding:18px;border-radius:23px;text-align:center; }
.a11y-card { position:relative;width:124px;height:190px;display:grid;place-items:center;border:1px solid rgba(194,167,255,.25);border-radius:22px;background:linear-gradient(145deg,#2c2540,#0c0b12);box-shadow:0 22px 50px rgba(0,0,0,.4),0 0 28px rgba(116,73,222,.1);animation:card-float 6.8s var(--ease-standard) infinite; }
.a11y-card .brand-mark { width:34px;height:34px;opacity:.5; }.a11y-card b { position:absolute;top:13px;left:13px;color:#9a92a6;font-size:9px; }
.a11y-preview > strong { font-size:13px; }.a11y-preview > small { color:var(--silver);font-size:10px; }
.a11y-controls { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0; }
.a11y-controls button { min-height:48px;border:1px solid rgba(190,165,255,.16);border-radius:15px;color:#aaa3b5;background:rgba(32,28,46,.65);font-size:9px; }
.a11y-controls button.active { color:white;background:rgba(112,70,210,.28); }
.spoken-example { padding:15px;border-radius:18px; }.spoken-example span { color:#a88ef0;font-size:8px;letter-spacing:.13em; }.spoken-example p { margin:7px 0 0;color:#c0b9ca;font-size:11px;line-height:1.45; }
.device.manual-reduced-motion .a11y-card { animation:none; }
.device.manual-solid .content-material { background:#1b1826;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:rgba(255,255,255,.28); }
.device.manual-large-text .accessibility-screen { font-size:125%; }.device.manual-large-text .a11y-preview > strong { font-size:17px; }.device.manual-large-text .a11y-preview > small,.device.manual-large-text .spoken-example p { font-size:14px; }
.poster-fallback-screen { padding-top:42px; }
.poster-fallback-screen>.close-control{z-index:8}
.branded-poster { position:relative;width:165px;height:250px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:22px;margin:0 auto 20px;border:1px solid rgba(207,187,255,.23);border-radius:24px;background:radial-gradient(circle at 50% 28%,rgba(145,97,255,.26),transparent 30%),linear-gradient(155deg,#33245b,#0d0b15 68%,#08070b);box-shadow:0 28px 65px rgba(0,0,0,.48),0 0 38px rgba(118,72,225,.13); }
.branded-poster::after { content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.09),transparent 28%,transparent 72%,rgba(139,92,246,.07)); }
.branded-poster > span { position:absolute;top:17px;color:#9d8ad6;font-size:8px;letter-spacing:.15em; }.branded-poster .brand-mark { position:absolute;top:63px;width:50px;height:50px;opacity:.68; }.branded-poster h1 { margin:0;font-size:28px;letter-spacing:-.05em; }.branded-poster p { margin:5px 0 0;color:#b0aabb; }
.poster-fallback-screen > h1 { font-size:25px; }.poster-fallback-screen .primary-button { margin-top:15px; }

/* Gate B — Discover v2: living environment and unified travelling tab lens */
.discover-v4{isolation:isolate;background:#07060d}
.discover-v4::before{
  background:
    radial-gradient(ellipse at 78% 9%,rgba(122,75,235,.16),transparent 32%),
    radial-gradient(ellipse at 3% 48%,rgba(81,43,176,.13),transparent 39%),
    linear-gradient(180deg,#090713 0%,#07060d 54%,#05050a 100%);
}
.discover-live-field{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.energy-tide{
  position:absolute;width:470px;height:470px;left:-235px;top:152px;border-radius:50%;
  background:radial-gradient(circle,rgba(129,78,245,.18),rgba(76,37,161,.07) 42%,transparent 70%);
  filter:blur(24px);animation:energy-tide-drift 15s cubic-bezier(.4,0,.2,1) infinite alternate;
}
.energy-ripple{
  position:absolute;width:310px;height:310px;border:1px solid rgba(172,133,255,.09);border-radius:50%;
  box-shadow:0 0 34px rgba(124,72,235,.06),inset 0 0 35px rgba(124,72,235,.035);
  opacity:0;animation:energy-ripple 10s cubic-bezier(.2,.62,.35,1) infinite;
}
.ripple-a{right:-132px;top:246px}.ripple-b{left:-185px;bottom:58px;animation-delay:4.8s}
.energy-filament{
  position:absolute;width:320px;height:1px;border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(177,136,255,.15),transparent);
  filter:blur(.35px);transform-origin:center;opacity:.42;animation:energy-filament 12s ease-in-out infinite alternate;
}
.filament-a{right:-74px;top:183px;transform:rotate(-31deg)}.filament-b{left:-90px;bottom:187px;transform:rotate(28deg);animation-delay:-5s}
@keyframes energy-tide-drift{
  0%{transform:translate3d(-12px,-8px,0) scale(.92);opacity:.52}
  55%{transform:translate3d(128px,26px,0) scale(1.08);opacity:.82}
  100%{transform:translate3d(216px,-4px,0) scale(.98);opacity:.58}
}
@keyframes energy-ripple{
  0%{transform:scale(.48);opacity:0}
  18%{opacity:.28}
  70%{opacity:.09}
  100%{transform:scale(1.5);opacity:0}
}
@keyframes energy-filament{to{translate:38px -14px;opacity:.16}}
.discover-v4 .friday-ribbon{
  overflow:hidden;border-color:rgba(190,158,255,.25);
  background:
    radial-gradient(circle at 82% 50%,rgba(139,83,255,.20),transparent 28%),
    linear-gradient(135deg,rgba(61,42,96,.58),rgba(19,16,29,.72));
}
.discover-v4 .friday-ribbon::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.055) 39%,transparent 58%);
  translate:-100% 0;animation:friday-sheen 8s ease-in-out infinite;
}
@keyframes friday-sheen{0%,68%{translate:-100% 0}82%,100%{translate:110% 0}}
.sealed-markers{position:absolute;right:70px;top:50%;display:flex;gap:4px;translate:0 -50%}
.sealed-markers i{width:5px;height:5px;border-radius:50%;background:#a783ff;box-shadow:0 0 8px rgba(161,119,255,.75)}
.sealed-markers i:nth-child(2){opacity:.72}.sealed-markers i:nth-child(3){opacity:.48}
.discover-v4 .search-glass{
  min-height:164px;margin-top:19px;
  border-color:rgba(210,194,255,.19);
  background:
    radial-gradient(circle at 92% 88%,rgba(130,77,246,.14),transparent 25%),
    radial-gradient(circle at 8% 6%,rgba(255,255,255,.045),transparent 31%),
    linear-gradient(148deg,rgba(40,33,58,.79),rgba(13,11,21,.90) 55%,rgba(7,7,12,.94));
  box-shadow:inset 0 1px rgba(255,255,255,.105),inset 0 -1px rgba(122,82,201,.10),0 25px 54px rgba(0,0,0,.37),0 0 44px rgba(102,58,211,.065);
}
.discover-v4 .memory-links{margin-top:9px}
.discover-v4 .inspiration{margin-top:18px}
.discover-v4 .prompt-card{height:116px}
.discover-v4 .section-label>button{color:#b49bf7}

/* A single material lens travels between destinations; buttons themselves never repaint. */
.glass-nav{isolation:isolate;overflow:hidden}
.glass-nav .tab-lens{
  position:absolute;z-index:0;left:6px;top:5px;width:calc((100% - 12px)/4);height:calc(100% - 10px);
  border:1px solid rgba(210,191,255,.25);border-radius:19px;
  background:
    radial-gradient(circle at 50% 95%,rgba(143,88,255,.27),transparent 52%),
    linear-gradient(145deg,rgba(139,92,246,.27),rgba(74,51,118,.13));
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 0 27px rgba(124,76,235,.16);
  transform:translate3d(calc(var(--to-index) * 100%),0,0);
  animation:tab-lens-travel .56s cubic-bezier(.2,.84,.18,1) both;
  pointer-events:none;
}
.glass-nav .tab-lens::after{
  content:"";position:absolute;left:19%;right:19%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,232,255,.55),transparent);
}
@keyframes tab-lens-travel{
  from{transform:translate3d(calc(var(--from-index) * 100%),0,0) scale(.93);filter:brightness(.9)}
  66%{filter:brightness(1.13)}
  to{transform:translate3d(calc(var(--to-index) * 100%),0,0) scale(1);filter:brightness(1)}
}
.glass-nav button{position:relative;z-index:1}
.glass-nav button.active::before,.discover-v4 .glass-nav button.active::before{display:none!important}
.glass-nav button.active{color:#f7f2ff}
.device[data-nav-direction="forward"] .screen{animation:tab-content-forward .46s cubic-bezier(.2,.76,.22,1) both}
.device[data-nav-direction="backward"] .screen{animation:tab-content-backward .46s cubic-bezier(.2,.76,.22,1) both}
@keyframes tab-content-forward{from{opacity:.72;transform:translate3d(12px,0,0)}to{opacity:1;transform:none}}
@keyframes tab-content-backward{from{opacity:.72;transform:translate3d(-12px,0,0)}to{opacity:1;transform:none}}

@media (max-height:760px){
  .discover-v4 .search-glass{min-height:151px}
  .discover-v4 .prompt-card{height:91px}
}
@media (max-height:680px){
  .discover-v4 .search-glass{min-height:100px}
  .discover-v4 .prompt-card{height:70px}
  .sealed-markers{display:none}
}

@media (max-height:680px){
  .discover-v5 .memory-control{height:32px}
  .discover-v5 .daily-cryptic-home-entry{min-height:48px;padding-block:6px}
  .discover-v5 .inspiration{margin-top:1px}
}
@media (prefers-reduced-motion:reduce){
  .energy-tide,.energy-ripple,.energy-filament,.discover-v4 .friday-ribbon::after{animation:none}
  .energy-tide{transform:translate3d(105px,12px,0);opacity:.58}
  .energy-ripple{opacity:.09;transform:scale(1)}
  .glass-nav .tab-lens{animation:tab-lens-accessible .18s ease-out both}
  .device[data-nav-direction] .screen{animation:none}
}
@keyframes tab-lens-accessible{
  from{opacity:.55;transform:translate3d(calc(var(--to-index) * 100%),0,0)}
  to{opacity:1;transform:translate3d(calc(var(--to-index) * 100%),0,0)}
}
@media (prefers-reduced-transparency:reduce){
  .glass-nav .tab-lens{background:#4b327a;border-color:#9f7ae8;box-shadow:none}
}
.device.manual-reduced-motion .energy-tide,
.device.manual-reduced-motion .energy-ripple,
.device.manual-reduced-motion .energy-filament,
.device.manual-reduced-motion .discover-v4 .friday-ribbon::after{animation:none}
.device.manual-reduced-motion .glass-nav .tab-lens{animation:tab-lens-accessible .18s ease-out both}
.device.manual-solid .glass-nav .tab-lens{background:#4b327a;border-color:#9f7ae8;box-shadow:none}

/* Gate B — final Discover refinement */
.discover-v4::before{
  background:
    radial-gradient(ellipse at 82% 8%,rgba(144,88,255,.22),transparent 31%),
    radial-gradient(ellipse at -4% 46%,rgba(99,52,213,.20),transparent 38%),
    radial-gradient(ellipse at 78% 76%,rgba(70,35,166,.12),transparent 35%),
    linear-gradient(180deg,#0a0716 0%,#07060e 52%,#05050a 100%);
}
.discover-v4>.edge-energy{opacity:1}
.energy-node{
  position:absolute;right:-74px;top:77px;width:220px;height:170px;border-radius:50%;
  background:radial-gradient(circle,rgba(167,115,255,.30),rgba(105,55,224,.13) 38%,transparent 70%);
  filter:blur(18px);animation:energy-node-breathe 5.8s ease-in-out infinite;
}
.energy-tide{opacity:.78;filter:blur(19px)}
.energy-ripple{border-color:rgba(187,148,255,.15);box-shadow:0 0 37px rgba(139,85,255,.09),inset 0 0 35px rgba(139,85,255,.055)}
.ripple-a{right:-112px;top:205px}.ripple-b{left:-156px;bottom:78px}
.energy-filament{height:1.5px;background:linear-gradient(90deg,transparent,rgba(198,163,255,.23),transparent)}
.filament-a{right:-35px;top:226px}.filament-b{left:-46px;bottom:174px}
@keyframes energy-node-breathe{
  0%,100%{transform:scale(.9);opacity:.48}
  48%{transform:scale(1.12);opacity:.86}
}

.discover-v4 .friday-ribbon{
  min-height:58px;position:relative;transform-origin:50% 65%;
  border-color:rgba(207,177,255,.50);
  background:
    radial-gradient(circle at 77% 50%,rgba(159,101,255,.27),transparent 31%),
    linear-gradient(132deg,rgba(75,45,127,.74),rgba(24,18,38,.78) 58%,rgba(14,12,22,.82));
  box-shadow:
    inset 0 1px rgba(255,255,255,.15),
    inset 0 -1px rgba(151,105,242,.12),
    0 16px 38px rgba(0,0,0,.31),
    0 0 20px rgba(140,82,255,.16);
  animation:friday-charged-lift 6.8s cubic-bezier(.2,.72,.25,1) infinite,friday-border-pulse 3.4s ease-in-out infinite;
}
.discover-v4 .friday-ribbon::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(105deg,rgba(142,91,255,.10),rgba(226,210,255,.78),rgba(151,100,255,.18),rgba(215,193,255,.62),rgba(142,91,255,.10));
  background-size:240% 100%;opacity:.58;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:friday-edge-travel 4.8s linear infinite;
}
.discover-v4 .friday-ribbon::after{
  background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.085) 44%,transparent 62%);
  animation:friday-sheen 6.8s ease-in-out infinite;
}
.discover-v4 .friday-ribbon:active{animation:none;transform:translateY(1px) scale(.992);box-shadow:inset 0 1px rgba(255,255,255,.12),0 8px 21px rgba(0,0,0,.28),0 0 18px rgba(151,94,255,.19)}
.discover-v4 .friday-ribbon>span{color:#dbcaff}
.discover-v4 .friday-ribbon>span>i{box-shadow:0 0 10px rgba(181,132,255,.8)}
.discover-v4 .friday-ribbon strong{color:#fff;font-weight:660}
.discover-v4 .friday-ribbon b{
  min-width:52px;padding:7px 10px;border:1px solid rgba(219,197,255,.25);border-radius:999px;
  color:#f4edff;background:rgba(119,72,216,.22);box-shadow:inset 0 1px rgba(255,255,255,.11),0 0 16px rgba(135,80,245,.13);
  text-align:center;
}
.sealed-markers{right:76px}
.sealed-markers i{width:6px;height:6px;animation:sealed-dot-charge 2.1s ease-in-out infinite}
.sealed-markers i:nth-child(2){animation-delay:.22s}.sealed-markers i:nth-child(3){animation-delay:.44s}
@keyframes friday-charged-lift{
  0%,56%,100%{transform:translateY(0)}
  61%{transform:translateY(-2.5px)}
  66%{transform:translateY(.5px)}
  70%{transform:translateY(-1px)}
  74%{transform:translateY(0)}
}
@keyframes friday-border-pulse{
  0%,100%{border-color:rgba(194,160,255,.37);box-shadow:inset 0 1px rgba(255,255,255,.13),0 16px 38px rgba(0,0,0,.31),0 0 17px rgba(135,78,248,.13)}
  50%{border-color:rgba(226,208,255,.68);box-shadow:inset 0 1px rgba(255,255,255,.18),0 16px 38px rgba(0,0,0,.31),0 0 31px rgba(149,89,255,.28)}
}
@keyframes friday-edge-travel{to{background-position:-240% 0}}
@keyframes sealed-dot-charge{
  0%,100%{opacity:.35;transform:scale(.76)}
  40%{opacity:1;transform:scale(1.22);box-shadow:0 0 12px rgba(193,151,255,.95)}
  72%{opacity:.55;transform:scale(.9)}
}

.discover-v4 .discover-heading{margin-top:25px}
.discover-v4 .discover-heading p{margin-bottom:7px;font-size:12.5px}
.discover-v4 .discover-heading h1{letter-spacing:-.055em}
.discover-v4 .search-glass{
  min-height:170px;cursor:text;transition:border-color .24s ease,box-shadow .24s ease,background .24s ease;
}
.discover-v4 .search-glass::after{
  content:"";position:absolute;right:-14px;bottom:-14px;width:108px;height:108px;border-radius:50%;
  background:radial-gradient(circle,rgba(157,101,255,.17),transparent 69%);filter:blur(5px);pointer-events:none;
}
.discover-v4 .request-label{color:#b39ae9}
.discover-v4 .search-glass textarea{
  width:calc(100% - 61px);height:94px;margin-top:13px;padding:0 13px 0 0;
  color:#b8b3c0;font-size:15px;line-height:1.46;caret-color:#bea3ff;
  transition:color .2s ease;
}
.discover-v4 .search-glass textarea::placeholder{color:#777180;opacity:1}
.discover-v4 .search-glass textarea:focus{color:#f4f0f8}
.request-ellipsis{
  position:absolute;left:17px;bottom:16px;color:#817a8a;font-size:17px;line-height:1;letter-spacing:.08em;
  transition:opacity .18s ease;
}
.query-clear{
  position:absolute;right:77px;top:14px;width:27px;height:27px;display:grid;place-items:center;border:0;border-radius:50%;
  color:#d5cde1;background:rgba(100,91,112,.22);opacity:0;transform:scale(.88);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,background .18s ease;
}
.query-clear .close-glyph{width:11px;height:11px}.query-clear .close-glyph i{top:5px;width:11px;height:1px}
.search-glass.is-editing{
  border-color:rgba(210,185,255,.45);
  background:radial-gradient(circle at 91% 86%,rgba(143,83,255,.20),transparent 27%),linear-gradient(148deg,rgba(44,35,65,.87),rgba(13,11,21,.94) 55%,rgba(7,7,12,.97));
  box-shadow:inset 0 1px rgba(255,255,255,.14),0 25px 54px rgba(0,0,0,.37),0 0 34px rgba(139,81,255,.15);
}
.search-glass.is-editing .request-ellipsis{opacity:0}
.search-glass.is-editing .query-clear{opacity:1;transform:scale(1);pointer-events:auto}
.search-glass.is-empty .request-ellipsis{opacity:0}
.discover-v4 .query-footer{left:auto;right:12px;bottom:12px}

.memory-control{
  position:relative;width:100%;height:46px;display:grid;grid-template-columns:1fr 1fr;margin-top:11px;padding:4px;border-radius:17px;
  border-color:rgba(200,181,244,.13);
  background:linear-gradient(145deg,rgba(38,33,52,.52),rgba(14,13,21,.59));
  box-shadow:inset 0 1px rgba(255,255,255,.075),0 12px 27px rgba(0,0,0,.18);
}
.memory-control button{
  position:relative;z-index:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:13px;
  color:#aaa3b2;background:transparent;font-size:10px;transition:color .18s ease,background .18s ease,transform .16s ease;
}
.memory-control button:active{color:#f0e8ff;background:rgba(126,82,215,.19);transform:scale(.98)}
.memory-divider{position:absolute;left:50%;top:11px;bottom:11px;width:1px;background:rgba(218,204,255,.10)}
.recent-search-glyph{position:relative;width:14px;height:14px;border:1.2px solid #9d92ae;border-radius:50%}
.recent-search-glyph::before{
  content:"";position:absolute;left:-3px;top:-1px;width:5px;height:5px;border-left:1.2px solid #9d92ae;border-top:1.2px solid #9d92ae;transform:rotate(-24deg)
}
.recent-search-glyph::after{content:"";position:absolute;left:6px;top:3px;width:1px;height:5px;background:#9d92ae;transform-origin:bottom;transform:rotate(-42deg)}
.bookmark-glyph{position:relative;width:11px;height:15px;border:1.2px solid #9d92ae;border-radius:2px 2px 1px 1px}
.bookmark-glyph::after{content:"";position:absolute;left:1px;right:1px;bottom:-1.5px;height:5px;background:#0f0d18;clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%)}
.discover-v4 .inspiration{margin-top:19px}

@media (max-height:760px){
  .discover-v4 .friday-ribbon{min-height:53px}
  .discover-v4 .discover-heading{margin-top:15px}
  .discover-v4 .search-glass{min-height:151px}
  .discover-v4 .search-glass textarea{height:74px;margin-top:8px}
  .memory-control{height:42px;margin-top:7px}
  .discover-v4 .inspiration{margin-top:10px}
}
@media (max-height:680px){
  .discover-v4 .friday-ribbon{min-height:48px}
  .discover-v4 .discover-heading{margin-top:10px}
  .discover-v4 .search-glass{min-height:133px}
  .discover-v4 .search-glass textarea{height:61px;margin-top:5px;font-size:14px}
  .request-ellipsis{bottom:12px}
  .memory-control{height:38px;margin-top:5px}
  .memory-control button{font-size:9px}
  .discover-v4 .inspiration{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  .energy-node,.discover-v4 .friday-ribbon,.discover-v4 .friday-ribbon::before,.discover-v4 .friday-ribbon::after,.sealed-markers i{animation:none}
  .energy-node{opacity:.62}
  .discover-v4 .friday-ribbon{border-color:rgba(223,204,255,.62);box-shadow:inset 0 1px rgba(255,255,255,.16),0 15px 34px rgba(0,0,0,.3),0 0 25px rgba(145,87,255,.2)}
  .sealed-markers i{opacity:.8;transform:none}
}
.device.manual-reduced-motion .energy-node,
.device.manual-reduced-motion .discover-v4 .friday-ribbon,
.device.manual-reduced-motion .discover-v4 .friday-ribbon::before,
.device.manual-reduced-motion .discover-v4 .friday-ribbon::after,
.device.manual-reduced-motion .sealed-markers i{animation:none}
.device.manual-reduced-motion .energy-node{opacity:.62}
.device.manual-solid .memory-control{backdrop-filter:none;background:#171421;border-color:rgba(255,255,255,.24)}

/* Gate B — Discover master: organic electricity, true inline edit state and optical icons */
.discover-v4::before{
  background:
    radial-gradient(ellipse at 91% 10%,rgba(132,76,245,.19),transparent 26%),
    radial-gradient(ellipse at -10% 45%,rgba(92,43,202,.13),transparent 31%),
    radial-gradient(ellipse at 86% 78%,rgba(70,31,161,.09),transparent 27%),
    linear-gradient(180deg,#080611 0%,#05050a 49%,#030306 100%);
}
.discover-live-field{z-index:0;opacity:1}
.discover-v4 .app-header,
.discover-v4 .friday-ribbon,
.discover-v4 .discover-heading,
.discover-v4 .search-glass,
.discover-v4 .memory-control,
.discover-v4 .inspiration{position:relative;z-index:2}
.energy-node{right:-88px;top:73px;width:225px;height:160px;filter:blur(20px)}
.energy-tide{background:radial-gradient(circle,rgba(126,65,245,.15),rgba(75,30,163,.055) 40%,transparent 68%);opacity:.68}
.energy-ripple,.energy-filament{display:none}
.energy-network{position:absolute;inset:0;width:100%;height:100%;overflow:visible;mix-blend-mode:screen}
.energy-arc,.energy-branch{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.energy-arc.glow{
  stroke:rgba(128,67,250,.27);stroke-width:7;filter:url(#electric-glow);
  stroke-dasharray:118 260;animation:electric-current 9.4s linear infinite,electric-presence 5.2s ease-in-out infinite;
}
.energy-arc.core{
  stroke:rgba(216,188,255,.56);stroke-width:.9;stroke-dasharray:54 188;
  animation:electric-current 8.1s linear infinite,electric-core-pulse 3.8s ease-in-out infinite;
}
.energy-arc.arc-b{animation-delay:-3.4s,-1.2s}.energy-arc.arc-c{animation-delay:-5.7s,-2.1s}
.energy-branch{
  stroke:rgba(190,145,255,.42);stroke-width:.75;stroke-dasharray:15 74;
  animation:electric-current 5.4s linear infinite,electric-core-pulse 4.1s ease-in-out infinite;
}
.branch-b{animation-delay:-2.7s,-1.5s}
.energy-spark{fill:#eadcff;filter:url(#electric-glow);opacity:.82}
.spark-b{fill:#b991ff;opacity:.68}
@keyframes electric-current{to{stroke-dashoffset:-350}}
@keyframes electric-presence{
  0%,100%{opacity:.17}
  36%{opacity:.66}
  63%{opacity:.25}
}
@keyframes electric-core-pulse{
  0%,100%{opacity:.18}
  45%{opacity:.78}
  70%{opacity:.31}
}

.discover-v4 .friday-ribbon{
  animation:friday-final-bounce 4.75s cubic-bezier(.18,.82,.24,1) infinite,friday-border-pulse 2.8s ease-in-out infinite;
}
.discover-v4 .friday-ribbon::before{animation:friday-edge-travel 3.8s linear infinite}
.discover-v4 .friday-ribbon::after{animation:friday-sheen 4.75s ease-in-out infinite}
.sealed-markers i{animation-duration:1.65s}
@keyframes friday-final-bounce{
  0%,47%,100%{transform:translateY(0)}
  53%{transform:translateY(-6px)}
  59%{transform:translateY(1.3px)}
  64%{transform:translateY(-2.4px)}
  69%{transform:translateY(.4px)}
  73%{transform:translateY(0)}
}

.discover-v4 .search-glass{min-height:167px}
.discover-v4 .search-glass{
  background:
    radial-gradient(circle at 91% 86%,rgba(143,83,255,.17),transparent 27%),
    radial-gradient(circle at 8% 6%,rgba(255,255,255,.035),transparent 31%),
    linear-gradient(148deg,rgba(42,34,62,.70),rgba(12,10,20,.84) 55%,rgba(6,6,11,.88));
  backdrop-filter:blur(22px) saturate(122%);-webkit-backdrop-filter:blur(22px) saturate(122%);
}
.request-display{
  position:absolute;left:17px;right:77px;top:49px;z-index:1;max-height:72px;overflow:hidden;
  color:#b7b1be;font-size:15px;line-height:1.46;letter-spacing:-.012em;pointer-events:none;
}
.request-display span{display:inline}
.request-display i{display:inline;margin-left:2px;color:#8c8494;font-size:16px;font-style:normal;letter-spacing:.06em}
.discover-v4 .search-glass textarea{
  position:absolute;left:17px;right:77px;top:49px;width:calc(100% - 94px);height:72px;margin:0;padding:0;
  opacity:0;pointer-events:none;
}
.search-glass.is-editing .request-display{opacity:0}
.search-glass.is-editing textarea{opacity:1;pointer-events:auto}
.request-ellipsis,.query-clear{display:none!important}
.discover-v4 .query-footer{z-index:3}

.memory-control{height:48px;padding:4px 5px}
.memory-control{background:linear-gradient(145deg,rgba(38,33,52,.44),rgba(13,12,20,.51));backdrop-filter:blur(19px) saturate(120%);-webkit-backdrop-filter:blur(19px) saturate(120%)}
.memory-control button{gap:9px;color:#aaa3b3;font-size:10px;font-weight:520}
.memory-glyph{
  width:17px;height:17px;overflow:visible;fill:none;stroke:#aaa1b4;stroke-width:1.55;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s ease,filter .18s ease,fill .18s ease;
}
.memory-control button:active .memory-glyph{stroke:#eadfff;filter:drop-shadow(0 0 5px rgba(180,135,255,.55))}
.bookmark-svg{width:16px;height:17px}
.memory-control button:focus-visible{outline:1px solid rgba(218,199,255,.62);outline-offset:-2px}
.recent-search-glyph,.bookmark-glyph{display:none}

@media (max-height:760px){
  .discover-v4 .search-glass{min-height:149px}
  .request-display{top:43px;max-height:65px}
  .discover-v4 .search-glass textarea{top:43px;height:65px}
  .memory-control{height:43px}
}
@media (max-height:680px){
  .discover-v4 .search-glass{min-height:132px}
  .request-display{top:38px;max-height:55px;font-size:14px;line-height:1.4}
  .discover-v4 .search-glass textarea{top:38px;height:55px;font-size:14px}
  .memory-control{height:39px}
  .memory-glyph{width:15px;height:15px}
}
@media (prefers-reduced-motion:reduce){
  .energy-network path,.discover-v4 .friday-ribbon,.discover-v4 .friday-ribbon::before,.discover-v4 .friday-ribbon::after,.sealed-markers i{animation:none}
  .energy-spark{display:none}
  .energy-network{filter:none}
  .energy-arc.glow{opacity:.08;stroke-dasharray:none}.energy-arc.core{opacity:.18;stroke-dasharray:none}.energy-branch{opacity:.11;stroke-dasharray:none}
}
.device.manual-reduced-motion .energy-network path,
.device.manual-reduced-motion .discover-v4 .friday-ribbon,
.device.manual-reduced-motion .discover-v4 .friday-ribbon::before,
.device.manual-reduced-motion .discover-v4 .friday-ribbon::after,
.device.manual-reduced-motion .sealed-markers i{animation:none}
.device.manual-reduced-motion .energy-spark{display:none}
.device.manual-reduced-motion .energy-network{filter:none}
.device.manual-reduced-motion .energy-arc.glow{opacity:.08;stroke-dasharray:none}
.device.manual-reduced-motion .energy-arc.core{opacity:.18;stroke-dasharray:none}
.device.manual-reduced-motion .energy-branch{opacity:.11;stroke-dasharray:none}

/* Gate B — Discover dark lightning master */
.discover-v5{
  background:
    radial-gradient(ellipse at 92% 13%,rgba(87,41,164,.105),transparent 24%),
    radial-gradient(ellipse at -8% 65%,rgba(61,28,127,.075),transparent 25%),
    linear-gradient(180deg,#05040a 0%,#030306 55%,#020204 100%);
}
.discover-v5::before{
  background:
    radial-gradient(circle at 88% 15%,rgba(127,59,220,.07),transparent 18%),
    linear-gradient(180deg,rgba(15,8,28,.18),transparent 34%,rgba(4,3,8,.3));
}
.discover-v5>.edge-energy{opacity:.32}
.discover-v5 .energy-node{
  right:-82px;top:72px;width:210px;height:145px;opacity:.36;
  background:radial-gradient(circle,rgba(174,72,230,.15),rgba(80,31,157,.05) 42%,transparent 70%);
  animation:energy-node-breathe 7.8s ease-in-out infinite;
}
.discover-v5 .energy-tide,.discover-v5 .energy-network{display:none}
.lightning-network{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lightning-event{opacity:0;transform-origin:center}
.lightning-event path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.lightning-event .bolt-glow{stroke:rgba(190,87,255,.32);stroke-width:7;filter:url(#lightning-glow)}
.lightning-event .bolt-core{stroke:rgba(244,199,255,.86);stroke-width:1.05}
.lightning-event .bolt-branch{stroke:rgba(223,157,255,.65);stroke-width:.7}
.event-a{animation:lightning-flash 5.2s steps(1,end) infinite}
.event-b{animation:lightning-flash 7.1s -2.6s steps(1,end) infinite}
.event-c{animation:lightning-flash-soft 6.3s -4.1s steps(1,end) infinite}
.event-d{animation:lightning-flash-soft 8.4s -1.7s steps(1,end) infinite}
@keyframes lightning-flash{
  0%,72%,100%{opacity:0}
  73%{opacity:.92}
  74%{opacity:.12}
  75%{opacity:.72}
  77%{opacity:0}
}
@keyframes lightning-flash-soft{
  0%,83%,100%{opacity:0}
  84%{opacity:.62}
  85%{opacity:.08}
  86%{opacity:.42}
  88%{opacity:0}
}

.discover-v5 .friday-ribbon{
  border-color:rgba(239,164,255,.62);
  background:
    radial-gradient(circle at 78% 50%,rgba(204,91,245,.23),transparent 31%),
    linear-gradient(132deg,rgba(72,32,103,.70),rgba(20,13,31,.84) 58%,rgba(10,8,16,.90));
  box-shadow:inset 0 1px rgba(255,255,255,.16),0 16px 38px rgba(0,0,0,.40),0 0 23px rgba(215,103,255,.22);
  animation:friday-layout-bounce 4.75s cubic-bezier(.18,.82,.24,1) infinite,friday-pink-pulse 2.8s ease-in-out infinite;
}
.discover-v5 .friday-ribbon::before{
  display:none;
}
.discover-v5 .friday-ribbon::after{display:none}
.discover-v5 .friday-ribbon b{
  border-color:rgba(245,185,255,.34);background:rgba(177,74,217,.18);
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 17px rgba(223,101,255,.18);
}
.discover-v5 .sealed-markers i{background:#eda8ff;box-shadow:0 0 10px rgba(233,136,255,.88)}
@keyframes friday-pink-pulse{
  0%,100%{border-color:rgba(224,139,248,.45);box-shadow:inset 0 1px rgba(255,255,255,.13),0 16px 38px rgba(0,0,0,.38),0 0 16px rgba(206,89,244,.16)}
  50%{border-color:rgba(255,203,255,.86);box-shadow:inset 0 1px rgba(255,255,255,.19),0 16px 38px rgba(0,0,0,.38),0 0 33px rgba(227,111,255,.34)}
}
@keyframes friday-layout-bounce{
  0%,47%,100%{top:0}
  53%{top:-6px}
  59%{top:1px}
  64%{top:-2px}
  69%,73%{top:0}
}

.discover-v5 .search-glass{
  background:
    radial-gradient(circle at 91% 86%,rgba(107,49,174,.11),transparent 27%),
    linear-gradient(148deg,rgba(29,24,40,.76),rgba(8,7,13,.90) 55%,rgba(4,4,8,.94));
  border-color:rgba(194,174,225,.15);
}
.discover-v5 .request-display .placeholder{color:#8c8593}
.discover-v5 .request-display i{display:none}
.discover-v5 .search-glass.is-editing{
  border-color:rgba(214,179,238,.37);
  background:radial-gradient(circle at 91% 86%,rgba(137,55,192,.15),transparent 27%),linear-gradient(148deg,rgba(34,26,45,.84),rgba(8,7,13,.94) 55%,rgba(4,4,8,.97));
  box-shadow:inset 0 1px rgba(255,255,255,.11),0 25px 54px rgba(0,0,0,.42),0 0 26px rgba(168,67,216,.10);
}
.discover-v5 .query-footer button:disabled{cursor:text;opacity:1}
.discover-v5 .orb-dormant{opacity:.36;filter:saturate(.18) brightness(.76);transform:scale(.92)}
.discover-v5 .orb-dormant *{animation:none!important}
.discover-v5 .orb-idle{opacity:1;filter:none;transform:scale(1);transition:opacity .32s ease,filter .32s ease,transform .42s cubic-bezier(.16,1,.3,1)}

/* One bar exists outside the changing destination screen. */
.device>.persistent-glass-nav{
  position:absolute;z-index:45;left:14px;right:14px;bottom:12px;height:68px;padding:5px 6px;border-radius:25px;
  background:linear-gradient(145deg,rgba(32,28,44,.72),rgba(9,8,14,.80));
  border:1px solid rgba(214,202,255,.18);
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 18px 48px rgba(0,0,0,.52),0 0 27px rgba(99,54,186,.07);
  backdrop-filter:blur(28px) saturate(125%);-webkit-backdrop-filter:blur(28px) saturate(125%);
}
.device>.persistent-glass-nav button{height:57px;border-radius:19px;color:#7f7988;font-size:10px}
.device>.persistent-glass-nav button.active{color:#f7f2ff}
.device[data-nav-direction="forward"] .screen,.device[data-nav-direction="backward"] .screen{animation:tab-content-stable .34s ease-out both}
@keyframes tab-content-stable{from{opacity:.76}to{opacity:1}}

@media(max-height:760px){
  .device>.persistent-glass-nav{height:64px}
  .device>.persistent-glass-nav button{height:53px}
}
@media(max-height:680px){
  .device>.persistent-glass-nav{height:60px}
  .device>.persistent-glass-nav button{height:49px}
}
@media(prefers-reduced-motion:reduce){
  .lightning-event,.discover-v5 .energy-node{animation:none;opacity:0}
  .discover-v5 .friday-ribbon,.discover-v5 .friday-ribbon::before,.discover-v5 .friday-ribbon::after,.discover-v5 .sealed-markers i{animation:none}
}
.device.manual-reduced-motion .lightning-event,.device.manual-reduced-motion .discover-v5 .energy-node{animation:none;opacity:0}
.device.manual-reduced-motion .discover-v5 .friday-ribbon,
.device.manual-reduced-motion .discover-v5 .friday-ribbon::before,
.device.manual-reduced-motion .discover-v5 .friday-ribbon::after,
.device.manual-reduced-motion .discover-v5 .sealed-markers i{animation:none}

/* Gate B — focus blue, optical alignment and descending lightning */
:root{
  --trio-focus-blue:#65bdff;
  --trio-focus-blue-soft:rgba(101,189,255,.42);
}

.device>.persistent-glass-nav button{
  display:grid;
  grid-template-rows:21px 14px;
  align-content:center;
  justify-items:center;
  row-gap:3px;
}
.device>.persistent-glass-nav button>span{
  position:relative;
  z-index:2;
  display:block;
  align-self:center;
  justify-self:center;
  margin:0;
  color:inherit;
}
.device>.persistent-glass-nav .nav-search{
  width:16px;height:16px;transform:none;
}
.device>.persistent-glass-nav .nav-search::after{
  width:6px;height:1.4px;right:-4px;bottom:-2px;
}
.device>.persistent-glass-nav .nav-spark{width:17px;height:17px}
.device>.persistent-glass-nav .nav-stack{
  width:15px;height:15px;
  border-radius:3px;
  box-shadow:3px -3px 0 -1px #09080e,3px -3px 0 0 currentColor;
  transform:translate(-1px,0);
}
.device>.persistent-glass-nav .nav-person{width:19px;height:18px}
.device>.persistent-glass-nav button.active::after{
  content:"";
  display:block!important;
  position:absolute;
  z-index:0;
  left:50%;top:5px;bottom:auto;
  width:54px;height:38px;
  transform:translateX(-50%);
  border-radius:0;
  background:radial-gradient(ellipse at 50% 45%,rgba(146,222,255,.68),rgba(82,183,255,.30) 24%,rgba(68,133,255,.10) 49%,transparent 76%);
  box-shadow:none;
  opacity:.82;
  pointer-events:none;
}
.device>.persistent-glass-nav button.active>span{
  color:#f8fbff;
  filter:drop-shadow(0 0 3px rgba(100,197,255,.96)) drop-shadow(0 0 8px rgba(69,144,255,.54));
}

.discover-v5 .memory-control button{
  position:relative;
  isolation:isolate;
}
.discover-v5 .memory-control button::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:15px;top:50%;
  width:25px;height:25px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(102,194,255,.32),rgba(74,140,255,.11) 45%,transparent 72%);
  opacity:.72;
}
.discover-v5 .memory-glyph{
  stroke:#b8dfff;
  filter:drop-shadow(0 0 3px rgba(91,184,255,.58));
}
.discover-v5 .memory-control button:active .memory-glyph,
.discover-v5 .memory-control button:focus-visible .memory-glyph{
  stroke:#ecf8ff;
  filter:drop-shadow(0 0 4px rgba(101,196,255,.92));
}

.discover-v5 .prompt-grid{align-items:stretch}
.discover-v5 .prompt-card{min-width:0}
.discover-v5 .prompt-copy{
  inset:10px 11px 10px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-width:0;
  font-size:10.5px;
  line-height:1.18;
}
.discover-v5 .prompt-title{
  display:-webkit-box;
  min-height:37px;
  max-height:49px;
  overflow:hidden;
  overflow-wrap:anywhere;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
}
.discover-v5 .prompt-copy b{
  flex:0 0 auto;
  margin-top:6px;
  white-space:nowrap;
}
.discover-v5{
  /* Reserve the fixed glass navigation without creating a dead black void. */
  padding-bottom:116px;
  overscroll-behavior-y:contain;
}
.discover-v5>.edge-energy{inset:0}

.lightning-event .bolt-glow{
  stroke:rgba(220,100,255,.25);
  stroke-width:4.6;
  filter:none;
}
.lightning-event .bolt-core{
  stroke:rgba(255,196,255,.90);
  stroke-width:.82;
}
.lightning-event .bolt-branch{
  stroke:rgba(236,139,255,.68);
  stroke-width:.55;
}
@keyframes lightning-flash{
  0%,72%,100%{opacity:0}
  73%{opacity:.34}
  74%{opacity:.88}
  75%{opacity:.10}
  76%{opacity:.68}
  78%{opacity:0}
}
@keyframes lightning-flash-soft{
  0%,83%,100%{opacity:0}
  84%{opacity:.26}
  85%{opacity:.58}
  86%{opacity:.07}
  87%{opacity:.40}
  89%{opacity:0}
}

/* Thin electrical traces cascade from top to bottom without bright surfaces,
   blur filters or full-screen compositing layers. */
.discover-v5 .lightning-network{display:none}
.discover-v5 .lightning-event{
  opacity:1;
  animation:none;
}
.discover-v5 .lightning-event .bolt-glow{
  opacity:.10;
  stroke-width:2.4;
}
.discover-v5 .lightning-event .bolt-core{
  opacity:.72;
  stroke-dasharray:18 160;
  stroke-dashoffset:0;
  animation:trio-bolt-cascade 5.8s linear infinite;
}
.discover-v5 .lightning-event .bolt-branch{
  opacity:.34;
  stroke-dasharray:7 50;
  stroke-dashoffset:0;
  animation:trio-bolt-cascade 5.8s linear infinite;
}
.discover-v5 .lightning-event.event-b .bolt-core,
.discover-v5 .lightning-event.event-b .bolt-branch{animation-delay:-1.6s}
.discover-v5 .lightning-event.event-c .bolt-core,
.discover-v5 .lightning-event.event-c .bolt-branch{animation-delay:-3.1s}
.discover-v5 .lightning-event.event-d .bolt-core,
.discover-v5 .lightning-event.event-d .bolt-branch{animation-delay:-4.4s}
@keyframes trio-bolt-cascade{
  0%{stroke-dashoffset:178}
  44%,100%{stroke-dashoffset:-178}
}
.discover-v5 .lightning-field::before,
.discover-v5 .lightning-field::after{
  content:"";
  position:absolute;
  z-index:0;
  width:74px;
  height:168px;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(105deg,transparent 46%,rgba(255,202,255,.92) 48% 50%,transparent 52%) 29px 0/18px 29px no-repeat,
    linear-gradient(76deg,transparent 46%,rgba(232,128,255,.86) 48% 50%,transparent 52%) 20px 24px/24px 30px no-repeat,
    linear-gradient(108deg,transparent 46%,rgba(255,209,255,.92) 48% 50%,transparent 52%) 30px 48px/19px 31px no-repeat,
    linear-gradient(72deg,transparent 46%,rgba(225,112,255,.82) 48% 50%,transparent 52%) 21px 73px/25px 32px no-repeat,
    linear-gradient(110deg,transparent 46%,rgba(255,197,255,.90) 48% 50%,transparent 52%) 32px 99px/18px 31px no-repeat,
    linear-gradient(72deg,transparent 46%,rgba(228,119,255,.72) 48% 50%,transparent 52%) 25px 124px/23px 35px no-repeat,
    linear-gradient(128deg,transparent 46%,rgba(229,129,255,.64) 48% 50%,transparent 52%) 8px 74px/23px 23px no-repeat;
}
.discover-v5 .lightning-field::before{
  right:-10px;
  top:-5px;
  display:none;
}
.discover-v5 .lightning-field::after{
  left:-13px;
  top:327px;
  transform:scaleX(-1);
  display:none;
}
@keyframes css-lightning-flash{
  0%,72%,100%{opacity:0}
  73%{opacity:.34}
  74%{opacity:.86}
  75%{opacity:.09}
  76%{opacity:.62}
  78%{opacity:0}
}
@keyframes css-lightning-flash-soft{
  0%,83%,100%{opacity:0}
  84%{opacity:.24}
  85%{opacity:.56}
  86%{opacity:.06}
  87%{opacity:.36}
  89%{opacity:0}
}

@media(prefers-reduced-motion:reduce){
  .discover-v5 .lightning-event .bolt-core,
  .discover-v5 .lightning-event .bolt-branch{animation:none;stroke-dasharray:none}
  .discover-v5 .lightning-network{opacity:.16}
  .discover-v5 .lightning-field::before,.discover-v5 .lightning-field::after{animation:none;opacity:0}
}
.device.manual-reduced-motion .discover-v5 .lightning-field::before,
.device.manual-reduced-motion .discover-v5 .lightning-field::after{animation:none;opacity:0}

.device.manual-large-text .discover-v5{padding-bottom:96px}

/* Gate B continuity and editorial hierarchy */
.discover-v5 .prompt-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.discover-v5 .prompt-heading>span{
  display:block;
  color:#c8c1d0;
  font-size:11px;
  font-weight:650;
  letter-spacing:.01em;
}
.discover-v5 .prompt-explore-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-height:24px;
  margin:0;
  padding:0 9px 0 10px;
  border:1px solid rgba(174,145,231,.17);
  border-radius:999px;
  color:#c8b5f2;
  background:rgba(80,55,116,.13);
  box-shadow:inset 0 1px rgba(255,255,255,.06);
  font-size:9.5px;
  text-align:center;
}
.discover-v5 .prompt-explore-action i{
  margin-left:5px;
  color:#d9ccff;
  font-size:12px;
  font-style:normal;
}
.discover-v5 .prompt-title{
  -webkit-line-clamp:3;
  min-height:37px;
  max-height:37px;
}
.discover-v5 .friday-resume{
  animation:friday-pink-pulse 3.4s ease-in-out infinite;
}
.discover-v5 .friday-resume .sealed-markers{opacity:.72}

.splash-screen .splash-brand{
  animation:splash-signature-resolve 1.48s cubic-bezier(.16,1,.3,1) both;
}
.splash-screen>p{
  animation:splash-tagline-resolve .68s 1.05s ease-out both;
}
@keyframes splash-signature-resolve{
  0%{opacity:0;transform:scale(.92);filter:blur(7px) brightness(.5)}
  58%{opacity:1;transform:scale(1.018);filter:blur(0) brightness(1.28)}
  100%{opacity:1;transform:scale(1);filter:blur(0) brightness(1)}
}
@keyframes splash-tagline-resolve{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .splash-screen .splash-brand,.splash-screen>p{animation:none}
}
.device.manual-reduced-motion .splash-screen .splash-brand,
.device.manual-reduced-motion .splash-screen>p{animation:none}

/* Contextual brand illumination: complete lockups only, never utility marks. */
.destination-screen .brand-home,
.discover-v5 .brand-home{
  position:relative;
  isolation:isolate;
}
.destination-screen .brand-home::after,
.discover-v5 .brand-home::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:-24px;
  top:50%;
  width:138px;
  height:66px;
  transform:translateY(-50%);
  background:
    radial-gradient(ellipse at 34% 50%,rgba(104,201,255,.38),rgba(81,148,255,.17) 31%,transparent 68%),
    radial-gradient(ellipse at 58% 53%,rgba(147,87,239,.13),transparent 70%);
  opacity:.90;
  pointer-events:none;
  animation:brand-lockup-breathe 9.6s ease-in-out infinite;
}
@keyframes brand-lockup-breathe{
  0%,100%{opacity:.82;transform:translateY(-50%) scale(.98)}
  50%{opacity:.98;transform:translateY(-50%) scale(1.025)}
}

/* Once the weekly ritual is complete, Discover relaxes instead of preserving
   the compressed rhythm required by the charged Friday invitation. */
@media(max-height:680px){
  .discover-v5.friday-complete-home .discover-heading{margin-top:22px}
  .discover-v5.friday-complete-home .search-glass{margin-top:15px}
  .discover-v5.friday-complete-home .memory-control{margin-top:10px}
  .discover-v5.friday-complete-home .inspiration{margin-top:12px}
}
@media(min-height:681px){
  .discover-v5.friday-complete-home .discover-heading{margin-top:36px}
  .discover-v5.friday-complete-home .search-glass{margin-top:21px}
  .discover-v5.friday-complete-home .memory-control{margin-top:14px}
  .discover-v5.friday-complete-home .inspiration{margin-top:22px}
}

.discover-v5 .prompt-card{
  transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .18s ease,box-shadow .18s ease,filter .22s ease;
  animation:prompt-card-resolve .42s cubic-bezier(.16,1,.3,1) both;
}
/* Keep the final suggestion row scrollable above the fixed glass navigation. */
.discover-v5 .inspiration{padding-bottom:82px}
.discover-v5 .prompt-card:nth-child(2){animation-delay:.07s}
.discover-v5 .prompt-card:active{
  transform:translateY(1px) scale(.976);
  border-color:rgba(184,218,255,.27);
  box-shadow:0 9px 20px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.14),0 0 18px rgba(101,189,255,.09);
  filter:brightness(.96);
}
@keyframes prompt-card-resolve{
  from{opacity:0;transform:translateY(5px);filter:brightness(.82)}
  to{opacity:1;transform:none;filter:none}
}

@media(prefers-reduced-motion:reduce){
  .destination-screen .brand-home::after,.discover-v5 .brand-home::after,
  .discover-v5 .prompt-card{animation:none}
}
.device.manual-reduced-motion .destination-screen .brand-home::after,
.device.manual-reduced-motion .discover-v5 .brand-home::after,
.device.manual-reduced-motion .discover-v5 .prompt-card{animation:none}

/* Gate B closure — one cinematic environment across the complete product. */
.global-trio-atmosphere{
  position:fixed!important;
  z-index:0!important;
  inset:0!important;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 14% 24%,rgba(83,151,255,.07),transparent 29%),
    radial-gradient(ellipse at 84% 58%,rgba(140,79,238,.10),transparent 34%),
    linear-gradient(180deg,rgba(4,4,8,.04),rgba(3,3,6,.34));
}
.global-trio-atmosphere svg{width:100%;height:100%;display:block;overflow:visible}
.global-trio-atmosphere path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.global-trio-atmosphere .ambient-bolt{
  stroke:rgba(239,177,255,.38);
  stroke-width:.72;
  stroke-dasharray:18 190;
  animation:global-bolt-cascade 8.8s linear infinite;
  filter:drop-shadow(0 0 3px rgba(197,99,255,.32));
}
.global-trio-atmosphere .ambient-branch{
  stroke:rgba(114,196,255,.24);
  stroke-width:.54;
  stroke-dasharray:7 54;
  animation:global-bolt-cascade 8.8s linear infinite;
}
.global-trio-atmosphere .bolt-two,
.global-trio-atmosphere .branch-two{animation-delay:-4.3s}
@keyframes global-bolt-cascade{
  0%{stroke-dashoffset:208;opacity:0}
  9%{opacity:.72}
  34%{stroke-dashoffset:-208;opacity:.16}
  42%,100%{stroke-dashoffset:-208;opacity:0}
}

/* Shared material, typography and alignment rules. */
.destination-screen .app-header,
.discover-v5 .app-header{min-height:40px;align-items:center}
.destination-screen .brand-home,
.discover-v5 .brand-home{min-height:38px}
.destination-screen .destination-heading h1,
.discover-v5 .discover-heading h1{letter-spacing:-.052em}
.content-material{
  border-color:rgba(172,193,255,.11);
  background:
    linear-gradient(145deg,rgba(36,33,49,.86),rgba(14,14,21,.91));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 18px 45px rgba(0,0,0,.24),
    0 0 24px rgba(91,158,255,.025);
}
.circle-control:focus-visible,
.primary-button:focus-visible,
.quiet-button:focus-visible,
.glass-panel:focus-visible{
  outline:2px solid rgba(104,201,255,.82);
  outline-offset:3px;
}

/* Discover closure details. */
.discover-v5 .prompt-copy b{
  margin-top:6px;
  color:#d9eaff;
  font-size:9.6px;
  line-height:1.1;
}
.discover-v5 .prompt-title{
  -webkit-line-clamp:3;
  max-height:38px;
}

/* The selected lens uses an internal blue centre, never a visible blue disc. */
.device>.persistent-glass-nav button.active::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:43%;
  width:45px;
  height:37px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(104,201,255,.22),rgba(80,132,255,.075) 48%,transparent 74%);
  filter:blur(2px);
}
.device>.persistent-glass-nav .nav-stack{transform:translateY(.5px)}
.device>.persistent-glass-nav .nav-person{transform:translateY(1px)}

/* Familiar, optically centred settings symbol. */
.settings-glyph svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:#f5f5f8;
  stroke-width:1.45;
  stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(104,201,255,.14));
}

@media(prefers-reduced-motion:reduce){
  .global-trio-atmosphere path{animation:none;opacity:.12}
}
.device.manual-reduced-motion .global-trio-atmosphere path{animation:none;opacity:.12}
.device.manual-solid .global-trio-atmosphere{background:#08080d}

/* Explore — premium discovery architecture */
.explore-screen{
  padding-top:32px;
  scroll-behavior:smooth;
  scroll-padding-top:72px;
}
.explore-screen .app-header{transition:opacity .22s ease,transform .32s var(--ease-enter)}
.explore-screen>.destination-heading{margin-top:28px;transition:opacity .2s ease,transform .3s var(--ease-enter)}
.explore-screen>.destination-heading p{margin-bottom:5px}
.explore-screen .list-search{
  position:relative;
  z-index:4;
  margin:14px 0 11px;
  height:48px;
  border-color:rgba(176,194,255,.14);
  background:linear-gradient(145deg,rgba(38,35,52,.84),rgba(13,13,20,.9));
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 12px 30px rgba(0,0,0,.22);
}
.explore-screen .list-search:focus-within{
  border-color:rgba(104,201,255,.42);
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 0 0 3px rgba(104,201,255,.075),0 14px 34px rgba(0,0,0,.28);
}
.explore-screen .list-search .nav-search{
  flex:0 0 auto;
  color:#b9dfff;
  filter:drop-shadow(0 0 4px rgba(104,201,255,.28));
}
.explore-screen .list-search input{min-width:0;font-size:12px}
.explore-search-clear{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  flex:none;
  padding:0;
  border:0;
  border-radius:50%;
  color:#aaa5b3;
  background:rgba(255,255,255,.055);
}
.explore-search-clear[hidden]{display:none}
.explore-search-clear .close-glyph{transform:scale(.72)}

.filter-rail{
  position:relative;
  margin:0 -24px 15px;
}
.filter-rail::after{display:none}
.explore-screen .filter-pills{
  gap:7px;
  margin:0;
  padding:0 34px 0 24px;
  scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 25px,#000 calc(100% - 25px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 25px,#000 calc(100% - 25px),transparent 100%);
}
.explore-screen .filter-pills button{
  min-height:31px;
  padding:7px 12px;
  scroll-snap-align:center;
  border-color:rgba(183,197,255,.12);
  color:#9893a4;
  background:linear-gradient(145deg,rgba(44,40,58,.58),rgba(16,15,23,.72));
  transition:color .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .16s ease;
}
.explore-screen .filter-pills button:active{transform:scale(.96)}
.explore-screen .filter-pills button:focus-visible{
  outline:2px solid rgba(104,201,255,.72);
  outline-offset:1px;
}
.explore-screen .filter-pills button.active{
  color:#f9fbff;
  border-color:rgba(151,199,255,.3);
  background:linear-gradient(145deg,rgba(102,88,177,.42),rgba(46,67,113,.36));
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 0 18px rgba(104,201,255,.08);
}

.explore-featured{
  position:relative;
  height:210px;
  overflow:hidden;
  border:1px solid rgba(203,194,255,.17);
  border-radius:26px;
  background-size:cover;
  background-position:center;
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 22px 46px rgba(0,0,0,.36),0 0 34px rgba(95,79,207,.08);
}
.explore-featured::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(5,6,12,.92) 0%,rgba(7,8,15,.69) 48%,rgba(8,9,16,.14) 76%),linear-gradient(0deg,rgba(6,6,11,.75),transparent 55%);
}
.explore-featured>div{
  position:absolute;
  z-index:2;
  left:18px;
  right:16px;
  bottom:17px;
}
.explore-featured small{
  color:#c4b6f2;
  font-size:7.7px;
  font-weight:620;
  letter-spacing:.12em;
}
.explore-featured h2{
  max-width:250px;
  margin:8px 0 7px;
  font-size:23px;
  line-height:.97;
  letter-spacing:-.045em;
}
.explore-featured p{
  max-width:240px;
  margin:0 0 12px;
  color:#bab5c2;
  font-size:10px;
  line-height:1.35;
}
.explore-featured button{
  height:30px;
  padding:0 12px;
  border:1px solid rgba(218,210,255,.2);
  border-radius:999px;
  color:white;
  background:rgba(20,17,30,.52);
  backdrop-filter:blur(16px);
  font-size:9.5px;
}

.explore-shelf{margin:28px -24px 0}
.explore-shelf>header{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  padding:0 24px 11px;
}
.explore-shelf h2{
  margin:0;
  font-size:18px;
  letter-spacing:-.035em;
}
.explore-shelf p{
  margin:3px 0 0;
  color:#85808e;
  font-size:9.5px;
}
.explore-shelf>header button{
  flex:none;
  padding:6px 0;
  border:0;
  color:#a9cfff;
  background:none;
  font-size:9.5px;
}
.explore-shelf-track{
  display:flex;
  gap:11px;
  overflow-x:auto;
  padding:0 24px 8px;
  scroll-padding:24px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.explore-shelf-track::-webkit-scrollbar{display:none}
.explore-insufficient{
  width:calc(100% - 48px);
  min-height:104px;
  display:grid;
  grid-template-columns:48px 1fr 14px;
  gap:12px;
  align-items:center;
  margin:0 24px;
  padding:13px;
  border-radius:20px;
  color:white;
  text-align:left;
}
.explore-insufficient>span{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(157,196,255,.17);
  border-radius:16px;
  background:radial-gradient(circle,rgba(104,201,255,.13),rgba(112,71,203,.12));
}
.explore-insufficient .brand-mark{width:27px;height:27px;opacity:.76}
.explore-insufficient>div{display:grid;gap:4px}
.explore-insufficient small{color:#9a84dd;font-size:7px;letter-spacing:.11em}
.explore-insufficient strong{font-size:11px;line-height:1.2}
.explore-insufficient p{margin:0;color:#85808e;font-size:8px;line-height:1.35}
.explore-insufficient>i{color:#aaa5b0;font-style:normal}
.explore-collection-card{
  position:relative;
  flex:0 0 156px;
  min-width:0;
  padding:0;
  overflow:hidden;
  scroll-snap-align:start;
  border:1px solid rgba(197,190,232,.12);
  border-radius:20px;
  color:white;
  background:linear-gradient(160deg,rgba(34,31,44,.92),rgba(11,11,17,.96));
  box-shadow:0 14px 31px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.055);
  text-align:left;
  transition:transform .18s var(--ease-standard),border-color .18s ease,box-shadow .18s ease;
}
.explore-collection-card:active{
  transform:scale(.975);
  border-color:rgba(152,201,255,.28);
  box-shadow:0 8px 18px rgba(0,0,0,.27),0 0 20px rgba(104,201,255,.055);
}
.explore-card-art{
  position:relative;
  display:block;
  height:101px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
}
.explore-card-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(9,8,14,.74),transparent 58%);
}
.explore-card-art i{
  position:absolute;
  z-index:2;
  right:10px;
  bottom:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--focus-blue);
  box-shadow:0 0 11px rgba(104,201,255,.72);
}
.explore-card-copy{
  min-height:98px;
  display:flex;
  flex-direction:column;
  padding:10px 11px 11px;
}
.explore-card-copy small{
  overflow:hidden;
  color:#9e88e5;
  font-size:6.7px;
  font-style:normal;
  letter-spacing:.075em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}
.explore-card-copy strong{
  display:-webkit-box;
  margin-top:5px;
  overflow:hidden;
  font-size:10.5px;
  line-height:1.18;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
.explore-card-copy em{
  margin-top:auto;
  padding-top:8px;
  color:#777180;
  font-size:7.5px;
  font-style:normal;
}
.explore-collection-card>.row-chevron{display:none}

.explore-filter-result{display:grid;gap:8px;padding-top:3px}
.explore-filter-result .explore-taste-pending{margin:0}
.explore-filter-result .explore-taste-pending>header{display:none}
.explore-filter-result .explore-insufficient{width:100%;margin:0}
.explore-filter-result>span{
  margin:0 4px 3px;
  color:#8e78d4;
  font-size:8px;
  letter-spacing:.12em;
}
.explore-collection-card.compact{
  min-height:82px;
  display:grid;
  grid-template-columns:68px 1fr 14px;
  gap:12px;
  align-items:center;
  padding:7px 11px 7px 7px;
  border-radius:18px;
}
.explore-collection-card.compact .explore-card-art{
  width:68px;
  height:68px;
  border-radius:13px;
}
.explore-collection-card.compact .explore-card-copy{
  min-height:0;
  padding:0;
}
.explore-collection-card.compact .explore-card-copy strong{-webkit-line-clamp:2}
.explore-collection-card.compact>.row-chevron{
  display:block;
  color:#a7a1b0;
  font-size:15px;
  font-style:normal;
}

.explore-search-summary{
  display:grid;
  gap:3px;
  margin:3px 2px 18px;
}
.explore-search-summary span{
  color:#8f78da;
  font-size:8px;
  letter-spacing:.13em;
}
.explore-search-summary strong{
  overflow:hidden;
  font-size:20px;
  letter-spacing:-.03em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.explore-search-section{margin-top:24px}
.explore-search-section>div:first-child{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin:0 2px 10px;
}
.explore-search-section h2{margin:0;font-size:17px;letter-spacing:-.03em}
.explore-search-section>div:first-child small{color:#787280;font-size:8px}
.explore-search-section>.explore-collection-card{margin-bottom:8px}
.film-results>div:last-child{display:grid;gap:8px}
.film-results>div:last-child button{
  min-height:69px;
  display:grid;
  grid-template-columns:50px 1fr 14px;
  grid-template-rows:auto auto;
  gap:3px 11px;
  align-items:center;
  padding:8px;
  border:1px solid rgba(190,184,219,.11);
  border-radius:17px;
  color:white;
  background:linear-gradient(145deg,rgba(31,29,40,.84),rgba(12,12,18,.92));
  text-align:left;
}
.film-results>div:last-child button>span{
  grid-row:1/3;
  width:50px;
  height:52px;
  border-radius:11px;
  background-size:cover;
}
.film-results>div:last-child button>strong{font-size:11px}
.film-results>div:last-child button>small{color:#85808e;font-size:8px}
.film-results>div:last-child button>i{grid-column:3;grid-row:1/3;color:#aaa4b0;font-style:normal}

.explore-loading{
  min-height:260px;
  display:grid;
  grid-template-columns:repeat(3,7px);
  align-content:center;
  justify-content:center;
  gap:7px;
  color:#8f8998;
}
.explore-loading i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:linear-gradient(145deg,var(--focus-blue),#a26fff);
  animation:explore-loading 1.1s ease-in-out infinite;
}
.explore-loading i:nth-child(2){animation-delay:.14s}
.explore-loading i:nth-child(3){animation-delay:.28s}
.explore-loading span{
  grid-column:1/4;
  margin-top:10px;
  font-size:9px;
  text-align:center;
}
@keyframes explore-loading{50%{transform:translateY(-5px);opacity:.5}}
.explore-recovery{
  min-height:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin-top:5px;
  padding:28px;
  border-radius:24px;
  text-align:center;
}
.recovery-symbol{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border:1px solid rgba(163,197,255,.2);
  border-radius:19px;
  color:#c5e5ff;
  background:radial-gradient(circle,rgba(104,201,255,.14),rgba(102,70,196,.12));
  box-shadow:0 0 25px rgba(104,201,255,.06);
  font-size:22px;
}
.explore-recovery h2{margin:17px 0 8px;font-size:20px;letter-spacing:-.035em}
.explore-recovery p{max-width:230px;margin:0;color:#918b99;font-size:10px;line-height:1.45}
.explore-recovery button{
  min-height:36px;
  margin-top:18px;
  padding:0 15px;
  border:1px solid rgba(176,205,255,.2);
  border-radius:999px;
  color:white;
  background:rgba(72,64,113,.34);
  font-size:9.5px;
}

.explore-compact-bar{
  position:fixed!important;
  z-index:25!important;
  top:0;
  left:0;
  right:0;
  height:76px;
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:end;
  padding:0 24px 14px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.09);
  border-radius:0;
  opacity:0;
  transform:translateY(-12px);
  pointer-events:none;
  background:
    radial-gradient(ellipse at 16% 40%,rgba(78,139,231,.12),transparent 42%),
    linear-gradient(180deg,rgba(7,7,13,.995),rgba(9,8,15,.965));
  box-shadow:0 16px 34px rgba(0,0,0,.24);
  backdrop-filter:blur(34px) saturate(140%);
  -webkit-backdrop-filter:blur(34px) saturate(140%);
  transition:opacity .2s ease,transform .28s var(--ease-enter);
}
.explore-compact-bar .brand-home{align-self:end;width:31px;height:31px}
.explore-compact-bar .brand-mark{width:27px;height:27px}
.explore-compact-bar strong{
  align-self:center;
  margin-top:24px;
  font-size:13px;
  text-align:center;
}
.explore-screen.is-scrolled .explore-compact-bar{opacity:1;transform:none;pointer-events:auto}

.explore-screen::after{
  content:"";
  position:fixed;
  z-index:8;
  left:0;
  right:0;
  bottom:0;
  height:112px;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(5,5,9,.96) 9%,rgba(5,5,9,.68) 52%,transparent);
}
.device>.persistent-glass-nav{z-index:30}

@media(prefers-reduced-motion:reduce){
  .explore-loading i{animation:none}
  .explore-screen,.explore-shelf-track{scroll-behavior:auto}
  .explore-compact-bar{transition:none}
}
.device.manual-reduced-motion .explore-loading i{animation:none}
.device.manual-large-text .explore-card-copy strong{font-size:12px}
.device.manual-large-text .explore-collection-card{flex-basis:174px}

/* Explore final refinement — continuous hierarchy, contained filters and editorial clarity */
.explore-screen{
  --explore-compact:0;
  --explore-collapse:0;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
}
.explore-screen .app-header{
  opacity:calc(1 - var(--explore-collapse) * 1.22);
  transform:translateY(calc(var(--explore-collapse) * -13px)) scale(calc(1 - var(--explore-collapse) * .025));
  transform-origin:top left;
  will-change:opacity,transform;
}
.explore-screen>.destination-heading{
  margin-top:24px;
  opacity:calc(1 - var(--explore-collapse) * 1.22);
  transform:translateY(calc(var(--explore-collapse) * -17px)) scale(calc(1 - var(--explore-collapse) * .035));
  transform-origin:top left;
  will-change:opacity,transform;
}
.explore-screen>.destination-heading h1{
  margin:0 0 7px;
  font-size:38px;
  line-height:1;
}
.explore-screen>.destination-heading p{
  max-width:315px;
  margin:0;
  color:#a29da9;
  font-size:11.5px;
  line-height:1.45;
}
.explore-screen .list-search{margin:18px 0 0}
.explore-screen .list-search input{
  width:100%;
  min-width:0;
  overflow:hidden;
  font-size:12px;
  text-overflow:clip;
  white-space:nowrap;
}
.explore-screen .list-search input::placeholder{color:#807b89;opacity:1}
.explore-search-guidance{
  margin:7px 2px 13px;
  color:#777281;
  font-size:8.5px;
  line-height:1.35;
}
.filter-rail{
  width:100%;
  max-width:100%;
  margin-inline:0;
  overflow:hidden;
}
.explore-screen .filter-pills{
  width:100%;
  max-width:100%;
  justify-content:space-between;
  box-sizing:border-box;
  gap:4px;
  padding:0;
  overscroll-behavior-x:contain;
  -webkit-mask-image:none;
  mask-image:none;
}
.explore-screen .filter-pills button{
  flex:0 0 auto;
  min-height:30px;
  padding-inline:8px;
  font-size:8.5px;
}
.explore-compact-bar{
  opacity:var(--explore-compact);
  transform:translateY(calc((1 - var(--explore-compact)) * -15px));
  pointer-events:none;
  transition:none;
  will-change:opacity,transform;
}
.explore-screen.is-scrolled .explore-compact-bar{
  opacity:var(--explore-compact);
  transform:translateY(calc((1 - var(--explore-compact)) * -15px));
  pointer-events:auto;
}
.explore-search-summary strong{
  overflow:visible;
  font-size:19px;
  line-height:1.18;
  overflow-wrap:anywhere;
  text-overflow:clip;
  white-space:normal;
}
.explore-shelf>header button{
  min-width:44px;
  min-height:34px;
  margin:-7px 0;
}
.explore-collection-card:focus-visible,
.explore-featured button:focus-visible,
.explore-insufficient:focus-visible{
  outline:2px solid rgba(104,201,255,.75);
  outline-offset:2px;
}
.explore-featured{
  background-position:64% center!important;
}
.explore-featured button:active{transform:scale(.97)}

/* Collection continuity */
.collection-hero>div{bottom:20px}
.collection-hero p{
  max-width:300px;
  font-size:10.5px;
  line-height:1.42;
}
.collection-save{
  min-height:34px;
  margin-top:13px;
  padding:0 14px;
  border:1px solid rgba(185,211,255,.22);
  border-radius:999px;
  color:#e9f5ff;
  background:linear-gradient(145deg,rgba(66,94,147,.28),rgba(84,53,143,.26));
  box-shadow:inset 0 1px rgba(255,255,255,.09);
  font-size:9px;
}
.collection-save.saved{
  border-color:rgba(104,201,255,.34);
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 0 20px rgba(104,201,255,.09);
}
.collection-grid-intro{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:12px 24px 2px;
}
.collection-grid-intro span{
  flex:none;
  color:#9d85e7;
  font-size:7px;
  letter-spacing:.11em;
}
.collection-grid-intro p{
  margin:0;
  color:#7e7986;
  font-size:8px;
  text-align:right;
}

/* Collection sharing — the preview is the object being sent */
.collection-share .share-preview{
  width:100%;
  height:auto;
  min-height:0;
  margin:22px 0 15px;
}
.collection-share .share-art{height:157px}
.collection-preview>div:last-child{
  display:grid;
  gap:5px;
  padding:14px 16px 15px;
}
.collection-preview h1{
  margin:0;
  max-width:100%;
  font-size:17px;
  line-height:1.08;
}
.collection-preview .share-description{
  margin:1px 0 0;
  color:#aaa5b1;
  font-size:9px;
  line-height:1.38;
}
.collection-preview small{
  color:#807989;
  font-size:8px;
}
.collection-share .share-copy h2{font-size:21px}
.share-destinations{gap:16px}
.share-destinations button{
  min-width:58px;
  min-height:58px;
  border-radius:16px;
}
.share-destinations i{
  width:44px;
  height:44px;
  border-color:rgba(148,193,255,.18);
  background:
    radial-gradient(circle at 50% 42%,rgba(104,201,255,.13),transparent 48%),
    linear-gradient(145deg,rgba(44,46,69,.76),rgba(16,14,25,.88));
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 10px 22px rgba(0,0,0,.22);
}
.share-destinations button:active i{
  transform:scale(.94);
  border-color:rgba(104,201,255,.36);
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 0 19px rgba(104,201,255,.1);
}
.share-destinations svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:#eaf6ff;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(104,201,255,.22));
}
.share-destinations svg circle{fill:#eaf6ff;stroke:none}

@media(prefers-reduced-motion:reduce){
  .explore-screen .app-header,
  .explore-screen>.destination-heading,
  .explore-compact-bar{will-change:auto}
  .filter-pills{scroll-behavior:auto!important}
}
.device.manual-large-text .explore-screen>.destination-heading p{font-size:13px}
.device.manual-large-text .explore-search-guidance{font-size:10px}
.device.manual-large-text .collection-grid-intro{align-items:flex-start;flex-direction:column;gap:4px}
.device.manual-large-text .collection-grid-intro p{text-align:left}

/* ===== prototype-src/design-tokens.css ===== */
/* The display face (LOOK, 9 October 2026, evening): Fraunces by Undercase Type, SIL Open Font License 1.1 (no Reserved
   Font Name), self-hosted with its licence (public/assets/fonts/Fraunces-OFL.txt), credited in Settings > About, built
   by scripts/build-display-font.py. Its whole weight axis (300 to 800) is declared here; --font-display
   (design-system.css) names it and ds-look.css section 6 says what it sets. Never fetched from anywhere but the app's
   own server. */
@font-face {
  font-family: "Fraunces TRIPTIC";
  src: url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces TRIPTIC";
  src: url("/assets/fonts/fraunces-latin-ext.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* The marquee face (lane CINEMA-LOOK, 20 October 2026; hub/docs/CINEMA-TYPE-2026-10-20.md): Barlow Condensed SemiBold by
   Jeremy Tribby, SIL Open Font License 1.1 (public/assets/fonts/BarlowCondensed-OFL.txt), the same file the end credits and
   the stingers already use. A condensed cinema sans, set ONLY in the few places that document names (the Cinema letterboard,
   THE TEN's title, Friday 3's opening date, the membership marquee): --font-marquee. Self-hosted, preloaded by the shell. */
@font-face {
  font-family: "Marquee TRIPTIC";
  src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
:root {
  --font-marquee: "Marquee TRIPTIC", "Barlow Condensed", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --tr-marquee: .17em;          /* the letterboard's spaced capitals */
  --tr-marquee-title: .05em;    /* a marquee word set large */
  --tr-marquee-numeral: .03em;  /* the marquee numerals on THE TEN's rank chips */
  --tr-marquee-tag: .14em;      /* the small tracked tag beside a marquee word (THE TEN's LIVE) */
  --marquee-corner: 3px;        /* the letterboard's pressed-metal frame: a physical object's corner, not the UI radius scale */
  /* the letterboard: a warm backlit panel and its black letters; the neon: the app's violet, lit */
  --marquee-board: rgb(236 229 211);
  --marquee-board-lo: rgb(214 205 184);
  --marquee-letter: rgb(22 19 24);
  --marquee-frame: rgb(30 27 34);
  --neon: rgb(214 196 255);
  --neon-halo: rgb(167 139 250 / .34);
}
:root {
  /* Canonical product tokens. Visual approval still happens screen by screen,
     but every surface now draws from one semantic system. */
  --trip-color-black: #050507;
  --trip-color-ink: #0a0a0f;
  --trip-color-white: #f7f7f8;
  --trip-color-muted: #8f8b98;
  --trip-color-violet: #8b5cf6;
  --trip-color-blue: #68c9ff;
  --trip-color-pink: #dc79ff;
  --trip-color-blue-soft: #9ce4ff;
  --trip-color-pink-soft: #f0a2ff;
  --trip-color-success: #8ee8cb;
  --trip-color-warning: #f0c786;
  --trip-color-danger: #ff9ea9;
  --trip-glass-line: rgba(255, 255, 255, .13);
  --trip-glass-fill: rgba(25, 24, 34, .68);
  --trip-glass-fill-strong: rgba(20, 19, 29, .86);
  --trip-glass-fill-soft: rgba(22, 21, 31, .54);
  --trip-depth-rest: 0 18px 48px rgba(0, 0, 0, .34);
  --trip-depth-raised: 0 28px 70px rgba(0, 0, 0, .48);
  --trip-glow-blue: 0 0 28px rgba(104, 201, 255, .2);
  --trip-glow-pink: 0 0 34px rgba(220, 121, 255, .24);
  --trip-radius-control: 16px;
  --trip-radius-card: 22px;
  --trip-radius-sheet: 28px;
  --trip-motion-instant: var(--motion-press);   /* motion tokens live in motion-system.css */
  --trip-motion-fast: var(--motion-fast);
  --trip-motion-standard: var(--motion-normal);
  --trip-motion-deliberate: var(--motion-slow);
  --trip-ease-standard: var(--motion-curve);
  --trip-ease-enter: var(--motion-curve);
  --trip-ease-exit: var(--motion-curve);
  --trip-spring: var(--motion-spring);
  --trip-spring-gentle: var(--motion-curve);
  --trip-safe-inline: 24px;
  --trip-nav-clearance: 112px;

  /* Compatibility aliases used by the candidate screens during migration. */
  --black: var(--trip-color-black);
  --deep-black: var(--trip-color-ink);
  --white: var(--trip-color-white);
  --purple: var(--trip-color-violet);
  --focus-blue: var(--trip-color-blue);
  --line: var(--trip-glass-line);
  --radius-control: var(--trip-radius-control);
  --radius-card: var(--trip-radius-card);
  --ease-standard: var(--trip-ease-standard);
  --ease-enter: var(--trip-ease-enter);
  --ease-exit: var(--trip-ease-exit);
}

/* ===== public/assets/triptic-expansion.css ===== */
/* TRIPTIC expansion layer — loaded after the established Gate B system. */

:root {
  --triptic-violet:#9d7dff;
  --triptic-pink:#e18cff;
  --triptic-blue:#6fc6ff;
  --triptic-ink:#05050a;
  --triptic-ease:cubic-bezier(.2,.8,.2,1);
}

.wordmark { width:92px; height:auto; }
.welcome-brand .wordmark { width:126px; margin-top:12px; }
.auth-brand .wordmark { width:102px; }
.brand-home .wordmark { width:88px; }
.reveal-topbar .wordmark,.friday-screen>header .wordmark { width:82px; }
.splash-brand .wordmark { width:150px; }

.daily-cryptic-tile {
  width:calc(100% - 48px);
  min-height:112px;
  margin:4px 24px 20px;
  padding:14px 16px;
  display:grid;
  grid-template-columns:72px 1fr 14px;
  align-items:center;
  gap:13px;
  border-radius:24px;
  text-align:left;
  color:white;
  background:
    radial-gradient(circle at 15% 50%,rgba(111,198,255,.14),transparent 27%),
    radial-gradient(circle at 78% 20%,rgba(225,140,255,.12),transparent 38%),
    rgba(16,14,26,.72);
  box-shadow:inset 0 0 0 1px rgba(173,151,255,.14),0 18px 42px rgba(0,0,0,.28);
}
.daily-cryptic-tile>span:nth-child(2){display:grid;gap:4px}
.daily-cryptic-tile small{color:#9dcbff;font-size:8px;letter-spacing:.13em}
.daily-cryptic-tile strong{font-size:14px;letter-spacing:-.02em}
.daily-cryptic-tile p{margin:0;color:#aaa7b4;font-size:10px;line-height:1.35}
.daily-cryptic-tile>i{font-style:normal;color:#b8acef;font-size:20px}
.cryptic-mini-orb{position:relative;width:64px;height:64px;display:grid;place-items:center}

.signature-orb {
  position:relative;
  display:block;
  width:188px;
  aspect-ratio:1;
  isolation:isolate;
  filter:saturate(1.08);
}
.signature-orb.is-compact{width:62px}
.signature-halo {
  position:absolute;
  inset:6%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18) 0,rgba(112,197,255,.18) 25%,rgba(220,113,255,.28) 44%,rgba(101,65,255,.16) 58%,transparent 74%);
  filter:blur(11px);
  animation:signature-halo 5.2s var(--triptic-ease) infinite;
}
.signature-image {
  position:absolute;
  inset:0;
  border-radius:50%;
  background:url("/assets/triptic-orb-reference.jpg") center/145% 145% no-repeat;
  mix-blend-mode:screen;
  filter:contrast(1.14) saturate(1.18);
  -webkit-mask-image:radial-gradient(circle,black 48%,rgba(0,0,0,.86) 58%,transparent 73%);
  mask-image:radial-gradient(circle,black 48%,rgba(0,0,0,.86) 58%,transparent 73%);
  animation:signature-breathe 5.2s var(--triptic-ease) infinite;
}
.signature-image::after{content:"";position:absolute;inset:17%;border-radius:50%;background:conic-gradient(from 20deg,transparent,rgba(119,206,255,.28),transparent 28%,rgba(229,122,255,.32),transparent 57%,rgba(116,139,255,.22),transparent);mix-blend-mode:screen;filter:blur(7px);opacity:.44;animation:signature-plasma-drift 8.6s linear infinite}
.signature-filaments,.signature-ring{position:absolute;inset:15%;border-radius:50%;pointer-events:none}
.signature-filaments i{
  position:absolute;left:50%;top:50%;width:56%;height:1px;transform-origin:0 50%;
  background:linear-gradient(90deg,#fff,rgba(112,198,255,.82) 28%,rgba(226,120,255,.72) 66%,transparent);
  clip-path:polygon(0 45%,18% 0,32% 80%,51% 22%,70% 65%,100% 50%,69% 83%,49% 35%,31% 92%,17% 30%);
  filter:drop-shadow(0 0 5px #8fcfff);
  opacity:.58;
  animation:signature-fizz 2.8s steps(3,end) infinite;
}
.signature-filaments i:nth-child(1){transform:rotate(8deg)}
.signature-filaments i:nth-child(2){transform:rotate(66deg);animation-delay:-.4s}
.signature-filaments i:nth-child(3){transform:rotate(124deg);animation-delay:-.9s}
.signature-filaments i:nth-child(4){transform:rotate(188deg);animation-delay:-1.4s}
.signature-filaments i:nth-child(5){transform:rotate(246deg);animation-delay:-1.9s}
.signature-filaments i:nth-child(6){transform:rotate(309deg);animation-delay:-2.3s}
.signature-ring{border:1px solid rgba(133,185,255,.18);filter:drop-shadow(0 0 8px rgba(180,115,255,.42));animation:signature-ring 7s linear infinite}
.signature-ring.ring-b{inset:22%;border-color:rgba(230,139,255,.2);animation-direction:reverse;animation-duration:5.7s}
.signature-charging .signature-image,.signature-compressed .signature-image{animation-duration:1.55s;filter:contrast(1.28) saturate(1.35) brightness(1.12)}
.signature-charging .signature-filaments i{animation-duration:.78s;opacity:.82}
.signature-compressed{transform:scale(.88);transition:transform .32s var(--triptic-ease)}
.signature-compressed .signature-halo{opacity:.48}
.signature-bursting{animation:signature-burst .72s var(--triptic-ease) both}
.signature-distributing .signature-filaments i,.signature-revealing .signature-filaments i{opacity:.76}
.signature-settled .signature-image{animation-duration:7s;filter:contrast(1.06) saturate(.96) brightness(.84)}
.signature-error{filter:saturate(.35);opacity:.75}
.signature-error .signature-filaments{display:none}

@keyframes signature-halo{0%,100%{transform:scale(.94);opacity:.62}50%{transform:scale(1.08);opacity:.92}}
@keyframes signature-breathe{0%,100%{transform:scale(.985) rotate(-1deg)}52%{transform:scale(1.025) rotate(1deg)}}
@keyframes signature-plasma-drift{0%{transform:rotate(0deg) scale(.94);opacity:.34}45%{opacity:.58}100%{transform:rotate(360deg) scale(1.05);opacity:.34}}
@keyframes signature-fizz{0%,100%{opacity:.28}21%{opacity:.82}26%{opacity:.34}64%{opacity:.6}}
@keyframes signature-ring{to{transform:rotate(360deg) scale(1.025)}}
@keyframes signature-burst{0%{transform:scale(.88);filter:brightness(1.4)}28%{transform:scale(.78);filter:brightness(1.7)}65%{transform:scale(1.22);filter:brightness(1.35)}100%{transform:scale(1);filter:brightness(1)}}

.explore-all-screen{padding-bottom:40px}
.explore-all-screen .explore-filter-result{padding:0 23px}
.explore-all-screen .explore-collection-card{min-height:92px}
.library-empty{margin:30px 24px;padding:28px;text-align:center;border-radius:24px}
.library-empty .brand-mark{width:54px;height:54px;margin:0 auto 16px;opacity:.75}
.library-empty h2{margin:0 0 8px;font-size:22px}
.library-empty p{margin:0 0 22px;color:var(--muted);font-size:11px;line-height:1.5}
.library-empty button{min-height:44px;padding:0 18px;border:1px solid rgba(155,129,255,.35);border-radius:15px;color:white;background:rgba(113,76,219,.16)}
.collection-save.saved{color:#e5e0ff;border-color:rgba(132,198,255,.45);box-shadow:0 0 18px rgba(106,185,255,.14)}

/* Taste Sprint */
.taste-sprint-screen{padding:24px 24px 24px;overflow:hidden}
.taste-sprint-screen>header{min-height:52px;display:grid;grid-template-columns:1fr 60px 1fr;align-items:center}
.taste-sprint-screen>header>.quiet-button{justify-self:start;margin:0;padding:0 10px;min-width:54px}
.taste-clock{position:relative;width:52px;height:52px;display:grid;place-items:center}
.taste-clock svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.taste-clock circle{fill:none;stroke:rgba(255,255,255,.08);stroke-width:3}
.taste-clock .progress{stroke:url("#none");stroke:#a98cff;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:calc(113.1 - (113.1 * var(--remaining) / 30));transition:stroke-dashoffset .35s linear;filter:drop-shadow(0 0 5px rgba(185,132,255,.65))}
.taste-clock strong{position:relative;font-size:13px;font-variant-numeric:tabular-nums}
.taste-clock.untimed .progress{stroke:#75c9ff;stroke-dashoffset:28}
.taste-sprint-screen .onboarding-copy{margin-top:8px}
.taste-sprint-screen .onboarding-copy h1{font-size:27px;margin:8px 0 4px}
.taste-sprint-screen .onboarding-copy p{max-width:310px;margin:0 auto;color:#aaa7b5;font-size:10px;line-height:1.42}
.taste-sprint-screen .taste-deck{height:331px;margin:13px auto 6px}
.taste-sprint-screen .onboarding-card{width:222px;height:318px;touch-action:none;user-select:none;-webkit-user-select:none}
.taste-sprint-screen .verdict-no{opacity:var(--drag-no,0)}
.taste-sprint-screen .verdict-yes{opacity:var(--drag-yes,0)}
.taste-sprint-screen .taste-actions{margin-top:1px}
.taste-pace-control{display:block;margin:12px auto 0;border:0;color:#9db8e7;background:none;font-size:10px;text-decoration:underline;text-underline-offset:3px}
.taste-count{display:block;margin-top:8px;color:#777382;font-size:8px;text-align:center}
.undo-symbol{position:relative;width:16px;height:16px;display:block;border:1.35px solid currentColor;border-right-color:transparent;border-radius:50%;transform:rotate(-32deg)}
.undo-symbol::before{content:"";position:absolute;left:-3px;top:-2px;width:6px;height:6px;border-left:1.35px solid currentColor;border-top:1.35px solid currentColor;transform:rotate(-15deg)}
.benefit-check{position:relative;width:20px;height:20px;display:grid;place-items:center;border:1px solid rgba(142,208,255,.34);border-radius:50%;background:rgba(87,161,219,.08)}
.benefit-check::after{content:"";width:8px;height:4px;border-left:1.5px solid #bfe7ff;border-bottom:1.5px solid #bfe7ff;transform:translateY(-1px) rotate(-45deg)}

/* Additional Interests */
.interests-screen{overflow-y:auto;padding:24px 20px 138px;scrollbar-width:none}
.interests-screen::-webkit-scrollbar{display:none}
.interests-screen>header{height:48px;display:flex;align-items:center;justify-content:space-between}
.interests-screen>header .quiet-button{margin:0;padding:0;min-width:44px;text-align:left}
.interests-screen>header>span{color:#9994a5;font-size:9px}
.interests-copy{margin:15px 4px 22px}
.interests-copy h1{margin:9px 0 8px;font-size:31px;line-height:1.02;letter-spacing:-.05em}
.interests-copy p{max-width:320px;margin:0;color:#a7a4af;font-size:11px;line-height:1.48}
.interest-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.interest-grid button{
  position:relative;height:132px;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:20px;padding:0;
  color:white;background-size:cover;text-align:left;box-shadow:0 12px 28px rgba(0,0,0,.24);
  transition:transform .18s var(--triptic-ease),border-color .18s,box-shadow .18s;
}
.interest-grid button::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,4,9,.04),rgba(4,4,9,.34) 40%,rgba(4,4,9,.96))}
.interest-grid strong{position:absolute;z-index:2;left:13px;right:13px;bottom:31px;font-size:12px;line-height:1.14;letter-spacing:-.018em}
.interest-grid em{position:absolute;z-index:2;left:13px;right:10px;bottom:13px;overflow:hidden;color:#aaa6b3;font-size:7px;font-style:normal;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.interest-grid button>i{position:absolute;z-index:3;right:10px;top:10px;width:25px;height:25px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;font-style:normal;font-size:12px;background:rgba(6,6,12,.48);backdrop-filter:blur(9px)}
.interest-grid button>small{position:absolute;z-index:3;left:12px;top:11px;color:#a7d9ff;font-size:7px;letter-spacing:.1em;text-transform:uppercase}
.interest-grid button.selected{transform:translateY(-2px);border-color:rgba(117,202,255,.86);box-shadow:0 0 0 1px rgba(181,121,255,.38),0 0 25px rgba(95,180,255,.22),0 16px 30px rgba(0,0,0,.34)}
.interest-grid button.selected>i{color:#07070b;border-color:#c8eaff;background:#c8eaff}
.interest-actions{position:fixed;z-index:20;left:50%;bottom:0;width:min(390px,100%);transform:translateX(-50%);padding:23px 24px 26px;background:linear-gradient(180deg,transparent,rgba(6,6,11,.93) 25%,#06060b 55%);backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);text-align:center}
.interest-actions .primary-button{width:100%}
.interest-actions .primary-button{color:#fff;border:1px solid rgba(189,157,255,.48);background:linear-gradient(145deg,rgba(124,81,230,.88),rgba(70,43,147,.86));box-shadow:inset 0 1px rgba(255,255,255,.22),0 0 0 1px rgba(91,166,255,.08),0 13px 32px rgba(50,24,112,.34)}
.interest-actions small{display:block;margin-top:9px;color:#74717d;font-size:8px}

/* Screen-specific atmosphere: motion belongs to Discover; supporting screens stay cinematic and still. */
.global-trio-atmosphere{background:#06060b!important;overflow:hidden}
.global-trio-atmosphere svg{display:none!important}
.global-trio-atmosphere .atmosphere-pool{position:absolute;border-radius:50%;filter:blur(58px);opacity:.4;transform:translateZ(0)}
.global-trio-atmosphere .pool-a{width:270px;height:250px;left:-120px;top:92px}
.global-trio-atmosphere .pool-b{width:230px;height:270px;right:-130px;bottom:92px}
.environment-auth{background:radial-gradient(circle at 50% 36%,rgba(102,67,178,.15),transparent 42%),#05050a!important}
.environment-auth .pool-a{background:rgba(88,166,255,.14)}
.environment-auth .pool-b{background:rgba(183,91,255,.13)}
.environment-explore{background:linear-gradient(180deg,#07070d,#090811 48%,#05050a)!important}
.environment-explore .pool-a{background:rgba(96,149,211,.11);top:170px;left:-150px}
.environment-explore .pool-b{background:rgba(125,75,170,.12);bottom:150px}
.environment-library{background:linear-gradient(180deg,#07080d,#05060a)!important}
.environment-library .pool-a{background:rgba(68,135,194,.12);top:240px;left:-170px}
.environment-library .pool-b{background:rgba(105,65,154,.09);bottom:60px;right:-160px}
.environment-dna{background:radial-gradient(circle at 50% 28%,rgba(111,82,182,.12),transparent 34%),#06060b!important}
.environment-dna .pool-a{background:rgba(83,160,220,.1);left:45px;top:120px}
.environment-dna .pool-b{background:rgba(193,80,221,.1);right:20px;bottom:80px}
.environment-friday{background:radial-gradient(circle at 50% 36%,rgba(207,85,233,.14),transparent 34%),#050509!important}
.environment-friday .pool-a{background:rgba(100,161,255,.11);left:70px;top:130px}
.environment-friday .pool-b{background:rgba(232,88,205,.13);right:45px;bottom:130px}
.environment-cryptic{background:radial-gradient(circle at 50% 34%,rgba(75,120,188,.14),rgba(81,55,140,.08) 28%,transparent 51%),#05060b!important}
.environment-cryptic .pool-a,.environment-cryptic .pool-b{display:none}
.environment-film{background:#050509!important}
.environment-film .atmosphere-pool{display:none}
.environment-neutral{background:linear-gradient(180deg,#07070c,#050509)!important}
.environment-neutral .pool-a{background:rgba(74,126,173,.07)}
.environment-neutral .pool-b{background:rgba(109,69,143,.07)}

@media (prefers-reduced-transparency:reduce){.global-trio-atmosphere .atmosphere-pool{display:none}}
@media (prefers-reduced-motion:reduce){.signature-image::after{animation:none}}
.device.manual-reduced-motion .signature-image::after{animation:none}

/* Daily Cryptic */
.daily-cryptic-home-entry{
  width:calc(100% - 48px);min-height:62px;margin:16px 24px 4px;border:1px solid rgba(121,191,255,.2);
  border-radius:20px;padding:10px 13px;display:grid;grid-template-columns:40px 1fr 18px;align-items:center;gap:11px;
  color:white;text-align:left;box-shadow:inset 0 1px rgba(255,255,255,.06),0 12px 34px rgba(0,0,0,.22);
  transition:transform .28s var(--triptic-ease),border-color .28s,background .28s,box-shadow .28s;
}
.daily-cryptic-home-entry:active{transform:scale(.985)}
.daily-cryptic-home-entry.is-new{background:linear-gradient(135deg,rgba(41,91,145,.2),rgba(92,48,133,.16));box-shadow:inset 0 1px rgba(255,255,255,.07),0 0 28px rgba(94,164,255,.08),0 12px 34px rgba(0,0,0,.24)}
.daily-cryptic-home-entry.is-complete{border-color:rgba(255,255,255,.09);background:rgba(255,255,255,.035);opacity:.78}
.daily-cryptic-home-entry>span:nth-child(2){display:grid;gap:3px}
.daily-cryptic-home-entry small{color:#86caff;font-size:7px;letter-spacing:.14em}
.daily-cryptic-home-entry strong{font-size:12px;line-height:1.2}
.daily-cryptic-home-entry>i{color:#9f9aab;font-size:20px;font-style:normal;text-align:right}
.daily-cryptic-glyph{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(124,198,255,.23);border-radius:14px;background:radial-gradient(circle,rgba(105,182,255,.17),rgba(99,57,160,.08) 62%,transparent);box-shadow:inset 0 0 14px rgba(125,119,255,.11)}
.daily-cryptic-glyph .logo-mark{width:23px;filter:drop-shadow(0 0 7px rgba(105,192,255,.42))}
.nav-spark{position:relative}
.daily-unread-dot{position:absolute;top:-4px;right:-7px;width:5px;height:5px;border-radius:50%;background:#77ceff;box-shadow:0 0 0 2px rgba(5,5,11,.82),0 0 8px rgba(111,204,255,.9)}
.cryptic-home-screen,.cryptic-play-screen,.cryptic-result-screen,.membership-screen{padding:24px 24px 30px;overflow-y:auto}
.cryptic-home-screen>header,.cryptic-result-screen>header{display:grid;grid-template-columns:44px 1fr 44px;align-items:center}
.cryptic-home-screen>header .wordmark,.cryptic-result-screen>header .wordmark{width:96px;margin:auto}
.archive-glyph{color:#ccc4ef}
.archive-glyph svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.cryptic-hero{display:flex;flex-direction:column;align-items:center;margin-top:28px;text-align:center}
.cryptic-hero .signature-orb{width:178px}
.cryptic-hero .eyebrow{margin-top:16px;color:#9ecfff}
.cryptic-hero h1{margin:10px 0 8px;font-size:34px;line-height:1;letter-spacing:-.052em}
.cryptic-hero p{max-width:290px;margin:0;color:#a7a4af;font-size:11px;line-height:1.5}
.cryptic-rules{display:grid;grid-template-columns:repeat(3,1fr);margin:25px 0 20px;padding:14px;border-radius:20px}
.cryptic-rules div{display:grid;gap:3px;text-align:center;border-right:1px solid rgba(255,255,255,.08)}
.cryptic-rules div:last-child{border:0}
.cryptic-rules strong{font-size:18px;color:#e7e3ff}.cryptic-rules span{color:#888493;font-size:8px}
.cryptic-home-screen>.primary-button,.cryptic-home-screen>.quiet-button{width:100%}
.cryptic-rhythm{display:block;margin:12px auto 0;color:#a995d8;font-size:8px;letter-spacing:.02em;text-align:center}
.cryptic-privacy{display:block;margin:18px auto 0;max-width:270px;color:#6f6b79;font-size:8px;line-height:1.4;text-align:center}
.cryptic-play-screen>header{display:grid;grid-template-columns:44px 1fr auto;align-items:center}
.cryptic-play-screen>header>span{font-size:9px;letter-spacing:.16em;text-align:center}
.cryptic-play-screen>header>strong{color:#aaa3c4;font-size:9px}
.cryptic-progress{display:flex;gap:7px;margin:28px 0 18px}
.cryptic-progress i{height:3px;flex:1;border-radius:4px;background:rgba(255,255,255,.1)}
.cryptic-progress i.revealed{background:linear-gradient(90deg,#6fc6ff,#b47cff);box-shadow:0 0 8px rgba(127,179,255,.35)}
.cryptic-clues{display:grid;gap:10px}
.cryptic-clues article{padding:16px 18px;border-radius:20px;animation:cryptic-clue-in .42s var(--triptic-ease) both}
.cryptic-clues span{color:#91cfff;font-size:7px;letter-spacing:.14em}
.cryptic-clues p{margin:7px 0 0;color:#e8e6ed;font-size:13px;line-height:1.42}
.cryptic-guess-panel{margin-top:18px;padding:16px;border-radius:21px}
.cryptic-guess-panel label{display:block;margin-bottom:9px;color:#9a95a6;font-size:8px;letter-spacing:.12em;text-transform:uppercase}
.cryptic-guess-panel>div{display:grid;grid-template-columns:1fr 66px;gap:8px}
.cryptic-guess-panel input{min-width:0;height:46px;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:0 13px;color:white;background:rgba(0,0,0,.28);font-size:13px}
.cryptic-guess-panel button{border:1px solid rgba(176,133,255,.55);border-radius:14px;color:white;background:linear-gradient(145deg,#6e3dce,#342065)}
.cryptic-guess-panel small{display:block;margin-top:9px;color:#777381;font-size:8px;line-height:1.35}
.cryptic-history{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:12px}
.cryptic-history>span{color:#777381;font-size:8px;text-transform:uppercase;letter-spacing:.1em}
.cryptic-history i{padding:6px 9px;border-radius:10px;color:#a7a2af;background:rgba(255,255,255,.055);font-size:9px;font-style:normal}
@keyframes cryptic-clue-in{from{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.cryptic-result-art{position:relative;height:330px;margin-top:22px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:27px;background-size:cover;box-shadow:0 28px 64px rgba(0,0,0,.45);animation:cryptic-answer-emerge .82s var(--triptic-ease) both}
.cryptic-result-art>div{position:absolute;z-index:3;left:20px;right:20px;bottom:19px}
.cryptic-result-art small{color:#9ed5ff;font-size:8px;letter-spacing:.13em}
.cryptic-result-art h1{margin:7px 0 4px;font-size:31px;letter-spacing:-.05em}
.cryptic-result-art p{margin:0;color:#c4c0cc;font-size:10px}
.cryptic-result-copy{margin:22px 2px 16px}.cryptic-result-copy h2{margin:0 0 7px;font-size:24px;letter-spacing:-.04em}.cryptic-result-copy p{margin:0;color:#aaa6b1;font-size:10px;line-height:1.5}
.cryptic-score{display:grid;gap:7px;padding:17px;border-radius:20px;margin-bottom:18px}
.cryptic-score span{color:#9ed3ff;font-size:7px;letter-spacing:.13em}
.cryptic-score strong{font-size:21px;letter-spacing:.14em}
.cryptic-score small{color:#b4a9e2;font-size:9px}.cryptic-score em{color:#6f6b79;font-size:7px;font-style:normal;line-height:1.35}
.cryptic-archive-date{width:54px;height:54px;display:grid!important;place-items:center;border-radius:14px;background:linear-gradient(145deg,#24384c,#261638);color:#c8dcff!important;font-size:8px!important;letter-spacing:.08em}
.cryptic-archive-intro{margin:18px 2px 16px;padding:18px 4px 5px}
.cryptic-archive-intro span{color:#86caff;font-size:7px;letter-spacing:.14em}
.cryptic-archive-intro strong{display:block;margin:7px 0 5px;max-width:300px;font-size:19px;line-height:1.12;letter-spacing:-.035em}
.cryptic-archive-intro p{max-width:310px;margin:0;color:#8f8a99;font-size:9px;line-height:1.48}
.cryptic-calendar-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:5px 0 17px;padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(255,255,255,.025)}
.cryptic-calendar-strip button{min-width:0;border:0;border-radius:13px;padding:9px 4px 7px;color:#a4a0ae;background:transparent;text-align:center}
.cryptic-calendar-strip button:active{background:rgba(120,188,255,.08)}
.cryptic-calendar-strip b,.cryptic-calendar-strip span{display:block}.cryptic-calendar-strip b{font-size:14px;color:#efedf5}.cryptic-calendar-strip span{margin-top:2px;font-size:7px;letter-spacing:.1em}
.cryptic-calendar-strip i{width:5px;height:5px;display:block;margin:7px auto 0;border:1px solid rgba(255,255,255,.24);border-radius:50%}
.cryptic-calendar-strip i.solved{border:0;background:#76caff;box-shadow:0 0 7px rgba(105,196,255,.65)}
.cryptic-archive-list{padding-bottom:30px}
.archived-cryptic-result .cryptic-result-art{margin-top:20px}
.cryptic-setting-hero{display:grid;grid-template-columns:68px 1fr;align-items:center;gap:13px;margin:24px 0}
.cryptic-setting-hero .signature-orb{width:62px}.cryptic-setting-hero strong{font-size:14px}.cryptic-setting-hero p{margin:5px 0 0;color:#8f8a98;font-size:9px;line-height:1.4}
.cryptic-nudge-screen{padding:35px 22px 28px;overflow:hidden;background:radial-gradient(circle at 52% 47%,rgba(88,55,167,.2),transparent 34%),#05050a}
.notification-preview-time{margin:0 6px 20px;font-size:29px;font-weight:700;letter-spacing:-.04em}
.cryptic-notification-card{display:grid;grid-template-columns:46px 1fr 15px;align-items:center;gap:12px;padding:13px;border-radius:24px;background:linear-gradient(135deg,rgba(220,231,244,.18),rgba(126,116,156,.12));border-color:rgba(255,255,255,.16);box-shadow:0 18px 46px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.12);backdrop-filter:blur(24px) saturate(1.2)}
.cryptic-notification-card .daily-cryptic-glyph{width:44px;height:44px}
.cryptic-notification-card>div{display:grid;gap:3px}.cryptic-notification-card small{color:#9dcfff;font-size:7px;letter-spacing:.1em}.cryptic-notification-card strong{font-size:12px}.cryptic-notification-card p{margin:0;color:#aaa6b2;font-size:8px;line-height:1.3}.cryptic-notification-card>i{color:#bcb8c5;font-style:normal}
.cryptic-nudge-copy{display:flex;flex-direction:column;align-items:center;margin:68px auto 30px;text-align:center}.cryptic-nudge-copy .signature-orb{width:102px}.cryptic-nudge-copy .eyebrow{margin-top:17px;color:#8ed0ff}.cryptic-nudge-copy h1{margin:9px 0 8px;font-size:29px;line-height:1.02;letter-spacing:-.05em}.cryptic-nudge-copy p{max-width:290px;margin:0;color:#97929f;font-size:10px;line-height:1.48}
.cryptic-nudge-screen>.primary-button,.cryptic-nudge-screen>.quiet-button{width:100%}
@keyframes cryptic-answer-emerge{0%{opacity:0;transform:translateY(12px) scale(.965);filter:blur(7px) brightness(.58)}55%{opacity:1;transform:translateY(-2px) scale(1.006);filter:blur(0) brightness(1.08)}100%{transform:none;filter:none}}

/* Shared-object film opening */
.film-transition-source{transform-style:preserve-3d;backface-visibility:hidden}
.film-opening-fallback{animation:trip-film-source-open .22s var(--triptic-ease) both}
::view-transition-group(triptic-film-card){animation-duration:.68s;animation-timing-function:var(--triptic-ease)}
::view-transition-old(triptic-film-card){animation:trip-film-old .68s var(--triptic-ease) both;transform-origin:50% 50%;backface-visibility:hidden}
::view-transition-new(triptic-film-card){animation:trip-film-new .68s var(--triptic-ease) both;transform-origin:50% 42%;backface-visibility:hidden}
@keyframes trip-film-source-open{to{transform:translateY(-5px) perspective(900px) rotateY(-13deg) scale(1.025);filter:brightness(1.12) drop-shadow(0 0 18px rgba(121,172,255,.28))}}
@keyframes trip-film-old{0%{transform:perspective(1100px) rotateY(0) scale(1);filter:brightness(1)}52%{transform:perspective(1100px) rotateY(-16deg) scale(1.035);filter:brightness(1.18) drop-shadow(0 0 20px rgba(125,173,255,.28))}100%{transform:perspective(1100px) rotateY(-3deg) scale(1.01);filter:brightness(.9);opacity:.18}}
@keyframes trip-film-new{0%{transform:perspective(1100px) rotateY(11deg) scale(.94);filter:blur(4px) brightness(.78);opacity:.2}58%{transform:perspective(1100px) rotateY(-2deg) scale(1.012);filter:blur(0) brightness(1.08);opacity:1}100%{transform:none;filter:none;opacity:1}}

/* Signature recommendation ritual */
.ritual-screen{padding:22px 20px 28px;overflow:hidden;background:radial-gradient(circle at 50% 41%,rgba(85,53,196,.2),transparent 38%),#05050a}
.ritual-screen>header{height:45px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center}
.ritual-screen>header .wordmark{width:94px;margin:auto}
.ritual-query{max-width:320px;margin:11px auto 0;text-align:center}
.ritual-query span{color:#747080;font-size:7px;letter-spacing:.14em}
.ritual-query p{max-height:30px;margin:5px 0 0;overflow:hidden;color:#aaa6b2;font-size:9px;line-height:1.35}
.ritual-orb-wrap{position:absolute;left:50%;top:174px;z-index:5;transform:translateX(-50%);transition:top .6s var(--triptic-ease),transform .6s var(--triptic-ease)}
.ritual-screen.phase-settled .ritual-orb-wrap{top:104px;transform:translateX(-50%) scale(.72)}
.ritual-processing-shadows{position:absolute;left:50%;top:425px;width:286px;height:168px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,1fr);gap:10px;opacity:.28}
.ritual-processing-shadows i{border:1px solid rgba(154,126,255,.2);border-radius:15px;background:linear-gradient(160deg,rgba(123,79,210,.12),rgba(0,0,0,.4));filter:blur(.3px)}
.ritual-card-stage{position:absolute;left:18px;right:18px;top:328px;height:250px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:center;perspective:1000px}
.ritual-card{position:relative;width:100%;aspect-ratio:2/3;border:0;padding:0;background:none;color:white;transform-style:preserve-3d;transition:transform .42s var(--triptic-ease),filter .3s,opacity .3s}
.ritual-card.rank-1{transform:translateY(-11px) scale(1.04);z-index:4}
.ritual-card.active{transform:translateY(-14px) scale(1.055);filter:drop-shadow(0 0 16px rgba(197,121,255,.36))}
.ritual-card.rank-1.active{transform:translateY(-18px) scale(1.09)}
.ritual-card-back,.ritual-card-front{position:absolute;inset:0;display:block;overflow:hidden;border:1px solid rgba(187,158,255,.25);border-radius:16px;backface-visibility:hidden;box-shadow:0 20px 45px rgba(0,0,0,.42)}
.ritual-card-back{background:linear-gradient(155deg,#1f1a30,#07070c 72%)}
.ritual-card-back::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(134,101,255,.18),transparent 45%)}
.ritual-card-back b{position:absolute;z-index:2;left:10px;top:10px;color:#928ba6;font-size:8px;letter-spacing:.1em}
.ritual-card-back .brand-mark{position:absolute;z-index:2;left:50%;top:47%;width:33px;height:33px;transform:translate(-50%,-50%);opacity:.62}
.ritual-card-back small{position:absolute;z-index:2;left:0;right:0;bottom:13px;color:#898294;font-size:6px;letter-spacing:.12em}
.ritual-card.active .ritual-card-back{border-color:rgba(215,146,255,.62);box-shadow:inset 0 0 22px rgba(124,100,255,.1),0 0 18px rgba(205,125,255,.22),0 24px 48px rgba(0,0,0,.48);animation:ritual-card-ready 2s var(--triptic-ease) infinite}
.ritual-card-front{opacity:0;transform:rotateY(180deg);background-size:cover}
.ritual-card-front::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 44%,rgba(3,3,7,.92))}
.ritual-card-front strong,.ritual-card-front small{position:absolute;z-index:2;left:9px;right:8px;text-align:left}
.ritual-card-front strong{bottom:24px;font-size:8px;line-height:1.14}.ritual-card-front small{bottom:10px;color:#c0b9cf;font-size:6px}
.ritual-card-front em{position:absolute;z-index:2;left:9px;right:8px;bottom:2px;overflow:hidden;color:#b8d9ff;font-size:5px;font-style:normal;line-height:1.1;text-align:left;text-overflow:ellipsis;white-space:nowrap}
.ritual-card.revealed{transform:rotateY(180deg)}
.ritual-card.rank-1.revealed{transform:translateY(-11px) scale(1.04) rotateY(180deg)}
.ritual-card.revealed .ritual-card-front{opacity:1}
.ritual-card.opening{animation:ritual-open .78s var(--triptic-ease) both}
.ritual-energy-paths{position:absolute;z-index:2;left:50%;top:277px;width:260px;height:128px;transform:translateX(-50%);pointer-events:none}
.ritual-energy-paths i{position:absolute;left:50%;top:0;width:1px;height:120px;transform-origin:top;background:linear-gradient(#fff,#ba83ff 28%,rgba(109,182,255,.18),transparent);filter:drop-shadow(0 0 6px #9c8aff);opacity:0}
.phase-bursting .ritual-energy-paths i,.phase-distributing .ritual-energy-paths i{animation:ritual-path .66s var(--triptic-ease) both}
.ritual-energy-paths i:nth-child(1){transform:rotate(28deg)}.ritual-energy-paths i:nth-child(2){transform:rotate(0deg)}.ritual-energy-paths i:nth-child(3){transform:rotate(-28deg)}
.ritual-copy{position:absolute;left:24px;right:24px;bottom:58px;text-align:center}
.ritual-copy h1{margin:8px 0 6px;font-size:24px;letter-spacing:-.045em}.ritual-copy p{max-width:310px;margin:0 auto;color:#898592;font-size:9px;line-height:1.4}
.phase-settled .ritual-copy{top:187px;bottom:auto}.phase-settled .ritual-card-stage{top:330px}.phase-settled .ritual-actions{position:absolute;left:24px;right:24px;bottom:23px}
.phase-settled .ritual-actions .primary-button,.phase-settled .ritual-actions .quiet-button{width:100%}
.ritual-understood{position:absolute;z-index:6;left:24px;right:24px;top:266px;padding:9px 10px;border:1px solid rgba(148,196,255,.17);border-radius:15px;background:linear-gradient(135deg,rgba(91,151,221,.08),rgba(194,108,255,.07));box-shadow:inset 0 1px rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.18)}
.ritual-understood>span{display:block;color:#9ed5ff;font-size:6px;letter-spacing:.14em;text-align:center}
.ritual-understood>div{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin-top:6px}
.ritual-understood i{padding:4px 6px;border:1px solid rgba(176,209,255,.15);border-radius:8px;color:#ddd9e8;background:rgba(255,255,255,.04);font-size:6px;font-style:normal}
.protected-session-note{display:inline-block;margin-top:8px;color:#a9d9ff;font-size:8px;letter-spacing:.02em}
.ritual-error{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:34px}.ritual-error>.signature-orb{margin:90px auto 28px}.ritual-error h1{font-size:29px;line-height:1.03;letter-spacing:-.05em}.ritual-error p{max-width:280px;color:#aaa6b2;font-size:11px;line-height:1.45}.ritual-error .primary-button{width:100%;margin-top:30px}.ritual-error .quiet-button{width:100%}
@keyframes ritual-card-ready{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes ritual-open{0%{filter:brightness(1);transform:translateY(-14px) scale(1.055) rotateY(0)}46%{filter:brightness(1.65);transform:translateY(-18px) scale(1.1) rotateY(88deg)}100%{filter:brightness(1);transform:rotateY(180deg)}}
@keyframes ritual-path{0%{opacity:0;transform-origin:top}25%{opacity:.9}100%{opacity:0}}

/* Film identity and trailer */
.film-v5 .film-hero{height:470px;background-size:cover}
.film-v5 .film-title h1{max-width:330px;font-size:31px}
.trailer-preview{position:relative;height:188px;margin:4px 0 16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:22px;background-size:cover;box-shadow:0 18px 40px rgba(0,0,0,.36)}
.trailer-preview .trailer-motion{position:absolute;inset:-8%;background:inherit;background-size:cover;filter:saturate(.8) brightness(.8);transform:scale(1.08)}
.trailer-preview.playing .trailer-motion{animation:trailer-pan 14s ease-in-out infinite alternate}
.trailer-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,3,8,.08),rgba(3,3,8,.2) 45%,rgba(3,3,8,.92))}
.trailer-status{position:absolute;z-index:2;left:15px;right:15px;bottom:47px;display:grid;gap:3px}
.trailer-status b{color:#c4dfff;font-size:7px;letter-spacing:.12em}.trailer-status small{color:#aaa5b2;font-size:7px}
.trailer-controls{position:absolute;z-index:3;left:13px;right:13px;bottom:10px;display:flex;gap:7px}
.trailer-controls button{min-height:32px;padding:0 10px;border:1px solid rgba(255,255,255,.15);border-radius:11px;color:white;background:rgba(9,8,15,.62);backdrop-filter:blur(12px);font-size:8px}
.trailer-controls button:first-child{width:34px;padding:0}
.trailer-unavailable{margin:4px 0 16px;padding:18px;border-radius:20px}.trailer-unavailable strong{font-size:13px}.trailer-unavailable p{margin:6px 0 0;color:#908c98;font-size:9px;line-height:1.4}
.film-reason{margin:10px 0;color:#d7d3dd;font-size:11px;line-height:1.45}
.film-v5 .decision-actions .is-disabled{opacity:.42;cursor:default}
.film-v5 .why-panel{margin-top:14px;border-radius:23px}
.film-v5 .why-panel ul{display:grid;gap:9px;margin:14px 0 0;padding:0;list-style:none}
.film-v5 .why-panel li{display:grid;grid-template-columns:16px 1fr;gap:6px;align-items:start;color:#aaa6b2;font-size:9px;line-height:1.38}
.film-v5 .why-panel li i{display:grid;place-items:center;width:14px;height:14px;border:1px solid rgba(150,203,255,.3);border-radius:50%;color:#a9dcff;font-style:normal;font-size:7px;background:rgba(92,162,221,.08)}
.film-v5 .why-panel .reasoning-disclosure{width:100%;min-height:38px;margin-top:13px;padding:11px 0 0;border:0;border-top:1px solid rgba(255,255,255,.08);color:#cbbcff;background:none;text-align:left;font-size:9px}
.reasoning-disclosure i{float:right;color:#8ed5ff;font-style:normal;font-size:13px}
.reasoning-detail{margin-top:10px;padding:13px;border:1px solid rgba(139,204,255,.16);border-radius:14px;background:linear-gradient(145deg,rgba(86,145,211,.08),rgba(147,89,223,.055))}
.reasoning-detail span{color:#9ad8ff;font-size:7px;letter-spacing:.13em}
.reasoning-detail p{margin:7px 0;color:#c8c4ce;font-size:9px;line-height:1.45}
.reasoning-detail small{color:#817c8a;font-size:7px}
.watch-options button.provider-pending{opacity:.82;cursor:default}
.watch-options button.provider-pending span{color:#aaa5b2}
.provider-refresh-glyph{position:relative;width:24px;height:24px;margin:auto;border:1px solid rgba(176,209,255,.28);border-radius:50%}
.provider-refresh-glyph::before{content:"";position:absolute;inset:6px;border:1.4px solid #a9d5ff;border-left-color:transparent;border-radius:50%}
.provider-refresh-glyph::after{content:"";position:absolute;right:4px;top:5px;width:4px;height:4px;border-top:1.4px solid #a9d5ff;border-right:1.4px solid #a9d5ff;transform:rotate(18deg)}
.spoiler-safe.is-limited{margin-top:8px;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.025)}
@keyframes trailer-pan{from{transform:scale(1.08) translate3d(-1.5%,0,0)}to{transform:scale(1.14) translate3d(2%,-1%,0)}}

/* Membership */
.membership-screen{position:relative;text-align:center;background:radial-gradient(circle at 50% 16%,rgba(106,64,212,.22),transparent 33%),#05050a}
.membership-screen>.close-control{position:absolute;z-index:5;right:21px;top:24px}
.membership-glow{position:absolute;left:50%;top:22px;width:220px;height:220px;transform:translateX(-50%);background:radial-gradient(circle,rgba(109,196,255,.18),rgba(215,122,255,.15) 35%,transparent 70%);filter:blur(12px)}
.membership-screen>.brand-mark.large{position:relative;width:92px;height:92px;margin:37px auto 8px}
.membership-screen>.signature-orb{margin:58px auto 17px}
.membership-screen>h1{margin:10px 0 9px;font-size:32px;line-height:1.02;letter-spacing:-.052em}
.membership-screen>p{max-width:310px;margin:0 auto;color:#aaa6b1;font-size:11px;line-height:1.48}
.membership-screen>ul{display:grid;gap:10px;margin:24px 0 17px;padding:0;text-align:left;list-style:none}
.membership-screen>ul li{display:grid;grid-template-columns:24px 1fr;align-items:center;color:#e4e1e9;font-size:11px;line-height:1.35}
.membership-screen>ul i{width:20px;height:20px;display:grid;place-items:center;border:1px solid rgba(139,195,255,.35);border-radius:50%;color:#9bd6ff;font-style:normal;font-size:9px;background:rgba(74,134,198,.08)}
.store-state,.membership-status{display:grid;gap:5px;padding:16px;border-radius:19px;text-align:left}
.store-state span,.membership-status span{color:#9ed1ff;font-size:7px;letter-spacing:.13em}.store-state strong,.membership-status strong{font-size:12px}.store-state small,.membership-status small{color:#898592;font-size:8px;line-height:1.4}
.plan-structure{display:grid;gap:1px;margin-top:10px;padding:5px;border-radius:19px}
.plan-structure button{min-height:52px;display:grid;grid-template-columns:1fr auto;align-items:center;border:1px solid transparent;border-radius:14px;padding:0 12px;color:white;background:none;text-align:left}
.plan-structure button[aria-pressed="true"]{border-color:rgba(155,131,255,.4);background:rgba(112,74,213,.12)}
.plan-structure span{font-size:11px}.plan-structure strong{color:#8b8794;font-size:8px}
.membership-screen>.primary-button{width:100%;margin-top:14px}.membership-screen>.quiet-button{width:100%}
.membership-disabled{opacity:.48}
.membership-legal{display:block;margin:14px auto;max-width:310px;color:#706c78;font-size:7px;line-height:1.42}
.membership-fixture-tools{margin-top:10px;border-top:1px solid rgba(255,255,255,.07);padding-top:10px;color:#77727f;text-align:left}
.membership-fixture-tools summary{font-size:8px;cursor:pointer}.membership-fixture-tools div{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.membership-fixture-tools button{min-height:30px;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#b0aab7;background:rgba(255,255,255,.04);font-size:7px}
.member-active-screen{display:flex;flex-direction:column;align-items:center}.member-active-screen .membership-status{width:100%;margin:25px 0 12px}.member-active-screen>.primary-button{margin-top:10px}

@media (max-height:760px){
  .ritual-orb-wrap{top:145px}.ritual-card-stage{top:295px;height:225px}.ritual-copy{bottom:42px}
  .taste-sprint-screen .taste-deck{height:285px}.taste-sprint-screen .onboarding-card{width:198px;height:282px}
  .interest-grid button{height:100px}
}

/* Carousel choreography and face integrity. The user should perceive one
   continuous stage, never a DOM rerender or a mirrored reverse face. */
.ritual-card.revealed .ritual-card-back{opacity:0!important;visibility:hidden!important}
.ritual-card.revealed .ritual-card-front{opacity:1!important;visibility:visible!important;-webkit-backface-visibility:hidden!important;backface-visibility:hidden!important}
.ritual-screen.revealed-1 .ritual-card.rank-3{
  left:0!important;right:auto!important;transform:rotateY(180deg)!important;
  animation:ritual-centre-to-left .88s cubic-bezier(.16,1,.3,1) both!important;
}
.ritual-screen.revealed-1 .ritual-card.rank-2{
  left:50%!important;right:auto!important;transform:translateX(-50%) translateY(-18px) scale(1.075)!important;
  animation:ritual-left-to-centre .88s cubic-bezier(.16,1,.3,1) both!important;
}
.ritual-screen.revealed-2 .ritual-card.rank-3{
  left:calc(100% - ((100% - 16px)/3))!important;right:auto!important;transform:rotateY(180deg)!important;
  animation:ritual-left-to-right-depth .96s cubic-bezier(.16,1,.3,1) both!important;
}
.ritual-screen.revealed-2 .ritual-card.rank-2{
  left:0!important;right:auto!important;transform:rotateY(180deg)!important;
  animation:ritual-centre-to-left .88s cubic-bezier(.16,1,.3,1) both!important;
}
.ritual-screen.revealed-2 .ritual-card.rank-1{
  left:50%!important;right:auto!important;transform:translateX(-50%) translateY(-22px) scale(1.11)!important;
  animation:ritual-right-to-centre .88s cubic-bezier(.16,1,.3,1) both!important;
}
@keyframes ritual-left-to-right-depth{
  0%{left:0;transform:rotateY(180deg) scale(1);opacity:1;filter:brightness(1)}
  44%{left:35%;transform:rotateY(180deg) scale(.88) translateZ(-80px);opacity:.28;filter:brightness(.58)}
  100%{left:calc(100% - ((100% - 16px)/3));transform:rotateY(180deg) scale(1);opacity:1;filter:none}
}
.ritual-card-stage{top:362px!important}.ritual-energy-paths{top:268px!important;height:124px!important}.ritual-energy-paths i{height:124px!important}
.phase-settled .ritual-card-stage{top:326px!important}
@media (max-height:760px){.ritual-card-stage{top:308px!important}.ritual-energy-paths{top:232px!important}.phase-settled .ritual-card-stage{top:278px!important}}
@media (prefers-reduced-motion:reduce){.ritual-screen.revealed-1 .ritual-card,.ritual-screen.revealed-2 .ritual-card{animation:none!important}}

/* Stable resolved faces — this block must remain last. */
.ritual-card.revealed .ritual-card-front{transform:none!important;opacity:1!important;visibility:visible!important}
.ritual-screen.revealed-1 .ritual-card.rank-3{left:0!important;right:auto!important;transform:none!important;animation:ritual-centre-to-left-face .88s cubic-bezier(.16,1,.3,1) both!important}
.ritual-screen.revealed-2 .ritual-card.rank-3{left:calc(100% - ((100% - 16px)/3))!important;right:auto!important;transform:none!important;animation:ritual-left-to-right-face .96s cubic-bezier(.16,1,.3,1) both!important}
.ritual-screen.revealed-2 .ritual-card.rank-2{left:0!important;right:auto!important;transform:none!important;animation:ritual-centre-to-left-face .88s cubic-bezier(.16,1,.3,1) both!important}
.ritual-screen.phase-settled .ritual-card.rank-2{left:0!important;right:auto!important;transform:none!important;animation:none!important}
.ritual-screen.phase-settled .ritual-card.rank-3{left:calc(100% - ((100% - 16px)/3))!important;right:auto!important;transform:none!important;animation:none!important}
.ritual-screen.phase-settled .ritual-card.rank-1{left:50%!important;right:auto!important;transform:translateX(-50%) translateY(-14px) scale(1.065)!important;animation:none!important}

/* Completion belongs to the films. Once the set resolves, the intelligence
   recedes instead of competing with the title and recommendation hierarchy. */
.ritual-screen.phase-settled .ritual-orb-wrap,.ritual-screen.phase-settled .ritual-floor{display:none!important}
.ritual-screen.phase-settled .ritual-copy{top:165px!important}
.ritual-screen.phase-settled .ritual-understood{top:232px!important}
.ritual-screen.phase-settled .ritual-card-stage{top:310px!important}
@media (max-height:760px){.ritual-screen.phase-settled .ritual-copy{top:142px!important}.ritual-screen.phase-settled .ritual-understood{top:201px!important}.ritual-screen.phase-settled .ritual-card-stage{top:267px!important}}
.ritual-screen.phase-settled .ritual-copy p{display:none!important}
.ritual-screen.phase-settled .ritual-understood{top:242px!important}
.ritual-screen.phase-settled .ritual-card-stage{top:318px!important}
@media (max-height:760px){.ritual-screen.phase-settled .ritual-understood{top:205px!important}.ritual-screen.phase-settled .ritual-card-stage{top:274px!important}}
.discover-v5 .query-submit .signature-ring{border-color:transparent!important;filter:none!important}
.discover-v5 .query-submit .signature-halo{inset:15%;filter:blur(9px)}
.phase-settled .ritual-orb-wrap{top:79px!important;transform:translateX(-50%) scale(.22)!important}
.phase-settled .ritual-copy{top:201px!important}
.phase-settled .ritual-understood{top:264px!important}
.phase-settled .ritual-card-stage{top:336px!important}
@media (max-height:760px){.phase-settled .ritual-orb-wrap{top:66px!important;transform:translateX(-50%) scale(.2)!important}.phase-settled .ritual-copy{top:166px!important}.phase-settled .ritual-understood{top:224px!important}.phase-settled .ritual-card-stage{top:290px!important}}

/* Resolve the completed 3D turn to a stable front-facing texture before the
   carousel handoff. This avoids mirrored or culled faces on mobile GPUs. */
.ritual-card.revealed .ritual-card-front{transform:none!important}
.ritual-screen.revealed-1 .ritual-card.rank-3{transform:none!important;animation:ritual-centre-to-left-face .88s cubic-bezier(.16,1,.3,1) both!important}
.ritual-screen.revealed-2 .ritual-card.rank-3{transform:none!important;animation:ritual-left-to-right-face .96s cubic-bezier(.16,1,.3,1) both!important}
.ritual-screen.revealed-2 .ritual-card.rank-2{transform:none!important;animation:ritual-centre-to-left-face .88s cubic-bezier(.16,1,.3,1) both!important}
.ritual-screen.phase-settled .ritual-card.rank-2{left:0!important;right:auto!important;transform:none!important;animation:none!important}
.ritual-screen.phase-settled .ritual-card.rank-3{left:calc(100% - ((100% - 16px)/3))!important;right:auto!important;transform:none!important;animation:none!important}
.ritual-screen.phase-settled .ritual-card.rank-1{left:50%!important;right:auto!important;transform:translateX(-50%) translateY(-14px) scale(1.065)!important;animation:none!important}
@keyframes ritual-centre-to-left-face{from{left:50%;transform:translateX(-50%) translateY(-12px) scale(1.04);filter:brightness(1.16)}to{left:0;transform:none;filter:none}}
@keyframes ritual-left-to-right-face{0%{left:0;transform:scale(1);opacity:1;filter:brightness(1)}44%{left:35%;transform:scale(.88) translateZ(-80px);opacity:.28;filter:brightness(.58)}100%{left:calc(100% - ((100% - 16px)/3));transform:none;opacity:1;filter:none}}

@media (prefers-reduced-motion:reduce){
  .signature-orb *,.ritual-card,.trailer-motion,.cryptic-clues article,.cryptic-result-art{animation:none!important;transition:opacity .2s ease!important}
  .signature-image{transform:none!important}
  .ritual-energy-paths{display:none}
  .ritual-card.opening{opacity:.65}
}

/* Gate C continuity correction: the intelligence exists as light in space,
   controls remain optically secondary, and every recommendation visibly
   travels into its resting position instead of teleporting between renders. */
.signature-image{
  background-size:154% 154%;
  -webkit-mask-image:radial-gradient(circle,black 0 43%,rgba(0,0,0,.92) 50%,rgba(0,0,0,.38) 58%,transparent 66%);
  mask-image:radial-gradient(circle,black 0 43%,rgba(0,0,0,.92) 50%,rgba(0,0,0,.38) 58%,transparent 66%);
}
.query-submit,.query-submit:focus,.query-submit:focus-visible{outline:0!important;box-shadow:none!important}
.query-submit:focus-visible .signature-core{filter:blur(1px) brightness(1.2) drop-shadow(0 0 14px #bfeaff)}
.voice-control{width:30px!important;height:30px!important;border-color:rgba(151,214,255,.16)!important;background:rgba(78,117,174,.055)!important}
.voice-control svg{width:13px!important;height:13px!important}
.discover-v5 .search-glass.is-editing .voice-control{right:15px;bottom:14px;width:32px!important;height:32px!important}
.discover-v5 .search-glass.is-editing textarea{right:58px!important;width:calc(100% - 75px)!important}

.ritual-orb-wrap{top:128px!important}
.ritual-orb-wrap .signature-orb{width:190px!important}
.phase-charging .ritual-orb-wrap .signature-orb{width:206px!important}
.phase-compressed .ritual-orb-wrap .signature-orb{width:184px!important}
.ritual-floor{top:326px!important}
.ritual-processing-shadows{top:355px!important}
.ritual-energy-paths{top:258px!important;height:116px!important}
.ritual-energy-paths i{height:116px!important}
.ritual-card-stage{top:348px!important;perspective:1250px!important}
.ritual-card-stage .ritual-card{transform-style:preserve-3d;transform-origin:50% 68%}
.ritual-card-back,.ritual-card-front{box-shadow:inset 0 1px rgba(255,255,255,.12),0 30px 70px rgba(0,0,0,.64),0 0 0 1px rgba(139,181,255,.035)!important}

/* First resolved card glides from the centre to the right while the next card
   takes centre. The second resolved card returns left as the hero takes over. */
.ritual-screen.revealed-1 .ritual-card.rank-3{
  left:calc(100% - ((100% - 16px)/3));right:auto;
  transform:rotateY(180deg);
  animation:ritual-centre-to-right .88s cubic-bezier(.16,1,.3,1) both;
}
.ritual-screen.revealed-1 .ritual-card.rank-2{
  left:50%;right:auto;transform:translateX(-50%) translateY(-18px) scale(1.075);
  animation:ritual-left-to-centre .88s cubic-bezier(.16,1,.3,1) both;
}
.ritual-screen.revealed-2 .ritual-card.rank-2{
  left:0;right:auto;transform:rotateY(180deg);
  animation:ritual-centre-to-left .88s cubic-bezier(.16,1,.3,1) both;
}
.ritual-screen.revealed-2 .ritual-card.rank-1{
  left:50%;right:auto;transform:translateX(-50%) translateY(-22px) scale(1.11);
  animation:ritual-right-to-centre .88s cubic-bezier(.16,1,.3,1) both;
}
@keyframes ritual-centre-to-right{
  from{left:50%;transform:translateX(-50%) translateY(-12px) scale(1.04) rotateY(180deg);filter:brightness(1.16)}
  to{left:calc(100% - ((100% - 16px)/3));transform:rotateY(180deg);filter:none}
}
@keyframes ritual-left-to-centre{
  from{left:0;transform:translateY(0) scale(1);filter:brightness(.82)}
  to{left:50%;transform:translateX(-50%) translateY(-18px) scale(1.075);filter:brightness(1.06)}
}
@keyframes ritual-centre-to-left{
  from{left:50%;transform:translateX(-50%) translateY(-12px) scale(1.04) rotateY(180deg);filter:brightness(1.16)}
  to{left:0;transform:rotateY(180deg);filter:none}
}
@keyframes ritual-right-to-centre{
  from{left:calc(100% - ((100% - 16px)/3));transform:translateY(0) scale(1);filter:brightness(.82)}
  to{left:50%;transform:translateX(-50%) translateY(-22px) scale(1.11);filter:brightness(1.08)}
}

.continue-triptic{
  position:relative;width:calc(100% - 40px);min-height:92px;margin:0 20px 14px;padding:15px 50px 14px 16px;
  overflow:hidden;border:1px solid rgba(218,151,255,.3);border-radius:22px;color:#fff;text-align:left;
  background:radial-gradient(circle at 86% 50%,rgba(106,191,255,.17),transparent 24%),linear-gradient(135deg,rgba(58,29,80,.78),rgba(14,11,24,.88));
  box-shadow:inset 0 1px rgba(255,255,255,.11),0 16px 38px rgba(0,0,0,.34),0 0 30px rgba(207,102,255,.09)
}
.continue-triptic::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.09) 49%,transparent 63%);transform:translateX(-110%);animation:resume-light-pass 4.6s ease-in-out infinite}
.continue-triptic span{display:block;color:#cba0ff;font-size:7px;font-weight:680;letter-spacing:.16em}
.continue-triptic strong{display:block;margin-top:7px;font-size:13px;letter-spacing:-.018em}
.continue-triptic em{position:absolute;right:18px;top:22px;display:flex;gap:4px}
.continue-triptic em i{width:5px;height:5px;border-radius:50%;background:#e4a2ff;box-shadow:0 0 8px rgba(226,134,255,.8)}
.continue-triptic b{display:block;margin-top:8px;color:#a5d8ff;font-size:8px;font-weight:560}
.continue-triptic + .friday-ribbon{display:none!important}
@keyframes resume-light-pass{0%,62%{transform:translateX(-110%);opacity:0}72%{opacity:1}100%{transform:translateX(110%);opacity:0}}

@media (max-height:760px){
  .ritual-orb-wrap{top:111px!important}.ritual-orb-wrap .signature-orb{width:168px!important}.phase-charging .ritual-orb-wrap .signature-orb{width:182px!important}
  .ritual-floor{top:285px!important}.ritual-processing-shadows{top:305px!important}.ritual-energy-paths{top:224px!important}.ritual-card-stage{top:294px!important}
}

@media (prefers-reduced-motion:reduce){
  .ritual-screen.revealed-1 .ritual-card.rank-3,.ritual-screen.revealed-1 .ritual-card.rank-2,.ritual-screen.revealed-2 .ritual-card.rank-2,.ritual-screen.revealed-2 .ritual-card.rank-1,.continue-triptic::after{animation:none!important}
}

@media (prefers-reduced-transparency:reduce){
  .daily-cryptic-tile,.cryptic-clues article,.cryptic-guess-panel,.store-state,.plan-structure,.membership-status{background:#121119!important;backdrop-filter:none!important}
}

/* Luna quality pass: controls, safe areas and the sealed recommendation ritual. */
.discover-v5{padding-bottom:156px!important}
.discover-v5 .inspiration{padding-bottom:34px}
.discover-v5 .prompt-grid{padding-bottom:24px}
.query-footer{display:flex!important;align-items:center;justify-content:flex-end;gap:8px}
.query-footer>button{flex:0 0 auto}
.query-submit{order:2}
.voice-control{position:relative;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(151,214,255,.22);border-radius:50%;color:#bfe5ff;background:rgba(91,151,221,.08);transition:transform .28s var(--triptic-ease),border-color .28s,background .28s,box-shadow .28s}
.voice-control svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.voice-control i{position:absolute;inset:5px;border:1px solid rgba(116,202,255,.14);border-radius:50%;opacity:0}
.voice-control.is-listening{border-color:rgba(208,151,255,.72);background:linear-gradient(145deg,rgba(82,183,255,.2),rgba(195,111,255,.2));box-shadow:0 0 0 5px rgba(110,163,255,.07),0 0 24px rgba(203,128,255,.34);transform:scale(1.05)}
.voice-control.is-listening i{animation:voice-pulse 1.25s ease-out infinite}
.voice-error{margin:7px 18px 0;color:#ffb8cd;font-size:8px;line-height:1.35;text-align:left}
@keyframes voice-pulse{0%{transform:scale(.72);opacity:.7}100%{transform:scale(1.45);opacity:0}}
.discover-v5 .search-glass.has-query{border-color:rgba(183,210,255,.28);box-shadow:inset 0 1px rgba(255,255,255,.13),0 25px 54px rgba(0,0,0,.42),0 0 31px rgba(91,143,255,.16),0 0 52px rgba(214,116,255,.08)}
.discover-v5 .search-glass.has-query::after{opacity:.9;background:linear-gradient(90deg,rgba(95,177,255,.34),rgba(219,125,255,.4),rgba(95,177,255,.2));animation:query-electric-sheen 3.4s linear infinite}
@keyframes query-electric-sheen{0%{transform:translateX(-105%);opacity:.18}42%{opacity:.8}100%{transform:translateX(105%);opacity:.18}}

.library-screen{padding-bottom:142px!important}
.library-compact-bar{position:absolute;z-index:8;left:18px;right:18px;top:66px;display:grid;gap:2px;padding:9px 14px;border-radius:16px;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .25s var(--triptic-ease),transform .25s var(--triptic-ease)}
.library-compact-bar span{color:#9ed8ff;font-size:7px;letter-spacing:.15em}.library-compact-bar strong{font-size:11px;font-weight:600}
.library-screen.is-scrolled .library-compact-bar{opacity:1;transform:none}
.library-screen.is-scrolled .destination-heading{opacity:calc(1 - var(--library-compact,0));transform:translateY(calc(var(--library-compact,0) * -12px));transition:opacity .18s,transform .18s}
.library-empty{min-height:214px!important;margin-top:24px!important;display:grid!important;align-content:center!important;justify-items:center!important;text-align:center}
.library-empty button{min-width:182px;white-space:nowrap}

.library-groups{display:grid;gap:18px;margin-top:20px;padding-bottom:22px}
.library-group{display:grid;gap:7px}
.library-group>h2{margin:0 3px;color:#777482;font-size:7px;font-weight:650;letter-spacing:.16em}
.library-group .library-sections{overflow:hidden;border:1px solid rgba(255,255,255,.075);border-radius:21px;padding:0 12px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.021));box-shadow:inset 0 1px rgba(255,255,255,.065),0 15px 35px rgba(0,0,0,.17)}
.library-group .library-sections>button{min-height:66px}
.library-group .library-sections>button:last-child{border-bottom:0}
.library-group .library-art{width:46px;height:46px;border-radius:13px}
.library-symbol{position:relative;width:23px;height:23px;display:block;color:#b9ddff}
.library-art.previous-art .library-symbol::before,.library-art.previous-art .library-symbol::after,.library-art.previous-art .library-symbol i{content:"";position:absolute;width:11px;height:17px;border:1.25px solid currentColor;border-radius:3px;background:rgba(10,10,17,.72)}
.library-art.previous-art .library-symbol::before{left:0;top:4px}.library-art.previous-art .library-symbol i{left:6px;top:2px}.library-art.previous-art .library-symbol::after{left:12px;top:0}
.library-art.search-art .library-symbol::before{content:"";position:absolute;left:4px;top:1px;width:14px;height:20px;border:1.4px solid currentColor;border-radius:3px 3px 5px 5px}
.library-art.search-art .library-symbol::after{content:"";position:absolute;left:7px;bottom:1px;width:8px;height:8px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;background:#211933;transform:rotate(45deg)}
.library-art.recent-art .library-symbol{border:1.35px solid currentColor;border-radius:50%}
.library-art.recent-art .library-symbol::before{content:"";position:absolute;left:10px;top:4px;width:1.3px;height:7px;background:currentColor;transform-origin:bottom}
.library-art.recent-art .library-symbol::after{content:"";position:absolute;left:10px;top:10px;width:6px;height:1.3px;background:currentColor;transform:rotate(27deg);transform-origin:left}
.library-art.watched-art .library-symbol{border:1.35px solid currentColor;border-radius:50%}
.library-art.watched-art .library-symbol::after{content:"";position:absolute;left:6px;top:6px;width:9px;height:5px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg)}
.library-art.viewed-art .library-symbol::before{content:"";position:absolute;inset:5px 1px;border:1.35px solid currentColor;border-radius:70% 20% 70% 20%;transform:rotate(45deg)}
.library-art.viewed-art .library-symbol::after{content:"";position:absolute;left:9px;top:9px;width:5px;height:5px;border-radius:50%;background:currentColor}
.library-art.friday-art .library-symbol::before{content:"3";position:absolute;inset:0;display:grid;place-items:center;border:1.35px solid currentColor;border-radius:7px;font-size:12px;font-weight:650}
.library-art.friday-art .library-symbol::after{content:"";position:absolute;right:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:#df9cff;box-shadow:0 0 8px #df9cff}
.library-art.inbox-art .library-symbol::before{content:"";position:absolute;left:1px;top:5px;width:20px;height:14px;border:1.35px solid currentColor;border-radius:4px}
.library-art.inbox-art .library-symbol::after{content:"";position:absolute;left:4px;top:5px;width:13px;height:13px;border-left:1.35px solid currentColor;border-bottom:1.35px solid currentColor;transform:rotate(-45deg)}
.library-group .library-art[class*="-art"]{background:linear-gradient(145deg,rgba(75,119,177,.18),rgba(91,49,139,.19));border-color:rgba(142,193,239,.15)}

.taste-evolution{position:relative;width:calc(100% - 48px);margin:0 24px 13px;padding:14px 38px 14px 15px;display:grid;gap:3px;border-radius:20px;text-align:left;background:linear-gradient(135deg,rgba(52,111,158,.14),rgba(114,63,158,.15))}
.taste-evolution>span{color:#87ceff;font-size:7px;font-weight:650;letter-spacing:.16em}
.taste-evolution>strong{font-size:13px;letter-spacing:-.015em}
.taste-evolution>p{margin:1px 0 0;color:#aaa6b4;font-size:9px;line-height:1.38}
.taste-evolution>i{position:absolute;right:16px;top:50%;color:#bcb3d2;font-size:18px;font-style:normal;transform:translateY(-50%)}
.dna-stages .complete{opacity:.72}

/* Keep the active mystery card physically in the centre before it opens. */
.ritual-card-stage{display:block!important}
.ritual-card-stage .ritual-card{position:absolute;width:calc((100% - 16px)/3);top:18px}
.ritual-card-stage .ritual-card.rank-3{left:0}
.ritual-card-stage .ritual-card.rank-2{left:50%;transform:translateX(-50%) translateY(0)}
.ritual-card-stage .ritual-card.rank-1{right:0}
.ritual-card-stage .ritual-card.active{left:50%;right:auto;transform:translateX(-50%) translateY(-18px) scale(1.075);z-index:8}
.ritual-card-stage .ritual-card.rank-1.active{transform:translateX(-50%) translateY(-22px) scale(1.11)}
.ritual-card-stage .ritual-card.revealed.rank-3{left:0;right:auto;transform:rotateY(180deg)}
.ritual-card-stage .ritual-card.revealed.rank-2{left:50%;right:auto;transform:translateX(-50%) rotateY(180deg)}
.ritual-card-stage .ritual-card.revealed.rank-1{left:auto;right:0;transform:translateY(-11px) scale(1.04) rotateY(180deg)}
.ritual-card.opening{z-index:12}
.ritual-card-stage .ritual-card.active.opening{animation:ritual-open-centred .78s var(--triptic-ease) both}
.ritual-card-stage .ritual-card.rank-1.active.opening{animation-duration:.92s}
@keyframes ritual-open-centred{
  0%{filter:brightness(1);transform:translateX(-50%) translateY(-18px) scale(1.075) rotateY(0)}
  46%{filter:brightness(1.65);transform:translateX(-50%) translateY(-22px) scale(1.12) rotateY(88deg)}
  100%{filter:brightness(1);transform:translateX(-50%) translateY(-14px) scale(1.065) rotateY(180deg)}
}
.ritual-card.opening .ritual-card-back>* ,.ritual-card.opening .ritual-card-front>*{opacity:0}
.ritual-card.opening .ritual-card-front{opacity:1}
.ritual-card.opening .ritual-card-front::after{opacity:1}
.ritual-card-back,.ritual-card-front{-webkit-backface-visibility:hidden}

/* A restrained, unmistakable signal that the first card is ready. */
.phase-revealing .ritual-card.active .ritual-card-back::before{content:"";position:absolute;z-index:1;inset:9px;border:1px solid rgba(173,222,255,.24);border-radius:12px;animation:sealed-ring 1.6s ease-out infinite}
@keyframes sealed-ring{0%{opacity:.15;transform:scale(.92)}55%{opacity:.72}100%{opacity:0;transform:scale(1.08)}}

/* Reveal choreography: the next card owns centre stage; the completed TRIPTIC
   settles with the strongest recommendation physically in the centre. */
.ritual-screen.revealed-0 .ritual-card.rank-2{left:0;right:auto;transform:translateY(0)}
.ritual-screen.revealed-0 .ritual-card.rank-1{left:auto;right:0}
.ritual-screen.revealed-1 .ritual-card.rank-3{left:0;right:auto}
.ritual-screen.revealed-1 .ritual-card.rank-1{left:auto;right:0}
.ritual-screen.revealed-2 .ritual-card.rank-2,
.ritual-screen.phase-settled .ritual-card.rank-2{left:0;right:auto;transform:rotateY(180deg)}
.ritual-screen.revealed-2 .ritual-card.rank-3,
.ritual-screen.phase-settled .ritual-card.rank-3{left:auto;right:0;transform:rotateY(180deg)}
.ritual-screen.revealed-2 .ritual-card.rank-1,
.ritual-screen.phase-settled .ritual-card.rank-1{left:50%;right:auto;transform:translateX(-50%) translateY(-14px) scale(1.065) rotateY(180deg);z-index:6}
.ritual-screen.revealed-2 .ritual-card.rank-1.active{left:50%;right:auto;transform:translateX(-50%) translateY(-22px) scale(1.11);z-index:8}

/* Optical grid: all navigation icons share one 18px box and baseline. */
.glass-nav button>span[class^="nav-"]{width:18px!important;height:18px!important;display:grid;place-items:center;flex:0 0 18px;transform:none!important}
.glass-nav button{gap:6px!important}

/* Profile identity uses the same living orb language as Discover rather than
   a placeholder avatar when the user is still a guest. */
.profile-orb.is-beginning{overflow:hidden;background:rgba(13,11,22,.62);box-shadow:0 0 30px rgba(100,157,255,.12),0 0 35px rgba(201,118,255,.12)}
.profile-orb.is-beginning .signature-orb{width:62px!important;height:62px!important;transform:scale(.72);transform-origin:center}
.profile-orb.is-identified{color:#fff;border-color:rgba(157,208,255,.28);box-shadow:0 0 30px rgba(105,157,255,.14),inset 0 1px rgba(255,255,255,.15)}
.destination-screen,.sublist-screen,.settings-screen,.film-screen,.share-screen{padding-bottom:142px!important}
.film-screen,.share-screen{overflow-y:auto}

.why-not-panel{margin:14px 20px 0;border-color:rgba(120,190,255,.14);border-radius:18px;overflow:hidden;background:linear-gradient(145deg,rgba(30,38,54,.72),rgba(15,13,23,.82))}
.why-not-panel>button{width:100%;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:0;color:#f6f5fb;background:transparent;text-align:left}
.why-not-panel>button span{display:grid;gap:4px}.why-not-panel>button small{color:#8fcfff;font-size:8px;letter-spacing:.1em}.why-not-panel>button strong{font-size:12px;font-weight:620}.why-not-panel>button em{font-style:italic;font-weight:620}.why-not-panel>button>i{color:#b8dfff;font-size:15px;font-style:normal}
.why-not-panel>div{padding:0 14px 14px}.why-not-panel>div p{margin:0 0 6px;color:#d8d5e1;font-size:11px;line-height:1.45}.why-not-panel>div small{color:#8e8a98;font-size:9px;line-height:1.35}

/* Film detail must remain comfortably readable and tappable at phone scale. */
.film-v5 .trailer-status{bottom:64px}.film-v5 .trailer-status b,.film-v5 .trailer-status small{font-size:9px}
.film-v5 .trailer-controls{gap:8px}.film-v5 .trailer-controls button{min-height:44px;padding:0 13px;border-radius:14px;font-size:11px}.film-v5 .trailer-controls button:first-child{width:44px}
.film-v5 .decision-actions span{font-size:11px!important}
.film-v5 .why-panel li{grid-template-columns:18px 1fr;gap:8px;font-size:11px;line-height:1.45}.film-v5 .why-panel li i{width:16px;height:16px;font-size:9px}.film-v5 .why-panel .reasoning-disclosure{min-height:44px;font-size:11px}
.why-not-panel>button small{font-size:9px}.why-not-panel>button strong{font-size:13px}.why-not-panel>div small{font-size:10px}
.film-v5 .watch-options>div small,.film-v5 .watch-options button span,.film-v5 .watch-options button strong,.film-v5 .spoiler-safe>span,.film-v5 .spoiler-safe button{font-size:11px}

/* -------------------------------------------------------------------------
   GATE C — THE SIGNATURE RITUAL
   One continuous physical world: listen, gather, compress, release, reveal.
   ------------------------------------------------------------------------- */

/* The orb is constructed from independent layers. The reference artwork is
   texture, never the animation itself. */
.signature-orb{will-change:transform,filter;transform:translateZ(0)}
.signature-core{position:absolute;z-index:4;inset:29%;border-radius:50%;background:radial-gradient(circle at 42% 38%,#fff 0 3%,#d8f4ff 7%,rgba(119,207,255,.9) 18%,rgba(116,82,255,.72) 42%,rgba(223,104,255,.34) 62%,transparent 74%);mix-blend-mode:screen;filter:blur(2px) drop-shadow(0 0 11px rgba(150,219,255,.84));animation:signature-core-live 3.8s cubic-bezier(.45,0,.2,1) infinite}
.signature-corona{position:absolute;z-index:1;inset:-3%;border-radius:50%;filter:blur(7px);opacity:.72;animation:signature-corona-turn 13s linear infinite}
.signature-corona i{position:absolute;inset:17%;border:1px solid transparent;border-top-color:rgba(119,207,255,.48);border-right-color:rgba(222,113,255,.38);border-radius:47% 53% 58% 42%;filter:drop-shadow(0 0 6px rgba(161,112,255,.74))}
.signature-corona i:nth-child(2){inset:10%;border-radius:58% 42% 46% 54%;transform:rotate(117deg);opacity:.62}
.signature-corona i:nth-child(3){inset:23%;border-radius:42% 58% 54% 46%;transform:rotate(239deg);opacity:.78}
.signature-particles{position:absolute;z-index:0;inset:-22%;border-radius:50%;animation:signature-particle-orbit 18s linear infinite;pointer-events:none}
.signature-particles i{--angle:0deg;--distance:76px;position:absolute;left:50%;top:50%;width:2px;height:2px;border-radius:50%;background:#dff7ff;box-shadow:0 0 7px #7bcfff,0 0 12px rgba(220,119,255,.75);transform:rotate(var(--angle)) translateX(var(--distance));animation:signature-speck 3.7s ease-in-out infinite}
.signature-particles i:nth-child(1){--angle:8deg;--distance:82px}.signature-particles i:nth-child(2){--angle:37deg;--distance:91px;animation-delay:-1.1s}.signature-particles i:nth-child(3){--angle:69deg;--distance:75px;animation-delay:-2.4s}.signature-particles i:nth-child(4){--angle:101deg;--distance:96px;animation-delay:-.7s}.signature-particles i:nth-child(5){--angle:133deg;--distance:84px;animation-delay:-3.1s}.signature-particles i:nth-child(6){--angle:164deg;--distance:93px;animation-delay:-1.7s}.signature-particles i:nth-child(7){--angle:196deg;--distance:77px;animation-delay:-.3s}.signature-particles i:nth-child(8){--angle:226deg;--distance:98px;animation-delay:-2.8s}.signature-particles i:nth-child(9){--angle:257deg;--distance:85px;animation-delay:-1.4s}.signature-particles i:nth-child(10){--angle:289deg;--distance:94px;animation-delay:-3.4s}.signature-particles i:nth-child(11){--angle:320deg;--distance:79px;animation-delay:-2s}.signature-particles i:nth-child(12){--angle:346deg;--distance:101px;animation-delay:-.9s}
.signature-ring.ring-c{inset:9%;border-color:rgba(135,210,255,.1);border-style:dashed;animation-duration:11s;animation-direction:reverse}
.signature-dormant{filter:saturate(.58) brightness(.7);opacity:.76}
.signature-dormant .signature-filaments i{opacity:.22;animation-duration:5.8s}
.signature-dormant .signature-particles{opacity:.34;animation-duration:28s}
.signature-listening{filter:saturate(1.2) brightness(1.08);animation:signature-listen-body 2.15s cubic-bezier(.45,0,.2,1) infinite}
.signature-listening .signature-core{animation-duration:1.25s;filter:blur(1.4px) drop-shadow(0 0 15px rgba(152,224,255,.94))}
.signature-listening .signature-filaments i{opacity:.86;animation-duration:.74s}
.signature-listening .signature-particles{animation-duration:8s;opacity:.9}
.signature-listening .signature-halo{animation-duration:2.15s}
.signature-gathering .signature-particles,.signature-charging .signature-particles{animation:signature-gather-in 1.3s cubic-bezier(.3,.7,.2,1) infinite}
.signature-charging .signature-core{animation-duration:.72s;filter:blur(1px) drop-shadow(0 0 18px #a6e7ff)}
.signature-charging .signature-corona{animation-duration:3.8s;opacity:1}
.signature-compressed .signature-core{transform:scale(.72);filter:blur(.6px) brightness(1.8) drop-shadow(0 0 22px #fff)}
.signature-compressed .signature-ring{inset:28%;border-color:rgba(255,255,255,.62);animation-duration:1.2s}
.signature-bursting .signature-core{animation:signature-core-release .68s cubic-bezier(.12,.76,.16,1) both}
.signature-settled .signature-particles{opacity:.3;animation-duration:24s}.signature-settled .signature-corona{opacity:.38;animation-duration:20s}.signature-settled .signature-core{opacity:.7;animation-duration:6.5s}
@keyframes signature-core-live{0%,100%{transform:scale(.86);opacity:.72}44%{transform:scale(1.08);opacity:1}61%{transform:scale(.95);opacity:.84}}
@keyframes signature-corona-turn{to{transform:rotate(360deg)}}
@keyframes signature-particle-orbit{to{transform:rotate(360deg)}}
@keyframes signature-speck{0%,100%{opacity:.12;filter:blur(.5px)}37%{opacity:1;filter:none}49%{opacity:.26}66%{opacity:.8}}
@keyframes signature-listen-body{0%,100%{transform:scale(.975)}48%{transform:scale(1.035)}64%{transform:scale(1.012)}}
@keyframes signature-gather-in{0%{transform:rotate(0) scale(1.32);opacity:.05}62%{opacity:.9}100%{transform:rotate(38deg) scale(.62);opacity:.15}}
@keyframes signature-core-release{0%{transform:scale(.7);filter:brightness(2)}34%{transform:scale(.5);filter:brightness(3)}68%{transform:scale(1.62);opacity:1;filter:brightness(2.2)}100%{transform:scale(1.05);opacity:.72;filter:brightness(1)}}

/* Focusing the request transforms Discover into an attentive listening room
   without losing the user’s typed text or moving to a different route. */
.discover-v5 .app-header,.discover-v5 .friday-ribbon,.discover-v5 .discover-heading,.discover-v5 .memory-control,.discover-v5 .daily-cryptic-home-entry,.discover-v5 .inspiration{transition:opacity .46s var(--triptic-ease),transform .58s var(--triptic-ease),filter .46s var(--triptic-ease)}
.discover-v5.is-listening-space .app-header,.discover-v5.is-listening-space .friday-ribbon,.discover-v5.is-listening-space .discover-heading,.discover-v5.is-listening-space .memory-control,.discover-v5.is-listening-space .daily-cryptic-home-entry,.discover-v5.is-listening-space .inspiration{opacity:0;filter:blur(7px);transform:scale(.975);pointer-events:none}
.discover-v5.is-listening-space::after{content:"TRIPTIC IS LISTENING";position:absolute;z-index:12;left:0;right:0;top:447px;color:#938ea0;font-size:8px;font-weight:650;letter-spacing:.2em;text-align:center;animation:listening-copy-in .55s var(--triptic-ease) both}
.device.ritual-listening>.persistent-glass-nav{opacity:0!important;transform:translateY(30px) scale(.97)!important;pointer-events:none}
.discover-v5 .search-glass{transition:top .72s var(--triptic-ease),min-height .62s var(--triptic-ease),border-color .35s,background .5s,box-shadow .5s!important}
.discover-v5 .search-glass.is-editing{position:relative;z-index:14;left:auto;right:auto;top:auto;margin:0 20px!important;min-height:124px!important;border-color:rgba(163,202,255,.2);background:linear-gradient(145deg,rgba(19,18,28,.86),rgba(7,7,12,.9));box-shadow:inset 0 1px rgba(255,255,255,.11),0 24px 70px rgba(0,0,0,.58),0 0 45px rgba(116,78,230,.12)!important}
.discover-v5 .search-glass.is-editing .query-footer{position:static!important}
.discover-v5 .search-glass.is-editing .query-submit{position:absolute!important;left:auto!important;right:7px!important;bottom:7px!important;top:auto!important;width:48px!important;height:48px!important;margin:0!important;padding:0;border:0;background:none;transform:none!important;overflow:visible}
.discover-v5 .search-glass.is-editing .query-submit .signature-orb{width:46px;filter:saturate(1.22) brightness(1.05)}
.discover-v5 .search-glass:not(.is-editing) .query-submit .signature-orb{width:48px}
.discover-v5 .query-submit{display:grid;place-items:center;border:0;background:none;overflow:visible}
.discover-v5 .query-submit:disabled{opacity:.7}
.discover-v5 .search-glass.is-editing textarea{left:17px!important;right:68px!important;top:36px!important;width:calc(100% - 85px)!important;height:72px!important;padding:0!important;font-size:15px;line-height:1.45}
.discover-v5 .search-glass.is-editing .request-display{opacity:0}
.discover-v5 .search-glass.is-editing .voice-control{position:absolute;right:14px;bottom:13px;width:42px;height:42px}
@keyframes listening-copy-in{from{opacity:0;transform:translateY(6px);letter-spacing:.28em}to{opacity:1;transform:none;letter-spacing:.2em}}

/* The ceremony uses darkness as negative space. Energy is visible only when
   it communicates gathering, pressure, release or the next available action. */
.ritual-screen{background:#030307!important;isolation:isolate}
.ritual-vignette{position:absolute;z-index:-3;inset:0;background:radial-gradient(circle at 50% 36%,rgba(64,43,135,.22),transparent 34%),radial-gradient(ellipse at 50% 72%,rgba(71,142,204,.07),transparent 38%),linear-gradient(180deg,#05050a,#020204 62%,#05040a)}
.ritual-starfield{position:absolute;z-index:-1;inset:80px 20px 170px;opacity:.38;transition:opacity .5s}
.ritual-starfield i{position:absolute;width:2px;height:2px;border-radius:50%;background:#c9eaff;box-shadow:0 0 6px #8ccfff;animation:ritual-star-drift 6s ease-in-out infinite}
.ritual-starfield i:nth-child(1){left:7%;top:22%}.ritual-starfield i:nth-child(2){left:19%;top:57%;animation-delay:-2s}.ritual-starfield i:nth-child(3){left:31%;top:11%;animation-delay:-4s}.ritual-starfield i:nth-child(4){left:43%;top:68%;animation-delay:-1s}.ritual-starfield i:nth-child(5){left:56%;top:17%;animation-delay:-3.5s}.ritual-starfield i:nth-child(6){left:68%;top:52%;animation-delay:-.5s}.ritual-starfield i:nth-child(7){left:83%;top:28%;animation-delay:-2.7s}.ritual-starfield i:nth-child(8){left:93%;top:65%;animation-delay:-4.4s}.ritual-starfield i:nth-child(9){left:12%;top:81%;animation-delay:-1.4s}.ritual-starfield i:nth-child(10){left:27%;top:39%;animation-delay:-3s}.ritual-starfield i:nth-child(11){left:39%;top:88%;animation-delay:-5s}.ritual-starfield i:nth-child(12){left:52%;top:45%;animation-delay:-2.2s}.ritual-starfield i:nth-child(13){left:63%;top:77%;animation-delay:-.8s}.ritual-starfield i:nth-child(14){left:76%;top:9%;animation-delay:-3.8s}.ritual-starfield i:nth-child(15){left:88%;top:87%;animation-delay:-1.8s}.ritual-starfield i:nth-child(16){left:4%;top:43%;animation-delay:-4.7s}.ritual-starfield i:nth-child(17){left:47%;top:27%;animation-delay:-1.2s}.ritual-starfield i:nth-child(18){left:72%;top:92%;animation-delay:-2.9s}
.ritual-screen.phase-charging .ritual-starfield i,.ritual-screen.phase-compressed .ritual-starfield i{animation-duration:1.5s;box-shadow:0 0 9px #b393ff}
.ritual-screen.phase-bursting .ritual-starfield{opacity:.08}
.ritual-orb-wrap{top:160px!important}.ritual-orb-wrap .signature-orb{width:218px;transition:width .65s var(--triptic-ease),filter .5s}
.phase-charging .ritual-orb-wrap .signature-orb{width:236px;filter:drop-shadow(0 0 22px rgba(124,183,255,.28))}
.phase-compressed .ritual-orb-wrap .signature-orb{width:210px}
.ritual-floor{position:absolute;z-index:0;left:50%;top:378px;width:270px;height:74px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(124,179,255,.14),rgba(158,94,255,.055) 38%,transparent 70%);filter:blur(9px);opacity:.5;transition:top .65s,opacity .5s}
.ritual-floor i{position:absolute;left:13%;right:13%;top:46%;height:1px;background:linear-gradient(90deg,transparent,rgba(178,216,255,.35),transparent);box-shadow:0 0 13px rgba(180,118,255,.22)}
.ritual-pressure-wave,.ritual-release-wave{position:absolute;z-index:-1;inset:4%;border:1px solid rgba(170,217,255,.26);border-radius:50%;opacity:0}
.phase-compressed .ritual-pressure-wave{animation:ritual-pressure 1.05s cubic-bezier(.25,.7,.2,1) infinite}
.phase-bursting .ritual-release-wave{animation:ritual-release-wave .8s cubic-bezier(.12,.72,.2,1) both}
.ritual-processing-shadows{top:407px!important;height:177px!important;gap:11px!important;transition:opacity .5s,filter .5s}
.ritual-processing-shadows i{border-color:rgba(163,141,255,.12)!important;background:linear-gradient(160deg,rgba(111,84,181,.07),rgba(0,0,0,.42))!important;box-shadow:inset 0 1px rgba(255,255,255,.035),0 18px 38px rgba(0,0,0,.3);animation:shadow-object-breathe 3.6s ease-in-out infinite}
.ritual-processing-shadows i:nth-child(2){animation-delay:-1.2s}.ritual-processing-shadows i:nth-child(3){animation-delay:-2.4s}
.phase-compressed .ritual-processing-shadows{opacity:.12;filter:blur(2px)}
.ritual-energy-paths{top:282px!important;height:156px!important;overflow:visible}
.ritual-energy-paths i{width:2px!important;height:154px!important;background:linear-gradient(#fff 0 2%,#d4b4ff 7%,#8ad3ff 30%,rgba(205,112,255,.45) 62%,transparent)!important;filter:drop-shadow(0 0 7px #81cfff) drop-shadow(0 0 12px rgba(213,109,255,.72))!important}
.ritual-energy-paths i b{position:absolute;left:-12px;top:42%;width:27px;height:1px;background:linear-gradient(90deg,transparent,#c4e9ff,transparent);transform:rotate(33deg);box-shadow:0 0 6px #be8bff}
.phase-bursting .ritual-energy-paths i,.phase-distributing .ritual-energy-paths i{animation-duration:.88s!important}
.phase-distributing .ritual-card-stage{animation:ritual-stage-arrive .92s var(--triptic-ease) both}
.phase-revealing .ritual-card-stage{animation:ritual-stage-settle .55s var(--triptic-ease) both}
.ritual-card-stage{top:351px!important;height:242px!important}
.ritual-card-stage .ritual-card{top:8px!important;transition:left .72s var(--triptic-ease),right .72s var(--triptic-ease),transform .72s var(--triptic-ease),filter .4s,opacity .4s!important;will-change:transform}
.ritual-card-back,.ritual-card-front{border-radius:18px!important;box-shadow:inset 0 1px rgba(255,255,255,.1),0 28px 70px rgba(0,0,0,.58)!important}
.ritual-card-back{background:linear-gradient(145deg,rgba(32,26,48,.94),rgba(6,6,11,.98) 68%)!important}
.ritual-card-back::before{content:"";position:absolute;inset:-35%;background:conic-gradient(from 15deg,transparent,rgba(102,191,255,.12),transparent 31%,rgba(218,113,255,.14),transparent 62%);animation:sealed-surface-turn 9s linear infinite}
.ritual-card.active .ritual-card-back{animation:ritual-card-ready-premium 2.4s cubic-bezier(.45,0,.2,1) infinite!important}
.ritual-card.active .ritual-card-back::after{background:radial-gradient(circle at 50% 44%,rgba(134,192,255,.22),rgba(210,108,255,.12) 32%,transparent 64%);animation:sealed-heart 1.8s ease-in-out infinite}
.ritual-card-front>i{position:absolute;z-index:3;inset:-30%;background:linear-gradient(108deg,transparent 43%,rgba(255,255,255,.82) 49%,rgba(164,219,255,.22) 53%,transparent 59%);transform:translateX(-70%);opacity:0}
.ritual-card.opening .ritual-card-front>i{animation:poster-light-resolve 1.05s .2s cubic-bezier(.2,.75,.2,1) both}
.ritual-card.opening{animation-duration:1.05s!important}
.ritual-card.rank-1.active.opening{animation-duration:1.28s!important}
.ritual-copy{bottom:42px!important;transition:opacity .35s,transform .45s}
.ritual-copy .eyebrow{opacity:.68}.ritual-copy h1{font-size:27px!important}.ritual-copy p{font-size:10px!important}
.phase-bursting .ritual-copy{opacity:0;transform:translateY(9px)}
.phase-distributing .ritual-copy{opacity:.7}
.phase-settled .ritual-orb-wrap{top:79px!important;transform:translateX(-50%) scale(.42)!important}
.phase-settled .ritual-floor{top:311px;opacity:.2}
.phase-settled .ritual-copy{top:176px!important}.phase-settled .ritual-card-stage{top:326px!important}
.phase-settled .ritual-copy h1{margin:5px 0 3px;font-size:24px!important}
.phase-settled .ritual-copy p{font-size:8px!important}
.phase-settled .ritual-understood{top:240px!important;padding:8px 10px}
.phase-settled .ritual-actions{bottom:19px!important}
.ritual-secondary-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.ritual-secondary-actions button{min-height:35px;border:1px solid rgba(255,255,255,.09);border-radius:12px;color:#b9b4c2;background:rgba(255,255,255,.035);font-size:8px}
.ritual-secondary-actions button:active{transform:scale(.96);border-color:rgba(148,205,255,.26);color:#fff}
@keyframes ritual-star-drift{0%,100%{transform:translateY(0) scale(.7);opacity:.12}48%{transform:translateY(-7px) scale(1.15);opacity:.82}}
@keyframes ritual-pressure{0%{transform:scale(1.25);opacity:0}58%{opacity:.65}100%{transform:scale(.58);opacity:0}}
@keyframes ritual-release-wave{0%{transform:scale(.45);opacity:1;border-width:2px}100%{transform:scale(2.15);opacity:0;border-width:.5px}}
@keyframes shadow-object-breathe{0%,100%{transform:translateY(2px);opacity:.5}50%{transform:translateY(-3px);opacity:.9}}
@keyframes ritual-stage-arrive{0%{opacity:0;transform:translateY(-30px) scale(.86);filter:blur(8px) brightness(1.8)}62%{opacity:1;transform:translateY(4px) scale(1.018);filter:blur(0) brightness(1.12)}100%{transform:none;filter:none}}
@keyframes ritual-stage-settle{from{opacity:.76;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes sealed-surface-turn{to{transform:rotate(360deg)}}
@keyframes ritual-card-ready-premium{0%,100%{transform:translateY(0) scale(1);filter:brightness(.94)}48%{transform:translateY(-5px) scale(1.018);filter:brightness(1.12)}62%{transform:translateY(-3px) scale(1.01);filter:brightness(1.03)}}
@keyframes sealed-heart{0%,100%{opacity:.45;transform:scale(.92)}48%{opacity:1;transform:scale(1.08)}}
@keyframes poster-light-resolve{0%{opacity:0;transform:translateX(-72%) rotate(8deg)}25%{opacity:.9}100%{opacity:0;transform:translateX(76%) rotate(8deg)}}

@media (max-height:760px){
  .discover-v5 .search-glass.is-editing{top:auto}.discover-v5 .search-glass.is-editing .query-submit{top:auto}.discover-v5.is-listening-space::after{top:389px}
  .ritual-orb-wrap{top:132px!important}.ritual-orb-wrap .signature-orb{width:188px}.phase-charging .ritual-orb-wrap .signature-orb{width:204px}
  .ritual-floor{top:331px}.ritual-processing-shadows{top:350px!important;height:150px!important}.ritual-card-stage{top:300px!important;height:218px!important}.ritual-copy{bottom:29px!important}
  .phase-settled .ritual-orb-wrap{top:70px!important}.phase-settled .ritual-copy{top:149px!important}.phase-settled .ritual-understood{top:211px!important}.phase-settled .ritual-card-stage{top:278px!important}.phase-settled .ritual-actions{bottom:12px!important}
}

@media (prefers-reduced-motion:reduce){
  .signature-corona,.signature-particles,.signature-core,.ritual-starfield i,.ritual-processing-shadows i,.ritual-card-back::before,.ritual-card.active .ritual-card-back::after{animation:none!important}
  .discover-v5 .search-glass.is-editing,.ritual-orb-wrap,.ritual-card-stage .ritual-card{transition:opacity .2s ease!important}
  .phase-distributing .ritual-card-stage,.phase-revealing .ritual-card-stage{animation:none!important}
}

/* Final optical authority: these values intentionally follow every earlier
   responsive prototype layer. */
.ritual-orb-wrap{top:128px!important}.ritual-orb-wrap .signature-orb{width:190px!important}.phase-charging .ritual-orb-wrap .signature-orb{width:206px!important}.phase-compressed .ritual-orb-wrap .signature-orb{width:184px!important}
.ritual-floor{top:326px!important}.ritual-processing-shadows{top:355px!important}.ritual-energy-paths{top:258px!important;height:116px!important}.ritual-energy-paths i{height:116px!important}.ritual-card-stage{top:348px!important}
.phase-settled .ritual-orb-wrap{top:79px!important;transform:translateX(-50%) scale(.42)!important}.phase-settled .ritual-copy{top:176px!important}.phase-settled .ritual-understood{top:240px!important}.phase-settled .ritual-card-stage{top:326px!important}
@media (max-height:760px){
  .ritual-orb-wrap{top:111px!important}.ritual-orb-wrap .signature-orb{width:168px!important}.phase-charging .ritual-orb-wrap .signature-orb{width:182px!important}.phase-compressed .ritual-orb-wrap .signature-orb{width:162px!important}
  .ritual-floor{top:285px!important}.ritual-processing-shadows{top:305px!important}.ritual-energy-paths{top:224px!important}.ritual-card-stage{top:294px!important}
  .phase-settled .ritual-orb-wrap{top:70px!important}.phase-settled .ritual-copy{top:149px!important}.phase-settled .ritual-understood{top:211px!important}.phase-settled .ritual-card-stage{top:278px!important}
}

/* Final carousel override — deliberately last in the cascade. */
.ritual-card.revealed .ritual-card-back{opacity:0!important;visibility:hidden!important}
.ritual-card.revealed .ritual-card-front{opacity:1!important;visibility:visible!important;-webkit-backface-visibility:hidden!important;backface-visibility:hidden!important}
.ritual-screen.revealed-1 .ritual-card.rank-3{left:0!important;right:auto!important;transform:rotateY(180deg)!important;animation:ritual-centre-to-left .88s cubic-bezier(.16,1,.3,1) both!important}
.ritual-screen.revealed-1 .ritual-card.rank-2{left:50%!important;right:auto!important;transform:translateX(-50%) translateY(-18px) scale(1.075)!important;animation:ritual-left-to-centre .88s cubic-bezier(.16,1,.3,1) both!important}
.ritual-screen.revealed-2 .ritual-card.rank-3{left:calc(100% - ((100% - 16px)/3))!important;right:auto!important;transform:rotateY(180deg)!important;animation:ritual-left-to-right-depth .96s cubic-bezier(.16,1,.3,1) both!important}
.ritual-screen.revealed-2 .ritual-card.rank-2{left:0!important;right:auto!important;transform:rotateY(180deg)!important;animation:ritual-centre-to-left .88s cubic-bezier(.16,1,.3,1) both!important}
.ritual-screen.revealed-2 .ritual-card.rank-1{left:50%!important;right:auto!important;transform:translateX(-50%) translateY(-22px) scale(1.11)!important;animation:ritual-right-to-centre .88s cubic-bezier(.16,1,.3,1) both!important}
.ritual-card-stage{top:362px!important}.ritual-energy-paths{top:268px!important;height:124px!important}.ritual-energy-paths i{height:124px!important}.phase-settled .ritual-card-stage{top:326px!important}
@media (max-height:760px){.ritual-card-stage{top:308px!important}.ritual-energy-paths{top:232px!important}.phase-settled .ritual-card-stage{top:278px!important}}
@media (prefers-reduced-motion:reduce){.ritual-screen.revealed-1 .ritual-card,.ritual-screen.revealed-2 .ritual-card{animation:none!important}}

/* Stable resolved faces — this block must remain last. */
.ritual-card.revealed .ritual-card-front{transform:none!important;opacity:1!important;visibility:visible!important}
.ritual-screen.revealed-1 .ritual-card.rank-3{left:0!important;right:auto!important;transform:none!important;animation:ritual-centre-to-left-face .88s cubic-bezier(.16,1,.3,1) both!important}
.ritual-screen.revealed-2 .ritual-card.rank-3{left:calc(100% - ((100% - 16px)/3))!important;right:auto!important;transform:none!important;animation:ritual-left-to-right-face .96s cubic-bezier(.16,1,.3,1) both!important}
.ritual-screen.revealed-2 .ritual-card.rank-2{left:0!important;right:auto!important;transform:none!important;animation:ritual-centre-to-left-face .88s cubic-bezier(.16,1,.3,1) both!important}
.ritual-screen.phase-settled .ritual-card.rank-2{left:0!important;right:auto!important;transform:none!important;animation:none!important}
.ritual-screen.phase-settled .ritual-card.rank-3{left:calc(100% - ((100% - 16px)/3))!important;right:auto!important;transform:none!important;animation:none!important}
.ritual-screen.phase-settled .ritual-card.rank-1{left:50%!important;right:auto!important;transform:translateX(-50%) translateY(-14px) scale(1.065)!important;animation:none!important}

/* ===== public/assets/triptic-fluidity.css ===== */
/* TRIPTIC Fluidity System v1
   One motion, depth and tactile language across the complete prototype. */
:root{
  --motion-instant:120ms;
  --motion-fast:180ms;
  --motion-standard:320ms;
  --motion-spatial:520ms;
  --motion-ceremony:880ms;
  --ease-press:cubic-bezier(.2,0,0,1);
  --ease-interface:cubic-bezier(.22,.78,.22,1);
  --ease-spatial:cubic-bezier(.18,.88,.25,1);
  --ease-emphasis:cubic-bezier(.16,1,.3,1);
  --spring-gentle:linear(0, .009, .035 2.1%, .141 4.6%, .723 12.9%, .938 16.7%, 1.017 20.6%, 1.034 24.8%, 1.012 32%, .999 39.7%, 1);
  --fluid-blue:#6eb8ff;
  --fluid-violet:#8d63ff;
  --fluid-pink:#ef76ff;
  --depth-rest:0 16px 46px rgba(0,0,0,.34);
  --depth-raised:0 28px 72px rgba(0,0,0,.54),0 0 34px rgba(124,86,255,.13);
}

html[data-motion-system="triptic-fluidity-v1"] .device{
  isolation:isolate;
  perspective:1100px;
  transform-style:preserve-3d;
}

/* Shared route continuity. The navigation remains a fixed spatial anchor. */
.screen.fluid-arrival{z-index:2;animation:fluid-arrive var(--motion-spatial) var(--ease-spatial) both}
.screen.fluid-departure{position:absolute!important;inset:0!important;z-index:3!important;pointer-events:none!important;overflow:hidden!important;animation:fluid-depart var(--motion-standard) var(--ease-interface) both!important}
.device[data-nav-direction="forward"]>.screen.fluid-arrival{animation-name:fluid-tab-forward}
.device[data-nav-direction="backward"]>.screen.fluid-arrival{animation-name:fluid-tab-backward}
@keyframes fluid-arrive{from{opacity:0;translate:0 10px;scale:.992;filter:blur(4px)}to{opacity:1;translate:0 0;scale:1;filter:blur(0)}}
@keyframes fluid-depart{from{opacity:1;scale:1;filter:blur(0)}to{opacity:0;scale:.988;filter:blur(3px)}}
@keyframes fluid-tab-forward{from{opacity:.18;translate:18px 0;filter:blur(3px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes fluid-tab-backward{from{opacity:.18;translate:-18px 0;filter:blur(3px)}to{opacity:1;translate:0 0;filter:blur(0)}}

/* Every touchable object has material response without playful bounce. */
button,a,[role="button"],.collection-card,.film-card,.content-material{
  -webkit-tap-highlight-color:transparent;
}
button,.collection-card,.film-card,[role="button"]{
  transform-origin:center;
  transition:scale var(--motion-instant) var(--ease-press),filter var(--motion-fast) ease,box-shadow var(--motion-fast) ease,opacity var(--motion-fast) ease;
}
button.is-pressing,.collection-card.is-pressing,.film-card.is-pressing,[role="button"].is-pressing{
  scale:.975;
  filter:brightness(.92) saturate(1.05);
}
.primary-button.is-pressing{scale:.982;box-shadow:inset 0 1px 1px rgba(255,255,255,.16),0 7px 18px rgba(73,35,190,.22)}
.circle-control.is-pressing{scale:.9}

/* Persistent glass navigation: the lens travels; the bar never jumps. */
.persistent-glass-nav{
  contain:layout paint;
  transform:translate3d(0,0,0)!important;
  backface-visibility:hidden;
}
.persistent-glass-nav .tab-lens{
  transition:translate var(--motion-spatial) var(--spring-gentle),width var(--motion-standard) var(--ease-interface),background var(--motion-fast) ease,box-shadow var(--motion-fast) ease!important;
  will-change:translate;
}
.persistent-glass-nav button span:first-child{transition:transform var(--motion-standard) var(--ease-emphasis),filter var(--motion-fast) ease,opacity var(--motion-fast) ease}
.persistent-glass-nav button.active span:first-child{transform:translateY(-1px) scale(1.045);filter:drop-shadow(0 0 7px rgba(110,184,255,.72))}

/* Continuous scroll-linked chrome replaces abrupt threshold changes. */
.explore-screen,.library-screen{--fluid-scroll:0}
.explore-compact-bar,.library-compact-bar{
  opacity:clamp(0,var(--fluid-scroll),1)!important;
  translate:0 calc((1 - var(--fluid-scroll))*-10px)!important;
  backdrop-filter:blur(calc(12px + var(--fluid-scroll)*14px)) saturate(calc(1 + var(--fluid-scroll)*.25));
}
.explore-screen .destination-heading,.library-screen .destination-heading{
  opacity:calc(1 - var(--fluid-scroll)*.34);
  translate:0 calc(var(--fluid-scroll)*-8px);
}

/* Welcome/auth: depth responds gently rather than feeling like a poster collage. */
.welcome-screen .poster-reel,.auth-screen .poster-reel{
  will-change:transform;
  transition:filter var(--motion-standard) ease,opacity var(--motion-standard) ease;
}
.welcome-screen:focus-within .poster-reel,.auth-screen:focus-within .poster-reel{filter:brightness(.62) saturate(.76);opacity:.78}
.welcome-screen .brand-lockup,.auth-screen .brand-lockup{animation:fluid-brand-settle 900ms var(--ease-emphasis) both}
@keyframes fluid-brand-settle{from{opacity:0;translate:0 8px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}

/* Taste Sprint: the card lifts into the hand; the deck answers the gesture. */
.taste-swipe-card{
  transform-style:preserve-3d;
  backface-visibility:hidden;
  box-shadow:var(--depth-raised)!important;
  transition:transform var(--motion-standard) var(--ease-emphasis),box-shadow var(--motion-standard) ease!important;
}
.taste-swipe-card.is-dragging{box-shadow:0 38px 96px rgba(0,0,0,.64),0 0 42px rgba(125,92,255,.18)!important;transition:none!important}
.taste-ghost{transition:transform var(--motion-standard) var(--ease-spatial),opacity var(--motion-standard) ease!important}
.interest-tile,.interest-grid button{overflow:hidden;position:relative;transition:transform var(--motion-fast) var(--ease-interface),border-color var(--motion-fast),box-shadow var(--motion-standard)}
.interest-tile[aria-pressed="true"],.interest-tile.selected,.interest-grid button[aria-pressed="true"],.interest-grid button.selected{box-shadow:0 0 0 1px rgba(131,185,255,.45),0 16px 34px rgba(45,26,112,.34)}
.interest-tile[aria-pressed="true"]::after,.interest-tile.selected::after,.interest-grid button[aria-pressed="true"]::after,.interest-grid button.selected::after{content:"";position:absolute;inset:-60%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.2) 49%,transparent 58%);animation:fluid-selection-sheen 650ms var(--ease-interface) both;pointer-events:none}
@keyframes fluid-selection-sheen{from{translate:-32% 0}to{translate:35% 0}}

/* The orb is alive through layered electrical motion, not a rotating image. */
.signature-orb,.orb{
  contain:layout style;
  transform:translateZ(0);
}
.signature-orb .orb-core,.orb .orb-core{will-change:transform,filter;animation-duration:4.8s!important;animation-timing-function:ease-in-out!important}
.signature-orb.signature-listening,.signature-orb.signature-typing{filter:saturate(1.16) brightness(1.08)}
.signature-orb.signature-thinking,.signature-orb.signature-gathering,.signature-orb.signature-charging,.signature-orb.signature-compressed{filter:saturate(1.28) brightness(1.13)}
.signature-orb.signature-bursting,.signature-orb.signature-distributing{filter:saturate(1.35) brightness(1.18)}
.signature-orb.signature-listening .signature-ring,.signature-orb.signature-typing .signature-ring{animation-duration:2.3s!important}
.signature-orb.signature-thinking .signature-ring,.signature-orb.signature-gathering .signature-ring,.signature-orb.signature-charging .signature-ring{animation-duration:1.55s!important}
.signature-orb.signature-bursting .signature-ring{animation-duration:.48s!important}
.signature-orb .orb-electric i:nth-child(n+5),.orb .orb-electric i:nth-child(n+5){display:none}

/* Input energy wakes only after intent exists. */
.discover-input,.search-entry,.prompt-entry{transition:border-color var(--motion-standard),box-shadow var(--motion-standard),background var(--motion-standard)}
.discover-input:focus-within,.discover-input.is-awake,.search-entry:focus-within,.prompt-entry:focus-within{
  border-color:rgba(129,181,255,.44)!important;
  box-shadow:0 0 0 1px rgba(148,93,255,.16),0 0 30px rgba(101,91,255,.14)!important;
}

/* Recommendation ritual: true spatial cards, controlled energy and authored settle. */
.ritual-card-stage{perspective:1200px;transform-style:preserve-3d}
.ritual-card{
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:translate,transform,filter;
  transition:filter var(--motion-standard) ease,box-shadow var(--motion-standard) ease!important;
}
.ritual-card.is-next,.ritual-card.charged-card{filter:brightness(1.06) saturate(1.1);box-shadow:0 28px 76px rgba(0,0,0,.58),0 0 38px rgba(226,108,255,.17)!important}
.ritual-card.open{animation:fluid-card-land 620ms var(--ease-emphasis) both}
@keyframes fluid-card-land{0%{filter:brightness(1.38) saturate(1.3)}45%{filter:brightness(1.1) saturate(1.15)}100%{filter:brightness(1) saturate(1)}}
.ritual-screen.ritual-phase-settled .ritual-card-stage{animation:fluid-trio-settle 760ms var(--ease-emphasis) both}
@keyframes fluid-trio-settle{from{translate:0 -6px;scale:1.012}to{translate:0 0;scale:1}}
.ritual-floor{opacity:.62;filter:blur(.4px)}
.ritual-energy-paths{mix-blend-mode:screen;opacity:.76}

/* Film detail behaves like a collector object, not another web page. */
.film-hero{view-transition-name:film-hero;transform-origin:center top;animation:fluid-film-hero 720ms var(--ease-emphasis) both}
/* (FILM PAGE FIXES, 29 October 2026; the owner's rec-1308: "it loads each layer one at a time") the film page's content arrives with its hero: a 180 ms fade, opacity only (it rose 16 px over 620 ms after 90 ms, and WebKit draws a frosted bar such as the actions only once its fading parent is opaque, so the actions came last) */
.film-content{animation:fluid-film-content 180ms ease-out both}
@keyframes fluid-film-hero{from{scale:1.035;filter:brightness(.72) blur(3px)}to{scale:1;filter:brightness(1) blur(0)}}
@keyframes fluid-film-content{from{opacity:0}to{opacity:1}}
.trailer-preview{transform:translateZ(0);box-shadow:var(--depth-raised)!important}
.trailer-preview .trailer-controls{opacity:0;translate:0 6px;transition:opacity var(--motion-fast),translate var(--motion-fast)}
.trailer-preview:focus-within .trailer-controls{opacity:1;translate:0 0}@media (hover: hover) and (pointer: fine){.trailer-preview:hover .trailer-controls{opacity:1;translate:0 0}}/* (29 October 2026) hover only for a real pointer: a finger leaves :hover on whatever it last touched (hub/docs/TASTE-INTRO-2026-10-29.md) */
.fluid-media-progress{position:absolute;left:16px;right:16px;bottom:11px;height:2px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden;z-index:5}
.fluid-media-progress::after{content:"";display:block;width:38%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--fluid-blue),var(--fluid-pink));transform-origin:left;animation:fluid-media-progress 12s linear infinite}
.trailer-preview.paused .fluid-media-progress::after{animation-play-state:paused}
@keyframes fluid-media-progress{from{translate:-100% 0}to{translate:265% 0}}
.decision-actions button.action-confirmed{animation:fluid-action-confirm 520ms var(--ease-emphasis)}
@keyframes fluid-action-confirm{0%{scale:1}35%{scale:.9}66%{scale:1.08}100%{scale:1}}

/* Shelves and collections enter in a paced sequence. */
.explore-screen .collection-card,.library-screen .library-sections>button,.profile-screen .profile-list>button,.sublist-screen .sublist>button{
  animation:fluid-row-arrive 480ms var(--ease-spatial) both;
  animation-delay:calc(var(--fluid-index,0)*34ms);
}
@keyframes fluid-row-arrive{from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}
.collection-card{box-shadow:var(--depth-rest);transition:scale var(--motion-fast) var(--ease-press),translate var(--motion-standard) var(--ease-spatial),box-shadow var(--motion-standard)}
@media (hover: hover) and (pointer: fine){.collection-card:hover{translate:0 -2px;box-shadow:var(--depth-raised)}}/* (29 October 2026) hover only for a real pointer: a finger leaves :hover on whatever it last touched (hub/docs/TASTE-INTRO-2026-10-29.md) */

/* Sheets arrive from the same physical layer. */
.reason-sheet,.feedback-sheet,.share-screen{
  transform-origin:center bottom;
  animation:fluid-sheet-rise var(--motion-spatial) var(--ease-emphasis) both!important;
}
@keyframes fluid-sheet-rise{from{opacity:0;translate:0 28px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
.sheet-handle{animation:fluid-handle 440ms 160ms var(--ease-emphasis) both}
@keyframes fluid-handle{from{opacity:0;scale:.55}to{opacity:1;scale:1}}

/* Settings switches visibly travel even when a structural rerender occurs. */
.settings-screen .switch{transition:background var(--motion-standard),border-color var(--motion-standard),box-shadow var(--motion-standard)!important}
.settings-screen .switch::after{transition:translate var(--motion-standard) var(--spring-gentle),background var(--motion-fast),box-shadow var(--motion-standard)!important}
.settings-screen button.fluid-toggle-on .switch::after{animation:fluid-toggle-on var(--motion-standard) var(--spring-gentle)}
.settings-screen button.fluid-toggle-off .switch::after{animation:fluid-toggle-off var(--motion-standard) var(--spring-gentle)}
@keyframes fluid-toggle-on{from{translate:-17px 0}to{translate:0 0}}
@keyframes fluid-toggle-off{from{translate:17px 0}to{translate:0 0}}

/* One non-destructive live-region toast; the screen beneath never rerenders. */
.fluid-toast{
  position:absolute;left:50%;bottom:104px;z-index:300;max-width:calc(100% - 40px);padding:11px 15px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  color:#fff;background:rgba(19,17,29,.82);backdrop-filter:blur(22px) saturate(1.35);box-shadow:0 14px 44px rgba(0,0,0,.45),0 0 20px rgba(119,91,255,.12);
  font-size:12px;font-weight:600;letter-spacing:.01em;text-align:center;translate:-50% 12px;opacity:0;scale:.94;pointer-events:none;
  transition:opacity var(--motion-fast),translate var(--motion-standard) var(--ease-emphasis),scale var(--motion-standard) var(--ease-emphasis);
}
.fluid-toast.is-visible{opacity:1;translate:-50% 0;scale:1}

/* Visual equivalent for semantic haptic/audio cues. */
.sensory-wave{position:absolute;inset:0;z-index:260;pointer-events:none;overflow:hidden}
.sensory-wave::before{content:"";position:absolute;left:50%;top:50%;width:36px;height:36px;border:1px solid rgba(169,132,255,.5);border-radius:50%;translate:-50% -50%;animation:fluid-sensory 480ms ease-out both}
.sensory-wave.hero::before{border-color:rgba(244,129,255,.7);animation-duration:720ms}
@keyframes fluid-sensory{from{opacity:.8;scale:.5}to{opacity:0;scale:5.4}}

/* Empty, offline and recovery states should feel intentional, not abandoned. */
.system-state-screen .brand-mark,.library-empty .brand-mark{animation:fluid-state-breathe 4.6s ease-in-out infinite}
@keyframes fluid-state-breathe{0%,100%{opacity:.58;filter:drop-shadow(0 0 4px rgba(102,174,255,.16))}50%{opacity:.9;filter:drop-shadow(0 0 12px rgba(135,95,255,.28))}}
.system-state-screen>.close-control{position:absolute!important;top:24px!important;right:22px!important;left:auto!important;z-index:20}
.system-state-screen .state-orb{margin-top:30px;display:grid;place-items:center}

/* First-session and ritual-specific authored moments. */
.splash-screen .brand-mark,.splash-screen .wordmark{animation:fluid-splash-mark 1.25s var(--ease-emphasis) both}
.splash-screen .tagline{animation:fluid-splash-copy 680ms 640ms var(--ease-spatial) both}
@keyframes fluid-splash-mark{0%{opacity:0;scale:.9;filter:blur(10px) drop-shadow(0 0 0 transparent)}52%{opacity:1;scale:1.025;filter:blur(0) drop-shadow(0 0 26px rgba(98,177,255,.38))}100%{opacity:1;scale:1;filter:blur(0) drop-shadow(0 0 13px rgba(123,93,255,.24))}}
@keyframes fluid-splash-copy{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
.permission-screen .notification-bell,.notification-screen .notification-bell{transform-origin:50% 12%;animation:fluid-bell-arrive 1.25s var(--ease-emphasis) both}
@keyframes fluid-bell-arrive{0%{opacity:0;scale:.86;rotate:-7deg}35%{opacity:1;scale:1.02;rotate:4deg}55%{rotate:-2deg}75%{rotate:1deg}100%{scale:1;rotate:0}}
.friday-card,.ritual-card{transition:filter var(--motion-standard),box-shadow var(--motion-standard),opacity var(--motion-standard)}
.friday-card.opening,.ritual-card.opening{animation:fluid-reveal-lift var(--motion-ceremony) var(--ease-emphasis) both!important}
@keyframes fluid-reveal-lift{0%{translate:0 0;scale:1;filter:brightness(1)}24%{translate:0 -13px;scale:1.055;filter:brightness(1.34) saturate(1.28)}55%{translate:0 -7px;scale:1.025;filter:brightness(1.14)}100%{translate:0 0;scale:1;filter:brightness(1)}}
.friday-front,.ritual-card-front{backface-visibility:hidden;transform-style:preserve-3d}
.friday-card.opening .friday-front,.ritual-card.opening .ritual-card-front{animation:fluid-face-resolve 760ms var(--ease-emphasis) both}
@keyframes fluid-face-resolve{0%{opacity:0;rotate:y 88deg;filter:blur(8px)}62%{opacity:1;rotate:y -3deg;filter:blur(0)}100%{opacity:1;rotate:y 0deg}}

/* Secondary destinations share the quality of the signature journey. */
.share-destinations button i,.decision-actions button i,.profile-list button>i,.library-sections button>i{transition:transform var(--motion-standard) var(--ease-emphasis),filter var(--motion-fast),background var(--motion-fast)}
.share-destinations button:focus-visible i{transform:translateY(-2px);filter:drop-shadow(0 0 8px rgba(110,184,255,.42))}@media (hover: hover) and (pointer: fine){.share-destinations button:hover i{transform:translateY(-2px);filter:drop-shadow(0 0 8px rgba(110,184,255,.42))}}/* (29 October 2026) hover only for a real pointer: a finger leaves :hover on whatever it last touched (hub/docs/TASTE-INTRO-2026-10-29.md) */
.profile-orb{animation:fluid-profile-orb 6.8s ease-in-out infinite;box-shadow:0 0 0 1px rgba(117,172,255,.18),0 0 34px rgba(111,77,255,.17)}
@keyframes fluid-profile-orb{0%,100%{filter:hue-rotate(0deg);box-shadow:0 0 0 1px rgba(117,172,255,.18),0 0 28px rgba(111,77,255,.14)}50%{filter:hue-rotate(10deg);box-shadow:0 0 0 1px rgba(224,118,255,.2),0 0 40px rgba(95,149,255,.2)}}
.taste-spectrum i{transform-origin:left;animation:fluid-dna-grow 680ms var(--ease-emphasis) both;animation-delay:calc(var(--fluid-index,0)*50ms)}
@keyframes fluid-dna-grow{from{scale:.25 1;opacity:.25}to{scale:1 1;opacity:1}}
.cryptic-clue,.cryptic-play-screen .clue{animation:fluid-clue-unfold 460ms var(--ease-spatial) both}
@keyframes fluid-clue-unfold{from{opacity:0;translate:0 7px;clip-path:inset(0 0 100% 0 round 12px)}to{opacity:1;translate:0 0;clip-path:inset(0 0 0 0 round 12px)}}
.explore-screen .daily-cryptic-tile{grid-template-columns:58px minmax(0,1fr) 10px;gap:10px;padding:14px 15px}
.explore-screen .cryptic-mini-orb,.explore-screen .signature-orb.is-compact{width:54px;height:54px}
.explore-screen .daily-cryptic-tile p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.membership-screen .membership-glow{animation:fluid-membership-glow 7s ease-in-out infinite}
@keyframes fluid-membership-glow{0%,100%{opacity:.45;scale:.96}50%{opacity:.76;scale:1.04}}

/* Keyboard/focus movement is as considered as touch. */
button:focus-visible,input:focus-visible,[role="button"]:focus-visible{outline:2px solid rgba(126,189,255,.88)!important;outline-offset:3px;box-shadow:0 0 0 5px rgba(92,97,255,.18)!important}

/* Transparency and motion accessibility preserve hierarchy and suspense. */
@media (prefers-reduced-transparency:reduce){
  .glass-panel,.persistent-glass-nav,.content-material,.fluid-toast{backdrop-filter:none!important;background:#14121d!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .screen.fluid-arrival,.screen.fluid-departure{animation:none!important;opacity:1!important;translate:0!important;filter:none!important}
  .signature-orb .orb-electric i:nth-child(n+2),.orb .orb-electric i:nth-child(n+2){display:none}
  .sensory-wave{display:none}
}
.device.manual-reduced-motion .screen.fluid-arrival,.device.manual-reduced-motion .screen.fluid-departure{animation:none!important;opacity:1!important;translate:0!important;filter:none!important}
.device.manual-reduced-motion .signature-orb *,.device.manual-reduced-motion .orb *,.device.manual-reduced-motion .profile-orb,.device.manual-reduced-motion .friday-card,.device.manual-reduced-motion .ritual-card,.device.manual-reduced-motion .taste-spectrum i,.device.manual-reduced-motion .system-state-screen .brand-mark{animation:none!important}
.device.manual-reduced-motion .sensory-wave{display:none!important}
.device.manual-reduced-motion .fluid-toast{translate:-50% 0!important;transition:opacity var(--motion-fast) ease!important}

/* ===== public/assets/triptic-core-reconstruction.css ===== */
/* Final reconstruction layer: content truth, spherical intelligence, stable
   reveal geometry and coherent premium controls. */
:root{--recon-blue:#76c8ff;--recon-violet:#8b6cff;--recon-pink:#ec7dff;--recon-ease:cubic-bezier(.16,1,.3,1)}

.recon-brand-lockup{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;filter:drop-shadow(0 0 14px rgba(100,193,255,.34))}
.recon-brand-lockup::before{content:"";position:absolute;z-index:-1;width:86px;height:38px;border-radius:50%;background:radial-gradient(ellipse,rgba(92,183,255,.23),transparent 68%);filter:blur(7px)}
.recon-brand-lockup .logo-mark{width:24px!important;height:31px!important}.recon-brand-lockup .wordmark{width:82px!important;margin:0!important}

/* The orb is a volumetric energy sphere, not a logo and not a circular button. */
.signature-orb.recon-orb{position:relative!important;display:block!important;width:176px!important;height:176px!important;isolation:isolate;overflow:visible!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;filter:none!important;transform:translateZ(0)}
.signature-orb.recon-orb.is-compact{width:48px!important;height:48px!important}
.recon-orb .orb-aura{position:absolute;inset:11%;border-radius:50%;background:radial-gradient(circle,rgba(234,123,255,.24),rgba(102,173,255,.16) 35%,transparent 70%);filter:blur(12px);animation:orb-aura-breathe 3.1s ease-in-out infinite}
.recon-orb .orb-sphere{position:absolute;z-index:3;inset:20%;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 34% 27%,rgba(255,255,255,.92) 0 2%,rgba(128,215,255,.82) 3%,rgba(91,87,255,.68) 17%,rgba(39,21,88,.94) 49%,#070817 78%);box-shadow:inset -15px -18px 28px rgba(2,1,15,.78),inset 10px 12px 20px rgba(149,221,255,.18),0 0 10px #b8eaff,0 0 28px rgba(96,157,255,.72),0 0 58px rgba(213,91,255,.38);animation:orb-sphere-breathe 2.55s ease-in-out infinite}
.recon-orb .orb-depth{position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle at 68% 70%,rgba(235,91,255,.52),transparent 20%),radial-gradient(circle at 30% 64%,rgba(76,207,255,.42),transparent 26%);filter:blur(4px);animation:orb-depth-drift 4.2s var(--recon-ease) infinite alternate}
.recon-orb .orb-plasma{position:absolute;inset:8%;border-radius:48% 52% 47% 53%;border:1.6px solid rgba(181,228,255,.9);filter:drop-shadow(0 0 5px #69cfff);mix-blend-mode:screen}
.recon-orb .plasma-a{animation:orb-plasma-a 3.7s linear infinite}.recon-orb .plasma-b{inset:18% 5%;border-color:rgba(239,131,255,.88);animation:orb-plasma-b 4.3s linear infinite reverse}.recon-orb .plasma-c{inset:6% 22%;border-color:rgba(125,125,255,.85);animation:orb-plasma-c 3.1s linear infinite}
.recon-orb .orb-glint{position:absolute;top:12%;left:20%;width:29%;height:16%;border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.75),transparent 76%);filter:blur(2px);transform:rotate(-21deg)}
.recon-orb .orb-arc{position:absolute;z-index:2;inset:13%;border-radius:50%;border:1px solid transparent;border-top-color:rgba(129,213,255,.9);border-right-color:rgba(235,117,255,.65);filter:drop-shadow(0 0 4px currentColor)}
.recon-orb .arc-a{animation:orb-arc-turn 4.8s linear infinite}.recon-orb .arc-b{inset:8%;transform:rotate(112deg);animation:orb-arc-turn 6.2s linear infinite reverse}.recon-orb .arc-c{inset:17%;transform:rotate(248deg);animation:orb-arc-turn 3.8s linear infinite}
.recon-orb .orb-sparks{position:absolute;inset:0}.recon-orb .orb-sparks i{--angle:calc(var(--spark)*25.714deg);position:absolute;left:50%;top:50%;width:2px;height:2px;border-radius:50%;background:#d6f2ff;box-shadow:0 0 6px #75cdff,0 0 11px #ed7cff;transform:rotate(var(--angle)) translateY(-65px);animation:orb-spark 2.7s calc(var(--spark)*-.14s) ease-in-out infinite}
.recon-orb.is-compact .orb-sparks i{transform:rotate(var(--angle)) translateY(-18px);width:1px;height:1px}.recon-orb.is-compact .orb-plasma{border-width:.8px}.recon-orb.is-compact .orb-aura{filter:blur(5px)}
.recon-orb.state-dormant,.signature-dormant.recon-orb{filter:grayscale(1) saturate(.15)!important;opacity:.46}.recon-orb.state-dormant *,.signature-dormant.recon-orb *{animation-play-state:paused!important}
.recon-orb.state-listening .orb-sphere,.signature-listening.recon-orb .orb-sphere{animation-duration:1.55s}.recon-orb.state-charging .orb-sphere{animation-duration:1.05s;box-shadow:inset -15px -18px 28px rgba(2,1,15,.6),0 0 12px #fff,0 0 40px #6ebdff,0 0 76px rgba(236,89,255,.62)}
@keyframes orb-aura-breathe{50%{opacity:.68;transform:scale(1.16)}}@keyframes orb-sphere-breathe{50%{transform:scale(1.045);filter:brightness(1.18) saturate(1.15)}}
@keyframes orb-depth-drift{to{transform:rotate(125deg) scale(1.12)}}@keyframes orb-plasma-a{to{transform:rotate(360deg) scaleX(.88)}}@keyframes orb-plasma-b{to{transform:rotate(360deg) scaleY(.82)}}@keyframes orb-plasma-c{to{transform:rotate(360deg) scale(.9)}}@keyframes orb-arc-turn{to{transform:rotate(360deg)}}
@keyframes orb-spark{0%,100%{opacity:0;scale:.5}35%{opacity:.95;scale:1}65%{opacity:.18;transform:rotate(var(--angle)) translateY(-80px)}}

/* Discover input: calm before typing, visibly alive afterwards. */
.discover-v5 .query-footer .query-submit{width:50px!important;height:50px!important;overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:0!important}
.discover-v5 .query-footer .query-submit .recon-orb{position:absolute!important;inset:1px!important;margin:auto}
.discover-v5 .query-footer .voice-control{width:34px!important;height:34px!important;border-radius:13px!important;margin-left:4px;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.08)!important}
.discover-v5 .query-footer .voice-control svg{width:16px!important;height:16px!important}.discover-v5 .search-glass:not(.has-query) .query-submit{opacity:.58}.discover-v5 .search-glass.has-query{border-color:rgba(133,194,255,.34)!important;box-shadow:inset 0 1px rgba(255,255,255,.09),0 0 0 1px rgba(224,116,255,.11),0 0 34px rgba(104,147,255,.13)!important}
.orb-instruction{display:block;margin:-5px 26px 9px;color:#7d7888;font-size:8px;line-height:1.35;letter-spacing:.015em;text-align:right}.search-glass.has-query+.orb-instruction{color:#a89ed0}

/* Verified poster surfaces. */
.verified-taste-poster,.verified-film-card,.verified-film-hero,.verified-trailer,.verified-friday-front{background-image:linear-gradient(to top,rgba(2,3,9,.97),rgba(4,4,11,.04) 63%),var(--poster)!important;background-size:cover!important;background-position:center!important}
.verified-taste-poster::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.12) 48%,transparent 60%);transform:translateX(-120%);animation:poster-satin 6s ease-in-out infinite;pointer-events:none}
.taste-film-copy{position:absolute!important;z-index:4;inset:auto 19px 18px!important;display:grid!important;gap:3px}.taste-film-copy strong{font-size:22px!important;letter-spacing:-.04em}.taste-film-copy span{color:#bbb8c4!important;font-size:10px!important}
@keyframes poster-satin{0%,72%,100%{transform:translateX(-120%)}88%{transform:translateX(120%)}}

/* Clear three-control language. */
.premium-taste-controls{display:grid!important;grid-template-columns:1fr 64px 1fr!important;gap:13px!important;align-items:end!important}.premium-taste-controls button{min-width:0!important;height:70px!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:22px!important;background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.025))!important;box-shadow:inset 0 1px rgba(255,255,255,.08),0 14px 32px rgba(0,0,0,.24)!important}.premium-taste-controls .undo-taste{width:64px!important}.taste-control-spacer{width:64px;height:70px}
.premium-taste-controls i{position:relative!important;display:block!important;width:22px!important;height:22px!important;margin:auto!important}.taste-no-icon::before,.taste-no-icon::after{content:"";position:absolute;left:10px;top:1px;width:2px;height:20px;border-radius:2px;background:#ff9bb3;box-shadow:0 0 8px rgba(255,116,164,.35);transform:rotate(45deg)}.taste-no-icon::after{transform:rotate(-45deg)}
.taste-yes-icon{border:2px solid #80d4ff;border-radius:50%;box-shadow:0 0 10px rgba(92,198,255,.28)}.taste-yes-icon::before{content:"";position:absolute;left:5px;top:4px;width:7px;height:4px;border-left:2px solid #bfeaff;border-bottom:2px solid #bfeaff;transform:rotate(-45deg)}
.taste-undo-icon::before{content:"";position:absolute;inset:4px 2px 3px 5px;border:1.8px solid #b7afd0;border-left-color:transparent;border-radius:50%}.taste-undo-icon::after{content:"";position:absolute;left:2px;top:3px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-right:7px solid #b7afd0}.premium-taste-controls button span{font-size:8px!important;letter-spacing:.06em!important}

/* Notification composition. */
.recon-notification{padding:58px 28px 34px!important;justify-items:center!important}.recon-notification>.close-control{top:17px!important;right:18px!important;left:auto!important}.recon-notification>.recon-brand-lockup{margin:0 auto 24px!important}.recon-notification .notification-object{margin:0 auto 19px!important}.recon-notification .notification-object .logo-mark{display:none!important}.recon-notification>p{max-width:304px!important;margin-bottom:27px!important}.recon-notification>.primary-button{margin-top:auto!important}.recon-notification .permission-footnote{max-width:270px!important;margin-top:15px!important;color:#797583!important;text-align:center!important;line-height:1.45!important}

/* Stable reveal geometry, premium mystery identity, readable settled result. */
.recon-ritual>header .recon-brand-lockup{margin:auto}.recon-ritual .ritual-query span{color:#7ebfff!important}.recon-ritual .ritual-card-stage{display:block!important;top:348px!important;height:238px!important;perspective:1400px!important}.recon-ritual .ritual-card{top:7px!important;width:calc((100% - 18px)/3)!important;height:203px!important;transition:left .78s var(--recon-ease),right .78s var(--recon-ease),transform .78s var(--recon-ease),filter .45s!important}
.recon-ritual .ritual-card.rank-3{left:0!important}.recon-ritual .ritual-card.rank-2{left:50%!important;right:auto!important;transform:translateX(-50%)!important}.recon-ritual .ritual-card.rank-1{left:auto!important;right:0!important}.recon-ritual .ritual-card.active{left:50%!important;right:auto!important;transform:translateX(-50%) translateY(-15px) scale(1.075)!important;z-index:9!important}.recon-ritual .ritual-card.revealed.rank-3{left:0!important;right:auto!important;transform:none!important}.recon-ritual .ritual-card.revealed.rank-2{left:50%!important;right:auto!important;transform:translateX(-50%)!important}.recon-ritual .ritual-card.revealed.rank-1{left:auto!important;right:0!important;transform:translateY(-9px) scale(1.04)!important}.recon-ritual.phase-settled .ritual-card.rank-1{left:50%!important;right:auto!important;transform:translateX(-50%) translateY(-17px) scale(1.13)!important;z-index:8!important}.recon-ritual.phase-settled .ritual-card.rank-2{left:0!important;transform:none!important}.recon-ritual.phase-settled .ritual-card.rank-3{left:auto!important;right:0!important;transform:none!important}
.premium-mystery-back{position:absolute!important;inset:0!important;overflow:hidden!important;background:linear-gradient(155deg,rgba(33,31,52,.95),rgba(7,7,14,.99) 72%)!important;border:1px solid rgba(138,184,255,.15)!important}.premium-mystery-back::after{content:"";position:absolute;inset:-30%;background:conic-gradient(from 70deg,transparent,rgba(101,185,255,.12),transparent 30%,rgba(229,113,255,.12),transparent 58%);animation:mystery-sheen 7s linear infinite}.film-question{position:absolute;z-index:2;left:50%;top:49%;width:42px;height:68px;transform:translate(-50%,-50%)}.film-question::before,.film-question::after{content:"";position:absolute;top:0;bottom:0;width:3px;background:repeating-linear-gradient(to bottom,rgba(172,223,255,.9) 0 4px,transparent 4px 9px)}.film-question::before{left:0}.film-question::after{right:0}.film-question i{position:absolute;inset:4px 7px;border:1px solid rgba(174,219,255,.34);border-radius:16px}.film-question em{position:absolute;inset:0;display:grid;place-items:center;color:#e8f7ff;font:300 35px/1 system-ui;text-shadow:0 0 14px #80cfff,0 0 24px #d66cff}.premium-mystery-back>b{z-index:3!important}.premium-mystery-back>small{z-index:3!important}
@keyframes mystery-sheen{to{transform:rotate(360deg)}}
.ritual-card-front.verified-film-card{display:flex!important;flex-direction:column!important;justify-content:flex-end!important;padding:12px 9px!important}.ritual-card-front.verified-film-card strong{font-size:10px!important;line-height:1.15!important;text-shadow:0 2px 8px #000}.ritual-card-front.verified-film-card small{font-size:7px!important;color:#c7eaff!important}.ritual-card-front.verified-film-card em{font-size:6px!important;color:#9b98a6!important}
.phase-settled .ritual-card-stage{top:318px!important}.phase-settled .ritual-understood{top:229px!important}.phase-settled .ritual-actions{bottom:13px!important}.phase-settled .ritual-copy{top:167px!important}.phase-settled .ritual-orb-wrap{top:68px!important;transform:translateX(-50%) scale(.42)!important}
.premium-result-toolbar{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:7px!important}.premium-result-toolbar button{min-width:0!important;height:54px!important;display:grid!important;place-items:center!important;gap:3px!important;padding:7px 3px!important;border-radius:17px!important;background:linear-gradient(160deg,rgba(116,174,255,.09),rgba(255,255,255,.025))!important;border:1px solid rgba(142,190,255,.12)!important}.premium-result-toolbar button i{position:relative;width:18px;height:18px}.premium-result-toolbar button span{font-size:7px}.tool-reason{border:1.5px solid #85cfff;border-radius:50%}.tool-reason::before{content:"?";position:absolute;inset:0;display:grid;place-items:center;color:#c7ecff;font:600 11px/1 system-ui}.tool-share::before{content:"";position:absolute;left:4px;top:7px;width:10px;height:8px;border:1.5px solid #8ecfff;border-radius:3px}.tool-share::after{content:"↑";position:absolute;left:5px;top:-5px;color:#c4ecff;font:15px/1 system-ui}.tool-save{border:1.5px solid #8ecfff;border-radius:3px 3px 6px 6px}.tool-save::after{content:"";position:absolute;left:3px;right:3px;bottom:-1px;height:7px;background:#171526;clip-path:polygon(0 0,50% 65%,100% 0)}.tool-refine::before,.tool-refine::after{content:"";position:absolute;left:1px;right:1px;height:1.5px;background:#8ecfff;box-shadow:0 6px #8ecfff,0 12px #8ecfff}.tool-refine::after{left:5px;right:auto;top:-3px;width:4px;height:4px;border:1px solid #bde9ff;border-radius:50%;box-shadow:6px 6px #171526,6px 6px 0 1px #bde9ff,-2px 12px #171526,-2px 12px 0 1px #bde9ff;background:#171526}

.reasoning-scrim{position:absolute;z-index:90;inset:0;background:rgba(2,2,7,.58);backdrop-filter:blur(8px);animation:fade-in .25s ease}.reasoning-sheet{position:absolute;z-index:91;left:10px;right:10px;bottom:8px;max-height:77%;overflow:auto;padding:10px 18px 24px;border:1px solid rgba(157,194,255,.16);border-radius:28px;background:linear-gradient(165deg,rgba(28,27,42,.96),rgba(8,8,15,.985));box-shadow:0 -22px 70px rgba(0,0,0,.56),inset 0 1px rgba(255,255,255,.1);animation:sheet-up .5s var(--recon-ease)}.reasoning-sheet .sheet-handle{width:34px;height:4px;margin:0 auto 14px;border-radius:4px;background:rgba(255,255,255,.22)}.reasoning-sheet header{display:grid;grid-template-columns:1fr 40px;align-items:start}.reasoning-sheet header span{color:#83cfff;font-size:7px;letter-spacing:.15em}.reasoning-sheet h2{margin:5px 0 12px;font-size:20px;letter-spacing:-.04em}.reasoning-sheet article{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:12px 0;border-top:1px solid rgba(255,255,255,.07)}.reasoning-sheet article>b{color:#8ecfff;font-size:9px}.reasoning-sheet article strong{font-size:11px}.reasoning-sheet article p,.why-not p{margin:4px 0;color:#aaa7b4;font-size:9px;line-height:1.45}.reasoning-sheet article small{color:#cf9fff;font-size:7px}.why-not{margin-top:6px;padding:12px;border-radius:16px;background:rgba(118,157,255,.07);border:1px solid rgba(129,178,255,.1)}.why-not span{color:#9dcbff;font-size:7px;letter-spacing:.12em}@keyframes sheet-up{from{transform:translateY(105%)}to{transform:none}}

/* Film page: real art, elegant cast, coherent action language. */
.recon-film .verified-film-hero{height:410px!important;background-position:center 22%!important}.recon-film .film-title{max-width:320px!important}.recon-film .film-title h1{font-size:32px!important;line-height:1.02!important}.recon-film .verified-trailer{background-position:center 26%!important}.premium-film-actions{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:8px!important}.premium-film-actions button{border-color:rgba(128,190,255,.1)!important;background:linear-gradient(160deg,rgba(93,149,237,.075),rgba(255,255,255,.02))!important}.premium-film-actions i{filter:drop-shadow(0 0 6px rgba(99,192,255,.28))}.cast-section{margin:19px 0 7px}.cast-section>header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}.cast-section>header span{font-size:13px}.cast-section>header small{color:#777381;font-size:8px}.cast-track{display:grid;grid-auto-flow:column;grid-auto-columns:76px;gap:11px;overflow-x:auto;padding-bottom:5px;scrollbar-width:none}.cast-track article{display:grid;justify-items:center;text-align:center}.cast-track img{width:62px;height:62px;border-radius:50%;object-fit:cover;object-position:center top;border:1px solid rgba(144,201,255,.22);box-shadow:0 0 0 3px rgba(91,126,215,.055),0 10px 22px rgba(0,0,0,.3)}.cast-track strong{margin-top:7px;font-size:8px;line-height:1.16}.cast-track small{margin-top:2px;color:#85818e;font-size:6.5px;line-height:1.18}

/* Friday ritual: orbital sparks, strong centre and safe completion controls. */
.recon-friday>header .recon-brand-lockup{margin:auto}.recon-friday .friday-stage{perspective:1350px!important}.recon-friday .friday-card{transform-style:preserve-3d!important}.premium-reveal-sparks{position:absolute;z-index:5;inset:-25%;opacity:0;pointer-events:none}.friday-card.opening .premium-reveal-sparks{opacity:1}.premium-reveal-sparks i{position:absolute;left:50%;top:50%;width:2px;height:15px;border-radius:50%;background:linear-gradient(#fff,#91d7ff 38%,transparent);transform-origin:50% 78px;box-shadow:0 0 7px #8ecfff}.premium-reveal-sparks i:nth-child(1){transform:rotate(0deg) translateY(-55px)}.premium-reveal-sparks i:nth-child(2){transform:rotate(30deg) translateY(-55px)}.premium-reveal-sparks i:nth-child(3){transform:rotate(60deg) translateY(-55px)}.premium-reveal-sparks i:nth-child(4){transform:rotate(90deg) translateY(-55px)}.premium-reveal-sparks i:nth-child(5){transform:rotate(120deg) translateY(-55px)}.premium-reveal-sparks i:nth-child(6){transform:rotate(150deg) translateY(-55px)}.premium-reveal-sparks i:nth-child(7){transform:rotate(180deg) translateY(-55px)}.premium-reveal-sparks i:nth-child(8){transform:rotate(210deg) translateY(-55px)}.premium-reveal-sparks i:nth-child(9){transform:rotate(240deg) translateY(-55px)}.premium-reveal-sparks i:nth-child(10){transform:rotate(270deg) translateY(-55px)}.premium-reveal-sparks i:nth-child(11){transform:rotate(300deg) translateY(-55px)}.premium-reveal-sparks i:nth-child(12){transform:rotate(330deg) translateY(-55px)}
.verified-friday-front{position:absolute!important;inset:0!important;border-radius:20px!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;padding:14px 10px!important}.verified-friday-front strong{font-size:10px!important}.verified-friday-front small{color:#bce9ff!important;font-size:7px!important}.recon-friday.friday-complete .friday-stage{gap:9px!important}.recon-friday.friday-complete .friday-card.rank-1{transform:translateY(-12px) scale(1.12)!important;z-index:5!important}.recon-friday .friday-actions{left:24px!important;right:24px!important;bottom:23px!important}.recon-friday .friday-actions .quiet-button{margin:7px auto 0!important}

/* Film DNA is a legible, honest map rather than decorative bars. */
.dna-map{margin:14px 0;padding:17px;border-radius:22px}.dna-map>header{display:flex;justify-content:space-between;margin-bottom:16px}.dna-map>header span{font-size:7px;letter-spacing:.13em}.dna-map>header small{color:#8fcfff;font-size:6px;letter-spacing:.12em}.dna-axis{margin:11px 0}.dna-axis>div{display:flex;justify-content:space-between;margin-bottom:5px}.dna-axis span{color:#aaa6b2;font-size:7px}.dna-axis>i{position:relative;display:block;height:4px;border-radius:6px;background:linear-gradient(90deg,rgba(91,168,255,.28),rgba(236,122,255,.28))}.dna-axis>i::after{content:"";position:absolute;left:50%;top:-2px;width:1px;height:8px;background:rgba(255,255,255,.2)}.dna-axis b{position:absolute;left:var(--dna);top:50%;width:9px;height:9px;border-radius:50%;background:#dff6ff;box-shadow:0 0 9px #78caff,0 0 15px #dc76ff;transform:translate(-50%,-50%)}.dna-axis>small{display:block;margin-top:4px;color:#736f7c;font-size:6px}.dna-axis.is-empty>i{background:rgba(255,255,255,.07)}.dna-axis.is-empty>i::after{display:none}.dna-map>p{margin:15px 0 0;color:#8f8b98;font-size:8px;line-height:1.45}.dna-map.insufficient-data .secondary-button{width:100%;height:42px;margin-top:14px;border-radius:15px;color:#e7e4ed;background:rgba(118,200,255,.07);border:1px solid rgba(118,200,255,.14)}

/* The Daily Cryptic supports intentional clue use and visible score cost. */
.recon-cryptic{padding-bottom:18px!important;overflow-y:auto!important}.recon-cryptic>header span{color:#d8f2ff!important;font-size:8px!important;letter-spacing:.13em!important}.recon-cryptic>header strong{color:#8fd2ff!important}.cryptic-scoreline{display:flex;justify-content:space-between;margin:-7px 0 10px;color:#8c8796;font-size:7px}.cryptic-feedback{margin:6px 0;color:#d8b6ff;font-size:8px;text-align:center}.cryptic-choice-row{display:flex;justify-content:center;margin:8px 0}.cryptic-choice-row .secondary-button{height:36px;padding:0 16px;border:1px solid rgba(139,197,255,.14);border-radius:14px;background:rgba(106,154,237,.07);color:#e7e5ee}.cryptic-choice-row small{margin-left:7px;color:#9b93aa}.cryptic-choice-row button:disabled{opacity:.35}.recon-cryptic .cryptic-guess-panel{margin-top:7px!important;padding:12px!important;border-radius:17px!important}.recon-cryptic .cryptic-guess-panel label{margin-bottom:6px!important}.recon-cryptic .cryptic-guess-panel>small{display:none}.cryptic-clue-rail{display:grid;gap:5px}.cryptic-clue-rail article{display:grid;grid-template-columns:43px minmax(0,1fr) auto;align-items:center;min-height:31px;padding:6px 10px!important;border-radius:13px!important;animation:none!important;transition:min-height .34s var(--trip-ease),background .34s var(--trip-ease),border-color .34s var(--trip-ease)}.cryptic-clue-rail article span{font-size:6px!important}.cryptic-clue-rail article p{min-width:0;margin:0!important;overflow:hidden;color:#aaa6b3!important;font-size:8px!important;line-height:1.3!important;text-overflow:ellipsis;white-space:nowrap}.cryptic-clue-rail article em{color:#8fd2ff;font-size:5.8px;font-style:normal;letter-spacing:.08em;text-transform:uppercase}.cryptic-clue-rail article.is-current{min-height:58px;padding:9px 11px!important;border-color:rgba(139,197,255,.25)!important;background:linear-gradient(145deg,rgba(25,27,41,.82),rgba(13,11,24,.84))!important}.cryptic-clue-rail article.is-current p{color:#eeebf4!important;font-size:10px!important;line-height:1.35!important;white-space:normal}.cryptic-clue-rail article.is-locked{opacity:.42}.cryptic-clue-rail article.is-locked p{letter-spacing:.08em;text-transform:uppercase}
.recon-cryptic>header .close-control{position:relative!important;top:auto!important;right:auto!important;left:auto!important}

@media (max-height:760px){.signature-orb.recon-orb{width:152px!important;height:152px!important}.recon-ritual .ritual-card-stage{top:302px!important}.phase-settled .ritual-card-stage{top:275px!important}.phase-settled .ritual-understood{top:205px!important}.phase-settled .ritual-copy{top:145px!important}.recon-film .verified-film-hero{height:360px!important}.recon-notification{padding-top:50px!important}}
@media (prefers-reduced-motion:reduce){.recon-orb *,.premium-mystery-back::after,.verified-taste-poster::before,.premium-reveal-sparks i{animation:none!important}.recon-orb .orb-sphere{box-shadow:0 0 10px #b8eaff,0 0 28px rgba(96,157,255,.5)!important}.reasoning-sheet{animation:none!important}}

/* Runtime QA corrections. These deliberately sit last so they supersede older
   prototype experiments without destabilising the approved routes. */
.recon-orb .orb-sphere{background:radial-gradient(circle at 34% 27%,#fff 0 2%,#a9e7ff 3%,#6ba9ff 12%,#775fff 28%,#3c226f 53%,#080a1a 80%);box-shadow:inset -15px -18px 28px rgba(2,1,15,.62),inset 10px 12px 20px rgba(149,221,255,.25),0 0 10px #b8eaff,0 0 28px rgba(96,157,255,.72),0 0 58px rgba(213,91,255,.38)}
.recon-orb .orb-arc{opacity:.12}
.recon-orb.is-compact .orb-sphere{inset:9%;box-shadow:inset -5px -6px 10px rgba(2,1,15,.55),inset 3px 3px 8px rgba(149,221,255,.28),0 0 6px #b8eaff,0 0 15px rgba(96,157,255,.72),0 0 23px rgba(213,91,255,.34)}.recon-orb.is-compact .orb-arc{display:none}
.discover-v5 .search-glass .orb-instruction{position:absolute;z-index:4;left:18px;right:100px;bottom:12px;display:block;margin:0;color:#7d7888;font-size:7.5px;line-height:1.35;letter-spacing:.015em;text-align:left;pointer-events:none}.discover-v5 .search-glass.has-query .orb-instruction{color:#aaa0c9}
.discover-v5.is-listening-space .search-glass .query-submit{position:absolute!important;left:auto!important;right:7px!important;top:auto!important;bottom:7px!important;width:48px!important;height:48px!important;transform:none!important;margin:0!important}.discover-v5.is-listening-space .search-glass .voice-control{right:59px!important;bottom:14px!important;top:auto!important}.discover-v5.is-listening-space .search-glass textarea{padding-right:92px!important;padding-bottom:42px!important}
.premium-taste-controls button span{color:#f0eef5!important}
.recon-notification>.close-control{position:absolute!important;top:17px!important;right:18px!important;left:auto!important}
.recon-ritual.revealed-0 .ritual-card.rank-2{left:0!important;right:auto!important;transform:none!important}.recon-ritual.revealed-0 .ritual-card.rank-1{left:auto!important;right:0!important;transform:none!important}.recon-ritual.revealed-0 .ritual-card.rank-3.active{left:50%!important;right:auto!important;transform:translateX(-50%) translateY(-15px) scale(1.075)!important}
.recon-ritual.revealed-1 .ritual-card.rank-3{left:0!important;right:auto!important;transform:none!important}.recon-ritual.revealed-1 .ritual-card.rank-2{left:50%!important;right:auto!important;transform:translateX(-50%) translateY(-15px) scale(1.075)!important}.recon-ritual.revealed-1 .ritual-card.rank-1{left:auto!important;right:0!important;transform:none!important}
.recon-ritual.revealed-2 .ritual-card.rank-2{left:0!important;right:auto!important;transform:none!important}.recon-ritual.revealed-2 .ritual-card.rank-3{left:auto!important;right:0!important;transform:none!important}.recon-ritual.revealed-2 .ritual-card.rank-1{left:50%!important;right:auto!important;transform:translateX(-50%) translateY(-18px) scale(1.095)!important}
.reasoning-sheet{box-sizing:border-box;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}.reasoning-sheet::-webkit-scrollbar{display:none}
.premium-film-actions .action-bookmark{position:relative;display:block;width:15px;height:19px;border:1.7px solid #8fd2ff;border-radius:3px 3px 5px 5px}.premium-film-actions .action-bookmark::after{content:"";position:absolute;left:2px;right:2px;bottom:-1px;height:7px;background:#11101a;clip-path:polygon(0 0,50% 65%,100% 0)}.premium-film-actions .saved .action-bookmark{background:rgba(117,202,255,.2);box-shadow:0 0 10px rgba(104,199,255,.32)}
.recon-friday.friday-complete .friday-card.rank-1{transform:translateY(-12px) scale(1.12) rotateY(180deg)!important}.recon-friday .friday-actions{bottom:42px!important}
.profile-orb.is-beginning{border:0!important;background:none!important;box-shadow:none!important}.taste-mini-map{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:13px 0 10px}.taste-mini-map>span{display:grid;gap:3px;padding:8px;border:1px solid rgba(133,194,255,.1);border-radius:12px;background:rgba(118,200,255,.035)}.taste-mini-map small{color:#777382;font-size:5.5px;letter-spacing:.08em;text-transform:uppercase}.taste-mini-map b{color:#ddd9e6;font-size:7px;line-height:1.25}.taste-mini-map.insufficient-data{display:block;padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.025)}.taste-mini-map.insufficient-data p{margin:0;color:#86818e;font-size:7px}

/* Final premium coherence pass ------------------------------------------------
   One sensory system governs the orb, reveal, confidence and action language. */
.recon-orb .orb-core{position:absolute;z-index:2;inset:25%;border-radius:50%;background:radial-gradient(circle,#fff 0 3%,#b9edff 7%,#bf72ff 21%,rgba(232,84,255,.45) 36%,transparent 67%);filter:blur(.8px) drop-shadow(0 0 7px #a7e6ff);mix-blend-mode:screen;animation:orb-core-beat 1.9s ease-in-out infinite}
.recon-orb .orb-fibres{position:absolute;inset:4%;border-radius:50%;background:repeating-conic-gradient(from 13deg,transparent 0 7deg,rgba(183,229,255,.7) 8deg,transparent 10deg 18deg,rgba(244,121,255,.5) 19deg,transparent 21deg 31deg);mask:radial-gradient(circle,transparent 0 28%,#000 34% 52%,transparent 61%);filter:blur(.4px) drop-shadow(0 0 4px #75ceff);mix-blend-mode:screen;animation:orb-fibres-turn 4.6s linear infinite}
@keyframes orb-core-beat{50%{transform:scale(1.24);filter:blur(.3px) brightness(1.45) drop-shadow(0 0 12px #f083ff)}}
@keyframes orb-fibres-turn{to{transform:rotate(360deg) scale(1.08)}}

/* The orb visibly gathers energy instead of remaining one fixed illustration. */
.recon-ritual .ritual-orb-wrap{top:124px!important;transition:top .75s var(--recon-ease),transform .75s var(--recon-ease)!important}
.recon-ritual .ritual-orb-wrap .recon-orb{width:174px!important;height:174px!important;transition:width .85s var(--recon-ease),height .85s var(--recon-ease),filter .55s ease!important}
.recon-ritual.phase-gathering .recon-orb{filter:saturate(.76) brightness(.82)!important}
.recon-ritual.phase-charging .recon-orb{width:206px!important;height:206px!important;filter:saturate(1.22) brightness(1.13) drop-shadow(0 0 18px rgba(231,94,255,.28))!important}
.recon-ritual.phase-charging .orb-sphere{animation-duration:.82s!important;box-shadow:inset -15px -18px 28px rgba(2,1,15,.55),0 0 14px #fff,0 0 42px #73c7ff,0 0 84px rgba(243,86,255,.72)!important}
.recon-ritual.phase-charging .orb-sparks i{animation-duration:1.15s!important;background:#fff;box-shadow:0 0 7px #77d6ff,0 0 16px #f079ff!important}
.recon-ritual.phase-compressed .recon-orb{width:146px!important;height:146px!important;filter:saturate(1.42) brightness(1.34) drop-shadow(0 0 23px rgba(244,89,255,.48))!important}
.recon-ritual.phase-compressed .orb-core{animation-duration:.62s!important}.recon-ritual.phase-compressed .orb-fibres{animation-duration:1.35s!important}
.recon-ritual.phase-bursting .recon-orb{width:218px!important;height:218px!important;filter:brightness(1.5) saturate(1.38)!important}
.recon-ritual.phase-distributing .recon-orb{width:172px!important;height:172px!important}
.recon-ritual.phase-bursting .ritual-release-wave{border-color:rgba(237,132,255,.8)!important;box-shadow:0 0 22px #78ceff,0 0 42px rgba(237,104,255,.62)!important}
.recon-ritual .ritual-energy-paths i{width:1px!important;background:linear-gradient(#fff 0 2%,#eea2ff 10%,#83d5ff 37%,rgba(222,91,255,.38) 66%,transparent)!important;filter:drop-shadow(0 0 5px #8fdcff) drop-shadow(0 0 9px rgba(236,103,255,.68))!important}

/* Final reveal owns a unique charged state and an unmistakable payoff. */
.recon-ritual.revealed-2 .ritual-card.rank-1.final-charged .premium-mystery-back{border-color:rgba(243,143,255,.8)!important;box-shadow:0 24px 70px rgba(0,0,0,.58),0 0 0 1px rgba(125,215,255,.33),0 0 22px rgba(118,207,255,.55),0 0 54px rgba(233,97,255,.48)!important;animation:final-card-float 2s ease-in-out infinite}
.recon-ritual.revealed-2 .ritual-card.rank-1.final-charged .film-question em{color:#fff;text-shadow:0 0 11px #fff,0 0 23px #7bd7ff,0 0 38px #ef74ff!important}
.recon-ritual .ritual-card.rank-1.opening{z-index:30!important;filter:brightness(1.22) saturate(1.22) drop-shadow(0 0 28px rgba(236,113,255,.48))!important}
.recon-ritual .ritual-card.rank-1.opening::after{content:"";position:absolute;z-index:8;inset:-24px;border:1px solid rgba(209,235,255,.7);border-radius:31px;box-shadow:0 0 25px #88d8ff,0 0 48px rgba(238,108,255,.55);animation:final-corona 1.32s var(--recon-ease) both;pointer-events:none}
.recon-ritual .ritual-card-front small,.recon-friday .verified-friday-front small{display:inline-flex!important;align-self:flex-start;padding:3px 6px!important;border:1px solid rgba(137,207,255,.18);border-radius:8px;background:rgba(28,26,48,.74);backdrop-filter:blur(8px)}
.recon-ritual .ritual-card.rank-1 .ritual-card-front small,.recon-friday .rank-1 .verified-friday-front small{color:#fff!important;border-color:rgba(242,145,255,.36)!important;background:linear-gradient(110deg,rgba(98,158,255,.34),rgba(221,86,255,.34))!important;box-shadow:0 0 14px rgba(223,102,255,.26)}
@keyframes final-card-float{50%{transform:translateY(-3px);filter:brightness(1.16)}}
@keyframes final-corona{0%{opacity:0;transform:scale(.72)}35%{opacity:1}100%{opacity:0;transform:scale(1.34)}}

/* Settled result: every layer gets its own breathing room. */
.phase-settled .ritual-copy{top:144px!important}.phase-settled .ritual-copy .eyebrow{font-size:7px!important;letter-spacing:.18em!important}.phase-settled .ritual-copy h1{margin-top:7px!important}
.phase-settled .ritual-understood{top:211px!important;min-height:54px;box-sizing:border-box;padding:10px 12px!important}.phase-settled .ritual-understood>span{line-height:1.2!important}.phase-settled .ritual-understood>div{margin-top:8px!important;gap:6px!important}
.phase-settled .ritual-card-stage{top:286px!important}.phase-settled .ritual-actions{left:22px!important;right:22px!important;bottom:16px!important}
.ritual-card-front.verified-film-card strong{font-size:11px!important;line-height:1.2!important}.ritual-card-front.verified-film-card small{font-size:7.3px!important}.ritual-card-front.verified-film-card em{font-size:6.6px!important;line-height:1.25!important}

/* Discover keeps the mic and orb as separate, obvious controls. */
.discover-v5.is-listening-space .search-glass .query-submit{right:5px!important}
.discover-v5.is-listening-space .search-glass .voice-control{right:66px!important}
.discover-v5 .query-footer .query-submit .orb-aura{inset:20%!important;filter:blur(4px)!important;opacity:.74}.discover-v5 .query-footer .query-submit .orb-sparks i{transform:rotate(var(--angle)) translateY(-16px)!important}
.discover-v5 .search-glass .orb-instruction{right:112px!important;color:#817c8b!important;font-size:7.7px!important}.discover-v5 .search-glass.has-query .orb-instruction{color:#b3a6cb!important}

/* Film detail actions use one centred, blue, 22px glyph system. */
.premium-film-actions button{display:grid!important;grid-template-rows:25px auto!important;place-items:center!important;align-content:center!important;min-height:62px!important;color:#8fd2ff!important;padding:8px 3px!important}
.premium-film-actions button span{color:#d8d6df!important;font-size:7.5px!important}.premium-film-actions button i{display:block!important;width:22px!important;height:22px!important;margin:0!important;box-sizing:border-box!important;color:#8fd2ff!important;filter:drop-shadow(0 0 6px rgba(99,192,255,.38))!important}
.premium-film-actions .action-bookmark{width:17px!important;height:21px!important;border-color:#8fd2ff!important;margin-top:0!important}
.premium-film-actions .action-play{width:22px!important;height:22px!important;border-color:#8fd2ff!important}.premium-film-actions .action-play::after{left:8px!important;top:6px!important;border-left-color:#8fd2ff!important}
.premium-film-actions .action-share{width:19px!important;height:18px!important;border-color:#8fd2ff!important;margin-top:4px!important}.premium-film-actions .action-share::before{border-color:#8fd2ff!important}.premium-film-actions .action-share::after{background:#8fd2ff!important}
.premium-film-actions .action-x{width:22px!important;height:22px!important}.premium-film-actions .action-x::before,.premium-film-actions .action-x::after{left:10px!important;top:2px!important;width:1.6px!important;height:18px!important;border-radius:2px;background:#8fd2ff!important}
.confidence-badge{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border:1px solid rgba(141,201,255,.18);border-radius:11px;background:rgba(100,157,231,.09);color:#bfeaff!important;font-size:8px!important;box-shadow:inset 0 1px rgba(255,255,255,.07)}
.confidence-badge.exceptional-match{border-color:rgba(237,133,255,.36);background:linear-gradient(105deg,rgba(93,166,255,.19),rgba(224,91,255,.2));color:#fff!important;box-shadow:0 0 16px rgba(218,91,255,.17),inset 0 1px rgba(255,255,255,.12)}
.reasoning-disclosure{display:flex!important;align-items:center!important;justify-content:space-between!important}.reasoning-detail{max-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;opacity:0;transform:translateY(-5px);transition:max-height .48s var(--recon-ease),opacity .3s ease,transform .48s var(--recon-ease),margin .48s var(--recon-ease),padding .48s var(--recon-ease)!important}.reasoning-detail.is-open{max-height:180px!important;margin-top:12px!important;padding:13px!important;opacity:1;transform:none}

/* Friday: revealed posters stay visible, the active card remains central, and
   the final controls clear the home indicator. */
.recon-friday .friday-stage{position:absolute!important;left:18px!important;right:18px!important;top:188px!important;height:300px!important;margin:0!important}
.recon-friday .friday-card{top:36px!important;width:124px!important;height:238px!important;opacity:.24!important;transition:left .72s var(--recon-ease),right .72s var(--recon-ease),top .72s var(--recon-ease),transform .86s var(--recon-ease),opacity .38s!important}
.recon-friday .friday-card.is-active{left:50%!important;right:auto!important;top:20px!important;z-index:12!important;opacity:1!important;transform:translateX(-50%) scale(1.04)!important}
.recon-friday .friday-card.open{opacity:1!important;z-index:5!important;transform:rotateY(180deg) scale(.86)!important}
.recon-friday.friday-progress-0 .rank-2{left:8px!important;right:auto!important}.recon-friday.friday-progress-0 .rank-1{left:auto!important;right:8px!important}
.recon-friday.friday-progress-1 .rank-3{left:4px!important;right:auto!important;top:49px!important;transform:rotateY(180deg) scale(.84)!important;z-index:5!important}.recon-friday.friday-progress-1 .rank-1{left:auto!important;right:4px!important}
.recon-friday.friday-progress-2 .rank-3{left:2px!important;right:auto!important;top:52px!important;transform:rotateY(180deg) scale(.78)!important}.recon-friday.friday-progress-2 .rank-2{left:auto!important;right:2px!important;top:52px!important;transform:rotateY(180deg) scale(.78)!important}.recon-friday.friday-progress-2 .rank-1{left:50%!important;right:auto!important}
.recon-friday .verified-friday-front{backface-visibility:hidden!important;transform:rotateY(180deg)!important;background-color:#0b0b14!important;box-sizing:border-box!important}
.recon-friday .friday-hint{position:absolute!important;left:18px!important;right:18px!important;bottom:42px!important;margin:0!important}
.recon-friday.friday-complete .friday-stage{top:194px!important;height:242px!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;padding:0!important;align-items:start!important}
.recon-friday.friday-complete .friday-card{position:relative!important;inset:auto!important;width:100%!important;height:226px!important;opacity:1!important;transform:rotateY(180deg)!important}
.recon-friday.friday-complete .friday-card.rank-1{transform:rotateY(180deg) translateY(-10px) scale(1.04)!important;z-index:6!important}
.recon-friday.friday-complete .friday-actions{left:24px!important;right:24px!important;bottom:53px!important;box-sizing:border-box!important}.recon-friday.friday-complete .friday-actions .primary-button{width:100%!important;box-sizing:border-box!important}.recon-friday.friday-complete .friday-actions .quiet-button{height:34px!important;margin-top:5px!important}

/* A fine energy corona replaces the generic radial firework. */
.premium-reveal-sparks{inset:-18%!important;overflow:visible!important}.premium-reveal-sparks::before,.premium-reveal-sparks::after{content:"";position:absolute;inset:12%;border:1px solid rgba(173,228,255,.8);border-radius:26px;opacity:0;box-shadow:0 0 18px #77d3ff,0 0 34px rgba(238,111,255,.5)}
.friday-card.opening .premium-reveal-sparks::before{animation:friday-corona 1.15s var(--recon-ease) both}.friday-card.opening .premium-reveal-sparks::after{animation:friday-corona 1.15s .12s var(--recon-ease) both}
.premium-reveal-sparks i{width:3px!important;height:3px!important;border-radius:50%!important;background:#e8f8ff!important;box-shadow:0 0 6px #76d4ff,0 0 12px #ec78ff!important;transform-origin:0 0!important;opacity:0}
.friday-card.opening .premium-reveal-sparks i{animation:friday-particle 1.05s calc(var(--particle-delay,0)*1ms) var(--recon-ease) both}
.premium-reveal-sparks i:nth-child(1){left:20%;top:18%;--px:-20px;--py:-32px}.premium-reveal-sparks i:nth-child(2){left:50%;top:8%;--px:2px;--py:-38px}.premium-reveal-sparks i:nth-child(3){left:80%;top:18%;--px:22px;--py:-30px}.premium-reveal-sparks i:nth-child(4){left:91%;top:42%;--px:36px;--py:-8px}.premium-reveal-sparks i:nth-child(5){left:88%;top:72%;--px:30px;--py:24px}.premium-reveal-sparks i:nth-child(6){left:66%;top:91%;--px:14px;--py:38px}.premium-reveal-sparks i:nth-child(7){left:34%;top:91%;--px:-14px;--py:38px}.premium-reveal-sparks i:nth-child(8){left:10%;top:72%;--px:-31px;--py:22px}.premium-reveal-sparks i:nth-child(9){left:7%;top:42%;--px:-37px;--py:-6px}.premium-reveal-sparks i:nth-child(10){left:27%;top:34%;--px:-15px;--py:-17px}.premium-reveal-sparks i:nth-child(11){left:72%;top:38%;--px:17px;--py:-13px}.premium-reveal-sparks i:nth-child(12){left:50%;top:70%;--px:0;--py:22px}
@keyframes friday-corona{0%{opacity:0;transform:scale(.72)}28%{opacity:1}100%{opacity:0;transform:scale(1.32)}}
@keyframes friday-particle{0%{opacity:0;transform:translate(0,0) scale(.5)}25%{opacity:1}100%{opacity:0;transform:translate(var(--px),var(--py)) scale(.2)}}

@media (max-height:760px){
  .recon-ritual .ritual-orb-wrap{top:102px!important}.recon-ritual .ritual-orb-wrap .recon-orb{width:154px!important;height:154px!important}.recon-ritual.phase-charging .recon-orb{width:184px!important;height:184px!important}.recon-ritual.phase-compressed .recon-orb{width:132px!important;height:132px!important}.recon-ritual.phase-bursting .recon-orb{width:194px!important;height:194px!important}
  .phase-settled .ritual-copy{top:106px!important}.phase-settled .ritual-understood{top:166px!important;min-height:52px}.phase-settled .ritual-card-stage{top:242px!important}.phase-settled .ritual-actions{bottom:8px!important}
  .recon-friday .friday-stage{top:172px!important;height:276px!important}.recon-friday .friday-card{height:218px!important}.recon-friday.friday-complete .friday-stage{top:174px!important;height:222px!important}.recon-friday.friday-complete .friday-card{height:208px!important}.recon-friday.friday-complete .friday-actions{bottom:49px!important}
}

@media (prefers-reduced-motion:reduce){.recon-orb .orb-core,.recon-orb .orb-fibres,.final-charged .premium-mystery-back,.premium-reveal-sparks::before,.premium-reveal-sparks::after{animation:none!important}.final-charged .premium-mystery-back{box-shadow:0 0 0 2px rgba(135,211,255,.4),0 0 30px rgba(226,103,255,.38)!important}}
.screen.fluid-departure{animation-duration:.34s!important}

/* Live-device optical corrections. */
.discover-v5.is-listening-space .search-glass .query-submit{right:6px!important;width:44px!important;height:44px!important}
.discover-v5.is-listening-space .search-glass .voice-control{right:62px!important;width:36px!important;height:36px!important}
.discover-v5 .query-footer .query-submit .orb-aura{inset:28%!important;filter:blur(3px)!important}.discover-v5.is-listening-space .search-glass textarea{padding-right:112px!important}
.discover-v5 .search-glass textarea:focus-visible{outline:none!important}.discover-v5 .search-glass:has(textarea:focus){border-color:rgba(126,196,255,.34)!important;box-shadow:inset 0 1px rgba(255,255,255,.1),0 0 0 1px rgba(223,116,255,.1),0 0 38px rgba(104,147,255,.14)!important}
.recon-ritual.phase-settled .ritual-understood>div{gap:4px!important;flex-wrap:nowrap!important}.recon-ritual.phase-settled .ritual-understood i{padding:3px 4px!important;font-size:5.3px!important;white-space:nowrap}.recon-ritual.phase-settled .ritual-card-stage{top:334px!important}
.recon-friday .friday-stage{top:218px!important}.recon-friday .friday-card{width:120px!important;height:228px!important}.recon-friday .friday-card.is-active{top:18px!important;transform:translateX(-50%) scale(.96)!important}.recon-friday.friday-progress-1 .rank-3{left:-3px!important;top:48px!important;transform:rotateY(180deg) scale(.68)!important}.recon-friday.friday-progress-1 .rank-1{right:-3px!important}.recon-friday.friday-progress-2 .rank-3{left:-3px!important;top:50px!important;transform:rotateY(180deg) scale(.66)!important}.recon-friday.friday-progress-2 .rank-2{right:-3px!important;top:50px!important;transform:rotateY(180deg) scale(.66)!important}
.recon-friday.friday-progress-2 .rank-1 .premium-mystery-back{border-color:rgba(242,147,255,.72)!important;box-shadow:0 22px 62px rgba(0,0,0,.56),0 0 0 1px rgba(126,211,255,.3),0 0 22px rgba(117,207,255,.48),0 0 48px rgba(232,96,255,.42)!important}
.recon-friday.friday-complete .friday-stage{top:255px!important}.recon-friday.friday-complete .friday-actions{position:absolute!important;top:auto!important;left:24px!important;right:24px!important;bottom:53px!important;width:auto!important;margin:0!important}
@media (max-height:760px){.recon-ritual.phase-settled .ritual-card-stage{top:290px!important}.recon-friday .friday-stage{top:201px!important}.recon-friday.friday-complete .friday-stage{top:255px!important}.recon-friday.friday-complete .friday-actions{bottom:49px!important}}
/* Full recommendation context is optional reading, never a spoiler-safe peek. */
.film-v5 .film-recommendation-context{margin:18px 0 26px;border:1px solid rgba(183,151,224,.26);border-radius:20px;background:linear-gradient(135deg,rgba(112,76,159,.15),rgba(18,17,30,.82));overflow:hidden}
.film-v5 .film-recommendation-context summary{display:list-item;margin:0;padding:18px 20px;min-height:52px;cursor:pointer;color:#eee1fa;font-size:1rem;line-height:1.5;overflow-wrap:anywhere}
.film-v5 .film-recommendation-context summary span{font-weight:650}
.film-v5 .film-recommendation-context summary small{display:block;padding-left:1.05em;color:#c7bfce;font-size:.875rem;font-weight:400}
.film-v5 .film-recommendation-context summary:focus-visible{outline:2px solid #cbaaec;outline-offset:-4px;border-radius:18px}
.film-v5 .film-recommendation-context[open] summary{border-bottom:1px solid rgba(183,151,224,.18)}
.film-v5 .film-context-copy{padding:18px 20px 22px}
.film-v5 .film-context-copy p,.film-v5 .film-context-unavailable p{margin:0;color:#d8d2df;font-size:1rem;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}

/* (FILM PAGE FIXES, 29 October 2026) no synopsis and no age rating: no section; the hidden notes element is only a place */
.film-v5 .spoiler-safe.film-no-synopsis:not(:has(.ds-rating)){display:none}.film-v5 .film-content-notes[hidden]{display:none!important}

/* ===== public/assets/triptic-completion-polish.css ===== */
/* TRIPTIC completion polish: final accessibility, continuity and tactile layer. */
:root{--mood-a:111,117,255;--mood-b:215,98,255}
.global-trio-atmosphere{overflow:hidden}
.device[data-context-mood="frost"]{--mood-a:93,187,255;--mood-b:137,115,255}.device[data-context-mood="ember"]{--mood-a:255,131,174;--mood-b:190,93,255}.device[data-context-mood="cosmic"]{--mood-a:69,157,255;--mood-b:186,101,255}.device[data-context-mood="nocturne"]{--mood-a:86,85,230;--mood-b:234,72,184}.device[data-context-mood="rain"]{--mood-a:61,165,229;--mood-b:116,94,218}
.device[data-atmosphere="living"] .discover-v5::after,.device[data-atmosphere="ceremony"] .recon-ritual::after{content:"";position:absolute;z-index:0;inset:-16%;pointer-events:none;background:radial-gradient(circle at 47% 34%,rgba(var(--mood-a),.105),transparent 28%),radial-gradient(circle at 57% 67%,rgba(var(--mood-b),.075),transparent 38%);filter:blur(20px);animation:context-atmosphere 9s ease-in-out infinite alternate}.device[data-atmosphere="poster"] .recon-film::before{content:"";position:fixed;z-index:0;inset:34% -25% -18%;pointer-events:none;background:radial-gradient(ellipse at 50% 0,rgba(var(--mood-a),.16),transparent 43%),radial-gradient(ellipse at 85% 36%,rgba(var(--mood-b),.075),transparent 44%);filter:blur(25px)}.recon-film>.film-content{position:relative;z-index:1}@keyframes context-atmosphere{to{transform:translate3d(2.8%,-1.4%,0) scale(1.04);opacity:.78}}
.continuity-poster{position:fixed;z-index:99999;display:block;pointer-events:none;background-position:center;background-size:cover;background-color:#11101a;box-shadow:0 28px 80px rgba(0,0,0,.58),0 0 0 1px rgba(176,201,255,.18),0 0 36px rgba(var(--mood-a),.22);will-change:left,top,width,height,border-radius,filter;overflow:hidden}
.ritual-card,.friday-card{perspective:760px;transform-style:preserve-3d}.premium-mystery-back{transform:rotateX(var(--touch-y,0deg)) rotateY(var(--touch-x,0deg));transition:transform .18s cubic-bezier(.2,0,0,1),filter .18s ease;will-change:transform}.ritual-card.active:active .premium-mystery-back,.friday-card.is-active:active .premium-mystery-back{transform:rotateX(var(--touch-y,0deg)) rotateY(var(--touch-x,0deg)) translateZ(-5px) scale(.982);filter:brightness(1.14)}
.ritual-card.opening .verified-film-card,.friday-card.opening .verified-friday-front{animation:poster-resolve .7s cubic-bezier(.16,1,.3,1) both}.ritual-card.opening .verified-film-card::after,.friday-card.opening .verified-friday-front::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 22%,rgba(190,226,255,.28) 48%,transparent 72%);transform:translateX(-125%);animation:poster-resolve-sweep .72s cubic-bezier(.2,.8,.2,1) both}@keyframes poster-resolve{0%{filter:blur(8px) brightness(1.36) saturate(.45);transform:scale(1.055)}46%{filter:blur(2.5px) brightness(1.18) saturate(.82)}100%{filter:none;transform:scale(1)}}@keyframes poster-resolve-sweep{to{transform:translateX(125%)}}
.premium-film-actions button,.premium-result-toolbar button{position:relative;overflow:visible}.premium-film-actions button.save-confirmed,.premium-result-toolbar button.save-confirmed{color:#dff6ff!important;border-color:rgba(112,203,255,.45)!important;background:linear-gradient(145deg,rgba(55,120,207,.22),rgba(116,70,203,.18))!important;box-shadow:0 0 0 1px rgba(132,222,255,.12),0 0 24px rgba(80,171,255,.16)!important}.save-confirmed::after{content:"";position:absolute;left:50%;bottom:-3px;width:26px;height:2px;border-radius:9px;background:#87dbff;box-shadow:0 0 10px #68bfff;transform:translateX(-50%);animation:save-receipt .68s cubic-bezier(.16,1,.3,1) both}@keyframes save-receipt{0%{opacity:0;scale:.15 1}45%{opacity:1;scale:1.1 1}100%{opacity:0;scale:1 1;translate:0 -8px}}
.device.manual-solid .glass-panel,.device.manual-solid .persistent-glass-nav,.device.manual-solid .content-material,.device.manual-solid .fluid-toast,.device.manual-solid .search-glass,.device.manual-solid .why-panel,.device.manual-solid .settings-group,.device.manual-solid .premium-mystery-back{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background-color:#15131f!important;background-image:none!important;border-color:rgba(255,255,255,.2)!important;box-shadow:0 0 0 1px rgba(255,255,255,.035)!important}.device.manual-solid .tab-lens{background:#30274b!important;box-shadow:inset 0 0 0 1px rgba(168,207,255,.34)!important}.device.manual-solid .film-gradient{background:linear-gradient(transparent 15%,#09090d 94%)!important}
.device.manual-large-text .screen{font-size:116%}.device.manual-large-text h1{line-height:1.08!important;letter-spacing:-.035em!important}.device.manual-large-text p,.device.manual-large-text button,.device.manual-large-text small{line-height:1.35}.device.manual-large-text .ritual-copy h1,.device.manual-large-text .friday-copy h1{font-size:25px!important}.device.manual-large-text .ritual-copy p,.device.manual-large-text .friday-copy p{font-size:12px!important}.device.manual-large-text .film-title h1{font-size:31px!important;line-height:1.02!important}.device.manual-large-text .why-panel,.device.manual-large-text .cast-section,.device.manual-large-text .watch-options{font-size:105%}.device.manual-large-text .persistent-glass-nav button{font-size:10px!important}.device.manual-large-text .ritual-actions,.device.manual-large-text .friday-actions{bottom:48px!important}
.device.manual-reduced-motion *,.device.manual-reduced-motion *::before,.device.manual-reduced-motion *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.device.manual-reduced-motion .fluid-departure,.device.manual-reduced-motion .continuity-poster,.device.manual-reduced-motion .premium-reveal-sparks,.device.manual-reduced-motion .ritual-energy-paths,.device.manual-reduced-motion .ritual-pressure-wave,.device.manual-reduced-motion .ritual-release-wave{display:none!important}.device.manual-reduced-motion .ritual-card.active,.device.manual-reduced-motion .friday-card.is-active{outline:2px solid rgba(153,211,255,.88);outline-offset:4px;box-shadow:0 0 0 7px rgba(109,116,255,.14),0 0 26px rgba(215,91,255,.22)!important}
@media (prefers-reduced-motion:reduce){.continuity-poster{display:none!important}.device[data-atmosphere] .discover-v5::after,.device[data-atmosphere] .recon-ritual::after{animation:none!important}}
@media (max-width:360px){.device.manual-large-text .ritual-card-stage,.device.manual-large-text .friday-stage{transform:scale(.94);transform-origin:center}.device.manual-large-text .premium-result-toolbar{gap:3px!important}.device.manual-large-text .premium-result-toolbar button{font-size:9px!important}}
@media (max-height:760px){.recon-friday.friday-complete .friday-copy h1{font-size:25.5px!important;line-height:1.04!important}.recon-friday.friday-complete .friday-copy p{font-size:10px!important;line-height:1.3!important}.recon-friday.friday-complete .friday-stage{top:232px!important;transform:scale(.76)!important;transform-origin:top center!important}.recon-friday.friday-complete .friday-actions{bottom:41px!important}}

/* Final settled-result optical rhythm at contemporary iPhone heights. */
@media (min-height:761px){.recon-ritual.phase-settled .ritual-copy{top:158px!important;bottom:auto!important;height:auto!important}.recon-ritual.phase-settled .ritual-understood{top:235px!important;bottom:auto!important;min-height:62px!important;height:auto!important;padding:9px 12px 10px!important}.recon-ritual.phase-settled .ritual-understood>div{margin-top:7px!important;gap:5px!important}.recon-ritual.phase-settled .ritual-understood i{padding:4px 5px!important;font-size:6px!important;line-height:1.15!important}.recon-ritual.phase-settled .ritual-card-stage{top:336px!important}.recon-ritual.phase-settled .ritual-actions{bottom:78px!important}.recon-friday.friday-complete .friday-actions{bottom:170px!important}}

/* ===== public/assets/triptic-media-integration.css ===== */
/* Real media integration. Loaded after the approved completion layer. */
.media-trailer{position:relative;min-height:204px;margin:4px 0 17px;overflow:hidden;border:1px solid rgba(172,137,255,.24);border-radius:24px;background:linear-gradient(145deg,#12101a,#07070b);box-shadow:0 22px 55px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.08);isolation:isolate}
.media-trailer-art{position:absolute;inset:-8%;z-index:-3;background-image:var(--media-poster);background-position:center 32%;background-size:cover;filter:saturate(.7) brightness(.47);transform:scale(1.08);transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .6s ease}
.media-trailer-scrim{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(4,4,8,.88) 0%,rgba(5,5,10,.58) 52%,rgba(3,3,7,.34)),radial-gradient(circle at 76% 40%,rgba(124,80,255,.24),transparent 44%)}
.media-trailer.is-ready::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:linear-gradient(105deg,transparent 20%,rgba(110,199,255,.18),rgba(196,92,255,.24),transparent 76%);background-size:240% 100%;animation:media-sheen 8s ease-in-out infinite;pointer-events:none}
.media-trailer-copy{position:absolute;left:19px;top:19px;right:72px;z-index:2;display:grid;gap:4px}
.media-trailer-copy>span{font-size:9px;font-weight:720;letter-spacing:.18em;color:#bcaaff}
.media-trailer-copy h2{margin:0;color:#fff;font-size:18px;line-height:1.16;letter-spacing:-.025em}
.media-trailer-copy p{margin:0;max-width:240px;color:rgba(238,236,245,.66);font-size:10px;line-height:1.35}
.media-trailer-play{position:absolute;left:19px;bottom:18px;z-index:3;display:flex;align-items:center;gap:10px;height:42px;padding:0 16px 0 9px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(8,8,13,.55);color:#fff;box-shadow:0 9px 24px rgba(0,0,0,.34);backdrop-filter:blur(17px) saturate(145%);-webkit-backdrop-filter:blur(17px) saturate(145%)}
.media-trailer-play i{position:relative;width:27px;height:27px;border-radius:50%;background:linear-gradient(145deg,#73c9ff,#9369ff 55%,#e170ff);box-shadow:0 0 18px rgba(135,105,255,.62)}
.media-trailer-play i::after{content:"";position:absolute;left:11px;top:8px;border-left:7px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}
.media-trailer-play span{font-size:12px;font-weight:650}
.media-trailer-play:active{transform:scale(.965)}
.media-trailer-external{position:absolute;right:16px;bottom:20px;z-index:3;display:flex;align-items:center;gap:6px;padding:8px 0;color:rgba(235,232,242,.72);font-size:10px;text-decoration:none}
.media-trailer-external i{font-style:normal;color:#86caff}
@media (hover: hover) and (pointer: fine){.media-trailer:hover .media-trailer-art{filter:saturate(.82) brightness(.53);transform:scale(1.045)}}/* (29 October 2026) hover only for a real pointer: a finger leaves :hover on whatever it last touched (hub/docs/TASTE-INTRO-2026-10-29.md) */
.media-trailer.is-playing{height:auto;min-height:0;aspect-ratio:16/9;background:#000}
.media-trailer.is-playing iframe{display:block;width:100%;height:100%;border:0;background:#000}
.media-player-meta{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:12px;padding:22px 13px 10px;background:linear-gradient(transparent,rgba(0,0,0,.82));pointer-events:none}
.media-player-meta span,.media-player-meta a{color:rgba(255,255,255,.74);font-size:9px;text-decoration:none}.media-player-meta a{pointer-events:auto;color:#9ed9ff}
/* Missing-trailer copy and its exit link have separate reading/touch space. */
#device .media-trailer-unavailable{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:20px;min-height:0}
#device .media-trailer-unavailable .media-trailer-copy{position:static;flex:none;min-width:0;gap:8px}
#device .media-trailer-unavailable .media-trailer-copy>span{font-size:.75rem}
#device .media-trailer-unavailable .media-trailer-copy p{max-width:none;font-size:.875rem;line-height:1.45}
#device .media-trailer-unavailable .media-trailer-external{position:static;align-self:flex-start;min-height:44px;padding:0;font-size:.875rem;line-height:1.4;color:#d8c9ee}

.media-watch-options{display:block!important;margin:18px 0 20px;padding:16px;border:1px solid rgba(255,255,255,.105);border-radius:23px;background:linear-gradient(145deg,rgba(23,21,32,.76),rgba(10,10,15,.86));box-shadow:inset 0 1px rgba(255,255,255,.055),0 18px 44px rgba(0,0,0,.25);backdrop-filter:blur(20px) saturate(125%);-webkit-backdrop-filter:blur(20px) saturate(125%)}
.media-watch-options>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 2px 13px}.media-watch-options>header>div{display:grid;gap:3px}.media-watch-options>header span{font-size:14px;font-weight:680;color:#f5f3f8}.media-watch-options>header small{font-size:9px;color:#8f8a99;line-height:1.35}
.availability-state{display:flex!important;align-items:center;gap:5px;flex:none!important;padding:5px 7px!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:999px!important;background:rgba(255,255,255,.045)!important;color:#a39daa!important;font-size:8px!important;font-weight:650!important;letter-spacing:.04em!important}.availability-state i{width:5px;height:5px;border-radius:50%;background:#8d8596}.availability-state.is-verified{color:#a8e7d4!important}.availability-state.is-verified i{background:#76dfbd;box-shadow:0 0 8px rgba(118,223,189,.5)}
.provider-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.provider-grid.provider-count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.provider-destination,.provider-all-link{display:flex!important;align-items:center!important;border:1px solid rgba(255,255,255,.095)!important;background:rgba(255,255,255,.035)!important;color:#fff!important;text-decoration:none!important;transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease,background .22s ease!important}
.provider-destination{min-width:0;height:78px!important;flex-direction:column!important;justify-content:center!important;gap:6px!important;padding:8px 5px!important;border-radius:17px!important;text-align:center}.provider-destination>span{display:grid;min-width:0;gap:2px}.provider-destination>span strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;color:#f7f5fa}.provider-destination>span small{font-size:7px;color:#88828f}.provider-destination>.provider-arrow{display:none}
@media (hover: hover) and (pointer: fine){.provider-destination:hover,.provider-all-link:hover{transform:translateY(-1px);border-color:rgba(142,196,255,.28)!important;background:rgba(118,98,178,.09)!important}}/* (29 October 2026) hover only for a real pointer: a finger leaves :hover on whatever it last touched (hub/docs/TASTE-INTRO-2026-10-29.md) */.provider-destination:active,.provider-all-link:active{transform:scale(.975)}
.provider-brand{position:relative;display:flex!important;align-items:center;justify-content:center;flex:none;width:30px;height:24px;color:#fff;font-style:normal}.provider-brand span{font-size:11px;font-weight:680}.provider-apple i{position:relative;width:13px;height:15px;margin-right:2px;border-radius:48% 48% 52% 52% / 56% 56% 44% 44%;background:#fff;transform:rotate(-5deg)}.provider-apple i::before{content:"";position:absolute;width:6px;height:4px;right:0;top:-4px;border-radius:7px 0 7px 0;background:#fff;transform:rotate(-22deg)}.provider-apple i::after{content:"";position:absolute;right:-3px;top:4px;width:5px;height:6px;border-radius:50%;background:#16141d}.provider-prime{display:grid!important;place-content:center}.provider-prime span{font-size:11px}.provider-prime i{width:25px;height:7px;margin-top:-2px;border-bottom:2px solid #5cc8ff;border-radius:0 0 50% 50%;transform:rotate(-4deg)}.provider-netflix{font-size:20px!important;font-family:Arial,sans-serif;color:#e50914}.provider-all i{width:22px;height:17px;border:1px solid rgba(159,207,255,.8);border-radius:6px;box-shadow:inset 0 0 0 4px rgba(117,94,255,.18)}
.provider-apple img{width:14px;height:17px;margin-right:2px;filter:invert(1);object-fit:contain}
.provider-all-link{height:52px!important;margin-top:8px;padding:0 11px!important;gap:10px!important;border-radius:16px!important}.provider-all-link>span{display:grid;flex:1;text-align:left;gap:2px}.provider-all-link>span strong{font-size:10px}.provider-all-link>span small{font-size:8px;color:#898491}.provider-all-link>i{font-style:normal;color:#86caff;font-size:11px}
.provider-trust-note{margin:10px 2px 0!important;color:#716c78!important;font-size:8px!important;line-height:1.45!important}

@keyframes media-sheen{0%,58%,100%{background-position:120% 50%;opacity:.35}72%{background-position:-120% 50%;opacity:.8}}
@media(prefers-reduced-motion:reduce){.media-trailer.is-ready::after{animation:none}.media-trailer-art,.provider-destination,.provider-all-link{transition:none!important}}
.manual-reduced-motion .media-trailer.is-ready::after{animation:none}.manual-reduced-motion .media-trailer-art,.manual-reduced-motion .provider-destination,.manual-reduced-motion .provider-all-link{transition:none!important}
.manual-solid .media-trailer-play,.manual-solid .media-watch-options{backdrop-filter:none;-webkit-backdrop-filter:none;background:#121019!important}
.manual-large-text .media-trailer-copy h2{font-size:20px}.manual-large-text .provider-destination{height:88px!important}.manual-large-text .provider-destination>span strong{white-space:normal}

/* ===== public/assets/triptic-functional-completion.css ===== */
/* Launch functionality UI: continuity, reminders and trailer docking. */
.media-trailer.is-playing{z-index:8;transition:width .38s cubic-bezier(.16,1,.3,1),transform .38s cubic-bezier(.16,1,.3,1),box-shadow .38s ease}
.media-trailer.is-playing.is-docked{position:sticky;top:8px;width:62%;margin-left:auto;transform:translateZ(0);border-radius:17px;box-shadow:0 22px 55px rgba(0,0,0,.72),0 0 0 1px rgba(140,203,255,.22);z-index:40}
.media-trailer.is-playing.is-docked .media-player-meta{display:none}.media-player-close{position:absolute;right:7px;top:7px;z-index:4;width:26px;height:26px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(5,5,9,.72);backdrop-filter:blur(14px);color:#fff;font-size:17px;line-height:1}
.availability-reminder{display:flex;width:100%;align-items:center;gap:11px;margin-top:8px;padding:11px;border:1px solid rgba(122,187,255,.13);border-radius:16px;background:linear-gradient(110deg,rgba(51,103,167,.1),rgba(123,72,182,.07));color:#fff;text-align:left}.availability-reminder>i{width:29px;height:29px;border:1px solid rgba(137,205,255,.35);border-radius:50%;box-shadow:inset 0 0 13px rgba(84,170,255,.16)}.availability-reminder>span{display:grid;gap:2px;flex:1}.availability-reminder strong{font-size:10px}.availability-reminder small{font-size:8px;color:#918c99}.availability-reminder>b{color:#8fd4ff}.availability-reminder.is-set{border-color:rgba(118,223,189,.28)}
.functional-sheet-backdrop{position:absolute;inset:0;z-index:90;background:rgba(0,0,0,.56);backdrop-filter:blur(6px)}.functional-sheet{position:absolute;left:8px;right:8px;bottom:8px;z-index:91;padding:10px 18px 18px;border:1px solid rgba(255,255,255,.12);border-radius:27px;background:linear-gradient(160deg,rgba(29,25,43,.97),rgba(8,8,13,.99));box-shadow:0 -20px 70px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.08);animation:functional-sheet-in .46s cubic-bezier(.16,1,.3,1)}.functional-sheet .sheet-handle{display:block;width:34px;height:4px;margin:0 auto 18px;border-radius:99px;background:rgba(255,255,255,.2)}.functional-sheet>span{font-size:9px;letter-spacing:.18em;color:#a994ff}.functional-sheet h2{margin:7px 0 8px;font-size:25px;letter-spacing:-.045em}.functional-sheet p{margin:0 0 17px;color:#a19ba9;font-size:11px;line-height:1.5}.functional-sheet em{color:#ded9e7;font-style:normal}.functional-sheet .primary-button{margin:0 0 7px}.functional-sheet .quiet-button{width:100%}
.film-continuity-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:-6px 0 16px}.film-continuity-actions button{display:flex;align-items:center;justify-content:center;gap:8px;height:38px;border:1px solid rgba(113,190,255,.14);border-radius:14px;background:rgba(28,35,52,.34);color:#a7a2ae;font-size:9px}.film-continuity-actions button.is-active{border-color:rgba(109,204,255,.35);color:#dff5ff;background:rgba(45,112,167,.15)}.film-continuity-actions i{position:relative;width:15px;height:15px}.continuity-watched{border:1.5px solid #78cfff;border-radius:50%}.continuity-watched:after{content:"";position:absolute;left:3px;top:3px;width:6px;height:3px;border-left:1.5px solid #78cfff;border-bottom:1.5px solid #78cfff;transform:rotate(-45deg)}.continuity-dismiss:before,.continuity-dismiss:after{content:"";position:absolute;left:7px;top:1px;width:1.5px;height:13px;background:#78cfff;border-radius:2px;transform:rotate(45deg)}.continuity-dismiss:after{transform:rotate(-45deg)}
.region-choices{margin-top:13px}.region-complete .settings-note{margin-top:16px}
@keyframes functional-sheet-in{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.media-trailer.is-playing,.functional-sheet{transition:none;animation:none}}
.manual-reduced-motion .media-trailer.is-playing,.manual-reduced-motion .functional-sheet{transition:none;animation:none}

/* ===== public/assets/triptic-apple-integration.css ===== */
/* TRIPTIC Apple-quality integration gate.
   This is the final optical and spatial contract across the prototype. */
:root{
  --trip-ink:#050508;--trip-surface:#0c0b12;--trip-glass:rgba(19,17,29,.67);
  --trip-blue:#76c8ff;--trip-violet:#8b67ff;--trip-pink:#ee7cff;
  --trip-white:#f7f4fb;--trip-secondary:#aaa4b1;
  --trip-hairline:rgba(230,222,255,.13);
  --trip-ease:cubic-bezier(.16,1,.3,1);
}
.device{background:var(--trip-ink);color:var(--trip-white)}
.screen{background-color:transparent}
.screen:not(.discover-v5):not(.recon-ritual):not(.splash-screen):not(.welcome-screen):not(.auth-screen)::after{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 72% -8%,rgba(86,128,255,.07),transparent 37%),radial-gradient(ellipse at -10% 42%,rgba(151,78,255,.045),transparent 38%),linear-gradient(180deg,#08080d,#050508 72%);
}

/* Two real-poster reels. They are intentionally quiet: cinema is the atmosphere, not the UI. */
.auth-cinema{transform:rotate(-6deg) scale(1.08);opacity:.7}
.auth-poster-track{top:-232px;width:130px;gap:12px;animation-delay:var(--reel-delay,0s)!important}
.auth-poster-track.track-a{left:50px;animation:trip-reel-up 56s linear infinite}
.auth-poster-track.track-b{right:37px;top:-302px;animation:trip-reel-down 62s linear infinite}
.auth-poster{display:block;width:130px;height:184px;object-fit:cover;object-position:center;border-radius:18px;border:1px solid rgba(225,216,255,.16);background:#111;
  box-shadow:0 22px 46px rgba(0,0,0,.62),0 0 0 .5px rgba(135,164,255,.12);filter:saturate(.84) contrast(1.08) brightness(.68)}
@keyframes trip-reel-up{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-1 * var(--trip-reel-distance)),0)}}
@keyframes trip-reel-down{from{transform:translate3d(0,calc(-1 * var(--trip-reel-distance)),0)}to{transform:translate3d(0,0,0)}}
.welcome-screen .auth-cinema,.splash-screen .auth-cinema{z-index:0;inset:-18% -18% 37%;opacity:.62;mask-image:linear-gradient(180deg,#000 0 66%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 0 66%,transparent 100%)}
.welcome-screen .auth-cinema-shade,.splash-screen .auth-cinema-shade{background:linear-gradient(180deg,rgba(3,3,8,.14),rgba(6,5,13,.54) 48%,#08070f 94%),radial-gradient(circle at 50% 49%,rgba(88,139,255,.15),transparent 25%),radial-gradient(circle at 54% 58%,rgba(164,76,255,.14),transparent 34%)}
.welcome-screen>.welcome-brand,.welcome-screen>.welcome-message,.welcome-screen>.welcome-actions,.splash-screen>.splash-brand,.splash-screen>p{position:relative;z-index:3}
.welcome-screen::after,.splash-screen::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,4,9,.07),rgba(7,6,14,.18) 33%,rgba(7,6,14,.72) 56%,#07070c 88%),radial-gradient(ellipse at 50% 28%,rgba(91,152,255,.09),transparent 31%)}
.welcome-v4 .welcome-brand{filter:drop-shadow(0 0 16px rgba(102,185,255,.22))}

/* One coherent material system; colour communicates focus and confidence. */
.glass-panel,.content-material,.search-glass,.persistent-glass-nav,.functional-sheet{
  border-color:var(--trip-hairline)!important;background-color:var(--trip-glass)!important;
  backdrop-filter:blur(28px) saturate(138%);-webkit-backdrop-filter:blur(28px) saturate(138%);
}
.primary-button{border:1px solid rgba(255,255,255,.18)!important;background:linear-gradient(180deg,rgba(161,132,255,.98),rgba(102,67,219,.96))!important;color:#fff!important;box-shadow:inset 0 1px rgba(255,255,255,.28),0 2px 0 rgba(43,21,104,.9),0 14px 34px rgba(79,47,190,.24)!important}
.primary-button:active{transform:translateY(1px) scale(.985);box-shadow:inset 0 1px rgba(255,255,255,.18),0 1px 0 rgba(43,21,104,.9),0 8px 20px rgba(79,47,190,.2)!important}
button:focus-visible,[role="button"]:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid rgba(118,200,255,.88)!important;outline-offset:3px!important}

/* The bottom lens is a stable, context-aware physical object. */
.device>.persistent-glass-nav{--nav-a:118,200,255;--nav-b:139,103,255;background:linear-gradient(180deg,rgba(25,22,37,.72),rgba(10,9,17,.86))!important;border-color:rgba(204,219,255,.15)!important;box-shadow:inset 0 1px rgba(255,255,255,.1),0 18px 50px rgba(0,0,0,.52)!important}
.device[data-nav-context="explore"]>.persistent-glass-nav{--nav-a:130,162,255;--nav-b:174,103,255}.device[data-nav-context="library"]>.persistent-glass-nav{--nav-a:90,184,225;--nav-b:110,112,226}.device[data-nav-context="profile"]>.persistent-glass-nav{--nav-a:125,174,255;--nav-b:206,104,255}
.device>.persistent-glass-nav .tab-lens{background:radial-gradient(circle at 50% 25%,rgba(var(--nav-a),.22),transparent 51%),linear-gradient(145deg,rgba(var(--nav-b),.2),rgba(255,255,255,.045))!important;border-color:rgba(var(--nav-a),.27)!important;box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 24px rgba(var(--nav-a),.12)!important}
.device>.persistent-glass-nav button.active>span{filter:drop-shadow(0 0 7px rgba(var(--nav-a),.8))!important}

/* Film-specific atmosphere and a collapsing collector-card header. */
.recon-film{--film-a:93,165,255;--film-b:151,90,245;background:linear-gradient(180deg,#06060a,#050508 66%)!important;scroll-behavior:smooth}
.recon-film::after{content:"";position:fixed;z-index:0;inset:300px -25% -20%;pointer-events:none;background:radial-gradient(ellipse at 50% 0,rgba(var(--film-a),.18),transparent 42%),radial-gradient(ellipse at 86% 25%,rgba(var(--film-b),.1),transparent 40%);filter:blur(28px)}
.recon-film .verified-film-hero{transform-origin:50% 0;transition:filter .34s ease,transform .52s var(--trip-ease),border-radius .52s var(--trip-ease)}
.recon-film.film-header-condensed .verified-film-hero{filter:brightness(.72) saturate(.9);transform:scale(.985);border-radius:0 0 26px 26px}
.film-compact-header{position:sticky;z-index:54;top:8px;margin:8px 10px -63px;height:55px;padding:0 8px;display:flex;align-items:center;gap:10px;border:1px solid rgba(221,225,255,.13);border-radius:18px;background:rgba(12,11,19,.7);backdrop-filter:blur(26px) saturate(140%);-webkit-backdrop-filter:blur(26px) saturate(140%);box-shadow:0 16px 38px rgba(0,0,0,.38);opacity:0;transform:translateY(-12px);pointer-events:none;transition:opacity .24s ease,transform .42s var(--trip-ease)}
.film-header-condensed .film-compact-header{opacity:1;transform:none;pointer-events:auto}.film-compact-header button{width:37px;height:37px;border:0;border-radius:50%;background:rgba(255,255,255,.055);color:#fff}.film-compact-header span{min-width:0;display:grid;gap:1px;flex:1}.film-compact-header strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.film-compact-header small{font-size:7px;letter-spacing:.1em;color:rgb(var(--film-a))}.film-compact-header .compact-more{font-size:20px;line-height:1}
.back-chevron-glyph{display:block;width:9px;height:9px;margin-left:2px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}.film-compact-header .compact-more{font-size:0}.film-compact-header .compact-more::before{content:"";display:block;width:3px;height:3px;margin:auto;border-radius:50%;background:currentColor;box-shadow:-6px 0 currentColor,6px 0 currentColor}
.verified-film-hero.poster-resolving{filter:blur(8px) brightness(.58)!important}.verified-film-hero.poster-resolved{animation:trip-poster-resolve .72s var(--trip-ease) both}@keyframes trip-poster-resolve{from{filter:blur(7px) brightness(.72);transform:scale(1.018)}to{filter:none;transform:none}}

/* A restrained signature close: the orb acknowledges the strongest card once. */
.trip-signature-close{position:absolute;z-index:8;left:50%;top:98px;width:92px;height:132px;pointer-events:none;transform:translateX(-50%);opacity:0;animation:trip-signature-close 1.3s .18s var(--trip-ease) both}.trip-signature-close::before{content:"";position:absolute;left:50%;top:0;width:20px;height:20px;border:1px solid rgba(239,124,255,.7);border-radius:50%;background:radial-gradient(circle,#fff 0 5%,#75c8ff 17%,#9e6aff 45%,rgba(238,124,255,.24) 67%,transparent 71%);box-shadow:0 0 18px #76c8ff,0 0 35px rgba(238,124,255,.42);transform:translateX(-50%)}.trip-signature-close::after{content:"";position:absolute;left:50%;top:19px;width:1px;height:100px;background:linear-gradient(rgba(118,200,255,.72),rgba(238,124,255,.28),transparent);box-shadow:0 0 8px #78c8ff;transform:translateX(-50%)}@keyframes trip-signature-close{0%{opacity:0;transform:translate(-50%,-8px) scale(.82)}28%,72%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,5px) scale(.92)}}

/* Keyboard and one-handed states preserve the action, never the decoration. */
.device.keyboard-open>.persistent-glass-nav{transform:translateY(110%)!important;opacity:0!important;pointer-events:none;visibility:hidden}.device.keyboard-open .discover-v5 .discover-prompt{transform:translateY(-6px);transition:transform .32s var(--trip-ease)}

/* Destination changes preserve continuity without exposing an empty beat. */
.screen.fluid-arrival{animation-duration:.42s!important}.screen.fluid-departure{animation-duration:.24s!important}

/* Production/degraded state banner is available to adapters, absent in normal use. */
.integration-status{position:absolute;z-index:65;left:18px;right:18px;top:54px;padding:10px 12px;border:1px solid rgba(255,187,122,.23);border-radius:14px;background:rgba(32,22,18,.84);backdrop-filter:blur(18px);color:#f4dfd0;font-size:9px;line-height:1.35;box-shadow:0 13px 34px rgba(0,0,0,.34)}

@media(prefers-reduced-motion:reduce){.auth-poster-track{animation:none!important}.auth-poster-track.track-a{transform:translateY(-260px)}.auth-poster-track.track-b{transform:translateY(-680px)}.trip-signature-close{display:none}.verified-film-hero.poster-resolved{animation:none}.recon-film{scroll-behavior:auto}}
.device.manual-reduced-motion .auth-poster-track{animation:none!important}.device.manual-reduced-motion .trip-signature-close{display:none}
@media(prefers-reduced-transparency:reduce){.film-compact-header,.device>.persistent-glass-nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#12111a!important}}

/* ===== public/assets/triptic-95.css ===== */
/* TRIPTIC 95/100 closure layer: one signature object, value-first entry and
   restrained spatial continuity. Loaded last by design. */
:root{--trip95-blue:#76c8ff;--trip95-violet:#8b67ff;--trip95-pink:#ee7cff;--trip95-ease:cubic-bezier(.16,1,.3,1)}

/* Discover header and composer are one verified geometry in every input state.
   These rules intentionally live in the final layer because earlier prototype
   generations used different header and composer components. */
.discover-v5 .app-header .brand-home{gap:10px!important}
.discover-v5 .app-header .brand-home .brand-mark{width:34px!important;height:34px!important}
.discover-v5 .app-header .brand-home .wordmark{width:76px!important;height:auto!important}
.discover-v5 .search-glass .query-footer{right:10px!important;bottom:10px!important;gap:13px!important;align-items:center!important}
.discover-v5 .search-glass .voice-control{flex:0 0 34px!important;width:34px!important;height:34px!important;margin:0!important}
.discover-v5 .search-glass .query-submit{flex:0 0 44px!important;width:44px!important;height:44px!important;margin:0!important}
.discover-v5 .search-glass .query-submit .recon-orb{position:relative!important;inset:auto!important;width:42px!important;height:42px!important;margin:auto!important}
.discover-v5.is-listening-space .search-glass{width:328px!important;max-width:calc(100% - 40px)!important}
.discover-v5.is-listening-space .search-glass textarea{width:calc(100% - 116px)!important;padding:0!important}
.discover-v5.is-listening-space .search-glass .query-submit{right:8px!important;bottom:8px!important;width:44px!important;height:44px!important}
.discover-v5.is-listening-space .search-glass .voice-control{right:65px!important;bottom:13px!important;width:34px!important;height:34px!important}

/* The canvas is the living material. Existing geometry remains as a graceful
   no-canvas fallback and provides accessible semantics. */
.recon-orb .trip95-orb-canvas{position:absolute;z-index:12;inset:-12%;width:124%;height:124%;pointer-events:none;filter:drop-shadow(0 0 11px rgba(117,204,255,.58)) drop-shadow(0 0 28px rgba(221,102,255,.3));transform:translateZ(0);will-change:contents,filter,transform}
.recon-orb.is-compact .trip95-orb-canvas{inset:0;width:100%;height:100%;filter:drop-shadow(0 0 7px rgba(117,204,255,.58)) drop-shadow(0 0 14px rgba(221,102,255,.26))}
.recon-orb:not(.is-compact) .orb-sphere{opacity:.24;filter:blur(3px)}
.recon-orb:not(.is-compact) .orb-arc,.recon-orb:not(.is-compact) .orb-sparks{opacity:.18}
.recon-orb.state-dormant:not(.signature-listening) .trip95-orb-canvas{filter:grayscale(.86) saturate(.3) brightness(.72);opacity:.64}
.recon-orb.signature-listening .trip95-orb-canvas{opacity:1;filter:drop-shadow(0 0 13px rgba(118,210,255,.82)) drop-shadow(0 0 36px rgba(145,94,255,.42))}
.recon-orb.state-dormant.signature-listening{filter:saturate(1.18) brightness(1.08)!important;opacity:1!important}
.recon-orb.state-listening .trip95-orb-canvas,.recon-orb.state-typing .trip95-orb-canvas{filter:drop-shadow(0 0 12px rgba(118,210,255,.78)) drop-shadow(0 0 34px rgba(145,94,255,.38))}
.recon-orb.state-gathering .trip95-orb-canvas,.recon-orb.state-charging .trip95-orb-canvas{filter:drop-shadow(0 0 15px rgba(127,215,255,.9)) drop-shadow(0 0 43px rgba(237,105,255,.52));animation:trip95-charge-lift 1.05s ease-in-out infinite alternate}
.recon-orb.state-compressed .trip95-orb-canvas{transform:scale(.82);filter:drop-shadow(0 0 18px rgba(255,255,255,.9)) drop-shadow(0 0 48px rgba(238,105,255,.7));transition:transform .64s var(--trip95-ease)}
.recon-orb.state-bursting .trip95-orb-canvas,.recon-orb.state-distributing .trip95-orb-canvas{animation:trip95-release .78s var(--trip95-ease) both}
@keyframes trip95-charge-lift{to{transform:scale(1.055);filter:drop-shadow(0 0 17px rgba(143,225,255,.95)) drop-shadow(0 0 54px rgba(239,103,255,.64))}}
@keyframes trip95-release{0%{transform:scale(.82);filter:brightness(1)}38%{transform:scale(1.18);filter:brightness(1.65)}100%{transform:scale(.46);filter:brightness(1.1);opacity:.8}}

/* Value-first opening. Personalisation is requested after the product earns it. */
.welcome-v4 .welcome-actions::after{content:"Personalise later with a 30-second Taste Sprint.";display:block;margin-top:7px;color:rgba(203,197,216,.52);font-size:7px;line-height:1.35;text-align:center;letter-spacing:.015em}
.welcome-v4 .welcome-actions>span{display:none}
.discover-v5.first-discovery .discover-heading::before{content:"YOUR FIRST DISCOVERY";display:block;margin-bottom:8px;color:rgba(126,201,255,.78);font-size:7px;font-weight:700;letter-spacing:.18em}

/* Sealed cards share a single spatial language across normal, Friday and share. */
.premium-mystery-back,.share-trio-preview.sealed span{background:radial-gradient(circle at 50% 42%,rgba(118,200,255,.075),transparent 25%),linear-gradient(150deg,rgba(36,30,57,.97),rgba(7,7,14,.99) 72%)!important;box-shadow:inset 0 1px rgba(255,255,255,.08),inset 0 -22px 34px rgba(2,2,9,.48),0 20px 55px rgba(0,0,0,.42)!important}
.ritual-card.active .premium-mystery-back,.friday-card.is-active .premium-mystery-back{border-color:rgba(135,207,255,.32)!important;box-shadow:inset 0 1px rgba(255,255,255,.12),0 25px 68px rgba(0,0,0,.48),0 0 30px rgba(116,196,255,.17),0 0 46px rgba(229,108,255,.13)!important}
.ritual-card.final-charged .premium-mystery-back,.friday-card.rank-1.is-active .premium-mystery-back{border-color:rgba(238,124,255,.48)!important;box-shadow:inset 0 1px rgba(255,255,255,.14),0 28px 72px rgba(0,0,0,.52),0 0 32px rgba(118,200,255,.2),0 0 64px rgba(238,124,255,.26)!important}
.ritual-card.opening,.friday-card.opening{transform-origin:50% 60%!important;animation:trip95-card-turn .88s var(--trip95-ease) both!important}
.ritual-card.opening.rank-1,.friday-card.opening.rank-1{animation-duration:1.18s!important}
@keyframes trip95-card-turn{0%{filter:brightness(1);transform:translateZ(0) rotateY(0) scale(1)}28%{filter:brightness(1.55);transform:translateY(-12px) translateZ(50px) rotateY(-10deg) scale(1.07)}58%{filter:brightness(1.22);transform:translateY(-9px) translateZ(34px) rotateY(7deg) scale(1.055)}100%{filter:none;transform:none}}

/* The selected recommendation becomes the film page rather than being replaced
   by it. The established continuity layer supplies the shared poster. */
.recon-film{view-transition-name:trip-film-page}.recon-film .verified-film-hero{view-transition-name:trip-selected-poster}
::view-transition-old(trip-selected-poster),::view-transition-new(trip-selected-poster){animation-duration:.68s;animation-timing-function:var(--trip95-ease)}

/* Trailer as a cinematic portal: silent by default, user-owned sound. */
.media-trailer{transition:min-height .55s var(--trip95-ease),border-radius .55s var(--trip95-ease),box-shadow .45s ease,transform .45s var(--trip95-ease)}
.media-trailer:focus-within{transform:translateY(-2px);box-shadow:0 28px 72px rgba(0,0,0,.48),0 0 0 1px rgba(123,200,255,.16),0 0 38px rgba(137,92,255,.12)}
.media-trailer.is-playing{border-radius:18px;box-shadow:0 30px 82px rgba(0,0,0,.58),0 0 44px rgba(112,146,255,.13)}
.recon-film:has(.media-trailer.is-playing) .film-content>*:not(.media-trailer){opacity:.72;transition:opacity .35s ease}

/* Sharing feels authored, never promotional. */
.share-trio-preview>span{transform-origin:50% 80%;animation:trip95-share-settle .7s var(--trip95-ease) both;animation-delay:calc(var(--share-index,0)*70ms)}
.share-trio-preview>span:nth-child(1){--share-index:0}.share-trio-preview>span:nth-child(2){--share-index:1}.share-trio-preview>span:nth-child(3){--share-index:2}
@keyframes trip95-share-settle{from{opacity:0;transform:translateY(16px) rotateY(-9deg) scale(.95)}to{opacity:1;transform:none}}

/* Friday's final card is a culmination, not a larger routine celebration. */
.recon-friday .friday-card.rank-1.is-active::after{content:"";position:absolute;z-index:-1;inset:-22%;border-radius:44%;background:radial-gradient(circle,rgba(238,124,255,.21),rgba(118,200,255,.11) 38%,transparent 67%);filter:blur(15px);animation:trip95-final-ready 1.55s ease-in-out infinite alternate}
@keyframes trip95-final-ready{to{transform:scale(1.13);opacity:.65}}

/* Completion remains a single visual sentence: understanding, the three, then
   the decision. Controls never drift into a disconnected bottom island. */
.recon-ritual.phase-settled .ritual-actions{top:558px!important;bottom:auto!important}
@media(max-height:760px){.recon-ritual.phase-settled .ritual-actions{top:504px!important;bottom:auto!important}}

/* Tactile consistency. */
.device button:not(:disabled){transform-origin:50% 60%}.device button.is-pressing{filter:brightness(1.07);transition-duration:.07s!important}
.screen{overscroll-behavior-y:contain}.screen[data-scrollable="true"]{scrollbar-width:none}

/* Safety intervention: direct, calm and unmistakable without turning abuse
   into spectacle or persisting any part of the blocked request. */
.safety-intervention{justify-content:center!important;text-align:center;padding:28px!important;background:radial-gradient(circle at 50% 37%,rgba(120,79,220,.12),transparent 31%),#050508!important}
.safety-intervention .close-control{position:absolute;top:18px;right:18px}
.safety-intervention .safety-mark{display:grid;place-items:center;width:86px;height:86px;margin:0 auto 24px;border:1px solid rgba(118,200,255,.13);border-radius:28px;background:linear-gradient(145deg,rgba(118,200,255,.07),rgba(238,124,255,.045));box-shadow:inset 0 1px rgba(255,255,255,.08),0 22px 50px rgba(0,0,0,.38)}
.safety-intervention .safety-mark .brand-mark{width:42px;filter:drop-shadow(0 0 14px rgba(118,200,255,.25))}
.safety-intervention .eyebrow{color:#9a91aa}.safety-intervention h1{max-width:320px;margin:12px auto 14px;font-size:31px;letter-spacing:-.035em}.safety-intervention>p{max-width:300px;margin:0 auto 28px;color:#aaa5b0;font-size:13px;line-height:1.55}.safety-intervention .primary-button{width:100%;max-width:310px}.safety-intervention .quiet-button{margin-top:8px}

@media(prefers-reduced-motion:reduce){.trip95-orb-canvas{animation:none!important}.ritual-card.opening,.friday-card.opening,.share-trio-preview>span{animation:none!important}.recon-friday .friday-card.rank-1.is-active::after{animation:none!important}::view-transition-group(*){animation-duration:.01ms!important}}
.device.manual-reduced-motion .trip95-orb-canvas,.device.manual-reduced-motion .ritual-card.opening,.device.manual-reduced-motion .friday-card.opening,.device.manual-reduced-motion .share-trio-preview>span{animation:none!important}

/* ===== public/assets/triptic-critical-experience.css ===== */
/* TRIPTIC critical experience
   One spatial world from request submission to the selected film. */
:root{
  --critical-blue:123,210,255;
  --critical-violet:141,102,255;
  --critical-pink:239,112,255;
  --critical-ease:cubic-bezier(.16,1,.3,1);
  --critical-spring:cubic-bezier(.16,1.18,.32,1);
}

.discover-v5.trip-critical-host{isolation:isolate;overflow:hidden!important}
.trip-critical-host>.trip-critical-layer{box-sizing:border-box}
.trip-critical-layer[hidden]{display:none!important}
.trip-critical-layer{
  position:absolute;z-index:140;left:0;right:0;top:0;height:100%;overflow:hidden;color:#f7f5fb;
  background:
    radial-gradient(circle at 50% 29%,rgba(var(--critical-violet),.12),transparent 24%),
    radial-gradient(circle at 51% 55%,rgba(var(--critical-blue),.05),transparent 39%),
    linear-gradient(180deg,rgba(5,5,10,.02),rgba(5,5,10,.84) 24%,#06060b 78%);
  opacity:0;transform:translateZ(0);pointer-events:none;
  transition:opacity .42s ease,background .8s ease;
}
.device.critical-journey-active>.persistent-glass-nav{opacity:0!important;transform:translateY(112%)!important;pointer-events:none!important;transition:opacity .26s ease,transform .5s var(--critical-ease)!important}
.trip-critical-layer.is-live{opacity:1;pointer-events:auto;background:
  radial-gradient(circle at 50% 25%,rgba(var(--critical-violet),.17),transparent 24%),
  radial-gradient(circle at 50% 47%,rgba(var(--critical-blue),.065),transparent 35%),
  linear-gradient(180deg,rgba(5,5,10,.87),#06060b 54%,#050509)}
.trip-critical-layer.is-returning,.trip-critical-layer.critical-leaving{opacity:0;pointer-events:none}
.trip-critical-host.critical-engaged>.app-header,
.trip-critical-host.critical-engaged>.friday-ribbon,
.trip-critical-host.critical-engaged>.discover-heading,
.trip-critical-host.critical-engaged>.search-glass,
.trip-critical-host.critical-engaged>.memory-control,
.trip-critical-host.critical-engaged>.daily-cryptic-home-entry,
.trip-critical-host.critical-engaged>.inspiration,
.trip-critical-host.critical-engaged>.persistent-glass-nav{
  opacity:0!important;filter:blur(9px);transform:scale(.982);pointer-events:none!important;
  transition:opacity .36s ease,filter .5s ease,transform .56s var(--critical-ease)!important;
}
.trip-critical-host:not(.critical-engaged)>.app-header,
.trip-critical-host:not(.critical-engaged)>.friday-ribbon,
.trip-critical-host:not(.critical-engaged)>.discover-heading,
.trip-critical-host:not(.critical-engaged)>.search-glass,
.trip-critical-host:not(.critical-engaged)>.memory-control,
.trip-critical-host:not(.critical-engaged)>.daily-cryptic-home-entry,
.trip-critical-host:not(.critical-engaged)>.inspiration{
  transition:opacity .4s .12s ease,filter .55s ease,transform .58s var(--critical-ease)!important;
}

.critical-atmosphere,.critical-atmosphere i{position:absolute;inset:0;pointer-events:none}
.critical-atmosphere{overflow:hidden;opacity:0;transition:opacity .8s ease}
.is-live .critical-atmosphere{opacity:1}
.critical-atmosphere::before{content:"";position:absolute;inset:-18%;background:conic-gradient(from 30deg at 50% 35%,transparent,rgba(var(--critical-blue),.035),transparent 18%,rgba(var(--critical-pink),.035),transparent 43%);filter:blur(22px);animation:critical-atmosphere-drift 15s linear infinite}
.critical-atmosphere i{inset:auto;left:50%;top:178px;width:1px;height:105px;transform-origin:50% 100%;background:linear-gradient(180deg,transparent,rgba(183,226,255,.56),rgba(237,126,255,.08),transparent);filter:drop-shadow(0 0 6px rgba(var(--critical-blue),.68));opacity:0}
.trip-phase-charging .critical-atmosphere i,.trip-phase-compressed .critical-atmosphere i{animation:critical-arc 1.35s ease-in-out infinite}
.critical-atmosphere i:nth-child(1){transform:translateX(-61px) rotate(-25deg);animation-delay:-.2s}.critical-atmosphere i:nth-child(2){transform:translateX(-22px) rotate(-8deg);animation-delay:-.82s}.critical-atmosphere i:nth-child(3){transform:translateX(29px) rotate(13deg);animation-delay:-.44s}.critical-atmosphere i:nth-child(4){transform:translateX(62px) rotate(28deg);animation-delay:-1.1s}

.critical-header{position:absolute;z-index:8;left:20px;right:20px;top:22px;height:42px;display:grid;grid-template-columns:42px 1fr 42px;align-items:center}
.critical-header>.circle-control{width:34px!important;height:34px!important;justify-self:start;background:rgba(16,16,25,.54)!important;border:1px solid rgba(255,255,255,.11)!important;backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%)}
.critical-header .back-chevron i{display:block;width:8px;height:8px;border-left:1.5px solid #ddd9e6;border-bottom:1.5px solid #ddd9e6;transform:rotate(45deg) translate(1px,-1px)}
.critical-brand-lockup{position:relative;justify-self:center;display:flex;align-items:center;gap:8px;opacity:.9}
.critical-brand-lockup::before{content:"";position:absolute;inset:-15px -25px;background:radial-gradient(ellipse,rgba(var(--critical-blue),.18),transparent 69%);filter:blur(9px);pointer-events:none}
.critical-brand-lockup .brand-mark{position:relative;width:25px!important;height:25px!important}.critical-brand-lockup .wordmark{position:relative;width:68px!important;height:auto!important}

.critical-request-capsule{
  position:absolute;z-index:5;left:var(--critical-request-x,20px);top:var(--critical-request-y,420px);
  width:var(--critical-request-w,350px);height:var(--critical-request-h,122px);box-sizing:border-box;
  display:grid;align-content:center;gap:5px;padding:13px 17px;border-radius:25px;
  border:1px solid rgba(166,201,255,.16);background:linear-gradient(145deg,rgba(24,22,34,.84),rgba(9,9,15,.9));
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 22px 55px rgba(0,0,0,.34);overflow:hidden;
  transform-origin:center;transition:left .74s var(--critical-ease),top .74s var(--critical-ease),width .74s var(--critical-ease),height .74s var(--critical-ease),border-radius .74s var(--critical-ease),background .5s,box-shadow .5s;
}
.is-live .critical-request-capsule{left:20px;top:75px;width:calc(100% - 40px);height:58px;border-radius:19px;background:linear-gradient(145deg,rgba(18,17,27,.84),rgba(8,8,13,.9));box-shadow:inset 0 1px rgba(255,255,255,.1),0 13px 42px rgba(0,0,0,.28),0 0 28px rgba(var(--critical-violet),.07)}
.critical-request-capsule span{color:rgba(153,206,255,.75);font-size:6.5px;font-weight:720;letter-spacing:.18em}.critical-request-capsule p{margin:0;overflow:hidden;color:#d7d2df;font-size:10px;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}

.critical-orb-stage{position:absolute;z-index:6;left:50%;top:151px;width:202px;height:202px;transform:translateX(-50%);display:grid;place-items:center;transition:top .78s var(--critical-ease),transform .78s var(--critical-ease)}
.critical-orb{width:184px;height:184px;transform:translate(calc(var(--critical-orb-x,0px) - 9px),calc(var(--critical-orb-y,0px) - 9px)) scale(var(--critical-orb-scale,.24));transform-origin:center;transition:transform .8s var(--critical-ease),filter .7s ease,width .82s var(--critical-spring),height .82s var(--critical-spring),opacity .5s ease}
.is-live .critical-orb{transform:translate(0,0) scale(1)}
.critical-orb .recon-orb{width:100%!important;height:100%!important}
.critical-orb .recon-orb .trip95-orb-canvas{opacity:.82!important;filter:saturate(1.42) brightness(.74) contrast(1.15) drop-shadow(0 0 11px rgba(var(--critical-blue),.72)) drop-shadow(0 0 29px rgba(var(--critical-pink),.38))!important}
.critical-orb .recon-orb .orb-sphere{opacity:.9!important;filter:none!important;background:radial-gradient(circle at 32% 25%,#fff 0 1.5%,#94e7ff 3%,#587bff 14%,#8d4cff 29%,#331958 55%,#070813 79%)!important;box-shadow:inset -18px -20px 32px rgba(2,1,15,.7),inset 11px 11px 23px rgba(170,228,255,.22),0 0 10px rgba(169,231,255,.84),0 0 31px rgba(var(--critical-blue),.62),0 0 62px rgba(var(--critical-pink),.34)!important}
.critical-orb .recon-orb .orb-core{opacity:.72!important}.critical-orb .recon-orb .orb-fibres{opacity:.8!important}
.critical-orb-floor{position:absolute;left:50%;bottom:16px;width:84px;height:10px;border-radius:50%;background:radial-gradient(ellipse,rgba(var(--critical-blue),.28),rgba(var(--critical-violet),.1) 45%,transparent 72%);filter:blur(6px);transform:translateX(-50%) scale(.65);opacity:.2;transition:transform .8s var(--critical-ease),opacity .8s}
.trip-phase-charging .critical-orb,.trip-phase-compressed .critical-orb{width:202px;height:202px;filter:saturate(1.28) brightness(1.15) drop-shadow(0 0 18px rgba(var(--critical-pink),.22))}
.trip-phase-charging .critical-orb-floor{transform:translateX(-50%) scale(1);opacity:.65}
.trip-phase-compressed .critical-orb{width:150px;height:150px;filter:saturate(1.6) brightness(1.45) drop-shadow(0 0 28px rgba(var(--critical-pink),.46))}
.trip-phase-ready .critical-orb-stage,.trip-phase-revealing .critical-orb-stage,.trip-phase-settled .critical-orb-stage{top:111px;transform:translateX(-50%) scale(.56)}
.trip-phase-ready .critical-orb,.trip-phase-revealing .critical-orb,.trip-phase-settled .critical-orb{filter:saturate(1.16) brightness(1.08)}
.critical-orb-wave{position:absolute;inset:17px;border-radius:50%;border:1px solid rgba(var(--critical-blue),.22);opacity:0;transform:scale(.72)}
.trip-phase-charging .critical-orb-wave{animation:critical-wave 1.8s ease-out infinite}

.critical-energy-paths{position:absolute;z-index:3;left:50%;top:278px;width:300px;height:170px;transform:translateX(-50%);opacity:0;transition:opacity .38s ease;pointer-events:none}
.trip-phase-ready .critical-energy-paths,.trip-phase-revealing .critical-energy-paths{opacity:.8}
.critical-energy-paths i{position:absolute;left:50%;top:0;width:1px;height:138px;transform-origin:50% 0;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(var(--critical-blue),.82) 12%,rgba(var(--critical-pink),.55) 45%,transparent 100%);filter:drop-shadow(0 0 5px rgba(var(--critical-blue),.95));clip-path:polygon(0 0,100% 0,100% 13%,0 19%,100% 31%,0 41%,100% 53%,0 68%,100% 82%,0 100%)}
.critical-energy-paths i:nth-child(1){transform:rotate(38deg)}.critical-energy-paths i:nth-child(2){transform:rotate(0deg)}.critical-energy-paths i:nth-child(3){transform:rotate(-38deg)}
.trip-phase-ready .critical-energy-paths i{animation:critical-beam 1.5s ease-in-out infinite}.trip-phase-ready .critical-energy-paths i:nth-child(2){animation-delay:-.55s}.trip-phase-ready .critical-energy-paths i:nth-child(3){animation-delay:-1.05s}

.critical-card-stage{position:absolute;z-index:5;left:0;right:0;top:326px;height:224px;perspective:1100px;transition:top .74s var(--critical-ease),transform .7s var(--critical-ease)}
.critical-card{position:absolute;top:0;width:96px;height:194px;padding:0;border:0;border-radius:18px;background:transparent;color:#fff;opacity:0;transform:translateY(24px) rotateY(0deg) scale(.94);transform-style:preserve-3d;transition:left .74s var(--critical-spring),top .74s var(--critical-spring),opacity .6s ease,transform .74s var(--critical-spring),filter .5s ease;cursor:pointer}
.critical-deck-advancing .critical-card{transition-duration:.92s,.92s,.55s,.92s,.72s!important;transition-timing-function:var(--critical-spring)!important}
.critical-deck-advancing .critical-card.is-revealed{filter:drop-shadow(0 16px 22px rgba(0,0,0,.42)) saturate(.94)!important}
.trip-phase-ready .critical-card,.trip-phase-revealing .critical-card,.trip-phase-settled .critical-card{opacity:1;transform:translateY(0) scale(.96)}
.critical-card.rank-3{left:calc(50% - 48px)}.critical-card.rank-2{left:calc(16.667% - 48px)}.critical-card.rank-1{left:calc(83.333% - 48px)}
.trip-critical-layer[data-revealed="1"] .critical-card.rank-3{left:calc(16.667% - 48px)}.trip-critical-layer[data-revealed="1"] .critical-card.rank-2{left:calc(50% - 48px)}.trip-critical-layer[data-revealed="1"] .critical-card.rank-1{left:calc(83.333% - 48px)}
.trip-critical-layer[data-revealed="2"] .critical-card.rank-2{left:calc(16.667% - 48px)}.trip-critical-layer[data-revealed="2"] .critical-card.rank-1{left:calc(50% - 48px)}.trip-critical-layer[data-revealed="2"] .critical-card.rank-3{left:calc(83.333% - 48px)}
.trip-critical-layer[data-revealed="3"] .critical-card.rank-2{left:calc(16.667% - 48px)}.trip-critical-layer[data-revealed="3"] .critical-card.rank-1{left:calc(50% - 48px)}.trip-critical-layer[data-revealed="3"] .critical-card.rank-3{left:calc(83.333% - 48px)}
.critical-card.is-active{z-index:4;transform:translateY(-12px) scale(1.08)!important;filter:drop-shadow(0 18px 24px rgba(0,0,0,.46)) drop-shadow(0 0 22px rgba(var(--critical-violet),.24))}
.critical-card.rank-1.is-active{filter:drop-shadow(0 18px 24px rgba(0,0,0,.5)) drop-shadow(0 0 30px rgba(var(--critical-pink),.4))}
.critical-card-inner{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .9s var(--critical-spring)}
.critical-card.is-flipping .critical-card-inner,.critical-card.is-revealed .critical-card-inner{transform:rotateY(180deg)}
.critical-card-back,.critical-card-front{position:absolute;inset:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:18px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.critical-card-back{border:1px solid rgba(163,204,255,.17);background:radial-gradient(circle at 50% 38%,rgba(var(--critical-violet),.19),transparent 25%),linear-gradient(145deg,rgba(27,23,42,.94),rgba(8,8,15,.98));box-shadow:inset 0 1px rgba(255,255,255,.14),inset 0 -28px 55px rgba(0,0,0,.42),0 16px 36px rgba(0,0,0,.36)}
.critical-card-back::before{content:"";position:absolute;inset:1px;border-radius:17px;background:repeating-linear-gradient(119deg,transparent 0 19px,rgba(145,199,255,.035) 20px,transparent 21px 43px);opacity:.65}
.critical-card-back>b{position:absolute;top:12px;left:14px;color:rgba(199,225,255,.62);font-size:7px;letter-spacing:.14em}.critical-card-back>small{position:absolute;bottom:13px;color:rgba(226,218,238,.56);font-size:5.5px;font-weight:720;letter-spacing:.2em}
.critical-question{position:relative;width:58px;height:74px;display:grid;place-items:center}.critical-question::before,.critical-question::after,.critical-question i{content:"";position:absolute;border-radius:50%;border:1px solid rgba(var(--critical-blue),.25);filter:drop-shadow(0 0 5px rgba(var(--critical-blue),.25));animation:critical-question-turn 7s linear infinite}.critical-question::before{inset:6px}.critical-question::after{inset:13px;border-color:rgba(var(--critical-pink),.23);animation-direction:reverse}.critical-question i{inset:20px;border-style:dashed}.critical-question em{position:relative;font-size:25px;font-weight:240;font-style:normal;color:#eef6ff;text-shadow:0 0 12px rgba(var(--critical-blue),.84)}
.critical-card-front{align-items:flex-start;justify-content:flex-end;padding:13px 11px;transform:rotateY(180deg);background-image:linear-gradient(180deg,transparent 42%,rgba(3,3,7,.95) 83%),var(--critical-poster);background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.17),0 14px 34px rgba(0,0,0,.42)}
.critical-card-front::after{content:"";position:absolute;inset:0;border-radius:18px;border:1px solid rgba(var(--critical-blue),.2);pointer-events:none}.critical-card.rank-1 .critical-card-front::after{border-color:rgba(var(--critical-pink),.52);box-shadow:inset 0 0 18px rgba(var(--critical-pink),.08),0 0 23px rgba(var(--critical-pink),.18)}
.critical-card-front>*{position:relative;z-index:1}.critical-card-front strong{font-size:9px;line-height:1.18;text-align:left}.critical-card-front small{margin-top:5px;color:#a7ddff;font-size:6.5px;font-style:normal}.critical-card-front em{margin-top:3px;color:#9d96a5;font-size:5.6px;line-height:1.25;font-style:normal;text-align:left}
.critical-card-energy{position:absolute;z-index:7;inset:-14px;opacity:0;pointer-events:none}.critical-card.is-active .critical-card-energy{opacity:1}.critical-card-energy::before{content:"";position:absolute;inset:0;border-radius:24px;border:1px solid rgba(var(--critical-blue),.6);box-shadow:0 0 18px rgba(var(--critical-blue),.3),inset 0 0 12px rgba(var(--critical-pink),.13);animation:critical-card-charge .8s ease-in-out infinite alternate}.critical-card-energy i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 7px #9ee6ff,0 0 12px #ef8cff;animation:critical-card-spark .9s ease-out infinite}.critical-card-energy i:nth-child(1){left:8%;top:36%}.critical-card-energy i:nth-child(2){right:2%;top:58%;animation-delay:-.3s}.critical-card-energy i:nth-child(3){left:56%;bottom:0;animation-delay:-.6s}

.critical-status{position:absolute;z-index:6;left:30px;right:30px;top:575px;text-align:center;transition:opacity .42s ease,transform .55s var(--critical-ease)}
.critical-status span{display:block;margin-bottom:9px;color:rgba(156,210,255,.71);font-size:6.5px;font-weight:720;letter-spacing:.21em}.critical-status h1{margin:0;font-size:19px;font-weight:560;letter-spacing:-.025em}.critical-status p{max-width:265px;margin:8px auto 0;color:#8e8995;font-size:8.5px;line-height:1.45}
.trip-phase-ready .critical-status h1::after{content:"";display:inline-block;width:3px;height:3px;margin-left:6px;border-radius:50%;background:#d995ff;box-shadow:0 0 7px #d995ff;animation:critical-ready-dot 1.25s ease-in-out infinite}
.trip-phase-settled .critical-status{opacity:0;transform:translateY(-10px);pointer-events:none}
.trip-phase-settled .critical-orb-stage{top:72px;transform:translateX(-50%) scale(.4)}
.trip-phase-settled .critical-card-stage{top:208px;transform:scale(.73);transform-origin:50% 0}

.critical-results{position:absolute;z-index:5;left:20px;right:20px;top:365px;display:grid;justify-items:center;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .48s .1s ease,transform .62s .1s var(--critical-ease)}
.trip-phase-settled .critical-results{opacity:1;transform:none;pointer-events:auto}.critical-results>.eyebrow{color:#8fcef8;font-size:6px;font-weight:720;letter-spacing:.22em}.critical-results>h1{margin:3px 0 10px;font-size:18px;font-weight:570;letter-spacing:-.025em}
.critical-understood{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid rgba(154,202,255,.11);border-radius:16px;background:rgba(17,16,25,.6);box-shadow:inset 0 1px rgba(255,255,255,.055);backdrop-filter:blur(17px);-webkit-backdrop-filter:blur(17px)}
.critical-understood>span{display:block;margin-bottom:7px;color:#96909f;font-size:5.7px;font-weight:720;letter-spacing:.15em}.critical-understood>div{display:flex;gap:5px;overflow:hidden}.critical-understood i{flex:none;padding:5px 7px;border-radius:9px;background:rgba(118,183,255,.07);color:#b9b3c2;font-size:5.7px;font-style:normal;white-space:nowrap}
.critical-film-cta{width:100%;height:42px!important;min-height:42px!important;margin-top:9px!important;border-radius:15px!important;background:linear-gradient(135deg,rgba(75,90,210,.92),rgba(135,69,191,.92))!important;box-shadow:inset 0 1px rgba(255,255,255,.19),0 10px 25px rgba(50,34,112,.27),0 0 18px rgba(var(--critical-blue),.08)!important;font-size:9px!important}
.critical-results>.critical-understood,.critical-results>.critical-film-cta,.critical-results>.critical-result-toolbar{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
.critical-result-toolbar{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:7px}.critical-result-toolbar button{min-width:0;height:39px;display:grid;place-items:center;align-content:center;gap:3px;border:1px solid rgba(255,255,255,.075);border-radius:13px;background:rgba(18,17,26,.68);color:#c3becb}.critical-result-toolbar button i{width:12px;height:12px;display:block;position:relative}.critical-result-toolbar button span{font-size:5.6px}.critical-result-toolbar .tool-reason::before{content:"?";position:absolute;inset:0;display:grid;place-items:center;border:1px solid #82d7ff;border-radius:50%;color:#82d7ff;font-size:7px}.critical-result-toolbar .tool-share::before{content:"";position:absolute;left:5px;top:1px;width:2px;height:8px;background:#82d7ff;box-shadow:-4px 5px 0 -1px #82d7ff,4px 5px 0 -1px #82d7ff}.critical-result-toolbar .tool-save{border:1px solid #82d7ff;border-bottom-color:transparent;border-radius:2px 2px 4px 4px}.critical-result-toolbar .tool-refine::before,.critical-result-toolbar .tool-refine::after{content:"";position:absolute;left:1px;right:1px;height:1px;background:#82d7ff;box-shadow:0 4px #82d7ff,0 8px #82d7ff}.critical-result-toolbar .tool-refine::before{top:1px}.critical-result-toolbar .tool-refine::after{top:0;left:3px;width:3px;height:3px;border-radius:50%;box-shadow:5px 4px #82d7ff,2px 8px #82d7ff}

.critical-reasoning-scrim{position:absolute;z-index:20;inset:0;background:rgba(2,2,6,.58);opacity:0;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transition:opacity .28s ease}.critical-reasoning-scrim.is-open{opacity:1}.critical-reasoning-sheet[hidden]{display:none!important}.critical-reasoning-sheet{position:absolute;z-index:21;left:10px;right:10px;bottom:10px;box-sizing:border-box;padding:13px 15px 18px;border:1px solid rgba(171,204,255,.14);border-radius:26px;background:linear-gradient(160deg,rgba(28,26,39,.96),rgba(9,9,15,.98));box-shadow:0 -24px 70px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.1);transform:translateY(108%);transition:transform .52s var(--critical-ease)}.critical-reasoning-sheet.is-open{transform:none}.critical-reasoning-sheet .sheet-handle{display:block;width:34px;height:3px;margin:0 auto 12px;border-radius:999px;background:rgba(255,255,255,.22)}.critical-reasoning-sheet header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px}.critical-reasoning-sheet header span{color:#8fd8ff;font-size:6px;font-weight:720;letter-spacing:.17em}.critical-reasoning-sheet h2{margin:4px 0 0;font-size:15px;font-weight:560}.critical-reasoning-sheet header button{width:30px!important;height:30px!important;background:rgba(255,255,255,.05)!important}.critical-reasoning-sheet article{display:grid;grid-template-columns:23px 1fr;gap:9px;padding:10px 0;border-top:1px solid rgba(255,255,255,.065)}.critical-reasoning-sheet article>b{color:#83d4ff;font-size:7px}.critical-reasoning-sheet article strong{display:block;font-size:9px}.critical-reasoning-sheet article p{margin:4px 0;color:#9b96a2;font-size:7px;line-height:1.42}.critical-reasoning-sheet article small{color:#b8a2ca;font-size:6px}

.trip-critical-layer.critical-behind-film{filter:brightness(.48) blur(3px);transform:scale(.965);transition:filter .55s ease,transform .7s var(--critical-ease);pointer-events:none}
.critical-film-layer{position:absolute!important;z-index:170!important;inset:0!important;width:auto!important;height:auto!important;overflow-y:auto!important;overflow-x:hidden!important;background:#07070b!important;opacity:0;transform:translateY(8px);pointer-events:none;animation:none!important;transition:opacity .32s ease,transform .65s var(--critical-ease);scroll-behavior:smooth}
.device>.persistent-glass-nav{z-index:220!important}
.critical-film-layer.is-visible{opacity:1;transform:none;pointer-events:auto}.critical-film-layer.is-leaving{opacity:0;transform:scale(.985);pointer-events:none}.critical-film-layer>.film-content{padding-bottom:116px!important}
.critical-poster-flight{position:absolute;z-index:180;border-radius:18px;background-image:linear-gradient(180deg,transparent 48%,rgba(3,3,6,.58)),var(--flight-poster);background-size:cover;background-position:center;box-shadow:0 18px 42px rgba(0,0,0,.5);transition:left .66s var(--critical-ease),top .66s var(--critical-ease),width .66s var(--critical-ease),height .66s var(--critical-ease),border-radius .66s var(--critical-ease),opacity .25s ease;pointer-events:none}.critical-poster-flight.is-expanding,.critical-poster-flight.is-expanded{left:0!important;top:0!important;width:100%!important;height:448px!important;border-radius:0 0 32px 32px}.critical-poster-flight.is-resolved{opacity:0}.critical-poster-flight.is-returning{border-radius:18px;opacity:.95}
.film-v5 .film-continuity-actions{display:none!important}.film-v5 .decision-actions.critical-film-dock{position:relative!important;z-index:25!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;width:calc(100% - 24px)!important;height:58px!important;min-height:58px!important;margin:8px 12px 24px!important;padding:5px!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:3px!important;border:1px solid rgba(165,205,255,.13)!important;border-radius:20px!important;background:linear-gradient(145deg,rgba(27,25,37,.82),rgba(10,10,16,.9))!important;box-shadow:inset 0 1px rgba(255,255,255,.1),0 16px 42px rgba(0,0,0,.45)!important;backdrop-filter:blur(26px) saturate(145%)!important;-webkit-backdrop-filter:blur(26px) saturate(145%)!important}
.film-v5 .critical-film-dock button{min-width:0!important;height:46px!important;margin:0!important;padding:3px 1px!important;display:grid!important;place-items:center!important;align-content:center!important;gap:3px!important;border:0!important;border-radius:15px!important;background:transparent!important;color:#c8c4cf!important;box-shadow:none!important}.film-v5 .critical-film-dock button:active{transform:scale(.94)}.film-v5 .critical-film-dock button.is-active,.film-v5 .critical-film-dock button.saved{background:rgba(111,179,255,.09)!important;color:#91dbff!important}.film-v5 .critical-film-dock button i{position:relative!important;inset:auto!important;width:15px!important;height:15px!important;margin:0!important;color:#82d7ff!important}.film-v5 .critical-film-dock button span{max-width:100%!important;font-size:6px!important;line-height:1!important;white-space:nowrap!important;overflow:visible!important}
.critical-watched-icon{border:1.4px solid #82d7ff;border-radius:50%}.critical-watched-icon::before{content:"";position:absolute;left:3px;top:4px;width:6px;height:3px;border-left:1.4px solid #82d7ff;border-bottom:1.4px solid #82d7ff;transform:rotate(-45deg)}.critical-not-for-me-icon{border:1.4px solid #82d7ff;border-radius:50%}.critical-not-for-me-icon::before{content:"";position:absolute;left:3px;right:3px;top:6px;height:1.4px;border-radius:2px;background:#82d7ff;transform:rotate(-33deg)}

/* Supporting-screen corrections that must share the same brand system. */
.critical-auth-polish .auth-content{padding-top:54px!important}.critical-auth-polish .auth-brand{position:relative;display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;margin-bottom:12px!important}.critical-auth-polish .auth-brand::before{content:"";position:absolute;width:180px;height:72px;background:radial-gradient(ellipse,rgba(var(--critical-blue),.21),rgba(var(--critical-violet),.06) 48%,transparent 72%);filter:blur(10px)}.critical-auth-polish .auth-brand .brand-mark{position:relative;width:37px!important;height:37px!important}.critical-auth-polish .auth-brand .wordmark{position:relative;width:96px!important;height:auto!important}.critical-auth-polish .auth-close{top:18px!important;right:18px!important;left:auto!important}.critical-auth-polish .provider-button img[src*="apple"]{display:block!important;width:19px!important;height:19px!important;object-fit:contain!important;filter:brightness(0)!important;opacity:1!important}.critical-auth-polish .poster-reel{filter:brightness(.42) saturate(.8)!important}.critical-auth-polish .auth-legal{margin-top:auto!important;padding:18px 24px 22px!important;text-align:center!important}

/* Authentication retains the quiet cinema context: two genuine poster reels
   remain visible behind the content instead of falling behind the screen's
   stacking context. Copy and actions always retain the strongest contrast. */
.critical-auth-polish{isolation:isolate!important;background:#06060b!important}
.critical-auth-polish .auth-cinema{z-index:0!important;inset:-15% -14% 28%!important;opacity:.42!important;mask-image:linear-gradient(180deg,#000 0 67%,transparent 100%)!important;-webkit-mask-image:linear-gradient(180deg,#000 0 67%,transparent 100%)!important}
.critical-auth-polish .auth-cinema-shade{background:linear-gradient(180deg,rgba(3,4,10,.26),rgba(6,5,13,.64) 48%,#07070c 91%),radial-gradient(circle at 50% 43%,rgba(92,169,255,.18),transparent 28%),radial-gradient(circle at 55% 52%,rgba(174,74,255,.17),transparent 38%)!important}
.critical-auth-polish::after{z-index:1!important;pointer-events:none!important}
.critical-auth-polish>.ios-status,.critical-auth-polish>.circle-control{z-index:3!important}.critical-auth-polish>.auth-brand,.critical-auth-polish>.auth-copy,.critical-auth-polish>.auth-list,.critical-auth-polish>.email-panel,.critical-auth-polish>.status-symbol,.critical-auth-polish>.primary-button,.critical-auth-polish>.quiet-action,.critical-auth-polish>.legal{position:relative;z-index:3!important}
.critical-auth-polish .auth-brand::before{width:210px;height:84px;background:radial-gradient(ellipse,rgba(96,188,255,.28),rgba(119,77,241,.1) 48%,transparent 73%)!important}
.critical-auth-polish .auth-brand .wordmark{width:112px!important;filter:drop-shadow(0 0 18px rgba(91,180,255,.42))}

/* Film DNA is analytical, but it must never become microscopic. */
.dna-map>header span{font-size:8.5px!important}.dna-map>header small{font-size:7.5px!important}.dna-axis span{font-size:8px!important}.dna-axis>small{font-size:7.25px!important;line-height:1.35!important}.dna-map>p{font-size:9px!important;line-height:1.5!important}

/* Accessibility variants preserve the ritual's hierarchy as well as its
   operability. Solid materials and larger text remain visually intentional. */
.device.manual-solid .critical-request-capsule,.device.manual-solid .critical-card-back,.device.manual-solid .critical-reasoning-sheet,.device.manual-solid .critical-result-toolbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#15131f!important;border-color:rgba(255,255,255,.22)!important}
.device.manual-large-text .critical-status h1{font-size:21px!important}.device.manual-large-text .critical-status p{font-size:9px!important}.device.manual-large-text .critical-request-capsule p{font-size:11px!important}.device.manual-large-text .critical-card-front strong{font-size:8px!important}.device.manual-large-text .critical-results h1{font-size:29px!important}
.critical-profile-polish .profile-orb{width:86px!important;height:86px!important;min-width:86px!important;min-height:86px!important;display:grid!important;place-items:center!important;overflow:visible!important}.critical-profile-polish .profile-orb .recon-orb{width:78px!important;height:78px!important;transform:none!important}.critical-profile-polish .taste-evolution{border:1px solid rgba(148,205,255,.17)!important;background:linear-gradient(135deg,rgba(30,51,84,.84),rgba(58,34,83,.82))!important;box-shadow:inset 0 1px rgba(255,255,255,.1),0 12px 28px rgba(0,0,0,.24)!important}.critical-profile-polish .taste-evolution>span{color:#8fdcff!important;text-shadow:0 0 11px rgba(var(--critical-blue),.28)}.critical-profile-polish .taste-evolution>strong{color:#fff!important}.critical-profile-polish .taste-evolution>p{color:#c0b9ca!important}.critical-profile-polish .taste-evolution>i{color:#c6eaff!important}

@keyframes critical-atmosphere-drift{to{transform:rotate(360deg) scale(1.03)}}
@keyframes critical-arc{0%,100%{opacity:0;clip-path:inset(0 0 100% 0)}35%{opacity:.7}72%{opacity:.18;clip-path:inset(0 0 0 0)}}
@keyframes critical-wave{0%{opacity:.62;transform:scale(.66)}100%{opacity:0;transform:scale(1.45)}}
@keyframes critical-beam{0%,100%{opacity:.2;filter:drop-shadow(0 0 4px rgba(var(--critical-blue),.7))}50%{opacity:1;filter:drop-shadow(0 0 9px #fff)}}
@keyframes critical-question-turn{to{transform:rotate(360deg)}}
@keyframes critical-card-charge{to{opacity:.52;transform:scale(1.035)}}
@keyframes critical-card-spark{0%{opacity:0;transform:translate(0,6px) scale(.4)}45%{opacity:1}100%{opacity:0;transform:translate(5px,-12px) scale(1.2)}}
@keyframes critical-ready-dot{50%{opacity:.25;transform:scale(.7)}}

@media(max-height:760px){
  .critical-request-capsule.is-live{top:68px}.critical-orb-stage{top:128px;transform:translateX(-50%) scale(.86)}.trip-phase-ready .critical-orb-stage,.trip-phase-revealing .critical-orb-stage,.trip-phase-settled .critical-orb-stage{top:96px;transform:translateX(-50%) scale(.47)}
  .critical-card-stage{top:286px;transform:scale(.91);transform-origin:50% 0}.critical-status{top:502px}.trip-phase-settled .critical-card-stage{top:195px;transform:scale(.68)}.critical-results{top:342px}.critical-results>h1{margin-bottom:6px}.critical-understood{padding:8px 10px}.critical-film-cta{margin-top:6px!important}.critical-result-toolbar{margin-top:5px}.critical-result-toolbar button{height:35px}
}
@media(prefers-reduced-motion:reduce){
  .critical-atmosphere::before,.critical-atmosphere i,.critical-orb-wave,.critical-card-energy::before,.critical-card-energy i,.critical-question::before,.critical-question::after,.critical-question i,.trip-phase-ready .critical-energy-paths i{animation:none!important}
  .critical-orb,.critical-request-capsule,.critical-card,.critical-card-inner,.critical-results,.critical-film-layer,.critical-poster-flight{transition-duration:.18s!important;transition-timing-function:ease!important}
  .critical-card.is-active{transform:none!important}.critical-poster-flight{display:none!important}
}

/* Premium vertical-slice reconstruction ----------------------------------- */
.premium-welcome{display:block!important;padding:0 26px 30px!important;background:#050509!important;overflow:hidden!important}
.premium-welcome .auth-cinema{inset:-13% -12% 23%!important;opacity:.74!important;transform:rotate(-4deg) scale(1.08);mask-image:linear-gradient(180deg,#000 0 73%,transparent 100%)!important;-webkit-mask-image:linear-gradient(180deg,#000 0 73%,transparent 100%)!important}
.premium-welcome .auth-poster{border-radius:20px!important;filter:saturate(.78) contrast(1.1) brightness(.59)!important;box-shadow:0 24px 58px rgba(0,0,0,.68),0 0 0 .5px rgba(153,188,255,.18)!important}
.premium-welcome::after{background:linear-gradient(180deg,rgba(2,3,8,.05),rgba(5,5,12,.12) 28%,rgba(5,5,11,.82) 58%,#050509 82%)!important}
.premium-welcome-light{position:absolute;z-index:2;inset:0;pointer-events:none}
.premium-welcome-light::before{content:"";position:absolute;left:50%;top:115px;width:280px;height:220px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(80,176,255,.2),rgba(126,82,245,.12) 38%,transparent 70%);filter:blur(18px)}
.premium-welcome-light i{position:absolute;width:1px;height:92px;top:74px;background:linear-gradient(transparent,rgba(137,215,255,.65),transparent);filter:drop-shadow(0 0 7px #77d2ff);opacity:.32;animation:premium-welcome-filament 5.6s ease-in-out infinite}
.premium-welcome-light i:first-child{left:36%;transform:rotate(28deg)}.premium-welcome-light i:last-child{right:34%;transform:rotate(-24deg);animation-delay:-2.8s}
.premium-welcome .welcome-brand{position:absolute!important;z-index:4!important;left:0;right:0;top:143px;display:grid!important;justify-items:center!important;gap:14px!important;margin:0!important}
.premium-welcome .welcome-brand .brand-mark{width:82px!important;height:82px!important;filter:drop-shadow(0 0 8px rgba(151,220,255,.75)) drop-shadow(0 0 28px rgba(105,104,255,.42))!important}
.premium-welcome .welcome-brand .wordmark{width:158px!important;height:auto!important;filter:drop-shadow(0 0 18px rgba(91,180,255,.34))}
.premium-brand-aura{position:absolute;left:50%;top:41px;width:380px;height:300px;border-radius:0;transform:translate(-50%,-50%);background:radial-gradient(190px 150px at 50% 50%,rgba(74,181,255,.26),rgba(74,181,255,.15) 42%,rgba(132,82,244,.07) 70%,rgba(132,82,244,0) 100%);filter:none;pointer-events:none}
.premium-welcome .welcome-message{position:absolute!important;z-index:4!important;left:27px;right:27px;top:376px;margin:0!important;text-align:center!important}
.premium-welcome .welcome-message .eyebrow{color:#83d9ff!important;font-size:8.5px!important;letter-spacing:.22em!important;text-shadow:0 0 13px rgba(81,188,255,.34)}
.premium-welcome .welcome-message h1{margin:11px 0 10px!important;font-size:43px!important;line-height:.98!important;font-weight:650!important;letter-spacing:-.047em!important}
.premium-welcome .welcome-message p{max-width:300px!important;margin:0 auto!important;color:#aaa5b2!important;font-size:13px!important;line-height:1.55!important}
.premium-welcome .welcome-actions{position:absolute!important;z-index:5!important;left:25px;right:25px;bottom:31px;margin:0!important;display:grid!important;gap:7px!important}
.premium-welcome .welcome-actions .primary-button{height:58px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:13px!important;border:1px solid rgba(192,213,255,.25)!important;border-radius:19px!important;background:linear-gradient(145deg,#7169f4,#8a4fe3 58%,#5937bd)!important;box-shadow:inset 0 1px rgba(255,255,255,.36),inset 0 -10px 24px rgba(35,13,88,.22),0 16px 38px rgba(66,43,170,.31),0 0 28px rgba(120,120,255,.17)!important;font-size:14px!important;letter-spacing:-.01em!important;transition:transform .22s var(--critical-spring),filter .22s ease!important}
.premium-welcome .welcome-actions .primary-button,.premium-welcome .welcome-actions .primary-button span,.premium-welcome .welcome-actions .primary-button i{color:#fff!important;opacity:1!important;-webkit-text-fill-color:#fff!important;filter:none!important}
.premium-welcome .welcome-actions .primary-button span{font-size:14px!important;font-weight:680!important;letter-spacing:-.01em!important}
.premium-welcome .welcome-actions .primary-button:active{transform:translateY(1px) scale(.975);filter:brightness(.93)}
.premium-welcome .welcome-actions .primary-button i{font-size:18px;font-style:normal;font-weight:300;opacity:.8}
.premium-welcome .welcome-actions .quiet-button{height:43px!important;text-decoration:underline;text-decoration-color:rgba(150,213,255,.38);text-underline-offset:5px;font-size:10px!important}
.premium-welcome .welcome-actions>span{margin-top:0!important;color:#66626e!important;font-size:7px!important;text-align:center!important}

.premium-discover{padding:0 20px 138px!important;overflow-y:auto!important;overflow-x:hidden!important;background:#050509!important;scrollbar-width:none}
.premium-discover::-webkit-scrollbar{display:none}
.premium-discover-ambient{position:fixed;z-index:0;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 5%,rgba(72,123,241,.1),transparent 30%),linear-gradient(180deg,#06060b,#050509 54%,#040407)}
.premium-discover-ambient::before{content:"";position:absolute;inset:-12%;background:radial-gradient(circle at 15% 23%,rgba(91,177,255,.09),transparent 20%),radial-gradient(circle at 88% 37%,rgba(184,78,246,.1),transparent 25%),radial-gradient(circle at 49% 67%,rgba(69,98,213,.06),transparent 27%);filter:blur(22px);animation:premium-ambient-breathe 10s ease-in-out infinite alternate}
.premium-discover-ambient>i{position:absolute;top:-5%;width:1px;height:260px;background:linear-gradient(transparent,rgba(119,206,255,.45),rgba(222,99,255,.24),transparent);filter:drop-shadow(0 0 6px rgba(105,202,255,.65));opacity:0;clip-path:polygon(50% 0,100% 16%,35% 28%,78% 43%,18% 59%,64% 74%,35% 100%,0 82%,48% 65%,9% 47%,62% 32%,22% 14%);animation:premium-lightning 8s linear infinite}
.premium-discover-ambient>i:nth-child(1){left:8%;animation-delay:-1.6s}.premium-discover-ambient>i:nth-child(2){right:7%;height:320px;animation-delay:-5.4s}.premium-discover-ambient>i:nth-child(3){left:54%;top:42%;height:235px;animation-delay:-7.2s}
.premium-discover-ambient>span{position:absolute;left:50%;top:184px;width:310px;height:220px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(118,74,231,.075),transparent 68%);filter:blur(15px)}
.premium-discover-ambient>span::before{content:"";position:absolute;left:50%;top:390px;width:390px;height:310px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(68,159,255,.075),rgba(133,71,236,.055) 36%,rgba(230,96,255,.026) 53%,transparent 72%);filter:blur(18px);opacity:.88;animation:premium-lower-field 9.5s ease-in-out infinite alternate}
.premium-discover-ambient>span::after{content:"";position:absolute;left:50%;top:455px;width:270px;height:170px;transform:translateX(-50%);background:radial-gradient(circle at 18% 63%,rgba(121,209,255,.7) 0 1px,transparent 2px),radial-gradient(circle at 74% 26%,rgba(222,139,255,.58) 0 1px,transparent 2px),radial-gradient(circle at 52% 82%,rgba(122,157,255,.52) 0 1px,transparent 2px);filter:drop-shadow(0 0 5px rgba(109,190,255,.48));opacity:.28;animation:premium-lower-sparks 7.8s ease-in-out infinite alternate}
.premium-discover>*:not(.premium-discover-ambient){position:relative;z-index:2}
.premium-discover.trip-critical-host>.trip-critical-layer{position:absolute!important;z-index:140!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important}
.premium-discover.trip-critical-host.critical-engaged>.orb-instruction,.premium-discover.trip-critical-host.critical-engaged>.discover-shortcuts,.premium-discover.trip-critical-host.critical-engaged>.discover-inspiration{opacity:0!important;transform:scale(.985)!important;pointer-events:none!important;transition:opacity .24s ease,transform .42s var(--critical-ease)!important}
.premium-discover .ios-status{margin-left:-1px;margin-right:-1px}
.premium-discover>.app-header{height:57px!important;margin-top:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
.premium-discover .brand-home{position:relative;display:flex!important;align-items:center!important;gap:10px!important;padding:0!important;background:transparent!important}
.premium-discover .brand-home .brand-mark{width:35px!important;height:35px!important;filter:drop-shadow(0 0 7px rgba(125,210,255,.72))!important}.premium-discover .brand-home .wordmark{width:92px!important;height:auto!important}
.header-brand-aura{position:absolute;left:-20px;width:175px;height:62px;border-radius:50%;background:radial-gradient(ellipse,rgba(74,178,255,.23),rgba(125,83,239,.075) 48%,transparent 72%);filter:blur(11px);pointer-events:none}
.premium-discover .profile-control{width:38px!important;height:38px!important;border:1px solid rgba(179,207,255,.15)!important;border-radius:50%!important;background:linear-gradient(145deg,rgba(29,28,42,.82),rgba(10,10,16,.92))!important;box-shadow:inset 0 1px rgba(255,255,255,.11),0 8px 24px rgba(0,0,0,.34)!important;color:#ded9e6!important;font-size:9px!important}
.premium-discover>.friday-ribbon{width:100%!important;height:63px!important;margin:5px 0 23px!important;padding:11px 13px!important;display:grid!important;grid-template-columns:1fr auto!important;grid-template-rows:auto auto!important;text-align:left!important;border:1px solid rgba(238,128,255,.26)!important;border-radius:19px!important;background:linear-gradient(125deg,rgba(72,39,104,.64),rgba(39,28,74,.66) 55%,rgba(25,30,62,.62))!important;box-shadow:inset 0 1px rgba(255,255,255,.13),0 12px 33px rgba(0,0,0,.31),0 0 0 1px rgba(238,116,255,.04),0 0 23px rgba(221,92,255,.13)!important;animation:premium-friday-invite 3.8s var(--critical-ease) infinite!important}
.premium-discover>.friday-ribbon>span{grid-column:1;grid-row:1;color:#e7a9ff!important;font-size:6.5px!important;letter-spacing:.16em!important}.premium-discover>.friday-ribbon>span>i{background:#ef93ff!important;box-shadow:0 0 9px #ef93ff!important}
.premium-discover>.friday-ribbon>strong{grid-column:1;grid-row:2;margin-top:2px;font-size:11px!important}.premium-discover>.friday-ribbon>em{grid-column:2;grid-row:1/3;align-self:center;margin-right:61px!important}.premium-discover>.friday-ribbon>b{position:absolute!important;right:12px!important;top:15px!important;height:33px!important;padding:0 13px!important;display:grid!important;place-items:center!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:12px!important;background:rgba(255,255,255,.075)!important;font-size:8px!important}
.premium-discover>.discover-heading{margin:0 2px 16px!important}.premium-discover .discover-kicker{display:block;margin-bottom:8px;color:#7ed6ff;font-size:6px;font-weight:720;letter-spacing:.2em}.premium-discover>.discover-heading>p{margin:0 0 2px!important;color:#9d98a5!important;font-size:11px!important}.premium-discover>.discover-heading>h1{margin:0!important;font-size:35px!important;line-height:1!important;font-weight:650!important;letter-spacing:-.047em!important}
.premium-composer{position:relative!important;width:100%!important;min-height:172px!important;height:auto!important;box-sizing:border-box!important;padding:18px 17px 13px!important;display:block!important;border:1px solid rgba(167,198,255,.16)!important;border-radius:25px!important;background:linear-gradient(145deg,rgba(22,21,31,.88),rgba(9,9,15,.95))!important;box-shadow:inset 0 1px rgba(255,255,255,.1),inset 0 -36px 70px rgba(0,0,0,.18),0 20px 52px rgba(0,0,0,.34)!important;overflow:visible!important;transition:border-color .35s ease,box-shadow .42s ease,background .42s ease!important}
.premium-composer::before{content:"";position:absolute;inset:-1px;border-radius:25px;padding:1px;background:linear-gradient(130deg,rgba(106,209,255,.18),transparent 31%,transparent 63%,rgba(232,105,255,.17));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.premium-composer.critical-query-alive{border-color:rgba(135,207,255,.31)!important;background:linear-gradient(145deg,rgba(24,25,41,.92),rgba(13,10,23,.96))!important;box-shadow:inset 0 1px rgba(255,255,255,.12),0 20px 55px rgba(0,0,0,.36),0 0 28px rgba(85,161,255,.11),0 0 42px rgba(222,91,255,.075)!important}
.premium-composer .request-label{display:block!important;color:#90d9ff!important;font-size:6.5px!important;font-weight:720!important;letter-spacing:.19em!important}
.premium-discover.discover-v5 .search-glass.premium-composer textarea,.premium-discover.discover-v5.is-listening-space .search-glass.premium-composer textarea{position:relative!important;inset:auto!important;width:100%!important;height:75px!important;margin:9px 0 5px!important;padding:0 3px 0 0!important;display:block!important;border:0!important;background:transparent!important;resize:none!important;color:#eeeaf3!important;font:500 17px/1.35 system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif!important;letter-spacing:-.025em!important;opacity:1!important;overflow-y:auto!important;outline:none!important;pointer-events:auto!important}
.premium-composer textarea::placeholder{color:#706b78!important;opacity:1!important}.premium-composer:focus-within textarea::placeholder{color:#88818f!important}
.composer-footer{height:46px;display:flex;align-items:end;justify-content:space-between;gap:10px;border-top:1px solid rgba(255,255,255,.055);padding-top:8px}.composer-guidance{max-width:190px;padding:0 0 3px;color:#77717e;font-size:7px;line-height:1.35}.critical-query-alive .composer-guidance{color:#8b9aaf}
.composer-actions{display:flex;align-items:center;gap:7px}.premium-composer .voice-control,.premium-composer .query-submit{position:relative!important;inset:auto!important;margin:0!important;display:grid!important;place-items:center!important;border-radius:50%!important}
.premium-composer .voice-control{width:37px!important;height:37px!important;border:1px solid rgba(147,195,255,.13)!important;background:rgba(255,255,255,.035)!important;color:#84d9ff!important}.premium-composer .voice-control svg{width:16px!important;height:16px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.5!important}
.premium-composer .query-submit{width:47px!important;height:47px!important;border:0!important;background:transparent!important;filter:grayscale(.84) brightness(.65)!important;transition:filter .4s ease,transform .3s var(--critical-spring)!important}.premium-composer .query-submit:disabled{opacity:.46!important}.premium-composer.critical-query-alive .query-submit{filter:saturate(1.24) brightness(1.08) drop-shadow(0 0 11px rgba(100,198,255,.55)) drop-shadow(0 0 19px rgba(229,104,255,.23))!important}.premium-composer.critical-query-alive .query-submit:active{transform:scale(.91)}
.premium-composer .query-submit .recon-orb{width:44px!important;height:44px!important;transform:none!important}.premium-composer .query-submit .orb-halo{display:none!important}
.orb-instruction{margin:8px 5px 0!important;color:#716c78!important;font-size:7px!important;text-align:right!important;transition:color .3s ease}.premium-composer.critical-query-alive+.orb-instruction{color:#a1a8ba!important}
.premium-discover>.voice-error{margin:7px 4px -1px!important;color:#f0a3c9!important;font-size:7.5px!important}
.discover-shortcuts{height:55px;margin:16px 0 18px;padding:5px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border:1px solid rgba(160,195,255,.1);border-radius:19px;background:rgba(16,15,23,.66);box-shadow:inset 0 1px rgba(255,255,255,.065);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.discover-shortcuts button{min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:14px;background:transparent;color:#aaa4b1;font-size:7.5px}.discover-shortcuts button:active{background:rgba(105,178,255,.08);transform:scale(.97)}.discover-shortcuts i{position:relative;width:16px;height:16px;display:grid;place-items:center;color:#82d8ff;font-size:9px;font-style:normal}
.shortcut-history{border:1px solid currentColor;border-radius:50%}.shortcut-history::before{content:"";position:absolute;left:7px;top:3px;width:1px;height:5px;background:currentColor;transform-origin:bottom}.shortcut-history::after{content:"";position:absolute;left:7px;top:7px;width:4px;height:1px;background:currentColor;transform:rotate(24deg);transform-origin:left}.shortcut-save{border:1px solid currentColor;border-radius:2px 2px 5px 5px;clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%)}.shortcut-cryptic{border:1px solid currentColor;border-radius:50%;text-shadow:0 0 8px #74d6ff}
.discover-inspiration{margin-top:0}.discover-inspiration>header{display:flex;align-items:end;justify-content:space-between;margin-bottom:10px}.discover-inspiration>header span{display:block;margin-bottom:3px;color:#77717f;font-size:5.5px;font-weight:720;letter-spacing:.17em}.discover-inspiration h2{margin:0;font-size:14px;font-weight:580}.discover-inspiration header button{padding:6px 0;border:0;background:transparent;color:#9d8ac5;font-size:7px}.discover-inspiration .prompt-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important}.discover-inspiration .prompt-card{height:106px!important;border:1px solid rgba(188,205,255,.12)!important;border-radius:18px!important;overflow:hidden!important;box-shadow:0 14px 31px rgba(0,0,0,.27)!important}.discover-inspiration .prompt-copy{padding:12px!important}.discover-inspiration .prompt-title{font-size:9px!important;line-height:1.24!important}.discover-inspiration .prompt-copy b{font-size:6px!important}

@keyframes premium-welcome-filament{0%,100%{opacity:.08;clip-path:inset(0 0 100%)}45%{opacity:.42}78%{opacity:.08;clip-path:inset(0)}}
@keyframes premium-ambient-breathe{to{transform:translate3d(1.8%,-1.1%,0) scale(1.035);opacity:.78}}
@keyframes premium-lower-field{to{transform:translateX(-50%) translate3d(2%,-2.5%,0) scale(1.055);opacity:.68}}
@keyframes premium-lower-sparks{to{transform:translateX(-50%) translate3d(-2%,5%,0);opacity:.48}}
@keyframes premium-lightning{0%,78%,100%{opacity:0;clip-path:inset(0 0 100%)}82%{opacity:.2}90%{opacity:.05;clip-path:inset(0)}}
@keyframes premium-friday-invite{0%,78%,100%{transform:translateY(0);box-shadow:inset 0 1px rgba(255,255,255,.13),0 12px 33px rgba(0,0,0,.31),0 0 23px rgba(221,92,255,.13)}86%{transform:translateY(-2px);box-shadow:inset 0 1px rgba(255,255,255,.18),0 15px 36px rgba(0,0,0,.34),0 0 29px rgba(234,110,255,.23)}92%{transform:translateY(0)}}

@media(max-height:760px){
  .premium-welcome .welcome-brand{top:110px}.premium-welcome .welcome-message{top:296px}.premium-welcome .welcome-message h1{font-size:35px!important}.premium-welcome .welcome-actions{bottom:25px}
  .premium-discover>.friday-ribbon{margin-bottom:16px!important}.premium-discover>.discover-heading{margin-bottom:12px!important}.premium-composer{min-height:157px!important}.premium-composer textarea{height:62px!important}.discover-shortcuts{margin:12px 0 14px}.discover-inspiration .prompt-card{height:96px!important}
}
@media(prefers-reduced-motion:reduce){
  .premium-welcome-light i,.premium-discover-ambient::before,.premium-discover-ambient>i,.premium-discover-ambient>span::before,.premium-discover-ambient>span::after,.premium-discover>.friday-ribbon{animation:none!important}
  .premium-discover>.friday-ribbon{transform:none!important}
}
.device.manual-reduced-motion .premium-discover-ambient::before,
.device.manual-reduced-motion .premium-discover-ambient>i,
.device.manual-reduced-motion .premium-discover-ambient>span::before,
.device.manual-reduced-motion .premium-discover-ambient>span::after{animation:none!important}

/* Signature ceremony: one stable stage, strongest match last. */
.trip-critical-layer{background:radial-gradient(circle at 50% 27%,rgba(91,105,255,.12),transparent 25%),radial-gradient(ellipse at 50% 58%,rgba(206,75,245,.045),transparent 43%),linear-gradient(180deg,#07070d,#050509 62%,#040407)!important}
.trip-critical-layer.is-live{background:radial-gradient(circle at 50% 25%,rgba(86,122,255,.15),transparent 25%),radial-gradient(ellipse at 50% 52%,rgba(202,79,247,.06),transparent 39%),linear-gradient(180deg,#07070d,#050509 58%,#040407)!important}
.critical-request-capsule{border-color:rgba(155,198,255,.13)!important;background:linear-gradient(145deg,rgba(21,20,31,.88),rgba(8,8,13,.94))!important}
.is-live .critical-request-capsule{top:80px!important;height:62px!important;border-radius:20px!important}
.critical-request-capsule p{font-size:10.5px!important;color:#d4cfda!important}
.critical-orb-stage{top:151px!important;width:218px!important;height:218px!important}
.critical-orb{position:relative;width:198px!important;height:198px!important;isolation:isolate}
.critical-orb::before{content:"";position:absolute;z-index:4;inset:4px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 8%,rgba(104,219,255,.42) 11%,transparent 15% 28%,rgba(239,104,255,.38) 32%,transparent 38% 66%,rgba(121,110,255,.42) 71%,transparent 77%);-webkit-mask:radial-gradient(circle,transparent 63%,#000 65% 67%,transparent 69%);mask:radial-gradient(circle,transparent 63%,#000 65% 67%,transparent 69%);filter:drop-shadow(0 0 5px rgba(108,209,255,.55));opacity:.66;animation:critical-orb-lens 8s linear infinite;pointer-events:none}
.critical-orb::after{content:"";position:absolute;z-index:-1;inset:20px;border-radius:50%;background:radial-gradient(circle,rgba(88,188,255,.23),rgba(124,72,235,.14) 42%,rgba(234,90,255,.08) 58%,transparent 72%);filter:blur(17px);animation:critical-orb-bloom 2.8s ease-in-out infinite alternate;pointer-events:none}
.critical-orb .recon-orb .trip95-orb-canvas{opacity:.52!important;filter:saturate(1.6) brightness(.57) contrast(1.3) drop-shadow(0 0 9px rgba(var(--critical-blue),.72)) drop-shadow(0 0 27px rgba(var(--critical-pink),.32))!important}
.critical-orb .recon-orb .orb-sphere{opacity:.96!important;background:radial-gradient(circle at 31% 24%,#d9fbff 0 1%,#79dcff 3%,#466af2 13%,#7038d5 31%,#24153f 55%,#070711 78%)!important;box-shadow:inset -23px -25px 39px rgba(1,1,12,.82),inset 12px 12px 24px rgba(180,235,255,.18),0 0 8px rgba(165,232,255,.72),0 0 31px rgba(var(--critical-blue),.44),0 0 58px rgba(var(--critical-pink),.22)!important}
.critical-orb .recon-orb .orb-core{opacity:.55!important;animation-duration:2.1s!important}.critical-orb .recon-orb .orb-fibres{opacity:.98!important;filter:contrast(1.4) brightness(1.25)!important}.critical-orb .recon-orb .orb-plasma{mix-blend-mode:screen;opacity:.66!important}
.trip-phase-gathering .critical-orb{animation:critical-orb-hover 3.4s ease-in-out infinite}
.trip-phase-charging .critical-orb{width:210px!important;height:210px!important;filter:saturate(1.32) brightness(1.04) drop-shadow(0 0 24px rgba(var(--critical-blue),.2))!important;animation:critical-orb-charge .72s ease-in-out infinite alternate}
.trip-phase-compressed .critical-orb{width:158px!important;height:158px!important;filter:saturate(1.65) brightness(1.33) drop-shadow(0 0 30px rgba(var(--critical-pink),.38))!important}
.trip-phase-ready .critical-orb-stage,.trip-phase-revealing .critical-orb-stage{top:112px!important;transform:translateX(-50%) scale(.53)!important}.trip-phase-settled .critical-orb-stage{top:34px!important;transform:translateX(-50%) scale(.34)!important}
.critical-energy-paths{top:254px!important;height:164px!important}.critical-energy-paths i{height:147px!important;opacity:.25;background:linear-gradient(180deg,#fff,rgba(var(--critical-blue),.88) 10%,rgba(var(--critical-violet),.58) 43%,rgba(var(--critical-pink),.19) 70%,transparent)!important}
.trip-phase-ready .critical-energy-paths i:nth-child(2){opacity:.95;filter:drop-shadow(0 0 8px rgba(var(--critical-blue),.9))}.trip-phase-ready .critical-energy-paths i:nth-child(1),.trip-phase-ready .critical-energy-paths i:nth-child(3){opacity:.28}

.critical-card-stage{top:322px!important;height:250px!important;perspective:1350px!important}
.critical-card{width:108px!important;height:218px!important;border-radius:21px!important;transform-origin:50% 70%!important}
.critical-card.rank-3{left:calc(50% - 54px)!important}.critical-card.rank-2{left:calc(16.667% - 54px)!important}.critical-card.rank-1{left:calc(83.333% - 54px)!important}
.trip-critical-layer[data-revealed="1"] .critical-card.rank-3{left:calc(16.667% - 54px)!important}.trip-critical-layer[data-revealed="1"] .critical-card.rank-2{left:calc(50% - 54px)!important}.trip-critical-layer[data-revealed="1"] .critical-card.rank-1{left:calc(83.333% - 54px)!important}
.trip-critical-layer[data-revealed="2"] .critical-card.rank-3,.trip-critical-layer[data-revealed="3"] .critical-card.rank-3{left:calc(16.667% - 54px)!important}.trip-critical-layer[data-revealed="2"] .critical-card.rank-1,.trip-critical-layer[data-revealed="3"] .critical-card.rank-1{left:calc(50% - 54px)!important}.trip-critical-layer[data-revealed="2"] .critical-card.rank-2,.trip-critical-layer[data-revealed="3"] .critical-card.rank-2{left:calc(83.333% - 54px)!important}
.trip-phase-ready .critical-card,.trip-phase-revealing .critical-card,.trip-phase-settled .critical-card{transform:translateY(0) scale(.92)!important}
.critical-card.is-active{transform:translateY(-15px) translateZ(34px) scale(1.08)!important;filter:drop-shadow(0 22px 28px rgba(0,0,0,.54)) drop-shadow(0 0 25px rgba(var(--critical-blue),.22))!important}
.critical-card.is-final{transform:translateY(-18px) translateZ(42px) scale(1.11)!important;filter:drop-shadow(0 25px 31px rgba(0,0,0,.58)) drop-shadow(0 0 34px rgba(var(--critical-pink),.34))!important}
.critical-card.is-opening{transform:translateY(-23px) translateZ(70px) scale(1.15)!important;z-index:12!important}.critical-card.is-opening .critical-card-inner{transition-duration:1.04s!important}
.critical-card-back,.critical-card-front{border-radius:21px!important}
.critical-card-back{border-color:rgba(164,208,255,.2)!important;background:radial-gradient(circle at 50% 42%,rgba(91,160,255,.13),transparent 23%),radial-gradient(circle at 52% 47%,rgba(220,96,255,.1),transparent 39%),linear-gradient(145deg,rgba(29,27,43,.98),rgba(7,7,13,.99))!important;box-shadow:inset 0 1px rgba(255,255,255,.16),inset 0 0 0 1px rgba(115,172,255,.025),inset 0 -34px 68px rgba(0,0,0,.46),0 18px 43px rgba(0,0,0,.43)!important}
.critical-card-back::before{inset:1px!important;border-radius:20px!important;background:linear-gradient(118deg,transparent 0 19%,rgba(144,215,255,.06) 20%,transparent 21% 48%,rgba(234,124,255,.05) 49%,transparent 50%),repeating-linear-gradient(0deg,transparent 0 25px,rgba(255,255,255,.018) 26px,transparent 27px)!important;opacity:.8!important}
.critical-card-back::after{content:"";position:absolute;inset:9px;border:1px solid rgba(133,192,255,.08);border-radius:15px;box-shadow:inset 0 0 21px rgba(115,89,236,.075);pointer-events:none}
.critical-card-back>b{top:14px!important;left:15px!important;color:rgba(177,221,255,.72)!important}.critical-card-back>small{bottom:14px!important;color:#8e8a98!important}
.critical-question{width:66px!important;height:82px!important}.critical-question::before{inset:3px!important;border-color:rgba(var(--critical-blue),.32)!important}.critical-question::after{inset:12px!important;border-color:rgba(var(--critical-pink),.27)!important}.critical-question i{inset:21px!important}.critical-question em{font-size:28px!important;font-weight:220!important;text-shadow:0 0 10px #8cdfff,0 0 24px rgba(var(--critical-pink),.48)!important}
.critical-card-energy{inset:-16px!important}.critical-card.is-final .critical-card-energy::before{border-color:rgba(var(--critical-pink),.78)!important;box-shadow:0 0 24px rgba(var(--critical-pink),.42),0 0 45px rgba(var(--critical-blue),.16),inset 0 0 17px rgba(var(--critical-pink),.15)!important;animation-duration:.62s!important}
.critical-card-front{padding:15px 12px!important}.critical-card-front strong{font-size:10px!important}.critical-card-front small{font-size:7px!important}.critical-card-front em{font-size:6px!important}
.critical-status{top:594px!important}.critical-status h1{font-size:20px!important}.critical-status p{font-size:8.5px!important}

.critical-final-bloom{position:absolute;z-index:9;left:50%;top:350px;width:20px;height:20px;transform:translate(-50%,-50%);pointer-events:none;opacity:0}
.critical-final-bloom::before{content:"";position:absolute;inset:-65px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.62),rgba(var(--critical-pink),.28) 8%,rgba(var(--critical-blue),.13) 27%,transparent 64%);transform:scale(.3);filter:blur(2px)}
.critical-final-bloom i{position:absolute;left:50%;top:50%;width:1px;height:86px;transform-origin:50% 0;background:linear-gradient(#fff,rgba(var(--critical-pink),.7),transparent);filter:drop-shadow(0 0 5px #f3a4ff)}
.critical-final-bloom i:nth-child(1){transform:rotate(0deg)}.critical-final-bloom i:nth-child(2){transform:rotate(60deg)}.critical-final-bloom i:nth-child(3){transform:rotate(120deg)}.critical-final-bloom i:nth-child(4){transform:rotate(180deg)}.critical-final-bloom i:nth-child(5){transform:rotate(240deg)}.critical-final-bloom i:nth-child(6){transform:rotate(300deg)}
.critical-final-reveal .critical-final-bloom{animation:critical-final-bloom-show 1.15s var(--critical-ease) .18s both}.critical-final-reveal .critical-final-bloom::before{animation:critical-final-core 1.1s var(--critical-ease) .18s both}.critical-final-reveal .critical-final-bloom i{animation:critical-final-ray 1s var(--critical-ease) .2s both}
.trip-phase-settled .critical-card-stage{top:194px!important;transform:scale(.72)!important}.trip-phase-settled .critical-results{top:356px!important}.critical-understood{padding:11px 12px!important;background:linear-gradient(145deg,rgba(21,20,31,.72),rgba(10,10,15,.74))!important}.critical-film-cta{height:46px!important;border-radius:16px!important;background:linear-gradient(135deg,#596fd8,#8650d6 58%,#5c3ab5)!important;box-shadow:inset 0 1px rgba(255,255,255,.22),0 14px 31px rgba(49,40,129,.29),0 0 24px rgba(var(--critical-blue),.1)!important}

@keyframes critical-orb-lens{to{transform:rotate(360deg)}}
@keyframes critical-orb-bloom{to{transform:scale(1.12);opacity:.68}}
@keyframes critical-orb-hover{50%{transform:translateY(-4px)}}
@keyframes critical-orb-charge{to{transform:scale(1.025);filter:saturate(1.5) brightness(1.1) drop-shadow(0 0 26px rgba(var(--critical-pink),.3))}}
@keyframes critical-final-bloom-show{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}28%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}}
@keyframes critical-final-core{0%{opacity:0;transform:scale(.2)}35%{opacity:1}100%{opacity:0;transform:scale(2.2)}}
@keyframes critical-final-ray{0%{opacity:0;height:20px}35%{opacity:.8}100%{opacity:0;height:130px}}

@media(max-height:760px){
  .critical-orb-stage{top:127px!important;transform:translateX(-50%) scale(.84)!important}.trip-phase-ready .critical-orb-stage,.trip-phase-revealing .critical-orb-stage{top:93px!important;transform:translateX(-50%) scale(.46)!important}.critical-card-stage{top:278px!important;transform:scale(.88)!important}.critical-status{top:510px!important}.trip-phase-settled .critical-card-stage{top:185px!important;transform:scale(.64)!important}.trip-phase-settled .critical-results{top:334px!important}
}
@media(prefers-reduced-motion:reduce){
  .critical-orb::before,.critical-orb::after,.trip-phase-gathering .critical-orb,.trip-phase-charging .critical-orb,.critical-final-bloom,.critical-final-bloom::before,.critical-final-bloom i{animation:none!important}
  .critical-final-reveal .critical-final-bloom{opacity:.35!important;transform:translate(-50%,-50%) scale(1)!important}
}

/* Signature reconstruction — verified visual contract -------------------- */
.premium-discover.trip-critical-host{overflow-y:auto!important;overscroll-behavior-y:contain!important;scroll-padding-bottom:120px!important}
.premium-discover.trip-critical-host.critical-engaged{overflow:hidden!important}
.premium-discover .discover-heading{padding-top:2px!important}
.premium-discover .discover-kicker{display:none!important}
.premium-discover.first-discovery .discover-heading::before{content:none!important;display:none!important}
.premium-composer .query-submit>.signature-orb,.premium-composer .query-submit>.recon-orb{width:45px!important;height:45px!important;transform:none!important;filter:none!important}
.premium-composer .query-submit>.signature-orb .brand-mark,.premium-composer .query-submit>.recon-orb .brand-mark{display:none!important}
.premium-composer .voice-control{flex:0 0 38px!important}.premium-composer .query-submit{flex:0 0 48px!important}
.premium-composer .composer-actions{min-width:95px!important;justify-content:flex-end!important}
.discover-shortcuts button{min-height:44px!important;transition:background .24s ease,color .24s ease,transform .24s var(--critical-spring)!important}
.discover-shortcuts svg{width:18px;height:18px;overflow:visible;fill:none;stroke:#82d8ff;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px rgba(97,201,255,.45))}
.discover-shortcuts button:focus-visible{background:linear-gradient(145deg,rgba(91,180,255,.1),rgba(132,76,240,.07));color:#e7e2ed;outline:none}@media (hover: hover) and (pointer: fine){.discover-shortcuts button:hover{background:linear-gradient(145deg,rgba(91,180,255,.1),rgba(132,76,240,.07));color:#e7e2ed;outline:none}}/* (29 October 2026) hover only for a real pointer: a finger leaves :hover on whatever it last touched (hub/docs/TASTE-INTRO-2026-10-29.md) */
.premium-discover>.friday-ribbon::after{content:"";position:absolute;inset:-1px;border-radius:20px;border:1px solid rgba(255,144,242,.55);box-shadow:0 0 12px rgba(255,118,237,.28),0 0 28px rgba(145,102,255,.13);opacity:.4;animation:critical-friday-edge 2.7s ease-in-out infinite;pointer-events:none}
.discover-inspiration{padding-bottom:20px!important}.discover-inspiration .prompt-card{min-height:108px!important}

.trip-critical-layer[data-mode="friday"]{--critical-blue:127,203,255;--critical-violet:157,93,255;--critical-pink:255,116,224;background:radial-gradient(circle at 50% 24%,rgba(255,104,226,.1),transparent 25%),radial-gradient(circle at 50% 48%,rgba(108,164,255,.07),transparent 36%),linear-gradient(180deg,#08070d,#050509 58%,#040407)!important}
.trip-critical-layer[data-mode="friday"] .critical-request-capsule span{color:#f2a8ff!important}.trip-critical-layer[data-mode="friday"] .critical-card.is-active .critical-card-energy::before{border-color:rgba(var(--critical-pink),.74)!important;box-shadow:0 0 24px rgba(var(--critical-pink),.34),0 0 46px rgba(var(--critical-blue),.12),inset 0 0 16px rgba(var(--critical-pink),.12)!important}

.trip-phase-ready .critical-orb-stage{top:88px!important;transform:translateX(-50%) scale(.43)!important}
.critical-card.is-opening{top:0!important;transform:translateY(-6px) translateZ(110px) scale(1.18)!important;filter:drop-shadow(0 28px 45px rgba(0,0,0,.67)) drop-shadow(0 0 34px rgba(var(--critical-blue),.3))!important}
.critical-card.is-final.is-opening{transform:translateY(-9px) translateZ(135px) scale(1.25)!important;filter:drop-shadow(0 30px 48px rgba(0,0,0,.7)) drop-shadow(0 0 44px rgba(var(--critical-pink),.5))!important}
.critical-card.is-opening .critical-card-inner{transition-duration:1.12s!important;transition-timing-function:cubic-bezier(.2,.72,.18,1)!important}
.critical-card.is-opening .critical-card-front{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 25px 56px rgba(0,0,0,.64),0 0 32px rgba(var(--critical-blue),.16)!important}
.critical-final-reveal .critical-card-stage{filter:saturate(1.18)}
.critical-final-reveal .critical-final-bloom{z-index:14!important;top:382px!important}.critical-final-reveal .critical-final-bloom::before{inset:-92px!important;background:radial-gradient(circle,rgba(255,255,255,.82),rgba(var(--critical-pink),.38) 9%,rgba(var(--critical-blue),.18) 29%,transparent 67%)!important;filter:blur(3px)!important}

.trip-phase-settled .critical-request-capsule{top:70px!important;height:52px!important;border-radius:17px!important}
.trip-phase-settled .critical-request-capsule span{font-size:6px!important}.trip-phase-settled .critical-request-capsule p{font-size:9px!important}
.trip-phase-settled .critical-orb-stage{top:114px!important;transform:translateX(-50%) scale(.33)!important}
.trip-phase-settled .critical-card-stage{top:210px!important;height:210px!important;transform:none!important}
.trip-phase-settled .critical-card{opacity:1!important}
.trip-phase-settled .critical-card.rank-1{left:calc(50% - 57px)!important;top:-6px!important;transform:translateZ(52px) scale(1.08)!important;z-index:6!important;filter:drop-shadow(0 24px 36px rgba(0,0,0,.58)) drop-shadow(0 0 30px rgba(var(--critical-pink),.38))!important}
.trip-phase-settled .critical-card.rank-2{left:calc(16.667% - 47px)!important;top:18px!important;transform:rotateY(4deg) scale(.82)!important;transform-origin:100% 55%!important;filter:saturate(.86) brightness(.82) drop-shadow(0 18px 28px rgba(0,0,0,.52))!important}
.trip-phase-settled .critical-card.rank-3{left:calc(83.333% - 61px)!important;top:18px!important;transform:rotateY(-4deg) scale(.82)!important;transform-origin:0 55%!important;filter:saturate(.86) brightness(.82) drop-shadow(0 18px 28px rgba(0,0,0,.52))!important}
.trip-phase-settled .critical-results{top:430px!important;left:20px!important;right:20px!important;display:grid!important;grid-template-columns:1fr!important;justify-items:stretch!important;gap:8px!important}
.critical-results>.eyebrow{text-align:center!important;font-size:6.5px!important}.critical-results>h1{text-align:center!important;margin:0 0 3px!important;font-size:24px!important}
.critical-understood{min-height:56px!important;padding:11px 13px!important}.critical-understood>span{margin-bottom:5px!important;color:#8fd7ff!important}.critical-understood>p{margin:0!important;color:#b8b2c0!important;font-size:7.5px!important;line-height:1.42!important}
.critical-film-cta{margin-top:0!important;height:48px!important;font-size:9.5px!important}
.critical-result-toolbar{margin-top:0!important;gap:7px!important}.critical-result-toolbar button{height:44px!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(27,25,38,.78),rgba(10,10,16,.88))!important;box-shadow:inset 0 1px rgba(255,255,255,.075)!important}.critical-result-toolbar button i{width:14px!important;height:14px!important}.critical-result-toolbar button span{font-size:6.2px!important}
.critical-reasoning-list{max-height:360px;overflow-y:auto;overscroll-behavior:contain}

.critical-film-layer{background:linear-gradient(180deg,#07070b,#050509)!important}.critical-film-layer .film-hero{min-height:456px!important;background-position:center 22%!important}.critical-film-layer .film-title>span{display:inline-flex!important;align-items:center!important;min-height:25px!important;padding:0 10px!important;border:1px solid rgba(255,146,239,.32)!important;border-radius:999px!important;background:rgba(37,17,45,.72)!important;color:#f0b1ff!important;box-shadow:0 0 21px rgba(236,104,255,.14)!important}
.film-v5 .decision-actions.critical-film-dock{margin:10px 12px max(26px,env(safe-area-inset-bottom))!important}.film-v5 .critical-film-dock button{min-height:44px!important}.film-v5 .critical-film-dock button i{display:grid!important;place-items:center!important}
.film-v5 .media-trailer{border-radius:24px!important;overflow:hidden!important;box-shadow:0 20px 50px rgba(0,0,0,.42),0 0 0 1px rgba(137,201,255,.08)!important}.film-v5 .cast-track article img{box-shadow:0 0 0 1px rgba(155,210,255,.2),0 10px 24px rgba(0,0,0,.35)!important}

.premium-cryptic-home,.premium-cryptic-result{background:radial-gradient(circle at 50% 22%,rgba(93,156,255,.12),transparent 26%),radial-gradient(circle at 55% 43%,rgba(213,88,255,.07),transparent 34%),linear-gradient(180deg,#07070d,#050509)!important}
.premium-cryptic-home{
  --cryptic-side:24px;
  --cryptic-title-size:37px;
  --cryptic-emblem-scale:1;
  --cryptic-emblem-height:160px;
  --cryptic-rules-height:78px;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column;
  align-items:stretch;
  width:100%;
  height:100%;
  min-height:100%;
  padding:max(22px,env(safe-area-inset-top)) var(--cryptic-side) max(26px,env(safe-area-inset-bottom))!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  color:#f8f8fb;
  background:
    radial-gradient(ellipse at 51% 11%,rgba(73,169,255,.18),transparent 24%),
    radial-gradient(ellipse at 58% 52%,rgba(126,72,232,.105),transparent 30%),
    linear-gradient(180deg,#07070e 0%,#050509 67%,#040408 100%)!important;
}
.premium-cryptic-home>.cryptic-home-header,.premium-cryptic-result>header{
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr) 46px!important;
  align-items:center!important;
}
.premium-cryptic-home>.cryptic-home-header{flex:0 0 46px;min-height:46px}
.premium-cryptic-home>.cryptic-home-header>.circle-control{
  width:46px!important;
  height:46px!important;
  min-width:46px;
  min-height:46px;
  border-color:rgba(207,217,242,.13)!important;
  background:linear-gradient(145deg,rgba(22,24,35,.75),rgba(8,8,14,.88))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 12px 28px rgba(0,0,0,.22)!important;
}
.premium-cryptic-home>.cryptic-home-header>.archive-glyph{justify-self:end;color:#c9c8f2!important}
.premium-cryptic-home>.cryptic-home-header>.archive-glyph svg{width:20px;height:20px}
.premium-cryptic-home .critical-brand-lockup,.premium-cryptic-result .critical-brand-lockup{
  position:relative;
  isolation:isolate;
  justify-self:center!important;
  display:flex!important;
  align-items:center;
  gap:9px!important;
  opacity:1!important;
}
.premium-cryptic-home .critical-brand-lockup::before{display:none!important}
.premium-cryptic-home .critical-brand-lockup .brand-mark{
  position:relative;
  z-index:1;
  width:33px!important;
  height:33px!important;
  filter:drop-shadow(0 0 8px rgba(104,201,255,.68))!important;
}
.premium-cryptic-home .critical-brand-lockup .wordmark{
  position:relative;
  z-index:1;
  width:88px!important;
  height:auto!important;
  opacity:.96;
  filter:drop-shadow(0 0 15px rgba(91,180,255,.2));
}
.premium-cryptic-home .critical-brand-lockup .critical-brand-aura{
  position:absolute!important;
  z-index:0;
  top:50%!important;
  left:50%!important;
  display:block!important;
  width:178px!important;
  height:68px!important;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(75,181,255,.29),rgba(125,83,239,.085) 49%,transparent 74%)!important;
  filter:blur(11px)!important;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.premium-cryptic-home .cryptic-intro{
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
  margin:24px 0 0;
  text-align:center;
}
.premium-cryptic-home .cryptic-kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:0;
  color:#9bd7ff;
  font-size:9.75px;
  font-weight:710;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.premium-cryptic-home .cryptic-kicker i{color:#8279c9;font-style:normal}
.premium-cryptic-home .cryptic-date{color:#b9a5ff;font:inherit}
.premium-cryptic-home .cryptic-intro>h1{
  max-width:100%;
  margin:10px 0 0!important;
  color:transparent;
  background:linear-gradient(98deg,#80d4ff 1%,#718cf5 47%,#aa62ec 100%);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 24px rgba(106,148,255,.105));
  font-size:var(--cryptic-title-size)!important;
  font-weight:760;
  line-height:1!important;
  letter-spacing:-.057em!important;
  text-wrap:balance;
  white-space:nowrap;
}
.premium-cryptic-home .cryptic-intro>h2{
  margin:14px 0 0;
  color:#f7f7fa;
  font-size:24px;
  font-weight:720;
  line-height:1.05;
  letter-spacing:-.045em;
}
.premium-cryptic-home .cryptic-intro>p{
  max-width:320px;
  margin:7px 0 0!important;
  color:#aaa7b4!important;
  font-size:13px!important;
  line-height:1.4!important;
  text-wrap:balance;
}
.premium-cryptic-home .cryptic-five-to-one{
  position:relative;
  flex:0 0 var(--cryptic-emblem-height);
  width:280px;
  height:var(--cryptic-emblem-height);
  margin:17px auto 0;
  isolation:isolate;
}
.premium-cryptic-home .cryptic-five-to-one::before{
  content:"";
  position:absolute;
  z-index:0;
  top:51%;
  left:57%;
  width:230px;
  height:126px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(117,83,242,.2),rgba(73,175,255,.075) 44%,transparent 72%);
  filter:blur(24px);
  transform:translate(-50%,-50%) scale(var(--cryptic-emblem-scale));
  pointer-events:none;
}
.premium-cryptic-home .cryptic-emblem-core{
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  display:block;
  width:280px;
  height:160px;
  transform:scale(var(--cryptic-emblem-scale));
  transform-origin:50% 0;
}
.premium-cryptic-home .cryptic-emblem-clues,
.premium-cryptic-home .cryptic-emblem-paths{position:absolute;display:block}
.premium-cryptic-home .cryptic-emblem-clues{top:15px;left:0;width:168px;height:130px}
.premium-cryptic-home .cryptic-clue-tile{
  position:absolute;
  z-index:1;
  top:calc(var(--cryptic-clue-index) * 7px);
  left:calc(var(--cryptic-clue-index) * 32px);
  display:block;
  width:30px;
  height:calc(120px - var(--cryptic-clue-index) * 13px);
  overflow:hidden;
  border:1px solid rgba(153,200,255,.27);
  border-radius:11px;
  background:linear-gradient(148deg,rgba(34,41,67,.88),rgba(10,10,18,.96));
  box-shadow:inset 0 1px rgba(255,255,255,.095),0 13px 25px rgba(0,0,0,.34),0 0 13px rgba(91,171,255,.05);
  transform:perspective(480px) rotateY(-7deg);
  animation:cryptic-clue-arrive .55s cubic-bezier(.2,.78,.2,1) calc(var(--cryptic-clue-index) * 48ms) both;
}
.premium-cryptic-home .cryptic-clue-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 29%,rgba(117,207,255,.085) 48%,transparent 67%);
}
.premium-cryptic-home .cryptic-clue-tile>b{
  position:absolute;
  z-index:1;
  top:62%;
  left:50%;
  display:block;
  width:14px;
  height:2px;
  border-radius:999px;
  background:#8ddaff;
  box-shadow:0 0 8px rgba(104,204,255,.48);
  transform:translate(-50%,-50%);
}
.premium-cryptic-home .cryptic-emblem-paths{z-index:0;top:38px;left:154px;width:54px;height:90px}
.premium-cryptic-home .cryptic-emblem-paths>i{
  position:absolute;
  left:0;
  display:block;
  width:57px;
  height:1px;
  opacity:.48;
  background:linear-gradient(90deg,rgba(100,202,255,.12),rgba(136,109,255,.72));
  box-shadow:0 0 5px rgba(115,144,255,.22);
  transform-origin:0 50%;
  animation:cryptic-path-resolve .62s ease-out calc(170ms + var(--cryptic-path-index) * 32ms) both;
}
.premium-cryptic-home .cryptic-emblem-paths>i:nth-child(1){top:2px;transform:rotate(20deg)}
.premium-cryptic-home .cryptic-emblem-paths>i:nth-child(2){top:21px;transform:rotate(11deg)}
.premium-cryptic-home .cryptic-emblem-paths>i:nth-child(3){top:42px;transform:rotate(0)}
.premium-cryptic-home .cryptic-emblem-paths>i:nth-child(4){top:63px;transform:rotate(-11deg)}
.premium-cryptic-home .cryptic-emblem-paths>i:nth-child(5){top:82px;transform:rotate(-20deg)}
.premium-cryptic-home .cryptic-emblem-film{
  position:absolute;
  z-index:3;
  top:15px;
  left:204px;
  display:grid;
  width:76px;
  height:130px;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(185,177,255,.42);
  border-radius:18px;
  background:radial-gradient(circle at 42% 32%,rgba(92,190,255,.12),transparent 31%),linear-gradient(150deg,#25213a,#090811 72%);
  box-shadow:inset 0 1px rgba(255,255,255,.135),-4px 0 19px rgba(84,187,255,.07),6px 0 22px rgba(158,78,242,.12),0 23px 42px rgba(0,0,0,.5);
  animation:cryptic-film-resolve .68s cubic-bezier(.18,.82,.2,1) 260ms both;
}
.premium-cryptic-home .cryptic-emblem-film::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(116deg,transparent 34%,rgba(255,255,255,.052) 49%,transparent 64%);
}
.premium-cryptic-home .cryptic-film-frame{
  position:relative;
  z-index:1;
  display:block;
  width:29px;
  height:40px;
  border:1px solid rgba(181,201,234,.58);
  border-radius:3px;
  color:rgba(178,199,231,.62);
  box-shadow:0 0 12px rgba(119,178,255,.11),inset 0 0 11px rgba(115,97,189,.08);
}
.premium-cryptic-home .cryptic-film-frame::before,
.premium-cryptic-home .cryptic-film-frame::after{
  content:"";
  position:absolute;
  top:3px;
  bottom:3px;
  width:3px;
  background:repeating-linear-gradient(to bottom,currentColor 0 4px,transparent 4px 7px);
}
.premium-cryptic-home .cryptic-film-frame::before{left:3px}
.premium-cryptic-home .cryptic-film-frame::after{right:3px}
@keyframes cryptic-clue-arrive{
  from{opacity:0;filter:blur(1px);transform:translateX(-12px) translateY(7px) perspective(480px) rotateY(-7deg) scale(.96)}
  to{opacity:1;filter:none;transform:perspective(480px) rotateY(-7deg)}
}
@keyframes cryptic-path-resolve{from{opacity:0;filter:blur(2px)}to{opacity:.48;filter:none}}
@keyframes cryptic-film-resolve{
  from{opacity:0;filter:blur(1.5px);transform:translateX(10px) scale(.955)}
  to{opacity:1;filter:none;transform:none}
}
.premium-cryptic-home>.cryptic-rules{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  flex:0 0 var(--cryptic-rules-height);
  width:100%;
  height:var(--cryptic-rules-height)!important;
  min-height:var(--cryptic-rules-height);
  margin:18px 0 16px!important;
  padding:0!important;
  gap:0!important;
  overflow:hidden;
  border:1px solid rgba(189,201,231,.13)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(19,19,29,.82),rgba(10,9,17,.9))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.055),0 16px 35px rgba(0,0,0,.2)!important;
}
.premium-cryptic-home .cryptic-rules>div{
  display:grid;
  min-width:0;
  padding:0 5px!important;
  place-content:center;
  gap:6px;
  border-right:1px solid rgba(255,255,255,.075);
  text-align:center;
}
.premium-cryptic-home .cryptic-rules>div:last-child{border-right:0}
.premium-cryptic-home .cryptic-rules strong{
  color:#f2efff!important;
  font-size:22px!important;
  font-weight:710;
  line-height:1;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
.premium-cryptic-home .cryptic-rules span{
  max-width:92px;
  margin:auto;
  color:#a8a3b1!important;
  font-size:10.5px!important;
  font-weight:570;
  line-height:1.24!important;
  text-align:center!important;
  white-space:normal;
}
.premium-cryptic-home>.primary-button{
  flex:0 0 54px;
  width:100%;
  height:54px!important;
  min-height:54px;
  border:1px solid rgba(220,231,255,.4)!important;
  border-radius:18px!important;
  color:#fff!important;
  background:linear-gradient(102deg,#5ebff7,#756fe9 50%,#9749de)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.24),0 15px 34px rgba(56,49,153,.27),0 0 28px rgba(125,75,224,.1)!important;
  font-size:15.5px!important;
  font-weight:700;
  text-shadow:0 1px 8px rgba(30,20,75,.3);
  transition:transform .17s ease,box-shadow .2s ease,filter .2s ease;
}
.premium-cryptic-home>.primary-button:active{transform:scale(.985);filter:brightness(.98)}
.premium-cryptic-home>.quiet-button{
  display:flex;
  flex:0 0 44px;
  width:100%;
  height:44px!important;
  min-height:44px;
  margin:4px 0 0;
  padding:0 12px!important;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#c9c5d1!important;
  font-size:13.5px!important;
  font-weight:560;
}
.premium-cryptic-home>.quiet-button::after{content:"›";color:#8fd7ff;font-size:17px;line-height:1}
.premium-cryptic-home .cryptic-arrival-footer{
  display:grid;
  width:min(100%,330px);
  margin:auto auto 0;
  padding-top:15px;
  gap:6px;
  text-align:center;
}
.premium-cryptic-home .cryptic-next-film{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#b0a6ca;
  font-size:11px;
  font-weight:570;
  line-height:1.35;
}
.premium-cryptic-home .cryptic-next-film>i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#77cfff;
  box-shadow:0 0 8px rgba(103,199,255,.66);
}
.premium-cryptic-home .cryptic-arrival-footer .cryptic-privacy{
  display:block;
  margin:0!important;
  max-width:none!important;
  color:#a09ba8!important;
  font-size:10.75px!important;
  line-height:1.4!important;
}
.premium-cryptic-home.cryptic-compact{
  --cryptic-side:18px;
  --cryptic-title-size:31.5px;
  --cryptic-emblem-scale:.78;
  --cryptic-emblem-height:125px;
  --cryptic-rules-height:68px;
  padding-top:max(12px,env(safe-area-inset-top))!important;
  padding-bottom:max(28px,env(safe-area-inset-bottom))!important;
}
.premium-cryptic-home.cryptic-compact>.cryptic-home-header{flex-basis:44px;min-height:44px}
.premium-cryptic-home.cryptic-compact>.cryptic-home-header>.circle-control{width:44px!important;height:44px!important;min-width:44px;min-height:44px}
.premium-cryptic-home.cryptic-compact .critical-brand-lockup .brand-mark{width:31px!important;height:31px!important}
.premium-cryptic-home.cryptic-compact .critical-brand-lockup .wordmark{width:84px!important}
.premium-cryptic-home.cryptic-compact .critical-brand-lockup .critical-brand-aura{width:164px!important;height:62px!important}
.premium-cryptic-home.cryptic-compact .cryptic-intro{margin-top:7px}
.premium-cryptic-home.cryptic-compact .cryptic-kicker{font-size:8.75px;letter-spacing:.13em}
.premium-cryptic-home.cryptic-compact .cryptic-intro>h1{margin-top:6px!important}
.premium-cryptic-home.cryptic-compact .cryptic-intro>h2{margin-top:8px;font-size:20.5px}
.premium-cryptic-home.cryptic-compact .cryptic-intro>p{margin-top:4px!important;font-size:11.75px!important}
.premium-cryptic-home.cryptic-compact .cryptic-five-to-one{margin-top:7px}
.premium-cryptic-home.cryptic-compact>.cryptic-rules{margin:8px 0!important}
.premium-cryptic-home.cryptic-compact .cryptic-rules>div{gap:4px}
.premium-cryptic-home.cryptic-compact .cryptic-rules strong{font-size:19px!important}
.premium-cryptic-home.cryptic-compact .cryptic-rules span{font-size:10px!important;line-height:1.16!important}
.premium-cryptic-home.cryptic-compact>.primary-button{flex-basis:50px;height:50px!important;min-height:50px;font-size:14px!important}
.premium-cryptic-home.cryptic-compact>.quiet-button{margin-top:1px;font-size:12.5px!important}
.premium-cryptic-home.cryptic-compact .cryptic-arrival-footer{padding-top:9px;gap:4px}
.premium-cryptic-home.cryptic-compact .cryptic-next-film{font-size:10.5px}
.premium-cryptic-home.cryptic-compact .cryptic-arrival-footer .cryptic-privacy{font-size:10.5px!important}
.premium-cryptic-home.cryptic-tall{
  --cryptic-side:26px;
  --cryptic-title-size:39px;
  --cryptic-emblem-scale:1.08;
  --cryptic-emblem-height:174px;
  --cryptic-rules-height:82px;
  padding-top:max(26px,env(safe-area-inset-top))!important;
  padding-bottom:max(30px,env(safe-area-inset-bottom))!important;
}
.premium-cryptic-home.cryptic-tall .cryptic-intro{margin-top:29px}
.premium-cryptic-home.cryptic-tall .cryptic-kicker{font-size:10.25px}
.premium-cryptic-home.cryptic-tall .cryptic-intro>h2{font-size:26px}
.premium-cryptic-home.cryptic-tall .cryptic-intro>p{font-size:13.5px!important}
.premium-cryptic-home.cryptic-tall .cryptic-five-to-one{margin-top:21px}
.premium-cryptic-home.cryptic-tall>.cryptic-rules{margin:20px 0 18px!important}
.premium-cryptic-home.cryptic-tall .cryptic-rules strong{font-size:23px!important}
.premium-cryptic-home.cryptic-tall .cryptic-arrival-footer{padding-top:20px}
.device.manual-large-text .premium-cryptic-home{height:100%!important;overflow-y:auto!important}
.device.manual-large-text .premium-cryptic-home .cryptic-kicker{font-size:11.5px!important}
.device.manual-large-text .premium-cryptic-home .cryptic-intro>p{font-size:14.5px!important}
.device.manual-large-text .premium-cryptic-home .cryptic-rules span{font-size:12px!important}
.device.manual-large-text .premium-cryptic-home .cryptic-next-film{font-size:11.5px!important}
.device.manual-large-text .premium-cryptic-home .cryptic-arrival-footer .cryptic-privacy{font-size:11.25px!important}
.device.manual-solid .premium-cryptic-home>.cryptic-rules{background:#11111a!important;backdrop-filter:none!important}
.recon-cryptic .cryptic-clue-rail{display:grid!important;gap:7px!important}.recon-cryptic .cryptic-clue-rail article{min-height:0!important;padding:10px 12px!important}.recon-cryptic .cryptic-clue-rail article p{margin:4px 0 0!important;font-size:8.5px!important;line-height:1.35!important}.recon-cryptic .cryptic-clue-rail article.is-locked{opacity:.42!important}.recon-cryptic .cryptic-scoreline{display:flex!important;justify-content:space-between!important;gap:12px!important;font-size:7px!important}.premium-cryptic-result .cryptic-score strong{font-size:30px!important;letter-spacing:-.04em!important}.cryptic-share-grid{margin-top:10px;padding:9px;border-radius:12px;background:rgba(114,174,255,.06);color:#b7e3ff;font-size:12px;letter-spacing:.14em;white-space:pre-line}

@keyframes critical-friday-edge{0%,100%{opacity:.28;transform:scale(1)}50%{opacity:.85;transform:scale(1.008)}}

@media(max-height:760px){
  .trip-phase-settled .critical-card-stage{top:180px!important;transform:scale(.86)!important;transform-origin:50% 0!important}.trip-phase-settled .critical-results{top:365px!important;gap:5px!important}.trip-phase-settled .critical-orb-stage{top:99px!important;transform:translateX(-50%) scale(.28)!important}.critical-result-toolbar button{height:39px!important}.critical-film-cta{height:43px!important}
}
@media(prefers-reduced-motion:reduce){
  .premium-discover>.friday-ribbon::after,.critical-final-reveal .critical-final-bloom{animation:none!important}.critical-card.is-opening,.critical-card.is-final.is-opening{transform:translateY(-8px) scale(1.12)!important}.critical-card.is-opening .critical-card-inner{transition-duration:.18s!important}
  .premium-cryptic-home .cryptic-five-to-one *{animation:none!important;transition:none!important;filter:none!important}
  .premium-cryptic-home>.primary-button,.premium-cryptic-home>.quiet-button{transition:none!important}
}
.device.manual-reduced-motion .premium-cryptic-home .cryptic-five-to-one *{animation:none!important;transition:none!important;filter:none!important}
@media(forced-colors:active){
  .premium-cryptic-home .cryptic-intro>h1{color:CanvasText!important;background:none!important;-webkit-text-fill-color:CanvasText;text-shadow:none;filter:none}
  .premium-cryptic-home .cryptic-next-film>i{background:CanvasText;box-shadow:none}
}
.device.manual-reduced-motion .premium-discover>.friday-ribbon::after,.device.manual-reduced-motion .critical-final-reveal .critical-final-bloom{animation:none!important}
.device.manual-large-text .critical-understood>p{font-size:9px!important}.device.manual-large-text .critical-result-toolbar button span{font-size:7.2px!important}.device.manual-solid .premium-composer,.device.manual-solid .discover-shortcuts,.device.manual-solid .critical-understood{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#15131f!important}

/* ===== prototype-src/product-manager-polish.css ===== */
/* TRIPTIC product-manager polish gate
   This layer intentionally comes last. It reconciles the mature product into
   one coherent system without reopening the approved signature direction. */

:root{
  --pm-blue:104,201,255;
  --pm-violet:139,92,246;
  --pm-pink:220,121,255;
  --pm-surface:rgba(20,19,29,.72);
  --pm-surface-strong:rgba(15,14,22,.9);
  --pm-line:rgba(225,228,255,.13);
  --pm-ease:var(--motion-curve);
  --pm-enter:var(--motion-curve);
}

html,body,.device{
  color-scheme:dark;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.device{
  isolation:isolate;
  background:#050507;
}

/* Non-Discover destinations use a still, deep atmosphere. The live electric
   field remains exclusive to Discover and the signature ceremony. */
.screen:not(.discover-v5):not(.trip-critical-layer):not(.critical-film-layer){
  background-color:#050507;
  background-image:
    radial-gradient(circle at 13% 7%,rgba(var(--pm-blue),.045),transparent 27%),
    radial-gradient(circle at 88% 82%,rgba(var(--pm-violet),.038),transparent 31%),
    linear-gradient(180deg,#07070b 0%,#050507 54%,#040406 100%);
}
.global-trio-atmosphere{
  opacity:.78!important;
  background:transparent!important;
}
.global-trio-atmosphere svg,
.global-trio-atmosphere path{display:none!important;animation:none!important}
.global-trio-atmosphere .atmosphere-pool{
  animation:none!important;
  opacity:.32!important;
  filter:blur(46px)!important;
}

/* Faster, more legible continuity. Content never remains blurred while the
   user is ready to act. */
.screen.fluid-arrival{
  animation:pm-screen-arrive var(--motion-normal) var(--pm-enter) both!important;
  will-change:opacity,transform;
}
.screen.fluid-departure{
  animation:pm-screen-depart var(--motion-fast) var(--pm-ease) both!important;
}
@keyframes pm-screen-arrive{
  from{opacity:.18;transform:translate3d(0,8px,0) scale(.996);filter:blur(1.5px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes pm-screen-depart{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translate3d(0,-3px,0) scale(.994)}
}

/* Canonical material hierarchy. */
.content-material,
.glass-panel,
.settings-group,
.profile-list,
.library-sections,
.discover-shortcuts,
.critical-understood{
  border-color:var(--pm-line)!important;
  background:linear-gradient(145deg,rgba(28,27,39,.76),rgba(10,10,16,.82))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.065),0 18px 48px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(26px) saturate(138%)!important;
  -webkit-backdrop-filter:blur(26px) saturate(138%)!important;
}
.primary-button{
  min-height:50px;
  border:1px solid rgba(224,217,255,.2)!important;
  border-radius:17px!important;
  background:linear-gradient(135deg,#6077e1 0%,#8956df 58%,#673fc3 100%)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 16px 38px rgba(65,48,157,.3),0 0 26px rgba(var(--pm-blue),.09)!important;
  transition:transform var(--motion-fast) var(--pm-ease) !important;
}
.primary-button:active,.primary-button.is-pressing{transform:translateY(1px) scale(.982)!important;filter:brightness(.96)}
.quiet-button,.glass-button{
  min-height:44px;
  border-radius:15px!important;
  border-color:rgba(255,255,255,.105)!important;
  color:#c6c0cf!important;
}

/* One optical geometry for navigation and universal controls. */
.circle-control,
.film-compact-header button,
.critical-header>.circle-control{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:50%!important;
  background:rgba(16,15,24,.66)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 12px 30px rgba(0,0,0,.26)!important;
  backdrop-filter:blur(22px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(135%)!important;
}
.circle-control>svg,.circle-control>i,.circle-control>span,
.film-compact-header button>svg,.film-compact-header button>i{
  transform-origin:50% 50%;
}
.back-chevron i{
  margin:0!important;
  transform:rotate(45deg) translate(.5px,-.5px)!important;
}
.close-control svg{width:16px!important;height:16px!important}

.persistent-glass-nav{
  left:14px!important;
  right:14px!important;
  bottom:max(12px,env(safe-area-inset-bottom))!important;
  height:68px!important;
  padding:6px!important;
  border:1px solid rgba(222,225,255,.14)!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(28,26,40,.78),rgba(13,12,20,.84))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 54px rgba(0,0,0,.5)!important;
  backdrop-filter:blur(30px) saturate(155%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(155%)!important;
}
.persistent-glass-nav button{min-width:0;min-height:56px!important;border-radius:19px!important}
.persistent-glass-nav .tab-lens{
  background:radial-gradient(circle at 50% 35%,rgba(var(--pm-blue),.25),rgba(var(--pm-violet),.18) 45%,rgba(17,15,28,.68) 78%)!important;
  border-color:rgba(151,211,255,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 22px rgba(var(--pm-blue),.15),0 0 34px rgba(var(--pm-violet),.12)!important;
}
.persistent-glass-nav button[aria-current="page"]{color:#f7f7fb!important}
.persistent-glass-nav button[aria-current="page"] span:first-child{filter:drop-shadow(0 0 8px rgba(var(--pm-blue),.72))!important}

/* Typography and spatial rhythm. */
.screen h1,.screen h2,.screen h3,.screen strong{font-kerning:normal;text-wrap:balance}
.destination-heading h1{letter-spacing:-.045em!important;line-height:.98!important}
.destination-heading p,.subpage-intro,.screen>p{line-height:1.48}
.eyebrow,.section-label,.settings-group>span,.library-sections+span{
  letter-spacing:.15em!important;
}
.screen:has(>.persistent-glass-nav),
.destination-screen{
  scroll-padding-bottom:var(--trip-nav-clearance)!important;
}
.destination-screen>*:last-child:not(.persistent-glass-nav){margin-bottom:var(--trip-nav-clearance)!important}

/* Blue denotes navigation and action. Pink is reserved for the strongest
   match and climactic reveal. Purple remains the neutral brand energy. */
.action-bookmark,.action-share,.critical-watched-icon,.critical-not-for-me-icon,
.decision-actions i,.critical-result-toolbar i,.discover-shortcuts svg{
  color:rgb(var(--pm-blue))!important;
  filter:drop-shadow(0 0 7px rgba(var(--pm-blue),.38))!important;
}
.confidence-badge.exceptional-match,
.critical-card.rank-1 .critical-card-front>em,
.film-title>span{
  border-color:rgba(var(--pm-pink),.34)!important;
  background:rgba(51,22,61,.74)!important;
  color:#f1b3ff!important;
  box-shadow:0 0 22px rgba(var(--pm-pink),.14)!important;
}
.confidence-badge.strong-match{color:#b9ddff!important;background:rgba(34,56,85,.58)!important;border-color:rgba(var(--pm-blue),.22)!important}
.confidence-badge.broader-match{color:#bbb5c4!important;background:rgba(48,45,57,.6)!important;border-color:rgba(255,255,255,.1)!important}

/* Interaction quality and mobile tap safety. */
button,[role="button"],a,input,textarea{-webkit-tap-highlight-color:transparent}
button:not(:disabled),[role="button"]{touch-action:manipulation}
button.is-pressing,[role="button"].is-pressing{
  transform:scale(.975);
  filter:brightness(.96);
}
:focus-visible{
  outline:2px solid rgba(var(--pm-blue),.85)!important;
  outline-offset:3px!important;
}

/* Pull elasticity belongs only to scrollable destination surfaces. */
.screen.pm-elastic{will-change:transform;transform:translate3d(0,var(--pm-pull,0),0);transition:transform var(--motion-normal) var(--motion-curve)}
.screen.pm-elastic.pm-pulling{transition:none}

/* Content remains readable before artwork resolves and never relies on the
   poster as its only identity. */
.film-title,.collection-hero>div:last-child,.prompt-copy{isolation:isolate}
.film-title{text-shadow:0 2px 22px rgba(0,0,0,.86)}
.sublist button>span:nth-child(2),.library-sections button>span:nth-child(2){min-width:0}
.sublist strong,.sublist small,.library-sections strong,.library-sections small{overflow-wrap:anywhere}

/* Film decisions are a single icon family with labels large enough to read at
   real phone size. The dock remains secondary to the trailer and match reason. */
.film-v5 .decision-actions.critical-film-dock{
  height:64px!important;
  min-height:64px!important;
  padding:5px 6px!important;
  gap:4px!important;
}
.film-v5 .critical-film-dock button{height:52px!important;gap:4px!important}
.film-v5 .critical-film-dock button i{width:17px!important;height:17px!important}
.film-v5 .critical-film-dock button span{font-size:7.5px!important;letter-spacing:-.01em!important}
.film-v5 .film-content{padding-left:20px!important;padding-right:20px!important;padding-bottom:42px!important}
.film-v5 .match-reasoning li,.film-v5 .why-panel li{line-height:1.45!important}

/* Poster-led destinations respond to scroll with a barely perceptible optical
   shift rather than a decorative wobble. */
.film-screen .film-hero{background-position:center calc(22% + var(--pm-poster-shift,0px))!important}
.collection-screen .collection-hero{background-position:center calc(50% + var(--pm-poster-shift,0px))!important}
.film-screen .film-hero,.collection-screen .collection-hero{transition:none}

html:not([data-review-mode="true"]) .pm-review-only{display:none!important}

@media(max-height:760px){
  .persistent-glass-nav{height:64px!important;border-radius:22px!important}
  .persistent-glass-nav button{min-height:52px!important}
}

@media(prefers-reduced-motion:reduce){
  .screen.fluid-arrival{animation:pm-reduced-arrive var(--motion-fast) var(--motion-curve) both!important}
  .screen.fluid-departure{display:none!important}
  .screen.pm-elastic{transform:none!important;transition:none!important}
  .persistent-glass-nav .tab-lens{animation:none!important}
  @keyframes pm-reduced-arrive{from{opacity:0}to{opacity:1}}
}
.device.manual-reduced-motion .screen.fluid-arrival{animation:pm-reduced-arrive var(--motion-fast) var(--motion-curve) both!important}
.device.manual-reduced-motion .screen.fluid-departure{display:none!important}
.device.manual-reduced-motion .screen.pm-elastic{transform:none!important;transition:none!important}
.device.manual-solid .content-material,.device.manual-solid .glass-panel,.device.manual-solid .persistent-glass-nav{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#17151f!important
}
.device.manual-large-text .destination-heading p,
.device.manual-large-text .subpage-intro,
.device.manual-large-text .screen>p{font-size:max(11px,1em)!important;line-height:1.5!important}

/* ===== prototype-src/premium-20.css ===== */
/* TRIPTIC Premium 20
   One restrained continuity, sensory and personalisation layer. Every effect
   has a static equivalent and every ambient treatment stays subordinate to
   the film and the decision. */

:root {
  --p20-cyan: #8fdcff;
  --p20-blue: #6f91ff;
  --p20-violet: #8c62ff;
  --p20-pink: #f081ff;
  --p20-spring: var(--motion-spring);
  --p20-settle: var(--motion-curve);
  --p20-press: var(--motion-curve);
}

/* Only the two card faces cull their back side (motion-surfaces.css owns that).
   The old universal rule put backface-visibility:hidden on every element inside
   the preserve-3d device, which on iPhone multiplied composited surfaces. */

.p20-live-region { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }

/* Genuine-progress orb choreography. The scene owns the copy; these states
   alter energy and scale only, so no simulated percentages are introduced. */
.trip-critical-layer[data-p20-milestone="understanding"] .critical-orb-stage { --p20-energy:.62; }
.trip-critical-layer[data-p20-milestone="exploring"] .critical-orb-stage { --p20-energy:.82; }
.trip-critical-layer[data-p20-milestone="checking"] .critical-orb-stage { --p20-energy:1; }
.trip-critical-layer[data-p20-milestone="ready"] .critical-orb-stage { --p20-energy:1.12; }
.trip-critical-layer .critical-orb-stage { filter:saturate(calc(.82 + var(--p20-energy,.5) * .5)); transition:transform var(--motion-slow) var(--p20-settle); }
.trip-critical-layer[data-p20-milestone="checking"] .critical-orb,
.trip-critical-layer[data-p20-milestone="ready"] .critical-orb { transform:scale(calc(.92 + var(--p20-energy,.5) * .1)); }
.trip-critical-layer[data-p20-milestone="ready"] .critical-orb-stage::after { content:"";position:absolute;inset:13% 9%;border-radius:50%;background:radial-gradient(circle,rgba(239,128,255,.22),transparent 64%);filter:blur(12px);animation:p20ReadyBreath 1.9s var(--motion-breathe) infinite;pointer-events:none; }
@keyframes p20ReadyBreath { 50% { transform:scale(1.14);opacity:.68 } }

/* Final reveal is visually unique without becoming a casino celebration. */
/* The final glow is one soft radial element owned by signature-reveal.css (no filter, never clipped). */
.trip-critical-layer.critical-final-reveal .critical-final-bloom { filter:hue-rotate(5deg) saturate(1.18); }
.trip-critical-layer[data-revealed="3"] .critical-card.rank-1 { z-index:4; }
/* box-shadow instead of drop-shadow filters: no filter surface on a card that moves in the settle. */
.trip-critical-layer[data-revealed="3"] .critical-card.rank-1 .critical-card-inner { border-radius:18px;box-shadow:0 18px 35px rgba(0,0,0,.42),0 0 18px rgba(240,129,255,.2); }
.trip-critical-layer[data-revealed="3"] .critical-card.rank-1 .critical-card-front small { color:#fff;background:linear-gradient(115deg,rgba(113,107,255,.82),rgba(226,94,234,.82));border-color:rgba(255,255,255,.26);box-shadow:0 0 20px rgba(229,104,255,.22); }

/* Once all three are visible, the orb remains present as a quiet signature
   above the deck. It must never mask the artwork users have just uncovered. */
.trip-phase-settled .critical-orb-stage { top:42px!important;transform:translateX(-50%) scale(.23)!important; }

/* Shared poster flight: cinematic focus and no black flash. */
.critical-poster-flight { transform-origin:center;will-change:left,top,width,height,border-radius,filter,transform;box-shadow:0 28px 78px rgba(0,0,0,.7),0 0 42px var(--p20-film-glow,rgba(125,94,255,.25)); }
.critical-film-layer { --p20-film-glow:rgba(116,96,255,.24);background:radial-gradient(circle at 50% 17%,var(--p20-film-glow),transparent 42%),#040406; }
.critical-film-layer .film-hero { transform-origin:center top; }
.critical-film-layer.is-entering .film-hero { animation:p20HeroResolve var(--motion-slow) var(--p20-settle) both; }
@keyframes p20HeroResolve { from{transform:scale(1.025);filter:blur(7px) saturate(.8)} to{transform:none;filter:none} }

/* Art direction and cinematic colour inheritance. */
.film-hero,.critical-card-front,.collection-hero,.share-art { background-position:var(--p20-focal-x,50%) var(--p20-focal-y,35%)!important; }
.film-screen[data-p20-palette="ice"] { --p20-film-glow:rgba(77,153,209,.25); }
.film-screen[data-p20-palette="ember"] { --p20-film-glow:rgba(196,93,52,.22); }
.film-screen[data-p20-palette="violet"] { --p20-film-glow:rgba(132,86,228,.27); }
.film-screen[data-p20-palette="forest"] { --p20-film-glow:rgba(55,125,109,.22); }
.film-screen .film-content::before { content:"";position:absolute;inset:-70px 0 auto;height:150px;background:linear-gradient(180deg,transparent,var(--p20-film-glow),transparent);filter:blur(24px);opacity:.72;pointer-events:none; }

/* Trailer is a state change of the artwork rather than a new rectangle. */
.film-screen .media-trailer,.film-screen .trailer-preview { transform-origin:center top;transition:transform var(--motion-slow) var(--p20-settle); }
.film-screen.p20-trailer-active .film-hero { transform:scale(.985);filter:saturate(.76) brightness(.62);transition:transform var(--motion-slow) var(--p20-settle); }
.film-screen.p20-trailer-active .media-trailer,.film-screen.p20-trailer-active .trailer-preview { transform:translateY(-4px) scale(1.012);box-shadow:0 28px 62px rgba(0,0,0,.52),0 0 34px var(--p20-film-glow); }

/* Lenticular response: deliberately tiny and only on tangible media. */
.p20-lenticular { --p20-tilt-x:0deg;--p20-tilt-y:0deg;--p20-shine-x:50%;--p20-shine-y:35%;transform:perspective(900px) rotateX(var(--p20-tilt-x)) rotateY(var(--p20-tilt-y)) translateZ(0);transform-style:preserve-3d;transition:transform var(--motion-normal) var(--p20-settle);will-change:transform; }
.p20-lenticular::after { content:"";position:absolute;inset:0;z-index:6;border-radius:inherit;background:radial-gradient(circle at var(--p20-shine-x) var(--p20-shine-y),rgba(255,255,255,.16),transparent 34%);mix-blend-mode:screen;opacity:var(--p20-shine,.05);pointer-events:none;transition:opacity var(--motion-fast) var(--motion-curve); }
.p20-lenticular.p20-tilting { --p20-shine:.46;transition:none; }

/* Constraint relaxation chips communicate a specific, reversible refinement. */
.p20-constraints { display:flex;gap:7px;overflow-x:auto;padding:1px 1px 7px;scrollbar-width:none; }
.p20-constraints { scroll-snap-type:x proximity;mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent); }
.p20-constraints button { flex:none;min-height:30px;padding:0 11px;border:1px solid rgba(154,185,255,.18);border-radius:999px;color:#cfd8ff;background:linear-gradient(180deg,rgba(114,126,190,.13),rgba(53,43,92,.1));font:600 9px/1 var(--font-ui,system-ui);letter-spacing:.01em;box-shadow:inset 0 1px rgba(255,255,255,.05); }
.p20-constraints button { scroll-snap-align:start; }
.p20-constraints button::after { content:"  ×";color:var(--p20-pink); }
.p20-constraint-note { margin:0 0 8px;color:rgba(215,215,228,.6);font-size:9px;line-height:1.35; }

/* Film DNA as a living, honest map. */
.p20-dna-constellation { position:relative;height:250px;margin:13px 0 17px;border:1px solid rgba(155,179,255,.14);border-radius:25px;background:radial-gradient(circle at 50% 46%,rgba(111,115,255,.2),transparent 36%),linear-gradient(155deg,rgba(12,17,35,.92),rgba(7,5,16,.96));overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.05); }
.p20-dna-constellation::before { content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(184,207,255,.26) 0 1px,transparent 1.5px);background-size:31px 29px;mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);opacity:.28; }
.p20-dna-line { position:absolute;height:1px;left:var(--x);top:var(--y);width:var(--w);transform:rotate(var(--a));transform-origin:left;background:linear-gradient(90deg,rgba(106,174,255,.12),rgba(207,119,255,.46),rgba(106,174,255,.12));box-shadow:0 0 7px rgba(157,101,255,.23); }
.p20-dna-node { position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;margin:-6px;border:1px solid rgba(225,234,255,.72);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 7%,var(--p20-cyan) 18%,var(--p20-violet) 52%,#21133e 76%);box-shadow:0 0 0 5px rgba(120,115,255,.07),0 0 18px rgba(134,137,255,.48); }
.p20-dna-node strong { position:absolute;top:15px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#d9dbec;font-size:8px;font-weight:600; }
.p20-dna-node:nth-of-type(2n) { animation:p20NodeBreath 3.8s var(--motion-breathe) infinite alternate; }
@keyframes p20NodeBreath { to{box-shadow:0 0 0 7px rgba(120,115,255,.09),0 0 24px rgba(210,116,255,.5);transform:scale(1.08)} }
.p20-dna-caption { position:absolute;left:15px;right:15px;bottom:12px;text-align:center;color:rgba(226,228,240,.57);font-size:8px;line-height:1.35; }

/* Share artefacts are intentionally recognisable, never promotional. */
.p20-share-formats { display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0 13px; }
.p20-share-formats button { min-height:43px;border:1px solid rgba(153,178,255,.15);border-radius:14px;color:rgba(232,233,242,.67);background:rgba(255,255,255,.035);font-size:9px; }
.p20-share-formats button.active { color:#fff;border-color:rgba(143,220,255,.45);background:linear-gradient(140deg,rgba(80,147,228,.22),rgba(154,75,224,.2));box-shadow:0 0 20px rgba(101,126,255,.12); }
.share-screen[data-p20-share-format="story"] .share-preview,.share-screen[data-p20-share-format="story"] .share-trio-preview { transform:scale(.92);border-radius:28px; }
.share-screen[data-p20-share-format="sealed"] .share-preview { filter:saturate(.6) brightness(.72); }

/* Staged long-press preview. */
.p20-peek-scrim { position:absolute;inset:0;z-index:100;background:rgba(2,2,7,.72);backdrop-filter:blur(18px);opacity:0;transition:opacity var(--motion-fast) var(--motion-curve); }
.p20-peek-scrim.open { opacity:1; }
.p20-peek-card { position:absolute;left:50%;top:50%;width:300px;max-height:610px;transform:translate(-50%,-45%) scale(.91);padding:15px;border:1px solid rgba(186,207,255,.2);border-radius:28px;background:linear-gradient(155deg,rgba(28,31,49,.96),rgba(8,7,16,.98));box-shadow:0 40px 100px rgba(0,0,0,.75),0 0 48px rgba(124,86,255,.2);transition:transform var(--motion-normal) var(--p20-settle); }
.p20-peek-scrim.open .p20-peek-card { transform:translate(-50%,-50%) scale(1); }
.p20-peek-art { height:310px;border-radius:19px;background:var(--p20-peek-art) center 30%/cover no-repeat; }
.p20-peek-card span { display:block;margin-top:13px;color:var(--p20-cyan);font-size:8px;font-weight:700;letter-spacing:.14em; }
.p20-peek-card h2 { margin:5px 0;font-size:24px;letter-spacing:-.04em; }
.p20-peek-card p { color:#b7b6c5;font-size:11px;line-height:1.48; }
.p20-peek-card small { color:#d8c8ff;font-size:9px; }

/* Provider hand-off preserves intent and offers a clear choice. */
.p20-handoff { position:absolute;inset:0;z-index:120;display:grid;place-items:end center;padding:18px;background:rgba(1,1,5,.58);backdrop-filter:blur(15px); }
.p20-handoff-card { width:100%;padding:18px;border:1px solid rgba(173,190,255,.19);border-radius:25px;background:linear-gradient(155deg,rgba(25,29,46,.97),rgba(8,7,16,.99));box-shadow:0 25px 70px rgba(0,0,0,.65); }
.p20-handoff-service { display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,#fff,#d5e0ff);color:#0b0b10;font-size:13px;font-weight:800; }
.p20-handoff-card h2 { margin:13px 0 5px;font-size:22px; }
.p20-handoff-card p { margin:0 0 15px;color:#aaa9b7;font-size:11px;line-height:1.45; }
.p20-handoff-actions { display:grid;gap:8px; }

/* Contextual return and quiet insights. */
.p20-return-line { margin:-3px auto 12px;max-width:310px;color:rgba(202,208,229,.64);font-size:9px;line-height:1.35;text-align:center;animation:p20Return var(--motion-slow) var(--p20-settle) both; }
@keyframes p20Return { from{opacity:0;transform:translateY(5px)} }
.p20-taste-insight { margin:12px 0;padding:15px 16px;text-align:left;border:1px solid rgba(129,166,255,.14);border-radius:19px;background:linear-gradient(140deg,rgba(62,99,160,.12),rgba(110,61,154,.09)); }
.p20-taste-insight span { color:var(--p20-cyan);font-size:8px;font-weight:700;letter-spacing:.14em; }
.p20-taste-insight strong { display:block;margin:5px 0;color:#f3f2f8;font-size:15px; }
.p20-taste-insight p { margin:0;color:#aaa9b8;font-size:10px;line-height:1.4; }

/* Friday system surface — a faithful web prototype for the native ActivityKit
   implementation, spoiler safe by construction. */
.p20-live-activity { margin:12px auto 14px;padding:14px;width:100%;border:1px solid rgba(160,183,255,.16);border-radius:24px;background:linear-gradient(145deg,rgba(23,26,42,.95),rgba(8,7,14,.98));box-shadow:0 21px 45px rgba(0,0,0,.4);text-align:left; }
.p20-live-activity header { display:flex!important;align-items:center!important;justify-content:space-between!important; }
.p20-live-activity header span { color:#f5f4fb!important;font-size:10px!important;letter-spacing:.06em!important; }
.p20-live-activity header small { color:#9695a5;font-size:8px; }
.p20-sealed-markers { display:flex;gap:8px;margin:13px 0 8px; }
.p20-sealed-markers i { width:31px;height:43px;border:1px solid rgba(196,186,255,.22);border-radius:9px;background:radial-gradient(circle at 50% 45%,rgba(185,97,255,.22),transparent 53%),rgba(255,255,255,.035);box-shadow:inset 0 1px rgba(255,255,255,.06); }
.p20-live-activity p { margin:0!important;color:#aaa9b7!important;font-size:9px!important;line-height:1.4!important;text-align:left!important; }

/* Interruption recovery is deliberately quiet. */
.p20-resume-chip { position:absolute;left:50%;top:75px;z-index:85;transform:translateX(-50%);padding:8px 12px;border:1px solid rgba(171,196,255,.17);border-radius:999px;color:#d9dcf4;background:rgba(14,15,28,.87);backdrop-filter:blur(16px);font-size:8px;box-shadow:0 12px 35px rgba(0,0,0,.38);animation:p20Resume 3.2s var(--p20-settle) both;white-space:nowrap; }
@keyframes p20Resume { 0%{opacity:0;transform:translate(-50%,-7px)} 15%,75%{opacity:1;transform:translate(-50%,0)} 100%{opacity:0} }

/* Sensory preferences. */
.p20-sensory-preview { margin:14px 0;padding:15px;border:1px solid rgba(154,180,255,.15);border-radius:21px;background:linear-gradient(145deg,rgba(44,55,92,.12),rgba(93,50,123,.1)); }
.p20-sensory-preview span { color:#9edcff;font-size:8px;font-weight:700;letter-spacing:.14em; }
.p20-sensory-preview p { margin:6px 0 12px;color:#aaa9b7;font-size:10px;line-height:1.42; }
.p20-sensory-preview button { min-height:42px;width:100%;border:1px solid rgba(177,198,255,.18);border-radius:13px;color:#f2f2f8;background:rgba(255,255,255,.05);font-size:10px; }

/* Press and scroll continuity. */
.screen button:not(:disabled) { -webkit-tap-highlight-color:transparent; }
.screen button.p20-pressing { transform:scale(.975)!important;filter:brightness(1.08);transition:transform var(--motion-press) var(--p20-press) !important; }

@media (prefers-reduced-motion: reduce) {
  .p20-lenticular,.p20-lenticular.p20-tilting { transform:none!important;transition:none!important; }
  .trip-critical-layer[data-p20-milestone="ready"] .critical-orb-stage::after,
  .p20-dna-node,.p20-return-line,.p20-resume-chip { animation:none!important; }
  .critical-film-layer.is-entering .film-hero { animation:none!important; }
  .p20-resume-chip { opacity:1; }
}

@media (prefers-reduced-transparency: reduce) {
  .p20-peek-scrim,.p20-handoff { backdrop-filter:none;background:#050509; }
  .p20-handoff-card,.p20-peek-card,.p20-live-activity { background:#10111a; }
}

.device.manual-reduced-motion .p20-lenticular,
.device.manual-reduced-motion .p20-lenticular.p20-tilting { transform:none!important;transition:none!important; }
.device.manual-reduced-motion .trip-critical-layer[data-p20-milestone="ready"] .critical-orb-stage::after,
.device.manual-reduced-motion .p20-dna-node,
.device.manual-reduced-motion .p20-return-line,
.device.manual-reduced-motion .p20-resume-chip { animation:none!important; }
.device.manual-reduced-motion .critical-film-layer.is-entering .film-hero { animation:none!important; }
.device.manual-reduced-transparency .p20-peek-scrim,
.device.manual-reduced-transparency .p20-handoff { backdrop-filter:none;background:#050509; }
.device.manual-reduced-transparency .p20-handoff-card,
.device.manual-reduced-transparency .p20-peek-card,
.device.manual-reduced-transparency .p20-live-activity { background:#10111a; }

html[data-page-hidden="true"] .critical-orb-stage::after,
html[data-page-hidden="true"] .p20-dna-node { animation-play-state:paused!important; }

/* ===== prototype-src/orb-100.css ===== */
/* TRIPTIC Orb 100 — final signature-object material and geometry. */
:root{
  --orb100-blue:105,205,255;
  --orb100-violet:126,104,255;
  --orb100-pink:238,82,255;
}

.recon-orb.orb100-ready{isolation:isolate;overflow:visible!important;background:none!important;border:0!important;box-shadow:none!important;filter:none;transform-style:preserve-3d}
.recon-orb.orb100-ready>.trip95-orb-canvas,
.recon-orb.orb100-ready>.orb-aura,
.recon-orb.orb100-ready>.orb-sphere,
.recon-orb.orb100-ready>.orb-arc,
.recon-orb.orb100-ready>.orb-sparks{display:none!important;opacity:0!important;animation:none!important}
.orb100-canvas{position:absolute;z-index:3;inset:-30%;width:160%;height:160%;display:block;overflow:visible;pointer-events:none;transform:translateZ(1px);filter:none!important}
.recon-orb.orb100-ready::before,.recon-orb.orb100-ready::after{content:none!important;display:none!important}

/* The composer contains an object, never a circular button behind an object. */
.premium-composer .query-submit,.discover-composer .query-submit{overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important}
.premium-composer .query-submit .recon-orb.orb100-ready,.discover-composer .query-submit .recon-orb.orb100-ready{width:42px!important;height:42px!important;min-width:42px!important;filter:none!important}
.premium-composer .query-submit .orb100-canvas,.discover-composer .query-submit .orb100-canvas{inset:-24%;width:148%;height:148%}
.premium-composer .query-submit:focus-visible .recon-orb.orb100-ready,.discover-composer .query-submit:focus-visible .recon-orb.orb100-ready{outline:2px solid rgba(var(--orb100-blue),.82);outline-offset:7px;border-radius:50%}
.premium-composer .query-submit:active .recon-orb.orb100-ready,.discover-composer .query-submit:active .recon-orb.orb100-ready{transform:scale(.92) translateZ(0);transition:transform var(--motion-fast) var(--motion-curve)}

/* Remove the previous lens rings. Volume and internal light now create depth. */
.critical-orb::before,.critical-orb::after{content:none!important;display:none!important}
.critical-orb .recon-orb.orb100-ready{width:100%!important;height:100%!important;filter:none!important;animation:none!important;transition:width var(--motion-slow) var(--motion-curve),height var(--motion-slow) var(--motion-curve),transform var(--motion-slow) var(--motion-curve)}
.critical-orb .recon-orb.orb100-ready .orb100-canvas{inset:-23%;width:146%;height:146%}
.critical-orb-floor{opacity:.28!important;background:radial-gradient(ellipse,rgba(var(--orb100-violet),.25),rgba(3,3,10,0) 69%)!important;filter:blur(8px)!important}
.critical-orb-wave{border-color:rgba(var(--orb100-blue),.12)!important;box-shadow:none!important;opacity:.32!important}
.trip-phase-charging .critical-orb-wave{border-color:rgba(var(--orb100-pink),.18)!important}

/* Phase timing is physical: wake, expand, compress, become still, discharge. */
.trip-phase-gathering .critical-orb{animation:orb100-hover 3.8s var(--motion-breathe) infinite!important}
.trip-phase-charging .critical-orb{animation:orb100-charge .86s var(--motion-breathe) infinite alternate!important}
.trip-phase-compressed .critical-orb{animation:orb100-compress var(--motion-slow) var(--motion-curve) both!important}
.trip-phase-ready .critical-orb{animation:orb100-suspend 4.8s var(--motion-breathe) infinite!important}
.trip-phase-ready.orb100-just-ready .critical-orb{animation:orb100-discharge var(--motion-ceremony) var(--motion-curve) both!important}
.trip-phase-settled .critical-orb{animation:orb100-settled 5.8s var(--motion-breathe) infinite!important}
@keyframes orb100-hover{0%,100%{transform:translateY(0) rotateX(0deg)}50%{transform:translateY(-3px) rotateX(1.4deg)}}
@keyframes orb100-charge{from{transform:scale(.985);filter:brightness(.98)}to{transform:scale(1.025);filter:brightness(1.05)}}
@keyframes orb100-compress{0%{transform:scale(1.12)}72%{transform:scale(.93)}100%{transform:scale(1)}}
@keyframes orb100-suspend{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes orb100-discharge{0%{transform:scale(.92);filter:brightness(1.45)}15%{transform:scale(.92);filter:brightness(1.04)}38%{transform:scale(1.075);filter:brightness(1.30)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes orb100-settled{0%,100%{transform:translateY(0);opacity:.94}50%{transform:translateY(-1px);opacity:1}}

/* A dedicated full-scene transfer renderer replaces the three straight beams. */
.critical-energy-paths{display:none!important}
.orb100-transfer{position:absolute;z-index:4;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity var(--motion-fast) var(--motion-curve)}
.trip-phase-ready .orb100-transfer,.trip-phase-revealing .orb100-transfer{opacity:1}
.trip-phase-settled .orb100-transfer{opacity:0}

/* State-specific material response in compact contexts. */
.recon-orb.orb100-ready[data-orb100-state="dormant"]{opacity:.86}
.recon-orb.orb100-ready[data-orb100-state="listening"],.recon-orb.orb100-ready[data-orb100-state="typing"]{opacity:1}
.recon-orb.orb100-ready[data-orb100-state="ready"]{filter:drop-shadow(0 0 9px rgba(var(--orb100-blue),.14))!important}

@media(prefers-reduced-motion:reduce){
  .critical-orb,.recon-orb.orb100-ready{animation:none!important;transition-duration:var(--motion-fast)!important}
  .orb100-transfer{display:none!important}
}
.device.manual-reduced-motion .critical-orb,.device.manual-reduced-motion .recon-orb.orb100-ready{animation:none!important;transition-duration:var(--motion-fast)!important}
.device.manual-reduced-motion .orb100-transfer{display:none!important}
.device.manual-reduce-transparency .recon-orb.orb100-ready{background:radial-gradient(circle at 35% 28%,#263c79,#171132 52%,#05050c 78%)!important;border-radius:50%}

@media(max-height:760px){
  .critical-orb-stage{top:144px!important}
  .trip-phase-ready .critical-orb-stage,.trip-phase-revealing .critical-orb-stage{top:104px!important}
}

/* ===== prototype-src/card-100.css ===== */
/* TRIPTIC Card 100 — prismatic sealed artefacts and collector-card reveals. */
:root{
  --card100-blue:111,209,255;
  --card100-violet:126,103,255;
  --card100-pink:239,91,255;
  --card100-ease:var(--motion-curve);
  --card100-spring:var(--motion-spring);
}

.card100-scene .critical-card-stage{perspective:1550px!important;transform-style:preserve-3d}
.card100-scene .critical-card.card100-ready{border-radius:22px!important;transform-style:preserve-3d;will-change:transform,filter;outline:none}
.card100-scene .critical-card.card100-ready:focus-visible{outline:2px solid rgba(var(--card100-blue),.84)!important;outline-offset:7px!important}
.card100-scene .critical-card-inner{transform-origin:50% 54%;transform-style:preserve-3d;transition:transform var(--motion-ceremony) var(--card100-spring)!important}

/* SEALED MATERIAL ------------------------------------------------------- */
.card100-scene .critical-card-back{
  border:1px solid rgba(174,216,255,.18)!important;
  background:
    radial-gradient(ellipse at 36% 17%,rgba(129,211,255,.10),transparent 31%),
    radial-gradient(ellipse at 63% 70%,rgba(227,91,255,.09),transparent 43%),
    linear-gradient(148deg,rgba(31,31,47,.97),rgba(12,11,22,.985) 47%,rgba(5,5,12,.995))!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.17),
    inset 1px 0 rgba(146,213,255,.06),
    inset -1px 0 rgba(238,118,255,.05),
    inset 0 -38px 72px rgba(0,0,0,.48),
    0 22px 46px rgba(0,0,0,.48)!important;
}
.card100-scene .critical-card-back::before{
  inset:1px!important;border-radius:20px!important;opacity:.82!important;
  background:
    linear-gradient(112deg,transparent 0 18%,rgba(196,235,255,.045) 18.5%,transparent 19.2% 51%,rgba(241,142,255,.035) 51.5%,transparent 52.2%),
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(255,255,255,.014) 28px,transparent 29px)!important;
}
.card100-scene .critical-card-back::after{content:none!important;display:none!important}
.card100-depth{position:absolute;z-index:0;inset:7px;border-radius:15px;background:radial-gradient(ellipse at 50% 46%,rgba(75,86,205,.08),transparent 53%);box-shadow:inset 0 0 0 1px rgba(138,198,255,.055),inset 0 0 35px rgba(67,48,145,.075);pointer-events:none}
.card100-edge{position:absolute;z-index:5;inset:1px;border-radius:20px;border:1px solid transparent;background:linear-gradient(145deg,rgba(189,237,255,.20),rgba(102,113,255,.025) 34%,rgba(237,104,255,.12) 69%,rgba(255,255,255,.025)) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.card100-prism{position:absolute;z-index:3;inset:-22% -70%;background:linear-gradient(104deg,transparent 36%,rgba(156,222,255,.015) 42%,rgba(255,255,255,.10) 49%,rgba(241,125,255,.035) 54%,transparent 61%);transform:translateX(-38%) rotate(5deg);opacity:.28;pointer-events:none}

/* Three descending shutters imply discovery without repeating a generic ?. */
.card100-secret{position:absolute;z-index:4;left:50%;top:50%;width:62px;height:76px;transform:translate(-50%,-50%) translateZ(2px);display:flex;align-items:center;justify-content:center;gap:4px;filter:drop-shadow(0 0 12px rgba(var(--card100-blue),.12));pointer-events:none}
.card100-secret i{position:relative;width:13px;border-radius:8px 8px 6px 6px;background:linear-gradient(180deg,rgba(189,233,255,.17),rgba(85,91,196,.10) 38%,rgba(26,20,57,.28));border:1px solid rgba(163,216,255,.22);box-shadow:inset 0 1px rgba(255,255,255,.15),inset 0 -7px 14px rgba(3,3,12,.34),0 0 10px rgba(var(--card100-violet),.08);transform:translateZ(3px);transition:height var(--motion-slow) var(--card100-spring),background var(--motion-normal) var(--motion-curve),border-color var(--motion-normal) var(--motion-curve)}
.card100-secret i:nth-child(1){height:54px}.card100-secret i:nth-child(2){height:44px}.card100-secret i:nth-child(3){height:34px}
.card100-secret i::before{content:"";position:absolute;left:2px;right:2px;top:3px;height:1px;border-radius:50%;background:rgba(224,248,255,.38);box-shadow:0 0 7px rgba(var(--card100-blue),.32)}
.card100-scene .critical-question{display:none!important}
.card100-scene .critical-card-back>b,.card100-scene .critical-card-back>small{z-index:7!important}

/* RESTING PHYSICS ------------------------------------------------------- */
.card100-scene.trip-phase-ready .critical-card.card100-ready:not(.is-active){filter:drop-shadow(0 19px 30px rgba(0,0,0,.46)) saturate(.90)!important}
.card100-scene.trip-phase-ready .critical-card.card100-ready{animation:none}
.card100-scene.trip-phase-ready .critical-card.card100-ready.is-active{animation:card100FloatA 4.8s var(--motion-breathe) infinite}
.card100-scene .critical-card.is-active{transform:translateY(-16px) translateZ(44px) scale(1.085)!important;filter:drop-shadow(0 25px 34px rgba(0,0,0,.58)) drop-shadow(0 0 27px rgba(var(--card100-blue),.26))!important}
.card100-scene .critical-card.is-active .critical-card-back{border-color:rgba(173,224,255,.38)!important;box-shadow:inset 0 1px rgba(255,255,255,.23),inset 0 0 35px rgba(78,116,235,.11),inset 0 -38px 72px rgba(0,0,0,.43),0 24px 54px rgba(0,0,0,.52),0 0 25px rgba(var(--card100-blue),.09)!important}
.card100-scene .critical-card.is-active .card100-secret i{background:linear-gradient(180deg,rgba(205,243,255,.32),rgba(99,128,255,.18) 42%,rgba(111,39,151,.22));border-color:rgba(171,230,255,.50);box-shadow:inset 0 1px rgba(255,255,255,.27),0 0 12px rgba(var(--card100-blue),.24),0 0 20px rgba(var(--card100-pink),.08)}
.card100-scene .critical-card.is-active .card100-prism{opacity:.72;animation:card100Prism 2.8s var(--motion-breathe) infinite}
.card100-scene .critical-card.is-final{transform:translateY(-19px) translateZ(56px) scale(1.12)!important;filter:drop-shadow(0 28px 38px rgba(0,0,0,.61)) drop-shadow(0 0 36px rgba(var(--card100-pink),.35))!important}
.card100-scene .critical-card.is-final .critical-card-back{border-color:rgba(246,147,255,.43)!important}
.card100-scene .critical-card.is-final .card100-secret i{border-color:rgba(242,145,255,.55);box-shadow:inset 0 1px rgba(255,255,255,.25),0 0 14px rgba(var(--card100-pink),.28),0 0 25px rgba(var(--card100-blue),.10)}

/* CHARGE, TURN AND REVEAL ---------------------------------------------- */
.card100-scene .critical-card-energy{inset:-12px!important;transition:opacity var(--motion-fast) var(--motion-curve)!important}
.card100-scene .critical-card-energy::before{border-color:rgba(var(--card100-blue),.54)!important;box-shadow:0 0 20px rgba(var(--card100-blue),.26),0 0 40px rgba(var(--card100-violet),.12),inset 0 0 16px rgba(var(--card100-pink),.09)!important;animation:card100Charge 1.16s var(--motion-breathe) infinite alternate!important}
.card100-scene .card100-energy-locked .critical-card-energy::before{border-color:rgba(235,247,255,.82)!important;box-shadow:0 0 28px rgba(var(--card100-blue),.52),0 0 54px rgba(var(--card100-pink),.20),inset 0 0 24px rgba(var(--card100-blue),.18)!important}
.card100-scene .card100-energy-locked .card100-secret i{height:60px;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(105,205,255,.38) 24%,rgba(233,79,255,.27) 62%,rgba(23,10,55,.32));border-color:rgba(230,249,255,.83);box-shadow:0 0 16px rgba(var(--card100-blue),.53),0 0 32px rgba(var(--card100-pink),.18)}
.card100-scene .critical-card.is-opening .critical-card-energy,.card100-scene .critical-card.is-flipping .critical-card-energy,.card100-scene .critical-card.is-revealed .critical-card-energy{opacity:0!important;visibility:hidden!important;transition:none!important}
.card100-scene .critical-card.is-opening .critical-card-energy::before,.card100-scene .critical-card.is-opening .critical-card-energy i,.card100-scene .critical-card.is-flipping .critical-card-energy::before,.card100-scene .critical-card.is-flipping .critical-card-energy i,.card100-scene .critical-card.is-revealed .critical-card-energy::before,.card100-scene .critical-card.is-revealed .critical-card-energy i{animation:none!important}
.card100-scene .critical-card.is-opening{z-index:14!important;transform:translateY(-27px) translateZ(128px) scale(1.20) rotateX(.8deg)!important;filter:drop-shadow(0 34px 52px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(var(--card100-blue),.34))!important}
.card100-scene .critical-card.is-final.is-opening{transform:translateY(-32px) translateZ(158px) scale(1.29) rotateX(1.2deg)!important;filter:drop-shadow(0 38px 58px rgba(0,0,0,.72)) drop-shadow(0 0 54px rgba(var(--card100-pink),.52))!important}
.card100-scene .critical-card.is-opening .critical-card-inner{transition-duration:var(--motion-slow)!important}
.card100-scene .critical-card.is-final.is-opening .critical-card-inner{transition-duration:var(--motion-ceremony)!important}
.card100-scene .critical-card.is-flipping .critical-card-inner,.card100-scene .critical-card.is-revealed .critical-card-inner{transform:rotateY(180deg) rotateX(-2deg) translateZ(7px)!important}
.card100-scene .critical-card.is-final.is-flipping .critical-card-inner,.card100-scene .critical-card.is-final.is-revealed .critical-card-inner{transform:rotateY(180deg) rotateX(-3.5deg) translateZ(11px)!important}
.card100-scene .critical-card.is-flipping .card100-prism{animation:card100PrismExit var(--motion-slow) var(--card100-ease) both!important}

/* REVEALED COLLECTOR CARD ---------------------------------------------- */
.card100-scene .critical-card-front{padding:15px 12px!important;border:1px solid rgba(214,238,255,.17)!important;background-image:linear-gradient(180deg,rgba(4,4,9,.02) 28%,rgba(5,5,10,.20) 51%,rgba(3,3,7,.96) 86%),var(--critical-poster)!important;background-size:cover!important;box-shadow:inset 0 1px rgba(255,255,255,.19),inset 0 0 0 1px rgba(160,211,255,.035),0 20px 46px rgba(0,0,0,.55)!important}
.card100-scene .critical-card-front::after{content:none!important;display:none!important}
.card100-poster-depth{position:absolute!important;z-index:0!important;inset:0;border-radius:20px;background:linear-gradient(118deg,rgba(170,230,255,.12),transparent 16% 73%,rgba(239,117,255,.11)),radial-gradient(ellipse at 50% 105%,rgba(89,65,184,.15),transparent 48%);box-shadow:inset 1px 0 rgba(171,229,255,.12),inset -1px 0 rgba(242,129,255,.09),inset 0 -1px rgba(255,255,255,.08);pointer-events:none}
.card100-front-edge{position:absolute!important;z-index:4!important;inset:1px;border-radius:20px;border:1px solid rgba(181,225,255,.13);box-shadow:inset 0 0 18px rgba(86,99,207,.05);pointer-events:none}
.card100-lens{position:absolute!important;z-index:3!important;inset:-24% -80%;background:linear-gradient(106deg,transparent 39%,rgba(177,233,255,.045) 44%,rgba(255,255,255,.24) 49%,rgba(246,142,255,.08) 54%,transparent 60%);transform:translateX(-35%) rotate(4deg);opacity:0;pointer-events:none}
.card100-scene .card100-poster-arriving .card100-lens{animation:card100Lens var(--motion-slow) var(--card100-ease) .08s both}
.card100-scene .critical-card.is-final.card100-poster-arriving .card100-lens{animation-duration:var(--motion-slow)}
.card100-scene .critical-card-front strong{max-width:100%;font-size:10px!important;line-height:1.14!important;font-weight:650!important;letter-spacing:-.012em;text-wrap:balance}
.card100-scene .critical-card-front small{display:inline-flex;align-items:center;width:max-content;max-width:100%;min-height:17px;margin-top:7px!important;padding:3px 6px;border:1px solid rgba(var(--card100-blue),.18);border-radius:999px;background:rgba(10,19,37,.70);color:#b9eaff!important;font-size:6.4px!important;font-weight:680;font-style:normal;white-space:nowrap;backdrop-filter:blur(10px)}
.card100-scene .critical-card-front em{margin-top:5px!important;color:#b3acb9!important;font-size:5.8px!important;line-height:1.27!important;font-style:normal;text-align:left}
.card100-scene .critical-card.rank-1 .critical-card-front{border-color:rgba(var(--card100-pink),.35)!important;box-shadow:inset 0 1px rgba(255,255,255,.21),inset 0 0 0 1px rgba(244,125,255,.05),0 22px 48px rgba(0,0,0,.58),0 0 27px rgba(var(--card100-pink),.12)!important}
.card100-scene .critical-card.rank-1 .critical-card-front small{border-color:rgba(255,201,255,.34)!important;background:linear-gradient(120deg,rgba(91,70,199,.88),rgba(196,67,205,.84))!important;color:#fff!important;box-shadow:0 0 20px rgba(var(--card100-pink),.22)}

/* FINAL REVEAL: a lens bloom, not celebratory confetti. */
.card100-scene .critical-final-bloom{z-index:16!important;top:370px!important;width:24px!important;height:24px!important;filter:none!important}
.card100-scene .critical-final-bloom::before{content:none!important;display:none!important}
.card100-bloom-core{position:absolute;inset:-105px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.85) 0 1.5%,rgba(var(--card100-blue),.43) 4%,rgba(var(--card100-pink),.24) 15%,rgba(var(--card100-violet),.09) 36%,transparent 68%);filter:blur(2px);opacity:0}
.card100-bloom-lens{position:absolute;inset:-78px;border-radius:50%;border:1px solid rgba(230,168,255,.42);box-shadow:0 0 15px rgba(var(--card100-blue),.28),inset 0 0 22px rgba(var(--card100-pink),.12);opacity:0;transform:rotateX(67deg) scale(.3)}
.card100-scene .critical-final-bloom i{width:3px!important;height:3px!important;border-radius:50%;background:#f8f4ff!important;box-shadow:0 0 8px #fff,0 0 15px rgba(var(--card100-pink),.8)!important;opacity:0}
.card100-scene.card100-final-event .critical-final-bloom{opacity:1!important;animation:none!important}
.card100-scene.card100-final-event .card100-bloom-core{animation:card100Bloom var(--motion-ceremony) var(--card100-ease) .46s both}
.card100-scene.card100-final-event .card100-bloom-lens{animation:card100LensBloom var(--motion-ceremony) var(--card100-ease) .48s both}
.card100-scene.card100-final-event .critical-final-bloom i{animation:card100Particle var(--motion-ceremony) var(--card100-ease) .52s both}
.card100-scene .critical-final-bloom i:nth-child(1){--card-x:-74px;--card-y:-52px}.card100-scene .critical-final-bloom i:nth-child(2){--card-x:70px;--card-y:-58px}.card100-scene .critical-final-bloom i:nth-child(3){--card-x:92px;--card-y:8px}.card100-scene .critical-final-bloom i:nth-child(4){--card-x:58px;--card-y:74px}.card100-scene .critical-final-bloom i:nth-child(5){--card-x:-64px;--card-y:72px}.card100-scene .critical-final-bloom i:nth-child(6){--card-x:-90px;--card-y:6px}

/* SETTLED HIERARCHY ----------------------------------------------------- */
.card100-scene.trip-phase-settled .critical-card-stage{top:230px!important;transform:scale(.88)!important}
.card100-scene.trip-phase-settled .critical-card{filter:drop-shadow(0 18px 32px rgba(0,0,0,.48)) saturate(.94)!important;animation:none!important}
.card100-scene.trip-phase-settled .critical-card.rank-1{z-index:6!important;transform:translateY(-18px) translateZ(48px) scale(1.15)!important;filter:drop-shadow(0 28px 40px rgba(0,0,0,.61)) drop-shadow(0 0 31px rgba(var(--card100-pink),.22)) saturate(1.03)!important}
.card100-scene.trip-phase-settled .critical-card:not(.rank-1){transform:translateY(4px) scale(.94)!important;opacity:.92}
.card100-scene.trip-phase-settled .critical-card:not(.rank-1) .critical-card-front em{display:none}
.card100-scene.trip-phase-settled .critical-card:not(.rank-1) .critical-card-front strong{font-size:9.2px!important}
.card100-scene.trip-phase-settled .critical-results{top:422px!important}
.card100-scene.trip-phase-settled .card100-prism,.card100-scene.trip-phase-settled .card100-lens,.card100-scene.trip-phase-settled .critical-card-energy::before,.card100-scene.trip-phase-settled .critical-card-energy i,.card100-scene .critical-card.is-revealed .card100-prism{animation:none!important}

@keyframes card100FloatA{0%,100%{translate:0 0}50%{translate:0 -2px}}
@keyframes card100FloatB{0%,100%{translate:0 -1px}50%{translate:0 2px}}
@keyframes card100Prism{0%,100%{transform:translateX(-42%) rotate(5deg);opacity:.28}50%{transform:translateX(18%) rotate(5deg);opacity:.76}}
@keyframes card100PrismExit{0%{transform:translateX(-30%) rotate(5deg);opacity:.75}100%{transform:translateX(48%) rotate(5deg);opacity:0}}
@keyframes card100Charge{from{transform:scale(.98);opacity:.62}to{transform:scale(1.025);opacity:1}}
@keyframes card100Lens{0%{transform:translateX(-43%) rotate(4deg);opacity:0}20%{opacity:.72}100%{transform:translateX(43%) rotate(4deg);opacity:0}}
@keyframes card100Bloom{0%{opacity:0;transform:scale(.2)}24%{opacity:1}64%{opacity:.54}100%{opacity:0;transform:scale(1.45)}}
@keyframes card100LensBloom{0%{opacity:0;transform:rotateX(67deg) scale(.2)}34%{opacity:.84}100%{opacity:0;transform:rotateX(67deg) scale(1.85)}}
@keyframes card100Particle{0%{opacity:0;transform:translate(0,0) scale(.4)}22%{opacity:.9}100%{opacity:0;transform:translate(var(--card-x),var(--card-y)) scale(.1)}}

@media(prefers-reduced-motion:reduce){
  .card100-scene .critical-card,.card100-scene .critical-card-inner,.card100-scene .card100-prism,.card100-scene .card100-lens,.card100-scene .critical-card-energy::before,.card100-scene .critical-final-bloom *{animation:none!important;transition-duration:var(--motion-fast)!important}
  .card100-scene .critical-card.is-active,.card100-scene .critical-card.is-final,.card100-scene .critical-card.is-opening,.card100-scene .critical-card.is-final.is-opening{transform:translateY(0) scale(.96)!important;filter:none!important}
  .card100-scene .critical-card-inner,.card100-scene .critical-card.is-flipping .critical-card-inner,.card100-scene .critical-card.is-revealed .critical-card-inner{transform:none!important;transition:none!important}
  .card100-scene .critical-card-back,.card100-scene .critical-card-front{transition:opacity var(--motion-fast) var(--motion-curve)!important}
  .card100-scene .critical-card-front{transform:none!important;opacity:0!important}
  .card100-scene .critical-card.is-revealed[data-face-hydrated="true"] .critical-card-back{opacity:0!important}
  .card100-scene .critical-card.is-revealed[data-face-hydrated="true"] .critical-card-front{opacity:1!important}
  .card100-scene.card100-final-event .critical-final-bloom,.card100-scene.critical-final-reveal .critical-final-bloom{display:none!important;opacity:0!important}
}
.device.manual-reduced-motion .card100-scene .critical-card,.device.manual-reduced-motion .card100-scene .critical-card-inner,.device.manual-reduced-motion .card100-scene .card100-prism,.device.manual-reduced-motion .card100-scene .card100-lens,.device.manual-reduced-motion .card100-scene .critical-card-energy::before,.device.manual-reduced-motion .card100-scene .critical-final-bloom *,.reduce-motion .card100-scene .critical-card,.reduce-motion .card100-scene .critical-card-inner,.reduce-motion .card100-scene .card100-prism,.reduce-motion .card100-scene .card100-lens,.reduce-motion .card100-scene .critical-card-energy::before,.reduce-motion .card100-scene .critical-final-bloom *{animation:none!important;transition-duration:var(--motion-fast)!important}
.device.manual-reduced-motion .card100-scene .critical-card.is-active,.device.manual-reduced-motion .card100-scene .critical-card.is-final,.device.manual-reduced-motion .card100-scene .critical-card.is-opening,.device.manual-reduced-motion .card100-scene .critical-card.is-final.is-opening,.reduce-motion .card100-scene .critical-card.is-active,.reduce-motion .card100-scene .critical-card.is-final,.reduce-motion .card100-scene .critical-card.is-opening,.reduce-motion .card100-scene .critical-card.is-final.is-opening{transform:translateY(0) scale(.96)!important;filter:none!important}
.device.manual-reduced-motion .card100-scene .critical-card-inner,.device.manual-reduced-motion .card100-scene .critical-card.is-flipping .critical-card-inner,.device.manual-reduced-motion .card100-scene .critical-card.is-revealed .critical-card-inner,.reduce-motion .card100-scene .critical-card-inner,.reduce-motion .card100-scene .critical-card.is-flipping .critical-card-inner,.reduce-motion .card100-scene .critical-card.is-revealed .critical-card-inner{transform:none!important;transition:none!important}
.device.manual-reduced-motion .card100-scene .critical-card-back,.device.manual-reduced-motion .card100-scene .critical-card-front,.reduce-motion .card100-scene .critical-card-back,.reduce-motion .card100-scene .critical-card-front{transition:opacity var(--motion-fast) var(--motion-curve)!important}
.device.manual-reduced-motion .card100-scene .critical-card-front,.reduce-motion .card100-scene .critical-card-front{transform:none!important;opacity:0!important}
.device.manual-reduced-motion .card100-scene .critical-card.is-revealed[data-face-hydrated="true"] .critical-card-back,.reduce-motion .card100-scene .critical-card.is-revealed[data-face-hydrated="true"] .critical-card-back{opacity:0!important}
.device.manual-reduced-motion .card100-scene .critical-card.is-revealed[data-face-hydrated="true"] .critical-card-front,.reduce-motion .card100-scene .critical-card.is-revealed[data-face-hydrated="true"] .critical-card-front{opacity:1!important}
.device.manual-reduced-motion .card100-scene.card100-final-event .critical-final-bloom,.device.manual-reduced-motion .card100-scene.critical-final-reveal .critical-final-bloom,.reduce-motion .card100-scene.card100-final-event .critical-final-bloom,.reduce-motion .card100-scene.critical-final-reveal .critical-final-bloom{display:none!important;opacity:0!important}
.device.manual-reduce-transparency .card100-scene .critical-card-back{background:#11111c!important}.device.manual-reduce-transparency .card100-scene .critical-card-front small{backdrop-filter:none!important}

@media(max-height:760px){
  .card100-scene.trip-phase-settled .critical-card-stage{top:217px!important;transform:scale(.82)!important}
  .card100-scene.trip-phase-settled .critical-results{top:397px!important}
}

/* ===== prototype-src/viewport-corrections.css ===== */
/* TRIPTIC viewport corrections
   The reveal is a locked ceremony only while it is unfolding. Once settled,
   it becomes a real scrollable results document at every supported height. */

/* The glyph is mathematically centred inside every circular back control.
   Transform order matters here: centring is resolved before the 45deg turn. */
.circle-control.back-chevron{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
}
.circle-control.back-chevron>i{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:9px!important;
  height:9px!important;
  margin:0!important;
  transform:translate(-50%,-50%) rotate(45deg)!important;
  transform-origin:50% 50%!important;
}

/* Energy and lens layers deliberately extend beyond their cards. Clip those
   effects at the ritual viewport so they can never create a sideways drag. */
.card100-scene{
  overflow-x:hidden!important;
  overscroll-behavior-x:none!important;
  touch-action:pan-y!important;
}
.card100-scene .critical-card-stage{
  overflow:clip!important;
  overflow-clip-margin:96px!important;
}

/* A completed TRIPTIC must never clip its explanation, controls or CTA. */
.card100-scene.trip-phase-settled{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y!important;
  scrollbar-width:none;
  scroll-padding-bottom:112px;
}
.card100-scene.trip-phase-settled::-webkit-scrollbar{display:none}
.card100-scene.trip-phase-settled .critical-orb-stage{
  top:46px!important;
  transform:translateX(-50%) scale(.18)!important;
}
.card100-scene.trip-phase-settled .critical-card-stage{
  top:242px!important;
}
.card100-scene.trip-phase-settled .critical-results{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  width:auto!important;
  margin:472px 20px 0!important;
  padding-bottom:max(104px,calc(78px + env(safe-area-inset-bottom)))!important;
  box-sizing:border-box!important;
}

/* Every understood criterion is visible. There is no hidden horizontal rail
   on a confidence-and-trust surface. */
.critical-understood .p20-constraints{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
  padding:1px 0 2px!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
  scroll-snap-type:none!important;
}
.critical-understood .p20-constraints button{
  flex:0 1 auto!important;
  max-width:100%!important;
  min-height:30px!important;
  height:auto!important;
  padding:7px 11px!important;
  white-space:normal!important;
  text-wrap:balance;
  line-height:1.2!important;
}

/* Compact-height reveal: lift and slightly quieten the orb so the final
   sealed card has its own air. Do not reduce the card's perceived importance. */
@media(max-height:760px){
  .card100-scene.trip-phase-ready .critical-orb-stage,
  .card100-scene.trip-phase-revealing .critical-orb-stage{
    top:92px!important;
    transform:translateX(-50%) scale(.38)!important;
  }
  .card100-scene.trip-phase-ready .critical-card.is-active{
    transform:translateY(-9px) translateZ(38px) scale(1.055)!important;
  }
  .card100-scene.trip-phase-ready .critical-card.is-final{
    transform:translateY(-10px) translateZ(45px) scale(1.075)!important;
  }
  .card100-scene.trip-phase-settled .critical-results{
    margin-top:448px!important;
    padding-bottom:max(106px,calc(80px + env(safe-area-inset-bottom)))!important;
  }
  .card100-scene.trip-phase-settled .critical-card-stage{
    top:229px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .card100-scene.trip-phase-settled{scroll-behavior:auto!important}
}
.device.manual-reduced-motion .card100-scene.trip-phase-settled{scroll-behavior:auto!important}

/* Share has no persistent navigation bar. The generic destination clearance
   left a nav-sized tail and pushed its primary action below the first iPhone
   viewport. Preserve the collectible card while keeping the decision whole. */
.share-screen{
  padding:14px 24px max(22px,env(safe-area-inset-bottom))!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
.share-screen .share-preview{margin:14px auto 13px!important}
.share-screen .p20-share-formats{margin:7px 0 9px!important}
.share-screen .share-copy p{margin-bottom:8px!important}
.share-screen .share-destinations{margin-bottom:10px!important}

/* Discover submission is a quiet action, not a miniature version of the
   thought engine. The orb belongs to the dedicated reveal scene after submit. */
.premium-composer .query-submit.query-submit-plain{
  width:auto!important;
  min-width:91px!important;
  height:38px!important;
  padding:0 12px 0 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  flex:0 0 auto!important;
  border:1px solid rgba(126,212,255,.28)!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,rgba(63,170,255,.24),rgba(91,83,236,.18))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.14),0 8px 22px rgba(27,111,211,.16)!important;
  color:#dff6ff!important;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
  transition:transform var(--motion-fast) var(--motion-spring),border-color var(--motion-fast) var(--motion-curve),background var(--motion-fast) var(--motion-curve),opacity var(--motion-fast) var(--motion-curve)!important;
}
.premium-composer .query-submit.query-submit-plain>span{
  font-size:8px!important;
  font-weight:720!important;
  letter-spacing:.015em!important;
  white-space:nowrap!important;
}
.premium-composer .query-submit.query-submit-plain>i{
  font-size:12px!important;
  font-style:normal!important;
  line-height:1!important;
  transform:translateY(-.5px)!important;
}
.premium-composer .query-submit.query-submit-plain:disabled{
  border-color:rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:none!important;
  color:#6f6b77!important;
  opacity:.68!important;
}
.premium-composer .query-submit.query-submit-plain:not(:disabled):active{
  transform:scale(.96)!important;
}
.critical-result-toolbar{grid-template-columns:repeat(3,1fr)!important}

/* Rotating Discover prompts use the verified poster for the film that inspired
   the wording. A generic triptych cannot stand in for content-aware artwork. */
.discover-inspiration .prompt-card.prompt-film-art{
  background-image:var(--prompt-art)!important;
  background-size:var(--prompt-size,cover)!important;
  background-position:50% var(--prompt-y,20%)!important;
  background-repeat:no-repeat!important;
  filter:none!important;
}
.discover-inspiration .prompt-card.prompt-film-art .prompt-shade{
  background:linear-gradient(180deg,transparent 24%,rgba(3,3,8,.22) 52%,rgba(2,2,7,.82) 100%)!important;
}

/* ===== prototype-src/taste-intelligence.css ===== */
/* Evolving Film DNA and taste-calibration presentation. */
.taste-intelligence-profile{padding-bottom:118px!important;overflow-x:hidden!important;scroll-behavior:smooth}
.taste-intelligence-profile .app-header{position:relative;z-index:8;transition:opacity var(--motion-normal) var(--motion-curve),transform var(--motion-slow) var(--motion-curve)}
.taste-intelligence-profile .atmosphere-pool{max-width:calc(100% - 24px)!important;left:12px!important;right:12px!important}
.taste-profile-compact{position:sticky;z-index:7;top:-1px;height:0;display:flex;align-items:center;justify-content:space-between;padding:0 18px;overflow:hidden;border-bottom:1px solid transparent;background:rgba(7,7,12,0);backdrop-filter:blur(0);transition:height var(--motion-normal) var(--motion-curve),background var(--motion-normal) var(--motion-curve),border-color var(--motion-normal) var(--motion-curve)}
.taste-profile-compact span{color:#8fcfff;font-size:8px;font-weight:750;letter-spacing:.15em}.taste-profile-compact strong{font-size:11px;font-weight:620}
.taste-profile-scrolled .app-header{opacity:0;transform:translateY(-14px);pointer-events:none}.taste-profile-scrolled .taste-profile-compact{height:48px;border-color:rgba(255,255,255,.08);background:rgba(7,7,12,.72);backdrop-filter:blur(24px) saturate(1.45)}
.taste-intelligence-profile .profile-identity{margin-bottom:18px}.taste-intelligence-profile .profile-identity>p{max-width:260px;margin:0 auto;color:#aaa7b6;font-size:11px;line-height:1.45}
.taste-intelligence-insight{width:100%;margin:0 0 12px;text-align:left}.taste-intelligence-insight strong{font-size:14px!important;line-height:1.3!important}.taste-intelligence-insight p{font-size:9px!important;line-height:1.45!important}.taste-intelligence-insight.is-learning{border-color:rgba(255,255,255,.08)!important;box-shadow:none!important}
.taste-intelligence-card{position:relative;overflow:hidden;border-color:rgba(112,193,255,.16)!important;background:linear-gradient(155deg,rgba(105,174,255,.075),rgba(181,99,255,.05) 48%,rgba(255,255,255,.025))!important;box-shadow:0 24px 58px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.08)!important}
.taste-intelligence-card::after{content:"";position:absolute;inset:-45% 38% 48% -20%;pointer-events:none;background:radial-gradient(circle,rgba(100,193,255,.14),transparent 68%);filter:blur(12px)}
.taste-spectrum-live i{height:var(--taste-height)!important;background:linear-gradient(180deg,#a6ddff 0%,#7768fb 52%,#3b2854 100%)!important;box-shadow:0 0 16px rgba(99,191,255,.16)}
.taste-signal-row{display:flex!important;flex-wrap:wrap;gap:6px!important;height:auto!important;margin:11px 0 4px!important}
.taste-signal{display:inline-flex;align-items:center;min-height:26px;padding:0 9px;border:1px solid rgba(126,198,255,.14);border-radius:999px;background:rgba(102,172,255,.055);color:#d6eaff;font-size:8px;line-height:1.2;text-transform:capitalize}.taste-signal.muted{color:#888492;border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
.taste-intelligence-card>small{margin-top:10px!important;color:#817d8b!important;font-size:8px!important}
.taste-intelligence-card>button{position:relative;z-index:2;min-height:42px;padding:11px 0!important;border-top:1px solid rgba(255,255,255,.055)!important;font-size:10px!important}
.taste-intelligence-dna{padding-bottom:42px!important}.taste-narrative>span{display:block;margin-bottom:7px;color:#8fcfff;font-size:8px;font-weight:750;letter-spacing:.14em}.taste-narrative>strong{font-size:17px}.taste-narrative>p{margin-bottom:9px!important}
.taste-intelligence-dna .dna-map{background:linear-gradient(160deg,rgba(75,139,218,.07),rgba(255,255,255,.022) 45%,rgba(150,77,206,.055))!important}
.taste-intelligence-dna .dna-axis{margin:13px 0}.taste-intelligence-dna .dna-axis>i{height:5px}.taste-intelligence-dna .dna-axis b{width:11px;height:11px;transition:left var(--motion-slow) var(--motion-curve)}
.taste-dna-orbit{position:relative;height:142px;margin:0 0 17px;border:1px solid rgba(131,191,255,.09);border-radius:18px;background:radial-gradient(circle at 48% 48%,rgba(103,118,255,.12),transparent 43%),rgba(255,255,255,.015);overflow:hidden}
.taste-dna-orbit::before,.taste-dna-orbit::after{content:"";position:absolute;inset:19% 17%;border:1px solid rgba(137,192,255,.1);border-radius:50%;transform:rotate(-12deg)}.taste-dna-orbit::after{inset:31% 10%;border-color:rgba(203,112,255,.09);transform:rotate(19deg)}
.taste-dna-orbit .p20-dna-node{z-index:2}.taste-dna-orbit .p20-dna-caption{z-index:2}
@media (max-height:760px){.taste-intelligence-profile .profile-identity{margin-top:18px}.taste-intelligence-insight{padding:12px!important}.taste-intelligence-card{padding:14px!important}}
@media (prefers-reduced-motion:reduce){.taste-profile-compact,.taste-intelligence-profile .app-header,.taste-intelligence-dna .dna-axis b{transition:none!important}.taste-dna-orbit::before,.taste-dna-orbit::after{display:none}}
.device.manual-reduced-motion .taste-profile-compact,.device.manual-reduced-motion .taste-intelligence-profile .app-header,.device.manual-reduced-motion .taste-intelligence-dna .dna-axis b{transition:none!important}

/* ===== prototype-src/frontend-completion.css ===== */
/* TRIPTIC frontend completion layer.
   This is the final visual owner for founder-approved corrections. Historical
   layers remain implementation inputs; none may override this contract. */

:root{
  --completion-ease:var(--motion-curve);
  --completion-spring:var(--motion-spring);
}

/* A framed desktop preview must scale the complete iPhone canvas. The old
   height + aspect-ratio rule squeezed the canvas to ~255 px in a 600 px-high
   browser panel while leaving 40 px type and 130 px posters unscaled. */
@media (min-width:561px){
  .experience-shell{position:relative!important}
  .device{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:390px!important;
    height:844px!important;
    aspect-ratio:auto!important;
    transform:translate(-50%,-50%) translateZ(0) scale(var(--device-preview-scale,1))!important;
    transform-origin:50% 50%!important;
  }
}

/* Critical supporting copy must remain readable on a physical phone. */
.premium-welcome .welcome-actions .quiet-button{font-size:11.5px!important}
.premium-welcome .welcome-actions::after{content:none!important;display:none!important}
.premium-welcome .welcome-actions>span{display:block!important;font-size:10.5px!important;line-height:1.35!important;color:#9a94a1!important}
.fluid-departure .auth-cinema{display:none!important}

/* Compact physical viewports keep the welcome story and actions in distinct
   vertical zones. This is the smallest supported iPhone-style presentation. */
@media (max-width:560px) and (max-height:640px){
  .premium-welcome .welcome-brand{top:52px!important;gap:8px!important}
  .premium-welcome .welcome-brand .brand-mark{width:58px!important;height:58px!important}
  .premium-welcome .welcome-brand .wordmark{width:118px!important}
  .premium-welcome .welcome-message{left:20px!important;right:20px!important;top:195px!important}
  .premium-welcome .welcome-message .eyebrow{font-size:6.5px!important}
  .premium-welcome .welcome-message h1{margin:8px 0!important;font-size:31px!important;line-height:.98!important}
  .premium-welcome .welcome-message p{font-size:11px!important;line-height:1.4!important}
  .premium-welcome .welcome-actions{left:20px!important;right:20px!important;bottom:14px!important;gap:4px!important}
  .premium-welcome .welcome-actions .primary-button{height:52px!important;border-radius:17px!important}
  .premium-welcome .welcome-actions .quiet-button{height:36px!important;padding:7px!important}
  .premium-welcome .welcome-actions>span{font-size:9.5px!important}
}
.premium-composer .composer-guidance{max-width:184px!important;font-size:9px!important;line-height:1.35!important}
.discover-inspiration .prompt-copy b{font-size:7.5px!important;line-height:1.2!important}

/* Discover is an editorial invitation, not a dashboard. The request composer
   is the clear hero; Friday retains its purple notification energy, while
   memory actions shed their enclosing panel and verified poster prompts keep
   supplying the cinematic texture. */
.premium-discover{
  padding-left:22px!important;
  padding-right:22px!important;
}
.premium-discover-ambient{
  background:
    radial-gradient(ellipse at 78% 9%,rgba(132,64,210,.17),transparent 31%),
    radial-gradient(ellipse at 18% 18%,rgba(55,136,235,.1),transparent 29%),
    radial-gradient(ellipse at 50% 57%,rgba(95,52,159,.075),transparent 41%),
    linear-gradient(180deg,#06060c 0%,#05040a 48%,#030307 100%)!important;
}
.premium-discover-ambient::before{
  opacity:.72!important;
  filter:blur(30px)!important;
}
.premium-discover>.app-header{
  height:61px!important;
}
.premium-discover>.friday-ribbon{
  height:72px!important;
  margin:7px 0 30px!important;
  padding:13px 15px!important;
  border-color:rgba(229,120,255,.32)!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 9% 0%,rgba(211,107,255,.13),transparent 31%),
    linear-gradient(125deg,rgba(79,41,114,.72),rgba(46,29,84,.72) 54%,rgba(25,32,67,.68))!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.15),
    0 17px 42px rgba(0,0,0,.33),
    0 0 30px rgba(190,76,239,.16)!important;
  will-change:transform;
  animation:completionFridayBuzz 4.6s var(--motion-breathe) infinite!important;
}
.premium-discover>.friday-ribbon>span{
  font-size:7.5px!important;
}
.premium-discover>.friday-ribbon>strong{
  margin-top:4px!important;
  font-size:13px!important;
}
.premium-discover>.friday-ribbon>b{
  top:16px!important;
  right:14px!important;
  height:39px!important;
  padding:0 16px!important;
  overflow:hidden!important;
  isolation:isolate;
  border-color:rgba(194,222,255,.46)!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,rgba(75,174,255,.32),rgba(139,78,239,.46) 52%,rgba(233,101,255,.34))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.24),0 0 16px rgba(106,190,255,.18),0 0 25px rgba(218,99,255,.18)!important;
  color:#fff!important;
  font-size:9px!important;
  text-shadow:0 0 10px rgba(255,255,255,.34);
  will-change:filter,box-shadow;
  transition:transform var(--motion-fast) var(--motion-curve),border-color var(--motion-fast) var(--motion-curve),background var(--motion-fast) var(--motion-curve)!important;
  animation:completionFridayRevealLure 2.35s var(--motion-breathe) infinite!important;
}
.premium-discover>.friday-ribbon>b::before{
  content:"";
  position:absolute;
  top:-45%;
  bottom:-45%;
  left:-48%;
  width:42%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);
  transform:translateX(-240%) skewX(-18deg);
  opacity:0;
  pointer-events:none;
  animation:completionFridayRevealSheen 3.8s var(--motion-breathe) infinite!important;
}
.premium-discover>.friday-ribbon::after{
  border-radius:23px!important;
}
@keyframes completionFridayBuzz{
  0%,62%,79%,100%{transform:translate3d(0,0,0)}
  66%{transform:translate3d(0,-3px,0)}
  69%{transform:translate3d(0,1px,0)}
  72%{transform:translate3d(0,-2px,0)}
  75%{transform:translate3d(0,.5px,0)}
}
@keyframes completionFridayRevealLure{
  0%,100%{filter:brightness(1) saturate(1);box-shadow:inset 0 1px rgba(255,255,255,.24),0 0 16px rgba(106,190,255,.18),0 0 25px rgba(218,99,255,.18)}
  50%{filter:brightness(1.1) saturate(1.12);box-shadow:inset 0 1px rgba(255,255,255,.32),0 0 22px rgba(106,190,255,.3),0 0 34px rgba(228,109,255,.3)}
}
@keyframes completionFridayRevealSheen{
  0%,62%{transform:translateX(-240%) skewX(-18deg);opacity:0}
  68%{opacity:.7}
  82%,100%{transform:translateX(560%) skewX(-18deg);opacity:0}
}
@media(hover:hover){
  .premium-discover>.friday-ribbon:hover{
    animation:none!important;
    transform:translateY(-2px)!important;
    border-color:rgba(246,169,255,.58)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.19),0 19px 45px rgba(0,0,0,.38),0 0 36px rgba(215,94,255,.24)!important;
  }
  .premium-discover>.friday-ribbon:hover>b{
    animation:none!important;
    transform:translateY(-1px) scale(1.025);
    box-shadow:inset 0 1px rgba(255,255,255,.34),0 0 24px rgba(112,198,255,.34),0 0 38px rgba(229,108,255,.32)!important;
  }
}
.premium-discover>.friday-ribbon:focus-visible{
  animation:none!important;
  transform:translateY(-2px)!important;
  outline:2px solid rgba(137,215,255,.92)!important;
  outline-offset:3px;
}
.premium-discover>.friday-ribbon:focus-visible>b{
  animation:none!important;
  transform:translateY(-1px) scale(1.025);
  box-shadow:inset 0 1px rgba(255,255,255,.34),0 0 24px rgba(112,198,255,.34),0 0 38px rgba(229,108,255,.32)!important;
}
.premium-discover>.friday-ribbon:active{
  animation:none!important;
  transform:translateY(0) scale(.992)!important;
}
.premium-discover>.friday-ribbon:active>b{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){
  .premium-discover>.friday-ribbon,
  .premium-discover>.friday-ribbon::after,
  .premium-discover>.friday-ribbon>span>i,
  .premium-discover>.friday-ribbon>b,
  .premium-discover>.friday-ribbon>b::before{animation:none!important;transition:none!important}
  .premium-discover>.friday-ribbon,
  .premium-discover>.friday-ribbon>b{transform:none!important;filter:none!important}
  .premium-discover>.friday-ribbon>b::before{display:none!important}
}
.device.manual-reduced-motion .premium-discover>.friday-ribbon,
.device.manual-reduced-motion .premium-discover>.friday-ribbon::after,
.device.manual-reduced-motion .premium-discover>.friday-ribbon>span>i,
.device.manual-reduced-motion .premium-discover>.friday-ribbon>b,
.device.manual-reduced-motion .premium-discover>.friday-ribbon>b::before{animation:none!important;transition:none!important}
.device.manual-reduced-motion .premium-discover>.friday-ribbon,
.device.manual-reduced-motion .premium-discover>.friday-ribbon>b{transform:none!important;filter:none!important}
.device.manual-reduced-motion .premium-discover>.friday-ribbon>b::before{display:none!important}
.premium-discover>.discover-heading{
  margin:0 3px 20px!important;
}
.premium-discover>.discover-heading>p{
  margin-bottom:5px!important;
  color:#a9a5b1!important;
  font-size:13px!important;
  line-height:1.3!important;
}
.premium-discover>.discover-heading>h1{
  font-size:41px!important;
  line-height:.98!important;
  letter-spacing:-.052em!important;
}
.premium-composer{
  min-height:214px!important;
  padding:22px 20px 15px!important;
  border-color:rgba(145,188,239,.25)!important;
  border-radius:29px!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(75,151,226,.13),transparent 34%),
    radial-gradient(circle at 91% 100%,rgba(123,70,218,.1),transparent 36%),
    linear-gradient(145deg,rgba(20,25,37,.96),rgba(8,9,16,.98))!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.12),
    inset 0 -46px 88px rgba(0,0,0,.2),
    0 24px 62px rgba(0,0,0,.38),
    0 0 38px rgba(70,137,221,.08)!important;
}
.premium-composer::before{
  border-radius:29px!important;
  background:linear-gradient(132deg,rgba(122,211,255,.34),transparent 30%,transparent 66%,rgba(163,108,255,.25))!important;
}
.premium-composer .request-label{
  font-size:8px!important;
  letter-spacing:.2em!important;
}
.premium-discover.discover-v5 .search-glass.premium-composer textarea,
.premium-discover.discover-v5.is-listening-space .search-glass.premium-composer textarea{
  height:103px!important;
  margin:12px 0 7px!important;
  font-size:19px!important;
  line-height:1.34!important;
}
.premium-composer textarea::placeholder{
  color:#747482!important;
}
.premium-composer .composer-footer{
  height:50px!important;
  padding-top:10px!important;
}
.premium-composer .composer-guidance{
  max-width:165px!important;
  padding-bottom:4px!important;
  color:#92909b!important;
  font-size:10px!important;
  line-height:1.38!important;
}
.premium-composer .voice-control{
  width:42px!important;
  height:42px!important;
  flex-basis:42px!important;
  border-color:rgba(126,201,255,.23)!important;
  background:rgba(17,27,40,.82)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 8px 22px rgba(0,0,0,.24)!important;
}
.premium-composer .voice-control svg{
  width:18px!important;
  height:18px!important;
}
.premium-composer .query-submit.query-submit-plain{
  min-width:112px!important;
  height:44px!important;
  padding:0 17px!important;
  gap:10px!important;
  border-color:rgba(139,201,255,.38)!important;
  background:linear-gradient(135deg,rgba(72,157,255,.86),rgba(105,76,235,.92) 58%,rgba(124,62,213,.92))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.25),0 12px 30px rgba(56,79,205,.3),0 0 24px rgba(92,161,255,.16)!important;
}
.premium-composer .query-submit.query-submit-plain>span{
  font-size:10px!important;
}
.premium-composer .query-submit.query-submit-plain:disabled{
  border-color:rgba(134,148,183,.13)!important;
  background:linear-gradient(135deg,rgba(54,61,81,.34),rgba(73,49,102,.28))!important;
  color:#817d8c!important;
  opacity:.76!important;
}
.discover-shortcuts{
  height:54px!important;
  margin:19px 0 25px!important;
  padding:0!important;
  gap:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.discover-shortcuts button{
  position:relative!important;
  gap:9px!important;
  border-radius:14px!important;
  color:#bbb7c2!important;
  font-size:9.5px!important;
}
.discover-shortcuts button+button::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  bottom:11px;
  width:1px;
  background:rgba(173,184,217,.12);
}
.discover-shortcuts svg{
  width:20px!important;
  height:20px!important;
}
.discover-inspiration{
  padding-bottom:28px!important;
}
.discover-inspiration>header{
  margin-bottom:13px!important;
}
.discover-inspiration>header span{
  margin-bottom:5px!important;
  color:#908a98!important;
  font-size:6.5px!important;
}
.discover-inspiration h2{
  font-size:17px!important;
  font-weight:620!important;
}
.discover-inspiration header button{
  color:#b89ae8!important;
  font-size:9px!important;
}
.discover-inspiration .prompt-grid{
  gap:12px!important;
}
.discover-inspiration .prompt-card{
  min-height:0!important;
  height:122px!important;
  border-color:rgba(173,194,229,.16)!important;
  border-radius:22px!important;
  box-shadow:0 18px 38px rgba(0,0,0,.34)!important;
}
.discover-inspiration .prompt-copy{
  padding:15px!important;
}
.discover-inspiration .prompt-title{
  font-size:11px!important;
  line-height:1.28!important;
}
.discover-inspiration .prompt-copy b{
  font-size:8.5px!important;
}

@media(max-height:760px){
  .premium-discover{padding-left:20px!important;padding-right:20px!important}
  .premium-discover>.app-header{height:54px!important}
  .premium-discover>.friday-ribbon{height:62px!important;margin:3px 0 17px!important;padding:10px 13px!important;border-radius:19px!important}
  .premium-discover>.friday-ribbon>strong{margin-top:2px!important;font-size:11px!important}
  .premium-discover>.friday-ribbon>b{top:14px!important;right:12px!important;height:34px!important;padding:0 13px!important;font-size:8px!important}
  .premium-discover>.discover-heading{margin-bottom:12px!important}
  .premium-discover>.discover-heading>p{margin-bottom:2px!important;font-size:11px!important}
  .premium-discover>.discover-heading>h1{font-size:35px!important}
  .premium-composer{min-height:169px!important;padding:17px 16px 12px!important;border-radius:24px!important}
  .premium-composer::before{border-radius:24px!important}
  .premium-discover.discover-v5 .search-glass.premium-composer textarea,
  .premium-discover.discover-v5.is-listening-space .search-glass.premium-composer textarea{height:calc(4.02em + 2px)!important;margin:8px 0 4px!important;font-size:17px!important}
  .premium-composer .composer-footer{height:46px!important;padding-top:7px!important}
  .premium-composer .composer-guidance{font-size:9px!important}
  .premium-composer .voice-control{width:38px!important;height:38px!important;flex-basis:38px!important}
  .premium-composer .query-submit.query-submit-plain{min-width:96px!important;height:39px!important;padding:0 13px!important}
  .discover-shortcuts{height:48px!important;margin:12px 0 15px!important}
  .discover-shortcuts button{font-size:8px!important}
  .discover-shortcuts svg{width:18px!important;height:18px!important}
  .discover-inspiration{padding-bottom:19px!important}
  .discover-inspiration>header{margin-bottom:9px!important}
  .discover-inspiration h2{font-size:14px!important}
  .discover-inspiration header button{font-size:7.5px!important}
  .discover-inspiration .prompt-card{height:96px!important;border-radius:18px!important}
  .discover-inspiration .prompt-copy{padding:12px!important}
  .discover-inspiration .prompt-title{font-size:9.5px!important}
  .discover-inspiration .prompt-copy b{font-size:7.5px!important}
}
@media(max-height:700px){
  .discover-inspiration .prompt-card{height:78px!important}
  .discover-inspiration .prompt-copy{padding:10px 12px!important}
}

/* Discover closure: keep the whole page composed inside the iPhone safe area,
   preserve one stable composer geometry on focus, and use the lower field for
   the daily film game rather than dashboard chrome or empty space. */
.premium-discover{
  --discover-safe-top:max(17px,env(safe-area-inset-top,0px));
  --discover-nav-height:68px;
  --discover-nav-bottom:max(12px,env(safe-area-inset-bottom,0px));
  --discover-gutter:clamp(20px,5.64vw,24px);
  padding-left:var(--discover-gutter)!important;
  padding-right:var(--discover-gutter)!important;
  padding-bottom:calc(var(--discover-nav-height) + var(--discover-nav-bottom) + 18px)!important;
  scroll-padding-bottom:calc(var(--discover-nav-height) + var(--discover-nav-bottom) + 18px)!important;
}
.device>.premium-discover.discover-v5::after{
  content:"";
  position:fixed;
  z-index:210;
  left:0;
  right:0;
  bottom:0;
  height:calc(var(--discover-nav-height) + var(--discover-nav-bottom));
  background:linear-gradient(180deg,rgba(3,3,7,.96) 0%,#030307 18%,#030307 100%);
  pointer-events:none;
}
.device>.home-indicator{z-index:230!important}
.premium-discover>.ios-status{
  position:absolute!important;
  top:var(--discover-safe-top)!important;
  left:clamp(24px,6.7vw,28px)!important;
  right:clamp(24px,6.7vw,28px)!important;
  width:auto!important;
  margin:0!important;
}
.premium-discover>.app-header{
  height:calc(var(--discover-safe-top) + 71px)!important;
  box-sizing:border-box!important;
  padding:calc(var(--discover-safe-top) + 25px) 0 0!important;
}
.premium-discover .brand-home .brand-mark{
  width:33px!important;
  height:33px!important;
}
.premium-discover.discover-v5 .app-header .brand-home .wordmark{width:88px!important}
.premium-discover .profile-control{
  position:relative!important;
  width:40px!important;
  height:40px!important;
}
.premium-discover .profile-control::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
}
.premium-discover.friday-consumed-home>.discover-heading,
.premium-discover.friday-complete-home>.discover-heading{margin-top:16px!important}

/* Focusing the textarea is a state change, not a new layout. */
.premium-discover.is-listening-space>.app-header,
.premium-discover.is-listening-space>.friday-ribbon,
.premium-discover.is-listening-space>.discover-heading,
.premium-discover.is-listening-space>.discover-shortcuts,
.premium-discover.is-listening-space>.discover-inspiration,
.premium-discover.is-listening-space>.daily-cryptic-home-entry{
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  pointer-events:auto!important;
}
.premium-discover.is-listening-space::after{content:""!important;display:block!important}
.device.ritual-listening>.persistent-glass-nav{
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
}
.premium-discover .premium-composer.is-editing{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  min-height:214px!important;
  margin:0!important;
  padding:22px 20px 15px!important;
  transform:none!important;
}
.premium-discover .premium-composer.is-editing .composer-footer{
  position:relative!important;
  inset:auto!important;
}
.premium-discover .premium-composer.is-editing .voice-control,
.premium-discover .premium-composer.is-editing .query-submit.query-submit-plain{
  position:relative!important;
  inset:auto!important;
  margin:0!important;
  transform:none!important;
}
.premium-discover .premium-composer.is-editing .voice-control{
  width:44px!important;
  height:44px!important;
  flex-basis:44px!important;
}
.premium-discover .premium-composer.is-editing .query-submit.query-submit-plain{
  min-width:112px!important;
  width:auto!important;
  height:44px!important;
  padding:0 17px!important;
}
.premium-composer .composer-guidance{
  max-width:124px!important;
  flex:1 1 auto!important;
}
.premium-composer .composer-actions{flex:0 0 auto!important}
.premium-discover .premium-composer .voice-control{
  width:44px!important;
  height:44px!important;
  flex-basis:44px!important;
}
.premium-composer .composer-meta{
  min-height:32px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}
.premium-composer .composer-meta-actions{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
}
.premium-composer .request-count{
  color:#777584!important;
  font-size:9px!important;
  font-variant-numeric:tabular-nums!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
  transition:color var(--motion-fast) var(--motion-curve)!important;
}
.premium-composer .request-count.is-at-limit{color:#efa9cb!important}
.premium-composer .query-save,
.premium-composer .query-clear{
  position:relative!important;
  min-width:44px!important;
  min-height:32px!important;
  padding:0 7px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#a6a1af!important;
  font-size:10px!important;
  font-weight:590!important;
  line-height:1!important;
}
.premium-composer .query-clear{
  inset:auto!important;
  width:auto!important;
  height:auto!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
}
.premium-composer .query-save::after,
.premium-composer .query-clear::after{content:"";position:absolute;inset:-6px -3px}
.premium-composer .query-save:focus-visible,.premium-composer .query-clear:focus-visible{
  outline:none!important;
  background:rgba(114,188,255,.08)!important;
  color:#e8e5ed!important;
}
@media (hover: hover) and (pointer: fine){.premium-composer .query-save:hover,.premium-composer .query-clear:hover{
  outline:none!important;
  background:rgba(114,188,255,.08)!important;
  color:#e8e5ed!important;
}}/* (29 October 2026) hover only for a real pointer: a finger leaves :hover on whatever it last touched (hub/docs/TASTE-INTRO-2026-10-29.md) */
.premium-composer .query-save.is-saved{
  background:rgba(112,189,255,.08)!important;
  color:#9edcff!important;
}
.premium-composer .query-save[hidden],
.premium-composer .query-clear[hidden]{display:none!important}
.premium-discover>.voice-error{
  margin:8px 4px 0!important;
  color:#f1b0d0!important;
  font-size:11px!important;
  line-height:1.35!important;
}
.premium-discover .brand-home[role="img"]{cursor:default!important;user-select:none!important}

/* Recent and Saved remain quiet, centred memory utilities. */
.discover-shortcuts{
  --shortcut-gap:clamp(22px,7vw,30px);
  height:56px!important;
  grid-template-columns:repeat(2,minmax(112px,124px))!important;
  justify-content:center!important;
  column-gap:var(--shortcut-gap)!important;
}
.discover-shortcuts button{
  min-height:44px!important;
  gap:10px!important;
  font-size:11.5px!important;
  font-weight:520!important;
  letter-spacing:-.005em!important;
  white-space:nowrap!important;
}
.discover-shortcuts svg{width:22px!important;height:22px!important}
.discover-shortcuts button+button::before{left:calc(var(--shortcut-gap)/-2)!important}

/* Film art remains genuine, with one continuous optical scrim so titles never
   compete with typography already printed on a poster. */
.discover-inspiration{padding-bottom:0!important}
.discover-inspiration .prompt-grid{padding-bottom:0!important}
.discover-inspiration>header span{
  color:#9f9aa6!important;
  font-size:7.5px!important;
  letter-spacing:.16em!important;
}
.discover-inspiration h2{
  font-size:18px!important;
  font-weight:650!important;
  letter-spacing:-.022em!important;
}
.discover-inspiration header button{
  position:relative!important;
  color:#c4a9ee!important;
  font-size:9.5px!important;
}
.discover-inspiration header button::after{
  content:"";
  position:absolute;
  inset:-12px -5px;
}
.discover-inspiration .prompt-card{
  height:112px!important;
  isolation:isolate!important;
  background-color:#030308!important;
  background-clip:padding-box!important;
}
.discover-inspiration .prompt-card.prompt-film-art{
  background-image:var(--prompt-art)!important;
  background-position:50% var(--prompt-y,20%)!important;
  background-size:var(--prompt-size,cover)!important;
  background-repeat:no-repeat!important;
}
.discover-inspiration .prompt-card.prompt-film-art .prompt-shade{
  inset:0!important;
  z-index:1!important;
  background:
    radial-gradient(circle at 14% 76%,rgba(2,2,7,.35),transparent 58%),
    linear-gradient(180deg,rgba(2,3,8,.08) 0%,rgba(2,3,8,.19) 42%,rgba(2,2,7,.83) 72%,#020207 100%)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.discover-inspiration .prompt-copy{
  z-index:2!important;
  inset:0!important;
  padding:14px 15px 13px!important;
  justify-content:flex-end!important;
  background:none!important;
  text-shadow:0 1px 3px #000,0 0 12px rgba(0,0,0,.78)!important;
}
.discover-inspiration .prompt-title{
  min-height:0!important;
  max-height:44px!important;
  color:#fff!important;
  font-size:11.5px!important;
  font-weight:650!important;
  line-height:1.25!important;
  -webkit-line-clamp:3!important;
}
.discover-inspiration .prompt-copy b{
  margin-top:7px!important;
  color:#dcedff!important;
  font-size:9px!important;
  font-weight:600!important;
  text-shadow:0 1px 3px #000!important;
}
.discover-inspiration .prompt-card::after{
  content:""!important;
  position:absolute!important;
  z-index:3!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  box-sizing:border-box!important;
  border:1px solid rgba(226,234,255,.07)!important;
  border-radius:inherit!important;
  background:transparent!important;
  box-shadow:inset 0 -1px 0 rgba(2,2,7,.94)!important;
  pointer-events:none!important;
}
/* A chosen inspiration keeps its place in the request without moving the cards. */
.premium-discover .discover-inspiration .prompt-card.is-request-selected::after{
  border-color:rgba(239,198,174,.68)!important;
  box-shadow:inset 0 0 0 1px rgba(239,198,174,.22),inset 0 1px 20px rgba(243,193,154,.12)!important;
  transition:border-color var(--motion-fast) var(--motion-curve);
}
.premium-discover .discover-inspiration .prompt-card.is-request-selected .prompt-copy b{color:#ffe0c2!important}
@media(prefers-reduced-motion:reduce){.premium-discover .discover-inspiration .prompt-card::after{transition:none!important}}
.device.manual-reduced-motion .premium-discover .discover-inspiration .prompt-card::after{transition:none!important}

/* Today’s Cryptic is the editorial feature that completes the lower field. */
.premium-discover>.daily-cryptic-home-entry{
  width:100%!important;
  min-height:86px!important;
  height:86px!important;
  margin:16px 0 8px!important;
  padding:10px 14px!important;
  grid-template-columns:42px minmax(0,1fr) 16px!important;
  gap:12px!important;
  border:1px solid rgba(128,196,255,.19)!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 8% 50%,rgba(77,169,237,.14),transparent 26%),
    linear-gradient(135deg,rgba(18,35,55,.88),rgba(25,19,48,.86) 58%,rgba(11,10,20,.94))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 15px 34px rgba(0,0,0,.28),0 0 24px rgba(79,139,224,.06)!important;
  color:#f7f6fa!important;
  opacity:1!important;
}
.premium-discover.friday-consumed-home>.discover-inspiration+.daily-cryptic-home-entry,
.premium-discover.friday-complete-home>.discover-inspiration+.daily-cryptic-home-entry{margin-top:22px!important}

/* When the software keyboard is open the persistent navigation is hidden.
   Its opaque footer mask must leave with it so the composer remains usable. */
.device.keyboard-open>.premium-discover.discover-v5::after{display:none!important}
.device.keyboard-open>.premium-discover{
  padding-bottom:max(24px,env(safe-area-inset-bottom,0px))!important;
  scroll-padding-bottom:max(24px,env(safe-area-inset-bottom,0px))!important;
}
/* The existing viewport owner supplies device-local geometry. Supported form
   screens scroll inside the visible area, not underneath the software keyboard.
   No re-render, competing animation, or change to the entered wording. */
.device.keyboard-open>.premium-discover,
.device.keyboard-open>.refinement-live,
.device.keyboard-open>.fingerprint-screen,
.device.keyboard-open>.collections-api-screen,
.device.keyboard-open>.friday-service-screen,
.device.keyboard-open>.collectible-share,
#device.keyboard-open>.feedback-draft{
  top:var(--request-viewport-top,0px)!important;
  bottom:auto!important;
  height:var(--request-viewport-height,100%)!important;
  min-height:0!important;
  max-height:var(--request-viewport-height,100%)!important;
  scroll-padding-block:12px!important;
  scroll-behavior:auto!important;
}
.premium-discover>.daily-cryptic-home-entry.is-complete{
  border-color:rgba(174,190,218,.12)!important;
  background:linear-gradient(135deg,rgba(22,28,39,.86),rgba(19,16,30,.9))!important;
  opacity:1!important;
}
.daily-cryptic-home-entry .daily-cryptic-glyph{
  width:42px!important;
  height:42px!important;
  border:0!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(91,190,255,.24),rgba(100,84,220,.09) 52%,transparent 73%)!important;
  box-shadow:none!important;
}
.daily-cryptic-home-entry .daily-cryptic-glyph .brand-mark{
  width:27px!important;
  height:27px!important;
  filter:drop-shadow(0 0 7px rgba(99,192,255,.68))!important;
}
.daily-cryptic-home-entry .daily-cryptic-copy{
  min-width:0!important;
  display:block!important;
}
.daily-cryptic-home-entry small{
  display:block!important;
  color:#93d3ff!important;
  font-size:7.5px!important;
  font-weight:720!important;
  letter-spacing:.15em!important;
}
.daily-cryptic-home-entry strong{
  display:block!important;
  margin-top:3px!important;
  font-size:14.5px!important;
  font-weight:650!important;
  line-height:1.14!important;
  letter-spacing:-.018em!important;
}
.daily-cryptic-home-entry p{
  margin:3px 0 0!important;
  color:#c0bcc7!important;
  font-size:9.75px!important;
  line-height:1.3!important;
}
.cryptic-clue-pips{
  display:flex!important;
  gap:4px!important;
  margin-top:5px!important;
}
.cryptic-clue-pips>i{
  width:11px!important;
  height:2.5px!important;
  border-radius:999px!important;
  background:rgba(143,157,184,.22)!important;
}
.cryptic-clue-pips>i.is-open{
  background:#80d5ff!important;
  box-shadow:0 0 6px rgba(107,199,255,.5)!important;
}
.daily-cryptic-home-entry>.daily-cryptic-chevron{
  color:#b7b3c1!important;
  font-size:18px!important;
}
.premium-discover.trip-critical-host.critical-engaged>.daily-cryptic-home-entry{
  opacity:0!important;
  pointer-events:none!important;
}

@media(max-height:760px){
  .premium-discover{--discover-nav-height:64px}
  .premium-discover>.app-header{height:calc(var(--discover-safe-top) + 63px)!important;padding-top:calc(var(--discover-safe-top) + 25px)!important}
  .premium-discover .brand-home .brand-mark{width:31px!important;height:31px!important}
  .premium-discover .profile-control{width:38px!important;height:38px!important}
  .premium-discover.friday-consumed-home>.discover-heading,
  .premium-discover.friday-complete-home>.discover-heading{margin-top:10px!important}
  .premium-composer{min-height:176px!important}
  .premium-composer .composer-footer{height:52px!important;padding-top:8px!important}
  .premium-discover .premium-composer .voice-control,
  .premium-discover .premium-composer.is-editing .voice-control{width:44px!important;height:44px!important;flex-basis:44px!important}
  .premium-composer .query-submit.query-submit-plain,
  .premium-discover .premium-composer.is-editing .query-submit.query-submit-plain{min-width:100px!important;height:44px!important;padding:0 14px!important}
  .premium-discover .premium-composer.is-editing{min-height:176px!important;padding:17px 16px 12px!important}
  .discover-shortcuts{height:50px!important;margin:12px 0 16px!important}
  .discover-shortcuts button{font-size:10.5px!important}
  .discover-shortcuts svg{width:20px!important;height:20px!important}
  .discover-inspiration .prompt-card{height:92px!important}
  .discover-inspiration .prompt-copy{padding:11px 12px!important}
  .discover-inspiration .prompt-title{font-size:10.5px!important}
  .discover-inspiration .prompt-copy b{font-size:8.5px!important}
  .premium-discover>.daily-cryptic-home-entry{height:82px!important;min-height:82px!important;margin-top:14px!important;padding:8px 12px!important}
  .premium-discover.friday-consumed-home>.discover-inspiration+.daily-cryptic-home-entry,
  .premium-discover.friday-complete-home>.discover-inspiration+.daily-cryptic-home-entry{margin-top:20px!important}
  .daily-cryptic-home-entry p{font-size:9.25px!important}
  .daily-cryptic-home-entry strong{font-size:12.5px!important}
  .daily-cryptic-home-entry .daily-cryptic-glyph{width:38px!important;height:38px!important}
}
@media(max-width:340px) and (max-height:600px){
  .premium-discover.friday-consumed-home>.discover-heading,
  .premium-discover.friday-complete-home>.discover-heading{margin-top:8px!important}
  .premium-discover.friday-consumed-home>.discover-inspiration+.daily-cryptic-home-entry,
  .premium-discover.friday-complete-home>.discover-inspiration+.daily-cryptic-home-entry{margin-top:18px!important}
}
@media(max-height:700px){
  .discover-inspiration .prompt-card{height:86px!important}
  .discover-inspiration .prompt-copy{padding:9px 11px!important}
  .discover-inspiration .prompt-title{font-size:10.5px!important}
  .discover-inspiration .prompt-copy b{margin-top:6px!important;font-size:8.5px!important}
  .premium-discover>.daily-cryptic-home-entry{height:80px!important;min-height:80px!important}
  .daily-cryptic-home-entry p{display:-webkit-box!important;overflow:hidden!important;white-space:normal!important;text-overflow:clip!important;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .cryptic-clue-pips{margin-top:3px!important}
}

/* Taller iPhones distribute their surplus height through the editorial story
   instead of leaving an empty lower field. Friday-present screens retain the
   tighter rhythm because the invitation already supplies that extra weight. */
@media(min-height:880px){
  .premium-discover.friday-consumed-home>.discover-heading,
  .premium-discover.friday-complete-home>.discover-heading{margin-top:28px!important;margin-bottom:26px!important}
  .premium-discover.friday-consumed-home>.discover-shortcuts,
  .premium-discover.friday-complete-home>.discover-shortcuts{margin:24px 0 31px!important}
  .premium-discover.friday-consumed-home>.discover-inspiration>header,
  .premium-discover.friday-complete-home>.discover-inspiration>header{margin-bottom:16px!important}
  .premium-discover.friday-consumed-home .discover-inspiration .prompt-card,
  .premium-discover.friday-complete-home .discover-inspiration .prompt-card{height:126px!important}
  .premium-discover.friday-consumed-home>.daily-cryptic-home-entry,
  .premium-discover.friday-complete-home>.daily-cryptic-home-entry{height:98px!important;min-height:98px!important;margin-top:28px!important;padding:12px 16px!important}
  .premium-discover.friday-consumed-home .daily-cryptic-home-entry strong,
  .premium-discover.friday-complete-home .daily-cryptic-home-entry strong{font-size:14.5px!important}
  .premium-discover.friday-consumed-home .daily-cryptic-home-entry p,
  .premium-discover.friday-complete-home .daily-cryptic-home-entry p{font-size:10px!important}
}
.critical-request-capsule{height:auto!important;min-height:62px!important}
.critical-request-capsule p{
  display:-webkit-box!important;
  overflow:hidden!important;
  white-space:normal!important;
  text-overflow:clip!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  font-size:12px!important;
  line-height:1.34!important;
}
.critical-status{
  transition:top var(--motion-slow) var(--completion-ease),opacity var(--motion-normal) var(--motion-curve),transform var(--motion-slow) var(--completion-ease)!important;
}
.trip-phase-entry .critical-status,
.trip-phase-gathering .critical-status,
.trip-phase-charging .critical-status,
.trip-phase-compressed .critical-status,
.trip-phase-waiting .critical-status{top:424px!important}
.trip-phase-forming .critical-status,
.trip-phase-ready .critical-status,
.trip-phase-revealing .critical-status{top:594px!important}
.trip-phase-gathering .critical-status{animation:completionStatusGather var(--motion-normal) var(--motion-curve) both}
.trip-phase-charging .critical-status{animation:completionStatusCharge var(--motion-normal) var(--motion-curve) both}
.trip-phase-compressed .critical-status{animation:completionStatusCompress var(--motion-normal) var(--motion-curve) both}
.trip-phase-waiting .critical-status{animation:completionStatusWait var(--motion-normal) var(--motion-curve) both}
.trip-phase-forming .critical-status{animation:completionStatusForm var(--motion-normal) var(--motion-curve) .08s both}
.sensory-wave.formation::before{
  width:216px;height:1px;border:0;border-radius:0;
  background:linear-gradient(90deg,transparent,rgba(123,216,255,.68) 26%,rgba(255,255,255,.94) 50%,rgba(224,112,255,.62) 74%,transparent);
  box-shadow:0 0 8px rgba(130,220,255,.56),0 0 22px rgba(195,102,255,.3);
  opacity:0;animation:completionFormationLens var(--motion-slow) var(--completion-ease) both;
}
.critical-status>span{font-size:8px!important}
.critical-status h1{font-size:21px!important;line-height:1.15!important}
.critical-status p{font-size:11px!important;line-height:1.45!important}
.critical-card-front strong{
  display:-webkit-box!important;
  width:100%;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  font-size:11.5px!important;
  line-height:1.16!important;
}
.critical-card-front small{font-size:8.5px!important}
.critical-card-front em{
  display:-webkit-box!important;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  font-size:7.5px!important;
  line-height:1.3!important;
}
.card100-scene.trip-phase-settled .critical-card:not(.rank-1) .critical-card-front strong{font-size:10.5px!important}
.card100-scene.trip-phase-ready .critical-card.is-revealed .critical-card-front em{display:none!important}
.card100-scene .critical-card[aria-disabled="true"]{pointer-events:none!important;cursor:default!important}

/* The recommendation engine is an optical synthesis chamber, not an orb. */
.trip-critical-layer .critical-orb-stage,
.trip-critical-layer .critical-orb,
.trip-critical-layer>.orb100-transfer{display:none!important}

.critical-engine-stage{
  position:absolute;
  z-index:6;
  left:50%;
  top:142px;
  width:322px;
  height:232px;
  transform:translateX(-50%);
  transform-origin:50% 48%;
  perspective:1000px;
  pointer-events:none;
  opacity:1;
  transition:transform var(--motion-ceremony) var(--completion-spring),opacity var(--motion-slow) var(--motion-curve);
}
.trip-phase-entry .critical-engine-stage{
  transform:translate(calc(-50% + var(--critical-engine-x,0px)),var(--critical-engine-y,90px)) scale(.08);
  opacity:0;
}
.trip-phase-gathering .critical-engine-stage{
  transform:translateX(-50%) scale(.94);
  opacity:.86;
}
.trip-phase-charging .critical-engine-stage{transform:translateX(-50%) scale(1.02);opacity:1;filter:saturate(1.24) brightness(1.1)}
.trip-phase-compressed .critical-engine-stage{transform:translateX(-50%) scale(.82);opacity:.94;filter:saturate(1.42) brightness(1.2)}
.trip-phase-waiting .critical-engine-stage{transform:translateX(-50%) scale(.8);opacity:.78;filter:saturate(1.24) brightness(1.04)}
.trip-phase-forming .critical-engine-stage{transform:translateX(-50%) translateY(-34px) scale(.61);opacity:.16;filter:saturate(.86) brightness(.76)}
.trip-phase-ready .critical-engine-stage,
.trip-phase-revealing .critical-engine-stage{
  transform:translateX(-50%) translateY(-38px) scale(.64);
  z-index:4;
  visibility:hidden;
  opacity:0;
  filter:none;
}
.trip-phase-settled .critical-engine-stage{opacity:0;transform:translateX(-50%) translateY(-56px) scale(.48)}
.trip-phase-ready .critical-engine-stage *,
.trip-phase-revealing .critical-engine-stage *,
.trip-phase-settled .critical-engine-stage *{animation:none!important;visibility:hidden!important;opacity:0!important}

.critical-engine-halo{
  position:absolute;inset:1px 18px 12px;border-radius:50%;
  background:radial-gradient(circle,rgba(137,220,255,.15),rgba(103,91,255,.08) 36%,rgba(224,105,255,.035) 57%,transparent 73%);
  filter:blur(17px);opacity:.42;transform:scale(.78);
  transition:opacity var(--motion-slow) var(--motion-curve),transform var(--motion-slow) var(--completion-ease);
}
.trip-phase-charging .critical-engine-halo{opacity:.88;transform:scale(1.06);filter:blur(20px)}
.trip-phase-compressed .critical-engine-halo{opacity:.96;transform:scale(.73);filter:blur(12px)}
.trip-phase-forming .critical-engine-halo{opacity:.22;transform:scale(.38);filter:blur(9px)}
.critical-engine-orbits{position:absolute;left:50%;top:92px;width:224px;height:150px;transform:translate(-50%,-50%);transition:transform var(--motion-slow) var(--completion-spring),opacity var(--motion-slow) var(--motion-curve);opacity:.52}
.critical-engine-orbits>i{position:absolute;inset:0;border:1px solid rgba(137,213,255,.11);border-radius:50%;transform:rotate(14deg);box-shadow:0 0 16px rgba(87,176,255,.055)}
.critical-engine-orbits>i:nth-child(2){inset:17px 27px;transform:rotate(-28deg);border-color:rgba(176,133,255,.13)}
.critical-engine-orbits>i:nth-child(3){inset:37px 57px;transform:rotate(46deg);border-color:rgba(236,127,255,.15)}
.trip-phase-gathering .critical-engine-orbits{animation:completionOrbitSlow 10s linear infinite}
.trip-phase-charging .critical-engine-orbits{opacity:.88;animation:completionOrbitCharge 4.6s linear infinite}
.trip-phase-compressed .critical-engine-orbits{opacity:.72;transform:translate(-50%,-50%) scale(.72) rotate(18deg)}
.trip-phase-waiting .critical-engine-orbits{opacity:.54;animation:completionOrbitWait 3.4s var(--motion-breathe) infinite}
.trip-phase-forming .critical-engine-orbits{visibility:hidden;opacity:0;transform:translate(-50%,-50%) scale(.34) rotate(32deg)}

.critical-engine-aperture{
  position:absolute;
  left:50%;
  top:8px;
  width:196px;
  height:178px;
  transform:translateX(-50%) rotateX(57deg) rotateZ(-5deg);
  transform-style:preserve-3d;
  filter:drop-shadow(0 26px 32px rgba(0,0,0,.58));
  transition:opacity var(--motion-normal) var(--motion-curve);
}
.critical-engine-aperture>i{
  position:absolute;
  top:7px;
  bottom:7px;
  width:54px;
  border:1px solid rgba(152,218,255,.16);
  border-radius:9px;
  background:linear-gradient(155deg,rgba(185,235,255,.10),rgba(98,102,255,.045) 43%,rgba(219,105,255,.07));
  box-shadow:inset 0 1px rgba(255,255,255,.13),inset 0 -24px 38px rgba(4,4,13,.5),0 0 22px rgba(86,180,255,.07);
  transform-origin:50% 100%;
  opacity:.72;
}
.critical-engine-aperture>i:nth-child(1){left:2px;transform:translateZ(-16px) rotateY(18deg)}
.critical-engine-aperture>i:nth-child(2){left:71px;transform:translateZ(8px);border-color:rgba(211,229,255,.24)}
.critical-engine-aperture>i:nth-child(3){right:2px;transform:translateZ(-16px) rotateY(-18deg)}
.trip-phase-gathering .critical-engine-aperture>i:nth-child(1){animation:completionPaneGather var(--motion-ceremony) var(--completion-ease) 1 both}
.trip-phase-gathering .critical-engine-aperture>i:nth-child(2),.trip-phase-gathering .critical-engine-aperture>i:nth-child(3){opacity:.34}
.trip-phase-charging .critical-engine-aperture>i:nth-child(1){opacity:.88;border-color:rgba(154,224,255,.32);filter:brightness(1.16)}
.trip-phase-charging .critical-engine-aperture>i:nth-child(2){animation:completionPaneCharge var(--motion-slow) var(--motion-curve) 2 alternate}
.trip-phase-charging .critical-engine-aperture>i:nth-child(3){opacity:.48}
.trip-phase-compressed .critical-engine-aperture>i:nth-child(1){transform:translateX(64px) translateZ(-8px) rotateY(4deg);opacity:.8}
.trip-phase-compressed .critical-engine-aperture>i:nth-child(2){transform:translateZ(22px) scaleX(.34);filter:brightness(1.7)}
.trip-phase-compressed .critical-engine-aperture>i:nth-child(3){transform:translateX(-64px) translateZ(-8px) rotateY(-4deg);opacity:.9;filter:brightness(1.2)}
.trip-phase-waiting .critical-engine-aperture>i:nth-child(1){transform:translateX(64px) translateZ(-8px) rotateY(4deg)}
.trip-phase-waiting .critical-engine-aperture>i:nth-child(2){transform:translateZ(22px) scaleX(.34);filter:brightness(1.45)}
.trip-phase-waiting .critical-engine-aperture>i:nth-child(3){transform:translateX(-64px) translateZ(-8px) rotateY(-4deg)}
.trip-phase-forming .critical-engine-aperture{visibility:hidden;opacity:0;filter:none}

.critical-engine-core{position:absolute;z-index:5;left:50%;top:91px;width:58px;height:58px;transform:translate(-50%,-50%) rotateX(58deg);border-radius:50%;border:1px solid rgba(174,229,255,.2);box-shadow:0 0 19px rgba(94,199,255,.14),inset 0 0 17px rgba(130,92,255,.13);transition:transform var(--motion-slow) var(--completion-spring),opacity var(--motion-slow) var(--motion-curve)}
.critical-engine-core>i{position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(213,145,255,.25)}
.critical-engine-core>i:nth-child(2){inset:17px;border-color:rgba(222,247,255,.72);box-shadow:0 0 9px #78dfff,0 0 17px rgba(222,105,255,.42)}
.critical-engine-core>b{position:absolute;left:50%;top:50%;width:5px;height:5px;transform:translate(-50%,-50%);border-radius:50%;background:#eefcff;box-shadow:0 0 9px #fff,0 0 19px #65d8ff,0 0 33px rgba(227,103,255,.55)}
.trip-phase-gathering .critical-engine-core{animation:completionCoreListen var(--motion-ceremony) var(--motion-curve) 1}
.trip-phase-charging .critical-engine-core{filter:brightness(1.28);transform:translate(-50%,-50%) rotateX(58deg) scale(1.18);animation:completionCoreCharge var(--motion-slow) var(--motion-curve) 2 alternate}
.trip-phase-compressed .critical-engine-core{filter:brightness(1.65);transform:translate(-50%,-50%) rotateX(58deg) scale(.72)}
.trip-phase-waiting .critical-engine-core{animation:completionCoreWait 2.4s var(--motion-breathe) infinite}
.trip-phase-forming .critical-engine-core{visibility:hidden;opacity:0;transform:translate(-50%,-50%) rotateX(58deg) scale(.24)}

.engine-scan{
  position:absolute;
  z-index:4;
  left:-12px;
  right:-12px;
  top:8px;
  height:1px;
  background:linear-gradient(90deg,transparent,#8edcff 28%,#fff 50%,#d99aff 72%,transparent);
  box-shadow:0 0 9px rgba(133,218,255,.8),0 0 20px rgba(196,112,255,.25);
  opacity:0;
  animation:none;
}
.trip-phase-gathering .engine-scan{animation:completionScan var(--motion-ceremony) var(--completion-ease) .08s 1 both}
.trip-phase-charging .engine-scan{animation:completionScan var(--motion-slow) var(--completion-ease) .08s 2 both}
.trip-phase-compressed .engine-scan,.trip-phase-waiting .engine-scan{top:75px;opacity:.86;transform:scaleX(.34);animation:none}
.engine-axis{
  position:absolute;
  z-index:3;
  left:50%;
  top:-24px;
  width:1px;
  height:205px;
  background:linear-gradient(transparent,rgba(160,225,255,.7) 24%,rgba(235,244,255,.9) 50%,rgba(225,116,255,.34) 73%,transparent);
  box-shadow:0 0 11px rgba(108,205,255,.45);
  opacity:.42;
}
.critical-engine-signals{
  position:absolute;
  inset:4px 12px 19px;
  border-top:1px solid rgba(155,217,255,.08);
  border-bottom:1px solid rgba(218,130,255,.07);
  transform:rotate(-3deg);
}
.critical-engine-signals>i{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#dff7ff;
  box-shadow:0 0 7px #73d6ff,0 0 15px rgba(214,103,255,.55);
  opacity:.12;
  animation:none;
}
.critical-engine-signals>i:nth-child(1){left:8%;top:61%;animation-delay:-.4s}
.critical-engine-signals>i:nth-child(2){left:23%;top:18%;animation-delay:-1.6s}
.critical-engine-signals>i:nth-child(3){left:52%;top:76%;animation-delay:-2.1s}
.critical-engine-signals>i:nth-child(4){right:19%;top:27%;animation-delay:-.9s}
.critical-engine-signals>i:nth-child(5){right:5%;top:58%;animation-delay:-2.5s}
.trip-phase-gathering .critical-engine-signals>i:nth-child(-n+2){animation:completionSignal var(--motion-ceremony) var(--motion-curve) 1 both}
.trip-phase-charging .critical-engine-signals>i{animation:completionSignal var(--motion-slow) var(--motion-curve) 2 alternate}
.trip-phase-compressed .critical-engine-signals,.trip-phase-waiting .critical-engine-signals{transform:rotate(-3deg) scale(.68);opacity:.72;transition:transform var(--motion-slow) var(--completion-spring),opacity var(--motion-normal) var(--motion-curve)}
.trip-phase-forming .critical-engine-signals{transform:rotate(-3deg) scale(.45);opacity:.2}
.critical-engine-readout{
  position:absolute;
  left:50%;
  bottom:7px;
  width:112px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  transform:translateX(-50%);
}
.critical-engine-readout>span{height:2px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.critical-engine-readout>span::after{content:"";display:block;width:100%;height:100%;background:linear-gradient(90deg,#61caff,#806fff,#dc78ef);transform:scaleX(0);transform-origin:left;animation:none;transition:transform var(--motion-slow) var(--completion-ease)}
.trip-phase-gathering .critical-engine-readout>span:nth-child(1)::after,
.trip-phase-charging .critical-engine-readout>span:nth-child(2)::after,
.trip-phase-compressed .critical-engine-readout>span:nth-child(3)::after{transform:scaleX(.58);animation:completionReadoutCurrent 1.45s var(--completion-ease) infinite}
.trip-phase-charging .critical-engine-readout>span:nth-child(1)::after,
.trip-phase-compressed .critical-engine-readout>span:nth-child(1)::after,
.trip-phase-compressed .critical-engine-readout>span:nth-child(2)::after,
.trip-phase-ready .critical-engine-readout>span::after,
.trip-phase-revealing .critical-engine-readout>span::after,
.trip-phase-forming .critical-engine-readout>span::after,
.trip-phase-waiting .critical-engine-readout>span::after{transform:scaleX(1)}

/* Three one-shot strikes create the sealed cards, then the scene becomes quiet. */
.trip-critical-layer .critical-energy-paths{
  z-index:7!important;
  left:50%!important;
  top:247px!important;
  width:300px!important;
  height:132px!important;
  transform:translateX(-50%)!important;
  display:block!important;
  opacity:0!important;
  pointer-events:none!important;
}
.trip-critical-layer .critical-energy-paths>i{
  position:absolute!important;
  left:50%!important;
  top:0!important;
  width:1px!important;
  height:128px!important;
  transform-origin:50% 0!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(100,211,255,.85) 19%,rgba(126,99,255,.58) 54%,rgba(229,105,255,.16) 80%,transparent)!important;
  clip-path:polygon(0 0,100% 0,100% 9%,0 15%,100% 25%,0 38%,100% 51%,0 66%,100% 82%,0 100%)!important;
  filter:drop-shadow(0 0 5px #82ddff) drop-shadow(0 0 12px rgba(221,105,255,.55))!important;
}
.trip-critical-layer .critical-energy-paths>i:nth-child(1){transform:rotate(42deg)!important}
.trip-critical-layer .critical-energy-paths>i:nth-child(2){transform:rotate(0)!important}
.trip-critical-layer .critical-energy-paths>i:nth-child(3){transform:rotate(-42deg)!important}
.trip-phase-forming .critical-energy-paths{opacity:1!important;animation:none!important}
.trip-phase-forming .critical-energy-paths>i{animation:completionCardStrike var(--motion-ceremony) var(--completion-ease) both}
.trip-phase-forming .critical-energy-paths>i:nth-child(1){animation-delay:.06s}
.trip-phase-forming .critical-energy-paths>i:nth-child(3){animation-delay:.2s}
.trip-phase-forming .critical-energy-paths>i:nth-child(2){animation-delay:.34s}
.trip-phase-settled .critical-energy-paths{display:none!important}

.trip-phase-entry .critical-card-stage,
.trip-phase-gathering .critical-card-stage,
.trip-phase-charging .critical-card-stage,
.trip-phase-compressed .critical-card-stage,
.trip-phase-waiting .critical-card-stage{opacity:0!important;filter:blur(8px) saturate(.7)!important;pointer-events:none!important}
.trip-phase-forming .critical-card-stage{opacity:1!important;pointer-events:none!important}
.trip-phase-forming .critical-card{animation:completionCardMaterialise var(--motion-slow) var(--completion-spring) both}
.trip-phase-forming .critical-card.rank-2{animation-delay:.04s}
.trip-phase-forming .critical-card.rank-1{animation-delay:.18s}
.trip-phase-forming .critical-card.rank-3{animation-delay:.32s}
.trip-phase-ready .critical-card-stage{animation:none}
.trip-phase-ready .critical-status{animation:completionStatusReady var(--motion-normal) var(--motion-curve) .68s both}

.trip-critical-layer .critical-status>span{color:#92dbff!important;letter-spacing:.19em!important}
.trip-phase-ready .critical-status>span{color:#c9b5ff!important}

/* Public recommendation surfaces remain concise. */
.reasoning-sheet,.reasoning-scrim,.critical-reasoning-sheet,.critical-reasoning-scrim,
.reasoning-disclosure,.reasoning-detail{display:none!important}
.critical-result-toolbar{grid-template-columns:repeat(3,1fr)!important}
.critical-results>.eyebrow{font-size:8px!important}
.critical-understood>span{font-size:7.5px!important}
.critical-understood>p{font-size:11px!important;line-height:1.42!important}
.critical-film-cta{font-size:11.5px!important}
.critical-result-toolbar button i{width:17px!important;height:17px!important}
.critical-result-toolbar button span{font-size:10px!important}
.device.manual-large-text .critical-request-capsule p{font-size:14px!important}
.device.manual-large-text .critical-status h1{font-size:24px!important}
.device.manual-large-text .critical-status p{font-size:13px!important}
.device.manual-large-text .critical-card-front strong{font-size:13px!important}
.device.manual-large-text .critical-card-front small{font-size:10px!important}
.device.manual-large-text .critical-understood>p{font-size:13px!important}
.device.manual-large-text .critical-result-toolbar button span{font-size:11px!important}

@keyframes completionPaneGather{to{transform:translateZ(14px) rotateY(0deg);border-color:rgba(176,229,255,.28);opacity:.92}}
@keyframes completionPaneCharge{to{filter:brightness(1.35);box-shadow:inset 0 1px rgba(255,255,255,.19),0 0 29px rgba(103,197,255,.16)}}
@keyframes completionScan{0%{transform:translateY(0);opacity:0}12%{opacity:.72}76%{opacity:.55}100%{transform:translateY(142px);opacity:0}}
@keyframes completionSignal{0%,100%{opacity:.12;transform:scale(.65)}48%{opacity:.8;transform:scale(1.25)}}
@keyframes completionReadout{0%{transform:scaleX(.08)}55%{transform:scaleX(.82)}100%{transform:scaleX(.18)}}
@keyframes completionReadoutCurrent{0%,100%{transform:scaleX(.42)}50%{transform:scaleX(1)}}
@keyframes completionCardStrikes{0%{opacity:0;clip-path:inset(0 0 100%)}16%{opacity:1}68%{opacity:.86;clip-path:inset(0)}100%{opacity:0;clip-path:inset(0)}}
@keyframes completionCardsArrive{from{opacity:0;filter:blur(10px) saturate(.65)}to{opacity:1;filter:none}}
@keyframes completionStatusReady{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes completionStatusGather{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes completionStatusCharge{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes completionStatusCompress{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes completionStatusWait{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes completionStatusForm{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes completionFormationLens{0%{opacity:0;scale:.12 1}28%{opacity:.95;scale:.56 1}100%{opacity:0;scale:1.08 1}}
@keyframes completionOrbitSlow{to{rotate:360deg}}
@keyframes completionOrbitCharge{to{rotate:-360deg}}
@keyframes completionOrbitWait{50%{opacity:.76;scale:1.035}}
@keyframes completionCoreListen{0%{opacity:.28;scale:.68}65%{opacity:1;scale:1.08}100%{opacity:.86;scale:1}}
@keyframes completionCoreCharge{to{filter:brightness(1.55) drop-shadow(0 0 12px rgba(107,216,255,.45))}}
@keyframes completionCoreWait{50%{opacity:.62;filter:brightness(1.22)}}
@keyframes completionCardStrike{0%{opacity:0;clip-path:inset(0 0 100%)}18%{opacity:1}68%{opacity:.92;clip-path:inset(0)}100%{opacity:0;clip-path:inset(0)}}
@keyframes completionCardMaterialise{
  0%{opacity:0;translate:0 18px;clip-path:inset(0 49.6% 100% 49.6% round 22px);filter:brightness(2.2) blur(1px)}
  24%{opacity:.96;clip-path:inset(0 49.2% 0 49.2% round 22px);filter:brightness(2.05) blur(.35px)}
  74%{opacity:1;clip-path:inset(0 0 0 0 round 22px);filter:brightness(1.16)}
  100%{opacity:1;translate:0 0;clip-path:inset(0 0 0 0 round 22px);filter:none}
}

@media(max-height:760px){
  .critical-engine-stage{top:118px;transform:translateX(-50%) scale(.84)}
  .trip-phase-ready .critical-engine-stage,.trip-phase-revealing .critical-engine-stage{transform:translateX(-50%) translateY(-35px) scale(.55)}
  .trip-critical-layer .critical-energy-paths{top:222px!important;height:118px!important}
  .trip-phase-entry .critical-status,
  .trip-phase-gathering .critical-status,
  .trip-phase-charging .critical-status,
  .trip-phase-compressed .critical-status,
  .trip-phase-waiting .critical-status{top:368px!important}
  .trip-phase-forming .critical-status,
  .trip-phase-ready .critical-status,
  .trip-phase-revealing .critical-status{top:510px!important}
}

@media(prefers-reduced-motion:reduce){
  .critical-engine-stage,.critical-engine-halo,.critical-engine-orbits,.critical-engine-core,.critical-engine-aperture>i,.engine-scan,.critical-engine-signals>i,.critical-engine-readout>span::after,.critical-status,.trip-phase-forming .critical-energy-paths,.trip-phase-forming .critical-card{animation:none!important;transition-duration:var(--motion-fast)!important}
  .trip-phase-forming .critical-energy-paths{display:none!important}
}
.device.manual-reduced-motion .critical-engine-stage,
.device.manual-reduced-motion .critical-engine-halo,
.device.manual-reduced-motion .critical-engine-orbits,
.device.manual-reduced-motion .critical-engine-core,
.device.manual-reduced-motion .critical-engine-aperture>i,
.device.manual-reduced-motion .engine-scan,
.device.manual-reduced-motion .critical-engine-signals>i,
.device.manual-reduced-motion .critical-engine-readout>span::after,
.device.manual-reduced-motion .critical-status,
.device.manual-reduced-motion .trip-phase-forming .critical-card{animation:none!important;transition-duration:var(--motion-fast)!important}
.device.manual-reduced-motion .trip-phase-forming .critical-energy-paths{display:none!important}

/* Search result crescendo and settled cinema shelf ------------------------
   The same live logo, cards and film data resolve into the approved result
   composition. Container units keep the hierarchy tied to the simulated or
   physical iPhone rather than to the desktop browser around it. */
.premium-discover.trip-critical-host{container-type:inline-size;container-name:trip-device}
.trip-critical-layer .critical-header{
  top:var(--critical-header-y,28px)!important;
  height:44px!important;
  grid-template-columns:44px 1fr 44px!important;
}
.trip-critical-layer .critical-header>.circle-control{width:42px!important;height:42px!important}
.trip-critical-layer .critical-brand-lockup{gap:10px!important;opacity:1!important}
.trip-critical-layer .critical-brand-lockup .brand-mark{width:35px!important;height:35px!important;filter:drop-shadow(0 0 7px rgba(125,210,255,.62))!important}
.trip-critical-layer .critical-brand-lockup .wordmark{width:92px!important;height:auto!important;filter:drop-shadow(0 0 16px rgba(91,180,255,.22))}
.trip-critical-layer .critical-brand-lockup::before{inset:-17px -28px!important;background:radial-gradient(ellipse,rgba(var(--critical-blue),.17),transparent 70%)!important}
.trip-critical-layer.is-live .critical-request-capsule{
  top:var(--critical-request-settled-y,91px)!important;
  min-height:58px!important;
  height:var(--critical-request-settled-h,60px)!important;
  border-radius:20px!important;
  padding:12px 17px!important;
}
.trip-critical-layer .critical-request-capsule::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(110,211,255,.7),rgba(208,111,255,.45),transparent);opacity:0;transform:scaleX(.2);transition:opacity var(--motion-normal) var(--motion-curve),transform var(--motion-ceremony) var(--completion-ease)}
.trip-phase-gathering .critical-request-capsule::after{opacity:.55;transform:scaleX(.72)}
.trip-phase-charging .critical-request-capsule::after{opacity:.9;transform:scaleX(1)}
.trip-phase-compressed .critical-request-capsule::after,.trip-phase-waiting .critical-request-capsule::after{opacity:.25;transform:scaleX(.42)}
.trip-phase-forming .critical-request-capsule::after{opacity:0}

.critical-results-heading{
  position:absolute;z-index:7;left:20px;right:20px;top:var(--critical-result-title-y,174px);
  text-align:center;opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity var(--motion-slow) .16s var(--motion-curve),transform var(--motion-slow) .16s var(--completion-ease);
}
.trip-phase-settled .critical-results-heading{opacity:1;transform:none}
.critical-results-heading>.eyebrow{display:block;color:#8edcff;font-size:9px;font-weight:740;letter-spacing:.22em;text-shadow:0 0 14px rgba(105,205,255,.22)}
.critical-results-heading>h1{margin:7px 0 0;color:#f7f5fb;font-size:clamp(38px,10.25cqw,44px);font-weight:590;line-height:.98;letter-spacing:-.047em;text-wrap:balance}

.card100-scene .critical-card{
  transition:left var(--motion-slow) var(--completion-spring),right var(--motion-slow) var(--completion-spring),top var(--motion-slow) var(--completion-spring),width var(--motion-slow) var(--completion-spring),height var(--motion-slow) var(--completion-spring),opacity var(--motion-slow) var(--motion-curve),transform var(--motion-slow) var(--completion-spring) !important;
}
.card100-scene.trip-phase-settled{
  background:radial-gradient(ellipse at 50% 43%,rgba(126,75,222,.14),transparent 29%),radial-gradient(circle at 50% 25%,rgba(73,128,255,.075),transparent 26%),linear-gradient(180deg,#07070d,#050509 60%,#040407)!important;
}
.card100-scene.trip-phase-settled .critical-engine-stage{opacity:0!important;pointer-events:none!important}
.card100-scene.trip-phase-settled .critical-card-stage{
  top:var(--critical-result-shelf-y,249px)!important;
  height:327px!important;
  transform:none!important;
  overflow:clip!important;
  overflow-clip-margin:72px!important;
}
.card100-scene.trip-phase-settled .critical-card.rank-1{
  left:50%!important;right:auto!important;top:0!important;
  width:38.15%!important;height:auto!important;aspect-ratio:.5!important;
  transform:translateX(-50%) translateY(-3px) translateZ(64px)!important;
  transform-origin:50% 54%!important;z-index:7!important;opacity:1!important;
  filter:drop-shadow(0 28px 42px rgba(0,0,0,.64)) drop-shadow(0 0 31px rgba(var(--card100-pink),.24)) saturate(1.03)!important;
}
.card100-scene.trip-phase-settled .critical-card.rank-3{
  left:clamp(8px,2.3cqw,10px)!important;right:auto!important;top:var(--critical-result-side-y,40px)!important;
  width:25.1%!important;height:auto!important;aspect-ratio:.407!important;
  transform:rotateY(3deg)!important;transform-origin:100% 55%!important;z-index:3!important;opacity:.95!important;
  filter:saturate(.9) brightness(.88) drop-shadow(0 19px 31px rgba(0,0,0,.56))!important;
}
.card100-scene.trip-phase-settled .critical-card.rank-2{
  left:auto!important;right:clamp(8px,2.3cqw,10px)!important;top:var(--critical-result-side-y,40px)!important;
  width:25.1%!important;height:auto!important;aspect-ratio:.407!important;
  transform:rotateY(-3deg)!important;transform-origin:0 55%!important;z-index:3!important;opacity:.95!important;
  filter:saturate(.9) brightness(.88) drop-shadow(0 19px 31px rgba(0,0,0,.56))!important;
}
.card100-scene.trip-phase-settled .critical-card-front{
  justify-content:flex-end!important;
  background-image:linear-gradient(180deg,rgba(3,3,8,.01) 20%,rgba(3,3,8,.08) 39%,rgba(3,3,8,.42) 61%,rgba(2,2,7,.94) 82%,#030307 100%),var(--critical-poster)!important;
  background-size:cover!important;background-position:center!important;
}
.card100-scene.trip-phase-settled .critical-card.rank-1 .critical-card-front{padding:19px 15px!important;border-radius:24px!important}
.card100-scene.trip-phase-settled .critical-card:not(.rank-1) .critical-card-front{padding:14px 11px!important;border-radius:21px!important}
.card100-scene.trip-phase-settled .critical-card.rank-1,.card100-scene.trip-phase-settled .critical-card.rank-1 .critical-card-back,.card100-scene.trip-phase-settled .critical-card.rank-1 .critical-card-inner{border-radius:24px!important}
.card100-scene.trip-phase-settled .critical-card-front strong{display:-webkit-box!important;overflow:hidden!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important;width:100%!important;color:#fff!important;font-size:12.5px!important;font-weight:660!important;line-height:1.12!important;letter-spacing:-.025em!important;text-shadow:0 2px 12px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.82)!important;text-wrap:balance}
.card100-scene.trip-phase-settled .critical-card:not(.rank-1) .critical-card-front strong{font-size:11.5px!important}
.card100-scene.trip-phase-settled .critical-card.rank-1 .critical-card-front strong{font-size:15px!important;line-height:1.1!important}
.card100-scene.trip-phase-settled .critical-card-front small{min-height:22px!important;margin-top:9px!important;padding:5px 8px!important;font-size:8.4px!important;line-height:1!important;letter-spacing:.02em!important}
.card100-scene.trip-phase-settled .critical-card.rank-1 .critical-card-front small{min-height:25px!important;padding:6px 10px!important;font-size:9.2px!important}
.card100-scene.trip-phase-settled .critical-card-front em{display:none!important}
.card100-scene.trip-phase-settled .card100-lens{opacity:.08}

.critical-compare-hint{position:absolute;z-index:7;left:50%;top:var(--critical-result-hint-y,559px);display:flex;align-items:center;gap:10px;opacity:0;transform:translate(-50%,8px);color:#7f8190;font-size:8.5px;letter-spacing:.02em;white-space:nowrap;pointer-events:none;transition:opacity var(--motion-slow) .42s var(--motion-curve),transform var(--motion-slow) .42s var(--completion-ease)}
.trip-phase-settled .critical-compare-hint{opacity:1;transform:translate(-50%,0)}
.critical-compare-hint>i{width:29px;height:1px;background:linear-gradient(90deg,transparent,rgba(132,196,255,.52));position:relative}
.critical-compare-hint>i:last-child{transform:scaleX(-1)}
.critical-compare-hint>i::after{content:"";position:absolute;right:0;top:-2px;width:4px;height:4px;border-top:1px solid rgba(150,211,255,.64);border-right:1px solid rgba(150,211,255,.64);transform:rotate(45deg)}

.card100-scene.trip-phase-settled .critical-results{
  position:relative!important;inset:auto!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
  width:auto!important;margin:var(--critical-result-body-y,599px) 20px 0!important;
  padding:0 0 max(30px,calc(18px + env(safe-area-inset-bottom)))!important;
  display:grid!important;grid-template-columns:1fr!important;justify-items:stretch!important;gap:12px!important;
  box-sizing:border-box!important;pointer-events:auto!important;
}
.critical-insight{
  min-height:0!important;padding:0 0 16px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.13)!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.critical-insight>span{display:block!important;margin:0 0 8px!important;color:#8fdcff!important;font-size:9px!important;font-weight:740!important;letter-spacing:.2em!important}
.critical-insight>p{max-width:100%!important;margin:0!important;color:#d7d3dc!important;font-size:13.5px!important;font-weight:430!important;line-height:1.42!important;letter-spacing:-.012em!important;text-wrap:pretty}
.critical-film-cta{
  position:relative!important;width:100%!important;height:56px!important;min-height:56px!important;margin:2px 0 0!important;padding:0 52px 0 22px!important;
  border:1px solid rgba(187,222,255,.2)!important;border-radius:999px!important;
  background:linear-gradient(118deg,#347ff4 0%,#5966e9 42%,#8042d5 100%)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.28),0 16px 35px rgba(45,54,177,.31),0 0 25px rgba(94,160,255,.15)!important;
  color:#fff!important;font-size:15px!important;font-weight:680!important;letter-spacing:-.015em!important;text-align:center!important;
}
.critical-film-cta::after{content:"›";position:absolute;right:22px;top:50%;transform:translateY(-53%);font-size:26px;font-weight:280;line-height:1;color:#eef8ff;text-shadow:0 0 12px rgba(176,227,255,.62)}
.critical-film-cta:focus-visible{outline:2px solid #a9e6ff!important;outline-offset:4px!important}
.critical-film-cta:active{transform:scale(.982)!important}
.critical-friday-refresh{min-height:44px!important;border-radius:999px!important}
.critical-result-toolbar{width:100%!important;min-height:64px!important;margin:0!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.critical-result-toolbar button{position:relative!important;min-width:0!important;min-height:56px!important;height:64px!important;margin:0!important;padding:7px 4px!important;display:grid!important;place-items:center!important;align-content:center!important;gap:7px!important;border:0!important;border-radius:18px!important;background:transparent!important;box-shadow:none!important;color:#cbc7d1!important;transition:background var(--motion-fast) var(--motion-curve),color var(--motion-fast) var(--motion-curve),transform var(--motion-fast) var(--completion-spring)!important}
.critical-result-toolbar button+button::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:1px;background:linear-gradient(transparent,rgba(255,255,255,.12),transparent)}
.critical-result-toolbar button:focus-visible{outline:none!important;background:rgba(114,177,255,.07)!important;color:#f4f1f7!important}@media (hover: hover) and (pointer: fine){.critical-result-toolbar button:hover{outline:none!important;background:rgba(114,177,255,.07)!important;color:#f4f1f7!important}}/* (29 October 2026) hover only for a real pointer: a finger leaves :hover on whatever it last touched (hub/docs/TASTE-INTRO-2026-10-29.md) */
.critical-result-toolbar button:focus-visible{box-shadow:inset 0 0 0 1px rgba(147,218,255,.45)!important}
.critical-result-toolbar button:active{transform:scale(.95)!important}
.critical-result-toolbar button i{width:23px!important;height:23px!important;color:#88dcff!important;filter:drop-shadow(0 0 8px rgba(98,203,255,.33))}
.critical-result-toolbar button span{font-size:12px!important;font-weight:500!important;line-height:1!important}
.critical-result-toolbar .tool-share::before{left:10px!important;top:1px!important;width:2px!important;height:13px!important;box-shadow:-6px 8px 0 -1px #82d7ff,6px 8px 0 -1px #82d7ff!important}
.critical-result-toolbar .tool-save{border:1.5px solid #82d7ff!important;border-bottom-color:transparent!important;border-radius:3px 3px 6px 6px!important}
.critical-result-toolbar .tool-refine::before,.critical-result-toolbar .tool-refine::after{left:2px!important;right:2px!important;box-shadow:0 7px #82d7ff,0 14px #82d7ff!important}
.device.manual-solid .critical-insight{background:transparent!important;border-color:rgba(255,255,255,.2)!important}
.device.manual-large-text .critical-insight>p{font-size:15px!important}.device.manual-large-text .critical-result-toolbar button span{font-size:13px!important}

.trip-critical-layer.critical-compact .critical-header{top:18px!important}
.trip-critical-layer.critical-compact .critical-header>.circle-control{width:38px!important;height:38px!important}
.trip-critical-layer.critical-compact .critical-brand-lockup .brand-mark{width:31px!important;height:31px!important}
.trip-critical-layer.critical-compact .critical-brand-lockup .wordmark{width:84px!important}
.trip-critical-layer.critical-compact.is-live .critical-request-capsule{top:66px!important;height:52px!important;min-height:52px!important;padding:9px 14px!important;border-radius:17px!important}
.trip-critical-layer.critical-compact .critical-request-capsule p{font-size:10.5px!important;-webkit-line-clamp:1}
.trip-critical-layer.critical-compact .critical-results-heading{top:132px!important}.trip-critical-layer.critical-compact .critical-results-heading>.eyebrow{font-size:7.5px}.trip-critical-layer.critical-compact .critical-results-heading>h1{margin-top:5px;font-size:32px}
/* Compact card geometry belongs to search-flow-premium.css. The retired
   fixed-rank/asymmetric poster rules overrode its carousel slots and pushed
   rank 3 off-screen. Keep one 2:3 source card and let canonical slots place it. */
.trip-critical-layer.critical-compact .critical-insight{padding-bottom:10px!important}.trip-critical-layer.critical-compact .critical-insight>span{margin-bottom:5px!important;font-size:7.5px!important}.trip-critical-layer.critical-compact .critical-insight>p{font-size:11.5px!important;line-height:1.34!important}
.trip-critical-layer.critical-compact .critical-film-cta{height:47px!important;min-height:47px!important;font-size:12.5px!important}.trip-critical-layer.critical-compact .critical-result-toolbar{min-height:52px!important}.trip-critical-layer.critical-compact .critical-result-toolbar button{height:52px!important;min-height:48px!important;gap:4px!important}.trip-critical-layer.critical-compact .critical-result-toolbar button i{width:19px!important;height:19px!important}.trip-critical-layer.critical-compact .critical-result-toolbar button span{font-size:10.5px!important}

@media(prefers-reduced-motion:reduce){
  .critical-results-heading,.critical-compare-hint,.card100-scene .critical-card,.critical-film-cta,.critical-result-toolbar button,.trip-critical-layer .critical-request-capsule::after{animation:none!important;transition-duration:var(--motion-fast)!important}
}
.device.manual-reduced-motion .critical-results-heading,.device.manual-reduced-motion .critical-compare-hint,.device.manual-reduced-motion .card100-scene .critical-card,.device.manual-reduced-motion .critical-film-cta,.device.manual-reduced-motion .critical-result-toolbar button,.device.manual-reduced-motion .trip-critical-layer .critical-request-capsule::after{animation:none!important;transition-duration:var(--motion-fast)!important}
/* Film detail: keep the collectible poster, bring decisions within reach and
   preserve a person's name/role when a verified headshot is absent or fails. */
.device .film-v5.recon-film{--film-hero-height:clamp(300px,52svh,440px);isolation:isolate}
.device .film-v5.recon-film .film-hero{position:relative;z-index:2;overflow:visible;height:var(--film-hero-height)!important;min-height:0!important}
/* A loaded Film poster acquires a fine collector's inset and one warm edge. */
.device .film-v5.recon-film .verified-film-hero.poster-resolved::before{
  content:"";position:absolute;z-index:2;inset:10px 10px 20px;pointer-events:none;
  border:1px solid rgba(255,230,216,.23);border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,236,215,.34),inset 0 14px 26px -24px rgba(255,201,165,.38);
}
/* One finite continuation of this exact poster, not a second theme or animation.
   It scrolls with the Film; title, navigation and content never enter its filter. */
#device .film-v5.recon-film{--film-ground:#050507;background:var(--film-ground)!important}
#device.manual-solid .film-v5.recon-film{--film-ground:#09090d}
.device .film-v5.recon-film .film-gradient{background:linear-gradient(180deg,rgba(4,5,8,.12),transparent 32%,var(--film-ground) 96%)}
#device .film-v5.recon-film::before{content:none!important}
#device .film-v5.recon-film::after{content:none!important}
#device .film-v5.recon-film>.film-content::before{content:none!important}
.device .film-artwork-atmosphere{position:absolute;z-index:1;inset:0 0 auto;height:calc(var(--film-hero-height) + 460px);overflow:hidden;pointer-events:none}
.device .film-artwork-atmosphere:not([style]){display:none}
.device .film-artwork-atmosphere::before{content:"";position:absolute;inset:calc(var(--film-hero-height) - 220px) -36px 0;background-image:var(--poster,none);background-size:cover;background-position:center 52%;filter:blur(28px) saturate(.82);opacity:.36;-webkit-mask-image:linear-gradient(transparent,#000 24%,#000 58%,transparent);mask-image:linear-gradient(transparent,#000 24%,#000 58%,transparent)}
.device .film-artwork-atmosphere::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 15%,#07070b26 40%,#07070b80 75%,#050509)}
.device .film-v5.recon-film>.film-content{position:relative;z-index:2}
.device .film-v5.recon-film .film-title{z-index:2;filter:none}
.device .film-v5.recon-film.film-long-title .film-hero{display:flex;flex-direction:column;height:auto!important;min-height:var(--film-hero-height)!important}
.device .film-v5.recon-film.film-long-title .film-title{position:relative;left:auto;right:auto;bottom:auto;box-sizing:border-box;width:100%;max-width:none!important;margin-top:auto;padding:96px 24px 28px}
.device .film-v5.recon-film.film-long-title .film-title h1{max-width:none;overflow-wrap:anywhere}
.device.manual-solid .film-artwork-atmosphere,.reduce-transparency .film-artwork-atmosphere{display:none}
@media(prefers-reduced-transparency:reduce),(forced-colors:active),(update:slow){.device .film-artwork-atmosphere{display:none}}
.device .film-v5.recon-film .decision-actions{position:relative!important;inset:auto!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;margin:12px 0 24px!important;width:100%!important;height:auto!important;min-height:66px!important;box-sizing:border-box!important}
.device .film-v5.recon-film .decision-actions button{min-height:56px!important;min-width:0!important}
.device .film-v5.recon-film .decision-actions button span{font-size:12px!important;line-height:1.3!important;white-space:normal!important}
@media(max-width:340px){
  .device .film-v5.recon-film .decision-actions{min-height:92px!important}
  .device .film-v5.recon-film .decision-actions button{min-height:80px!important}
}
.device .film-v5 .cast-portrait{position:relative;display:grid;place-items:center;width:76px;height:96px;overflow:hidden;border:1px solid #d3c7ed35;border-radius:18px;background:linear-gradient(145deg,#282736,#12131c);box-shadow:inset 0 1px 0 #ffffff16}
.device .film-v5 .cast-portrait img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;border-radius:inherit!important}
.device .film-v5 .cast-initials{font-family:inherit;font-weight:500;font-size:22px;line-height:1;color:#c7bfd8;letter-spacing:.03em}
.device .film-v5 .cast-track article{flex:0 0 auto!important;min-width:96px!important;width:min-content!important}
.device .film-v5 .cast-track{display:flex!important;gap:14px!important}
.device .film-v5 .cast-track strong{display:block;font-size:14px!important;line-height:1.35!important;overflow-wrap:normal;word-break:normal;hyphens:none}
.device .film-v5 .cast-track small{display:block;font-size:12px!important;line-height:1.4!important;color:#bab6c4!important;overflow-wrap:anywhere}
.device .film-v5 .cast-unavailable p{font-size:14px;line-height:1.5;color:#bab6c4}
.device .film-reaction{padding:20px;margin:0 0 24px;border:1px solid #c9abff35;border-radius:24px;background:linear-gradient(135deg,#272039bf,#14121ee6);box-shadow:inset 0 1px 0 #f3dcff12}
.device .film-reaction-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.device .film-reaction h2{margin:0;font-size:21px;line-height:1.25;letter-spacing:-.025em}
.device .film-reaction-heading>span{font-size:10px;letter-spacing:.16em;color:#c9adee}
.device .film-reaction-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.device .film-reaction-choices button{min-height:48px;padding:10px 5px;border:1px solid #e1d1fb2c;border-radius:14px;background:#ffffff08;color:#ebe6f2;font:inherit;font-size:13px;line-height:1.3;transition:background-color var(--motion-fast) var(--motion-curve),border-color var(--motion-fast) var(--motion-curve)}
.device .film-reaction-choices button[aria-pressed=true]{background:#7650be;border-color:#d8b9ff;color:white;box-shadow:inset 0 1px 0 #fff3}
.device .film-reaction p{font-size:13px;line-height:1.6;color:#c7bfce;margin:14px 0 0}
.device .film-reaction-edit{display:flex;flex-wrap:wrap;gap:4px 16px}
.device .film-reaction-edit .quiet-button{min-height:44px;padding:8px 0;font-size:13px;color:#e1cffb}
.device .film-reaction-edit:empty{display:none}
.device .film-reaction details{margin-top:8px;font-size:12px;color:#bdb3ce}
.device .film-reaction summary{min-height:44px;align-content:center;cursor:pointer;line-height:1.4}
.device .film-reaction :is(button,summary):focus-visible{outline:2px solid #e9c8ff;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.device .film-reaction-choices button{transition:none}}
.device.manual-reduced-motion .film-reaction-choices button{transition:none}
.device .request-fit{margin:0 0 24px;border:1px solid #c9abff30;border-radius:20px;background:linear-gradient(135deg,#2b213c99,#17141fe6);overflow:hidden}
.device .request-fit>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:14px 18px;list-style:none;cursor:pointer;font-size:15px;font-weight:550;color:#f0e6fa}
.device .request-fit>summary::-webkit-details-marker{display:none}
.device .request-fit>summary::after{content:'+';font-size:23px;font-weight:300;color:#d6b9f5}
.device .request-fit[open]>summary::after{content:'−'}
.device .request-fit>summary small{margin-left:auto;font-size:11px;font-weight:400;color:#c3b0d5}
.device .request-fit-body{padding:0 18px 16px;border-top:1px solid #d3bbf21a}
.device .request-fit p{margin:14px 0;font-size:13px;line-height:1.6;color:#c7bfce}
.device .request-fit .request-fit-occasion{font-size:15px;line-height:1.5;color:#eee3f9;overflow-wrap:anywhere}
.device .request-fit-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.device .request-fit-choices .quiet-button{min-height:48px;padding:10px 8px;border:1px solid #d9baf544;border-radius:13px;background:#ffffff08;color:#f0e6fa;font-size:13px;line-height:1.4}
.device .request-fit-choices .quiet-button[aria-pressed=true]{background:#7650be;border-color:#dfbfff;box-shadow:inset 0 1px 0 #fff3;color:#fff}
.device .request-fit .request-fit-receipt{font-size:12px}
.device .request-fit-edit{display:flex;flex-wrap:wrap;gap:6px 18px}
.device .request-fit-edit:empty{display:none}
.device .request-fit-edit .quiet-button{min-height:44px;padding:8px 0;font-size:13px;color:#e1cffb}
.device .request-fit :is(button,summary):focus-visible{outline:2px solid #e9c8ff;outline-offset:-3px}

/* The request is an ink-dark writing surface with a lilac/pink typing rim.
   Remove both rejected decorations at their actual paint source. */
.device .premium-discover .premium-discover-ambient::before{animation:none!important;opacity:.55!important}
.device .premium-discover .premium-discover-ambient>i,
.device .premium-discover .premium-discover-ambient>span::before,
.device .premium-discover .premium-discover-ambient>span::after{display:none!important;animation:none!important}
#device .premium-discover .search-glass.premium-composer::after{content:none!important;display:none!important;background:none!important;filter:none!important;animation:none!important;box-shadow:none!important}
#device .premium-discover .search-glass.premium-composer{border-color:#b6bbc438!important;background:linear-gradient(125deg,#ffffff08,transparent 38%),linear-gradient(155deg,#181b24,#0b0d14 75%)!important;box-shadow:inset 0 1px 0 #ffffff18,inset 0 -1px 0 #0009,0 18px 38px -18px #000c!important;transition:border-color var(--motion-fast) var(--motion-curve) !important}
#device .premium-discover .search-glass.premium-composer::before{inset:0!important;border-radius:inherit!important;background:linear-gradient(115deg,#e7b8f4c9,transparent 34%,transparent 60%,#a184ef9c)!important;opacity:.26!important;filter:none!important;animation:none!important;transition:opacity var(--motion-fast) var(--motion-curve)!important;pointer-events:none!important}
#device .premium-discover .search-glass.premium-composer:focus-within{border-color:#c89ce8b3!important;box-shadow:inset 0 1px 0 #efd2ff42,inset 1px 0 0 #e5baff20,0 20px 44px -18px #000e,0 0 0 3px #ad76dd10!important}
#device .premium-discover .search-glass.premium-composer:focus-within::before{opacity:1!important}
#device .premium-composer .query-submit.query-submit-plain:not(:disabled){color:#fff!important;background:linear-gradient(145deg,#8664e2,#6942c4)!important;border-color:#b99bea99!important;box-shadow:inset 0 1px 0 #f0dfff55,0 3px 0 #422774,0 9px 18px -8px #24113899!important;text-shadow:none!important}
#device .premium-composer .query-submit.query-submit-plain:not(:disabled) span,#device .premium-composer .query-submit.query-submit-plain:not(:disabled) i{color:#fff!important;text-shadow:none!important}
#device .premium-composer .query-submit.query-submit-plain:disabled{background:#242832!important;border-color:#9ea8b626!important;color:#b4b8c2!important;box-shadow:inset 0 1px 0 #ffffff0d!important;opacity:1!important}
#device .premium-composer .query-submit.query-submit-plain:active:not(:disabled){transform:translateY(2px)!important;box-shadow:inset 0 1px 0 #f0dfff55,0 1px 0 #422774!important}
#device .premium-composer .voice-control:not(.is-listening){background:#1b222b!important;border-color:#c0ced640!important;box-shadow:inset 0 1px 0 #ffffff12!important}
#device .premium-composer .request-label{font-size:12px!important;letter-spacing:.1em!important}
#device .premium-composer .request-count,#device .premium-composer .query-save,#device .premium-composer .query-clear{font-size:12px!important}
#device .premium-composer .composer-guidance{font-size:12px!important;line-height:1.4!important}
#device .premium-composer .composer-footer{height:auto!important;min-height:54px!important}
#device .premium-composer .query-submit.query-submit-plain>span{font-size:14px!important}
#device.manual-solid .premium-discover .search-glass.premium-composer{background:#141820!important}
@media(prefers-reduced-motion:reduce){#device .premium-discover .search-glass.premium-composer,#device .premium-discover .search-glass.premium-composer::before{transition:none!important}}
#device.manual-reduced-motion .premium-discover .search-glass.premium-composer,#device.manual-reduced-motion .premium-discover .search-glass.premium-composer::before{transition:none!important}
/* Source disclosure shares the existing Film materials; no competing panel. */
.film-information-source{margin:1.25rem 0;border-radius:1.25rem;overflow:hidden}
.film-information-source summary{min-height:3rem;padding:1rem;font-size:1rem;line-height:1.45;cursor:pointer}
.film-information-source summary:focus-visible{outline:2px solid #cba6ff;outline-offset:-4px;border-radius:1.25rem}
.film-information-source>div{padding:0 1rem 1rem;font-size:.875rem;line-height:1.65;color:#c5c0d0}
.film-information-source p{margin:.75rem 0;overflow-wrap:anywhere}
.film-information-source strong{color:#eee7fa;font-weight:600}
.film-information-source a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;color:#d8b9ff;text-underline-offset:4px}

/* ===== prototype-src/search-flow-premium.css ===== */
/* TRIPTIC premium search, reveal and settled-result layer
   -------------------------------------------------------
   This file is intentionally an override layer. It is loaded after the
   existing ceremony/card styles and relies on the state and markup contracts
   installed by the search-flow controller.

   Principles:
   - one quiet three-pane synthesis motif while TRIPTIC is thinking;
   - no engine residue once the cards can be touched;
   - one transform-driven, circular three-card shelf after the final reveal;
   - a readable, naturally scrolling result document at every iPhone height.
*/

.trip-critical-layer{
  --search-blue:104,201,255;
  --search-violet:132,92,246;
  --search-pink:224,112,255;
  --search-ink:#f7f7fb;
  --search-muted:#9c98a6;
  --search-line:rgba(220,229,255,.13);
  --search-ease:var(--motion-curve);
  --search-enter:var(--motion-curve);
  --search-carousel-ease:var(--motion-curve);
  --search-spring:var(--motion-spring);
  --search-request-y:clamp(88px,23.5cqw,101px);
  --search-title-y:clamp(169px,44.7cqw,192px);
  --search-shelf-y:clamp(240px,63.8cqw,274px);
  --search-hint-y:clamp(514px,134.6cqw,579px);
  --search-results-y:clamp(551px,145cqw,624px);
  isolation:isolate;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* Header and request ---------------------------------------------------- */

.trip-critical-layer .critical-header{
  z-index:24!important;
  top:var(--critical-header-y,28px)!important;
  height:44px!important;
  grid-template-columns:44px minmax(0,1fr) 44px!important;
  align-items:center!important;
}

.trip-critical-layer .critical-header>.circle-control,
.trip-critical-layer.critical-compact .critical-header>.circle-control{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
}

.trip-critical-layer .critical-header>.back-chevron{
  position:relative!important;
  overflow:visible!important;
}

.trip-critical-layer .critical-back-icon{
  position:relative;
  width:20px;
  height:20px;
  display:block;
  overflow:visible;
  color:#e9e7ef;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:translateX(1px);
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.32));
  pointer-events:none;
}

/* Keep the old chevron optically usable until the SVG contract is present. */
.trip-critical-layer .critical-header>.back-chevron>i{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:10px!important;
  height:10px!important;
  margin:0!important;
  transform:translate(calc(-50% + 1px),-50%) rotate(45deg)!important;
  transform-origin:50% 50%!important;
}

.trip-critical-layer .critical-header>.back-chevron:focus-visible{
  outline:2px solid rgba(var(--search-blue),.92)!important;
  outline-offset:4px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 0 0 5px rgba(var(--search-blue),.08),0 14px 34px rgba(0,0,0,.34)!important;
}

.trip-critical-layer .critical-brand-lockup{
  position:relative!important;
  z-index:1;
  gap:10px!important;
  opacity:1!important;
  isolation:isolate;
}

.trip-critical-layer .critical-brand-lockup::before{
  content:none!important;
  display:none!important;
}

.trip-critical-layer .critical-brand-lockup .critical-brand-aura{
  position:absolute!important;
  z-index:-1!important;
  left:50%!important;
  top:50%!important;
  width:210px!important;
  height:76px!important;
  border-radius:50%!important;
  background:
    radial-gradient(ellipse at 35% 50%,rgba(74,178,255,.31),rgba(74,178,255,.14) 38%,rgba(125,83,239,.08) 58%,transparent 76%)!important;
  filter:blur(12px)!important;
  opacity:1!important;
  transform:translate(-50%,-50%)!important;
  animation:none!important;
  pointer-events:none!important;
}

.trip-critical-layer .critical-brand-lockup .brand-mark,
.trip-critical-layer .critical-brand-lockup .wordmark{
  position:relative!important;
  z-index:1!important;
}

.trip-critical-layer.is-live .critical-request-capsule{
  z-index:18!important;
  left:20px!important;
  right:20px!important;
  top:var(--search-request-y)!important;
  width:auto!important;
  min-height:72px!important;
  height:72px!important;
  padding:9px 17px!important;
  display:grid!important;
  align-content:center!important;
  gap:4px!important;
  border:1px solid rgba(156,205,255,.16)!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,rgba(22,22,33,.9),rgba(8,8,14,.94))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.105),0 16px 40px rgba(0,0,0,.32),0 0 34px rgba(var(--search-violet),.065)!important;
}

.trip-critical-layer .critical-request-capsule>span{
  display:block!important;
  margin:0!important;
  color:rgba(147,214,255,.88)!important;
  font-size:9px!important;
  font-weight:740!important;
  line-height:1.05!important;
  letter-spacing:.18em!important;
}

.trip-critical-layer .critical-request-capsule>p{
  display:-webkit-box!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  overflow:hidden!important;
  color:#e2dee7!important;
  font-size:14.5px!important;
  font-weight:440!important;
  line-height:1.24!important;
  letter-spacing:-.012em!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  text-overflow:clip!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}

/* Thinking engine ------------------------------------------------------- */

/* The engine sits beneath every interactive card. Its three panes are the
   source of the cards, not a second interface competing with them. */
.trip-critical-layer .critical-engine-stage{
  z-index:3!important;
  top:clamp(168px,43.5cqw,187px)!important;
  width:clamp(286px,78cqw,335px)!important;
  height:224px!important;
  transform:translateX(-50%) scale(.94)!important;
  transform-origin:50% 46%!important;
  opacity:.78!important;
  filter:saturate(.94) brightness(.96)!important;
  transition:opacity var(--motion-normal) var(--motion-curve),transform var(--motion-slow) var(--search-enter) !important;
}

.trip-critical-layer .critical-engine-stage::before{
  content:"";
  position:absolute;
  left:50%;
  top:154px;
  width:246px;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(112,205,255,.18) 28%,rgba(237,246,255,.42) 50%,rgba(211,115,255,.15) 72%,transparent);
  box-shadow:0 0 17px rgba(var(--search-blue),.11);
  opacity:.65;
}

.trip-critical-layer .critical-engine-halo{
  inset:7px 18px 17px!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse,rgba(98,199,255,.19),rgba(104,105,255,.085) 37%,rgba(224,112,255,.04) 58%,transparent 75%)!important;
  filter:blur(18px)!important;
  opacity:.64!important;
  transform:scale(.84)!important;
  transition:opacity var(--motion-slow) var(--motion-curve),transform var(--motion-slow) var(--search-enter) !important;
}

/* The former orbit/readout furniture is deliberately retired. */
.trip-critical-layer .critical-engine-orbits,
.trip-critical-layer .critical-engine-signals,
.trip-critical-layer .critical-engine-readout{
  display:none!important;
  animation:none!important;
}

.trip-critical-layer .critical-engine-aperture{
  left:50%!important;
  top:17px!important;
  width:214px!important;
  height:154px!important;
  transform:translateX(-50%) rotateX(58deg)!important;
  transform-origin:50% 70%!important;
  filter:drop-shadow(0 28px 35px rgba(0,0,0,.56))!important;
  transition:opacity var(--motion-normal) var(--motion-curve),transform var(--motion-slow) var(--search-enter) !important;
}

.trip-critical-layer .critical-engine-aperture>i{
  top:8px!important;
  bottom:8px!important;
  width:58px!important;
  border:1px solid rgba(157,220,255,.2)!important;
  border-radius:11px!important;
  background:linear-gradient(155deg,rgba(190,236,255,.12),rgba(93,103,255,.055) 44%,rgba(219,105,255,.075))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.16),inset 0 -28px 44px rgba(3,4,14,.55),0 0 22px rgba(var(--search-blue),.07)!important;
  opacity:.72!important;
  animation:none!important;
  transition:transform var(--motion-slow) var(--search-enter),opacity var(--motion-normal) var(--motion-curve),border-color var(--motion-normal) var(--motion-curve) !important;
}

.trip-critical-layer .critical-engine-aperture>i:nth-child(1){left:2px!important;transform:translateZ(-14px) rotateY(17deg)!important}
.trip-critical-layer .critical-engine-aperture>i:nth-child(2){left:78px!important;transform:translateZ(10px)!important;border-color:rgba(207,233,255,.3)!important}
.trip-critical-layer .critical-engine-aperture>i:nth-child(3){right:2px!important;transform:translateZ(-14px) rotateY(-17deg)!important}

.trip-critical-layer .critical-engine-core{
  z-index:5!important;
  top:95px!important;
  width:52px!important;
  height:52px!important;
  border-color:rgba(181,232,255,.25)!important;
  box-shadow:0 0 22px rgba(var(--search-blue),.17),inset 0 0 18px rgba(var(--search-violet),.15)!important;
  transition:transform var(--motion-slow) var(--search-enter),opacity var(--motion-normal) var(--motion-curve) !important;
}

.trip-critical-layer .engine-axis{
  top:-15px!important;
  height:184px!important;
  opacity:.24!important;
  background:linear-gradient(transparent,rgba(158,226,255,.52) 27%,rgba(240,248,255,.72) 50%,rgba(224,121,255,.25) 72%,transparent)!important;
}

.trip-critical-layer .engine-scan{
  left:-14px!important;
  right:-14px!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,#8edcff 29%,#fff 50%,#dba1ff 71%,transparent)!important;
  box-shadow:0 0 8px rgba(133,218,255,.7),0 0 18px rgba(196,112,255,.2)!important;
  opacity:0;
  animation:none!important;
}

.trip-critical-layer.trip-phase-entry .critical-engine-stage{
  opacity:0!important;
  transform:translateX(-50%) translateY(18px) scale(.78)!important;
}

.trip-critical-layer.trip-phase-gathering .critical-engine-stage{
  opacity:.84!important;
  transform:translateX(-50%) scale(.96)!important;
}

.trip-critical-layer.trip-phase-gathering .engine-scan{
  animation:searchPremiumScan var(--motion-ceremony) var(--search-ease) .06s 1 both!important;
}

.trip-critical-layer.trip-phase-charging .critical-engine-stage{
  opacity:1!important;
  transform:translateX(-50%) scale(1.015)!important;
  filter:saturate(1.14) brightness(1.06)!important;
}

.trip-critical-layer.trip-phase-charging .critical-engine-aperture>i{
  opacity:.92!important;
  border-color:rgba(172,229,255,.31)!important;
}

.trip-critical-layer.trip-phase-charging .engine-scan{
  animation:searchPremiumScan var(--motion-ceremony) var(--search-ease) .04s 1 both!important;
}

.trip-critical-layer.trip-phase-compressed .critical-engine-stage,
.trip-critical-layer.trip-phase-waiting .critical-engine-stage{
  opacity:.9!important;
  transform:translateX(-50%) scale(.84)!important;
  filter:saturate(1.2) brightness(1.08)!important;
}

.trip-critical-layer.trip-phase-compressed .critical-engine-aperture>i:nth-child(1),
.trip-critical-layer.trip-phase-waiting .critical-engine-aperture>i:nth-child(1){transform:translateX(65px) translateZ(-6px) rotateY(4deg)!important}
.trip-critical-layer.trip-phase-compressed .critical-engine-aperture>i:nth-child(2),
.trip-critical-layer.trip-phase-waiting .critical-engine-aperture>i:nth-child(2){transform:translateZ(20px) scaleX(.34)!important;filter:brightness(1.48)!important}
.trip-critical-layer.trip-phase-compressed .critical-engine-aperture>i:nth-child(3),
.trip-critical-layer.trip-phase-waiting .critical-engine-aperture>i:nth-child(3){transform:translateX(-65px) translateZ(-6px) rotateY(-4deg)!important}

.trip-critical-layer.trip-phase-forming .critical-engine-stage{
  opacity:0!important;
  transform:translateX(-50%) translateY(-28px) scale(.66)!important;
  filter:saturate(.8) brightness(.76)!important;
}

/* Absolute hand-off: once a card is actionable, the synthesis layer cannot
   share a stacking plane with the artwork. This fixes the old top-edge band. */
.trip-critical-layer:is(.trip-phase-ready,.trip-phase-revealing,.trip-phase-settled) .critical-engine-stage,
.trip-critical-layer:is(.trip-phase-ready,.trip-phase-revealing,.trip-phase-settled) .critical-engine-stage *,
.trip-critical-layer:is(.trip-phase-ready,.trip-phase-revealing,.trip-phase-settled)>.orb100-transfer,
.trip-critical-layer:is(.trip-phase-ready,.trip-phase-revealing,.trip-phase-settled) .critical-energy-paths{
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  animation:none!important;
}

.trip-critical-layer:is(.trip-phase-ready,.trip-phase-revealing,.trip-phase-settled) .critical-engine-stage,
.trip-critical-layer:is(.trip-phase-ready,.trip-phase-revealing,.trip-phase-settled)>.orb100-transfer{
  z-index:0!important;
}

.trip-critical-layer:is(.trip-phase-ready,.trip-phase-revealing,.trip-phase-settled) .critical-card-stage{
  z-index:10!important;
  isolation:isolate;
}

.trip-critical-layer .critical-card.is-flipping .critical-card-energy,
.trip-critical-layer .critical-card.is-revealed .critical-card-energy,
.trip-critical-layer .critical-card.card100-poster-arriving .critical-card-energy{
  visibility:hidden!important;
  opacity:0!important;
  animation:none!important;
}

.trip-critical-layer .critical-card.is-flipping .critical-card-energy *,
.trip-critical-layer .critical-card.is-revealed .critical-card-energy *,
.trip-critical-layer .critical-card.card100-poster-arriving .critical-card-energy *{
  animation:none!important;
}

.trip-critical-layer .critical-status>span{
  color:#91dbff!important;
  font-size:8.5px!important;
  letter-spacing:.19em!important;
}
.trip-critical-layer .critical-status>h1{font-size:22px!important;line-height:1.12!important;letter-spacing:-.03em!important}
.trip-critical-layer .critical-status>p{max-width:284px!important;font-size:11.5px!important;line-height:1.46!important}

@keyframes searchPremiumScan{
  0%{transform:translateY(0) scaleX(.34);opacity:0}
  16%{opacity:.82}
  72%{opacity:.58}
  100%{transform:translateY(132px) scaleX(.92);opacity:0}
}

/* Clean card reveal ----------------------------------------------------- */

.trip-critical-layer.card100-scene .critical-card.is-opening{
  transform:translateY(-20px) translateZ(98px) scale(1.14)!important;
  filter:drop-shadow(0 31px 48px rgba(0,0,0,.68)) drop-shadow(0 0 35px rgba(var(--search-blue),.28))!important;
}

.trip-critical-layer.card100-scene .critical-card.is-final.is-opening{
  transform:translateY(-24px) translateZ(124px) scale(1.19)!important;
  filter:drop-shadow(0 34px 52px rgba(0,0,0,.7)) drop-shadow(0 0 45px rgba(var(--search-pink),.38))!important;
}

.trip-critical-layer.card100-scene .critical-card-inner{
  transition:transform var(--motion-slow) var(--search-spring),opacity var(--motion-fast) var(--motion-curve)!important;
}

/* Reveal-state hardening. The resting card float/prism are indefinite
   animations; leaving either running while the same element is lifted,
   filtered and turning in 3D creates competing compositor work on WebKit.
   Stop only those resting loops—the finite poster lens remains untouched. */
.trip-critical-layer.card100-scene .critical-card:is(.is-opening,.is-flipping,.is-revealed){
  animation:none!important;
}

.trip-critical-layer.card100-scene .critical-card:is(.is-opening,.is-flipping,.is-revealed) .card100-prism{
  opacity:0!important;
  animation:none!important;
  transition:opacity var(--motion-fast) var(--motion-curve)!important;
}

.trip-critical-layer.trip-phase-revealing .critical-atmosphere::before,
.trip-critical-layer.trip-phase-revealing .critical-atmosphere>i{
  animation-play-state:paused!important;
}

/* Forming is intentionally non-interactive, but a stale forming selector
   must never win once the controller has entered an actionable phase. */
.trip-critical-layer:is(.trip-phase-ready,.trip-phase-revealing) .critical-card-stage{
  pointer-events:auto!important;
}

.trip-critical-layer:is(.trip-phase-ready,.trip-phase-revealing) .critical-card[aria-disabled="false"]{
  pointer-events:auto!important;
  cursor:pointer!important;
}

/* Settled Cover Flow ---------------------------------------------------- */

.trip-critical-layer.trip-phase-settled{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-x:none!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y!important;
  scrollbar-width:none;
  scroll-padding-bottom:max(84px,calc(56px + env(safe-area-inset-bottom)));
  background:
    radial-gradient(ellipse at 50% 42%,rgba(126,75,222,.145),transparent 30%),
    radial-gradient(circle at 30% 12%,rgba(73,154,255,.085),transparent 25%),
    linear-gradient(180deg,#08080f 0%,#05050a 60%,#040407 100%)!important;
}

.trip-critical-layer.trip-phase-settled::-webkit-scrollbar{display:none}
.trip-critical-layer.trip-phase-settled *{animation:none!important}

.trip-critical-layer.trip-phase-settled .critical-results-heading{
  z-index:9!important;
  top:var(--search-title-y)!important;
  opacity:1!important;
  transform:none!important;
}

.trip-critical-layer.trip-phase-settled .critical-results-heading>.eyebrow{
  color:#8edcff!important;
  font-size:9px!important;
  font-weight:740!important;
  letter-spacing:.22em!important;
}

.trip-critical-layer.trip-phase-settled .critical-results-heading>h1{
  margin-top:7px!important;
  color:var(--search-ink)!important;
  font-size:clamp(38px,10.25cqw,44px)!important;
  font-weight:590!important;
  line-height:.98!important;
  letter-spacing:-.047em!important;
}

.trip-critical-layer.trip-phase-settled .critical-card-stage{
  z-index:10!important;
  left:0!important;
  right:0!important;
  top:var(--search-shelf-y)!important;
  height:clamp(260px,70cqw,302px)!important;
  overflow:visible!important;
  perspective:1500px!important;
  transform:none!important;
  transform-style:preserve-3d!important;
  touch-action:pan-y!important;
  user-select:none;
  -webkit-user-select:none;
}

/* Every slot begins with one identical 2:3 card. Scale and depth—not layout
   width—create the hierarchy, so role changes stay compositor-friendly. */
.trip-critical-layer.trip-phase-settled .critical-card[data-slot],
.trip-critical-layer.trip-phase-settled .critical-card:not([data-slot]){
  left:50%!important;
  right:auto!important;
  top:0!important;
  width:clamp(150px,42%,181px)!important;
  height:auto!important;
  aspect-ratio:2/3!important;
  border-radius:24px!important;
  opacity:1!important;
  transform-origin:50% 54%!important;
  transform-style:preserve-3d!important;
  will-change:transform,filter;
  transition:transform var(--motion-slow) var(--search-carousel-ease),opacity var(--motion-fast) var(--motion-curve) !important;
}

.trip-critical-layer.trip-phase-settled .critical-card[data-slot="center"],
.trip-critical-layer.trip-phase-settled .critical-card.rank-1:not([data-slot]){
  z-index:8!important;
  transform:translate3d(-50%,0,72px) scale(1)!important;
  transform:translate3d(calc(-50% + (var(--critical-drag-progress,0) * 72px)),0,72px) scale(1)!important;
  filter:drop-shadow(0 29px 43px rgba(0,0,0,.66)) drop-shadow(0 0 29px rgba(var(--search-blue),.16)) saturate(1.03) brightness(1.01)!important;
}

.trip-critical-layer.trip-phase-settled .critical-card[data-slot="left"],
.trip-critical-layer.trip-phase-settled .critical-card.rank-3:not([data-slot]){
  z-index:3!important;
  transform:translate3d(-126%,32px,4px) rotateY(8deg) scale(.76)!important;
  transform:translate3d(calc(-126% + (var(--critical-drag-progress,0) * 72px)),32px,4px) rotateY(8deg) scale(.76)!important;
  filter:saturate(.83) brightness(.78) drop-shadow(0 20px 32px rgba(0,0,0,.56))!important;
  opacity:.88!important;
}

.trip-critical-layer.trip-phase-settled .critical-card[data-slot="right"],
.trip-critical-layer.trip-phase-settled .critical-card.rank-2:not([data-slot]){
  z-index:3!important;
  transform:translate3d(26%,32px,4px) rotateY(-8deg) scale(.76)!important;
  transform:translate3d(calc(26% + (var(--critical-drag-progress,0) * 72px)),32px,4px) rotateY(-8deg) scale(.76)!important;
  filter:saturate(.83) brightness(.78) drop-shadow(0 20px 32px rgba(0,0,0,.56))!important;
  opacity:.88!important;
}

.trip-critical-layer.trip-phase-settled.is-carousel-dragging .critical-card,
.trip-critical-layer.trip-phase-settled .critical-card-stage.is-carousel-dragging .critical-card{
  transition:none!important;
  cursor:grabbing!important;
}

/* The circular wrap crosses on the rear plane. `next` sends the old left
   card to the new right slot; `previous` mirrors that route. A restrained
   opacity dip hides the modulo hand-off without turning it into a flourish. */
.trip-critical-layer.trip-phase-settled.is-carousel-moving[data-carousel-direction="next"] .critical-card[data-slot="right"],
.trip-critical-layer.trip-phase-settled.is-carousel-moving[data-carousel-direction="previous"] .critical-card[data-slot="left"]{
  z-index:1!important;
  opacity:.24!important;
  filter:saturate(.68) brightness(.58) drop-shadow(0 13px 24px rgba(0,0,0,.48))!important;
}

.trip-critical-layer.trip-phase-settled .critical-card[data-slot="left"]:focus-visible,.trip-critical-layer.trip-phase-settled .critical-card[data-slot="right"]:focus-visible{
  opacity:1!important;
  filter:saturate(.94) brightness(.9) drop-shadow(0 22px 34px rgba(0,0,0,.6))!important;
}
@media (hover: hover) and (pointer: fine){.trip-critical-layer.trip-phase-settled .critical-card[data-slot="left"]:hover,.trip-critical-layer.trip-phase-settled .critical-card[data-slot="right"]:hover{
  opacity:1!important;
  filter:saturate(.94) brightness(.9) drop-shadow(0 22px 34px rgba(0,0,0,.6))!important;
}}/* (29 October 2026) hover only for a real pointer: a finger leaves :hover on whatever it last touched (hub/docs/TASTE-INTRO-2026-10-29.md) */

.trip-critical-layer.trip-phase-settled .critical-card:focus-visible{
  outline:2px solid rgba(var(--search-blue),.9)!important;
  outline-offset:6px!important;
}

.trip-critical-layer.trip-phase-settled .critical-card-inner,
.trip-critical-layer.trip-phase-settled .critical-card-back,
.trip-critical-layer.trip-phase-settled .critical-card-front{
  border-radius:24px!important;
}

.trip-critical-layer.trip-phase-settled .critical-card-front{
  justify-content:flex-end!important;
  padding:17px 14px!important;
  overflow:hidden!important;
  background-image:
    linear-gradient(180deg,rgba(3,3,8,.01) 16%,rgba(3,3,8,.075) 38%,rgba(3,3,8,.39) 61%,rgba(2,2,7,.95) 83%,#030307 100%),
    var(--critical-poster)!important;
  background-size:cover!important;
  background-position:center!important;
  box-shadow:inset 0 1px rgba(255,255,255,.19),inset 0 0 0 1px rgba(174,222,255,.055),0 22px 48px rgba(0,0,0,.56)!important;
}

.trip-critical-layer.trip-phase-settled .critical-card-front strong{
  display:-webkit-box!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  color:#fff!important;
  font-size:13.5px!important;
  font-weight:660!important;
  line-height:1.12!important;
  letter-spacing:-.025em!important;
  text-align:left!important;
  text-shadow:0 2px 13px rgba(0,0,0,.98),0 0 5px rgba(0,0,0,.9)!important;
  text-wrap:balance;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
}

.trip-critical-layer.trip-phase-settled .critical-card[data-slot="center"] .critical-card-front strong,
.trip-critical-layer.trip-phase-settled .critical-card.rank-1:not([data-slot]) .critical-card-front strong{
  font-size:15.5px!important;
}

.trip-critical-layer.trip-phase-settled .critical-card-front small{
  display:inline-flex!important;
  align-items:center!important;
  width:max-content!important;
  max-width:100%!important;
  min-height:23px!important;
  margin-top:8px!important;
  padding:5px 8px!important;
  border-radius:999px!important;
  font-size:8.5px!important;
  font-weight:690!important;
  line-height:1!important;
  white-space:nowrap!important;
}

.trip-critical-layer.trip-phase-settled .critical-card[data-slot="center"] .critical-card-front small,
.trip-critical-layer.trip-phase-settled .critical-card.rank-1:not([data-slot]) .critical-card-front small{
  min-height:25px!important;
  padding:6px 10px!important;
  font-size:9.2px!important;
}

.trip-critical-layer.trip-phase-settled .critical-card-front em{display:none!important}

/* Poster typography is not predictable. Keep the artwork above a quiet,
   opaque title footer so printed billing and the triptych rail never compete
   with the actual film identity, including before the third card settles. */
.trip-critical-layer.card100-scene .critical-card.is-revealed .critical-card-front{
  background-color:#0b0b16!important;
  background-image:linear-gradient(180deg,transparent 35%,rgba(4,5,13,.55) 48%,#050610 66%,#050610 100%),var(--critical-poster,none)!important;
}
.trip-critical-layer.card100-scene .critical-card.is-revealed .critical-card-front strong,
.trip-critical-layer.card100-scene .critical-card.is-revealed .critical-card-front small{
  position:relative!important;
  z-index:2!important;
}
.trip-critical-layer.card100-scene .critical-card.is-revealed[data-long-title="true"] .critical-card-front{
  background-image:linear-gradient(180deg,transparent 25%,rgba(4,5,13,.55) 38%,#050610 53%,#050610 100%),var(--critical-poster,none)!important;
}
.trip-critical-layer.card100-scene .critical-card.is-revealed[data-long-title="true"] .critical-card-front strong{
  font-size:11.5px!important;
  line-height:1.08!important;
  -webkit-line-clamp:5!important;
}
.trip-critical-layer.card100-scene .critical-card.is-revealed[data-long-title="true"]:not(.rank-1) .critical-card-front strong{font-size:10px!important}
.trip-critical-layer .critical-artwork-fallback{
  display:none;
  position:absolute!important;
  z-index:1!important;
  top:5%;left:0;right:0;
  align-items:center;flex-direction:column;gap:7px;
  color:#d7d5e6;
  font-size:8px;font-weight:640;letter-spacing:.14em;text-align:center;
  text-transform:uppercase;
  pointer-events:none;
}
.trip-critical-layer .critical-card-front:is([data-artwork="pending"],[data-artwork="missing"]) .critical-artwork-fallback{display:flex}
.trip-critical-layer .critical-artwork-fallback>span:last-child{color:#aaa7bd;font-size:7px;letter-spacing:.08em;text-transform:none}
.trip-critical-layer .critical-artwork-mark{display:flex;align-items:flex-end;gap:3px;height:30px;margin-bottom:3px}
.trip-critical-layer .critical-artwork-mark>i{display:block;width:8px;height:29px;border:1px solid rgba(187,214,255,.76);border-radius:5px;background:linear-gradient(160deg,rgba(112,164,240,.21),rgba(136,83,207,.16))}
.trip-critical-layer .critical-artwork-mark>i:nth-child(2){height:23px}
.trip-critical-layer .critical-artwork-mark>i:nth-child(3){height:17px}
/* The rail is a sealed-card guide. Once a face opens, it must not draw
   through film text; the same rail returns below the cards for comparison. */
.trip-critical-layer:is(.trip-phase-ready,.trip-phase-revealing):has(.critical-card.is-revealed) .critical-card-stage>.triptych-spine{opacity:0!important}
.trip-critical-layer.trip-phase-settled .critical-card-energy,
.trip-critical-layer.trip-phase-settled .card100-prism,
.trip-critical-layer.trip-phase-settled .card100-lens,
.trip-critical-layer.trip-phase-settled .critical-final-bloom{display:none!important}

.trip-critical-layer.trip-phase-settled .critical-compare-hint{
  z-index:9!important;
  top:var(--search-hint-y)!important;
  gap:10px!important;
  color:#9a99a7!important;
  font-size:10.5px!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:.005em!important;
  opacity:1!important;
  transform:translate(-50%,0)!important;
}

.trip-critical-layer.trip-phase-settled .critical-compare-hint>i{
  width:27px!important;
  background:linear-gradient(90deg,transparent,rgba(137,205,255,.56))!important;
}

/* Results become part of the vertical document. No fixed-height surface can
   clip the rationale, primary action, toolbar or home-indicator clearance. */
.trip-critical-layer.trip-phase-settled .critical-results{
  position:relative!important;
  z-index:8!important;
  inset:auto!important;
  width:auto!important;
  margin:var(--search-results-y) 20px 0!important;
  padding:0 0 max(86px,calc(52px + env(safe-area-inset-bottom)))!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  justify-items:stretch!important;
  gap:12px!important;
  box-sizing:border-box!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
}

.trip-critical-layer .critical-insight{
  min-height:0!important;
  padding:0 1px 15px!important;
  border:0!important;
  border-bottom:1px solid var(--search-line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.trip-critical-layer .critical-insight>span{
  display:block!important;
  margin:0 0 8px!important;
  color:#8fdcff!important;
  font-size:9.5px!important;
  font-weight:740!important;
  line-height:1.1!important;
  letter-spacing:.19em!important;
}

.trip-critical-layer .critical-insight>p{
  max-width:100%!important;
  margin:0!important;
  color:#ddd9e2!important;
  font-size:14px!important;
  font-weight:430!important;
  line-height:1.44!important;
  letter-spacing:-.012em!important;
  overflow-wrap:anywhere!important;
  text-wrap:pretty;
}

/* A symmetric three-column grid keeps the CTA label centred across the full
   pill even though the chevron occupies the trailing column. */
.trip-critical-layer .critical-film-cta{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:56px!important;
  margin:2px 0 0!important;
  padding:11px 18px!important;
  display:grid!important;
  grid-template-columns:24px minmax(0,1fr) 24px!important;
  align-items:center!important;
  align-content:center!important;
  justify-items:center!important;
  gap:8px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  border:1px solid rgba(187,222,255,.21)!important;
  border-radius:999px!important;
  background:linear-gradient(118deg,#347ff4 0%,#5966e9 43%,#8042d5 100%)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.28),0 16px 35px rgba(45,54,177,.31),0 0 26px rgba(94,160,255,.15)!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:680!important;
  line-height:1.2!important;
  letter-spacing:-.015em!important;
  text-align:center!important;
  transition:transform var(--motion-fast) var(--search-ease) !important;
}

.trip-critical-layer .critical-film-cta::after{
  content:none!important;
  display:none!important;
}

.trip-critical-layer .critical-cta-spacer{width:24px;height:24px;pointer-events:none}
.trip-critical-layer .critical-cta-label{
  min-width:0;
  max-width:100%;
  justify-self:stretch;
  overflow:visible;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
  text-overflow:clip;
  text-wrap:balance;
}
.trip-critical-layer .critical-cta-icon{
  width:20px;
  height:20px;
  display:block;
  justify-self:center;
  overflow:visible;
  color:#f1f9ff;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 9px rgba(180,228,255,.55));
  pointer-events:none;
}

.trip-critical-layer .critical-film-cta:focus-visible{
  outline:2px solid #afe9ff!important;
  outline-offset:4px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.3),0 0 0 5px rgba(var(--search-blue),.09),0 18px 39px rgba(45,54,177,.34)!important;
}
.trip-critical-layer .critical-film-cta:active{transform:scale(.982)!important;filter:brightness(.97)}

.trip-critical-layer .critical-result-toolbar{
  width:100%!important;
  min-height:64px!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.trip-critical-layer .critical-result-toolbar>button{
  position:relative!important;
  min-width:44px!important;
  min-height:56px!important;
  height:64px!important;
  margin:0!important;
  padding:7px 4px!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  gap:7px!important;
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
  color:#cecad4!important;
  box-shadow:none!important;
  transition:background var(--motion-fast) var(--motion-curve),color var(--motion-fast) var(--motion-curve),transform var(--motion-fast) var(--search-ease)!important;
}

.trip-critical-layer .critical-result-toolbar>button+button::before{
  content:"";
  position:absolute;
  left:0;
  top:13px;
  bottom:13px;
  width:1px;
  background:linear-gradient(transparent,rgba(255,255,255,.12),transparent);
}

.trip-critical-layer .critical-tool-icon{
  width:24px!important;
  height:24px!important;
  display:block!important;
  overflow:visible!important;
  color:#8edcff!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.7!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  filter:drop-shadow(0 0 8px rgba(var(--search-blue),.31))!important;
  pointer-events:none;
}

.trip-critical-layer .critical-result-toolbar>button>span{
  font-size:12px!important;
  font-weight:510!important;
  line-height:1!important;
}

.trip-critical-layer .critical-result-toolbar>button:focus-visible{
  outline:none!important;
  background:rgba(var(--search-blue),.07)!important;
  color:#f5f2f8!important;
}
@media (hover: hover) and (pointer: fine){.trip-critical-layer .critical-result-toolbar>button:hover{
  outline:none!important;
  background:rgba(var(--search-blue),.07)!important;
  color:#f5f2f8!important;
}}/* (29 October 2026) hover only for a real pointer: a finger leaves :hover on whatever it last touched (hub/docs/TASTE-INTRO-2026-10-29.md) */
.trip-critical-layer .critical-result-toolbar>button:focus-visible{
  box-shadow:inset 0 0 0 1px rgba(var(--search-blue),.48)!important;
}
.trip-critical-layer .critical-result-toolbar>button:active{transform:scale(.95)!important}

/* The product already uses `.saved` and `aria-pressed="true"` for persistent
   bookmark actions. Honour that established state contract here without
   inventing a visual success state before the controller has confirmed it. */
.trip-critical-layer .critical-result-toolbar>button.saved:has(.critical-tool-save),
.trip-critical-layer .critical-result-toolbar>button[aria-pressed="true"]:has(.critical-tool-save){
  background:linear-gradient(145deg,rgba(var(--search-blue),.13),rgba(var(--search-violet),.08))!important;
  color:#f2fbff!important;
  box-shadow:inset 0 0 0 1px rgba(var(--search-blue),.28),0 0 22px rgba(var(--search-blue),.08)!important;
}

.trip-critical-layer .critical-result-toolbar>button.saved:has(.critical-tool-save) .critical-tool-save,
.trip-critical-layer .critical-result-toolbar>button[aria-pressed="true"]:has(.critical-tool-save) .critical-tool-save{
  color:#b9ebff!important;
  fill:rgba(var(--search-blue),.16)!important;
  filter:drop-shadow(0 0 10px rgba(var(--search-blue),.48))!important;
}

/* Compact-height iPhones ------------------------------------------------ */

/* The controller marks the tallest devices explicitly. The base clamp()
   geometry already scales with width; these variables preserve the extra
   vertical air on 430 x 932 class screens without stretching the cards. */
.trip-critical-layer.critical-tall{
  --search-request-y:clamp(94px,23.5cqw,104px);
  --search-title-y:clamp(180px,44.7cqw,196px);
  --search-shelf-y:clamp(257px,63.8cqw,278px);
  --search-hint-y:clamp(548px,134.6cqw,584px);
  --search-results-y:clamp(590px,145cqw,630px);
}

.trip-critical-layer.critical-tall .critical-header{top:max(30px,var(--critical-header-y,30px))!important}
.trip-critical-layer.critical-tall.triptych-signature{--search-hint-y:calc(clamp(548px,134.6cqw,584px) + 20px)}
.trip-critical-layer.critical-tall.is-live .critical-request-capsule{height:72px!important;min-height:72px!important}
.trip-critical-layer.critical-tall.trip-phase-settled .critical-card-stage{height:306px!important}
.trip-critical-layer.critical-tall .critical-film-cta{min-height:58px!important;padding-top:12px!important;padding-bottom:12px!important}
.trip-critical-layer.critical-tall.trip-phase-settled .critical-results{
  padding-bottom:max(92px,calc(58px + env(safe-area-inset-bottom)))!important;
}

.trip-critical-layer.critical-compact{
  --search-request-y:74px;
  --search-title-y:151px;
  --search-shelf-y:209px;
  --search-hint-y:447px;
  --search-results-y:478px;
}

.trip-critical-layer.critical-compact .critical-header{top:22px!important}
.trip-critical-layer.critical-compact .critical-brand-lockup .brand-mark{width:31px!important;height:31px!important}
.trip-critical-layer.critical-compact .critical-brand-lockup .wordmark{width:84px!important}
.trip-critical-layer.critical-compact .critical-brand-lockup .critical-brand-aura{width:186px!important;height:68px!important}

.trip-critical-layer.critical-compact.is-live .critical-request-capsule{
  min-height:66px!important;
  height:66px!important;
  padding:8px 15px!important;
  border-radius:18px!important;
}
.trip-critical-layer.critical-compact .critical-request-capsule>span{font-size:8.5px!important}
.trip-critical-layer.critical-compact .critical-request-capsule>p{font-size:13.5px!important;line-height:1.2!important;-webkit-line-clamp:2!important}

.trip-critical-layer.critical-compact .critical-engine-stage{
  top:145px!important;
  transform:translateX(-50%) scale(.8)!important;
}

.trip-critical-layer.critical-compact.trip-phase-forming .critical-engine-stage{
  transform:translateX(-50%) translateY(-23px) scale(.6)!important;
}

.trip-critical-layer.critical-compact.trip-phase-settled .critical-results-heading>.eyebrow{font-size:8px!important}
.trip-critical-layer.critical-compact.trip-phase-settled .critical-results-heading>h1{margin-top:5px!important;font-size:33px!important}

.trip-critical-layer.critical-compact.trip-phase-settled .critical-card-stage{
  height:234px!important;
}

.trip-critical-layer.critical-compact.trip-phase-settled .critical-card[data-slot],
.trip-critical-layer.critical-compact.trip-phase-settled .critical-card:not([data-slot]){
  width:clamp(142px,39%,160px)!important;
}

.trip-critical-layer.critical-compact.trip-phase-settled .critical-card[data-slot="left"],
.trip-critical-layer.critical-compact.trip-phase-settled .critical-card.rank-3:not([data-slot]){
  transform:translate3d(-117%,28px,0) rotateY(7deg) scale(.75)!important;
  transform:translate3d(calc(-117% + (var(--critical-drag-progress,0) * 64px)),28px,0) rotateY(7deg) scale(.75)!important;
}
.trip-critical-layer.critical-compact.trip-phase-settled .critical-card[data-slot="right"],
.trip-critical-layer.critical-compact.trip-phase-settled .critical-card.rank-2:not([data-slot]){
  transform:translate3d(17%,28px,0) rotateY(-7deg) scale(.75)!important;
  transform:translate3d(calc(17% + (var(--critical-drag-progress,0) * 64px)),28px,0) rotateY(-7deg) scale(.75)!important;
}

.trip-critical-layer.critical-compact.trip-phase-settled .critical-card-front{padding:14px 11px!important}
.trip-critical-layer.critical-compact.trip-phase-settled .critical-card-front strong{font-size:12px!important}
.trip-critical-layer.critical-compact.trip-phase-settled .critical-card[data-slot="center"] .critical-card-front strong,
.trip-critical-layer.critical-compact.trip-phase-settled .critical-card.rank-1:not([data-slot]) .critical-card-front strong{font-size:14px!important}
.trip-critical-layer.critical-compact.trip-phase-settled .critical-card-front small{min-height:21px!important;margin-top:6px!important;padding:4px 7px!important;font-size:7.8px!important}

.trip-critical-layer.critical-compact.trip-phase-settled .critical-compare-hint{font-size:9px!important}
.trip-critical-layer.critical-compact.trip-phase-settled .critical-compare-hint>i{width:22px!important}

.trip-critical-layer.critical-compact.trip-phase-settled .critical-results{
  margin-left:17px!important;
  margin-right:17px!important;
  gap:8px!important;
  padding-bottom:max(84px,calc(50px + env(safe-area-inset-bottom)))!important;
}
.trip-critical-layer.critical-compact .critical-insight{padding-bottom:10px!important}
.trip-critical-layer.critical-compact .critical-insight>span{margin-bottom:5px!important;font-size:8px!important}
.trip-critical-layer.critical-compact .critical-insight>p{font-size:12px!important;line-height:1.38!important}
.trip-critical-layer.critical-compact .critical-film-cta{
  height:auto!important;
  min-height:48px!important;
  padding:10px 15px!important;
  grid-template-columns:20px minmax(0,1fr) 20px!important;
  gap:6px!important;
  font-size:13px!important;
  line-height:1.18!important;
}
.trip-critical-layer.critical-compact .critical-cta-spacer{width:20px;height:20px}
.trip-critical-layer.critical-compact .critical-result-toolbar{min-height:52px!important}
.trip-critical-layer.critical-compact .critical-result-toolbar>button{height:52px!important;min-height:48px!important;gap:4px!important}
.trip-critical-layer.critical-compact .critical-tool-icon{width:20px!important;height:20px!important}
.trip-critical-layer.critical-compact .critical-result-toolbar>button>span{font-size:10.5px!important}

/* Accessibility motion ------------------------------------------------- */

@media(prefers-reduced-motion:reduce){
  .trip-critical-layer .critical-atmosphere *,
  .trip-critical-layer .critical-engine-stage,
  .trip-critical-layer .critical-engine-stage *,
  .trip-critical-layer .critical-energy-paths *,
  .trip-critical-layer .critical-card,
  .trip-critical-layer .critical-card *,
  .trip-critical-layer .critical-status,
  .trip-critical-layer .critical-results-heading,
  .trip-critical-layer .critical-compare-hint,
  .trip-critical-layer .critical-results,
  .trip-critical-layer .critical-film-cta,
  .trip-critical-layer .critical-result-toolbar button{
    animation:none!important;
    transition-duration:var(--motion-fast)!important;
    transition-timing-function:var(--motion-curve)!important;
  }

  .trip-critical-layer.card100-scene .critical-card-stage{perspective:none!important;transform-style:flat!important}
  .trip-critical-layer.card100-scene .critical-card,
  .trip-critical-layer.card100-scene .critical-card-inner{transform-style:flat!important}
  .trip-critical-layer.card100-scene .critical-card-inner,
  .trip-critical-layer.card100-scene .critical-card.is-flipping .critical-card-inner,
  .trip-critical-layer.card100-scene .critical-card.is-revealed .critical-card-inner{transform:none!important}
  .trip-critical-layer.card100-scene .critical-card-back,
  .trip-critical-layer.card100-scene .critical-card-front{
    transform:none!important;
    backface-visibility:visible!important;
    -webkit-backface-visibility:visible!important;
    transition:opacity var(--motion-fast) var(--motion-curve)!important;
  }
  .trip-critical-layer.card100-scene .critical-card-front{opacity:0!important}
  .trip-critical-layer.card100-scene .critical-card-back{opacity:1!important}
  .trip-critical-layer.card100-scene .critical-card.is-flipping[data-face-hydrated="true"] .critical-card-front,
  .trip-critical-layer.card100-scene .critical-card.is-revealed[data-face-hydrated="true"] .critical-card-front{opacity:1!important}
  .trip-critical-layer.card100-scene .critical-card.is-flipping[data-face-hydrated="true"] .critical-card-back,
  .trip-critical-layer.card100-scene .critical-card.is-revealed[data-face-hydrated="true"] .critical-card-back{opacity:0!important}

  .trip-critical-layer.trip-phase-settled .critical-card[data-slot="center"]{transform:translate3d(-50%,0,0)!important}
  .trip-critical-layer.trip-phase-settled .critical-card[data-slot="left"]{transform:translate3d(-126%,28px,0) scale(.76)!important}
  .trip-critical-layer.trip-phase-settled .critical-card[data-slot="right"]{transform:translate3d(26%,28px,0) scale(.76)!important}
  .trip-critical-layer.trip-phase-settled.is-carousel-moving[data-carousel-direction="next"] .critical-card[data-slot="right"],
  .trip-critical-layer.trip-phase-settled.is-carousel-moving[data-carousel-direction="previous"] .critical-card[data-slot="left"]{opacity:0!important}
  .trip-critical-layer .critical-card-energy,
  .trip-critical-layer .critical-final-bloom{display:none!important}
}

.device.manual-reduced-motion .trip-critical-layer .critical-atmosphere *,
.device.manual-reduced-motion .trip-critical-layer .critical-engine-stage,
.device.manual-reduced-motion .trip-critical-layer .critical-engine-stage *,
.device.manual-reduced-motion .trip-critical-layer .critical-energy-paths *,
.device.manual-reduced-motion .trip-critical-layer .critical-card,
.device.manual-reduced-motion .trip-critical-layer .critical-card *,
.device.manual-reduced-motion .trip-critical-layer .critical-status,
.device.manual-reduced-motion .trip-critical-layer .critical-results-heading,
.device.manual-reduced-motion .trip-critical-layer .critical-compare-hint,
.device.manual-reduced-motion .trip-critical-layer .critical-results,
.device.manual-reduced-motion .trip-critical-layer .critical-film-cta,
.device.manual-reduced-motion .trip-critical-layer .critical-result-toolbar button{
  animation:none!important;
  transition-duration:var(--motion-fast)!important;
  transition-timing-function:var(--motion-curve)!important;
}

.device.manual-reduced-motion .trip-critical-layer.card100-scene .critical-card-stage{perspective:none!important;transform-style:flat!important}
.device.manual-reduced-motion .trip-critical-layer.card100-scene .critical-card,
.device.manual-reduced-motion .trip-critical-layer.card100-scene .critical-card-inner{transform-style:flat!important}
.device.manual-reduced-motion .trip-critical-layer.card100-scene .critical-card-inner,
.device.manual-reduced-motion .trip-critical-layer.card100-scene .critical-card.is-flipping .critical-card-inner,
.device.manual-reduced-motion .trip-critical-layer.card100-scene .critical-card.is-revealed .critical-card-inner{transform:none!important}
.device.manual-reduced-motion .trip-critical-layer.card100-scene .critical-card-back,
.device.manual-reduced-motion .trip-critical-layer.card100-scene .critical-card-front{
  transform:none!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  transition:opacity var(--motion-fast) var(--motion-curve)!important;
}
.device.manual-reduced-motion .trip-critical-layer.card100-scene .critical-card-front{opacity:0!important}
.device.manual-reduced-motion .trip-critical-layer.card100-scene .critical-card-back{opacity:1!important}
.device.manual-reduced-motion .trip-critical-layer.card100-scene .critical-card.is-flipping[data-face-hydrated="true"] .critical-card-front,
.device.manual-reduced-motion .trip-critical-layer.card100-scene .critical-card.is-revealed[data-face-hydrated="true"] .critical-card-front{opacity:1!important}
.device.manual-reduced-motion .trip-critical-layer.card100-scene .critical-card.is-flipping[data-face-hydrated="true"] .critical-card-back,
.device.manual-reduced-motion .trip-critical-layer.card100-scene .critical-card.is-revealed[data-face-hydrated="true"] .critical-card-back{opacity:0!important}
.device.manual-reduced-motion .trip-critical-layer.trip-phase-settled .critical-card[data-slot="center"]{transform:translate3d(-50%,0,0)!important}
.device.manual-reduced-motion .trip-critical-layer.trip-phase-settled .critical-card[data-slot="left"]{transform:translate3d(-126%,28px,0) scale(.76)!important}
.device.manual-reduced-motion .trip-critical-layer.trip-phase-settled .critical-card[data-slot="right"]{transform:translate3d(26%,28px,0) scale(.76)!important}
.device.manual-reduced-motion .trip-critical-layer.trip-phase-settled.is-carousel-moving[data-carousel-direction="next"] .critical-card[data-slot="right"],
.device.manual-reduced-motion .trip-critical-layer.trip-phase-settled.is-carousel-moving[data-carousel-direction="previous"] .critical-card[data-slot="left"]{opacity:0!important}
.device.manual-reduced-motion .trip-critical-layer .critical-card-energy,
.device.manual-reduced-motion .trip-critical-layer .critical-final-bloom{display:none!important}

/* --------------------------------------------------------------------------
   Exact TRIPTIC share preview

   Sharing the revealed set must preserve the result the user just saw. The
   centre card remains rank one, with the same rank-three / rank-one / rank-two
   cover-flow order as the settled result. Real poster images are rendered by
   the runtime; these rules only frame and protect their legibility.
   -------------------------------------------------------------------------- */

.share-screen.trio-share .share-trio-preview{
  position:relative!important;
  isolation:isolate;
  height:245px!important;
  margin:14px 0 13px!important;
  padding:17px 14px!important;
  overflow:hidden;
  border:1px solid rgba(151,187,255,.13)!important;
  background:
    radial-gradient(circle at 50% 38%,rgba(131,76,246,.19),transparent 43%),
    radial-gradient(circle at 18% 15%,rgba(89,186,255,.09),transparent 34%),
    linear-gradient(152deg,rgba(20,19,34,.92),rgba(7,7,13,.96))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.055),0 24px 58px rgba(0,0,0,.34),0 0 42px rgba(115,83,232,.08)!important;
}

.share-screen.trio-share .share-trio-preview::before{
  content:"";
  position:absolute;
  z-index:0;
  left:22%;
  right:22%;
  bottom:-31px;
  height:91px;
  border-radius:50%;
  background:rgba(113,75,230,.16);
  filter:blur(30px);
  pointer-events:none;
}

.share-screen.trio-share .share-trio-preview::after{
  content:"";
  position:absolute;
  z-index:4;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at 48% 38%,rgba(103,210,255,.16),transparent 28%),
    radial-gradient(circle at 58% 48%,rgba(157,86,246,.13),transparent 40%);
  opacity:0;
  pointer-events:none;
  animation:share-state-bloom var(--motion-slow) var(--motion-curve) both;
}

.share-screen.trio-share .share-trio-preview>.share-trio-card{
  --share-card-target:translateY(8px);
  position:relative!important;
  z-index:1;
  flex:0 0 96px;
  width:96px!important;
  height:188px!important;
  margin-left:-17px!important;
  overflow:hidden;
  border:1px solid rgba(216,227,255,.22)!important;
  border-radius:17px!important;
  background:linear-gradient(152deg,#242033,#08080e)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 19px 38px rgba(0,0,0,.52)!important;
  transform:var(--share-card-target);
  transform-origin:50% 82%;
  animation:share-exact-trio-settle var(--motion-slow) var(--search-enter) both!important;
  animation-delay:calc(var(--share-index,0)*58ms)!important;
}

.share-screen.trio-share .share-trio-preview>.share-trio-card:first-child{margin-left:0!important}
.share-screen.trio-share .share-trio-preview>.share-trio-card:nth-child(1){--share-index:0}
.share-screen.trio-share .share-trio-preview>.share-trio-card:nth-child(2){--share-index:1}
.share-screen.trio-share .share-trio-preview>.share-trio-card:nth-child(3){--share-index:2}
.share-screen.trio-share .share-trio-preview>.share-trio-card.rank-3{--share-card-target:rotate(-3.5deg) translateY(8px);z-index:1}
.share-screen.trio-share .share-trio-preview>.share-trio-card.rank-1{--share-card-target:translateY(-1px) scale(1.055);z-index:3;border-color:rgba(197,169,255,.42)!important;box-shadow:inset 0 1px rgba(255,255,255,.17),0 24px 48px rgba(0,0,0,.58),0 0 26px rgba(141,85,244,.2)!important}
.share-screen.trio-share .share-trio-preview>.share-trio-card.rank-2{--share-card-target:rotate(3.5deg) translateY(8px);z-index:2}

@keyframes share-exact-trio-settle{
  from{opacity:0;transform:translateY(10px) scale(.985);filter:blur(.5px)}
  to{opacity:1;transform:var(--share-card-target);filter:none}
}

@keyframes share-state-bloom{
  0%{opacity:0}
  36%{opacity:.48}
  100%{opacity:0}
}

.share-screen.trio-share .share-trio-poster{
  position:absolute!important;
  z-index:0;
  inset:0!important;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  border:0;
  object-fit:cover;
  object-position:center 30%;
  background-position:center 30%!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  transform:scale(1.012);
}

.share-screen.trio-share .share-trio-poster-fallback{
  position:absolute;
  z-index:0;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 38%,rgba(91,187,255,.13),transparent 28%),
    linear-gradient(150deg,rgba(31,29,49,.98),rgba(7,7,14,.995) 72%);
}

.share-screen.trio-share .share-trio-poster-fallback[hidden]{display:none!important}

.share-screen.trio-share .share-trio-poster-fallback .brand-mark{
  position:absolute!important;
  top:62px!important;
  left:50%!important;
  width:30px!important;
  height:30px!important;
  margin:0!important;
  opacity:.62;
  transform:translateX(-50%);
}

.share-screen.trio-share .share-trio-poster-fallback em{
  position:absolute;
  left:5px;
  right:5px;
  bottom:42px;
  color:#9cacc4;
  font-size:5.5px;
  font-style:normal;
  font-weight:720;
  letter-spacing:.11em;
  line-height:1.25;
  text-align:center;
}

.share-screen.trio-share .share-trio-scrim{
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(180deg,rgba(2,3,9,.06) 25%,rgba(2,3,9,.16) 47%,rgba(2,3,9,.91) 78%,rgba(2,3,9,.99) 100%);
  pointer-events:none;
}

.share-screen.trio-share .share-trio-rank{
  position:absolute!important;
  z-index:3;
  top:8px!important;
  left:8px!important;
  display:grid;
  place-items:center;
  min-width:24px;
  height:18px;
  padding:0 6px;
  border:1px solid rgba(225,236,255,.19);
  border-radius:999px;
  color:#edf7ff!important;
  background:rgba(7,9,18,.58);
  box-shadow:inset 0 1px rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(9px) saturate(1.25);
  backdrop-filter:blur(9px) saturate(1.25);
  font-size:7px!important;
  font-weight:760;
  letter-spacing:.12em;
}

.share-screen.trio-share .share-trio-meta{
  position:absolute;
  z-index:3;
  left:9px;
  right:8px;
  bottom:9px;
  display:grid;
  gap:5px;
  min-width:0;
}

.share-screen.trio-share .share-trio-meta strong{
  display:-webkit-box;
  overflow:hidden;
  color:#fff;
  font-size:9.5px;
  font-weight:710;
  line-height:1.12;
  letter-spacing:-.018em;
  text-shadow:0 1px 8px rgba(0,0,0,.85);
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

.share-screen.trio-share .share-trio-meta small{
  overflow:hidden;
  color:#c9eaff;
  font-size:6.4px;
  font-weight:720;
  line-height:1.15;
  letter-spacing:.055em;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:0 1px 7px rgba(0,0,0,.9);
}

.share-screen.trio-share .share-trio-preview.sealed>.share-trio-card{
  background:
    radial-gradient(circle at 50% 38%,rgba(102,191,255,.09),transparent 27%),
    linear-gradient(150deg,rgba(37,30,59,.98),rgba(7,7,14,.995) 72%)!important;
}

.share-screen.trio-share .share-trio-preview.sealed>.share-trio-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.035) 47%,transparent 64%);
  pointer-events:none;
}

.share-screen.trio-share .share-trio-preview.sealed>.share-trio-card>.brand-mark{
  position:absolute!important;
  z-index:2;
  top:70px!important;
  left:50%!important;
  bottom:auto!important;
  width:30px!important;
  height:30px!important;
  margin:0!important;
  opacity:.44!important;
  transform:translateX(-50%);
}

.share-screen.trio-share .share-trio-preview.sealed>.share-trio-card.rank-1>.brand-mark{
  opacity:.78!important;
  filter:drop-shadow(0 0 8px rgba(96,202,255,.24)) drop-shadow(0 0 13px rgba(151,89,245,.12));
}

.share-screen.trio-share .share-sealed-source{
  position:absolute;
  z-index:2;
  top:107px;
  left:50%;
  display:block;
  width:54px;
  transform:translateX(-50%);
  pointer-events:none;
}

.share-screen.trio-share .share-sealed-source .wordmark{
  display:block!important;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  opacity:.86;
  filter:drop-shadow(0 0 8px rgba(114,183,255,.14));
}

.share-screen.trio-share .share-trio-preview.sealed em{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:24px;
  color:#beb8ca;
  font-size:7.2px;
  font-style:normal;
  font-weight:720;
  letter-spacing:.16em;
  text-align:center;
}

.share-screen.trio-share{
  display:flex!important;
  flex-direction:column;
  min-height:100%;
  padding:14px 22px max(22px,env(safe-area-inset-bottom))!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  background:
    radial-gradient(ellipse at 90% 15%,rgba(116,66,225,.16),transparent 35%),
    radial-gradient(ellipse at 8% 46%,rgba(66,159,232,.08),transparent 33%),
    #050507!important;
}

.share-screen.trio-share .share-ambient{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.share-screen.trio-share>header{
  position:relative;
  z-index:2;
  flex:0 0 44px;
  min-height:44px;
  grid-template-columns:44px minmax(0,1fr) 44px!important;
}

.share-screen.trio-share>header>.circle-control{
  width:44px!important;
  height:44px!important;
  min-width:44px;
  min-height:44px;
}

.share-screen.trio-share>header>.share-header-title{
  color:#bbb2d4!important;
  font-size:10.5px!important;
  font-weight:720;
  line-height:1;
  letter-spacing:.155em!important;
}

.share-screen.trio-share .p20-share-formats{
  display:none!important;
}

.share-screen.trio-share .share-trio-preview{
  display:flex!important;
  flex:0 0 252px;
  align-items:center;
  justify-content:center;
  width:100%;
  height:252px!important;
  min-height:252px;
  margin:12px 0 12px!important;
  padding:17px 13px!important;
  border-radius:26px!important;
}

.share-screen.trio-share .share-trio-preview>.share-trio-card{
  flex-basis:100px;
  width:100px!important;
  height:196px!important;
  margin-left:-2px!important;
}

.share-screen.trio-share .share-trio-meta{
  left:9px;
  right:8px;
  bottom:10px;
  gap:5px;
}

.share-screen.trio-share .share-trio-meta strong{
  font-size:10.5px;
  line-height:1.13;
}

.share-screen.trio-share .share-trio-meta small{
  font-size:8px;
  line-height:1.15;
  letter-spacing:.02em;
}

.share-screen.trio-share .share-trio-scrim{
  background:linear-gradient(180deg,rgba(2,3,9,.045) 20%,rgba(2,3,9,.18) 44%,rgba(2,3,9,.93) 77%,rgba(2,3,9,.995) 100%);
}

.share-screen.trio-share .share-copy{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  padding:0 7px;
}

.share-screen.trio-share .share-copy h2{
  margin:0!important;
  color:#f7f7fb;
  font-size:26px!important;
  font-weight:720;
  line-height:1.04;
  letter-spacing:-.042em;
}

.share-screen.trio-share .share-copy-emphasis{
  color:transparent!important;
  background:linear-gradient(100deg,#74d6ff 3%,#8e70ff 58%,#af66f4 100%);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 28px rgba(122,153,255,.14);
}

.share-screen.trio-share .share-copy p{
  max-width:318px;
  margin:9px auto 0!important;
  color:#aaa6b4!important;
  font-size:11.5px!important;
  line-height:1.44!important;
}

.share-screen.trio-share .share-toggle{
  position:relative;
  z-index:2;
  flex:0 0 52px;
  min-height:52px;
  margin:13px 0 10px!important;
  padding:4px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:17px;
  background:rgba(18,17,28,.8)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.045),0 12px 30px rgba(0,0,0,.14);
}

.share-screen.trio-share .share-toggle button{
  min-width:0;
  min-height:44px;
  height:44px;
  font-size:11.5px!important;
  font-weight:650;
  transition:color var(--motion-fast) var(--motion-curve),background-color var(--motion-fast) var(--motion-curve),transform var(--motion-fast) var(--motion-curve);
}

.share-screen.trio-share .share-toggle button:active{transform:scale(.985)}

.share-screen.trio-share .share-toggle button.active{
  color:#f8fbff!important;
  background:linear-gradient(135deg,rgba(71,165,244,.23),rgba(128,72,228,.34))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.11),0 5px 16px rgba(41,24,91,.2);
}

/* Use the same unboxed cyan line icons, 44pt targets and quiet material rail
   as the Share / Save / Refine controls on the revealed result screen. */
.share-screen.trio-share .share-destinations{
  position:relative;
  z-index:2;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  flex:0 0 68px;
  width:100%;
  min-height:68px;
  margin:clamp(42px,7vh,64px) 0 10px!important;
  gap:0!important;
  overflow:hidden;
  border:1px solid rgba(161,174,220,.14);
  border-radius:21px;
  background:linear-gradient(145deg,rgba(34,31,52,.68),rgba(13,13,22,.82));
  box-shadow:inset 0 1px rgba(255,255,255,.055),0 14px 34px rgba(0,0,0,.2);
  -webkit-backdrop-filter:blur(24px) saturate(1.25);
  backdrop-filter:blur(24px) saturate(1.25);
}

.share-screen.trio-share .share-destination{
  position:relative;
  display:flex!important;
  min-width:0!important;
  min-height:64px!important;
  padding:7px 4px 6px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px!important;
  border:0;
  border-radius:0!important;
  color:#d7d3df!important;
  background:transparent!important;
  font-size:11.5px!important;
  transition:background-color var(--motion-fast) var(--motion-curve),transform var(--motion-fast) var(--motion-curve),color var(--motion-fast) var(--motion-curve);
}

.share-screen.trio-share .share-destination+.share-destination::before{
  content:"";
  position:absolute;
  left:0;
  top:15px;
  bottom:15px;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(191,192,223,.13),transparent);
}

.share-screen.trio-share .share-destination-icon{
  display:grid!important;
  place-items:center;
  width:24px!important;
  height:24px!important;
  min-width:24px;
  min-height:24px;
  border:0!important;
  border-radius:0!important;
  color:#69d4ff!important;
  background:none!important;
  box-shadow:none!important;
  font-style:normal;
  pointer-events:none;
}

.share-screen.trio-share .share-destination svg{
  width:24px!important;
  height:24px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.65!important;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(94,207,255,.26));
}

.share-screen.trio-share .share-destination-more svg circle{
  fill:currentColor!important;
  stroke:none!important;
}

.share-screen.trio-share .share-destination>span{
  color:#d5d1dc!important;
  font-size:11.5px!important;
  font-weight:590;
  line-height:1;
  letter-spacing:0!important;
  pointer-events:none;
}

@media(hover:hover){
  .share-screen.trio-share .share-destination:hover{
    color:#f4fbff!important;
    background:radial-gradient(circle at 50% 38%,rgba(94,207,255,.1),transparent 64%)!important;
  }
}

.share-screen.trio-share .share-destination:active{
  transform:scale(.96);
  background:rgba(94,207,255,.075)!important;
}

.share-screen.trio-share .share-destination:focus-visible,
.share-screen.trio-share .share-toggle button:focus-visible,
.share-screen.trio-share>.primary-button:focus-visible{
  outline:2px solid rgba(112,216,255,.9);
  outline-offset:-3px;
}

.share-screen.trio-share>.primary-button{
  position:relative;
  z-index:2;
  flex:0 0 52px;
  width:100%;
  height:52px!important;
  min-height:52px;
  border:1px solid rgba(220,231,255,.42)!important;
  border-radius:18px!important;
  color:#fff!important;
  background:linear-gradient(102deg,#5dbdf6 0%,#756fe9 49%,#9749de 100%)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.25),0 15px 34px rgba(49,49,151,.28),0 0 30px rgba(124,74,229,.12)!important;
  font-size:14px!important;
  font-weight:700;
  line-height:1;
  text-align:center;
  text-shadow:0 1px 8px rgba(30,20,75,.35);
}

.share-screen.trio-share>.primary-button:active{
  transform:scale(.985);
  box-shadow:inset 0 1px rgba(255,255,255,.2),0 8px 20px rgba(49,49,151,.22)!important;
}

.share-screen.trio-share.share-standard .share-destinations{margin-top:58px!important}

/* The runtime class is based on the real iPhone canvas, so desktop review
   scaling cannot accidentally trigger the compact layout. */
.share-screen.trio-share.share-compact{padding:10px 18px max(18px,env(safe-area-inset-bottom))!important}
.share-screen.trio-share.share-compact .share-trio-preview{flex-basis:208px;height:208px!important;min-height:208px;margin:8px 0!important;padding:13px 10px!important;border-radius:23px!important}
.share-screen.trio-share.share-compact .share-trio-preview>.share-trio-card{width:88px!important;height:166px!important;flex-basis:88px;margin-left:-2px!important;border-radius:15px!important}
.share-screen.trio-share.share-compact .share-trio-preview.sealed>.share-trio-card>.brand-mark{top:58px!important;width:27px!important;height:27px!important}
.share-screen.trio-share.share-compact .share-sealed-source{top:90px;width:48px}
.share-screen.trio-share.share-compact .share-trio-preview.sealed em{bottom:20px;font-size:6.75px;letter-spacing:.14em}
.share-screen.trio-share.share-compact .share-trio-rank{top:7px!important;left:7px!important;min-width:22px;height:17px;font-size:6.5px!important}
.share-screen.trio-share.share-compact .share-trio-meta{left:8px;right:7px;bottom:8px;gap:4px}
.share-screen.trio-share.share-compact .share-trio-meta strong{font-size:9.4px;line-height:1.1}
.share-screen.trio-share.share-compact .share-trio-meta small{font-size:7.1px;letter-spacing:0}
.share-screen.trio-share.share-compact .share-copy{padding:0 3px}
.share-screen.trio-share.share-compact .share-copy h2{font-size:22px!important}
.share-screen.trio-share.share-compact .share-copy p{max-width:300px;margin-top:6px!important;font-size:10.2px!important;line-height:1.36!important}
.share-screen.trio-share.share-compact .share-toggle{flex-basis:52px;min-height:52px;margin:7px 0 7px!important}
.share-screen.trio-share.share-compact .share-toggle button{height:44px;min-height:44px;font-size:10.5px!important}
.share-screen.trio-share.share-compact .share-destinations{flex-basis:60px;min-height:60px;margin-top:34px!important;margin-bottom:8px!important;border-radius:19px}
.share-screen.trio-share.share-compact .share-destination{min-height:58px!important;padding:5px 3px 4px;font-size:10.5px!important}
.share-screen.trio-share.share-compact .share-destination-icon,
.share-screen.trio-share.share-compact .share-destination svg{width:21px!important;height:21px!important;min-width:21px;min-height:21px}
.share-screen.trio-share.share-compact .share-destination>span{font-size:10.5px!important}
.share-screen.trio-share.share-compact>.primary-button{flex-basis:48px;height:48px!important;min-height:48px;font-size:13px!important}

/* Defensive fallback for embedded previews that bypass the runtime class. */
@media(max-width:560px) and (max-height:720px){
  .share-screen.trio-share{padding:10px 18px max(18px,env(safe-area-inset-bottom))!important}
  .share-screen.trio-share .share-trio-preview{flex-basis:208px;height:208px!important;min-height:208px;margin:8px 0!important;padding:13px 10px!important;border-radius:23px!important}
  .share-screen.trio-share .share-trio-preview>.share-trio-card{width:88px!important;height:166px!important;flex-basis:88px;margin-left:-2px!important;border-radius:15px!important}
  .share-screen.trio-share .share-trio-preview.sealed>.share-trio-card>.brand-mark{top:58px!important;width:27px!important;height:27px!important}
  .share-screen.trio-share .share-sealed-source{top:90px;width:48px}
  .share-screen.trio-share .share-trio-preview.sealed em{bottom:20px;font-size:6.75px;letter-spacing:.14em}
  .share-screen.trio-share .share-trio-rank{top:7px!important;left:7px!important;min-width:22px;height:17px;font-size:6.5px!important}
  .share-screen.trio-share .share-trio-meta{left:8px;right:7px;bottom:8px;gap:4px}
  .share-screen.trio-share .share-trio-meta strong{font-size:9.4px;line-height:1.1}
  .share-screen.trio-share .share-trio-meta small{font-size:7.1px;letter-spacing:0}
  .share-screen.trio-share .share-copy{padding:0 3px}
  .share-screen.trio-share .share-copy h2{font-size:22px!important}
  .share-screen.trio-share .share-copy p{max-width:300px;margin-top:6px!important;font-size:10.2px!important;line-height:1.36!important}
  .share-screen.trio-share .share-toggle{flex-basis:52px;min-height:52px;margin:7px 0 7px!important}
  .share-screen.trio-share .share-toggle button{height:44px;min-height:44px;font-size:10.5px!important}
  .share-screen.trio-share .share-destinations{flex-basis:60px;min-height:60px;margin-top:34px!important;margin-bottom:8px!important;border-radius:19px}
  .share-screen.trio-share .share-destination{min-height:58px!important;padding:5px 3px 4px;font-size:10.5px!important}
  .share-screen.trio-share .share-destination-icon,.share-screen.trio-share .share-destination svg{width:21px!important;height:21px!important;min-width:21px;min-height:21px}
  .share-screen.trio-share .share-destination>span{font-size:10.5px!important}
  .share-screen.trio-share>.primary-button{flex-basis:48px;height:48px!important;min-height:48px;font-size:13px!important}
}

.share-screen.trio-share.share-tall{
  padding-top:18px!important;
  padding-bottom:max(28px,env(safe-area-inset-bottom))!important;
}

.share-screen.trio-share.share-tall .share-trio-preview{
  flex-basis:276px;
  height:276px!important;
  min-height:276px;
  margin:16px 0 15px!important;
}

.share-screen.trio-share.share-tall .share-trio-preview>.share-trio-card{
  flex-basis:106px;
  width:106px!important;
  height:208px!important;
  margin-left:-3px!important;
}

.share-screen.trio-share.share-tall .share-trio-preview.sealed>.share-trio-card>.brand-mark{top:77px!important}
.share-screen.trio-share.share-tall .share-sealed-source{top:116px;width:58px}
.share-screen.trio-share.share-tall .share-copy h2{font-size:28px!important}
.share-screen.trio-share.share-tall .share-copy p{font-size:12px!important}
.share-screen.trio-share.share-tall .share-trio-meta small{font-size:8.25px}
.share-screen.trio-share.share-tall .share-toggle{flex-basis:52px;min-height:52px;margin-top:15px!important}
.share-screen.trio-share.share-tall .share-toggle button{height:44px;min-height:44px}
.share-screen.trio-share.share-tall .share-destinations{flex-basis:72px;min-height:72px;margin-top:64px!important;margin-bottom:12px!important}
.share-screen.trio-share.share-tall .share-destination{min-height:68px!important}
.share-screen.trio-share.share-tall>.primary-button{flex-basis:54px;height:54px!important;min-height:54px}

@media(prefers-reduced-motion:reduce){
  .share-screen.trio-share .share-trio-preview>.share-trio-card{animation:none!important;filter:none!important}
  .share-screen.trio-share .share-trio-preview::after{animation:none!important;opacity:0!important}
}

.recommendation-preserved-query {
  width:100%;
  max-width:34rem;
  margin:24px auto;
  padding:18px 20px;
  border:1px solid rgba(196,181,253,.18);
  border-radius:20px;
  background:rgba(167,139,250,.06);
  color:#e6e0f4;
  font-size:clamp(15px,1rem,20px);
  line-height:1.6;
  text-align:left;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
  flex-shrink:0;
}
.splash-screen .aeroboss-signature {
  position:absolute;
  bottom:max(40px,env(safe-area-inset-bottom));
  color:#aaa4b8;
  font-size:11px;
  letter-spacing:.08em;
  z-index:2;
}
.device .taste-pace-control,
.device .feedback-link,
.device .spoiler-safe button,
.device .media-trailer-external,
.device .feedback-sheet>div>button {
  min-height:44px!important;
  min-width:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:normal;
  line-height:1.4;
}
.device .feedback-sheet>div>button { width:100%; justify-content:space-between; padding:12px 16px; }
.device .feedback-sheet { overflow-y:auto; }
.device .persistent-glass-nav button { overflow-wrap:normal; }
.device :is(button,a,input,textarea,select):focus-visible {
  outline:2px solid #b6e8ff;
  outline-offset:3px;
}
.recommendation-recovery {
  overflow-y:auto!important;
  padding-bottom:max(28px,env(safe-area-inset-bottom))!important;
}
.recommendation-recovery .primary-button,
.recommendation-recovery .quiet-button { min-height:48px; height:auto; flex-shrink:0; white-space:normal; }
.recommendation-recovery .state-orb { flex-shrink:0; display:grid; place-items:center; width:200px; height:150px; margin:0 0 24px; }
.recommendation-recovery .state-orb>* { transform:scale(.65)!important; transform-origin:center; }
.recommendation-recovery .quiet-button { font-size:14px!important; margin-top:6px; }
@media(max-height:700px) {
  .recommendation-recovery .state-orb { margin-top:0!important; margin-bottom:24px!important; height:80px!important; }
  .recommendation-recovery .state-orb>* { transform:scale(.4)!important; }
  .recommendation-recovery h1 { font-size:28px!important; }
  .recommendation-recovery .recommendation-preserved-query { margin:16px auto; }
}
@media(forced-colors:active) { .recommendation-preserved-query { color:CanvasText; border-color:CanvasText; } }

/* A cancelled Film flight must not leave an invisible waiting surface. */
#device .critical-film-layer.is-motion-settled{animation:none!important;transition:none!important;transform:none!important;scroll-behavior:auto!important}

.device.manual-reduced-motion .share-screen.trio-share .share-trio-preview>.share-trio-card{animation:none!important;filter:none!important}
.device.manual-reduced-motion .share-screen.trio-share .share-trio-preview::after{animation:none!important;opacity:0!important}

@media(forced-colors:active){
  .share-screen.trio-share .share-copy-emphasis{
    color:CanvasText!important;
    background:none!important;
    -webkit-text-fill-color:CanvasText;
    text-shadow:none;
  }
}

/* (13 November 2026; the owner: the gold launch on every launch) the app's own splash wears the launch cover's gold brand at the
   cover's sizes, on its plum-black room, still (static-shell.html): the same picture if it is ever seen under the cover.
   (Specific enough to stand over design-system.css and ds-look.css, which load after this file.) */
html #device > .screen.splash-screen { background: #0D0714; }
html #device > .screen.splash-screen::before, html #device > .screen.splash-screen::after { content: none !important; }
html #device > .screen.splash-screen > .splash-brand.is-gold { gap: 24px; animation: none !important; }
html #device > .screen.splash-screen > .splash-brand.is-gold > .brand-mark.large { width: 90px; height: 100px; object-fit: contain; animation: none !important; }
html #device > .screen.splash-screen > .splash-brand.is-gold > .wordmark { width: 154px; height: auto; animation: none !important; }
html #device > .screen.splash-screen > p { font-size: 14px; color: #b3aabe; letter-spacing: .015em; animation: none !important; }

/* ===== prototype-src/cryptic-premium.css ===== */
/* Premium Daily Cryptic
   Final presentation owner for the server-backed daily game, result, ranking,
   archive and membership surfaces. All materials remain legible when native
   transparency is reduced and every screen scrolls on compact iPhones. */

:root {
  --cryptic-ink: #f6f7fb;
  --cryptic-muted: #9299aa;
  --cryptic-dim: #626979;
  --cryptic-line: rgba(154, 174, 211, .17);
  --cryptic-line-strong: rgba(162, 193, 239, .34);
  --cryptic-surface: rgba(10, 14, 25, .86);
  --cryptic-surface-solid: #0b0e18;
  --cryptic-cyan: #65e8ff;
  --cryptic-blue: #76a7ff;
  --cryptic-purple: #b866ff;
  --cryptic-success: #82f1c0;
  --cryptic-danger: #ff8f9e;
  --cryptic-radius: 24px;
}

.premium-cryptic,
.premium-cryptic-home,
.premium-cryptic-play,
.premium-cryptic-result,
.premium-cryptic-leaderboard,
.premium-cryptic-archive,
.premium-cryptic-paywall {
  box-sizing: border-box;
  color: var(--cryptic-ink);
  color-scheme: dark;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(70% 42% at 50% -4%, rgba(77, 139, 255, .12), transparent 72%),
    radial-gradient(55% 45% at 106% 30%, rgba(160, 71, 255, .07), transparent 75%),
    #03050b;
  padding-top: max(18px, env(safe-area-inset-top));
  padding-bottom: max(30px, calc(env(safe-area-inset-bottom) + 18px));
  isolation: isolate;
}

.premium-cryptic *,
.premium-cryptic-home *,
.premium-cryptic-play *,
.premium-cryptic-result *,
.premium-cryptic-leaderboard *,
.premium-cryptic-archive *,
.premium-cryptic-paywall * { box-sizing: border-box; }

.premium-cryptic::-webkit-scrollbar,
.premium-cryptic-home::-webkit-scrollbar,
.premium-cryptic-play::-webkit-scrollbar,
.premium-cryptic-result::-webkit-scrollbar,
.premium-cryptic-leaderboard::-webkit-scrollbar,
.premium-cryptic-archive::-webkit-scrollbar,
.premium-cryptic-paywall::-webkit-scrollbar { display: none; }

.premium-cryptic button,
.premium-cryptic .circle-control { min-width: 44px; min-height: 44px; touch-action: manipulation; }

.premium-cryptic-home button,
.premium-cryptic-play button,
.premium-cryptic-result button,
.premium-cryptic-leaderboard button,
.premium-cryptic-archive button,
.premium-cryptic-paywall button { min-height: 44px; touch-action: manipulation; }

.premium-cryptic button:focus-visible,
.premium-cryptic input:focus-visible,
.premium-cryptic summary:focus-visible,
.premium-cryptic-home button:focus-visible,
.premium-cryptic-play button:focus-visible,
.premium-cryptic-play input:focus-visible,
.premium-cryptic-result button:focus-visible,
.premium-cryptic-leaderboard button:focus-visible,
.premium-cryptic-archive button:focus-visible,
.premium-cryptic-paywall button:focus-visible {
  outline: 3px solid var(--cryptic-cyan) !important;
  outline-offset: 3px;
}

.premium-cryptic button:disabled,
.premium-cryptic button[aria-disabled="true"] {
  cursor: default;
  opacity: .44;
  filter: saturate(.55);
}

.premium-cryptic-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.premium-cryptic-atmosphere::before,
.premium-cryptic-atmosphere::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .11;
}

.premium-cryptic-atmosphere::before { top: -170px; left: -80px; background: var(--cryptic-cyan); }
.premium-cryptic-atmosphere::after { right: -190px; top: 28%; background: var(--cryptic-purple); }

.premium-cryptic-header {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  min-height: 56px;
  width: 100%;
  padding: 0 18px;
}

.premium-cryptic-header .critical-brand-lockup {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.premium-cryptic-header .critical-brand-lockup .brand-mark { width: 30px; height: 30px; }
.premium-cryptic-header .critical-brand-lockup .wordmark { max-width: 112px; }

.premium-cryptic-header .circle-control {
  position: static !important;
  margin: 0 !important;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(179, 197, 230, .21);
  background: rgba(9, 13, 23, .82);
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}

.premium-cryptic-header .circle-control:last-child { justify-self: end; }
.premium-cryptic-header .header-spacer { width: 48px; height: 48px; }

.cryptic-game-score {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 52px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cryptic-game-score strong {
  color: var(--cryptic-cyan);
  font-size: 16px;
  font-weight: 620;
  letter-spacing: .02em;
  white-space: nowrap;
}

.cryptic-game-score small {
  margin-top: 5px;
  color: var(--cryptic-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cryptic-section-kicker,
.premium-cryptic .eyebrow {
  color: var(--cryptic-cyan);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Intro */
.premium-cryptic-home {
  display: flex !important;
  flex-direction: column;
  min-height: 100%;
}

.premium-cryptic-home .cryptic-home-header { flex: 0 0 auto; }

.premium-cryptic-intro {
  width: min(100% - 42px, 430px);
  margin: clamp(22px, 4.5vh, 44px) auto 0;
  text-align: center;
}

.premium-cryptic-intro h1 {
  margin: 16px 0 8px;
  font-size: clamp(29px, 8vw, 40px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.02;
}

.premium-cryptic-intro h2 {
  margin: 0;
  color: #dfe4ee;
  font-size: 18px;
  font-weight: 430;
  letter-spacing: -.02em;
}

.premium-cryptic-intro p {
  max-width: 320px;
  margin: 13px auto 0;
  color: var(--cryptic-muted);
  font-size: 13px;
  line-height: 1.55;
}

.premium-cryptic-emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: 126px;
  height: 126px;
  margin: clamp(22px, 4vh, 38px) auto 20px;
  border: 1px solid rgba(112, 216, 255, .24);
  border-radius: 38px;
  background: linear-gradient(145deg, rgba(13, 24, 43, .86), rgba(13, 8, 30, .9));
  box-shadow: 0 0 55px rgba(88, 150, 255, .12), inset 0 1px rgba(255,255,255,.05);
}

.premium-cryptic-emblem::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--cryptic-cyan), transparent 45%, var(--cryptic-purple));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .85;
}

.premium-cryptic-emblem .brand-mark { width: 58px; height: 58px; filter: drop-shadow(0 0 15px rgba(106,225,255,.3)); }

.premium-cryptic-rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(100% - 40px, 420px);
  margin: 0 auto 18px;
  border: 1px solid var(--cryptic-line);
  border-radius: 20px;
  background: var(--cryptic-surface);
  overflow: hidden;
}

.premium-cryptic-rules > div { min-width: 0; padding: 14px 8px 13px; text-align: center; }
.premium-cryptic-rules > div + div { border-left: 1px solid var(--cryptic-line); }
.premium-cryptic-rules strong { display: block; color: #e8ebf4; font-size: 18px; font-weight: 610; }
.premium-cryptic-rules span { display: block; margin-top: 5px; color: var(--cryptic-muted); font-size: 10px; line-height: 1.3; }

.premium-cryptic-home-actions {
  width: min(100% - 40px, 420px);
  margin: auto auto 0;
  padding-top: 4px;
}

.premium-cryptic-home-actions .primary-button { width: 100%; }
.premium-cryptic-home-actions .quiet-button { width: 100%; margin-top: 6px; }

.premium-cryptic-access-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 4px 0;
  color: var(--cryptic-muted);
  font-size: 10px;
  line-height: 1.45;
}

.premium-cryptic-access-note i {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--cryptic-success);
  box-shadow: 0 0 9px rgba(130,241,192,.45);
}

/* Game */
.premium-cryptic-play {
  display: flex !important;
  flex-direction: column;
  min-height: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.premium-cryptic-play .premium-cryptic-header {
  grid-template-columns: 52px minmax(0, 1fr) 70px;
  padding-bottom: 2px;
}

.cryptic-play-heading {
  width: min(100% - 40px, 600px);
  margin: 14px auto 0;
}

.cryptic-play-heading-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.cryptic-play-heading h1 {
  margin: 0;
  color: #f4f5fa;
  font-size: clamp(21px, 5.8vw, 27px);
  font-weight: 510;
  letter-spacing: .06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.cryptic-play-heading-meta span {
  color: var(--cryptic-cyan);
  font-size: 11px;
  font-weight: 550;
  white-space: nowrap;
}

.premium-cryptic .cryptic-progress {
  display: grid;
  grid-template-columns: repeat(var(--cryptic-clue-count, 5), 1fr);
  gap: 12px;
  width: 100%;
  height: auto;
  margin: 17px 0 0;
}

.premium-cryptic .cryptic-progress i {
  position: relative;
  display: block;
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(143, 153, 174, .18);
  overflow: hidden;
}

.premium-cryptic .cryptic-progress i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cryptic-cyan), var(--cryptic-blue), var(--cryptic-purple));
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
}

.premium-cryptic .cryptic-progress i.is-revealed::after,
.premium-cryptic .cryptic-progress i.revealed::after { opacity: 1; transform: scaleX(1); }

.cryptic-cost-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  color: var(--cryptic-muted);
  font-size: 9px;
  line-height: 1.35;
}

.cryptic-cost-line span:last-child { text-align: right; }

.cryptic-play-content {
  width: min(100% - 40px, 600px);
  margin: 17px auto 0;
}

.cryptic-clue-stack { display: grid; gap: 9px; }

.cryptic-clue-stack article {
  position: relative;
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--cryptic-line);
  border-radius: 17px;
  background: rgba(8, 11, 20, .76);
  overflow: hidden;
}

.cryptic-clue-stack article.is-current {
  min-height: clamp(166px, 23vh, 218px);
  padding: 22px 22px 24px;
  border-color: transparent;
  border-radius: 23px;
  background:
    linear-gradient(135deg, rgba(10, 31, 49, .96), rgba(12, 15, 34, .95) 55%, rgba(31, 12, 52, .94)) padding-box,
    linear-gradient(125deg, var(--cryptic-cyan), rgba(111,172,255,.9) 48%, var(--cryptic-purple)) border-box;
  box-shadow: 0 15px 38px rgba(0,0,0,.36), 0 0 22px rgba(89,204,255,.08);
}

.cryptic-clue-stack article.is-current::after {
  content: attr(data-clue);
  position: absolute;
  top: 10px;
  right: 17px;
  color: rgba(133, 128, 238, .12);
  font-size: 92px;
  font-weight: 230;
  letter-spacing: -.08em;
  line-height: 1;
  pointer-events: none;
}

.cryptic-clue-stack article.is-current > span,
.cryptic-clue-stack article.is-current > p { position: relative; z-index: 1; }

.cryptic-clue-stack article.is-current > span {
  display: block;
  margin-top: 72px;
  color: var(--cryptic-cyan);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.cryptic-clue-stack article.is-current > p {
  max-width: 500px;
  margin: 14px 0 0;
  color: #f0f2f8;
  font-size: clamp(18px, 5.25vw, 25px);
  font-weight: 420;
  letter-spacing: -.022em;
  line-height: 1.36;
}

.cryptic-clue-stack article.is-revealed:not(.is-current),
.cryptic-clue-stack article.is-sealed {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
}

.cryptic-clue-number {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(139, 161, 199, .2);
  border-radius: 10px;
  color: #8991a2;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.cryptic-clue-stack article.is-revealed:not(.is-current) p,
.cryptic-clue-stack article.is-sealed p {
  margin: 0;
  color: #a2a8b6;
  font-size: 11px;
  line-height: 1.36;
}

.cryptic-clue-stack article.is-sealed p {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.cryptic-clue-stack article.is-opening {
  border-color: rgba(101, 232, 255, .52);
  background:
    linear-gradient(100deg, rgba(10, 16, 29, .96) 18%, rgba(26, 51, 74, .96) 48%, rgba(20, 15, 42, .96) 82%);
  background-size: 220% 100%;
  box-shadow: 0 0 20px rgba(101, 232, 255, .1);
  animation: cryptic-clue-opening .72s var(--motion-breathe) infinite alternate;
}

.cryptic-clue-stack article.is-opening p {
  color: #cbd9e9;
  letter-spacing: .11em;
}

.cryptic-clue-stack article.is-opening .cryptic-lock {
  border-color: var(--cryptic-cyan);
  opacity: .9;
  transform: scale(1.08);
}

.cryptic-clue-stack article.is-current.is-arriving {
  animation: cryptic-clue-arrive var(--motion-normal) var(--motion-curve) both;
}

.cryptic-lock {
  width: 14px;
  height: 14px;
  margin-right: 2px;
  border: 1.5px solid #5e6576;
  border-radius: 3px;
  opacity: .75;
}

.cryptic-reveal-zone { margin: 18px 0 16px; text-align: center; }
.cryptic-reveal-zone > p { margin: 0 0 9px; color: var(--cryptic-muted); font-size: 10px; }

.cryptic-reveal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 286px);
  min-height: 50px !important;
  border: 1px solid transparent;
  border-radius: 16px;
  color: #ebedf6;
  background:
    linear-gradient(#090d17, #090d17) padding-box,
    linear-gradient(110deg, var(--cryptic-cyan), var(--cryptic-purple)) border-box;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.cryptic-reveal-button svg { width: 18px; height: 18px; fill: none; stroke: var(--cryptic-cyan); stroke-width: 1.5; }

.cryptic-reveal-button.is-opening {
  color: #dceeff;
  box-shadow: 0 8px 24px rgba(0,0,0,.25), 0 0 20px rgba(101,232,255,.12);
  transform: scale(.985);
}

@keyframes cryptic-clue-opening {
  from { background-position: 100% 50%; }
  to { background-position: 0 50%; }
}

@keyframes cryptic-clue-arrive {
  from { opacity: .72; transform: translateY(5px) scale(.992); filter: saturate(.72); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1); }
}

.cryptic-feedback {
  margin: 12px 0 0;
  padding: 10px 13px;
  border: 1px solid var(--cryptic-line);
  border-radius: 12px;
  color: #c7cbd6;
  background: rgba(12, 16, 28, .9);
  font-size: 11px;
  line-height: 1.4;
}

.cryptic-feedback.is-error { border-color: rgba(255,143,158,.28); color: #ffc0c8; }

.cryptic-composer-dock {
  position: sticky;
  z-index: 5;
  bottom: calc(env(safe-area-inset-bottom) + 6px);
  width: min(100% - 28px, 620px);
  margin: auto auto 0;
  padding-top: 7px;
  background: linear-gradient(180deg, transparent, #03050b 24%);
}

.premium-cryptic-play .cryptic-guess-panel {
  width: 100%;
  margin: 0 !important;
  padding: 15px !important;
  border: 1px solid var(--cryptic-line-strong) !important;
  border-radius: 21px !important;
  background: rgba(10, 13, 23, .96) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.4) !important;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.premium-cryptic-play .cryptic-guess-panel label {
  display: block;
  margin: 0 0 10px;
  color: #d9dce5;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.premium-cryptic-play .cryptic-guess-panel > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.premium-cryptic-play .cryptic-guess-panel input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 15px;
  border: 1px solid rgba(157, 167, 191, .25);
  border-radius: 15px;
  color: #f6f7fb;
  background: rgba(2, 4, 9, .82);
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
}

.premium-cryptic-play .cryptic-guess-panel input::placeholder { color: #686e7d; opacity: 1; }

.premium-cryptic-play .cryptic-guess-panel button[type="submit"] {
  min-width: 86px;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(162, 132, 255, .58);
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #3a6dab, #5928a6);
  box-shadow: inset 0 1px rgba(255,255,255,.13), 0 8px 22px rgba(65,34,135,.26);
  font-size: 15px;
  font-weight: 570;
}

.premium-cryptic-play .cryptic-guess-panel button[type="submit"]:disabled {
  color: #757b89;
  border-color: rgba(137,146,168,.2);
  background: #171a24;
  box-shadow: none;
  opacity: 1;
}

.premium-cryptic-play .cryptic-guess-panel > small {
  display: block;
  margin-top: 9px;
  color: var(--cryptic-muted);
  font-size: 8.5px;
  line-height: 1.4;
}

.cryptic-review-notice {
  width: min(100% - 40px, 600px);
  margin: 10px auto 0;
  padding: 9px 12px;
  border: 1px solid rgba(101,232,255,.2);
  border-radius: 12px;
  color: #a9b7ca;
  background: rgba(8,17,28,.88);
  font-size: 9px;
  line-height: 1.4;
  text-align: center;
}

/* Solved / failed reward */
.premium-cryptic-result { min-height: 100%; padding-left: 20px !important; padding-right: 20px !important; }
.premium-cryptic-result .premium-cryptic-header { width: calc(100% + 40px); margin-left: -20px; }

.cryptic-reward {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 590px);
  margin: 12px auto 0;
  text-align: center;
}

.cryptic-reward-halo {
  position: absolute;
  z-index: -1;
  top: -62px;
  left: 50%;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,230,255,.17), rgba(106,85,255,.08) 42%, transparent 69%);
  transform: translateX(-50%) scale(.72);
  animation: cryptic-halo-in var(--motion-ceremony) var(--motion-curve) both;
}

.cryptic-reward-mark {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border: 1px solid rgba(113, 227, 255, .42);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(15,36,53,.96), rgba(25,12,45,.96));
  box-shadow: 0 0 40px rgba(96,215,255,.16), inset 0 1px rgba(255,255,255,.08);
  animation: cryptic-reward-in var(--motion-slow) var(--motion-curve) both;
}

.cryptic-reward-mark .brand-mark { width: 43px; height: 43px; }
.cryptic-reward.is-failed .cryptic-reward-mark { border-color: rgba(170,177,194,.28); filter: saturate(.35); }

.cryptic-reward .eyebrow { margin-top: 17px; }

.cryptic-reward h1 {
  max-width: 480px;
  margin: 12px 0 0;
  font-size: clamp(30px, 9vw, 48px);
  font-weight: 490;
  letter-spacing: -.05em;
  line-height: 1.03;
}

.cryptic-reward > p {
  max-width: 380px;
  margin: 12px auto 0;
  color: var(--cryptic-muted);
  font-size: 12px;
  line-height: 1.5;
}

.cryptic-answer-card {
  position: relative;
  width: 100%;
  min-height: 184px;
  margin-top: 22px;
  border: 1px solid var(--cryptic-line-strong);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(12,27,42,.96), rgba(19,11,35,.96));
  background-position: center;
  background-size: cover;
  overflow: hidden;
  text-align: left;
}

.cryptic-answer-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2,4,9,.98), rgba(2,4,9,.73) 63%, rgba(2,4,9,.25));
}

.cryptic-answer-card > div { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 20px; }
.cryptic-answer-card small { color: var(--cryptic-cyan); font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.cryptic-answer-card h2 { margin: 8px 0 0; font-size: clamp(25px, 7vw, 37px); font-weight: 510; letter-spacing: -.035em; }
.cryptic-answer-card p { margin: 5px 0 0; color: #bbc1cd; font-size: 12px; }

.cryptic-result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  margin-top: 12px;
  border: 1px solid var(--cryptic-line);
  border-radius: 19px;
  background: var(--cryptic-surface);
  overflow: hidden;
}

.cryptic-result-stats > div { min-width: 0; padding: 13px 6px; }
.cryptic-result-stats > div + div { border-left: 1px solid var(--cryptic-line); }
.cryptic-result-stats strong { display: block; color: #f0f2f8; font-size: 17px; font-weight: 610; font-variant-numeric: tabular-nums; }
.cryptic-result-stats span { display: block; margin-top: 4px; color: var(--cryptic-muted); font-size: 9.5px; line-height: 1.25; }

.cryptic-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  color: var(--cryptic-success);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cryptic-verified-pill::before { content: "✓"; display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; }

.cryptic-result-actions { width: 100%; margin-top: 18px; }
.cryptic-result-actions .primary-button,
.cryptic-result-actions .secondary-button,
.cryptic-result-actions .quiet-button { width: 100%; }

#device .cryptic-result-actions [data-control-key="cryptic-result-next-edition"] {
  appearance: none;
  display: block;
  min-height: 52px;
  padding: 14px 18px;
  border: 1px solid #d3a9ec66;
  border-radius: 17px;
  background: linear-gradient(135deg, #d7a4e62e, #8f73cf2b 54%, #30213f90);
  box-shadow: inset 0 1px 0 #ffffff1a, 0 6px 18px #0c071d38;
  color: #f0e5ff;
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-curve), border-color var(--motion-fast) var(--motion-curve);
  margin-top: 12px;
  margin-bottom: 12px;
}
#device .cryptic-result-actions [data-control-key="cryptic-result-next-edition"]:focus-visible { outline: 2px solid #e9c6ff; outline-offset: 4px; }
@media(prefers-reduced-motion:reduce){#device .cryptic-result-actions [data-control-key="cryptic-result-next-edition"]{transition:none;transform:none}}
@media(forced-colors:active){#device .cryptic-result-actions [data-control-key="cryptic-result-next-edition"]{background:ButtonFace;color:ButtonText;border-color:ButtonText;box-shadow:none}#device .cryptic-result-actions [data-control-key="cryptic-result-next-edition"]:focus-visible{outline-color:Highlight}}

/* Leaderboard */
.premium-cryptic-leaderboard,
.premium-cryptic-archive { min-height: 100%; padding-left: 20px !important; padding-right: 20px !important; }
.premium-cryptic-leaderboard .premium-cryptic-header,
.premium-cryptic-archive .premium-cryptic-header { width: calc(100% + 40px); margin-left: -20px; }

.cryptic-page-heading { width: min(100%, 590px); margin: 22px auto 0; }
.cryptic-page-heading h1 { margin: 9px 0 0; font-size: clamp(31px, 9vw, 44px); font-weight: 490; letter-spacing: -.05em; line-height: 1.02; }
.cryptic-page-heading p { max-width: 420px; margin: 11px 0 0; color: var(--cryptic-muted); font-size: 12px; line-height: 1.5; }

.cryptic-rank-hero {
  position: relative;
  width: min(100%, 590px);
  margin: 22px auto 0;
  padding: 22px;
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(140deg, rgba(10,28,43,.97), rgba(19,10,39,.97)) padding-box,
    linear-gradient(125deg, var(--cryptic-cyan), rgba(116,158,255,.7), var(--cryptic-purple)) border-box;
  box-shadow: 0 16px 40px rgba(0,0,0,.34);
}

.cryptic-rank-hero > span { color: var(--cryptic-cyan); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.cryptic-rank-hero strong { display: block; margin-top: 5px; font-size: clamp(38px, 12vw, 58px); font-weight: 490; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.cryptic-rank-hero p { margin: 5px 0 0; color: #aeb5c3; font-size: 12px; line-height: 1.45; }

.cryptic-leaderboard-list,
.cryptic-archive-list {
  display: grid;
  gap: 8px;
  width: min(100%, 590px);
  margin: 16px auto 0;
  padding-bottom: 14px;
}

.cryptic-leaderboard-list { padding: 0 0 14px; list-style: none; }

.cryptic-leaderboard-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 15px;
  border: 1px solid var(--cryptic-line);
  border-radius: 16px;
  background: rgba(9,12,21,.86);
}

.cryptic-leaderboard-row.is-viewer { border-color: rgba(101,232,255,.37); background: rgba(10,27,39,.92); }
.cryptic-leaderboard-row > b { color: #c9ced9; font-size: 15px; font-weight: 580; font-variant-numeric: tabular-nums; }
.cryptic-leaderboard-row > span strong { display: block; font-size: 11px; font-weight: 590; }
.cryptic-leaderboard-row > span small { display: block; margin-top: 4px; color: var(--cryptic-muted); font-size: 8px; }
.cryptic-leaderboard-row > em { color: #e9ecf4; font-size: 13px; font-style: normal; font-variant-numeric: tabular-nums; }

.cryptic-worldwide-note { width: min(100%, 590px); margin: 13px auto 0; color: var(--cryptic-muted); font-size: 9px; line-height: 1.45; text-align: center; }

/* Archive */
.cryptic-archive-list > button {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 68px;
  padding: 9px 14px;
  border: 1px solid var(--cryptic-line);
  border-radius: 17px;
  color: #eef0f6;
  background: rgba(9,12,21,.88);
  text-align: left;
}

.cryptic-archive-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(145,165,203,.2);
  border-radius: 12px;
  color: #c8ceda;
}

.cryptic-archive-date b { font-size: 17px; font-weight: 580; line-height: 1; }
.cryptic-archive-date small { margin-top: 4px; color: var(--cryptic-muted); font-size: 7px; letter-spacing: .12em; }
.premium-cryptic-archive .cryptic-archive-list > button { grid-template-columns: 80px minmax(0, 1fr) 24px; }
.premium-cryptic-archive .cryptic-archive-date { width: 80px; }
.premium-cryptic-archive .cryptic-archive-date small { letter-spacing: .03em; white-space: nowrap; }
.cryptic-archive-copy { min-width: 0; }
.cryptic-archive-copy strong { display: block; overflow: hidden; font-size: 12px; font-weight: 570; text-overflow: ellipsis; white-space: nowrap; }
.cryptic-archive-copy small { display: block; margin-top: 5px; color: var(--cryptic-muted); font-size: 8.5px; line-height: 1.35; }
.cryptic-archive-status { color: var(--cryptic-success); }
.cryptic-archive-list > button > i { color: #777f90; font-size: 20px; font-style: normal; text-align: right; }

.cryptic-archive-more { width: min(100%, 590px); margin: 10px auto 0; }
.cryptic-archive-more button { width: 100%; }

/* Honest StoreKit / entitlement gate */
.premium-cryptic-paywall {
  display: flex !important;
  flex-direction: column;
  min-height: 100%;
  padding-left: 24px !important;
  padding-right: 24px !important;
  text-align: center;
}

.premium-cryptic-paywall .premium-cryptic-header { width: calc(100% + 48px); margin-left: -24px; }

.cryptic-paywall-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  margin: clamp(20px, 4vh, 40px) auto 0;
  border: 1px solid rgba(115,220,255,.3);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(13,31,47,.94), rgba(27,11,48,.94));
  box-shadow: 0 0 60px rgba(98,157,255,.15);
}

.cryptic-paywall-mark .brand-mark { width: 49px; height: 49px; }
.cryptic-paywall-copy { width: min(100%, 520px); margin: 20px auto 0; }
.cryptic-paywall-copy h1 { margin: 10px 0 0; font-size: clamp(31px, 9vw, 44px); font-weight: 490; letter-spacing: -.05em; line-height: 1.04; }
.cryptic-paywall-copy > p { max-width: 430px; margin: 13px auto 0; color: var(--cryptic-muted); font-size: 12px; line-height: 1.55; }

.cryptic-membership-benefits {
  display: grid;
  gap: 9px;
  width: min(100%, 480px);
  margin: 22px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.cryptic-membership-benefits li { display: grid; grid-template-columns: 24px 1fr; align-items: center; min-height: 34px; color: #d8dce5; font-size: 11px; line-height: 1.4; }
.cryptic-membership-benefits i { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid rgba(101,232,255,.4); border-radius: 50%; color: var(--cryptic-cyan); font-size: 9px; font-style: normal; }

.cryptic-store-state {
  width: min(100%, 480px);
  margin: 20px auto 0;
  padding: 15px 16px;
  border: 1px solid var(--cryptic-line);
  border-radius: 18px;
  background: var(--cryptic-surface);
  text-align: left;
}

.cryptic-store-state > span { color: var(--cryptic-muted); font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.cryptic-store-state strong { display: block; margin-top: 7px; color: #e9ecf4; font-size: 13px; font-weight: 590; }
.cryptic-store-state small { display: block; margin-top: 6px; color: var(--cryptic-muted); font-size: 9px; line-height: 1.45; }
.cryptic-store-state[data-state="pending"],
.cryptic-store-state[data-state="loading"] { border-color: rgba(118,167,255,.32); }
.cryptic-store-state[data-state="failed"],
.cryptic-store-state[data-state="expired"] { border-color: rgba(255,143,158,.24); }

.cryptic-paywall-actions { width: min(100%, 480px); margin: auto auto 0; padding-top: 18px; }
.cryptic-paywall-actions .primary-button,
.cryptic-paywall-actions .quiet-button { width: 100%; }
.cryptic-paywall-actions .quiet-button + .quiet-button { margin-top: 2px; }
.cryptic-membership-legal { display: block; margin: 10px auto 0; color: #737a8a; font-size: 8px; line-height: 1.45; }

/* Shared loading, error, empty and offline states */
.cryptic-product-state {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100% - 40px, 480px);
  min-height: 350px;
  margin: 0 auto;
  padding: 28px 0;
  text-align: center;
}

.cryptic-state-symbol {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1px solid var(--cryptic-line-strong);
  border-radius: 26px;
  color: var(--cryptic-cyan);
  background: var(--cryptic-surface);
  font-size: 24px;
}

.cryptic-product-state[data-state="loading"] .cryptic-state-symbol::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-top-color: var(--cryptic-cyan);
  border-radius: inherit;
  animation: cryptic-state-spin 1.2s linear infinite;
}

.cryptic-product-state h1 { margin: 19px 0 0; font-size: 27px; font-weight: 510; letter-spacing: -.04em; }
.cryptic-product-state p { max-width: 360px; margin: 10px auto 0; color: var(--cryptic-muted); font-size: 13px; line-height: 1.55; }
.cryptic-product-state .primary-button { width: min(100%, 320px); margin-top: 22px; }
.cryptic-product-state .quiet-button { width: min(100%, 320px); margin-top: 5px; }

@keyframes cryptic-state-spin { to { transform: rotate(360deg); } }
@keyframes cryptic-halo-in { from { opacity: 0; transform: translateX(-50%) scale(.5); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes cryptic-reward-in { from { opacity: 0; transform: translateY(14px) scale(.82); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* 375 × 667 and similarly compact devices */
@media (max-height: 720px) {
  .premium-cryptic,
  .premium-cryptic-home,
  .premium-cryptic-play,
  .premium-cryptic-result,
  .premium-cryptic-leaderboard,
  .premium-cryptic-archive,
  .premium-cryptic-paywall { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 10px)); }

  .premium-cryptic-header { min-height: 50px; }
  .premium-cryptic-header .circle-control { width: 44px; height: 44px; }
  .premium-cryptic-intro { margin-top: 10px; }
  .premium-cryptic-intro h1 { margin-top: 10px; font-size: 28px; }
  .premium-cryptic-intro p { margin-top: 8px; line-height: 1.4; }
  .premium-cryptic-emblem { width: 88px; height: 88px; margin: 14px auto; border-radius: 28px; }
  .premium-cryptic-emblem .brand-mark { width: 43px; height: 43px; }
  .premium-cryptic-rules { margin-bottom: 10px; }
  .premium-cryptic-rules > div { padding: 10px 5px; }
  .cryptic-play-heading { margin-top: 7px; }
  .premium-cryptic .cryptic-progress { margin-top: 11px; }
  .cryptic-play-content { margin-top: 11px; }
  .cryptic-clue-stack { gap: 7px; }
  .cryptic-clue-stack article { min-height: 52px; }
  .cryptic-clue-stack article.is-current { min-height: 142px; padding: 16px 18px 18px; }
  .cryptic-clue-stack article.is-current > span { margin-top: 50px; }
  .cryptic-clue-stack article.is-current > p { margin-top: 9px; font-size: 17px; line-height: 1.3; }
  .cryptic-clue-stack article.is-current::after { font-size: 72px; }
  .cryptic-clue-stack article.is-revealed:not(.is-current),
  .cryptic-clue-stack article.is-sealed { grid-template-columns: 38px 1fr auto; padding: 5px 12px; }
  .cryptic-clue-number { width: 36px; height: 36px; }
  .cryptic-reveal-zone { margin: 11px 0; }
  .cryptic-composer-dock { bottom: calc(env(safe-area-inset-bottom) + 3px); }
  .premium-cryptic-play .cryptic-guess-panel { padding: 12px !important; }
  .premium-cryptic-play .cryptic-guess-panel input,
  .premium-cryptic-play .cryptic-guess-panel button[type="submit"] { min-height: 48px; }
  .cryptic-reward { margin-top: 3px; }
  .cryptic-reward-mark { width: 68px; height: 68px; }
  .cryptic-reward-mark .brand-mark { width: 34px; height: 34px; }
  .cryptic-reward .eyebrow { margin-top: 12px; }
  .cryptic-reward h1 { margin-top: 8px; font-size: 29px; }
  .cryptic-answer-card { min-height: 142px; margin-top: 14px; }
  .cryptic-result-stats > div { padding: 10px 5px; }
  .cryptic-result-actions { margin-top: 12px; }
  .cryptic-paywall-mark { width: 74px; height: 74px; margin-top: 8px; border-radius: 24px; }
  .cryptic-paywall-mark .brand-mark { width: 38px; height: 38px; }
  .cryptic-paywall-copy { margin-top: 12px; }
  .cryptic-paywall-copy h1 { font-size: 29px; }
  .cryptic-membership-benefits { margin-top: 13px; gap: 4px; }
  .cryptic-store-state { margin-top: 12px; padding: 11px 13px; }
}

/* 430 × 932 and taller devices get breathing room without dead space. */
@media (min-height: 890px) {
  .premium-cryptic-intro { margin-top: 46px; }
  .premium-cryptic-emblem { width: 140px; height: 140px; margin-top: 42px; margin-bottom: 26px; }
  .premium-cryptic-emblem .brand-mark { width: 64px; height: 64px; }
  .premium-cryptic-home-actions { padding-bottom: 10px; }
  .cryptic-play-heading { margin-top: 22px; }
  .cryptic-play-content { margin-top: 22px; }
  .cryptic-clue-stack { gap: 11px; }
  .cryptic-clue-stack article.is-current { min-height: 225px; padding: 27px 25px; }
  .cryptic-clue-stack article.is-current > span { margin-top: 84px; }
  .cryptic-reveal-zone { margin: 22px 0 20px; }
  .cryptic-reward { margin-top: 28px; }
  .cryptic-reward-mark { width: 98px; height: 98px; }
  .cryptic-answer-card { min-height: 210px; margin-top: 28px; }
  .cryptic-page-heading { margin-top: 34px; }
  .cryptic-rank-hero { margin-top: 28px; padding: 26px; }
  .cryptic-paywall-mark { margin-top: 52px; }
  .cryptic-paywall-copy { margin-top: 26px; }
  .cryptic-membership-benefits { margin-top: 28px; }
}

@media (max-width: 375px) {
  .premium-cryptic-header { grid-template-columns: 48px minmax(0, 1fr) 58px; padding-left: 14px; padding-right: 14px; }
  .premium-cryptic-header .critical-brand-lockup { gap: 7px; transform: scale(.92); }
  .premium-cryptic-intro,
  .premium-cryptic-rules,
  .premium-cryptic-home-actions,
  .cryptic-play-heading,
  .cryptic-play-content { width: calc(100% - 32px); }
  .cryptic-cost-line { gap: 8px; font-size: 8px; }
  .premium-cryptic .cryptic-progress { gap: 9px; }
  .cryptic-clue-stack article.is-current { padding-left: 18px; padding-right: 18px; }
  .cryptic-clue-stack article.is-current > p { font-size: 18px; }
  .cryptic-composer-dock { width: calc(100% - 20px); }
  .premium-cryptic-play .cryptic-guess-panel > div { gap: 7px; }
  .premium-cryptic-play .cryptic-guess-panel input { padding-left: 12px; font-size: 16px; }
  .premium-cryptic-play .cryptic-guess-panel button[type="submit"] { min-width: 76px; padding: 0 12px; }
  .premium-cryptic-result,
  .premium-cryptic-leaderboard,
  .premium-cryptic-archive { padding-left: 16px !important; padding-right: 16px !important; }
  .premium-cryptic-result .premium-cryptic-header,
  .premium-cryptic-leaderboard .premium-cryptic-header,
  .premium-cryptic-archive .premium-cryptic-header { width: calc(100% + 32px); margin-left: -16px; }
  .cryptic-result-stats strong { font-size: 15px; }
  .cryptic-result-stats span { font-size: 9px; }
  .cryptic-archive-list > button { grid-template-columns: 50px minmax(0,1fr) 18px; gap: 10px; padding-left: 9px; padding-right: 9px; }
  .premium-cryptic-archive .cryptic-archive-list > button { grid-template-columns: 80px minmax(0,1fr) 18px; }
  .premium-cryptic-paywall { padding-left: 18px !important; padding-right: 18px !important; }
  .premium-cryptic-paywall .premium-cryptic-header { width: calc(100% + 36px); margin-left: -18px; }
}

/* Dynamic Type preview keeps controls and content intact, then scrolls. */
.manual-large-text .premium-cryptic,
.manual-large-text .premium-cryptic-home,
.manual-large-text .premium-cryptic-play,
.manual-large-text .premium-cryptic-result,
.manual-large-text .premium-cryptic-leaderboard,
.manual-large-text .premium-cryptic-archive,
.manual-large-text .premium-cryptic-paywall { overflow-y: auto !important; }

.manual-large-text .cryptic-clue-stack article.is-current > p,
.manual-large-text .cryptic-paywall-copy > p,
.manual-large-text .cryptic-page-heading p,
.manual-large-text .cryptic-product-state p { font-size: 15px !important; line-height: 1.5 !important; }

.manual-large-text .cryptic-clue-stack article.is-current { min-height: 230px; }
.manual-large-text .cryptic-clue-stack article.is-revealed:not(.is-current),
.manual-large-text .cryptic-clue-stack article.is-sealed { min-height: 68px; }
.manual-large-text .cryptic-clue-stack article.is-revealed:not(.is-current) p,
.manual-large-text .cryptic-clue-stack article.is-sealed p { font-size: 13px; }

/* Reduce Transparency uses opaque, high-contrast materials. */
.manual-solid .premium-cryptic,
.manual-solid .premium-cryptic-home,
.manual-solid .premium-cryptic-play,
.manual-solid .premium-cryptic-result,
.manual-solid .premium-cryptic-leaderboard,
.manual-solid .premium-cryptic-archive,
.manual-solid .premium-cryptic-paywall { background: #03050b !important; }

.manual-solid .cryptic-clue-stack article,
.manual-solid .premium-cryptic-play .cryptic-guess-panel,
.manual-solid .cryptic-result-stats,
.manual-solid .cryptic-leaderboard-row,
.manual-solid .cryptic-archive-list > button,
.manual-solid .cryptic-store-state,
.manual-solid .premium-cryptic-rules,
.manual-solid .cryptic-product-state .cryptic-state-symbol { background: var(--cryptic-surface-solid) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

@media (prefers-reduced-motion: reduce) {
  .premium-cryptic *,
  .premium-cryptic *::before,
  .premium-cryptic *::after,
  .premium-cryptic-home *,
  .premium-cryptic-play *,
  .premium-cryptic-result *,
  .premium-cryptic-leaderboard *,
  .premium-cryptic-archive *,
  .premium-cryptic-paywall * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

.manual-reduced-motion .premium-cryptic *,
.manual-reduced-motion .premium-cryptic *::before,
.manual-reduced-motion .premium-cryptic *::after,
.manual-reduced-motion .premium-cryptic-home *,
.manual-reduced-motion .premium-cryptic-play *,
.manual-reduced-motion .premium-cryptic-result *,
.manual-reduced-motion .premium-cryptic-leaderboard *,
.manual-reduced-motion .premium-cryptic-archive *,
.manual-reduced-motion .premium-cryptic-paywall * {
  animation: none !important;
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
}

/* Runtime-contract aliases and final interaction details. */
.cryptic-header-control svg,
.cryptic-rank-card svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.cryptic-header-score {
  justify-self: end;
  color: var(--cryptic-cyan);
  font-size: 8px;
  font-weight: 720;
  letter-spacing: .14em;
  line-height: 1.25;
  text-align: right;
}

.premium-cryptic-home .cryptic-five-to-one {
  flex: 0 0 auto;
  margin-top: clamp(20px, 3.7vh, 34px);
  margin-bottom: clamp(17px, 3vh, 25px);
}

.premium-cryptic-home .cryptic-access-note small {
  display: inline-block;
  margin-top: 3px;
  color: #777f91;
  font-size: 9.5px;
}

.cryptic-clue-stack article.is-current > em {
  position: absolute;
  z-index: 1;
  top: 20px;
  right: 20px;
  color: #8c95a8;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.cryptic-feedback:empty { display: none; }
.premium-cryptic .cryptic-time-rules { margin: 8px 0; color: var(--cryptic-muted); font-size: 14px; }
.premium-cryptic .cryptic-time-rules summary { min-height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #c4b5ed; }
.premium-cryptic .cryptic-time-rules summary:focus-visible { outline: 2px solid var(--c-focus, var(--c-seal-hi)); outline-offset: 3px; border-radius: 10px; }
.premium-cryptic .cryptic-time-rules p { margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--cryptic-line); border-radius: 16px; font-size: 14px; line-height: 1.55; text-align: left; }
.premium-cryptic .cryptic-time-summary { margin: 10px 0; color: var(--cryptic-muted); font-size: 13px; line-height: 1.4; text-align: center; }
.premium-cryptic-home .cryptic-six-to-one .cryptic-clue-tile { left: calc(var(--cryptic-clue-index) * 27px); width: 25px; height: calc(120px - var(--cryptic-clue-index) * 11px); }
.premium-cryptic-home .cryptic-six-to-one .cryptic-emblem-paths > i:nth-child(6) { top: 87px; transform: rotate(-24deg); }
.cryptic-live-region,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.cryptic-share-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  color: #737b8d;
  font-size: 15px;
  letter-spacing: .05em;
}

.cryptic-share-grid i { font-style: normal; }
.cryptic-share-grid .is-used { color: #7891b4; }
.cryptic-share-grid .is-solved { color: var(--cryptic-cyan); text-shadow: 0 0 13px rgba(101,232,255,.5); }

.cryptic-rank-card {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 20px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 76px !important;
  margin-top: 13px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 19px;
  color: #eef2fa;
  background:
    linear-gradient(135deg, rgba(9,25,39,.97), rgba(23,10,42,.97)) padding-box,
    linear-gradient(115deg, rgba(101,232,255,.7), rgba(184,102,255,.65)) border-box;
  text-align: left;
}

.cryptic-rank-card > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: var(--cryptic-cyan);
  background: rgba(101,232,255,.08);
}

.cryptic-rank-card small { display: block; color: var(--cryptic-cyan); font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.cryptic-rank-card strong { display: block; margin-top: 4px; font-size: 16px; font-weight: 590; }
.cryptic-rank-card em { display: block; margin-top: 3px; color: #929aaa; font-size: 8px; font-style: normal; line-height: 1.35; }
.cryptic-rank-card > b { color: #8c94a4; font-size: 20px; font-weight: 350; }
.cryptic-unranked-card {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  margin-top: 13px;
  padding: 11px 14px;
  border: 1px solid rgba(144,155,180,.2);
  border-radius: 19px;
  color: #eef2fa;
  background: linear-gradient(135deg, rgba(12,17,27,.96), rgba(18,12,29,.96));
  text-align: left;
}
.cryptic-unranked-card > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(157,168,192,.16);
  border-radius: 13px;
  color: #9ca5b7;
  background: rgba(147,158,183,.06);
  font-size: 20px;
  font-weight: 350;
}
.cryptic-unranked-card small { display: block; color: #9ca5b7; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.cryptic-unranked-card strong { display: block; margin-top: 4px; font-size: 16px; font-weight: 590; }
.cryptic-unranked-card em { display: block; margin-top: 3px; color: #929aaa; font-size: 10.5px; font-style: normal; line-height: 1.35; }
.cryptic-verification-note { margin: 11px 3px 0; color: #ffbfca; font-size: 9px; line-height: 1.45; }
.cryptic-verification-card{margin-top:18px;padding:15px 16px;border:1px solid #be9cdf30;border-radius:20px;background:linear-gradient(135deg,#a776d013,#151020);text-align:left;}
.cryptic-verification-card .cryptic-verification-note{margin:0;color:#d7c8e7;}
.cryptic-verification-card .quiet-button{display:block;min-height:44px;padding:10px 0 0;color:#e6cdfb;text-align:left;font-size:13px;}
.cryptic-verification-card .quiet-button[aria-disabled="true"]{opacity:.7;}
.cryptic-next-edition{margin:18px 8px 4px;color:#bbb4ca;font-size:13px;line-height:1.5;text-align:center;}

.cryptic-rank-hero h1 { margin: 8px 0 0; font-size: 22px; font-weight: 510; letter-spacing: -.025em; }

.cryptic-membership-card {
  width: min(100%, 480px);
  margin: 21px auto 0;
  padding: 16px 18px;
  border: 1px solid var(--cryptic-line);
  border-radius: 21px;
  background: var(--cryptic-surface);
  text-align: left;
}

.cryptic-membership-card > div > span { color: var(--cryptic-cyan); font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.cryptic-membership-card > div > strong { display: block; margin-top: 6px; font-size: 14px; font-weight: 590; }
.cryptic-membership-card .cryptic-membership-benefits { width: 100%; margin-top: 13px; }
.cryptic-store-state p { margin: 6px 0 0; color: var(--cryptic-muted); font-size: 9px; line-height: 1.45; }

@media (max-height: 720px) {
  .premium-cryptic-home .cryptic-five-to-one { margin-top: 10px; margin-bottom: 10px; transform: scale(.82); transform-origin: center; }
  .cryptic-rank-card { min-height: 68px !important; }
  .cryptic-unranked-card { min-height: 68px; }
  .cryptic-membership-card { margin-top: 12px; padding-top: 12px; padding-bottom: 12px; }
  .cryptic-membership-card .cryptic-membership-benefits { margin-top: 8px; }
}

/* Final responsive corrections: the game is a fixed composition with one
   independently scrolling clue rail, so its composer remains reachable above
   the iPhone keyboard instead of entering the document after the clue stack. */
.premium-cryptic-header .critical-brand-lockup .brand-mark {
  width: 35px !important;
  height: 35px !important;
}

.premium-cryptic-header .critical-brand-lockup .wordmark {
  width: 88px !important;
  max-width: 88px;
  height: auto !important;
}

.premium-cryptic-play {
  height: 100% !important;
  min-height: 0 !important;
  /* Unlike hidden, clip cannot acquire a focus-induced outer scroll offset.
     The clue rail below remains the one intentional scrolling surface. */
  overflow: clip !important;
}

.premium-cryptic-play > .premium-cryptic-header,
.premium-cryptic-play > .cryptic-play-heading { flex: 0 0 auto; }

.premium-cryptic-play > .cryptic-play-content {
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 7px;
  padding: 0 1px 9px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.premium-cryptic-play > .cryptic-play-content::-webkit-scrollbar { display: none; }

/* Keep the next decision beside the guess dock, not below five sealed cards.
   Only clue/history content scrolls; both existing actions remain reachable. */
.premium-cryptic-play > .cryptic-reveal-zone {
  flex: 0 0 auto;
  width: min(calc(100% - 40px), 600px);
  margin: 10px auto 12px;
}
.premium-cryptic-play > .cryptic-reveal-zone .cryptic-reveal-button {
  width: 100%;
  justify-content: space-between;
  padding: 10px 17px;
  font-size: 14px;
  text-align: left;
}
.premium-cryptic-play > .cryptic-reveal-zone .cryptic-reveal-button small {
  padding: 5px 9px;
  border: 1px solid rgba(177,147,241,.24);
  border-radius: 9px;
  background: rgba(111,70,173,.15);
  color: #d6c5f4;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.premium-cryptic-play > .cryptic-reveal-zone .cryptic-reveal-button:disabled:not(.is-opening) {
  justify-content: center;
  opacity: .65;
}
.device.keyboard-open .premium-cryptic-play > .cryptic-reveal-zone { margin-top: 6px; margin-bottom: 7px; }

.premium-cryptic-play > .cryptic-composer-dock.cryptic-guess-panel {
  position: relative !important;
  flex: 0 0 auto;
  bottom: auto !important;
  width: min(calc(100% - 28px), 620px) !important;
  margin: 0 auto !important;
}

.device.keyboard-open > .premium-cryptic-play {
  padding-top: max(4px, env(safe-area-inset-top)) !important;
  padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
}

.device.keyboard-open .premium-cryptic-play .premium-cryptic-header { min-height: 44px; }
.device.keyboard-open .premium-cryptic-play .cryptic-play-heading { margin-top: 3px; }
.device.keyboard-open .premium-cryptic-play .cryptic-play-heading h1 { font-size: 17px; }
.device.keyboard-open .premium-cryptic-play .cryptic-progress { margin-top: 7px; }
.device.keyboard-open .premium-cryptic-play .cryptic-cost-line { display: none; }
.device.keyboard-open .premium-cryptic-play .cryptic-play-content { margin-top: 7px; }
.device.keyboard-open .premium-cryptic-play .cryptic-clue-stack article.is-current { min-height: 126px; }
.device.keyboard-open .premium-cryptic-play .cryptic-clue-stack article.is-current > span { margin-top: 43px; }
.device.keyboard-open .premium-cryptic-play .cryptic-guess-panel { padding: 10px !important; }
.device.keyboard-open .premium-cryptic-play .cryptic-guess-panel label,
.device.keyboard-open .premium-cryptic-play .cryptic-guess-panel > small { display: none; }
.device.keyboard-open .premium-cryptic-play .cryptic-guess-panel input,
.device.keyboard-open .premium-cryptic-play .cryptic-guess-panel button[type="submit"] { min-height: 46px; }

/* The film title participates in card height; real multi-line catalogue names
   can therefore never be cut off by an absolute footer. */
.cryptic-answer-card {
  display: flex;
  align-items: flex-end;
  padding: 18px 20px;
}

.cryptic-answer-card > div {
  position: relative;
  z-index: 1;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  padding-top: 70px;
}

.cryptic-answer-card h2 { overflow-wrap: anywhere; }

.cryptic-product-state[data-state="offline"] .cryptic-state-symbol {
  color: var(--cryptic-blue);
  border-color: rgba(118,167,255,.4);
  box-shadow: 0 0 28px rgba(118,167,255,.1);
}

.cryptic-auth-state .cryptic-state-symbol .brand-mark { width: 38px; height: 38px; }

.device .film-hero.cryptic-live-film,
.device .trailer-preview.cryptic-live-film {
  background-image: var(--cryptic-live-film-art, linear-gradient(145deg, #142033, #160b25)) !important;
  background-position: center 24% !important;
  background-size: cover !important;
}

/* Informational copy stays readable on physical iPhones and scales as a set. */
.cryptic-cost-line,
.premium-cryptic-play .cryptic-guess-panel > small,
.cryptic-worldwide-note,
.cryptic-verification-note,
.cryptic-membership-legal { font-size: 10px; }

.cryptic-leaderboard-row > span strong,
.cryptic-archive-copy strong { font-size: 13px; }

.cryptic-leaderboard-row > span small,
.cryptic-archive-copy small,
.cryptic-store-state p,
.cryptic-store-state strong,
.cryptic-membership-benefits li,
.cryptic-rank-card em { font-size: 10.5px; }

.cryptic-header-score,
.cryptic-rank-card small,
.cryptic-archive-date small,
.cryptic-store-state > span { font-size: 9px; }

.manual-large-text .cryptic-cost-line,
.manual-large-text .premium-cryptic-play .cryptic-guess-panel > small,
.manual-large-text .cryptic-worldwide-note,
.manual-large-text .cryptic-verification-note,
.manual-large-text .cryptic-membership-legal,
.manual-large-text .cryptic-leaderboard-row > span small,
.manual-large-text .cryptic-archive-copy small,
.manual-large-text .cryptic-store-state p,
.manual-large-text .cryptic-membership-benefits li,
.manual-large-text .cryptic-rank-card em,
.manual-large-text .cryptic-unranked-card em { font-size: 13px !important; }

.manual-large-text .cryptic-leaderboard-row > span strong,
.manual-large-text .cryptic-archive-copy strong,
.manual-large-text .cryptic-store-state strong { font-size: 15px !important; }

.cryptic-resume-card {
  width: min(100% - 40px, 420px);
  margin: 0 auto 12px;
  padding: 13px 15px;
  border: 1px solid transparent;
  border-radius: 17px;
  background:
    linear-gradient(135deg, rgba(8,25,38,.96), rgba(23,10,41,.96)) padding-box,
    linear-gradient(115deg, rgba(101,232,255,.56), rgba(184,102,255,.48)) border-box;
  text-align: left;
}

.cryptic-resume-card span { color: var(--cryptic-cyan); font-size: 9px; font-weight: 720; letter-spacing: .14em; }
.cryptic-resume-card strong { display: block; margin-top: 6px; font-size: 14px; font-weight: 590; }
.cryptic-resume-card small { display: block; margin-top: 5px; color: var(--cryptic-muted); font-size: 10px; line-height: 1.4; }

@media (max-height: 720px) {
  .premium-cryptic-home {
    --cryptic-side: 18px;
    --cryptic-title-size: 31.5px;
    --cryptic-emblem-scale: .78;
    --cryptic-emblem-height: 125px;
    --cryptic-rules-height: 68px;
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-bottom: max(22px, env(safe-area-inset-bottom)) !important;
  }

  .premium-cryptic-home .cryptic-intro { margin-top: 7px !important; }
  .premium-cryptic-home .cryptic-intro > h1 { margin-top: 6px !important; font-size: var(--cryptic-title-size) !important; }
  .premium-cryptic-home .cryptic-intro > h2 { margin-top: 8px; font-size: 20.5px; }
  .premium-cryptic-home .cryptic-intro > p { margin-top: 4px !important; font-size: 11.75px !important; }
  .premium-cryptic-home .cryptic-five-to-one { margin-top: 7px; margin-bottom: 0; transform: none; }
  .premium-cryptic-home > .cryptic-rules {
    height: var(--cryptic-rules-height) !important;
    min-height: var(--cryptic-rules-height);
    margin: 8px 0 !important;
  }
  .premium-cryptic-home-actions { padding-top: 0; }
  .cryptic-resume-card { width: calc(100% - 36px); margin-bottom: 7px; padding: 10px 13px; }
  .cryptic-resume-card small { display: none; }
  .premium-cryptic-home .cryptic-access-note { margin-top: 8px; }
  .premium-cryptic-header .critical-brand-lockup .brand-mark { width: 31px !important; height: 31px !important; }
  .premium-cryptic-header .critical-brand-lockup .wordmark { width: 84px !important; max-width: 84px; }
  .premium-cryptic-play > .cryptic-composer-dock.cryptic-guess-panel { width: calc(100% - 20px) !important; }
  .cryptic-answer-card { min-height: 150px; padding: 15px 17px; }
  .cryptic-answer-card > div { padding-top: 48px; }
}
.cryptic-review-note{margin:0 22px 16px;padding:10px 12px;border:1px solid #d4b78355;border-radius:12px;font-size:12px;line-height:1.5;color:#e3c798;background:#48361c33}

/* Real puzzle entry: readable information before motion or decorative detail. */
#device .premium-cryptic-home .cryptic-arrival-footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}
#device .premium-cryptic-home .cryptic-access-note small{font-size:12px;line-height:1.5;color:#b8b3c7}
#device .cryptic-cost-line,#device .premium-cryptic-play .cryptic-guess-panel>small,#device .cryptic-worldwide-note,#device .cryptic-verification-note,#device .cryptic-membership-legal{font-size:13px;line-height:1.5}
#device .cryptic-clue-stack article.is-current>em{font-size:11px;letter-spacing:.08em}
#device .cryptic-leaderboard-row>span small,#device .cryptic-archive-copy small,#device .cryptic-store-state p,#device .cryptic-store-state strong,#device .cryptic-membership-benefits li,#device .cryptic-rank-card em,#device .cryptic-resume-card small{font-size:13px;line-height:1.5}
#device .cryptic-header-score,#device .cryptic-rank-card small,#device .cryptic-archive-date small,#device .cryptic-resume-card span{font-size:11px;line-height:1.4}
#device .premium-cryptic-home .cryptic-intro-copy>p{font-size:15px!important;line-height:1.55}
#device .premium-cryptic-home-actions .primary-button:disabled{color:#c8bfd5;background:#332843;box-shadow:inset 0 1px #ffffff16;opacity:1}
@media(max-width:360px){
 #device .premium-cryptic-home .cryptic-intro-copy{margin-top:18px!important}
 #device .premium-cryptic-home .cryptic-five-to-one{margin-top:18px;margin-bottom:14px}
 #device .premium-cryptic-home .cryptic-arrival-footer>span{font-size:14px;line-height:1.5}
}
@media(max-height:720px){
 #device .premium-cryptic-home .cryptic-intro-copy{margin-top:7px!important}
 #device .premium-cryptic-home .cryptic-intro-copy>h1{margin-top:6px!important;font-size:31.5px!important}
 #device .premium-cryptic-home .cryptic-intro-copy>h2{margin-top:8px;font-size:21px}
 #device .premium-cryptic-home .cryptic-intro-copy>p{margin-top:6px!important}
 #device .cryptic-resume-card small{display:block}
}

/* Focus play (October 2026 redesign). The html.ds rituals layer owns the
   finished look; this is the legible ?ds=0 fallback for the same
   markup: status pips, one focal clue, a pinned guess dock and its sheet. */
html:not(.ds) .cryptic-focus-screen { display: flex !important; flex-direction: column; height: 100% !important; min-height: 0 !important; overflow: clip !important; }
html:not(.ds) .cryptic-focus-status { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 6px auto 0; color: var(--cryptic-muted); font-size: 13px; }
html:not(.ds) .cryptic-focus-pips { display: flex; gap: 7px; }
html:not(.ds) .cryptic-focus-pip { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.14); }
html:not(.ds) .cryptic-focus-pip.is-revealed { background: var(--cryptic-muted); }
html:not(.ds) .cryptic-focus-pip.is-current { width: 22px; background: var(--cryptic-ink); }
html:not(.ds) .cryptic-focus-caption { display: flex; gap: 7px; margin: 0; font-variant-numeric: tabular-nums; }
html:not(.ds) .cryptic-focus-caption > i { font-style: normal; }
html:not(.ds) .cryptic-focus-score strong { color: var(--cryptic-ink); }
html:not(.ds) .cryptic-focus-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: min(100% - 48px, 520px); margin: 0 auto; padding: 18px 0 14px; overflow-y: auto; scrollbar-width: none; }
html:not(.ds) .cryptic-focus-clues { display: flex; flex-direction: column; gap: 26px; margin: auto 0; }
html:not(.ds) .cryptic-focus-earlier { display: grid; gap: 12px; margin: 0; padding: 0 0 22px; list-style: none; border-bottom: 1px solid var(--cryptic-line); color: var(--cryptic-muted); font-size: 15px; }
html:not(.ds) .cryptic-focus-earlier li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
html:not(.ds) .cryptic-focus-earlier p { margin: 0; }
html:not(.ds) .cryptic-focus-current { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
html:not(.ds) .cryptic-focus-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cryptic-purple); }
html:not(.ds) .cryptic-focus-text { max-width: 22ch; margin: 0; font-size: 26px; line-height: 1.22; font-weight: 600; color: var(--cryptic-ink); text-wrap: balance; }
html:not(.ds) .cryptic-focus-dock { display: flex; flex-direction: column; width: min(100% - 32px, 520px); margin: 0 auto; padding-top: 10px; }
html:not(.ds) .cryptic-focus-feedback { margin: 0 0 10px; text-align: center; font-size: 15px; }
html:not(.ds) .cryptic-focus-feedback:empty { display: none; }
html:not(.ds) .cryptic-focus-row { display: flex; gap: 6px; padding: 5px 5px 5px 18px; border: 1px solid var(--cryptic-line-strong); border-radius: 999px; }
html:not(.ds) .cryptic-focus-row input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; color: var(--cryptic-ink); font-size: 17px; }
html:not(.ds) .cryptic-focus-row button[type="submit"] { min-width: 84px; min-height: 44px; border: 0; border-radius: 999px; background: var(--cryptic-ink); color: var(--cryptic-surface-solid); font-weight: 600; }
html:not(.ds) .cryptic-focus-row button[type="submit"]:disabled { opacity: .45; }
html:not(.ds) .cryptic-focus-hint { align-self: center; min-height: 44px; margin-top: 4px; border: 0; background: transparent; color: var(--cryptic-ink); font-size: 15px; }
html:not(.ds) .cryptic-focus-hint small { margin-left: 7px; color: var(--cryptic-muted); font-size: 13px; }
html:not(.ds) .cryptic-how { position: absolute; z-index: 90; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; }
html:not(.ds) .cryptic-how-scrim { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.56); }
html:not(.ds) .cryptic-how-panel { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 20px max(20px, env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--cryptic-surface-solid); color: var(--cryptic-ink); }
html:not(.ds) .cryptic-how-panel .ds-how-item { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--cryptic-line); }
html:not(.ds) .cryptic-how-panel .ds-how-line { display: flex; gap: 14px; margin: 0; }
html:not(.ds) .cryptic-how-panel .ds-how-line b { flex: 0 0 64px; }
html:not(.ds) .cryptic-how-done { min-height: 50px; border: 0; border-radius: 999px; background: var(--cryptic-ink); color: var(--cryptic-surface-solid); font-weight: 600; }

/* The game room without the design system (?ds=0): plain, complete and usable. Its bright identity (palette, Spool,
   stickers, motion) lives in ds-cryptic-game.css under html.ds. */
html:not(.ds) .cg-room { display: flex; flex-direction: column; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom)); overflow-y: auto; color: #f5f4f7; }
html:not(.ds) .cg-room :is(h1, h2, p, ol, ul) { margin: 0; padding: 0; }
html:not(.ds) .cg-room :is(ol, ul) { list-style: none; }
html:not(.ds) .cg-header { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
html:not(.ds) .cg-header > :nth-child(2) { justify-self: center; text-align: center; }
html:not(.ds) .cg-round { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: rgba(255, 255, 255, .08); color: inherit; }
html:not(.ds) .cg-room .cryptic-review-note { margin: 0; }
html:not(.ds) .cg-headline { font-size: 28px; line-height: 1.2; text-align: center; }
html:not(.ds) .cg-hero { display: grid; gap: 6px; justify-items: center; text-align: center; }
html:not(.ds) .cg-btn { width: 100%; min-height: 52px; border: 0; border-radius: 16px; background: #f3eee6; color: #0b0b10; font-size: 17px; font-weight: 600; }
html:not(.ds) .cg-btn-glass { background: rgba(255, 255, 255, .1); color: inherit; border: 1px solid rgba(255, 255, 255, .2); }
html:not(.ds) .cg-btn:disabled { opacity: .5; }
html:not(.ds) .cg-btn-face { display: flex; align-items: center; justify-content: center; gap: 8px; }
html:not(.ds) .cg-link { min-height: 44px; border: 0; background: none; color: inherit; font-size: 15px; text-decoration: underline; }
html:not(.ds) :is(.cg-actions, .cg-dock, .cg-guess, .cg-result-body, .cg-result-actions, .cg-scoreboard) { display: grid; gap: 10px; }
html:not(.ds) .cg-links { display: flex; justify-content: center; gap: 12px; }
html:not(.ds) .cg-tokens { display: grid; grid-template-columns: repeat(var(--cg-token-count, 5), minmax(0, 1fr)); gap: 6px; }
html:not(.ds) .cg-token > :is(button, span) { display: grid; justify-items: center; width: 100%; min-height: 44px; padding: 2px 0; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; background: none; color: inherit; font-size: 12px; }
html:not(.ds) .cg-token.is-current > button { background: #f3eee6; color: #0b0b10; }
html:not(.ds) .cg-clues { flex: 1 1 auto; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
html:not(.ds) .cg-clue-card { flex: 0 0 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px; box-sizing: border-box; scroll-snap-align: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 16px; }
html:not(.ds) .cg-clue-stub { display: grid; justify-items: center; }
html:not(.ds) .cg-clue-stub b { font-size: 28px; }
html:not(.ds) .cg-clue-text { font-size: 20px; line-height: 1.25; font-weight: 600; }
html:not(.ds) .cg-guess input { box-sizing: border-box; width: 100%; height: 52px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 16px; background: rgba(255, 255, 255, .06); color: inherit; font-size: 17px; }
html:not(.ds) .cg-score { display: grid; justify-items: center; }
html:not(.ds) .cg-score-value { font-size: 22px; }
html:not(.ds) .cg-answer { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; }
html:not(.ds) .cg-answer-art { width: 92px; aspect-ratio: 2 / 3; border-radius: 10px; background: #222 center / cover no-repeat; }
html:not(.ds) .cg-final strong { font-size: 34px; }
html:not(.ds) .cg-bridge { grid-column: 1 / -1; display: grid; gap: 8px; }
html:not(.ds) :is(.cg-bridge-save, .cg-bridge-main, .cg-points-info) { min-height: 44px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 14px; background: none; color: inherit; font: inherit; }
html:not(.ds) .cg-bridge-three, html:not(.ds) .cg-bridge-save > svg { width: 20px; height: 20px; }
html:not(.ds) .cg-points-info { min-width: 44px; vertical-align: middle; }
html:not(.ds) .cg-home { display: grid; }
/* the golden ticket on the plain path (?ds=0): a gold slip with its words, still (lane NIGHT, 10 October 2026) */
html:not(.ds) .cg-golden-face { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: #ffd43b; color: #23103d; }
html:not(.ds) .cg-golden-star { width: 20px; height: 20px; fill: currentColor; }
html:not(.ds) .cg-golden-words { display: grid; text-align: left; }
html:not(.ds) .cg-golden-sheen { display: none; }
html:not(.ds) .cg-result-chips { display: flex; flex-wrap: wrap; gap: 8px; }
html:not(.ds) :is(.cg-rank, .cg-unranked) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 16px; background: none; color: inherit; text-align: left; }
html:not(.ds) :is(.cg-rank, .cg-unranked) > div { display: grid; }

/* ===== prototype-src/collections-client.css ===== */
.collections-api-content{max-width:960px;margin:0 auto;padding:clamp(28px,6vw,72px) 24px 120px}.collections-api-header{display:flex;gap:24px;justify-content:space-between;align-items:end;margin-bottom:30px}.collections-api-header h1{font-size:clamp(2rem,5vw,4rem);line-height:.98;margin:8px 0}.collections-api-header p{color:var(--muted,#8e8b95);max-width:42ch}.collections-api-search input{min-width:230px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.07);padding:13px 17px;color:inherit}.api-collection-shelf{margin:28px 0}.api-collection-shelf .explore-shelf-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}.api-collection-card{width:100%;text-align:left}.collections-api-state{text-align:center;padding:20vh 24px}.collection-detail-copy{max-width:700px;margin:8vh auto 28px;padding:0 24px}.collection-detail-copy h1{font-size:clamp(2.5rem,8vw,6rem);line-height:.92}.collection-film-grid{max-width:960px;margin:auto;padding:0 24px 100px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.collection-film-card{min-height:130px;padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.06);display:flex;flex-direction:column;justify-content:end}.collection-film-card small{color:var(--muted,#8e8b95);margin-top:6px}.subpage-header{display:flex;align-items:center;justify-content:space-between;padding:24px}.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}@media(max-width:680px){.collections-api-header{display:block}.collections-api-search input{width:100%;margin-top:18px}}
.device .collections-api-screen { overflow-y:auto; padding:24px 0 0; }
/* The ambient layer must not enlarge the scrollable page. Otherwise focusing
   Show more can pan the entire reading surface sideways on an animated phone. */
#device .collections-api-screen::before {inset:0;transform:none!important;animation:none!important;}
.device .collections-api-screen>.app-header { padding:0 24px; }
.device .collections-api-content { padding:32px 24px 128px; }
.device .collections-api-header { display:block; }
.device .collections-api-header h1 { font-size:clamp(30px,9vw,42px); line-height:1.06; letter-spacing:-.04em; }
.device .collections-api-header p { color:#bdb7cd; font-size:15px; line-height:1.55; }
.device .collections-api-search { display:block; width:100%; }
.device .collections-api-search input { min-width:0; width:100%; min-height:48px; font-size:16px; margin-top:18px; }
.device .collections-api-state { padding:64px 0 24px; text-align:left; }
.device .collections-api-state h2 { font-size:28px; line-height:1.2; letter-spacing:-.025em; overflow-wrap:anywhere; }
.device .collections-api-state p { color:#bdb7cd; font-size:16px; line-height:1.6; }
.device .collections-api-state .primary-button { margin-top:28px; width:100%; }
.device .api-collection-shelf .explore-shelf-track { display:grid; grid-template-columns:minmax(0,1fr); overflow:visible; }
.device .api-collection-card { display:flex; align-items:center; min-height:136px; height:auto; border-radius:24px; padding:16px; gap:16px; background:linear-gradient(130deg,rgba(141,119,193,.16),rgba(255,255,255,.025)); border:1px solid rgba(194,177,234,.17); }
.device .api-collection-card .explore-card-art { position:relative; inset:auto; width:58px; height:78px; flex:0 0 58px; display:grid; place-items:center; background:rgba(167,139,250,.09); border-radius:12px; }
.device .api-collection-card .explore-card-art .brand-mark { width:30px; height:auto; }
.device .api-collection-card .explore-card-copy { position:relative; inset:auto; min-width:0; padding:0; display:grid; gap:7px; }
.device .api-collection-card strong { font-size:18px; line-height:1.3; white-space:normal; }
.device .api-collection-card em { font-style:normal; color:#bdb7cd; }
.device .collections-api-detail { overflow-y:auto; padding:0 0 32px; }
#device .collections-api-detail::before {inset:0;transform:none;animation:none!important;}
/* The folio owns entry; a second whole-page zoom would move the reading surface. */
/* (release polish, 28 October 2026) the edge swipe moves the page (.ds-eb-moving): only the holds on its place are lifted then.
   Its entry stays off: lifting animation:none restarted every page's .screen "enter" (opacity 0, scale .988), two frames with
   nothing on the display as the finger began to pull */
#device .collections-api-detail:not(.fluid-departure) {animation:none!important;}
#device .collections-api-detail:not(.fluid-departure):not(.ds-eb-moving) {opacity:1!important;transform:none!important;translate:none!important;scale:none!important;filter:none!important;}
.device .collection-detail-copy { margin:28px auto; }
.device .collection-detail-copy h1 { font-size:clamp(30px,9vw,42px); line-height:1.08; overflow-wrap:anywhere; }
.device .collection-detail-copy p { font-size:16px; line-height:1.6; color:#bdb7cd; }
.device .collection-film-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.device .collection-film-card { padding:0 0 16px; overflow:hidden; text-align:left; justify-content:flex-start; color:inherit; }
.device .collection-film-card strong,.device .collection-film-card small { padding:0 12px; }
.device .collection-film-poster { aspect-ratio:2/3; width:100%; display:grid; place-items:center; background:linear-gradient(145deg,#312642,#17131e); margin-bottom:12px; overflow:hidden; }
.device .collection-film-poster img { width:100%; height:100%; object-fit:cover; }
.device .collection-film-poster .brand-mark { width:42px; }
@media(forced-colors:active) { .device .api-collection-card,.device .collection-film-card { border:1px solid CanvasText; } }
.device .collections-api-saved {padding:24px 22px 48px;overflow-y:auto;}
.device .collections-api-saved h1 {font-size:24px;}
.device .collections-api-saved .api-collection-card {margin:16px 0;width:100%;}
.device .collections-api-saved .collection-archived-remove {display:block;min-height:44px;margin-top:12px;text-align:left;}
.device .collections-api-saved > p {font-size:16px;line-height:1.6;color:#c6d0e3;margin:24px 0;}
.device .collections-api-empty{margin:24px 0;padding:26px 22px;border:1px solid rgba(194,177,234,.2);border-radius:24px;background:linear-gradient(145deg,rgba(94,80,130,.17),rgba(14,15,24,.9));}
.device .collections-api-empty h2{font-size:26px;line-height:1.15;letter-spacing:-.035em;margin:16px 0;}
.device .collections-api-empty p,.device .collections-pagination p{color:#bdb7cd;font-size:16px;line-height:1.6;}
.device .collections-api-state .quiet-button{display:block;width:100%;min-height:48px;margin-top:12px;}
.device .collection-opening .collections-api-state{padding-top:12px;}
.device .collection-opening .collections-api-state .primary-button{margin-top:18px;}
.device .collections-pagination{display:grid;gap:12px;margin:24px 0;}
.device .collections-pagination [aria-disabled="true"]{opacity:.65;cursor:progress;}

/* Editorial shelves: one considered cover, then a tactile trail of collections. */
#device .api-collection-shelf>header h2{font-size:24px;line-height:1.18;letter-spacing:-.04em;margin:0}
#device .api-collection-shelf>header p{font-size:13px;line-height:1.5;color:#b7aec7;margin:8px 0 16px;max-width:35ch}
#device .api-collection-shelf .explore-shelf-track{display:flex;gap:14px;overflow-x:auto;padding:3px 2px 20px;scroll-snap-type:x proximity;scroll-padding:2px;scrollbar-width:thin}
#device .api-collection-card{position:relative;isolation:isolate;flex:0 0 86%;min-width:0;min-height:246px;height:246px;align-items:flex-end;overflow:hidden;padding:22px;border:1px solid #c4abd64d;border-radius:24px;background:#171220;scroll-snap-align:start;box-shadow:inset 0 1px #ffffff30,0 10px 20px #03020736;text-align:left}
#device .api-collection-card .explore-card-art{position:absolute;inset:0;width:100%;height:100%;border-radius:0;overflow:hidden;background:linear-gradient(135deg,#31233e,#161223)}
#device .api-collection-card .explore-card-art img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;opacity:.9;transition:transform var(--motion-slow) var(--motion-curve)}
#device .api-collection-card .explore-card-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#09061005,#0b071d50 28%,#0b071deb 78%,#0b071d)}
#device .api-collection-card .explore-card-copy{position:relative;z-index:1;display:grid;gap:9px;width:100%;max-width:100%}
#device .api-collection-card .explore-card-copy small{color:#e2d1f3;font-size:10px;letter-spacing:.13em;line-height:1.5}
#device .api-collection-card .explore-card-copy strong{color:#fff;font-size:26px;line-height:1.08;letter-spacing:-.04em;overflow-wrap:anywhere}
#device .api-collection-card .explore-card-copy em{color:#d2c7df;font-size:12px}
#device .api-collection-card>.row-chevron{position:absolute;z-index:2;right:18px;bottom:20px;color:#e8d9ff}
#device .api-collection-card:focus-visible{outline:3px solid #d2b7ff;outline-offset:2px}
#device .collections-api-results[data-filtered="true"] .explore-shelf-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
#device .collections-api-results[data-filtered="true"] .api-collection-card{height:220px;min-height:220px;padding:15px}
#device .collections-api-results[data-filtered="true"] .api-collection-card strong{font-size:21px}
#device .collections-api-results[data-filtered="true"] .api-collection-card small{font-size:9px}
#device .collection-films-heading{font-size:14px;letter-spacing:.08em;color:#d4c6e5;margin:30px 24px 18px;text-transform:uppercase}
#device .collection-detail-copy{margin:22px auto 28px}
#device .collection-detail-copy>small{display:block;color:#bdb0d0;font-size:13px;line-height:1.5}
#device .collection-detail-copy .collection-share-action{width:auto;min-height:44px;padding:10px 16px;margin:16px 0 0;border-radius:999px;font-size:13px;background:#241a34;border:1px solid #80689977}
#device .collection-film-card{border-radius:18px;background:linear-gradient(145deg,#21182d,#13101c);border-color:#a18eb633;box-shadow:inset 0 1px #ffffff1f,0 8px 14px #04020740}
#device .collection-film-poster{position:relative}
#device .collection-film-poster::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,#ffffff16,transparent 36%,transparent 70%,#d9c4ff10);box-shadow:inset 0 0 0 1px #ffffff12}
#device .library-premium>.app-header,#device .collections-api-screen>.app-header{height:48px;min-height:48px;display:flex;align-items:center;position:relative;margin:0}
#device .library-premium .brand-home,#device .collections-api-screen .brand-home{display:flex;align-items:center;gap:12px;position:relative;isolation:isolate;border:0;background:none;padding:0;color:#e5e6ed}
#device .library-premium .header-brand-aura,#device .collections-api-screen .header-brand-aura{position:absolute;width:172px;height:70px;left:-26px;top:-12px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#518dd84d,transparent 68%);filter:blur(11px)}
@media(hover:hover){#device .api-collection-card:hover .explore-card-art img{transform:scale(1.035)}}
@media(max-width:340px){#device .collections-api-results[data-filtered="true"] .explore-shelf-track{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){#device .api-collection-card .explore-card-art img{transition:none;transform:none!important}}
@media(forced-colors:active){#device .api-collection-card .explore-card-art{display:none}#device .api-collection-card{background:Canvas;border:1px solid CanvasText}#device .api-collection-card .explore-card-copy>*{color:CanvasText}}
#device .api-collection-shelf{padding:0;margin:28px 0}
#device .api-collection-shelf>header{padding:0;margin:0}

/* Original editorial thread entry points and a quiet, physical cover object. */
#device .collections-search-invitations{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 4px}
#device .collections-search-invitations button{min-height:44px;padding:10px 12px;text-align:left;border:1px solid #ad8cd13b;border-radius:12px;background:linear-gradient(135deg,#372340aa,#21172e99);color:#e3d4ef;font-size:12px;line-height:1.35}
#device .collections-search-invitations button::before{content:"↗";display:inline-block;margin-right:7px;color:#d4abea}
#device .collections-search-invitations button:focus-visible{outline:2px solid #dfb6f5;outline-offset:3px}
#device .collection-cover-object{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;height:206px;margin:2px 24px 0;perspective:850px;pointer-events:none}
#device .collection-cover-object::before{content:"";position:absolute;z-index:-1;width:250px;height:148px;background:radial-gradient(ellipse,#9854b938,#558ddb16 44%,transparent 72%);filter:blur(14px)}
#device .collection-cover-object>span{position:absolute;display:block;width:106px;height:158px;overflow:hidden;border-radius:13px;border:1px solid #e8d6ff70;background:#20182e;box-shadow:inset -2px -1px 0 #ddd4f64d,3px 6px 0 -2px #3b2b4b,5px 15px 23px #0009;transform:translateX(calc(var(--cover-position)*69px)) rotateY(calc(var(--cover-position)*-12deg)) rotateZ(calc(var(--cover-position)*11deg));z-index:calc(3 - var(--cover-distance))}
#device .collection-cover-object>span:nth-child(2){transform:translateZ(34px) translateY(-3px)}
#device .collection-cover-object img{width:100%;height:100%;object-fit:cover;display:block}
#device .collection-poster-fallback{display:grid;place-items:center;width:100%;height:100%}
#device .collection-poster-fallback[hidden]{display:none}
#device .api-collection-card .explore-card-art .collection-poster-fallback .brand-mark{width:44px;height:44px;object-fit:contain}
#device .api-collection-card .explore-card-art .collection-poster-fallback{height:48%;align-self:start}
#device .collection-film-poster .collection-poster-fallback .brand-mark{width:42px;height:42px;object-fit:contain}
#device .collection-cover-object .collection-poster-fallback .brand-mark{width:38px;height:38px;object-fit:contain}
#device .collection-cover-object>span::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#ffffff42,transparent 28%,transparent 64%,#dec2ff1c);box-shadow:inset 0 1px #fff9,inset 0 0 0 1px #ffffff19;border-radius:inherit}
#device .collections-api-detail .collection-detail-copy{margin-top:12px}
#device .collections-api-detail .collection-detail-copy h1{font-size:clamp(31px,8.9vw,42px);line-height:1.04;letter-spacing:-.04em;margin:0 0 16px}
#device .collections-api-detail .subpage-header{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;align-items:center}
#device .collections-api-detail .subpage-header>.eyebrow{text-align:center;font-size:11px;line-height:1.3;letter-spacing:.12em}
#device .api-collection-card .explore-card-copy small,#device .collections-api-results[data-filtered="true"] .api-collection-card small{font-size:11px}
#device .collection-membership-notes{margin:0 24px 40px;border-top:1px solid #a190b33b;color:#c6b7d6;font-size:14px;line-height:1.55}
#device .collection-membership-notes summary{min-height:48px;padding:16px 0;color:#e6d9f1;cursor:pointer}
#device .collection-membership-notes dl{margin:0}
#device .collection-membership-notes dt{color:#eee5f6;font-weight:650;margin:18px 0 5px}
#device .collection-membership-notes dd{margin:0}
@media(max-width:340px){#device .collection-cover-object{height:183px}#device .collection-cover-object>span{width:94px;height:140px}}
@media(forced-colors:active){#device .collection-cover-object{display:none}#device .collections-search-invitations button{background:Canvas;color:ButtonText;border-color:ButtonText}}

#device .collections-api-detail .collection-film-grid{padding-bottom:24px}

/* The curator's context, including suitability cautions, belongs before the films. */
#device .collection-editorial-note{margin:0 24px 28px;padding:18px 20px;border:1px solid #a88bc43d;border-radius:20px;background:linear-gradient(135deg,#302039b8,#181321);box-shadow:inset 0 1px #f3d8ff0a;color:#ddd1e7}
#device .collection-editorial-note h2{margin:0 0 9px;color:#debdf3;font-size:13px;line-height:1.5;font-weight:650;letter-spacing:.025em}
#device .collection-editorial-note p{margin:0;font-size:16px;line-height:1.6;overflow-wrap:anywhere}
#device .collection-editorial-note p.collection-content-detail{margin-top:10px;font-size:15px;line-height:1.55;opacity:.86}
@media(forced-colors:active){#device .collection-editorial-note{background:Canvas;border-color:CanvasText;color:CanvasText;box-shadow:none}#device .collection-editorial-note h2{color:CanvasText}}

/* On the shortest phone, let the first editorial cover reach the first fold. */
@media(max-width:360px) and (max-height:650px){
 #device .collections-api-content{padding-top:8px}
 #device .collections-api-header{margin-bottom:8px}
 #device .collections-api-header h1{font-size:28px;line-height:1.06;margin:5px 0}
 #device .collections-api-header p{font-size:13px;margin:4px 0}
 #device .collections-api-search input{margin-top:4px}
 #device .collections-search-invitations{flex-wrap:nowrap;overflow-x:auto;margin:5px 0;scrollbar-width:none}
 #device .collections-search-invitations button{flex:0 0 auto;max-width:240px}
 #device .api-collection-shelf{margin-top:10px}
 #device .api-collection-shelf>header p{font-size:12px;margin:5px 0 10px}
}
/* Once a query is entered, results take precedence over introductory browsing.
   The mounted input and category controls stay in place; clearing restores home. */
#device .collections-api-content:has(.collections-api-results[data-searching="true"]) .collections-api-header>div:first-child{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#device .collections-api-content:has(.collections-api-results[data-searching="true"]) .collections-search-invitations{display:none}
#device .collections-api-content:has(.collections-api-results[data-searching="true"]) .collections-api-header{margin-bottom:12px}
#device .collections-api-content:has(.collections-api-results[data-searching="true"]) .collections-api-search input{margin-top:0}
#device .collections-api-results[data-searching="true"] .api-collection-shelf{margin-top:12px}
/* A failed load gives recovery the same priority as search. Keep the actual
   search/category controls mounted, and restore the introduction on success. */
#device .collections-api-content:has(.collections-api-state) .collections-api-header>div:first-child{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#device .collections-api-content:has(.collections-api-state) .collections-search-invitations{display:none}
#device .collections-api-content:has(.collections-api-state) .collections-api-header{margin-bottom:12px}
#device .collections-api-content:has(.collections-api-state) .collections-api-search input{margin-top:0}
#device .collections-api-state{padding:12px 0 24px}
#device .collections-api-state h2{margin:16px 0 12px}
#device .collections-api-state p{margin:0}
#device .collections-api-state .primary-button{margin-top:16px}
/* Revalidation keeps the loaded shelves usable and never replaces a detail. */
/* Pagination and recovery are part of the product, not browser-default controls. */
#device .collection-save-recovery .secondary-button{margin-top:16px}
#device .collections-pagination{gap:16px;margin:28px 0;padding:20px;border:1px solid #a88bc43d;border-radius:22px;background:linear-gradient(145deg,#241a35d9,#15111f);box-shadow:inset 0 1px #ffffff08}
#device .collections-pagination p{margin:0;color:#d0c5de;font-size:15px;line-height:1.6}
#device :is(.collections-pagination,.collection-save-recovery) .secondary-button{appearance:none;display:block;width:100%;min-height:52px;padding:14px 18px;border:1px solid #b892e969;border-radius:16px;background:linear-gradient(145deg,#6543ad,#4b3188);color:#fff;font:inherit;font-size:15px;font-weight:650;line-height:1.4;text-align:center;box-shadow:inset 0 1px #eddcff2e,0 6px 18px #0c071d50;cursor:pointer;transition:transform var(--motion-fast) var(--motion-curve),background-color var(--motion-fast) var(--motion-curve)}
#device :is(.collections-pagination,.collection-save-recovery) .secondary-button:focus-visible{outline:2px solid #dfbbff;outline-offset:4px}
@media(prefers-reduced-motion:no-preference){#device :is(.collections-pagination,.collection-save-recovery) .secondary-button:active:not([aria-disabled="true"]){transform:scale(.985)}}
@media(prefers-reduced-motion:reduce){#device :is(.collections-pagination,.collection-save-recovery) .secondary-button{transition:none;transform:none}}
@media(forced-colors:active){#device .collections-pagination{background:Canvas;border-color:CanvasText;box-shadow:none}#device .collections-pagination p{color:CanvasText}#device :is(.collections-pagination,.collection-save-recovery) .secondary-button{background:ButtonFace;color:ButtonText;border-color:ButtonText;box-shadow:none}#device :is(.collections-pagination,.collection-save-recovery) .secondary-button:focus-visible{outline-color:Highlight}}
.collections-search-invite,.collections-suggest{margin:28px 0;padding:18px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.05)}.collections-suggest-action{display:inline-block;text-decoration:none}.collections-result-count{color:var(--muted,#8e8b95);font-size:13px}.collections-shelf-theme{display:inline-block;margin-top:6px;font-size:11px;letter-spacing:.04em;text-transform:uppercase}.collection-hero{position:relative}.collection-hero-kicker{display:block;text-align:center;font-size:11px;letter-spacing:.04em;text-transform:uppercase}.collection-header-quiet{visibility:hidden}
/* No filter chips (owner, 11 October 2026, hub/docs/TIDY-2026-10-13.md): "See all" on two shelves, a way back from a
   browsed list, and "See every list" beside "Search Collections" at the foot of the page. */
#device .api-collection-shelf>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
#device .api-collection-shelf>header>div{flex:1 1 auto;min-width:0}
#device .collections-see-all{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 6px 0 10px;margin:-8px -6px 0 0;border:0;background:none;color:#cfc6dc;font-size:15px;font-weight:600;white-space:nowrap}
#device .collections-see-all .row-chevron{position:static;font-style:normal;opacity:.7}
#device .collections-browse-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 0;margin:10px 0 -6px;border:0;background:none;color:#cfc6dc;font-size:16px;font-weight:600}
#device .collections-back-chevron{font-style:normal;font-size:24px;line-height:1;margin-top:-2px}
#device .collections-invite-actions{display:flex;flex-wrap:wrap;gap:8px}
#device :is(.collections-see-all,.collections-browse-back):focus-visible{outline:2px solid #dfbbff;outline-offset:2px;border-radius:10px}
/* (16 October 2026) the front page's first three shelves, then one "See more collections" disclosure for the rest */
#device .collections-more{margin:6px 0 0}
#device .collections-more>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:52px;margin:4px 0 8px;padding:0 18px;border-radius:16px;background:linear-gradient(180deg,rgb(255 255 255 / .07),rgb(255 255 255 / .035));box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1);color:var(--c-label-1,#f4efff);font:600 15px/1.2 var(--font-ui,system-ui);cursor:pointer;-webkit-tap-highlight-color:transparent}
#device .collections-more>summary::-webkit-details-marker{display:none}
#device .collections-more>summary .collections-more-label{flex:1}
#device .collections-more>summary .collections-more-count{color:var(--c-label-2,#b9b0cc);font-weight:500;font-size:13px}
#device .collections-more>summary>i{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform var(--motion-fast) var(--motion-curve);opacity:.7}
#device .collections-more[open]>summary>i{transform:translateY(2px) rotate(225deg)}
#device .collections-more>summary:focus-visible{outline:2px solid var(--c-focus,#a78bfa);outline-offset:2px}
/* (release polish, 28 October 2026; the owner: the suggestions stood one per line at ragged widths) they are tags: compact pills that
   flow inline and wrap, evenly spaced, each still a full-height target */
#device .collections-search-invitations{gap:8px 8px;align-items:center}
#device .collections-search-invitations button{display:inline-flex;align-items:center;min-height:40px;padding:0 13px;border-radius:var(--r-pill,999px);white-space:nowrap;font-size:13px;line-height:1.2;text-align:center}
#device .collections-search-invitations button::before{margin-right:5px;font-size:11px}
:where(html.ds) #device .collections-search-invitations button{border-radius:var(--r-pill,999px)}
/* (pages polish, 28 October 2026; the owner: "Why these films" sat under all eight posters with a big empty gap below it) it is
   read with the description it explains, between the count and Share, a row between two hairlines that opens in place */
#device .collection-detail-copy>.collection-membership-notes{margin:14px 0 0;border-top:1px solid #a190b33b;border-bottom:1px solid #a190b33b}
#device .collection-detail-copy>.collection-membership-notes summary{min-height:44px;padding:10px 0}
#device .collection-detail-copy>.collection-membership-notes[open]{padding-bottom:14px}
#device .collection-detail-copy>.collection-membership-notes+.collection-share-action{margin-top:20px}

/* ===== prototype-src/first-run.css ===== */
.device .first-run-screen { padding: max(24px,env(safe-area-inset-top)) 24px max(32px,env(safe-area-inset-bottom)); overflow-y:auto; }
.device .first-run-screen > header { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px; }
.device .first-run-screen > header span { font-size:12px;letter-spacing:.08em;color:#c4cadc; }
.device .first-run-screen .onboarding-copy { margin:16px 0 20px;text-align:left; }
.device .first-run-screen h1 { font-size:clamp(28px,8vw,38px);line-height:1.1; }
.device .first-run-screen p { font-size:16px;line-height:1.55;color:#c7cddd; }
.device .first-run-note { padding:20px;border-radius:22px;margin:20px 0; }
.device .first-run-note strong { font-size:18px; }
.device .first-run-note p + p { margin-top:14px; }
.device .first-run-screen button { min-height:44px; }
#device .first-run-screen.first-run-intro .onboarding-copy{margin:28px 0 24px!important}
.device .first-run-intro .onboarding-copy h1{font-size:clamp(30px,9vw,42px);letter-spacing:-.045em;line-height:1.07;margin:12px 0 16px}
.device .first-run-intro .onboarding-copy .eyebrow{font-size:12px;letter-spacing:.16em;color:#b8c9d9}
.device .first-run-edition{position:relative;margin:22px 0 6px;padding:24px;border:1px solid #d1d7e244;border-radius:26px;background:linear-gradient(135deg,#f6f2e910,transparent 52%),linear-gradient(150deg,#202632,#10131c);box-shadow:inset 0 1px 0 #fff4,0 4px 0 -1px #101119,0 5px 0 -1px #7b7f8b55,0 24px 36px -20px #000c;text-align:left}
.device .first-run-edition-count{display:flex;align-items:center;gap:20px;padding-bottom:18px;border-bottom:1px solid #ced8e024}
.device .first-run-edition-count>strong{font-size:80px;font-weight:550;letter-spacing:-.075em;line-height:.9;color:#f6f4ee;font-variant-numeric:lining-nums}
.device .first-run-edition-count>span{font-size:18px;line-height:1.4;color:#f1f2f4}
.device .first-run-edition-count small{font-size:14px;color:#b8c2cf}
.device .first-run-edition>p{margin:17px 0 0;font-size:16px;color:#eff0f2}
.device .first-run-edition>p.first-run-edition-help{font-size:14px;line-height:1.5;color:#c2c7d0;margin-top:10px}
#device .first-run-intro>.primary-button:not(:disabled){background:linear-gradient(145deg,#f7f6f0,#cdd4df)!important;color:#161d29!important;border-color:#f6f5ef80!important;box-shadow:inset 0 1px 0 #fff,0 3px 0 #676f7f,0 14px 24px -12px #000c!important;font-size:16px!important;min-height:54px}
#device .first-run-intro>.primary-button span{color:inherit!important}
#device .first-run-intro>.first-run-local-note{font-size:13px!important;line-height:1.5;color:#b8bcc7;margin:20px 4px 2px}
@media(max-height:650px){#device .first-run-screen.first-run-intro .onboarding-copy{margin:16px 0!important}.device .first-run-edition{padding:20px;margin-top:16px}.device .first-run-edition-count>strong{font-size:66px}}
.device .first-run-screen > .primary-button { width:100%;margin-top:20px; }
.device .first-run-screen > .quiet-button { display:block;margin:12px auto; }
.device .first-run-screen progress { width:100%;height:4px;accent-color:#789eff; }
.device .first-run-screen.first-run-taste {position:relative;isolation:isolate;background:#050610;}
.device .first-run-screen.first-run-taste > :not(.taste-atmosphere) {position:relative;z-index:1;}
.device .first-run-screen .taste-atmosphere {position:absolute;z-index:0;inset:0;min-height:100%;overflow:hidden;pointer-events:none;background:linear-gradient(160deg,#111127,#050610 58%,#030409);}
.device .first-run-screen .taste-atmosphere::after {content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 0 22%,#08081255 64%,#030409b8 100%),linear-gradient(180deg,#05061070,#05061020 35%,#050610b8 84%,#030409e0);}
.device .first-run-screen .taste-atmosphere-layer {position:absolute;inset:-9%;display:block;background-image:radial-gradient(ellipse at 24% 30%,var(--taste-ambient-a),transparent 62%),radial-gradient(ellipse at 78% 72%,var(--taste-ambient-b),transparent 62%),var(--taste-atmosphere-art);background-position:center 38%;background-size:cover;filter:blur(24px) saturate(1.06) brightness(.92);opacity:.72;transform:scale(1.08);}
.device .first-run-screen .taste-atmosphere-layer.is-lit {background-image:radial-gradient(ellipse at 24% 30%,var(--taste-ambient-a),transparent 62%),radial-gradient(ellipse at 78% 72%,var(--taste-ambient-b),transparent 62%),var(--taste-atmosphere-light);filter:none;}
.device .first-run-screen .taste-atmosphere-layer.is-entering {animation:taste-atmosphere-in var(--motion-normal) var(--motion-curve) both;}
.device .first-run-screen .taste-atmosphere-layer.is-outgoing {animation:taste-atmosphere-out var(--motion-normal) var(--motion-curve) both;}
@keyframes taste-atmosphere-in {from{opacity:0}to{opacity:.72}}
@keyframes taste-atmosphere-out {from{opacity:.72}to{opacity:0}}
.device.manual-solid .first-run-screen .taste-atmosphere-layer,
.reduce-transparency .first-run-screen .taste-atmosphere-layer {display:none;}
.device.manual-reduced-motion .first-run-screen .taste-atmosphere-layer.is-outgoing {display:none;}
.device.manual-reduced-motion .first-run-screen .taste-atmosphere-layer.is-entering {animation:none;opacity:.72;}
@media(prefers-reduced-motion:reduce){.device .first-run-screen .taste-atmosphere-layer.is-outgoing{display:none}.device .first-run-screen .taste-atmosphere-layer.is-entering{animation:none;opacity:.72}}
@media(prefers-reduced-transparency:reduce),(forced-colors:active),(update:slow){.device .first-run-screen .taste-atmosphere-layer{display:none}}
@media(forced-colors:active){.device .first-run-screen.first-run-taste,.device .first-run-screen .taste-atmosphere{background:Canvas;color:CanvasText}}
.device .first-run-screen .taste-deck { height:clamp(225px,40dvh,350px);margin:12px auto; }
.device .first-run-screen .taste-swipe-card { height:100%;width:auto;aspect-ratio:2/3;max-width:100%;background:#172032; }
.device .first-run-screen .taste-swipe-card img { position:absolute;width:100%;height:100%;object-fit:cover;inset:0; }
.device .first-run-screen .taste-film-copy { position:absolute;bottom:0;left:0;right:0;padding:42px 16px 18px;background:linear-gradient(transparent,rgba(4,8,18,.96)); }
.device .first-run-screen .taste-film-copy strong {font-size:20px;line-height:1.15;}
.device .first-run-screen .taste-film-copy span {font-size:13px;}
.device .first-run-screen .taste-actions {margin-top:16px;}
.device .first-run-screen .taste-actions button span {font-size:13px;letter-spacing:0;}
.device .streaming-onboarding-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.device .streaming-choice {position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-height:122px;padding:18px;text-align:left;color:#eef2ff;border:1px solid #3a465e;border-radius:20px;background:linear-gradient(130deg,#1c2639,#111827);}
.device .streaming-choice.is-selected {border-color:#a9bdff;background:linear-gradient(130deg,#2e4267,#1a2846);}
.device .streaming-monogram {font-size:25px;font-weight:700;line-height:1;}
.device .streaming-logo {display:grid;place-items:center;width:112px;max-width:100%;height:56px;overflow:hidden;border-radius:8px;}
.device .streaming-logo img {display:block;width:100%;height:100%;object-fit:contain;}
.device .streaming-logo-netflix {width:40px;}
.device .streaming-logo-prime {width:78px;background:#fff;padding:5px;}
.device .streaming-logo-mubi {background:#fff;padding:8px;}
.device .streaming-logo-apple,.device .streaming-logo-disney,.device .streaming-logo-paramount {width:112px;height:64px;}
.device .streaming-choice {gap:12px;min-height:142px;}
.device .streaming-choice strong {font-size:16px;}
.device .streaming-tick {position:absolute;right:16px;top:14px;font-size:22px;color:#b5c8ff;}
.device .streaming-choice:focus-visible {outline:3px solid #c7d7ff;outline-offset:3px;}
.device .first-run-error {padding:16px;border:1px solid #c88b83;border-radius:14px;color:#ffe2dc;}
/* Keep the recovery page's ambient light inside its readable scrolling surface. */
#device .first-run-recovery::before {inset:0;transform:none;animation:none!important;}

/* A held photographic card: movement, reflection and edge share one surface. */
#device .first-run-screen:not(.fluid-departure) {animation:none!important;opacity:1!important;filter:none!important;translate:none!important;scale:1!important;}
#device .first-run-screen .taste-swipe-card.verified-taste-poster {
  opacity:1!important; user-select:none; -webkit-user-select:none;
  transform:rotateY(0deg) rotateX(2deg) rotate(-.5deg); transform-origin:50% 50%!important;
  transition:transform var(--motion-normal) var(--motion-curve)!important;
  border-color:#a8a7af!important;
  box-shadow:0 30px 46px -16px #000e,2px 8px 0 -5px #8e8b96,3px 5px 0 -3px #22242e,inset 0 1px 0 #fff8!important;
}
#device .first-run-screen .taste-swipe-card.verified-taste-poster::before {
  background:linear-gradient(115deg,transparent calc(var(--taste-reflection,38%) - 22%),#ffffff22 var(--taste-reflection,38%),transparent calc(var(--taste-reflection,38%) + 20%))!important;
  box-shadow:inset 1px 1px 1px #fff9,inset -1px -2px 1px #ffffff28!important;
}
#device .first-run-screen .taste-swipe-card.taste-card-held,
#device .first-run-screen .taste-swipe-card.taste-card-exiting {transition:none!important;will-change:transform;}
#device .first-run-screen .taste-swipe-card.taste-card-held {cursor:grabbing;box-shadow:0 46px 70px -18px #000f,4px 5px 0 #32313f,6px 7px 0 #9993a078,inset 0 1px 0 #fff9!important;}
#device .manual-reduced-motion .taste-swipe-card,
#device.manual-reduced-motion .first-run-screen .taste-swipe-card {transition:none!important;}
@media(prefers-reduced-motion:reduce){#device .first-run-screen .taste-swipe-card.verified-taste-poster{transition:none!important;transform:none;}}
.device .triptic-emblem {display:inline-flex;align-items:center;justify-content:center;width:80px;height:96px;flex:none;}
.device .triptic-emblem > .brand-mark {width:64px;height:64px;filter:none;animation:none;}
.device .triptic-emblem.is-compact {width:40px;height:44px;}
.device .triptic-emblem.is-compact > .brand-mark {width:32px;height:32px;}
.device .profile-orb {border-radius:18px;background:transparent;box-shadow:none;animation:none;}
.device .profile-orb::before,.device .profile-orb::after,.device .ritual-pressure-wave,.device .ritual-release-wave {display:none;}
.device .cryptic-mini-orb {background:none;border:0;border-radius:0;box-shadow:none;}
@media (max-height:650px) { .device .first-run-screen .onboarding-copy {margin:8px 0;}.device .first-run-screen .taste-deck {height:225px;} }
@media (prefers-reduced-motion:reduce) { .device .first-run-screen * {animation:none!important;transition:none!important;} }

/* A single 2:3 film card; its title is part of the photographic surface. */
#device .first-run-screen {overflow-x:hidden!important;}
#device .first-run-screen .onboarding-copy {width:100%;max-width:none;margin:12px 0 22px!important;}
#device .first-run-screen .onboarding-copy p {max-width:none;margin:10px 0 0!important;}
#device .first-run-screen .taste-deck {position:relative!important;display:grid!important;place-items:center;width:min(76%,250px)!important;height:auto!important;min-height:0!important;margin:18px auto 24px!important;perspective:900px;isolation:isolate;}
#device .first-run-screen .taste-swipe-card {position:relative!important;inset:auto!important;display:block!important;width:100%!important;height:auto!important;max-width:100%!important;aspect-ratio:2/3!important;margin:0!important;padding:0!important;border:1px solid #77768d!important;border-radius:20px!important;overflow:hidden!important;background:#12131e!important;box-shadow:0 34px 54px -17px #000e,3px 3px 0 #2c2c38,5px 5px 0 #817e8b80,inset 0 1px 0 #ffffff77!important;touch-action:pan-y;transform:translateX(0);transform-origin:50% 80%;}
#device .first-run-screen .taste-swipe-card img {position:absolute!important;inset:0!important;display:block;width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover;pointer-events:none;}
#device .first-run-screen .taste-swipe-card img[hidden] {display:none!important;}
#device .first-run-screen .taste-swipe-card::before {content:""!important;position:absolute!important;inset:0!important;z-index:3!important;pointer-events:none;background:linear-gradient(118deg,#ffffff20,transparent 25%,transparent 65%,#ffffff08)!important;border-radius:inherit;box-shadow:inset 0 1px 1px #ffffff50;}
#device .first-run-screen .taste-swipe-card::after {content:"";position:absolute;z-index:4;inset:0 0 0 auto;width:6px;pointer-events:none;background:linear-gradient(90deg,transparent,#ffffff30 48%,#0609139c);border-radius:0 19px 19px 0;}
#device .first-run-screen .taste-film-copy {position:absolute!important;z-index:2!important;inset:auto 0 0!important;display:grid!important;width:100%!important;max-width:none!important;gap:6px!important;padding:46px 16px 16px!important;background:linear-gradient(180deg,transparent,#080b13d9 42%,#080b14f8 100%)!important;text-align:left!important;transform:none!important;}
#device .first-run-screen .taste-film-copy strong {font-size:19px!important;line-height:1.2!important;letter-spacing:-.02em!important;overflow-wrap:normal;word-break:normal;}
#device .first-run-screen .taste-film-copy span {font-size:13px!important;line-height:1.35!important;color:#c8c8d8!important;}
#device .first-run-screen .taste-ghost {position:absolute!important;inset:7px 0 -7px!important;width:100%!important;height:auto!important;margin:0!important;border:1px solid #5b596e!important;border-radius:20px!important;background:linear-gradient(140deg,#282739,#10111b)!important;transform:rotate(-3deg) scale(.97)!important;opacity:.7!important;z-index:-1!important;pointer-events:none;}
#device .first-run-screen .taste-ghost.ghost-b {inset:13px 0 -13px!important;transform:rotate(3deg) scale(.94)!important;opacity:.4!important;z-index:-2!important;}
#device .first-run-screen .taste-actions {position:relative!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:10px!important;width:100%!important;margin:16px 0 6px!important;}
#device .first-run-screen .taste-actions button {display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:8px!important;width:auto!important;flex:1!important;min-width:0!important;height:auto!important;min-height:78px!important;padding:12px 6px!important;border-radius:24px!important;}
#device .first-run-screen .taste-actions .undo-taste {flex:0 0 62px!important;}
#device .first-run-screen .taste-actions button span {font-size:12px!important;white-space:normal!important;}
.first-taste-films{display:flex;justify-content:center;gap:14px;margin:20px 0 24px;}
.first-taste-films figure{flex:0 1 100px;min-width:0;margin:0;}
.first-taste-films img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border:1px solid #b9a6cf70;border-radius:12px;box-shadow:0 12px 26px #0008,2px 3px 0 #685979;}
.first-taste-films figcaption{font-size:12px;line-height:1.4;color:#cdc2db;margin-top:10px;text-align:center;overflow-wrap:anywhere;}
#device .first-run-screen .first-taste-insight{font-size:18px;line-height:1.5;color:#ece5f5;text-align:left;margin:18px 0;}
#device .first-run-screen .taste-actions button i {position:relative!important;inset:auto!important;flex:none;}
#device .first-run-screen > .quiet-button {min-height:48px;margin:14px auto!important;}
@media(max-height:700px){#device .first-run-screen .taste-deck {width:min(68%,210px)!important;}#device .first-run-screen .onboarding-copy h1{font-size:28px!important;}}
@media(max-height:650px){
  #device .first-run-screen:has(.taste-deck) {padding:18px 24px 24px!important;}
  #device .first-run-screen:has(.taste-deck) > header {margin-bottom:8px!important;}
  #device .first-run-screen:has(.taste-deck) progress {display:block;height:3px;margin:0!important;}
  #device .first-run-screen:has(.taste-deck) .onboarding-copy {margin:8px 0 12px!important;}
  #device .first-run-screen:has(.taste-deck) .onboarding-copy .eyebrow {display:none;}
  #device .first-run-screen:has(.taste-deck) .onboarding-copy p {font-size:14px!important;line-height:1.4!important;margin:6px 0 0!important;}
  #device .first-run-screen .taste-deck {width:min(53%,145px)!important;margin:8px auto 12px!important;}
  #device .first-run-screen .taste-film-copy {padding:32px 12px 12px!important;gap:4px!important;}
  #device .first-run-screen .taste-film-copy strong {font-size:16px!important;}
  #device .first-run-screen .taste-film-copy span {font-size:12px!important;}
  #device .first-run-screen .taste-actions button {min-height:66px!important;padding:9px 5px!important;}
  #device .first-run-screen > .quiet-button {margin:6px auto!important;}
}

/* Respect the existing Larger Text preference through every first-run state.
   Keep normal typography and physical-card artwork unchanged; let content scroll. */
#device.manual-large-text .first-run-screen .onboarding-copy h1 {font-size:clamp(36px,10vw,50px)!important;line-height:1.12!important;}
#device.manual-large-text .first-run-screen p,
#device.manual-large-text .first-run-screen .onboarding-copy p {font-size:19px!important;line-height:1.55!important;}
#device.manual-large-text .first-run-screen > header {flex-wrap:wrap;}
#device.manual-large-text .first-run-screen > header span,
#device.manual-large-text .first-run-screen .taste-actions button span {font-size:16px!important;line-height:1.45!important;}
#device.manual-large-text .first-run-screen button,
#device.manual-large-text .first-run-screen button.primary-button {font-size:19px!important;line-height:1.45!important;}
#device.manual-large-text .first-run-screen .primary-button span {font-size:19px!important;line-height:1.45!important;}
#device.manual-large-text .first-run-screen .onboarding-copy .eyebrow {font-size:14px!important;}
#device.manual-large-text .first-run-screen .first-run-edition-count>span,
#device.manual-large-text .first-run-screen .first-run-note strong {font-size:21px!important;}
#device.manual-large-text .first-run-screen .first-run-edition-count small,
#device.manual-large-text .first-run-screen .first-run-local-note,
#device.manual-large-text .first-run-screen .first-run-edition-help {font-size:16px!important;line-height:1.5!important;}
#device.manual-large-text .first-run-screen .first-run-edition-count>span {min-width:0;overflow-wrap:anywhere;}
#device.manual-large-text .first-run-screen .taste-film-copy strong {font-size:22px!important;line-height:1.25!important;}
#device.manual-large-text .first-run-screen .taste-film-copy span {font-size:16px!important;line-height:1.45!important;}
#device.manual-large-text .first-run-screen .streaming-choice strong {font-size:19px!important;line-height:1.4!important;overflow-wrap:anywhere;}
#device.manual-large-text .first-run-screen .first-taste-insight {font-size:21px!important;}
#device.manual-large-text .first-run-screen .first-taste-films figcaption {font-size:15px!important;line-height:1.45!important;}

/* ===== prototype-src/taste-refinement.css ===== */
/* The same cinematic material across first fifteen and returning refinement. */
#device .taste-refinement-screen:not(.first-run-taste){
 background:radial-gradient(ellipse at 12% 4%,#27396566,transparent 42%),radial-gradient(ellipse at 94% 28%,#633b8c36,transparent 52%),linear-gradient(155deg,#10111e,#080810 70%);
}
#device .first-run-screen:has(.taste-deck)>header,#device .taste-refinement-screen>header{
 padding:4px 0 12px;border-bottom:1px solid #c0b6e526;
}
#device .first-run-screen>header>.quiet-button{border:1px solid #c4b0f336;border-radius:999px;padding:7px 13px;color:#eee7ff;background:#b998e30b;font-size:13px;}
#device .first-run-screen>header>span{color:#c5b3e2;font-variant-numeric:tabular-nums;}
#device .first-run-screen .taste-flight{position:absolute;z-index:30;pointer-events:none;perspective:1000px;}
#device .first-run-screen .taste-flight .taste-swipe-card{width:100%!important;pointer-events:none;transition:none!important;}
#device .refinement-invitation{padding:26px 24px;border:1px solid #c0a3f047;border-radius:28px;background:linear-gradient(135deg,#b395e315,transparent 58%),linear-gradient(150deg,#252238,#12111d);box-shadow:inset 0 1px 0 #ffffff2b,0 20px 42px -24px #000;text-align:left;}
#device .refinement-edition-number{display:block;color:#e2c6ff;font-size:52px;line-height:1.1;font-weight:550;letter-spacing:-.055em;margin-bottom:24px;}
#device .refinement-invitation h2{font-size:24px;letter-spacing:-.035em;margin:0 0 12px;}
#device .refinement-invitation p{font-size:15px!important;line-height:1.55;margin:0 0 20px;}
#device .refinement-invitation button{width:100%;margin-top:12px;}
#device .taste-refinement-screen .secondary-button{appearance:none;min-height:52px;padding:14px 18px;border:1px solid #c5a8ed57;border-radius:17px;background:linear-gradient(130deg,#b998e321,#211a3033);box-shadow:inset 0 1px 0 #ffffff13;color:#f0e5ff;font:inherit;font-size:16px;line-height:1.4;cursor:pointer;}
#device .taste-refinement-screen .secondary-button:focus-visible{outline:2px solid #dac6f7;outline-offset:3px;}
#device .taste-refinement-screen .secondary-button:active{background:#b998e32e;}
#device .refinement-invitation small{display:block;color:#bfb6cd;font-size:12px;line-height:1.6;margin-top:18px;}
#device .refinement-local-note{font-size:12px!important;line-height:1.5!important;color:#b9b1c8!important;margin:24px 4px!important;}
/* The fixed home indicator sits above the scroll surface on short phones. */
#device .first-run-screen.taste-refinement-screen.first-run-taste:has(.taste-deck){
 height:100%;
 max-height:100%;
 padding-bottom:max(56px,calc(env(safe-area-inset-bottom) + 32px))!important;
}
#device .refinement-pause{display:grid;gap:4px;margin:12px 0;}
#device .refinement-pause[hidden]{display:none;}
#device .taste-choice-evidence{margin:20px 0;padding:22px;border:1px solid #ad8fd62e;border-radius:22px;background:linear-gradient(145deg,#211c304d,#0d0d16);}
#device .taste-choice-evidence h3{font-size:18px;margin:0 0 10px;color:#f3ecff;}
#device .taste-choice-evidence>p{font-size:13px;line-height:1.55;color:#bfb8cf;}
#device .taste-choice-evidence ol{list-style:none;margin:16px 0 0;padding:0;}
#device .taste-choice-evidence li{display:grid;gap:5px;padding:14px 0;border-top:1px solid #c2adde22;}
#device .taste-choice-evidence strong{font-size:14px;color:#f0e8fc;}
#device .taste-choice-evidence span{font-size:12px;line-height:1.5;color:#bfb8cf;}
@media(max-width:360px) and (max-height:650px){
 #device:not(.manual-large-text) .taste-refinement-screen:not(.first-run-taste) .onboarding-copy{margin:8px 0 12px!important;}
 #device:not(.manual-large-text) .taste-refinement-screen:not(.first-run-taste) .onboarding-copy p{font-size:14px!important;line-height:1.4!important;margin-top:6px!important;}
 #device:not(.manual-large-text) .taste-refinement-screen:not(.first-run-taste) .refinement-invitation{padding:18px 20px;}
 #device:not(.manual-large-text) .taste-refinement-screen:not(.first-run-taste) .refinement-edition-number{font-size:44px;margin-bottom:12px;}
 #device:not(.manual-large-text) .taste-refinement-screen:not(.first-run-taste) .refinement-invitation h2{margin-bottom:8px;}
 #device:not(.manual-large-text) .taste-refinement-screen:not(.first-run-taste) .refinement-invitation p{line-height:1.45;margin-bottom:12px;}
}@media(prefers-reduced-motion:reduce){#device .first-run-screen .taste-swipe-card.verified-taste-poster{transform:none!important;}}
#device.manual-reduced-motion .first-run-screen .taste-swipe-card.verified-taste-poster{transform:none!important;}
@media(forced-colors:active){#device .taste-refinement-screen,#device .refinement-invitation{background:Canvas!important;border-color:CanvasText;}#device .taste-choice-evidence *{color:CanvasText;}#device .first-run-screen .taste-swipe-card::before{display:none!important;}}

/* ===== prototype-src/account-settings.css ===== */
.device .settings-premium {padding:24px 22px max(40px,env(safe-area-inset-bottom));scroll-padding-block:24px max(40px,env(safe-area-inset-bottom));}
/* Keep the cinematic light within the page, not in its horizontal scroll area. */
.device .settings-premium::before {inset:0;animation:none;}
.device .settings-premium > .global-trio-atmosphere {position:absolute!important;max-width:100%;overflow:clip!important;contain:paint;}
.device .settings-premium > header {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:28px;}
.device .settings-premium > header h1 {font-size:23px;line-height:1.2;text-align:center;}
.device .settings-intro p {font-size:20px;line-height:1.35;letter-spacing:-.02em;margin:8px 0 30px;color:#e1e4ed;}
.device .settings-section {margin:24px 0;}
.device .settings-section > h2 {font-size:13px;text-transform:uppercase;letter-spacing:.13em;color:#aeb7d1;margin:0 6px 10px;}
.device .settings-row-group {background:linear-gradient(115deg,rgba(30,38,61,.75),rgba(15,19,32,.9));border:1px solid rgba(155,174,218,.13);border-radius:21px;overflow:hidden;}
.device .cryptic-settings-refined .settings-intro p {font-size:20px;line-height:1.4;color:#eee7ff;}
.device .cryptic-notification-preview .settings-intro h2 {margin:12px 0;font-size:clamp(30px,9vw,40px);line-height:1.1;letter-spacing:-.04em;}
.device .cryptic-sample-card {display:flex;align-items:flex-start;gap:14px;margin:28px 0;padding:20px;border:1px solid #aaa0cd55;border-radius:24px;background:linear-gradient(135deg,#32334c,#231b37);box-shadow:0 20px 48px #02030a55,inset 0 1px #ffffff14;}
.device .cryptic-sample-card > div {min-width:0;}
.device .cryptic-sample-icon {display:grid;place-items:center;flex:none;width:42px;height:48px;border-radius:13px;background:#8f77d326;color:#a8d9ff;}
.device .cryptic-sample-icon svg {width:25px;height:25px;}
.device .cryptic-sample-card small {display:block;margin-bottom:8px;font-size:12px;letter-spacing:.08em;color:#d4baf5;}
.device .cryptic-sample-card strong {display:block;font-size:18px;line-height:1.3;}
.device .cryptic-sample-card p {margin:8px 0 0;font-size:15px;line-height:1.5;color:#ddd6e9;}
.device .cryptic-preview-status {font-size:14px;line-height:1.5;color:#c5bcd6;margin:20px 0;}
.device .cryptic-notification-preview > .primary-button,.device .cryptic-notification-preview > .quiet-button {width:100%;margin-top:16px;}
.device .settings-row {display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;width:100%;padding:18px;min-height:72px;background:transparent;color:#f5f6fa;border:0;}
.device .settings-row + .settings-row {border-top:1px solid rgba(171,186,218,.10);}
.device .settings-row > span {min-width:0;}
.device .settings-row strong {display:block;font-size:16px;font-weight:550;}
.device .settings-row small {display:block;font-size:13px;line-height:1.45;color:#b6bfd4;margin-top:4px;}
.device .settings-row > i:not(.switch) {font-size:24px;color:#9eaac4;font-style:normal;}
.device .settings-premium button {min-height:44px;}
.device .settings-row:active {background:rgba(126,157,230,.10);}
.device .settings-premium .settings-note {padding:20px;border-radius:20px;margin:18px 0;}
.device .settings-premium .settings-note strong {font-size:18px;line-height:1.35;}
.device .settings-premium p {font-size:16px;line-height:1.6;color:#c7cddd;}
.device .settings-feedback {padding:16px;border:1px solid #637ca6;border-radius:16px;}
.device .settings-maker {text-align:center;font-size:13px;letter-spacing:.02em;color:#aab4cd;margin-top:32px;}
.device .settings-maker span {margin:0 6px;}
.device .privacy-explanation {padding:20px;border-radius:20px;}
.device .privacy-explanation summary {font-size:16px;min-height:44px;cursor:pointer;}
.device .delete-confirmation {display:flex;align-items:flex-start;gap:12px;padding:16px 0;font-size:16px;line-height:1.5;}
.device .delete-confirmation input {width:24px;height:24px;flex:none;accent-color:#93afff;}
.device .settings-premium .primary-button,.device .settings-premium .destructive-button {width:100%;margin:16px 0;}
.device .settings-premium button:focus-visible,.device .settings-premium summary:focus-visible {outline:2px solid #b6caff;outline-offset:-4px;}
.device .voice-education {position:absolute;z-index:200;left:16px;right:16px;bottom:max(24px,env(safe-area-inset-bottom));padding:24px;border-radius:24px;background:#12192b;border:1px solid #768db7;box-shadow:0 0 0 100vmax rgba(1,3,10,.72);}
.device .voice-education h2 {font-size:25px;line-height:1.15;}
.device .voice-education p {font-size:16px;line-height:1.6;color:#c7cddd;}
.device .voice-education button {width:100%;min-height:44px;margin-top:12px;}
#device > .voice-education {position:fixed!important;inset:auto 16px max(24px,env(safe-area-inset-bottom))!important;z-index:12000!important;max-width:440px;max-height:calc(100dvh - 48px);margin-inline:auto;overflow:auto;overscroll-behavior:contain;background:linear-gradient(145deg,#251d34,#111521);border-color:#9885b966;box-shadow:0 0 0 100vmax #03040bbf,0 20px 70px #0008;}
.device .friday-service-screen {padding:24px;overflow-y:auto;}
.device .friday-service-screen > header {display:flex;align-items:center;justify-content:space-between;gap:14px;}
.device .friday-service-screen h1 {font-size:23px;}
.device .friday-service-screen h2 {font-size:34px;line-height:1.1;margin:20px 0;}
.device .friday-service-screen p {font-size:16px;line-height:1.55;color:#c7cddd;}
.device .friday-service-screen textarea {width:100%;min-height:110px;margin:12px 0;padding:16px;background:#141d30;border:1px solid #617399;border-radius:16px;color:#f3f5ff;font:inherit;resize:vertical;}
.device .friday-service-screen > button {width:100%;min-height:44px;margin-top:16px;}
.device .friday-service-screen .onboarding-copy {margin:24px 0 18px;}
.device .friday-service-screen .subpage-intro {margin:8px 0 12px;}
.device .friday-service-screen label {display:block;font-size:16px;line-height:1.5;}
.device .friday-service-screen label span {color:#adb6ca;font-size:14px;}
.device .friday-cache-notice{margin:22px 0;padding:18px;border:1px solid #886caa66;border-radius:20px;background:linear-gradient(140deg,#292038,#14101d);}
.device .friday-cache-notice>strong{display:block;font-size:18px;line-height:1.3;color:#ecd6fa;}
.device .friday-cache-notice>p{margin:10px 0;font-size:16px;}
.device .friday-cache-notice>button{min-height:44px;text-align:left;}
/* A utility page, not a sales splash: status and usable recovery come first. */
.device .membership-refined {text-align:left;}
/* The panel, not the clipped device frame, owns long membership content. */
.device .screen.membership-refined {height:100%;min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;}
.device .membership-refined > .membership-toolbar {margin:0 0 22px;min-height:44px;}
.device .membership-refined .membership-toolbar .eyebrow {margin:0;font-size:12px;letter-spacing:.12em;}
.device .membership-refined .close-control {position:static;flex:none;margin:0;}
.device .membership-refined .membership-intro h1 {font-size:clamp(27px,7.4vw,34px);line-height:1.12;letter-spacing:-.035em;text-align:left;margin:0 0 12px;}
.device .membership-refined .membership-intro p {margin:0 0 24px;line-height:1.5;}
.device .membership-actions {display:grid;gap:12px;}
.device .membership-refined .membership-actions .secondary-button {margin:0;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;text-decoration:none;}
.device .membership-refined .membership-actions .membership-manage {background:linear-gradient(120deg,#49388b,#372657);border:1px solid #927dc7;border-radius:17px;padding:14px 16px;color:#fff;font-size:16px;line-height:1.4;}
.device .membership-recovery {border:1px solid rgba(157,149,192,.24);border-radius:18px;overflow:hidden;background:rgba(25,24,43,.65);}
.device .membership-recovery .quiet-button {width:100%;display:block;text-align:left;margin:0;padding:14px 16px;font-size:16px;line-height:1.4;}
/* Only the group is rounded; individual rows have a straight separator. */
.device .membership-recovery > .quiet-button {border-radius:0!important;}
.device .membership-recovery .quiet-button + .quiet-button {border-top:1px solid rgba(157,149,192,.16);}
.device .membership-refined button:disabled {opacity:1;color:#a5a0b4;cursor:not-allowed;}
.device .membership-refined .membership-connection-note,.device .membership-refined .membership-legal {font-size:14px;line-height:1.55;margin:16px 0;color:#b8b3cc;}
.device .membership-explainer {margin:22px 0;padding:0 16px;border-radius:18px;}
.device .membership-explainer summary {padding:16px 0;min-height:52px;font-size:16px;line-height:1.4;cursor:pointer;}
.device .membership-explainer p {margin:0 0 16px;}
.device .membership-refined .membership-plans-heading {font-size:13px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:#c9bbe6;margin:8px 0 0;}
.device .membership-refined .membership-catalogue-note {font-size:14px;line-height:1.55;margin:0 0 16px;color:#d1c6e3;}
.device .membership-refined .membership-progress,.device .settings-operation {background:linear-gradient(125deg,#342341,#191626);border:1px solid #8f70ad80;border-radius:18px;padding:18px;}
.device .screen.membership-refined > .settings-feedback {margin:0 0 18px;max-width:none;}
.device .membership-refined .plan-card {display:grid;gap:6px;text-align:left;padding:18px;margin:0;border-radius:18px;}
.device .membership-refined .plan-card > span {font-size:16px;line-height:1.4;letter-spacing:0;color:#e5d7f7;}
.device .membership-refined .plan-card > strong {font-size:25px;line-height:1.3;margin:0;}
.device .membership-refined .plan-card > small {font-size:14px;line-height:1.4;}
.device .settings-operation {margin:18px 0;}
.device .settings-operation .eyebrow {display:block;color:#d8baf5;font-size:11px;letter-spacing:.13em;margin-bottom:10px;}
.device .settings-operation strong {display:block;font-size:18px;line-height:1.35;color:#f6edff;}
.device .settings-operation p {margin:8px 0 0;font-size:14px;line-height:1.5;}
.device .account-refined > .secondary-button,.device .account-refined > .quiet-button {width:100%;margin:8px 0;}
.device .account-refined button:disabled {opacity:1;color:#aaa3b8;cursor:not-allowed;}
.device .account-refined .account-capability-note {font-size:14px;line-height:1.5;margin:0 4px 16px;}
.device .membership-refined a:focus-visible {outline:2px solid #c9baff;outline-offset:4px;}
/* Identity providers keep their own sober controls; TRIPTIC frames the visit. */
.device .signin-refined {text-align:left;padding-bottom:max(40px,env(safe-area-inset-bottom))!important;}
/* The decorative light stays inside its own layer, never widening the form. */
.device .signin-refined > .global-trio-atmosphere {position:absolute!important;max-width:100%;overflow:clip!important;contain:paint;}
.device .signin-refined::before {inset:0;animation:none!important;}
.device .signin-refined > header {display:grid;grid-template-columns:44px 1fr 44px;}
.device .signin-intro {padding:8px 0 6px;}
.device .signin-brand {display:flex;align-items:center;gap:12px;margin:0 0 26px;}
.device .signin-brand img:first-child {width:35px;height:39px;filter:drop-shadow(0 0 15px #70bdff99);}
.device .signin-brand img:last-child {width:105px;height:auto;}
.device .signin-refined .signin-intro h2 {margin:0;font-size:clamp(30px,9vw,40px);line-height:1.08;letter-spacing:-.045em;color:#f7f4ff;}
.device .signin-refined .signin-intro p {margin:12px 0 8px;color:#d6caea;}
.device .signin-refined .signin-connection-note {margin:14px 0 20px;font-size:14px;line-height:1.55;color:#bfb8cf;}
.device .signin-provider-list {display:grid;gap:16px;margin:20px 0;}
.device .signin-refined .signin-provider {display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:52px;margin:0;padding:14px 16px;border:1px solid #8e918f;border-radius:14px;font-size:16px;font-weight:500;line-height:1.4;box-shadow:none;}
.device .signin-provider img {flex:none;width:20px;height:20px;object-fit:contain;}
.device .signin-provider-apple {background:#fff;color:#000;}
.device .signin-provider-google {background:#131314;color:#e3e3e3;}
.device .signin-refined .signin-provider:is(:disabled, [aria-disabled="true"]) {opacity:.55;cursor:not-allowed;border-style:dashed;}
.device .signin-provider:is(:disabled, [aria-disabled="true"]) span {opacity:.7;}
.device .signin-refined .primary-button[aria-disabled="true"] {cursor:not-allowed;border-style:dashed;opacity:.55;}
.device .signin-refined .signin-provider-note {font-size:12px;line-height:1.5;margin:6px 4px 0;color:#bdb5cd;text-align:center;}
.device .signin-refined > .quiet-button {display:block;width:100%;margin:8px 0;}
.device .signin-refined > .secondary-button {width:100%;}
.device .signin-refined .signin-progress {font-size:14px;margin:16px 0;}
.device .destructive-button:disabled {opacity:.55;border-style:dashed;cursor:not-allowed;}
@media (max-height:650px) {
 .device .signin-refined > header {margin-bottom:12px;}
 .device .signin-brand {margin-bottom:16px;}
}
/* Settings > Flick & hints (P-YOU, 13 October 2026): drawn empty, filled by ds-flick.js and ds-hints.js; with neither, not shown */
.device .settings-section[data-settings-group="companions"]:not(:has(.settings-row)){display:none}

/* ===== prototype-src/library-experience.css ===== */
.device .library-premium {padding:24px 22px 112px;overflow-y:auto;scroll-padding-block:24px 116px;}
/* Bound the inherited oversized atmosphere, not the content or focus rings. */
#device .library-premium::before {inset:0;transform:none!important;animation:none!important;}
#device .library-recovery-panel p{font-size:16px;line-height:1.6;color:#d3cada;}
#device .library-recovery-panel button{display:block;width:100%;margin-top:12px;font-size:14px;}
#device .library-recovery-panel .secondary-button{background:#4b3280;border:1px solid #a085c9;color:#fff;}
#device .library-recovery-panel .quiet-button{background:transparent;border:1px solid #645673;color:#ddd3e7;}
.search-library-screen .subpage-intro{font-size:16px;line-height:1.6;color:#c9bfd7;}
.search-library-list{display:grid;gap:16px;margin:24px 0;}
.search-library-row{position:relative;border-radius:22px;}.search-library-card{border:1px solid #6b547b80;border-radius:22px;background:linear-gradient(145deg,#2a2038,#15121e);box-shadow:inset 0 1px #f4d9ff10,0 12px 28px #0002;}
.search-library-open{display:grid;grid-template-columns:30px minmax(0,1fr) 18px;align-items:start;gap:12px;width:100%;padding:22px 22px 14px;text-align:left;background:none;border:0;color:#efe8f7;font-size:16px;line-height:1.5;overflow-wrap:anywhere;}
.search-library-symbol{color:#cfb1ed;}.search-library-open>.trip-ui-icon{align-self:center;color:#b9a7ce;}
.search-library-row details{padding:0 14px 12px;}
.search-library-row summary{display:grid;place-items:center;list-style:none;margin-left:auto;min-height:44px;width:44px;border-radius:12px;color:#bca9d0;cursor:pointer;}
.search-library-row summary::-webkit-details-marker{display:none;}
.search-library-row summary:focus-visible{outline:3px solid #d5b5ee;outline-offset:2px;}
.search-library-remove{width:100%;padding:12px;border:1px solid #b27b9566;border-radius:14px;background:#44273a55;color:#f4c1d3;font-size:14px;line-height:1.4;text-align:left;}
.search-library-feedback{font-size:14px;line-height:1.55;color:#d2c4de;}
#device .search-library-screen .library-empty p{font-size:16px;line-height:1.6;color:#c9bfd7;}
@media(forced-colors:active){.search-library-card{background:Canvas;border-color:CanvasText;box-shadow:none}.search-library-open,.search-library-symbol,.search-library-row summary,.search-library-feedback{color:CanvasText}.search-library-remove{background:ButtonFace;color:ButtonText;border-color:ButtonText}}
.device .library-premium .destination-heading {margin:26px 0;}
.device .library-premium .destination-heading p {font-size:14px;color:#b8c2d8;}
.device .library-premium .destination-heading h1 {font-size:38px;letter-spacing:-.055em;}
.device .library-watchlist-cover {position:relative;overflow:hidden;width:100%;min-height:260px;padding:24px;border:1px solid #465270;border-radius:26px;background:radial-gradient(ellipse at 70% 0,#2b4261,transparent 70%),#11182a;color:#f2f4fa;text-align:left;}
.device .library-cover-posters {display:flex;justify-content:center;align-items:center;height:174px;margin:0 0 8px 44px;transform:rotate(-6deg);}
.device .library-cover-posters > span {position:relative;display:grid;place-items:center;height:160px;width:107px;flex:none;margin-left:-32px;overflow:hidden;border:1px solid #91a4ca;border-radius:8px;box-shadow:-12px 6px 20px #070b1699;background:linear-gradient(145deg,#425b8a,#161e34);color:#cfddfa;font-size:50px;font-weight:300;}
.device .library-cover-posters > span:nth-child(2) {transform:translateY(-8px);}
.device .library-cover-posters img {position:relative;z-index:1;width:100%;height:100%;object-fit:cover;}
.device .library-cover-posters img[hidden] {display:none;}
.device .library-cover-posters .library-grid-placeholder {position:absolute;inset:0;display:grid;place-items:center;}
.device .library-cover-posters .library-grid-placeholder .brand-mark {width:42px;height:48px;margin:0;}
.device .library-cover-copy {position:relative;display:flex;flex-direction:column;gap:9px;}
.device .library-cover-copy small {font-size:10px;letter-spacing:.14em;color:#bdd0ef;}
.device .library-cover-copy strong {font-size:28px;letter-spacing:-.04em;}
.device .library-cover-copy > span {font-size:14px;color:#cad4e8;}
.device .library-cover-copy i {float:right;font-size:25px;font-style:normal;}
.device .library-stat-line {display:flex;gap:24px;margin:20px 4px 30px;font-size:13px;color:#a8b4cf;}
.device .library-stat-line strong {font-size:16px;color:#e2e7f4;}
.device .library-section {margin:28px 0;}
.device .library-section > h2 {font-size:12px;font-weight:550;text-transform:uppercase;letter-spacing:.12em;color:#99a9cb;margin:0 0 10px;}
.device .library-link {display:flex;align-items:center;gap:14px;width:100%;padding:18px 0;border:0;border-bottom:1px solid #26314b;background:transparent;color:#edf1fa;text-align:left;}
.device .library-link > span:nth-child(2) {flex:1;min-width:0;}
.device .library-link strong {display:block;font-size:17px;font-weight:550;}
.device .library-link small {display:block;font-size:13px;line-height:1.5;color:#acb8d0;margin-top:5px;}
.device .library-link-symbol {display:grid;place-items:center;width:38px;height:42px;flex:none;border:1px solid #3e506f;border-radius:12px;font-size:23px;color:#adcbff;}
.device .library-local-note {font-size:13px;line-height:1.5;color:#aab6d0;text-align:center;margin:32px 0;}
.device .library-page-header {display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:10px;margin-bottom:26px;}
.device .library-page-header h1 {font-size:24px;text-align:center;line-height:1.15;letter-spacing:-.04em;overflow-wrap:anywhere;margin:0;}
.device .library-premium button {min-height:44px;}
.device .library-premium button:focus-visible {outline:3px solid #bfd1ff;outline-offset:3px;}
#device .library-premium .watchlist-grid>button>strong {font-size:14px;line-height:1.4;}
#device .library-premium .watchlist-grid>button>small {font-size:12px;line-height:1.5;color:#bcb0d7;}
.device .library-history-list {display:grid;gap:16px;}
#device .library-recovery-notice {position:static;margin:0 0 20px;padding:16px 18px;border:1px solid #68517e;border-radius:16px;background:linear-gradient(125deg,#2a2138,#191521);color:#e9dff4;font-size:14px;line-height:1.55;text-align:left;overflow-wrap:anywhere;}
#device .library-history-list>.library-recovery-notice {margin:0;}
#device .library-protected-copy {font-size:15px;line-height:1.6;color:#cfc3da;}
@media(forced-colors:active){#device .library-recovery-notice{background:Canvas;color:CanvasText;border-color:CanvasText}}
.device .library-history-card {width:100%;padding:22px;text-align:left;background:linear-gradient(120deg,#253756,#141b2c);border:1px solid #425779;border-radius:22px;color:#dce7fa;}
.device .library-history-titles {display:block;border-left:3px solid #b4cbff;padding-left:15px;}
.device .library-history-titles strong {display:block;font-size:18px;line-height:1.4;margin:6px 0;}
.device .library-history-card > span:last-child {display:block;margin-top:18px;font-size:12px;color:#b7c5df;}
.device .watchlist-controls {display:flex;gap:12px;margin:16px 0 26px;}
.device .watchlist-controls label {flex:1;min-width:0;color:#b8c5df;font-size:12px;}
.device .watchlist-controls select {display:block;width:100%;min-height:44px;margin-top:7px;padding:8px;border:1px solid #5b6d92;border-radius:10px;background:#142039;color:#eaf0ff;font-size:13px;}
@media(prefers-reduced-motion:reduce){.device .library-cover-posters{transform:none;}}
@media(max-width:360px) and (max-height:650px){
 #device .library-watchlist-cover{min-height:220px;padding:20px;}
 #device .library-cover-posters{height:130px;margin-left:30px;}
 #device .library-cover-posters>span{height:120px;width:80px;margin-left:-26px;}
 #device .library-cover-copy strong{font-size:26px;}
}
.device .viewing-checkin {margin:0 0 28px;padding:20px;border:1px solid #c9abff40;border-radius:24px;background:linear-gradient(130deg,#312341e8,#171421);box-shadow:inset 0 1px 0 #f3dcff17;}
.device .viewing-checkin-heading {display:grid;grid-template-columns:56px minmax(0,1fr) 44px;gap:12px;align-items:center;margin-bottom:18px;}
.device .viewing-checkin-poster {height:84px;overflow:hidden;display:grid;place-items:center;border:1px solid #e1c4ff55;border-radius:7px;background:#262134;box-shadow:3px 4px 0 #110d1f,8px 8px 15px #06040d70;}
.device .viewing-checkin-poster img {width:100%;height:100%;object-fit:cover;}
.device .viewing-checkin-label {font-size:10px;letter-spacing:.09em;color:#d7b2f5;line-height:1.5;}
.device .viewing-checkin h2 {font-size:22px;letter-spacing:-.025em;line-height:1.2;margin:6px 0;}
.device .viewing-checkin-heading p {margin:0;font-size:14px;line-height:1.4;color:#e3d8ed;overflow-wrap:anywhere;}
.device .viewing-checkin-close {align-self:start;width:44px;padding:0;border:0;border-radius:50%;background:#ffffff08;color:#d6c7e4;font-size:26px;}
.device .viewing-checkin-actions {display:flex;gap:12px;align-items:center;}
.device .viewing-checkin-actions button {flex:1;min-width:0;font-size:14px;margin:0;}
.device .viewing-checkin-actions .secondary-button {min-height:48px;padding:12px;border:1px solid #c5a0ef;border-radius:14px;background:linear-gradient(145deg,#8055c6,#5d339c);box-shadow:inset 0 1px 0 #f4e5ff30;color:#fff;font-weight:600;}
.device .viewing-checkin-actions .quiet-button {min-height:48px;border:1px solid #dbbbf526;border-radius:14px;background:#ffffff06;color:#e7ddef;}
.device .viewing-checkin-note {font-size:13px;line-height:1.5;color:#c9bed4;margin:14px 0 0;}
.device .viewing-checkin .film-reaction-choices button {font-size:14px;min-height:48px;}
@media(max-width:360px){.device .viewing-checkin{padding:16px}.device .viewing-checkin-heading{grid-template-columns:46px minmax(0,1fr) 44px;gap:8px}.device .viewing-checkin-poster{height:69px}.device .viewing-checkin h2{font-size:20px}}

/* ===== prototype-src/first-use-guide.css ===== */
.device .first-use-highlight{outline:2px solid #d4e7f0!important;outline-offset:4px}
.device .first-use-guide{position:absolute;z-index:250;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;border:1px solid #d7b7ed80;border-radius:24px;padding:0;background:linear-gradient(140deg,#382346,#1e172d 70%);color:#f4f7f8;box-shadow:inset 0 1px 0 #ffffff40,0 4px 0 -1px #130d20,0 5px 0 -1px #c6a6e450,0 22px 60px #000b;isolation:isolate}
.device .first-use-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px 22px 14px}
.device .first-use-step{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:.12em;color:#d2e4ec}
.device .first-use-step>span{font-size:14px;letter-spacing:0;font-variant-numeric:tabular-nums;color:#e3edef}
.device .first-use-guide h2{font-size:28px;line-height:1.12;letter-spacing:-.035em;margin:18px 0 10px;color:#f8faf8;text-align:left}
.device .first-use-guide p{font-size:16px;line-height:1.5;color:#dce7ed;margin:0;text-align:left}
.device .first-use-actions{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;flex:none;padding:14px 18px 18px;border-top:1px solid #e5c9f51a;background:#21152f}
#device .first-use-guide button{min-height:48px;padding:12px 16px;font-size:14px;line-height:1.3;margin:0;border-radius:16px}
#device .first-use-guide .primary-button:not(:disabled){width:100%;min-width:0;background:linear-gradient(155deg,#8158ce,#50338f)!important;color:#ffffff!important;border-color:#d3b5fa80!important;box-shadow:inset 0 1px 0 #fff,0 2px 0 #35234f!important}
#device .first-use-guide .quiet-button{color:#e0eaf0;background:transparent;white-space:normal}
#device .first-use-guide button:focus-visible{outline:2px solid #fff!important;outline-offset:3px}
.device .first-use-guide.first-use-compact .first-use-actions,.device.manual-large-text .first-use-guide .first-use-actions{grid-template-columns:1fr}
.device .first-use-guide.first-use-compact .first-use-actions .primary-button,.device.manual-large-text .first-use-guide .first-use-actions .primary-button{grid-row:1}
.device .first-use-guide.first-use-compact .first-use-body{padding:18px}

/* ===== prototype-src/taste-fingerprint.css ===== */
.device .fingerprint-screen {padding:24px 22px 48px;overflow-y:auto;}
.device .fingerprint-screen > header {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.device .fingerprint-screen header h1 {font-size:22px;}
.device .fingerprint-intro {margin:30px 0 0;}
.device .fingerprint-intro h2 {font-size:40px;line-height:1.02;letter-spacing:-.055em;margin:12px 0 18px;}
.device .fingerprint-screen p {font-size:16px;line-height:1.55;color:#c5cee0;}
.device .fingerprint-canvas {display:flex;flex-direction:column;align-items:center;padding:0 0 26px;margin:6px 0 24px;border-bottom:1px solid #33415b;}
.device .taste-fingerprint {display:block;width:220px;height:250px;max-width:100%;overflow:visible;}
.device .fingerprint-canvas > span {font-size:13px;letter-spacing:.08em;color:#c1cee6;}
.device .profile-fingerprint {display:grid;place-items:center;margin:-8px auto 0;}
.device .taste-fingerprint.is-compact {width:128px;height:146px;}
.device .fingerprint-key {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;}
.device .fingerprint-dimension > span {display:block;font-size:12px;color:var(--fingerprint-colour);margin-bottom:5px;}
.device .fingerprint-dimension > strong {display:block;font-size:17px;font-weight:550;}
.device .fingerprint-range {position:relative;height:4px;background:#2f3b51;border-radius:3px;margin:14px 5px 11px;}
.device .fingerprint-range i {position:absolute;top:-3px;width:10px;height:10px;border-radius:3px;transform:translateX(-50%);background:var(--fingerprint-colour);}
.device .fingerprint-dimension small {display:flex;justify-content:space-between;gap:10px;color:#afbbd3;font-size:10px;}
.device .fingerprint-reading {margin:28px 0;}
.device .fingerprint-screen .settings-note {padding:20px;border-radius:20px;margin:16px 0;}
.device .fingerprint-screen .settings-note strong {font-size:18px;}
.device .fingerprint-screen > button {width:100%;min-height:44px;margin-top:18px;}
.device.manual-large-text .fingerprint-key {grid-template-columns:1fr;}
@media (prefers-contrast:more){.device .fingerprint-dimension small,.device .fingerprint-reading{color:#eef2ff;}}

/* TRIPTIC's personal map: restrained spectral colour and legible geometry. */
#device .taste-radar {display:block;width:100%;height:auto;max-width:420px;margin:0 auto;overflow:visible;}
#device .taste-radar text {font-family:inherit;font-size:15px;font-weight:550;letter-spacing:.01em;}
#device .taste-radar-grid {fill:none;stroke:#b4aec3;stroke-opacity:.12;stroke-width:1;}
#device .taste-radar-axis {stroke:#b4aec3;stroke-opacity:.1;stroke-width:1;}
#device .taste-radar.is-compact text {font-size:18px;}
#device .taste-radar-shape {stroke-linejoin:round;filter:drop-shadow(0 0 9px #a98cff45);}
#device .taste-radar-empty {fill:#ddd5ee;font-size:12px;}
#device .taste-intelligence-card > .taste-radar {height:auto!important;min-height:0!important;display:block!important;margin:6px auto!important;}
#device .profile-cinema-emblem {display:grid;place-items:center;width:90px;height:102px;margin:0 auto 20px;border:1px solid #b6a5df55;border-radius:26px;background:linear-gradient(135deg,#b4a2f323,#12111b 60%,#78cfea12);box-shadow:inset 0 1px 0 #ffffff25,0 12px 38px #0005;}
#device .profile-cinema-emblem .brand-mark {width:55px!important;height:64px!important;animation:none!important;filter:none!important;}
#device .taste-intelligence-profile .profile-identity {margin:24px 0 30px!important;}
#device .taste-intelligence-profile .profile-identity h1 {font-size:32px!important;margin:0 0 8px!important;}
#device .taste-intelligence-profile .profile-identity > p {font-size:14px!important;line-height:1.5;max-width:290px;}
#device .taste-profile-compact {display:none!important;}
#device .taste-profile-scrolled .app-header {opacity:1;transform:none;pointer-events:auto;}
#device .taste-intelligence-card {padding:20px!important;border-radius:26px!important;}
#device .taste-intelligence-card::after {display:none!important;}
#device .taste-intelligence-card > div:first-child {height:auto!important;gap:12px!important;}
#device .taste-intelligence-card > p {font-size:15px!important;line-height:1.55!important;margin:8px 0 14px!important;}
#device .taste-intelligence-card > small {font-size:12px!important;color:#bdafcc!important;}
#device .taste-intelligence-card > button {font-size:14px!important;min-height:52px!important;}
#device .profile-list {border:1px solid #464255!important;border-radius:24px!important;overflow:hidden!important;margin:20px 0 10px!important;background:linear-gradient(130deg,#161521,#0a0a12)!important;}
#device .profile-list > button {display:grid!important;grid-template-columns:28px minmax(0,1fr) auto 12px!important;align-items:center!important;gap:12px!important;min-height:70px!important;width:100%!important;padding:14px 16px!important;margin:0!important;border:0!important;border-bottom:1px solid #34303f!important;border-radius:0!important;background:transparent!important;text-align:left!important;box-shadow:none!important;}
#device .profile-list > button:last-child {border-bottom:0!important;}
#device .profile-list > button > span {font-size:15px!important;line-height:1.3;}
#device .profile-list > button > b {font-size:12px!important;max-width:80px;color:#bfb5cc!important;white-space:normal;}
#device .profile-list > button > i {grid-column:4;font-size:20px!important;color:#c8bddc;}
#device .profile-row-icon {width:23px;height:23px;fill:none;stroke:#c3afea;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
#device .fingerprint-screen {padding:24px 22px 56px!important;background:radial-gradient(ellipse at 50% 32%,#59437816,transparent 45%),#090910;}
#device .fingerprint-screen::before {inset:0;animation:none!important;}
#device .fingerprint-screen > .global-trio-atmosphere {position:absolute!important;max-width:100%;overflow:clip!important;contain:paint;}
#device .fingerprint-intro h2 {font-size:40px;margin-bottom:16px;}
#device .fingerprint-canvas {padding:14px 0 24px;margin:14px -12px 28px;border-bottom:0;background:radial-gradient(ellipse at 50% 45%,#8866d017,transparent 62%);}
#device .fingerprint-key {gap:0;border:1px solid #40364f;border-radius:22px;overflow:hidden;background:linear-gradient(130deg,#18132199,#0d0d16);}
#device .fingerprint-dimension {padding:18px 16px;border-bottom:1px solid #ffffff0e;}
#device .fingerprint-dimension > span {font-size:13px;}
#device .fingerprint-dimension > strong {font-size:17px;}
#device .fingerprint-dimension small {display:flex;font-size:11px;margin-top:10px;color:#bdb1cf;}
#device .fingerprint-reading {font-size:14px!important;color:#c7bad7!important;}
#device .fingerprint-dimension > span {font-size:14px;line-height:1.4;}
#device .fingerprint-dimension > strong {line-height:1.35;}
#device .fingerprint-dimension small {font-size:13px;line-height:1.4;flex-wrap:wrap;}
#device .fingerprint-axis-evidence {margin-top:12px;border-top:1px solid #ffffff16;}
#device .fingerprint-axis-evidence summary {font-size:14px;line-height:1.45;color:#ead4fa;cursor:pointer;min-height:44px;padding:12px 0;box-sizing:border-box;}
#device .fingerprint-axis-evidence summary:focus-visible {outline:2px solid #e6b2f1;outline-offset:3px;border-radius:6px;}
#device .fingerprint-axis-evidence p {font-size:14px;line-height:1.6;overflow-wrap:anywhere;margin:6px 0 16px;}
#device .fingerprint-axis-evidence b {font-weight:550;color:var(--fingerprint-colour);}
#device .fingerprint-axis-evidence p span {color:#c1b3ce;}
/* A reading should fit a phone, even when its supporting films are expanded. */
@media(max-width:440px){
 #device .fingerprint-key {grid-template-columns:1fr;}
 #device .fingerprint-dimension {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:0 16px;}
 #device .fingerprint-dimension > strong {text-align:right;}
 #device .fingerprint-dimension small,#device .fingerprint-axis-evidence {grid-column:1/-1;}
 #device .fingerprint-dimension small {margin-top:12px;}
}
@media(forced-colors:active){#device .fingerprint-axis-evidence{border-color:CanvasText;}#device .fingerprint-axis-evidence *{color:CanvasText!important;}}
@media(max-height:650px){
 #device .fingerprint-intro{margin-top:18px;}
 #device .fingerprint-intro h2{font-size:32px;margin-bottom:12px;}
 #device .fingerprint-intro p{font-size:15px;}
 #device .fingerprint-canvas{padding-top:0;margin-top:4px;}
}
@media(max-width:350px) and (max-height:650px){
 #device .fingerprint-canvas > .taste-radar{width:min(100%,272px);}
}
@media(max-width:350px){#device .profile-list > button{gap:8px!important;padding:14px 12px!important;grid-template-columns:24px minmax(0,1fr) auto 10px!important;}#device .profile-list > button > b{max-width:64px;font-size:11px!important;}}

/* ===== prototype-src/taste-preferences.css ===== */
/* Personal editorial threads: readable, calm, and distinct from measured axes. */
#device .taste-strands,#device .friday-preferences{margin:28px 0;padding:24px 20px;border:1px solid #9b78bf44;border-radius:26px;background:linear-gradient(145deg,#281b37c9,#12101ddd);box-shadow:inset 0 1px #ead2ff0e}
#device .taste-strands h2,#device .friday-preferences h2{margin:10px 0 14px;font-size:clamp(24px,6.4vw,29px);line-height:1.12;letter-spacing:-.035em}
#device .taste-strands p,#device .friday-preferences p{font-size:16px;line-height:1.6;color:#d5c9e0;overflow-wrap:anywhere}
#device .taste-strands>.eyebrow{font-size:12px;color:#d9b7f2;line-height:1.5}
#device .taste-strand-grid{display:grid;gap:14px;margin-top:24px}
#device .taste-strand{border-top:1px solid #9273b14d;padding:18px 0 0}
#device .taste-strand h3,#device .friday-notes h3{margin:0 0 8px;font-size:19px;color:#f1e9f9}
#device .taste-strand small{font-size:13px;line-height:1.5;color:#c7b5d9;display:block}
#device .taste-strand p{margin:10px 0}
#device .taste-strand .quiet-button{font-size:14px;text-align:left;padding:10px 0;min-height:44px;color:#e2b4f7;margin:0}
#device .friday-preference-editor summary,#device .taste-hidden-threads summary,#device .friday-notes summary,#device .taste-strands summary{font-size:16px;line-height:1.5;color:#edd9fc;min-height:48px;padding:12px 0;cursor:pointer}
#device .taste-correction-entry{display:block;min-height:44px;font-size:14px;line-height:1.5;text-align:left;color:#e4b8f3;margin:12px 0 0;padding:10px 0}
#device .friday-preference-conflict{border-left:3px solid #eaa8d9;padding:4px 0 4px 14px;margin:16px 0}
#device .friday-preference-conflict .quiet-button{display:block;text-align:left;padding-left:0}
#device .taste-more-threads{margin-top:16px;border-top:1px solid #9273b14d}
#device .friday-preferences button:disabled{opacity:.5;cursor:default}
#device .friday-preference-editor label{display:block;margin:20px 0 10px;font-size:16px;color:#f0e5f8}
#device #friday-preference-input{display:block;box-sizing:border-box;width:100%;min-height:150px;resize:vertical;padding:15px;border:1px solid #a579cd88;border-radius:18px;background:#0e0c17;color:#f6effb;font:inherit;font-size:16px;line-height:1.55;scroll-margin-top:24px}
#device #friday-preference-input::placeholder{color:#b9a9c9;opacity:1}
#device #friday-preference-input:focus-visible{outline:2px solid #e6b2f1;outline-offset:3px;box-shadow:0 0 24px #bc65d321}
#device .friday-preferences .primary-button{width:100%;min-height:52px;font-size:16px;margin-top:16px}
#device .friday-preferences .quiet-button{min-height:44px;font-size:14px;line-height:1.5;white-space:normal}
#device .friday-preferences .friday-preference-scope{font-size:14px;line-height:1.6;color:#c0b3ce}
#device #friday-preference-status{font-size:14px;line-height:1.5;color:#d9c8ef;margin:14px 0}
#device #friday-preference-status:empty{display:none}
#device #friday-preference-status[role="alert"]{color:#ffbed3}
#device .friday-notes ul{list-style:none;margin:16px 0;padding:0}
#device .friday-notes li{padding:16px 0;border-top:1px solid #9872bd4d}
#device .friday-notes li p{white-space:pre-wrap;margin:0 0 10px}
#device .friday-notes li>div{display:flex;gap:14px}
#device .friday-notes button{min-height:44px;min-width:64px;padding:8px 12px;border:1px solid #9470b560;border-radius:12px;background:#30213f;color:#f2ddff;font:inherit;font-size:14px}
#device .friday-preferences button:focus-visible,#device .friday-preferences summary:focus-visible,#device .taste-strands button:focus-visible,#device .taste-strands summary:focus-visible,#device .taste-correction-entry:focus-visible{outline:2px solid #e6b2f1;outline-offset:4px}
@media(forced-colors:active){#device .taste-strands,#device .friday-preferences,#device .friday-notes button,#device #friday-preference-input{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}#device .taste-strands *,#device .friday-preferences *{color:CanvasText!important}}

/* ===== prototype-src/share-experience.css ===== */
/* A collectible sleeve around the existing three-card language. No orb,
   invented sender, rarity claim, blockchain or personalised tracking data. */
.collectible-share.share-screen,.collectible-receiver.receiver-screen{display:block;padding:22px 22px 44px;overflow-y:auto;text-align:left}
#device .collectible-share::before,#device .collectible-receiver::before{inset:0;transform:none!important;animation:none!important;}
.collectible-share>header,.collectible-receiver>header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 24px;min-height:44px}
.collectible-share>header>span,.collectible-receiver>header>span{font-size:10px;letter-spacing:.14em;color:#cac6d5;text-align:center}
.collectible-share .triptic-collectible,.collectible-receiver .triptic-collectible{position:relative;isolation:isolate;border:1px solid #77758d;border-radius:22px;background:linear-gradient(145deg,#292938,#101019 54%,#242033);box-shadow:0 18px 50px #0006,inset 0 1px #ffffff40;overflow:hidden;padding:20px 16px 16px}
.triptic-collectible:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(118deg,transparent 27%,#84f7ff12 34%,#c6a5ff17 40%,transparent 49%);pointer-events:none}
.collectible-masthead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.collectible-masthead .wordmark{font-size:15px;letter-spacing:.22em}
.collectible-masthead>span:last-child{font-size:8px;letter-spacing:.16em;color:#d0cada}
.collectible-film-stack{position:relative;height:223px;margin:22px 0 15px;perspective:800px}
.collectible-film{position:absolute;top:12px;left:calc(50% - 64px);width:128px;height:190px;display:block;overflow:hidden;border:1px solid #a59dbc;border-radius:10px;background:linear-gradient(135deg,#343348,#13121b 62%);box-shadow:0 8px 24px #000a,inset 0 1px #fff5;transform:translateX(-65px) rotate(-12deg) rotateY(9deg)}
.collectible-film:nth-child(2){z-index:3;transform:translateY(-7px)}
.collectible-film:nth-child(3){transform:translateX(65px) rotate(12deg) rotateY(-9deg)}
.collectible-film img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.collectible-card-light{position:absolute;inset:0;background:linear-gradient(180deg,#0004,transparent 30%,#090812e8 90%)}
.collectible-film>b{position:absolute;top:12px;left:12px;z-index:1;color:white;font-size:13px;letter-spacing:.14em}
.collectible-film-stack .collectible-film:nth-child(3)>b{left:auto;right:12px}
.collectible-film-title{position:absolute;bottom:13px;left:12px;right:10px;color:#fff}
.collectible-film-title strong{font-size:14px;line-height:1.15;display:block;overflow-wrap:anywhere}
.collectible-film-title small{font-size:11px;display:block;color:#d6d1de;margin-top:5px}
.collectible-film.is-sealed{background:repeating-linear-gradient(110deg,#d6c8fd08 0 1px,transparent 1px 8px),linear-gradient(145deg,#423b59,#14121e 65%,#31324a)}
.collectible-film.is-sealed>.brand-mark{position:absolute;left:calc(50% - 20px);top:64px;width:40px;height:46px}
.collectible-film.is-sealed>small{position:absolute;bottom:20px;left:0;width:100%;text-align:center;font-size:9px;letter-spacing:.24em;color:#e2d8f8}
.triptic-collectible.single .collectible-film{transform:none}
.triptic-collectible.single .collectible-card-light{background:linear-gradient(180deg,#0005,transparent 36%)}
.collectible-caption>span{font-size:9px;letter-spacing:.16em;color:#c3bad5}
.collectible-caption>h2{font-family:inherit!important;font-size:28px!important;line-height:1.12!important;letter-spacing:-.045em!important;margin:10px 0 20px!important;max-width:15ch;color:#fff}
.collectible-footer{border-top:1px solid #ffffff29;padding-top:12px;display:flex;justify-content:space-between;align-items:center}
.collectible-footer>span{font-size:8px;letter-spacing:.14em;color:#c4c0ce}
.collectible-footer>i{font-size:20px;font-style:normal;background:linear-gradient(120deg,#9debf0,#dca3f5,#ffccb6);background-clip:text;color:transparent}
.collectible-share .share-toggle{margin:22px 0 16px;min-height:48px}
.collectible-share .share-toggle button{white-space:normal;min-height:48px;font-size:12px;line-height:1.25}
.collectible-share .share-honesty,.collectible-receiver .share-honesty{font-size:12px;line-height:1.6;color:#bdb7c9;margin:20px 0;max-width:none}
.collectible-share .share-local-warning{border-left:2px solid #dfbd86;padding-left:12px;font-size:12px;line-height:1.5;color:#dfc69f}
.collectible-share-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 10px}
.collectible-share-actions .secondary-button,.collection-share-action{appearance:none;border:1px solid #aaa0be40;border-radius:14px;background:linear-gradient(145deg,#39314280,#211c2d80);color:#f3eef9;padding:12px 16px;font:inherit;font-size:14px;font-weight:600;box-shadow:inset 0 1px #ffffff0d}
@media (hover: hover) and (pointer: fine){.collectible-share-actions .secondary-button:hover,.collection-share-action:hover{border-color:#bfa2ed90;background:#40324b}}/* (29 October 2026) hover only for a real pointer: a finger leaves :hover on whatever it last touched (hub/docs/TASTE-INTRO-2026-10-29.md) */
.collectible-share button:focus-visible,.collectible-receiver button:focus-visible,.collection-share-action:focus-visible{outline:2px solid #d5b4ff;outline-offset:3px}
.collectible-share button,.collectible-receiver button{min-height:44px}
.collectible-share .primary-button,.collectible-receiver .primary-button{width:100%;margin:10px 0}
.collectible-receiver>h1{font-size:34px;line-height:1.1;letter-spacing:-.045em;margin:26px 0 18px}
.collectible-receiver>p{font-size:14px;line-height:1.6;color:#c6c0d0}
.received-film-list{display:grid;gap:10px;margin:22px 0}
.received-film-list>button{display:flex;align-items:center;gap:12px;text-align:left;padding:16px;color:white}
.received-film-list>button>strong{flex:1;font-size:15px}
.received-film-list>button>span{color:#c7b6ed;font-size:12px}
.collection-share-action{margin:18px 0 0}
@media(max-width:350px){.collectible-share.share-screen,.collectible-receiver.receiver-screen{padding-left:16px;padding-right:16px}.collectible-film{width:110px;height:165px;left:calc(50% - 55px);transform:translateX(-54px) rotate(-12deg)}.collectible-film:nth-child(3){transform:translateX(54px) rotate(12deg)}.collectible-film-stack{height:193px}.collectible-film-title strong{font-size:12px}.collectible-masthead>span:last-child{font-size:7px}.collectible-caption>h2{font-size:25px!important}}
@media(prefers-reduced-motion:reduce){.triptic-collectible *{animation:none!important;transition:none!important}}
.manual-reduced-motion .triptic-collectible *{animation:none!important;transition:none!important}
@media(forced-colors:active){.triptic-collectible,.collectible-film{border:1px solid CanvasText}.collectible-footer>i{color:CanvasText}.collectible-card-light{display:none}}
.device .share-caption-control{margin:18px 0 8px;padding:18px;border:1px solid #555064;border-radius:20px;text-align:left;}
.device .share-caption-switch{display:flex;gap:16px;align-items:center;justify-content:space-between;min-height:48px;cursor:pointer;}
.device .share-caption-switch strong{display:block;font-size:16px;font-weight:550;}
.device .share-caption-switch small{display:block;font-size:13px;line-height:1.5;color:#bcb4cd;margin-top:4px;}
.device .share-caption-switch input{appearance:none;-webkit-appearance:none;position:relative;width:50px;height:44px;box-sizing:border-box;padding:10px 0;border:0;flex:none;margin:0;cursor:pointer;border-radius:24px;background:linear-gradient(#514660,#514660) content-box;}
.device .share-caption-switch input::after{content:"";position:absolute;left:3px;top:13px;width:18px;height:18px;border-radius:50%;background:#f6f0ff;box-shadow:0 1px 3px #09061066;transition:transform var(--motion-fast) var(--motion-curve);}
.device .share-caption-switch input:checked{background:linear-gradient(135deg,#a178d9,#7653bd) content-box;}
.device .share-caption-switch input:checked::after{transform:translateX(26px);}
.device .share-caption-switch input:focus-visible{outline:2px solid #dfb6f5;outline-offset:3px;}
@media(prefers-reduced-motion:reduce){.device .share-caption-switch input::after{transition:none;}}
.device.manual-reduced-motion .share-caption-switch input::after,html.reduce-motion .share-caption-switch input::after{transition:none;}
@media(forced-colors:active){.device .share-caption-switch input{appearance:auto;-webkit-appearance:auto;padding:0;}}
.device #share-caption-fields{margin-top:18px;}
.device #share-caption-fields label{font-size:14px;display:block;margin:0 0 8px;}
.device #share-caption-input{width:100%;min-height:96px;resize:vertical;font:inherit;font-size:16px;line-height:1.5;color:#f5efff;background:#0e0d17;border:1px solid #62596f;border-radius:12px;padding:12px;}
.device #share-caption-count{display:block;text-align:right;font-size:12px;color:#c8bfd6;margin-top:6px;}
.device #share-caption-help{font-size:14px;line-height:1.5;color:#c8bfd6;margin:10px 0;}
.device .share-caption-preview{white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:1.5;color:#eee4f9;border-left:2px solid #bca6eb;padding-left:12px;}
.device .share-caption-preview:empty{display:none;}
.device .share-caption-control :focus-visible{outline:2px solid #cfdbff;outline-offset:3px;}
.device .share-image-status{font-size:13px;line-height:1.5;color:#c8bfd6;margin:12px 0;}
.device .share-image-status:empty{display:none;}
.collectible-request{margin:24px 0 0;padding-top:20px;border-top:1px solid #b7a1d239;}
.collectible-request[hidden]{display:none;}
.collectible-request>span{font-size:12px;letter-spacing:.14em;color:#dfbdeb;}
.collectible-request>h2{font-family:inherit!important;font-size:clamp(24px,7vw,30px)!important;line-height:1.2!important;letter-spacing:-.035em!important;color:#fff;margin:10px 0 0!important;overflow-wrap:anywhere;}
.has-request.is-trio .collectible-caption>h2,.has-request .collectible-caption>span{display:none;}
.has-request:not(.is-trio) .collectible-caption>h2{font-size:20px!important;max-width:none;}
.collectible-caption>h2{overflow-wrap:anywhere;}
.collectible-film-year{margin:-8px 0 20px;color:#d6d1de;font-size:14px;line-height:1.4;}
.collectible-film-title strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.collectible-share>header>span,.collectible-receiver>header>span{font-size:12px;}
.collectible-masthead>span:last-child{font-size:12px;letter-spacing:.06em;text-align:right;}
.collectible-caption>span,.collectible-footer>span{font-size:12px;letter-spacing:.06em;}
.collectible-share .share-toggle button,.collectible-share .share-honesty,.collectible-receiver .share-honesty,.collectible-share .share-local-warning{font-size:14px;}
.received-film-list>button>strong{min-width:0;overflow-wrap:anywhere;}
.collectible-caption>h2,.collectible-request>h2{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;}
.collectible-caption>h2{-webkit-line-clamp:3;}
.collectible-request>h2{-webkit-line-clamp:6;}
.collectible-share .share-link-recovery{margin:18px 0;padding:20px;border:1px solid #9580b0;border-radius:20px;background:linear-gradient(135deg,#392a4780,#181421);text-align:left;}
.share-link-recovery h2{font-size:22px;line-height:1.2;letter-spacing:-.025em;margin:0 0 12px;}
.share-link-recovery p,.share-link-recovery small{font-size:14px;line-height:1.5;color:#d6cede;display:block;margin:0 0 14px;}
.share-link-recovery label{display:block;font-size:14px;font-weight:600;margin-bottom:8px;}
.share-link-recovery textarea{box-sizing:border-box;display:block;width:100%;min-height:100px;resize:vertical;border:1px solid #82738f;border-radius:12px;padding:12px;background:#0d0a14;color:#eee8f5;font:inherit;font-size:16px;line-height:1.4;overflow-wrap:anywhere;}
.share-link-recovery textarea:focus-visible{outline:2px solid #d5b4ff;outline-offset:3px;}
.share-link-recovery .quiet-button{width:100%;margin:8px 0;}
.share-link-recovery small{margin:0;}

/* one-film message chips (fixed lines, single select); the ds layer restyles them */
.share-message-control{margin:14px 0}.share-message-control>span{display:block;margin:0 0 8px;text-align:center;opacity:.7}
.share-message-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.share-message-chip{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:inherit;font:inherit}
.share-message-chip[aria-pressed="true"]{background:#f3eee6;border-color:#f3eee6;color:#0b0b10}

/* ===== prototype-src/refinement-experience.css ===== */
.screen.refinement-live{padding:80px 25px 40px!important;overflow-y:auto!important;overflow-x:hidden!important;display:block!important;text-align:left}
.screen.refinement-live>.close-control{position:absolute;top:24px;left:22px}
.refinement-live>.eyebrow{display:block}
.screen.refinement-live::before{inset:0;animation:none;transform:none}
.refinement-live>.global-trio-atmosphere{position:absolute!important;inset:0;max-width:100%;overflow:clip!important;contain:paint;pointer-events:none}
.refinement-live>h1{font-size:clamp(34px,10vw,44px);line-height:1.03;letter-spacing:-1.6px;margin:13px 0 15px}
.refinement-live>p{line-height:1.55;color:#bdc5cb;font-size:14px}
.refinement-live .refinement-original{padding:16px;margin:22px 0;display:grid;gap:10px;border-radius:18px}
.refinement-original>div{display:grid;gap:10px;margin:10px 0}
.refinement-original>div>span{display:flex;align-items:baseline;gap:12px;font-size:14px;line-height:1.4}
.refinement-original b{color:#c9ecdd;font-size:11px;font-weight:500}
.refinement-original small{color:#a7b4b6;font-size:11px;line-height:1.5}
.refinement-live>label{display:flex;justify-content:space-between;gap:12px;padding:0;font-size:13px;margin:22px 0 10px}
.refinement-live label>span{font-size:11px;color:#a7b4b6;letter-spacing:0;text-transform:none}
.refinement-live textarea{width:100%;box-sizing:border-box;min-height:128px;padding:16px;border:1px solid #ffffff2a;border-radius:17px;background:#ffffff08;color:#f5f6f5;font:inherit;font-size:16px;line-height:1.5;resize:vertical}
.refinement-live textarea:focus-visible{outline:2px solid #e5baf9;outline-offset:3px;border-color:#d2a8f3}
#device .refinement-live textarea:focus-visible{outline-color:#e5baf9!important;box-shadow:0 0 0 1px #bc85dd22,0 0 22px #ab6cdb12}
.refinement-live .refine-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.refinement-live .refine-chips button{min-height:44px;padding:9px 13px;border-radius:20px;border:1px solid #d4bcff30;color:#e4d7f8;background:#9b65dd12;font-size:12px}
.refinement-live .refinement-contract{font-size:12px;line-height:1.6;color:#aab8bc;margin:18px 0 22px}
.refinement-live .primary-button{width:100%;min-height:52px}
.refinement-live .quiet-button{width:100%;min-height:44px;margin-top:9px}
.refinement-return{padding:10px 20px;text-align:center}
.refinement-return .quiet-button{min-height:44px;white-space:normal}
.refinement-live .refinement-kept{padding:18px 20px;margin:22px 0;border-radius:20px;border:1px solid #c4b3ff35;background:linear-gradient(135deg,#a96aec16,#9dc4fc08)}
.refinement-kept .eyebrow{font-size:10px;letter-spacing:2px;color:#d9b6f2}
.refinement-kept p{margin:12px 0 0;color:#efedf5;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.6}
.refinement-live .refinement-limit{font-size:12px;line-height:1.5;color:#f3bdd8;margin:6px 0 14px}
.refinement-live .refinement-limit:empty{display:none}
.refinement-live .refinement-sent{margin-top:12px;border-bottom:1px solid #ffffff13}
.refinement-live details>summary{min-height:44px;padding-block:12px;box-sizing:border-box;cursor:pointer;color:#d4c4e9;font-size:13px}
.refinement-live .refinement-sent p{font-size:13px;line-height:1.6;color:#c8c3d2;white-space:pre-wrap;overflow-wrap:anywhere}
.refinement-live .quiet-button.refinement-fresh{color:#d4bbf0}
.refinement-live button:focus-visible,.refinement-live summary:focus-visible{outline:2px solid #e5baf9;outline-offset:3px}
@media(max-width:340px){.refinement-live{padding-inline:20px!important}.refinement-live>h1{font-size:35px}.refinement-live .refinement-original{margin-block:17px}}
@media(max-height:650px){#device .screen.refinement-live{padding-top:68px!important}.refinement-live>h1{font-size:30px;margin:10px 0 12px}.refinement-live>p{font-size:13px;margin-block:10px}.refinement-live .refinement-kept{padding:14px 16px;margin:16px 0}.refinement-kept p{font-size:14px;margin-top:8px}.refinement-live>label{margin-top:16px}.refinement-live textarea{min-height:100px}.refinement-live .refine-chips{gap:6px;margin-block:10px}}
@media(forced-colors:active){.refinement-live textarea,.refinement-live .refine-chips button{border:1px solid ButtonText}}

/* One supplied-request disclosure, shared by the result and its correction. */
.critical-understood>.request-reading-host{display:block;overflow:visible}
/* A Friday three's "Why these three": this block already says the week's line in full, so the panel under it does not
   say it again as its first line (it lists the per-film lines). The design system's popover (.ds-request-details) hides
   this block's own copy and shows the panel's instead: ds-rituals.css. */
.critical-understood:not(.ds-request-details) .friday-why-week{display:none}
.request-reading{margin-top:14px;min-width:0;color:#e6e0ee;text-align:left;font-size:14px;line-height:1.5}
.request-reading>summary{display:flex;align-items:center;gap:12px;min-height:44px;box-sizing:border-box;cursor:pointer;list-style:none;color:#dac1f1;font-size:13px;font-weight:600;padding:10px 0}
.request-reading>summary::-webkit-details-marker{display:none}
.request-reading>summary::after{content:"";width:7px;height:7px;flex:none;margin-left:auto;margin-right:3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);align-self:center}
.request-reading[open]>summary::after{transform:rotate(225deg)}
.request-reading>summary:focus-visible{outline:2px solid #e5baf9;outline-offset:3px;border-radius:8px}
.request-reading-body{margin-top:5px;padding:16px;border:1px solid #c5a5e42b;border-radius:18px;background:linear-gradient(140deg,#8d53c812,#8abfff08);overflow-wrap:anywhere}
.request-reading-body>p{margin:0 0 17px;color:#bcb5c9;font-size:12px;line-height:1.6}
.request-reading-body section+section{margin-top:20px}
.request-reading-body h3{margin:0 0 8px;font-size:12px;font-weight:650;letter-spacing:.025em;color:#ddc1f1}
.request-reading-body ul{list-style:none;padding:0;margin:0;display:grid;gap:0}
.request-reading-body li{padding:11px 0;border-top:1px solid #ffffff10;min-width:0}
.request-reading-facet{display:block;font-size:11px;font-weight:550;color:#9fd6e7}
.request-reading-body li p{font-size:14px;line-height:1.5;color:#efeaf4;margin:3px 0;white-space:pre-wrap}
.request-reading-body li small{display:block;font-size:11px;line-height:1.5;color:#bcb5c9}
.request-reading-body .request-reading-unavailable{margin:16px 0 0;padding-top:13px;border-top:1px solid #ffffff1c;color:#d4c9dc;font-size:12px;line-height:1.6}
.request-reading-body .quiet-button{min-height:44px;margin-top:10px;border:1px solid #c5a5e438;border-radius:12px;color:#ead9f6;background:#ae6fd710;width:100%;font:inherit;font-size:13px;white-space:normal}
.request-reading-body .quiet-button:focus-visible{outline:2px solid #e5baf9;outline-offset:3px}
.refinement-live>.request-reading{margin:0 0 18px}
.refinement-kept>label{display:block;margin-top:14px;font-size:13px;color:#ded5e7}
.refinement-kept>textarea{margin-top:9px;min-height:126px;font-size:16px}
.refinement-kept>small{display:block;margin-top:10px;font-size:12px;line-height:1.6;color:#bcb5c9}
.refinement-original-tools{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px}
.refinement-original-tools>button{min-height:44px;padding:8px 0;border:0;background:transparent;color:#d9b6f2;font-size:12px;line-height:1.5;text-align:left}
.refinement-original-tools>button[hidden]{display:none}
.device.manual-large-text .request-reading-body li p{font-size:17px}
.device.manual-large-text .request-reading>summary,.device.manual-large-text .request-reading-body h3,.device.manual-large-text .request-reading-body li small,.device.manual-large-text .request-reading-body>p,.device.manual-large-text .request-reading-facet{font-size:14px}
.device.manual-large-text .request-reading-body .quiet-button,.device.manual-large-text .refinement-original-tools>button,.device.manual-large-text .refinement-kept>label,.device.manual-large-text .refinement-kept>small{font-size:16px}
.device.manual-solid .request-reading-body{background:#15121c}
@media(prefers-reduced-transparency:reduce){.request-reading-body{background:#15121c}}
@media(forced-colors:active){.request-reading-body,.request-reading-body .quiet-button{background:Canvas;color:CanvasText;border:1px solid CanvasText}.request-reading-body :is(h3,p,small,span),.request-reading>summary{color:CanvasText}}

/* ===== prototype-src/trailer-experience.css ===== */
.trailer-player-shell{display:block;position:relative;isolation:isolate;min-height:0!important;aspect-ratio:16/9!important;max-height:none!important;height:auto;padding:0!important;overflow:hidden;background:#050508}
/* Playing: the video fills the whole trailer box and nothing of ours sits on the picture (owner, 2 Oct 2026: "We don't
   need an x button here - people can just pause it"). The title and "Close trailer" stay in the page for VoiceOver only
   (off-screen); Escape closes from the keyboard (trailer-experience.js). */
.trailer-player-toolbar{display:block;padding:0;min-height:0;margin:0}
.trailer-player-shell .trailer-player-toolbar{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.trailer-player-shell .trailer-player-host:focus{outline:none}
.trailer-player-shell .trailer-player-host:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.trailer-player-toolbar>.media-player-close{position:relative!important;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;color:#fff;font-size:20px;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.08)),rgba(18,12,38,.42);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 .5px rgba(255,255,255,.35),0 6px 18px rgba(0,0,0,.35)}
.trailer-player-toolbar>.media-player-close svg{width:18px;height:18px}
.trailer-player-failure .trailer-player-toolbar{position:relative;top:auto;right:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;min-height:52px}
.trailer-player-failure .trailer-player-toolbar>span{font-size:.875rem;line-height:1.4;max-width:calc(100% - 48px);overflow-wrap:anywhere}
.trailer-player-failure .trailer-player-toolbar>.media-player-close{position:static!important;flex:0 0 44px;border:1px solid #ffffff40;background:#11131b;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
/* 16:9 at the width its page gives it, on every screen. (Until 7 October 2026 this carried min-height:200px and
   max-height:360px. A height limit on a box with an aspect ratio makes an engine choose between the ratio and the
   width: it could come out narrower than its page and set against the left edge, or wider than a small phone.) */
.trailer-player-host{position:relative;width:100%;aspect-ratio:16/9;background:#050508}
.trailer-player-shell .trailer-player-host{position:absolute;inset:0;height:100%;aspect-ratio:auto;min-height:0;max-height:none}
.trailer-player-host iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
/* (SEND, 27 October 2026) no white flash: the frame takes its embedded page's own colour scheme (a light-scheme page in a
   dark-scheme frame is drawn on an opaque white canvas while it loads), stands transparent over the film's picture, and
   cross-fades in once YouTube has drawn its player (trailer-experience.js). Reduce Motion: it is simply there. */
.trailer-player-host iframe.trailer-frame{z-index:1;color-scheme:normal;background:transparent;opacity:0;transition:opacity var(--motion-normal) var(--motion-curve)}
.trailer-player-host iframe.trailer-frame.is-shown{opacity:1}
html.reduce-motion .trailer-player-host iframe.trailer-frame,#device.manual-reduced-motion .trailer-player-host iframe.trailer-frame{transition:none}
@media (prefers-reduced-motion:reduce){.trailer-player-host iframe.trailer-frame{transition:none}}
.trailer-loading-art{position:absolute;inset:0;background-color:#171121;background-image:linear-gradient(110deg,#08061138,#100b2266),var(--media-poster,none);background-position:center 32%;background-size:cover}
.trailer-player-status{margin:10px 14px!important;color:#c0c9d0!important;font-size:.875rem!important;line-height:1.5!important}
.trailer-player-shell .trailer-player-status{position:absolute;width:1px;height:1px;margin:-1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.trailer-player-shell .trailer-player-external{display:none}
/* TRAILER-ESCAPE (owner approved 5 Nov 2026): a trailer the person wants playing that has not played for 20 s shows
   "Trouble loading? Open on YouTube" as a pill at the top of the picture, clear of YouTube's centre play button and bottom
   controls; it goes when PLAYING, PAUSED or ENDED arrives (trailer-experience.js). The app's chrome pill (film-cards-week.css
   .fc-land: solid chrome, strong line, e-2, subhead) and its opacity fade; Reduce Motion: it is simply there. */
.trailer-stall-escape{display:none}
.trailer-player-shell.trailer-stalled .trailer-stall-escape{position:absolute;z-index:2;top:var(--sp-2);left:var(--sp-2);max-width:calc(100% - 2 * var(--sp-2));box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--sp-1);height:var(--target);padding:0 var(--sp-4);border-radius:var(--r-pill);background:var(--mat-chrome-solid);box-shadow:inset 0 0 0 1px var(--c-line-strong),var(--e-2);color:var(--c-label-1);font:var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui);letter-spacing:var(--tr-subhead);text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;animation:trailer-stall-in var(--motion-fast) var(--motion-curve) both}
.trailer-player-shell.trailer-stalled .trailer-stall-escape>span{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--c-label-2);font-weight:var(--fw-subhead)}
.trailer-player-shell.trailer-stalled .trailer-stall-escape>strong{flex:none;font-weight:inherit}
.trailer-player-shell.trailer-stalled .trailer-stall-escape:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
/* a picture too narrow for both (iPhone SE 1st, 320 wide): "Open on YouTube" alone, never a clipped "Trouble loadi..." */
.trailer-player-shell{container-type:inline-size}
@container (max-width:310px){.trailer-player-shell.trailer-stalled .trailer-stall-escape>span{display:none}}
@keyframes trailer-stall-in{from{opacity:0}to{opacity:1}}
html.reduce-motion .trailer-player-shell.trailer-stalled .trailer-stall-escape,#device.manual-reduced-motion .trailer-player-shell.trailer-stalled .trailer-stall-escape{animation:none}
@media (prefers-reduced-motion:reduce){.trailer-player-shell.trailer-stalled .trailer-stall-escape{animation:none}}
.trailer-player-external{display:flex;align-items:center;min-height:44px;margin:0 14px 6px;color:#bbdfe9;font-size:.875rem;text-decoration:underline}
.trailer-player-failure{display:block;padding:0!important;aspect-ratio:auto!important}
.trailer-recovery-copy{display:grid;gap:12px;padding:20px}
.trailer-data-confirmation{display:grid;gap:12px;padding:20px!important;aspect-ratio:auto!important}
.trailer-data-confirmation h2{margin:0;font-size:20px}
.trailer-data-confirmation p{margin:0;font-size:1rem;line-height:1.6;color:#c1c8ce}
.trailer-data-confirmation button{width:100%;min-height:44px;border:1px solid #a99cc361;border-radius:14px;background:#252033;color:#f2eef8;font:inherit;font-size:13px}
.trailer-data-confirmation .quiet-button{background:transparent;border-color:transparent;color:#c1c8ce}
.trailer-player-failure h2{margin:0;font-size:20px}
.trailer-player-failure p{margin:0;font-size:1rem;line-height:1.5;color:#c1c8ce}
.trailer-player-failure a{display:flex;align-items:center;min-height:44px;color:#bbdfe9;font-size:.875rem}
.trailer-player-failure .secondary-button{min-height:48px;width:100%;border:1px solid #a99cc361;border-radius:14px;background:linear-gradient(135deg,#2c233e,#171923);color:#f2eef8;font:inherit;font-size:13px}
@media (max-width:360px) and (max-height:620px){
  .trailer-player-failure .trailer-player-host{aspect-ratio:auto;height:120px}
  .trailer-player-failure .trailer-recovery-copy{gap:8px;padding:16px 20px calc(20px + env(safe-area-inset-bottom,0px))}
}

/* ===== prototype-src/interaction-targets.css ===== */
/* Room for a deliberate tap, preserving the established page composition. */
.device .discover-inspiration header button,
.device .reason-sheet > div > button,
.device .explore-featured button,
.device .explore-shelf header button,
.device .collection-save { min-height:44px; min-width:44px; }
.device .explore-screen .list-search input { min-height:44px; }
.device .explore-screen .filter-pills button { min-height:44px; }
.device .membership-screen { overflow-x:hidden; }
.device .membership-screen a.quiet-button { display:inline-flex; align-items:center; min-height:44px; }
.device .membership-screen::before { inset:0; transform:none; animation:none; }
.device .membership-screen .quiet-button,
.device .first-run-screen .quiet-button,
.device .taste-intelligence-card button,
.device .p20-sensory-preview button,
.device .media-trailer-play,
.device .app-header .brand-home,
.device .explore-screen .filter-pills button { min-width:44px; min-height:44px; }
.device .discover-v5 .profile-control { width:44px; height:44px; min-width:44px; min-height:44px; }
.device .recalibration-screen .taste-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.device .recalibration-screen .taste-swipe-card { touch-action:pan-y; }
/* Secondary decisions use the same quiet material as the primary journeys. */
.device .settings-premium .secondary-button,
.device .reason-sheet .reason-options > button {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; min-height:52px; padding:16px 18px; border-radius:17px;
  border:1px solid rgba(176,188,227,.24); color:#f1f3fc;
  background:linear-gradient(120deg,rgba(56,48,85,.66),rgba(22,27,44,.88));
  box-shadow:inset 0 1px 0 rgba(222,231,255,.06);
  font:inherit; font-size:15px; line-height:1.4; text-align:left;
}
.device .settings-premium .secondary-button { justify-content:center; margin:18px 0 10px; }
.device .reason-sheet .reason-options { display:grid; gap:10px; margin:24px 0 12px; }
.device .reason-sheet .reason-options > button i { color:#aebbd9; font-size:23px; font-style:normal; }
.device .reason-sheet .reason-options > button:active { background:#33304d; }
.device .reason-sheet { max-height:100%; overflow-x:hidden; overflow-y:auto; }
.device .reason-sheet > p { font-size:15px; line-height:1.55; }
.device .reason-sheet button:focus-visible,
.device .settings-premium .secondary-button:focus-visible { outline:2px solid #c6d5ff; outline-offset:3px; }
.device .account-local-confirmation .settings-note { margin-bottom:22px; }
.device .streaming-preferences .choice-cards > button { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; }
.device .streaming-preferences .choice-cards > button > span { font-size:22px; color:#b7c7ef; }
.triptic-review-indicator { position:fixed; z-index:9999; top:3px; left:50%; transform:translateX(-50%); pointer-events:none; white-space:nowrap; color:#b8bfd0; background:rgba(9,12,22,.92); border-radius:4px; padding:1px 7px; font:9px/12px system-ui,sans-serif; letter-spacing:.09em; }
.device .feedback-draft label { display:block; margin:18px 0 8px; font-size:15px; }
.device .feedback-draft textarea { display:block; width:100%; min-height:110px; padding:15px; border:1px solid #697699; border-radius:16px; background:#151a2b; color:#f3f5fc; font:inherit; line-height:1.5; resize:vertical; }
.device .feedback-draft #feedback-report { min-height:160px; font-size:13px; }
.device .feedback-draft .primary-button { margin:20px 0 8px; }
.device .feedback-draft .feedback-status { color:#c7d6ff; font-size:15px; }
/* Only explicit review uses fit-to-window scaling. Normal desktop browsing
   retains its reading size, including at browser zoom, with vertical access. */
html.triptic-unscaled-web,
html.triptic-unscaled-web body { height:auto!important; min-height:100%; overflow-x:hidden!important; overflow-y:auto!important; }
html.triptic-unscaled-web .experience-shell { position:relative!important; inset:auto!important; min-height:max(100dvh,888px); height:auto!important; padding:22px 0; place-items:start center; overflow:visible!important; }
/* The canvas sits in the page's flow, at the top and centred. frontend-completion.css pins the review frame at
   left 50% / top 50% and pulls it back with a transform; with the transform removed here and the pin left in place,
   the canvas hung from the middle of the window and its right half and lower half were off the screen. */
html.triptic-unscaled-web #device { position:relative!important; left:auto!important; top:auto!important; width:390px!important; height:844px!important; transform:none!important; flex:none; }
/* A wide TOUCH screen is a phone that opens out, not a desktop window. The app fills its height and keeps to a column no
   wider than the layouts were drawn for, centred on the page's own dark ground. No frame, no fixed 390 x 844 canvas. */
html.triptic-wide-touch .experience-shell { display:grid!important; place-items:start center!important; min-height:100dvh; padding:0!important; background:#050507!important; }
html.triptic-wide-touch #device { position:relative!important; left:auto!important; top:auto!important; width:min(100vw,var(--wide-touch-column,680px))!important; height:100dvh!important; max-height:none!important; aspect-ratio:auto!important; transform:translateZ(0)!important; border:0!important; border-radius:0!important; box-shadow:none!important; }
html.triptic-unscaled-web #device .premium-welcome .welcome-message h1 { font-size:43px!important; }
html.triptic-unscaled-web #device .discover-heading > p { font-size:13px!important; }
html.triptic-unscaled-web #device .discover-heading h1 { font-size:41px!important; }
html.triptic-unscaled-web #device .composer-guidance { font-size:10px!important; }
html.triptic-unscaled-web #device .discover-shortcuts button,
html.triptic-unscaled-web #device .discover-shortcuts button span { font-size:11.5px!important; }
html.triptic-unscaled-web #device .discover-inspiration .prompt-title { font-size:11.5px!important; }
html.triptic-unscaled-web #device .daily-cryptic-home-entry strong { font-size:14.5px!important; }
html.triptic-unscaled-web #device .daily-cryptic-home-entry p { font-size:10px!important; }
/* White normal-size labels retain contrast at every primary gradient stop.
   Keep the established geometry and glow; only deepen the violet material. */
#device .primary-button:not(:disabled) { color:#fff!important; background:linear-gradient(112deg,#5b4dc1,#6e42b3 58%,#4c309c)!important; }
/* Rendered-background checks: secondary copy stays quiet but readable. */
#device .request-count,
#device .explore-search-guidance,
#device .explore-card-copy em,
#device .profile-list button > b,
#device .provider-trust-note { color:#aaa4b6!important; }
#device .settings-row small { color:#b8b4c3!important; opacity:1!important; }
#device .discover-inspiration .prompt-copy { background:linear-gradient(180deg,rgba(5,5,10,.76),rgba(5,5,10,.9))!important; }
#device .collectible-film > b { background:rgba(10,9,17,.86); border-radius:5px; padding:3px 5px; }
#device .cast-track:focus-visible { outline:2px solid #c6d5ff; outline-offset:3px; }
/* Keep the complete ready caption inside the smallest supported web viewport,
   without shrinking text or replacing the established card formation. */
@media(max-width:350px) and (max-height:620px) {
  #device .trip-critical-layer:is(.trip-phase-ready,.trip-phase-revealing) .critical-card-stage { margin-top:-34px!important; }
  #device .trip-critical-layer:is(.trip-phase-ready,.trip-phase-revealing) .critical-status { top:auto!important; bottom:18px!important; }
}

/* A keyed control update is not a new page. Suppress every inherited entrance. */
.device > .screen[data-triptic-control-continuity="true"]{animation:none!important}

/* Content notes are an honest, keyboard-operable disclosure, not a placeholder action. */
#device .film-content-notes{border-top:1px solid #a695bd33;margin-top:20px;}
#device .film-content-notes summary{min-height:48px;padding:15px 0;color:#e4d2f4;cursor:pointer;font-size:15px;line-height:1.3;}
#device .film-content-notes summary:focus-visible{outline:2px solid #dfb6f5;outline-offset:3px;border-radius:5px;}
#device .film-content-notes p{margin:0 0 16px;line-height:1.65;color:#c1b5cd;font-size:14px;}

/* Film-detail reading hierarchy and platform sheet: one readable control per action. */
#device .media-watch-options>.edit-film-platforms{display:flex!important;grid-template-columns:none!important;align-items:center;justify-content:center;gap:8px;width:100%!important;min-height:48px!important;height:auto!important;padding:13px 16px!important;font-size:14px!important;line-height:1.4!important;text-align:center!important;white-space:normal;}
#device .media-watch-options .provider-trust-note{font-size:12px!important;line-height:1.6!important;color:#beb4cc!important;margin-top:12px!important;}
#device .media-watch-options header small{font-size:12px!important;line-height:1.5!important;}
/* Verified subscription listings need room for the full service and checked date. */
#device .media-watch-options .provider-grid:has(> div.provider-destination){display:grid!important;grid-template-columns:minmax(0,1fr);gap:8px;}
#device .media-watch-options .provider-grid>div.provider-destination{height:auto!important;min-height:66px;align-items:flex-start!important;padding:11px 14px!important;text-align:left;}
#device .media-watch-options .provider-grid>div.provider-destination>span{width:100%;min-width:0;gap:3px;}
#device .media-watch-options .provider-grid>div.provider-destination strong{overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;font-size:14px;line-height:1.35;}
#device .media-watch-options .provider-grid>div.provider-destination small{font-size:12px;line-height:1.45;color:#beb4cc;white-space:normal;overflow-wrap:anywhere;}
#device.manual-large-text .media-watch-options .provider-grid>div.provider-destination strong{font-size:16px;}
#device.manual-large-text .media-watch-options .provider-grid>div.provider-destination small{font-size:14px;}
#device .film-title>p{font-size:12px!important;line-height:1.5!important;}
#device .media-trailer-copy p{font-size:12px;line-height:1.5;max-width:100%;color:#cbc2d9;}
#device .media-trailer-copy{right:20px;}
#device .media-trailer.is-ready{min-height:230px;}
#device .cast-section header small{font-size:11px!important;color:#b5abbe;}
#device .spoiler-safe>p{font-size:15px!important;line-height:1.7!important;color:#c9c0d3;}
#device .film-platforms-sheet{position:fixed;inset:0;width:min(420px,calc(100vw - 28px));max-height:calc(100dvh - 48px);margin:auto;padding:24px;overflow:auto;border:1px solid #b79ace66;border-radius:28px;background:linear-gradient(145deg,#281e38,#12101d 65%);color:#f3edf9;box-shadow:0 24px 80px #000b;}
#device .film-platforms-sheet::backdrop{background:#06030bd6;backdrop-filter:blur(8px);}
#device .film-platforms-sheet>header{display:flex;align-items:center;justify-content:space-between;gap:12px;}
#device .film-platforms-sheet h2{font-size:30px;line-height:1.1;letter-spacing:-.035em;margin:8px 0;}
#device .film-platforms-sheet>p{font-size:15px;line-height:1.6;color:#c8bdd7;margin:16px 0;}
#device .film-platforms-sheet .film-platform-note{font-size:12px;}
#device .film-platforms-sheet .primary-button{width:100%;min-height:48px;margin-top:12px;}
#device .film-platforms-sheet .streaming-onboarding-grid{margin:20px 0;}
#device .film-platforms-sheet .streaming-choice{min-width:0;padding:14px 10px;gap:10px;}
#device .film-platforms-sheet .streaming-choice strong{max-width:100%;line-height:1.35;overflow-wrap:anywhere;}
#device .film-platforms-sheet .streaming-logo{max-width:calc(100% - 14px);}
#device .film-platforms-sheet .streaming-tick{right:10px;top:10px;}
@media(max-width:360px){
 #device .film-platforms-sheet .streaming-onboarding-grid{grid-template-columns:minmax(0,1fr);}
 #device .film-platforms-sheet .streaming-choice{display:grid;grid-template-columns:64px minmax(0,1fr) 16px;align-items:center;min-height:82px;padding:12px;gap:12px;}
 #device .film-platforms-sheet .streaming-logo{width:64px;height:48px;max-width:100%;}
 #device .film-platforms-sheet .streaming-tick{position:static;justify-self:end;}
}
@media(forced-colors:active){#device .film-platforms-sheet{background:Canvas;color:CanvasText;border-color:CanvasText;}#device .film-platforms-sheet::backdrop{background:Canvas;opacity:.8;}}

/* Screenshot review: task copy must not collapse beside fixed-width controls. */
@media(max-width:360px){
 #device .premium-composer .composer-footer{display:grid!important;grid-template-columns:minmax(0,1fr)!important;height:auto!important;min-height:0!important;gap:8px!important;align-items:start!important}
 #device .premium-composer .composer-guidance{width:100%!important;max-width:none!important;font-size:12px!important;line-height:1.4!important;padding:0!important}
 #device .premium-composer .composer-actions{width:100%!important;justify-content:flex-end!important}
}
#device .clarify-screen>p+.primary-button{margin-top:24px!important}
/* A long dictated draft stays intact. Its recovery instruction is visible,
   not only announced, without changing the normal composer's composition. */
#device .premium-composer #request-limit-live.is-over-limit{
 position:relative!important;display:block!important;width:auto!important;height:auto!important;
 padding:11px 13px!important;margin:4px 0 13px!important;overflow:visible!important;
 clip:auto!important;white-space:normal!important;border:1px solid #d89bcb38!important;
 border-radius:13px;background:#281d32;color:#f1cbe6;font-size:13px!important;line-height:1.5!important;
}
#device .premium-composer .query-save:disabled{color:#91889c!important;opacity:.65;cursor:default;pointer-events:none}
#device .premium-composer .request-count.is-over-limit{color:#f1cbe6!important}
#device.manual-large-text .premium-composer #request-limit-live.is-over-limit{font-size:16px!important}
@media(forced-colors:active){
 #device .premium-composer #request-limit-live.is-over-limit{background:Canvas;color:CanvasText;border-color:CanvasText!important}
 #device .premium-composer .query-save:disabled{color:GrayText!important;opacity:1}
}
#device .streaming-preferences .choice-cards>button{display:grid;grid-template-columns:64px minmax(0,1fr) 24px;align-items:center;gap:14px;min-height:76px;text-align:left}
#device .streaming-preferences .choice-cards .streaming-logo{width:64px;height:42px;margin:0;display:flex;align-items:center;justify-content:center}
#device .streaming-preferences .choice-cards .streaming-logo img{width:100%;height:100%;object-fit:contain}
#device .streaming-preferences .choice-cards strong{font-size:16px;line-height:1.3}
#device .streaming-preferences .choice-cards>button>span:last-child{justify-self:end}
#device .collections-api-saved>.primary-button,#device .collections-api-saved>.quiet-button{display:block;width:100%;min-height:48px;margin:18px 0 0}

#device .feedback-sheet{padding-top:16px!important;max-height:calc(100% - 20px)!important;overflow-y:auto}
#device .feedback-sheet::before{inset:0;transform:none!important;animation:none!important}
#device .feedback-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px;margin-bottom:14px}
#device .feedback-toolbar .sheet-handle{margin:0 auto;flex:0 0 42px}
#device .feedback-toolbar .circle-control{position:static!important;flex:0 0 44px;width:44px;min-width:44px;height:44px;padding:0;justify-content:center;margin:0!important}
#device .feedback-sheet>h1{font-size:28px;line-height:1.15;margin:12px 0 16px}
#device .feedback-sheet>p{font-size:14px;line-height:1.5;margin:0 0 18px}
#device .safety-mark{display:grid!important;place-items:center!important}
#device .safety-mark .brand-mark{position:static!important;inset:auto!important;margin:0!important;width:48px!important;height:56px!important;transform:none!important}

#device .watchlist-grid{align-items:start}
#device .watchlist-grid>button{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
#device .watchlist-grid .library-grid-poster{position:relative;display:block;width:100%;height:auto!important;aspect-ratio:2/3;overflow:hidden;border-radius:16px;background:linear-gradient(145deg,#2b1e3a,#12101c)!important}
#device .library-grid-poster>img{position:relative;z-index:1;width:100%;height:100%;display:block;object-fit:cover;object-position:center}
#device .library-grid-poster>img[hidden]{display:none}
#device .library-grid-placeholder{position:absolute;inset:0;display:grid;place-items:center}
#device .library-grid-placeholder .brand-mark{width:42px;height:48px;margin:0}
#device .watchlist-grid>button>strong{min-height:2.6em;line-height:1.3}
/* Where to watch logo grid (streaming-preferences.js); the design-system layer (ds-film-share.css) styles it fully. */
#device .media-watch-options .watch-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:12px 6px;margin:12px 0 0;padding:0;list-style:none}
#device .media-watch-options .watch-logo>a,#device .media-watch-options .watch-logo>span{display:grid;justify-items:center;gap:6px;min-height:44px;color:inherit;text-decoration:none;font-size:12px;text-align:center}
#device .media-watch-options .watch-logo-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;overflow:hidden;background:#ffffff1a}
#device .media-watch-options .watch-logo-icon img{width:100%;height:100%;object-fit:cover}
#device .media-watch-options .watch-logo.is-mine .watch-logo-icon{box-shadow:0 0 0 2px #a78bfa}
#device .media-watch-options .watch-meta{margin:12px 0 0;font-size:12px;opacity:.75}

/* ===== prototype-src/launch-signature.css ===== */
/* The opening is a single measured mark-to-mark transition, not two splashes. */
.premium-welcome .launch-autograph{position:relative;display:block;width:202px;height:49px;margin:25px auto 0;transform:rotate(-5deg);pointer-events:none;filter:drop-shadow(0 2px 10px #eecbac19)}
.launch-autograph .signature-ink{display:block;width:100%;clip-path:inset(0);opacity:.95}
.launch-autograph .signature-ink img{display:block;width:100%;height:auto}
.launch-autograph .signature-flourish{position:absolute;left:12%;bottom:0;width:78%;height:15px;overflow:visible;fill:none;stroke:#dbc5af;stroke-width:1;stroke-linecap:round}
.launch-autograph .signature-flourish path{stroke-dasharray:1;stroke-dashoffset:0}
html.triptic-booting .signature-ink,.launch-destination:not(.is-signed) .signature-ink{clip-path:inset(0 100% 0 0)}
html.triptic-booting .signature-flourish path,.launch-destination:not(.is-signed) .signature-flourish path{stroke-dashoffset:1}
.launch-destination .welcome-brand,.launch-destination .welcome-brand>.brand-mark,.launch-destination .welcome-brand>.wordmark{animation:none!important;transition:none!important}
.launch-destination.is-signing .signature-ink{animation:triptic-autograph-ink var(--motion-ceremony) var(--motion-curve) both}
.launch-destination.is-signing .signature-flourish path{animation:triptic-autograph-flourish var(--motion-slow) 1200ms var(--motion-curve) both}
.launch-destination.is-clocked .signature-ink,.launch-destination.is-clocked .signature-flourish path{animation:none!important}
@keyframes triptic-autograph-ink{0%{clip-path:inset(0 100% 0 0)}22%{clip-path:inset(0 75% 0 0)}48%{clip-path:inset(0 52% 0 0)}70%{clip-path:inset(0 28% 0 0)}100%{clip-path:inset(0)}}
@keyframes triptic-autograph-flourish{to{stroke-dashoffset:0}}
.manual-reduced-motion .launch-autograph .signature-ink{clip-path:none!important;animation:none!important}.manual-reduced-motion .launch-autograph .signature-flourish path{stroke-dashoffset:0!important;animation:none!important}
@media(max-width:560px) and (max-height:640px){.premium-welcome .launch-autograph{width:188px;height:43px;margin-top:18px}}
@media(prefers-reduced-motion:reduce){.launch-autograph .signature-ink{clip-path:none!important;animation:none!important}.launch-autograph .signature-flourish path{stroke-dashoffset:0!important;animation:none!important}}

/* ===== prototype-src/triptych-signature.css ===== */
/* One connected object becomes three films, then a quiet comparison tool. */
.premium-discover.trip-critical-host.critical-engaged{overflow:clip!important}
.triptych-plane{position:absolute;inset:0;display:block;transform-style:preserve-3d;transform:translateX(var(--triptych-x,0px)) rotateY(var(--triptych-turn,0deg));transition:transform var(--motion-fast) var(--motion-curve);pointer-events:none}
.is-triptych-pulling .triptych-plane{transition:none;will-change:transform}
.is-triptych-pulling .critical-card:not(.is-triptych-pulled) .triptych-plane{transform:translateX(calc(var(--triptych-pull,0) * -2px))}
.triptych-signature .critical-card{touch-action:pan-y}
.triptych-signature.critical-deck-advancing .critical-card{transition-duration:var(--motion-fast)!important}
.triptych-signature.trip-phase-ready .critical-status{opacity:1!important;transform:none!important;transition:opacity var(--motion-fast) var(--motion-curve)!important}
.triptych-signature .critical-card.card100-ready{animation:none!important;will-change:auto}
.triptych-signature .card100-prism{animation:none!important;opacity:.4!important}
.is-triptych-pulling .is-triptych-pulled .card100-prism{opacity:.85!important;transform:translateX(calc(var(--triptych-pull,0) * 34%)) rotate(5deg)!important}
.triptych-signature .critical-card-energy::before,.triptych-signature .critical-card-energy i{animation:none!important}
.triptych-signature .critical-card-energy::before{opacity:.66!important}
.triptych-signature .critical-card.is-opening .critical-card-inner{transition-duration:var(--motion-normal)!important}
.triptych-signature .critical-card.is-final.is-opening .critical-card-inner{transition-duration:var(--motion-slow)!important}
.triptych-signature .card100-poster-arriving .card100-lens{animation-duration:var(--motion-fast)!important;animation-delay:0s!important}
.triptych-signature .critical-final-bloom i{display:none!important}
.triptych-signature.card100-final-event .card100-bloom-core{animation-duration:var(--motion-slow)!important;animation-delay:150ms!important}
.triptych-signature.card100-final-event .card100-bloom-lens{animation-duration:var(--motion-slow)!important;animation-delay:180ms!important}
.triptych-spine{position:absolute;z-index:0;left:8%;right:8%;top:56%;height:44px;display:flex;align-items:center;justify-content:space-between;gap:0;isolation:isolate;pointer-events:none}
.triptych-spine::before{content:'';position:absolute;z-index:-1;left:22px;right:22px;top:21px;height:2px;background:linear-gradient(90deg,#7eb5c9,#ae96db 50%,#e9c7a0);opacity:.72;transform:scaleX(calc(1 + var(--triptych-pull,0) * .05));box-shadow:0 1px 0 #080910,0 0 14px #aaa2da44}
.triptych-spine>button{position:relative;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;border:0;padding:0;background:transparent;color:#eee7dd;border-radius:14px;opacity:1;font:inherit}
.triptych-spine>button>i{display:grid;place-items:center;width:13px;height:23px;border:1px solid #bcb5d4;border-radius:4px;background:linear-gradient(145deg,#343346,#13131f);box-shadow:inset 0 1px 0 #fff4,0 3px 7px #0008;transform:translateY(0);transition:transform var(--motion-fast) var(--motion-curve),background var(--motion-fast) var(--motion-curve);pointer-events:none}
.triptych-spine>button>i>b{font:600 8px/1 system-ui;opacity:0}
.triptych-spine>button.is-next>i{border-color:#eae3fa;background:linear-gradient(145deg,#9c90c7,#51456e);transform:translateX(calc(var(--triptych-pull,0) * 12px)) translateY(-3px);box-shadow:inset 0 1px #fff7,0 0 19px #b6a2e255}
.triptych-spine>button.is-open>i{background:#292a39;border-color:#78768e}
.triptych-signature .critical-compare-hint>i{display:none!important}
.triptych-signature.trip-phase-settled .critical-compare-hint{display:flex!important;flex-direction:column;gap:4px!important;transform:translate(-50%,-20px)!important;pointer-events:auto!important}
.critical-compare-hint .triptych-spine{position:relative;inset:auto;width:168px;height:44px;pointer-events:auto}
.critical-compare-hint .triptych-spine>button{cursor:pointer}
.critical-compare-hint .triptych-spine>button>i>b{opacity:1}
.critical-compare-hint .triptych-spine>button[aria-pressed="true"]>i{height:27px;border-color:#eae3fa;background:linear-gradient(145deg,#79679f,#39304f);transform:translateY(-2px)}
.critical-compare-hint .triptych-spine>button:focus-visible{outline:2px solid #c8d6ff;outline-offset:1px}
.triptych-signature.trip-phase-settled .critical-results{margin-top:calc(var(--search-results-y) + 32px)!important}
.device.manual-solid .triptych-spine::before{box-shadow:none;background:#bcb5d4}
.device.manual-solid .triptych-spine>button>i{background:#252333;box-shadow:none}
@media(prefers-reduced-motion:reduce){.triptych-plane,.triptych-spine *{transform:none!important;transition:none!important;animation:none!important}.triptych-signature .critical-final-bloom{display:none!important}}
.device.manual-reduced-motion .triptych-plane,.device.manual-reduced-motion .triptych-spine *{transform:none!important;transition:none!important;animation:none!important}
.reduce-motion .triptych-plane,.reduce-motion .triptych-spine *{transform:none!important;transition:none!important;animation:none!important}

/* Quick reveals is local to the accepted card, not a global motion override.
   Keep the poster planes flat and expose only the hydrated, requested face. */
.device.manual-quick-reveals .trip-critical-layer.card100-scene .critical-card-stage{perspective:none!important}
.device.manual-quick-reveals .trip-critical-layer.card100-scene .critical-card,
.device.manual-quick-reveals .trip-critical-layer.card100-scene .triptych-plane,
.device.manual-quick-reveals .trip-critical-layer.card100-scene .critical-card-inner{transform-style:flat!important;animation:none!important}
.device.manual-quick-reveals .trip-critical-layer.card100-scene .triptych-plane,
.device.manual-quick-reveals .trip-critical-layer.card100-scene .critical-card-inner{transform:none!important;transition:none!important}
.device.manual-quick-reveals .trip-critical-layer.card100-scene .critical-card-back,
.device.manual-quick-reveals .trip-critical-layer.card100-scene .critical-card-front{transform:none!important;backface-visibility:visible!important;-webkit-backface-visibility:visible!important;transition:opacity var(--motion-fast) var(--motion-curve)!important}
.device.manual-quick-reveals .trip-critical-layer.card100-scene .critical-card-front{opacity:0!important}
.device.manual-quick-reveals .trip-critical-layer.card100-scene .critical-card-back{opacity:1!important}
.device.manual-quick-reveals .trip-critical-layer.card100-scene .critical-card.is-flipping[data-face-hydrated="true"] .critical-card-front,
.device.manual-quick-reveals .trip-critical-layer.card100-scene .critical-card.is-revealed[data-face-hydrated="true"] .critical-card-front{opacity:1!important}
.device.manual-quick-reveals .trip-critical-layer.card100-scene .critical-card.is-flipping[data-face-hydrated="true"] .critical-card-back,
.device.manual-quick-reveals .trip-critical-layer.card100-scene .critical-card.is-revealed[data-face-hydrated="true"] .critical-card-back{opacity:0!important}
.device.manual-quick-reveals .trip-critical-layer .critical-card-energy,
.device.manual-quick-reveals .trip-critical-layer .critical-final-bloom{display:none!important}
.device.manual-quick-reveals .triptych-spine *{transition:none!important;animation:none!important}
.device.manual-quick-reveals .trip-critical-layer.card100-scene:not(.trip-phase-settled) .critical-card.is-opening{transform:var(--quick-reveal-pose,none)!important;filter:var(--quick-reveal-filter,none)!important;transition:none!important}
.device.manual-quick-reveals .trip-critical-layer.critical-final-reveal .critical-card.rank-1::before{content:none!important;display:none!important;animation:none!important}

/* ===== prototype-src/shared-brand.css ===== */
/* One top-level brand treatment for all five tabs (Discover, Today, Collections, Library, You). */
#device>.screen:is(.premium-discover,.collections-api-screen,.library-screen.library-premium,.profile-screen.taste-intelligence-profile,.today-screen.ds-today){
 --triptic-brand-safe-top:max(17px,env(safe-area-inset-top,0px));--triptic-brand-gutter:clamp(20px,5.64vw,24px);
 padding-top:0!important;padding-inline:var(--triptic-brand-gutter)!important;
}
#device>.screen:is(.premium-discover,.collections-api-screen,.library-screen.library-premium,.profile-screen.taste-intelligence-profile,.today-screen.ds-today)>.app-header{
 height:calc(var(--triptic-brand-safe-top) + 71px)!important;min-height:0!important;box-sizing:border-box!important;
 margin:0!important;padding:calc(var(--triptic-brand-safe-top) + 25px) 0 0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
}
#device>.screen:is(.premium-discover,.collections-api-screen,.library-screen.library-premium,.profile-screen.taste-intelligence-profile,.today-screen.ds-today)>.app-header .brand-home{
 position:relative;isolation:isolate;display:flex!important;align-items:center!important;gap:10px!important;min-height:44px!important;padding:0!important;border:0!important;background:transparent!important;animation:none!important;transition:none!important;
}
#device>.screen:is(.premium-discover,.collections-api-screen,.library-screen.library-premium,.profile-screen.taste-intelligence-profile,.today-screen.ds-today)>.app-header .brand-mark{width:34px!important;height:34px!important;filter:drop-shadow(0 0 7px #7dd2ffb8)!important}
#device>.screen:is(.premium-discover,.collections-api-screen,.library-screen.library-premium,.profile-screen.taste-intelligence-profile,.today-screen.ds-today)>.app-header .wordmark{width:88px!important;height:auto!important}
#device>.screen:is(.premium-discover,.collections-api-screen,.library-screen.library-premium,.profile-screen.taste-intelligence-profile,.today-screen.ds-today)>.app-header .header-brand-aura{
 position:absolute;left:-100px;top:50%;transform:translateY(-50%);z-index:-1;width:340px;height:72px;
 background:radial-gradient(200px 36px at 110px 50%,#4ab2ff3b,#7d53ef13 50%,transparent 100%);filter:blur(11px);pointer-events:none;
}
#device .collections-api-screen .collections-api-content{padding-inline:0}
/* The same two-part glow as Discover, with one static luminance on every tab. */
#device>.screen:is(.premium-discover,.collections-api-screen,.library-screen.library-premium,.profile-screen.taste-intelligence-profile,.today-screen.ds-today)>.app-header .brand-home::after{
 content:""!important;position:absolute!important;z-index:-1!important;left:-100px!important;top:50%!important;width:340px!important;height:72px!important;
 transform:translateY(-50%)!important;background:radial-gradient(180px 36px at 110px 50%,rgba(104,201,255,.38),rgba(81,148,255,.2) 26%,rgba(81,148,255,.1) 58%,transparent 100%),radial-gradient(150px 36px at 170px 50%,rgba(147,87,239,.13),transparent 100%)!important;
 opacity:.9!important;animation:none!important;transition:none!important;filter:none!important;pointer-events:none!important;
}
#device>.screen:is(.premium-discover,.collections-api-screen,.library-screen.library-premium,.profile-screen.taste-intelligence-profile,.today-screen.ds-today)>.app-header .header-brand-aura{opacity:1!important;animation:none!important;transition:none!important}
#device .library-premium .library-empty{margin:24px 0;padding:24px 20px;max-width:100%;box-sizing:border-box}
#device .library-premium .library-empty p{font-size:15px;line-height:1.55}
#device .library-premium .library-empty button{min-width:0;max-width:100%;white-space:normal;line-height:1.4;padding:12px 16px}
@media(max-height:760px){
 #device>.screen:is(.premium-discover,.collections-api-screen,.library-screen.library-premium,.profile-screen.taste-intelligence-profile,.today-screen.ds-today)>.app-header{height:calc(var(--triptic-brand-safe-top) + 63px)!important}
 #device>.screen:is(.premium-discover,.collections-api-screen,.library-screen.library-premium,.profile-screen.taste-intelligence-profile,.today-screen.ds-today)>.app-header .brand-mark{width:31px!important;height:31px!important}
}

/* ===== prototype-src/recommendation-waiting.css ===== */
/* Quiet editorial detail shares the existing ceremony; it never competes with
   an actionable card. Waiting alone can scroll on compact/larger-text screens. */
#device .trip-critical-layer.has-waiting-note{overflow-y:auto!important;overscroll-behavior-y:contain;scrollbar-width:none}
#device .has-waiting-note .trip-waiting-copy{position:relative;z-index:7;margin:350px 24px 0;padding-bottom:max(32px,env(safe-area-inset-bottom));text-align:left}
#device .has-waiting-note .critical-status{position:relative!important;inset:auto!important;margin:0!important;text-align:left!important;opacity:1!important;transform:none!important;animation:none!important}
#device .has-waiting-note .critical-status>span{font-size:12px!important;letter-spacing:.13em!important;color:#c1b3e8!important}
#device .has-waiting-note .critical-status>h1{font-size:clamp(24px,1.65rem,30px)!important;line-height:1.15!important;text-wrap:balance}
#device .has-waiting-note .critical-status>p{display:none!important}
#device .trip-waiting-note{position:relative;margin-top:24px;padding:20px;border:1px solid #b39ad335;border-radius:22px;background:linear-gradient(135deg,#57417624,#151220d9);box-shadow:inset 0 1px 0 #e1c4f41c,0 16px 40px #0003;color:#ede7f5}
#device .trip-waiting-note[hidden]{display:none!important}
#device .trip-waiting-eyebrow{display:block;font-size:12px;font-weight:650;line-height:1.4;letter-spacing:.14em;color:#d3b9f2}
#device .trip-waiting-note p{margin:12px 0 0;font-size:1rem;line-height:1.55;text-wrap:pretty;overflow-wrap:anywhere}
/* Recovery content can grow and scroll: never clip exact wording or controls. */
#device .recommendation-recovery>.recommendation-retry-note{margin:12px 0 0}
@media(max-height:700px){
#device .recommendation-recovery{padding-top:64px!important}
#device .recommendation-recovery>.state-orb{height:44px!important;margin:0 0 12px!important}
#device .recommendation-recovery>.state-orb>.triptic-emblem{width:40px;height:44px;transform:none!important}
#device .recommendation-recovery>.state-orb .brand-mark{width:32px;height:32px}
#device .recommendation-recovery>h1{margin:12px 0}
#device .recommendation-recovery>p{margin:0}
#device .recommendation-recovery>.recommendation-preserved-query{margin:14px 0;padding:14px 16px;line-height:1.5}
#device .recommendation-recovery>.primary-button{margin-top:0}
#device .recommendation-recovery>.recommendation-retry-note{margin:12px 0 0}
}
@media(max-height:700px){
  #device .has-waiting-note .trip-waiting-copy{margin-top:260px;margin-inline:20px}
  #device .has-waiting-note .critical-engine-stage{top:118px!important}
  #device .trip-waiting-note{margin-top:18px;padding:16px}
}
@media(forced-colors:active){#device .trip-waiting-note{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}#device .trip-waiting-eyebrow{color:CanvasText}}
#device .friday-service-screen{padding:24px 22px max(40px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 85% 0%,#62339526,transparent 65%),#09080f}
#device .friday-service-screen h1{font-size:20px;white-space:nowrap}
#device .friday-service-screen h2{font-size:clamp(26px,2rem,34px);text-wrap:balance}
#device .friday-service-screen textarea{background:linear-gradient(145deg,#211a31,#121019);border:1px solid #aa8ecc66;box-shadow:inset 0 1px #f0d8ff16;color:#faf6ff;min-height:100px}
#device .friday-service-screen textarea:focus-visible{outline:2px solid #d7a3e7;outline-offset:3px}
#device .friday-waiting{display:flex;flex-direction:column;margin-top:32px}
#device .friday-waiting .critical-status{position:static!important;inset:auto!important;transform:none!important;opacity:1!important;text-align:left!important;animation:none!important}
#device .friday-waiting .trip-waiting-copy{display:contents;margin:0!important;padding-bottom:0!important}
#device .friday-waiting .trip-waiting-note{order:2}
#device .friday-waiting .critical-status>p{display:block!important;font-size:1rem!important;line-height:1.55!important}
#device .friday-waiting .critical-status>h2{font-size:32px!important;line-height:1.15!important;color:#f8f3ff!important}
#device .friday-waiting>button{order:1;width:100%;min-height:48px;margin-top:24px;border:1px solid #aa8ecc66;border-radius:18px;background:#21152e;color:#eee4fa}
#device .friday-recovery{padding:16px;margin:16px 0 22px;background:#39214d4d;border:1px solid #bf97da55;border-radius:18px}
#device .friday-recovery strong{font-size:18px;line-height:1.4;color:#f4e8ff}
#device .friday-recovery p{margin:8px 0 0!important}
#device .friday-delivery{margin-top:28px;border-top:1px solid #b797d22e;padding-top:16px}
#device .friday-delivery summary{cursor:pointer;min-height:44px;font-size:14px;color:#cbb9e0}
#device .friday-service-screen .quiet-button{font-size:14px;line-height:1.4}
#device .trip-critical-layer .critical-friday-refresh{appearance:none;-webkit-appearance:none;min-height:46px;padding:12px 18px;border:1px solid #c29ad766!important;border-radius:18px;background:linear-gradient(135deg,#453055,#201628)!important;box-shadow:inset 0 1px 0 #f1d0ff16!important;color:#f0e4fa!important;font:inherit;font-size:14px;font-weight:600;line-height:1.4}
#device .trip-critical-layer .critical-friday-refresh:focus-visible{outline:2px solid #d5b1f2;outline-offset:3px}
@media(max-height:700px){#device .friday-service-screen .onboarding-copy{margin:16px 0 12px}#device .friday-service-screen .onboarding-copy h2{font-size:26px;margin:12px 0}#device .friday-waiting{margin-top:22px}#device .friday-recovery{margin:12px 0;padding:14px}#device .friday-service-screen:has(.friday-recovery) .onboarding-copy{display:none}}
#device :is(.recommendation-recovery,.clarify-screen)>p{font-size:1rem!important;line-height:1.55!important;color:#c7c0d1}
#device .clarify-screen>small{font-size:14px!important;line-height:1.4;color:#aba1ba}
#device .clarify-screen>.back-chevron{position:absolute!important;top:24px;left:24px}
@media(max-height:700px){
  #device .clarify-screen{padding-top:86px!important;overflow-y:auto!important}
  #device .clarify-screen>.clarify-mark{height:72px!important}
}

/* Keep the final recovery line clear of the home indicator on small iPhones. */
@media(max-height:600px) and (max-width:350px){#device .recommendation-recovery{padding-top:44px!important}}

/* (P-JOURNEY, 13 October 2026) "Not quite a full three": Flick's bubble starts below the round Back, never over it */
@media(min-height:701px){html.ds #device .clarify-screen>.sps.sps-empty{margin-top:26px}}

/* ===== prototype-src/confirmation-motion.css ===== */
/* A saved poster receives the existing bookmark, not another modal or reward. */
.film-save-imprint {
  position:absolute;z-index:8;right:1rem;top:4.75rem;
  display:grid;place-items:center;width:3.25rem;height:3.75rem;
  border:1px solid #edccffb3;border-radius:.8rem .8rem 1.15rem 1.15rem;
  color:#fff;background:linear-gradient(145deg,#bd8fffeb,#7338c5f5 56%,#472677f5);
  box-shadow:inset 1px 1px 0 #ffffff66,inset -2px -3px 3px #30114680,0 8px 18px #10051b66;
  pointer-events:none;transform-origin:50% 20%;backface-visibility:hidden;
}
.film-save-imprint svg{width:1.5rem;height:1.5rem;fill:currentColor;stroke:currentColor;stroke-width:1.7}
.film-save-imprint .action-bookmark{position:relative;display:block;width:18px!important;height:24px!important;border:0!important;background:currentColor!important;color:#fff5ff!important;filter:none!important;box-shadow:none!important}
.film-save-imprint .action-bookmark::after{display:none}
.taste-radar-previous{fill:none;stroke:#d9b8f3;stroke-width:1;stroke-dasharray:3 5;opacity:.42;pointer-events:none}
@media(prefers-reduced-motion:reduce),(prefers-reduced-transparency:reduce),(forced-colors:active){.film-save-imprint,.taste-radar-previous{display:none}}
.manual-reduced-motion .film-save-imprint,.manual-solid .film-save-imprint,.reduce-motion .film-save-imprint,.reduce-transparency .film-save-imprint,
.manual-reduced-motion .taste-radar-previous,.manual-solid .taste-radar-previous,.reduce-motion .taste-radar-previous,.reduce-transparency .taste-radar-previous{display:none}

/* ===== prototype-src/micro-moments.css ===== */
/* TRIPTIC micro-moments, batch A (11 November 2026): the drawn parts of micro-moments.js. Every rule here styles an element that
   only exists while its preview flag is on (the script makes them); nothing here changes anything drawn with every flag off. */

/* one layer over the app for the copies that travel and the stamps: never a target for a finger, never read aloud */
.mm-layer { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; contain: layout; }

/* fly-to-tab: one small copy of the poster, in the poster's own corners and a soft lift shadow */
.mm-fly { position: fixed; z-index: 1; transform-origin: 50% 50%; will-change: transform, opacity; pointer-events: none; }
.mm-fly-art { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; background: var(--c-surface-2, rgb(40 34 60)); box-shadow: 0 10px 24px rgb(0 0 0 / .45), 0 0 0 .5px rgb(255 255 255 / .18); will-change: transform; }

/* the recess a lifted poster leaves while its copy is over it (so one picture travels, never two) */
.mm-socket { position: fixed; z-index: 0; border-radius: 6px; background: rgb(8 6 14 / .6); pointer-events: none; will-change: opacity; }

/* double-tap-save: the gold bookmark stamped on the poster (the action bar's own bookmark, in the members' gold) and its ring */
.mm-stamp { position: fixed; z-index: 2; display: grid; place-items: center; pointer-events: none; will-change: opacity; }
.mm-stamp svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 8px rgb(0 0 0 / .55)); will-change: transform; }
.mm-stamp path { fill: var(--card-gold, var(--c-plus-gold)); stroke: var(--card-gold-hi, var(--c-plus-gold)); stroke-width: 1; stroke-linejoin: round; }
.mm-stamp-ring { position: absolute; inset: -18%; border-radius: 50%; border: 1.5px solid var(--card-gold-line, var(--c-plus-gold)); opacity: 0; will-change: transform, opacity; }

/* tab-icons: the parts a glyph borrows for its move (they take the glyph's own stroke and colour) */
#device svg .mm-glint rect { fill: currentColor; stroke: none; opacity: 0; }
#device svg .mm-glint-star { fill: currentColor; stroke: none; opacity: 0; }
#device svg .mm-hand { fill: none; }

/* padlocks-open, on arrival: the padlock where it stood, over the thing it locked (now open), on the sealed slab's own glass, in the
   seal's colours (membership.css .tm-seal); it clicks open and lifts away */
.mm-lock { position: fixed; z-index: 1; display: grid; place-items: center; border-radius: 50%; color: var(--c-seal-hi);
  background: var(--c-stage-raised); box-shadow: 0 6px 14px rgb(0 0 0 / .45), inset 0 0 0 1px var(--c-line-strong); pointer-events: none; will-change: transform, opacity; }
.mm-lock svg { overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ===== prototype-src/key-pop.css ===== */
/* TRIPTIC key-pop (preview flag "key-pop", OFF by default; prototype-src/key-pop.js says what it does). Everything here is gated
   by html.pv-key-pop / html.pv-all: with the flag off nothing on this page applies and the keys' own pops are as live. */

/* one object travels: the keys' own little pops step aside */
html:is(.pv-key-pop, .pv-all) :is(.gs-pop, .xc-pop) { display: none; }

/* the pop: laid in the game's root, placed by transform (left/top are never animated) */
html:is(.pv-key-pop, .pv-all) .kp-pop { position: absolute; left: 0; top: 0; z-index: 30; display: block; width: 0; height: 0; pointer-events: none; opacity: 0; visibility: hidden; contain: layout style; }
html:is(.pv-key-pop, .pv-all) .kp-pop.is-up { opacity: 1; visibility: visible; }
/* carried with the finger: over the press (the touch-down token), interruptible (a transition from where it is) */
html:is(.pv-key-pop, .pv-all) .kp-pop.is-moving { transition: transform var(--motion-press) var(--motion-curve); }
.kp-body { position: absolute; left: 0; top: 0; display: block; will-change: transform, opacity; }
.kp-cap, .kp-neck { position: absolute; left: 0; top: 0; display: block; box-sizing: border-box; }
.kp-cap { display: grid; place-items: center; border-radius: 10px; }
.kp-neck { border-radius: 0 0 7px 7px; }
.kp-l { display: block; line-height: 1; transform: translateY(-1px); }

/* the key's own face, lit a step (one solid colour for cap and neck, so they read as one shape), the letter large */
.kp-pop.is-gs { --kp-face: color-mix(in srgb, var(--gs-ink) 26%, var(--gs-bg)); }
.kp-pop.is-gs .kp-cap { background: var(--kp-face); color: var(--gs-ink); box-shadow: 0 8px 18px rgb(0 0 0 / .45); font: 600 calc(28 * var(--type-unit, 1px))/1 var(--gs-ui-font); }
.kp-pop.is-gs .kp-cap { font-size: min(calc(28 * var(--type-unit, 1px)), 34px); }
.kp-pop.is-gs .kp-neck { background: var(--kp-face); box-shadow: 0 4px 10px rgb(0 0 0 / .35); }

/* Cross Cut: the frame of leader its own pop was, perforations at top and foot, the letter typed in ink */
.kp-pop.is-xc .kp-cap { color: var(--xc-ink); font: 500 min(calc(32 * var(--type-unit, 1px)), 38px)/1 var(--xc-type);
  background:
    repeating-linear-gradient(90deg, rgb(16 27 22 / .26) 0 14%, rgb(16 27 22 / 0) 14% 29%) 50% 6% / 64% 5% no-repeat,
    linear-gradient(180deg, var(--xc-leader), var(--xc-leader-lo));
  box-shadow: inset 0 0 0 1px rgb(16 27 22 / .14), 0 10px 18px rgb(0 0 0 / .5); }
.kp-pop.is-xc .kp-neck { background: var(--xc-leader-lo); box-shadow: 0 4px 10px rgb(0 0 0 / .4); }

/* ===== prototype-src/hold-confirm.css ===== */
/* TRIPTIC hold-confirm (preview flag "hold-confirm", OFF by default; prototype-src/hold-confirm.js says what it does). Gated by
   html.pv-hold-confirm / html.pv-all: with the flag off nothing here applies. The fill takes the button's own ink (currentColor),
   so a red word on glass fills red and a solid red button darkens: one rule for every destructive button. */
html:is(.pv-hold-confirm, .pv-all) button.hc-armed { position: relative; isolation: isolate; overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html:is(.pv-hold-confirm, .pv-all) .hc-fill { position: absolute; inset: 0; z-index: -1; display: block; border-radius: inherit; pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, currentColor 62%, transparent) 0 3px, color-mix(in srgb, currentColor 22%, transparent) 3px 100%);
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
/* Reduce Motion: the fill does not travel; it brightens in place over the hold */
html:is(.pv-hold-confirm, .pv-all):is(.reduce-motion) .hc-fill, html:is(.pv-hold-confirm, .pv-all) #device.manual-reduced-motion .hc-fill { transform: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { html:is(.pv-hold-confirm, .pv-all) .hc-fill { transform: none; opacity: 0; } }
.hc-hints { display: none; }

/* ===== prototype-src/last-ten.css ===== */
/* TRIPTIC last-ten (preview flag "last-ten", OFF by default; prototype-src/last-ten.js says what it does). Gated by
   html.pv-last-ten / html.pv-all. A countdown's final ten seconds: its digits in the app's gold. The colour changes at once,
   under the beat's fade (last-ten.js animates opacity and transform only); the digits keep their tabular figures, so nothing
   moves sideways as they count. */
html:is(.pv-last-ten, .pv-all) .lt-final { color: var(--c-plus-gold) !important; -webkit-text-fill-color: var(--c-plus-gold) !important; }
/* the countdowns whose figures were proportional are tabular all along with the flag on (never switched at the ten-second mark) */
html:is(.pv-last-ten, .pv-all) :is(.dt-fri-count, .ds-tn-part, .cg-clock, .gs-clock, .ds-reel-line, .gs-res-next) { font-variant-numeric: tabular-nums; }

/* ===== prototype-src/motion-system.css ===== */
/* TRIPTIC motion system
   Final style layer. One set of duration and spring tokens, performance
   hygiene for the reveal and Film surfaces, deck physics visuals, the
   reveal-turn choreography and the safe-area fixes for the settled reveal.
   Everything here is transform/opacity driven; every new motion has an
   explicit Reduce Motion path at the end of the file. The paired runtime is
   reveal-physics.js. */

/* -------------------------------------------------------------------------
   1. TOKENS: ONE MOTION LANGUAGE (owner, 8 October 2026; hub/docs/MOTION-2026-10-09.md)
   Every layer moves on these and nothing else; tests/motion-language.test.mjs
   fails on any other duration or curve in a transition or animation.

     --motion-fast    200ms   small things: a label, a chip, a fade
     --motion-normal  280ms   a control, a card, a row
     --motion-slow    350ms   a page, a sheet, a large surface
     --motion-curve           the one curve, for everything a finger is not holding
     --motion-spring          the one spring, for everything a finger lets go of
                              (stiffness 520, damping 36, mass 1: zeta .79, a small 1.8% overshoot
                              that settles; drawn over --motion-slow; reveal-physics.js SPRING is the same)
     SPEED (owner, 17 October 2026; hub/docs/DESIGN-2026-10-17.md): every everyday move is 200 to 350 ms
     (it was 180 / 320 / 560); only the ceremonies are longer (the Friday reveal, the cinema doors, the card
     reveal, the shelf leap: tests/design-speed.test.mjs lists them).

   Named exceptions (each one has a single job):
     --motion-press      90ms   touch-down only; the release is the spring
     --motion-ceremony  1200ms  a once-only celebration (a seal develops, a card unveils)
     --motion-breathe           the curve of a living thing's loop (see the living map)
     --motion-drift             the welcome poster walls' single slow drift (24 s, 40 s)
     the reveal ceremony        --mo-turn ... --mo-reveal-dim below and --mo-spring-*:
                                the reveal keeps its own beat (showpiece, signature-reveal,
                                duo-triptych, recommendation-waiting)

   Reduce Motion keeps working as before (each layer's own reduced path); on top
   of that the spring becomes the curve, so nothing overshoots.
   ---------------------------------------------------------------------- */
:root {
  --motion-fast: 200ms;
  --motion-normal: 280ms;
  --motion-slow: 350ms;
  --motion-curve: cubic-bezier(.2, .8, .2, 1);
  --motion-spring: linear(0,0.018,0.064,0.13,0.208,0.291,0.377,0.46,0.539,0.613,0.679,0.739,0.792,0.837,0.876,0.908,0.935,0.957,0.974,0.988,0.998,1.005,1.011,1.014,1.016,1.017,1.018,1.017,1.016,1.015,1.013,1.012,1.01,1.009,1.008,1.006,1.005,1.004,1.003,1.003,1);

  --motion-press: 90ms;
  --motion-ceremony: 1200ms;
  --motion-breathe: cubic-bezier(.45, 0, .55, 1);
  --motion-drift: cubic-bezier(.25, .55, .3, 1);   /* the welcome poster walls' one slow 24-40s drift */

  /* The reveal ceremony (named exception). The turn, land, hold, glide and
     settle run at the original beat x --mo-reveal-scale (1.25; reveal-physics.js
     writes the same number). */
  --mo-reveal-scale: 1.25;
  --mo-turn: calc(560ms * var(--mo-reveal-scale));          /* 700 */
  --mo-turn-final: calc(640ms * var(--mo-reveal-scale));    /* 800 */
  --mo-glide: calc(560ms * var(--mo-reveal-scale));         /* 700: glide, rise, settle */
  --mo-hold: calc(200ms * var(--mo-reveal-scale));          /* 250 */
  --mo-lift: calc(320ms * var(--mo-reveal-scale));          /* 400 */
  --mo-reveal-lift: calc(720ms * var(--mo-reveal-scale));   /* 900: the card rises while it turns */
  --mo-reveal-dim: calc(480ms * var(--mo-reveal-scale));    /* 600 */
  --mo-spring-snappy: linear(0,0.03,0.106,0.21,0.327,0.446,0.56,0.665,0.756,0.833,0.896,0.946,0.983,1.01,1.029,1.039,1.045,1.046,1.044,1.04,1.035,1.03,1.025,1.019,1.015,1.011,1.007,1.004,1.002,1.001,0.999,0.999,0.998,0.998,0.998,0.998,0.998,0.998,0.999,0.999,0.999,0.999,1,1,1);
  --mo-spring-smooth: linear(0,0.024,0.083,0.161,0.248,0.335,0.419,0.498,0.569,0.633,0.689,0.737,0.78,0.816,0.846,0.872,0.894,0.912,0.928,0.941,0.951,0.96,0.967,0.973,0.978,0.982,0.985,0.988,0.99,0.992,0.994,0.995,0.996,0.997,0.997,0.998,0.998,0.999,0.999,0.999,0.999,0.999,1,1,1);
  --mo-spring-gentle: linear(0,0.017,0.061,0.123,0.195,0.273,0.352,0.43,0.504,0.572,0.635,0.692,0.743,0.787,0.826,0.859,0.887,0.911,0.931,0.948,0.961,0.972,0.981,0.987,0.993,0.997,1,1.002,1.003,1.004,1.005,1.005,1.005,1.005,1.005,1.004,1.004,1.003,1.003,1.003,1.002,1.002,1.002,1.001,1);

  /* Older names, kept so the legacy public/assets layers and any late reader
     land on the same language. New code uses the --motion-* names. */
  --mo-instant: var(--motion-press);
  --mo-quick: var(--motion-fast);
  --mo-standard: var(--motion-normal);
  --mo-emphasised: var(--motion-slow);
  --mo-cinematic: var(--motion-slow);
  --mo-ease-out: var(--motion-curve);
  --mo-ease-inout: cubic-bezier(.65, 0, .35, 1);   /* the reveal ceremony's in-out (showpiece --sp-inout) */
  --mo-exit: var(--motion-curve);
  --trip-ease: var(--motion-curve);
  --motion-instant: var(--motion-press);
  --motion-standard: var(--motion-normal);
  --motion-spatial: var(--motion-slow);
  --ease-focus: var(--motion-curve);
  --ease-press: var(--motion-curve);
  --ease-interface: var(--motion-curve);
  --ease-spatial: var(--motion-curve);
  --ease-emphasis: var(--motion-curve);
  --critical-ease: var(--motion-curve);
  --critical-spring: var(--motion-spring);

  /* Bottom clearance that also works where env() reports 0 (browsers, the
     review frame): the home indicator is 4px tall at bottom 8px. */
  --mo-safe-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
  --mo-blur-cap: 24px;
}
/* Reduce Motion: the one spring becomes the one curve (no overshoot anywhere). */
@media (prefers-reduced-motion: reduce) { :root { --motion-spring: var(--motion-curve); } }
.reduce-motion, .device.manual-reduced-motion { --motion-spring: var(--motion-curve); }

/* -------------------------------------------------------------------------
   2. PERFORMANCE HYGIENE
   ---------------------------------------------------------------------- */

/* 2a. Nothing that is covered by the reveal or Film may keep animating.
   The Discover screen below (ambient drift, mood atmosphere, Friday ribbon
   buzz / lure / sheen, pulse dot) previously kept 6 to 8 infinite loops and
   two full-screen blur layers alive under the ceremony. Paused, not removed,
   so the screen resumes exactly where it was when the person comes back. */
.trip-critical-host.critical-engaged,
.trip-critical-host.critical-engaged::before,
.trip-critical-host.critical-engaged::after,
.trip-critical-host.critical-engaged > :not(.trip-critical-layer, .critical-film-layer, .critical-poster-flight),
.trip-critical-host.critical-engaged > :not(.trip-critical-layer, .critical-film-layer, .critical-poster-flight)::before,
.trip-critical-host.critical-engaged > :not(.trip-critical-layer, .critical-film-layer, .critical-poster-flight)::after,
.trip-critical-host.critical-engaged > :not(.trip-critical-layer, .critical-film-layer, .critical-poster-flight) *,
.trip-critical-host.critical-engaged > :not(.trip-critical-layer, .critical-film-layer, .critical-poster-flight) *::before,
.trip-critical-host.critical-engaged > :not(.trip-critical-layer, .critical-film-layer, .critical-poster-flight) *::after {
  animation-play-state: paused !important;
}

/* 2b. Once the deck is settled the ceremony has finished: its own ambient
   loops (conic atmosphere drift and friends) stop as well. */
.trip-critical-layer.trip-phase-settled .critical-atmosphere,
.trip-critical-layer.trip-phase-settled .critical-atmosphere::before,
.trip-critical-layer.trip-phase-settled .critical-atmosphere::after,
.trip-critical-layer.critical-behind-film,
.trip-critical-layer.critical-behind-film::before,
.trip-critical-layer.critical-behind-film::after,
.trip-critical-layer.critical-behind-film *,
.trip-critical-layer.critical-behind-film *::before,
.trip-critical-layer.critical-behind-film *::after {
  animation-play-state: paused !important;
}

/* 2c. Blur budget: a decorative gradient does not need a blur pass, and no
   reveal or Film surface may exceed the cap. */
.critical-atmosphere::before {
  filter: none;
}
.critical-film-layer.film-v5::after {
  filter: none;
}
.trip-critical-layer .critical-brand-aura { filter: blur(min(12px, var(--mo-blur-cap))); }
.persistent-glass-nav {
  backdrop-filter: blur(var(--mo-blur-cap)) saturate(150%) !important;
  -webkit-backdrop-filter: blur(var(--mo-blur-cap)) saturate(150%) !important;
}

/* Film: one frosted layer per surface. The dock keeps the only large frost;
   the content panels sit on a near-opaque tint (the backdrop behind them is
   a smooth poster wash, so their extra blur passes were invisible cost). */
.critical-film-layer .film-artwork-atmosphere::before {
  filter: blur(var(--mo-blur-cap)) saturate(.82);
}
.critical-film-layer .film-content::before {
  filter: none;
}
.critical-film-layer :is(.why-panel.content-material, .watch-options.media-watch-options, .film-information-source.content-material, .content-material) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: rgba(17, 15, 27, .9);
}
.critical-film-layer .critical-film-dock {
  backdrop-filter: blur(var(--mo-blur-cap)) saturate(140%) !important;
  -webkit-backdrop-filter: blur(var(--mo-blur-cap)) saturate(140%) !important;
}
.critical-film-layer .critical-film-dock > button {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The reveal layer sits under Film while it is open. Dimming it with a
   full-screen filter cost a whole filter pass per frame; a plain opacity
   dim reads the same over the dark host, then the layer is hidden entirely
   once Film has fully arrived. */
.trip-critical-layer.critical-behind-film {
  filter: none !important;
  opacity: .42;
  visibility: hidden;
  transition: opacity var(--motion-slow) var(--motion-curve), transform var(--motion-slow) var(--motion-spring), visibility 0s linear .82s !important;
}

/* Closing Film flies the poster back onto the deck, so the deck must be
   visible again from the first frame of the exit. */
.trip-critical-host:has(> .critical-film-layer.is-leaving) > .trip-critical-layer.critical-behind-film {
  visibility: visible;
  opacity: .86;
  transition: opacity var(--motion-slow) var(--motion-curve), transform var(--motion-slow) var(--motion-spring), visibility 0s !important;
}

/* will-change only while something is really moving. */
.trip-critical-layer.trip-phase-settled .critical-card[data-slot],
.trip-critical-layer.trip-phase-settled .critical-card:not([data-slot]) {
  will-change: auto;
}
.trip-critical-layer.trip-phase-settled.mo-deck-moving .critical-card {
  will-change: transform, opacity;
}

/* 2d. Layout-property animation on the reveal converted to transform.
   The stage no longer transitions `top` (the runtime FLIPs it with the
   `translate` property) and the sealed-card shutters scale instead of
   changing height. */
.critical-card-stage {
  transition-property: transform, opacity !important;
}
.card100-scene .card100-secret i:nth-child(1),
.card100-scene .card100-secret i:nth-child(2),
.card100-scene .card100-secret i:nth-child(3) {
  height: 60px;
  transform-origin: 50% 100%;
  transition: transform var(--motion-slow) var(--motion-spring), background-color var(--motion-normal) var(--motion-curve), border-color var(--motion-normal) var(--motion-curve);
}
.card100-scene .card100-secret i:nth-child(1) { transform: scaleY(.9); }
.card100-scene .card100-secret i:nth-child(2) { transform: scaleY(.7333); }
.card100-scene .card100-secret i:nth-child(3) { transform: scaleY(.5667); }
.card100-scene .card100-energy-locked .card100-secret i:nth-child(n) { transform: scaleY(1); }

/* -------------------------------------------------------------------------
   3. SETTLED REVEAL: SAFE AREA, ACTION ROW, TAB BAR MATERIAL
   ---------------------------------------------------------------------- */

/* The Share / Save / Refine row used to end exactly on the bottom edge and
   collided with the home indicator. It now rides the bottom of the scroll
   surface on a soft scrim and always clears the safe area. */
.trip-critical-layer.trip-phase-settled .critical-result-toolbar {
  position: sticky;
  bottom: calc(var(--mo-safe-bottom) + 4px);
  z-index: 12;
  isolation: isolate;
  min-height: 60px !important;
}
.trip-critical-layer.trip-phase-settled .critical-result-toolbar::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -20px;
  right: -20px;
  top: -26px;
  bottom: calc(-1 * (var(--mo-safe-bottom) + 4px));
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 5, 10, 0) 0%, rgba(5, 5, 10, .86) 46%, rgba(5, 5, 10, .96) 100%);
}
/* One sticky dock: the primary CTA rides directly above the toolbar (60px
   tall, 4px above the safe area) with an 8px gap, so the two can never
   overlap at any inset. The toolbar scrim reaches up behind the CTA. */
.trip-critical-layer.trip-phase-settled .critical-film-cta {
  position: sticky !important;
  bottom: calc(var(--mo-safe-bottom) + 4px + 60px + 8px);
  z-index: 13;
}
.trip-critical-layer.trip-phase-settled .critical-result-toolbar::after {
  top: -92px;
}
.trip-critical-layer.trip-phase-settled .critical-results {
  padding-bottom: calc(var(--mo-safe-bottom) + 8px) !important;
}
.trip-critical-layer.critical-compact.trip-phase-settled .critical-results {
  padding-bottom: calc(var(--mo-safe-bottom) + 8px) !important;
}

/* Tab bar: text scrolling underneath used to show through the glass. Denser
   material, a capped blur and a short gradient scrim above the bar. Paint
   containment is relaxed so the scrim shadow can leave the bar's box. */
.device > .persistent-glass-nav {
  contain: layout;
  background: linear-gradient(180deg, rgba(27, 25, 39, .93), rgba(11, 10, 17, .96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 -18px 26px -8px rgba(5, 5, 10, .9),
    0 18px 44px rgba(0, 0, 0, .5) !important;
}

/* -------------------------------------------------------------------------
   4. DECK PHYSICS VISUALS
   Cards in the settled deck carry no filter and no per-frame custom property:
   the physics loop writes transform, opacity and z-index on the three cards
   (and one progress value on the film strip), nothing else. Shadow and glow
   are constant pseudo-element layers; a side card's dimming is its opacity.
   ---------------------------------------------------------------------- */
.trip-critical-layer.mo-deck.trip-phase-settled .critical-card[data-slot] {
  filter: none !important;
  /* The drop shadow is a constant on the card itself. */
  box-shadow: 0 22px 34px rgba(0, 0, 0, .56);
}
.trip-critical-layer.mo-deck.trip-phase-settled .critical-card[data-slot]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 24px;
  pointer-events: none;
  box-shadow: 0 0 26px rgba(var(--search-blue, 104, 201, 255), .18);
  opacity: .66;
}
/* Depth veil and shadow layer are owned by motion-surfaces.css (front::before
   = dim, card::after = shadow); at rest and during physics both are constant,
   so the new centre card is identical in the frame the spring lands. */
#device .trip-critical-layer.mo-deck.trip-phase-settled .critical-card[data-slot] .critical-card-front::before {
  opacity: 0;
  transition: none;
}
#device .trip-critical-layer.mo-deck.trip-phase-settled .critical-card[data-slot]::after {
  opacity: 1;
  transition: none;
}

/* Keyboard rings only: after a touch or pointer move focus follows the new
   centre card silently. Arrow keys / Tab set data-mo-input="keyboard". */
#device .trip-critical-layer[data-mo-input="pointer"] .critical-card:focus-visible {
  outline: none !important;
}

/* Touch tilt: the poster face follows the finger a few degrees. */
.trip-critical-layer .critical-card-inner {
  will-change: auto;
}
.trip-critical-layer .critical-card.mo-tilting .critical-card-inner {
  will-change: transform, rotate;
}

/* Reveal all */
.mo-reveal-all {
  position: absolute;
  z-index: 30;
  /* Centred by layout, never by transform: press rules from older layers
     replace the whole transform on pointerdown and would shift the button. */
  left: 0;
  right: 0;
  margin-inline: auto;
  width: max-content;
  bottom: calc(var(--mo-safe-bottom) + 34px);
  min-width: 132px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid rgba(160, 208, 255, .28);
  border-radius: 999px;
  color: #eaf4ff;
  font: 600 14px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  letter-spacing: .01em;
  background: linear-gradient(180deg, rgba(38, 42, 74, .82), rgba(16, 16, 32, .9));
  box-shadow: inset 0 1px rgba(255, 255, 255, .14), 0 10px 28px rgba(0, 0, 0, .5);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 10px, 0) scale(.96);
  transition: opacity var(--mo-lift) var(--motion-curve), transform var(--mo-reveal-dim) var(--motion-spring), visibility 0s linear var(--mo-lift);
  -webkit-tap-highlight-color: transparent;
}
.mo-reveal-all:focus-visible {
  outline: 2px solid #9fdcff;
  outline-offset: 3px;
}
.mo-reveal-all:active { transform: scale(.96); }
.trip-critical-layer.trip-phase-ready:is([data-revealed="1"], [data-revealed="2"]):not(.critical-reveal-in-flight):not(.critical-deck-advancing) .mo-reveal-all {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  /* Not hit-testable (visibility) until it has started to fade in. */
  transition-delay: calc(var(--mo-quick) * var(--mo-reveal-scale)), calc(var(--mo-quick) * var(--mo-reveal-scale)), calc(var(--mo-quick) * var(--mo-reveal-scale));
}

/* -------------------------------------------------------------------------
   5. REVEAL TURN: LIFT, PROJECTOR BEAM, AMBIENT TINT
   ---------------------------------------------------------------------- */

/* The card rises on a gentle spring while it turns. */
.card100-scene.trip-phase-revealing .critical-card.is-opening {
  transition-property: transform, opacity !important;
  transition-duration: var(--mo-reveal-lift), var(--motion-normal) !important;
  transition-timing-function: var(--motion-spring), var(--motion-curve) !important;
  transition-delay: 0s !important;
}

/* Projector-beam glint: one diagonal band of light across the poster. */
.mo-beam-clip {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  transform: translateZ(1px);
}
.mo-beam {
  position: absolute;
  top: -8%;
  bottom: -8%;
  left: -55%;
  width: 46%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-40%, 0, 0) skewX(-16deg);
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(168, 220, 255, .10) 30%,
    rgba(255, 255, 255, .58) 50%,
    rgba(255, 196, 255, .16) 70%,
    rgba(255, 255, 255, 0) 100%);
}

/* Ambient tint: two stacked washes cross-fade so the colour itself is never
   animated, only opacity. */
.mo-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  /* Only the wash that is on (or fading out) is composited: once faded, the
     hidden one drops its layer. */
  visibility: hidden;
  background:
    radial-gradient(ellipse 78% 46% at 50% 40%, rgba(var(--mo-tint-rgb, 141, 102, 255), .30), transparent 72%),
    radial-gradient(ellipse 90% 40% at 50% 104%, rgba(var(--mo-tint-rgb, 141, 102, 255), .18), transparent 76%);
  transition: opacity var(--motion-slow) var(--motion-curve), visibility 0s linear var(--mo-cinematic);
}
.mo-tint.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }

/* -------------------------------------------------------------------------
   6. HOLD-TO-PREVIEW
   ---------------------------------------------------------------------- */
.p20-peek-scrim {
  backdrop-filter: blur(var(--mo-blur-cap));
  -webkit-backdrop-filter: blur(var(--mo-blur-cap));
  transition: opacity var(--motion-normal) var(--motion-curve);
}
/* The card keeps .open while it leaves (so its resting transform does not
   jump); only the scrim fades, over the same 320ms as the card's travel. */
.p20-peek-scrim.is-leaving {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-normal) var(--motion-curve);
}
/* Entering: the scrim itself is opaque from the first frame so the preview
   (opaque, on its card's rect) is what paints in the frame the source is
   hidden. Only the dimming wash fades, on its own layer. Leaving is the
   unchanged is-leaving path above. */
.p20-peek-scrim.mo-peek-driven:not(.is-leaving) {
  opacity: 1;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
}
.p20-peek-scrim.mo-peek-driven:not(.is-leaving)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(2, 2, 7, .72);
  backdrop-filter: blur(var(--mo-blur-cap));
  -webkit-backdrop-filter: blur(var(--mo-blur-cap));
  opacity: 0;
  transition: opacity var(--motion-normal) var(--motion-curve);
}
.p20-peek-scrim.mo-peek-driven.open:not(.is-leaving)::before { opacity: 1; }
.device.manual-solid .p20-peek-scrim.mo-peek-driven:not(.is-leaving)::before { backdrop-filter: none; -webkit-backdrop-filter: none; background: #050509; }
@media (prefers-reduced-transparency: reduce) {
  .p20-peek-scrim.mo-peek-driven:not(.is-leaving)::before { backdrop-filter: none; -webkit-backdrop-filter: none; background: #050509; }
}

/* The runtime drives the card's transform itself (spring). */
.p20-peek-scrim.mo-peek-driven .p20-peek-card {
  transition: none;
  will-change: transform, opacity;
}

/* -------------------------------------------------------------------------
   7. REDUCE MOTION / REDUCE TRANSPARENCY
   Crossfade only: no beam, no lift, no tilt, no travelling tint, no spring.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mo-beam-clip { display: none !important; }
  .mo-tint { transition-duration: var(--motion-fast); }
  .mo-reveal-all,
  .trip-critical-layer.trip-phase-ready:is([data-revealed="1"], [data-revealed="2"]) .mo-reveal-all {
    transform: none;
    transition-property: opacity, visibility;
    transition-duration: var(--motion-fast);
    transition-delay: 0s;
  }
  .p20-peek-scrim.is-leaving { transition-duration: var(--motion-fast); }
  .card100-scene.trip-phase-revealing .critical-card.is-opening {
    transition-duration: var(--motion-fast) !important;
    transition-timing-function: var(--motion-curve) !important;
  }
  .card100-scene .card100-secret i:nth-child(n) { transition: none; }
}
.reduce-motion .mo-beam-clip,
.device.manual-reduced-motion .mo-beam-clip { display: none !important; }
.reduce-motion .mo-tint,
.device.manual-reduced-motion .mo-tint { transition-duration: var(--motion-fast); }
.reduce-motion .mo-reveal-all,
.device.manual-reduced-motion .mo-reveal-all,
.reduce-motion .trip-critical-layer.trip-phase-ready:is([data-revealed="1"], [data-revealed="2"]) .mo-reveal-all,
.device.manual-reduced-motion .trip-critical-layer.trip-phase-ready:is([data-revealed="1"], [data-revealed="2"]) .mo-reveal-all {
  transform: none;
  transition-property: opacity, visibility;
  transition-duration: var(--motion-fast);
  transition-delay: 0s;
}
.reduce-motion .p20-peek-scrim.is-leaving,
.device.manual-reduced-motion .p20-peek-scrim.is-leaving { transition-duration: var(--motion-fast); }
.reduce-motion .card100-scene.trip-phase-revealing .critical-card.is-opening,
.device.manual-reduced-motion .card100-scene.trip-phase-revealing .critical-card.is-opening {
  transition-duration: var(--motion-fast) !important;
  transition-timing-function: var(--motion-curve) !important;
}
.reduce-motion .card100-scene .card100-secret i:nth-child(n),
.device.manual-reduced-motion .card100-scene .card100-secret i:nth-child(n) { transition: none; }

.device.manual-solid .mo-tint { display: none; }
.device.manual-solid .persistent-glass-nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #14121d !important;
}
.device.manual-solid .p20-peek-scrim { backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) {
  .mo-tint { display: none; }
  .p20-peek-scrim { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ===== prototype-src/motion-surfaces.css ===== */
/* Motion surfaces — final layer (Chunk 1 B: performance).
   Loaded last (after motion-system.css) so it can retire expensive
   properties from earlier layers without editing them.

   1. Film page: exactly ONE frosted layer (the action dock, blur <= 24px).
      Everything else that used to blur is a lit, tinted, opaque-enough
      material with a hairline border, so text contrast never depends on
      what happens to be behind it.
   2. Reveal deck and engine: compositor-only motion. Every card shares one
      layout position; slot offsets travel on `translate`. Anything that used
      to animate `filter` now animates the opacity of a pre-painted overlay.

   Reduce-transparency (system query or .device.manual-solid) stays solid and
   reduced motion collapses to opacity-only changes. */

:root{
  --surf-frost-blur:24px;
  --surf-glass-fill:rgba(20,18,30,.78);
  --surf-glass-line:rgba(255,255,255,.14);
  --surf-glass-lit:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 .5px rgba(255,255,255,.04);
  --surf-panel-fill:linear-gradient(145deg,rgba(24,22,33,.95),rgba(10,10,15,.97));
  --surf-solid:#15131f;
  --surf-slot-step:33.333cqw;
  --surf-ready-top:322px;
}

/* ------------------------------------------------------------------ */
/* 1. Film page materials                                              */
/* ------------------------------------------------------------------ */

/* The dock is the single frosted surface. Selector out-specifies the 26px
   `!important` declaration in triptic-critical-experience.css. */
.critical-film-layer.film-v5 .decision-actions.critical-film-dock{
  -webkit-backdrop-filter:blur(var(--surf-frost-blur)) saturate(145%)!important;
  backdrop-filter:blur(var(--surf-frost-blur)) saturate(145%)!important;
}
/* Buttons inside the dock must not stack a second blur on the first. */
.critical-film-layer.film-v5 .critical-film-dock button{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Back and share controls, trailer play: no blur, deliberate tinted glass. */
.critical-film-layer .circle-control,
.critical-film-layer .media-trailer-play{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:var(--surf-glass-fill)!important;
  border:1px solid var(--surf-glass-line)!important;
  box-shadow:var(--surf-glass-lit),0 6px 18px rgba(0,0,0,.36)!important;
  color:#fff;
}
.critical-film-layer .circle-control{min-width:44px;min-height:44px}
.critical-film-layer .media-trailer-play{min-height:44px}

/* Content panels lower on the page were frosted too (20-26px). They sit on
   the page's own near-black, so an opaque lit fill reads identically and
   costs nothing. */
.critical-film-layer.film-v5 :is(.why-panel,.media-watch-options,.film-information-source){
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:var(--surf-panel-fill)!important;
}

/* Reduce transparency: manual switch and system preference stay fully solid. */
.device.manual-solid .critical-film-layer.film-v5 .decision-actions.critical-film-dock,
.device.manual-solid .critical-film-layer .circle-control,
.device.manual-solid .critical-film-layer .media-trailer-play,
.device.manual-solid .critical-film-layer.film-v5 :is(.why-panel,.media-watch-options,.film-information-source){
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:var(--surf-solid)!important;
  border-color:rgba(255,255,255,.22)!important;
}
@media (prefers-reduced-transparency:reduce){
  .critical-film-layer.film-v5 .decision-actions.critical-film-dock,
  .critical-film-layer .circle-control,
  .critical-film-layer .media-trailer-play,
  .critical-film-layer.film-v5 :is(.why-panel,.media-watch-options,.film-information-source){
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    background:var(--surf-solid)!important;
    border-color:rgba(255,255,255,.22)!important;
  }
}

/* The dimmed deck behind the Film page is owned by motion-system.css
   (opacity dim + delayed visibility:hidden). Do not restate its transition
   here: an #device-scoped !important copy drops the visibility delay and the
   deck vanishes before Film is opaque. */

/* ------------------------------------------------------------------ */
/* 2. Reveal deck: flat stage, slots on `translate`, 3D only in a card  */
/* ------------------------------------------------------------------ */

/* D9: nothing between the device and a card keeps a 3D context. Depth in the
   deck is scale + z-index; perspective lives on each card (for its own turn)
   or inside a card's transform list. Flattening is scoped to the ritual so the
   route transitions elsewhere keep their own perspective. */
#device.critical-journey-active{
  transform-style:flat!important;
  perspective:none!important;
}
#device .trip-critical-layer .critical-engine-aperture{transform-style:flat!important}

/* The stage is a size container so slot offsets are exact fractions of its
   own width (cqw), not of a device guess. It is flat, never clips (Safari has
   no overflow-clip-margin, so the old clip cut the lifted card at a straight
   line) and never transitions: the settle FLIP and the glides own its motion. */
#device .trip-critical-layer .critical-card-stage{
  container-type:inline-size;
  /* One layout `top` for every phase; the difference to the ready position is
     a compositor `translate` that settles to 0. */
  top:var(--search-shelf-y,249px)!important;
  translate:0 calc(var(--surf-ready-top) - var(--search-shelf-y,249px));
  transform-style:flat!important;
  perspective:none!important;
  overflow:visible!important;
  overflow-clip-margin:0!important;
  transition:none!important;
}
#device .trip-critical-layer.trip-phase-settled .critical-card-stage{translate:0 0}
@media(max-height:760px){
  #device .trip-critical-layer{--surf-ready-top:278px}
}

/* Not settled: same `left` for all three cards. Slots 0/-1/+1 are steps of a
   third of the stage. `data-mo-arr` (kept by reveal-physics) owns the
   arrangement so a landed card can hold still before the glide; without it the
   old data-revealed mapping applies. Slot motion is WAAPI (reveal-physics), so
   `translate` has no CSS transition. */
#device .trip-critical-layer:not(.trip-phase-settled) .critical-card{
  --surf-slot:0;
  left:50%!important;
  right:auto!important;
  translate:calc(-50% + var(--surf-slot) * var(--surf-slot-step)) 0;
  /* rest pose of a card that is neither lifted nor turning */
  transform:translate3d(0,0,0) scale(.92)!important;
  /* each card is its own 3D context (for the inner turn); it is flat itself */
  transform-style:flat!important;
  perspective:1100px;
  z-index:1;
  filter:none!important;
  will-change:auto;
  transition:transform var(--mo-lift) var(--motion-spring),opacity var(--motion-fast) var(--motion-curve)!important;
}
#device .trip-critical-layer:not(.trip-phase-settled) .critical-card.is-active{
  z-index:4;
  transform:translate3d(0,-12px,0) scale(1.06)!important;
}
#device .trip-critical-layer:not(.trip-phase-settled) .critical-card.is-final.is-active{
  transform:translate3d(0,-14px,0) scale(1.09)!important;
}
#device .trip-critical-layer:not(.trip-phase-settled) .critical-card.is-opening{
  z-index:12!important;
  transform:translate3d(0,-18px,0) scale(1.2)!important;
}
#device .trip-critical-layer.critical-final-reveal:not(.trip-phase-settled) .critical-card.is-opening,
/* the landed final card keeps its lift through the 200ms hold; the settle
   FLIPs from exactly this pose */
#device .trip-critical-layer.critical-final-reveal:not(.trip-phase-settled) .critical-card.rank-1.is-revealed{
  z-index:12!important;
  transform:translate3d(0,-24px,0) scale(1.3)!important;
}
/* A turning card is never translucent or filtered. */
#device .trip-critical-layer .critical-card:is(.is-opening,.is-flipping){
  opacity:1!important;
  filter:none!important;
}
/* First lift: R+700, after the cards have risen into their slots (700). */
#device .trip-critical-layer[data-mo-arr="0"].trip-phase-ready .critical-card.is-active{
  transition:transform var(--mo-lift) var(--motion-spring) var(--mo-glide),opacity var(--motion-fast) var(--motion-curve)!important;
}
#device .trip-critical-layer[data-mo-arr="0"].trip-phase-ready .critical-card.is-active .critical-card-energy{
  transition:opacity var(--motion-fast) var(--motion-curve) var(--mo-glide)!important;
}
/* A revealed card that is not the current one dims by opacity (a dim overlay
   would be a second animated layer) once its hold is over. */
#device .trip-critical-layer:not(.trip-phase-settled) .critical-card.is-revealed:not(.is-opening):not(.rank-1){
  opacity:.74;
  transition:transform var(--mo-lift) var(--motion-spring),opacity var(--mo-reveal-dim) var(--motion-curve) var(--mo-hold)!important;
}
/* The turn: inner flips on the smooth spring (700; 800 for the final). */
#device .trip-critical-layer .critical-card-inner{
  transition:transform var(--mo-turn) var(--motion-spring)!important;
}
#device .trip-critical-layer.critical-final-reveal .critical-card-inner{
  transition-duration:var(--mo-turn-final)!important;
}

#device .trip-critical-layer:not(.trip-phase-settled) .critical-card.rank-3{--surf-slot:0}
#device .trip-critical-layer:not(.trip-phase-settled) .critical-card.rank-2{--surf-slot:-1}
#device .trip-critical-layer:not(.trip-phase-settled) .critical-card.rank-1{--surf-slot:1}
#device .trip-critical-layer:is([data-mo-arr="1"],:not([data-mo-arr])[data-revealed="1"]):not(.trip-phase-settled) .critical-card.rank-3{--surf-slot:-1}
#device .trip-critical-layer:is([data-mo-arr="1"],:not([data-mo-arr])[data-revealed="1"]):not(.trip-phase-settled) .critical-card.rank-2{--surf-slot:0}
#device .trip-critical-layer:is([data-mo-arr="1"],:not([data-mo-arr])[data-revealed="1"]):not(.trip-phase-settled) .critical-card.rank-1{--surf-slot:1}
#device .trip-critical-layer:is([data-mo-arr="2"],[data-mo-arr="3"],:not([data-mo-arr])[data-revealed="2"],:not([data-mo-arr])[data-revealed="3"]):not(.trip-phase-settled) .critical-card.rank-3{--surf-slot:-1}
#device .trip-critical-layer:is([data-mo-arr="2"],[data-mo-arr="3"],:not([data-mo-arr])[data-revealed="2"],:not([data-mo-arr])[data-revealed="3"]):not(.trip-phase-settled) .critical-card.rank-1{--surf-slot:0}
#device .trip-critical-layer:is([data-mo-arr="2"],[data-mo-arr="3"],:not([data-mo-arr])[data-revealed="2"],:not([data-mo-arr])[data-revealed="3"]):not(.trip-phase-settled) .critical-card.rank-2{--surf-slot:1}

/* Engine exit: R+0 to R+480 (scale .82 to .5) while the cards rise out of it.
   Its children are already hidden by the ready rules, so this is the stage's
   own glow shrinking away. */
#device .trip-critical-layer:is(.trip-phase-ready,.trip-phase-revealing) .critical-engine-stage{
  transform:translateX(-50%) translateY(-38px) scale(.5);
  transition:transform var(--motion-slow) var(--motion-curve),opacity var(--motion-slow) linear,visibility 0s linear var(--mo-emphasised);
}

/* Settled: geometry is this file's (flat, no z). The deck physics writes the
   same transform list inline while a finger or spring moves the cards, and
   the settle FLIP (WAAPI) carries the ceremony into these poses. Cards carry
   their depth in scale and opacity (a side card's dim is its opacity). */
#device .trip-critical-layer.trip-phase-settled .critical-card{
  filter:none!important;
  translate:none;
  will-change:transform,opacity;
  transform-style:flat!important;
  perspective:1100px;
  transition:opacity var(--motion-normal) var(--motion-curve)!important;
}
#device .trip-critical-layer.trip-phase-settled .critical-card[data-slot="center"],
#device .trip-critical-layer.trip-phase-settled .critical-card.rank-1:not([data-slot]){
  z-index:8!important;
  opacity:1!important;
  transform:translate3d(calc(-50% + var(--critical-drag-progress,0) * 72px),0,0) perspective(900px) rotateY(0deg) scale(1.05)!important;
}
#device .trip-critical-layer.trip-phase-settled .critical-card[data-slot="left"],
#device .trip-critical-layer.trip-phase-settled .critical-card.rank-3:not([data-slot]){
  z-index:3!important;
  opacity:.74!important;
  transform:translate3d(calc(-126% + var(--critical-drag-progress,0) * 72px),32px,0) perspective(900px) rotateY(8deg) scale(.76)!important;
}
#device .trip-critical-layer.trip-phase-settled .critical-card[data-slot="right"],
#device .trip-critical-layer.trip-phase-settled .critical-card.rank-2:not([data-slot]){
  z-index:3!important;
  opacity:.74!important;
  transform:translate3d(calc(26% + var(--critical-drag-progress,0) * 72px),32px,0) perspective(900px) rotateY(-8deg) scale(.76)!important;
}
#device .trip-critical-layer.trip-phase-settled .critical-card[data-slot="left"]:focus-visible,#device .trip-critical-layer.trip-phase-settled .critical-card[data-slot="right"]:focus-visible{
  opacity:.9!important;
}
@media (hover: hover) and (pointer: fine){#device .trip-critical-layer.trip-phase-settled .critical-card[data-slot="left"]:hover,#device .trip-critical-layer.trip-phase-settled .critical-card[data-slot="right"]:hover{
  opacity:.9!important;
}}/* (29 October 2026) hover only for a real pointer: a finger leaves :hover on whatever it last touched (hub/docs/TASTE-INTRO-2026-10-29.md) */

/* Status copy is presented by reveal-physics (crossfade, 450ms minimum per
   line): the old per-phase keyframes would fade the block a second time. The
   block fades out with its text frozen when the deck settles. */
#device .trip-critical-layer .critical-status{
  animation:none!important;
  transition:top var(--mo-glide) var(--motion-spring),opacity var(--motion-fast) var(--motion-curve),transform var(--motion-fast) var(--motion-curve)!important;
}
#device .trip-critical-layer .mo-status-ghost{
  position:absolute;
  pointer-events:none;
  animation:none!important;
  transition:none!important;
  margin:0;
}
/* Settled: the results land as one staggered rise (WAAPI), not a container fade. */
#device .trip-critical-layer.trip-phase-settled .critical-results{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}
#device .trip-critical-layer.trip-phase-settled .critical-results-heading{
  opacity:1;
  transform:none;
  transition:none!important;
}
#device .trip-critical-layer.trip-phase-settled .critical-request-capsule{
  transition:top var(--mo-glide) var(--motion-spring),height var(--mo-glide) var(--motion-spring),left var(--mo-glide) var(--motion-spring),width var(--mo-glide) var(--motion-spring),border-radius var(--mo-glide) var(--motion-spring),background var(--motion-slow) var(--motion-curve) !important;
}
/* The spine's film strip arrives last (Z+500 to Z+900). */
#device .trip-critical-layer.trip-phase-settled .triptych-spine>.mo-film{
  transition:opacity var(--mo-lift) var(--motion-curve) calc(400ms * var(--mo-reveal-scale));
}

/* --- Shadow and dimming: pre-painted, animated by opacity only --------- */
#device .trip-critical-layer .critical-card{--surf-glow:var(--card100-blue,104,201,255);--surf-depth:.78;--surf-dim:0}
#device .trip-critical-layer .critical-card.rank-1{--surf-glow:var(--card100-pink,220,121,255)}
#device .trip-critical-layer .critical-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:0 26px 38px -4px rgba(0,0,0,.62),0 0 30px rgba(var(--surf-glow),.15);
  opacity:var(--surf-depth);
  transition:opacity var(--motion-slow) var(--motion-curve);
}
#device .trip-critical-layer .critical-card-front::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:rgba(7,6,15,.3);
  opacity:var(--surf-dim);
  transition:opacity var(--motion-slow) var(--motion-curve);
}
/* Emphasis states (was: stronger drop-shadow filters). */
#device .trip-critical-layer .critical-card:is(.is-active,.is-final,.is-opening){--surf-depth:1}
#device .trip-critical-layer.trip-phase-settled .critical-card:is([data-slot="center"],.rank-1:not([data-slot])){--surf-depth:1}
/* The deck's side dimming is card opacity (section 2), so every settled card
   keeps the full shadow layer and no veil: nothing pops at a hand-off. */
#device .trip-critical-layer.trip-phase-settled .critical-card:is([data-slot="left"],[data-slot="right"]){--surf-depth:1;--surf-dim:0}
#device .trip-critical-layer .critical-card.card100-poster-arriving{--surf-depth:1}

/* Cards materialise on opacity and clip only. The old keyframes also wrote
   `translate` (which would fight slot offsets) and animated `filter`. */
@keyframes completionCardMaterialise{
  0%{opacity:0;clip-path:inset(0 49.6% 100% 49.6% round 22px)}
  24%{opacity:.96;clip-path:inset(0 49.2% 0 49.2% round 22px)}
  74%{opacity:1;clip-path:inset(0 0 0 0 round 22px)}
  100%{opacity:1;clip-path:inset(0 0 0 0 round 22px)}
}

/* --- Engine: brightness and saturation become overlay opacity ----------- */
#device .trip-critical-layer .critical-engine-stage{filter:none!important}
#device .trip-critical-layer .critical-engine-stage::after{
  content:"";
  position:absolute;
  inset:-8%;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at 50% 44%,rgba(150,214,255,.3),rgba(158,124,255,.14) 42%,transparent 70%);
  opacity:0;
  transition:opacity var(--motion-slow) var(--motion-curve);
}
#device .trip-critical-layer.trip-phase-charging .critical-engine-stage::after{opacity:.55}
#device .trip-critical-layer.trip-phase-compressed .critical-engine-stage::after{opacity:1}
#device .trip-critical-layer.trip-phase-waiting .critical-engine-stage::after{opacity:.3}

#device .trip-critical-layer .critical-engine-core{filter:none!important}
#device .trip-critical-layer .critical-engine-core::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(190,232,255,.55),rgba(107,216,255,.2) 50%,transparent 72%);
  opacity:0;
  transition:opacity var(--motion-slow) var(--motion-curve);
}
#device .trip-critical-layer.trip-phase-charging .critical-engine-core::after{opacity:.6;animation:surf-core-charge var(--motion-slow) var(--motion-curve) 2 alternate}
#device .trip-critical-layer.trip-phase-compressed .critical-engine-core::after{opacity:1}
@keyframes completionCoreCharge{to{opacity:1}}
@keyframes completionCoreWait{50%{opacity:.62}}
@keyframes surf-core-charge{to{opacity:1}}

/* Ready beams: glow is static; only opacity pulses. */
.trip-phase-ready .critical-energy-paths i{filter:drop-shadow(0 0 7px rgba(190,236,255,.7))}
@keyframes critical-beam{0%,100%{opacity:.2}50%{opacity:1}}

/* --- Reduced motion: positions change by opacity only ------------------ */
@media (prefers-reduced-motion:reduce){
  #device .trip-critical-layer .critical-card-stage{transition-property:opacity!important}
  #device .trip-critical-layer:not(.trip-phase-settled) .critical-card{transition-property:opacity!important}
  #device .trip-critical-layer .critical-card:is(.is-opening,.is-flipping){transition-property:none!important}
  #device .trip-critical-layer .critical-card::after,
  #device .trip-critical-layer .critical-card-front::before,
  #device .trip-critical-layer .critical-engine-stage::after,
  #device .trip-critical-layer .critical-engine-core::after{animation:none!important;transition-duration:.01ms!important}
}
#device.device.manual-reduced-motion .trip-critical-layer .critical-card-stage{transition-property:opacity!important}
#device.device.manual-reduced-motion .trip-critical-layer:not(.trip-phase-settled) .critical-card{transition-property:opacity!important}
#device.device.manual-reduced-motion .trip-critical-layer .critical-card:is(.is-opening,.is-flipping){transition-property:none!important}
#device.device.manual-reduced-motion .trip-critical-layer .critical-card::after,
#device.device.manual-reduced-motion .trip-critical-layer .critical-card-front::before,
#device.device.manual-reduced-motion .trip-critical-layer .critical-engine-stage::after,
#device.device.manual-reduced-motion .trip-critical-layer .critical-engine-core::after{animation:none!important;transition-duration:.01ms!important}

/* ------------------------------------------------------------------ */
/* 3. Card faces: state-driven, not geometry-driven                    */
/* ------------------------------------------------------------------ */
/* Which face is visible must never depend on the engine honouring
   backface-visibility through a 3D context. WebKit flattens that context for
   opacity < 1 (inline pose on cards), filters, clip-path, overflow and
   individually animated translate/scale/rotate, and then paints the back
   (mirrored SEALED / rank) through the front.
     - revealed and at rest (not opening/flipping): the back is hidden;
     - sealed and at rest: the front is hidden;
     - opening/flipping: neither is forced, the 3D flip runs on
       backface-visibility with both prefixes on both faces.
   Applies to the standard deck and to data-mode="friday" (same markup). */
#device .trip-critical-layer .critical-card-back,
#device .trip-critical-layer .critical-card-front{
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
/* The containers themselves never cull; only the faces do. */
#device .trip-critical-layer .critical-card,
#device .trip-critical-layer .critical-card-inner{
  -webkit-backface-visibility:visible;
  backface-visibility:visible;
}
#device .trip-critical-layer .critical-card.is-revealed:not(.is-opening):not(.is-flipping) .critical-card-back,
#device .trip-critical-layer[data-mode="friday"] .critical-card.is-revealed:not(.is-opening):not(.is-flipping) .critical-card-back{
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
#device .trip-critical-layer .critical-card:not(.is-revealed):not(.is-opening):not(.is-flipping) .critical-card-front,
#device .trip-critical-layer[data-mode="friday"] .critical-card:not(.is-revealed):not(.is-opening):not(.is-flipping) .critical-card-front{
  visibility:hidden!important;
  pointer-events:none!important;
}
#device .trip-critical-layer .critical-card.is-revealed:not(.is-opening):not(.is-flipping) .critical-card-front{
  visibility:visible;
}
/* Settled and revealed: nothing pre-painted on the card (dim overlay, shadow)
   may flatten the inner; the back is gone, so flattening is now harmless. */

/* ------------------------------------------------------------------ */
/* 4. Settled dock: CTA, Friday refresh and toolbar in one sticky stack */
/* ------------------------------------------------------------------ */
/* Rows, bottom to top: toolbar (64px, 4px above the safe area), an 8px gap,
   [Friday: the 46px "Another three" button and an 8px gap], the CTA. All
   three are sticky with offsets derived from the same variables, so they
   cannot overlap at any safe-bottom value. */
#device .trip-critical-layer.trip-phase-settled{
  --surf-toolbar-h:64px;
  --surf-refresh-h:46px;
  --surf-dock-gap:8px;
  --surf-dock-base:calc(var(--mo-safe-bottom) + 4px + var(--surf-toolbar-h) + var(--surf-dock-gap));
}
#device .trip-critical-layer.trip-phase-settled .critical-film-cta{
  bottom:var(--surf-dock-base);
}
#device .trip-critical-layer[data-mode="friday"].trip-phase-settled .critical-friday-refresh:not([hidden]){
  position:sticky;
  bottom:var(--surf-dock-base);
  z-index:13;
  box-sizing:border-box;
  display:block;
  width:100%;
  height:var(--surf-refresh-h);
  min-height:var(--surf-refresh-h)!important;
  margin:var(--surf-dock-gap) 0 0;
}
#device .trip-critical-layer[data-mode="friday"].trip-phase-settled .critical-friday-refresh:not([hidden]) ~ .critical-result-toolbar{
  margin-top:var(--surf-dock-gap)!important;
}
#device .trip-critical-layer[data-mode="friday"].trip-phase-settled:has(.critical-friday-refresh:not([hidden])) .critical-film-cta{
  bottom:calc(var(--surf-dock-base) + var(--surf-refresh-h) + var(--surf-dock-gap));
}
#device .trip-critical-layer[data-mode="friday"].trip-phase-settled:has(.critical-friday-refresh:not([hidden])) .critical-result-toolbar::after{
  top:-146px;
}

/* ===== prototype-src/signature-reveal.css ===== */
/* TRIPTIC signature reveal moments (owner: signature pass).
   See workspace/work/frontend-motion-uplift-2026-09-30/CONTRACT.md and
   MOTION-DIRECTION.md. Only opacity/transform/translate/rotate animate.
   Nothing here loops and nothing animates a filter.

   This file also carries the iPhone budget overrides for the ritual layer:
   fewer full-screen layers (one cone, one ambient tint, transient shutter and
   dust), no filter animation, and the ready-phase ambient loops paused. */

/* ------------------------------------------------------------ 2 · projector */
.trip-critical-layer .mo-projector,
.trip-critical-layer .mo-motes {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0;
}
.trip-critical-layer .mo-projector {
  z-index: 2; will-change: opacity;
  transition: opacity var(--mo-cinematic, 720ms) var(--mo-spring-smooth, ease);
}
/* Dust: a 1x canvas, at most 390x520 css px, created for one turn (JS sizes and
   places it under the apex, then removes it). */
.trip-critical-layer .mo-motes { z-index: 3; opacity: 1; height: 520px; }
.trip-critical-layer.mo-sig-rest .mo-projector { opacity: .32; }
/* The cone is off the moment the layer leaves the ritual. */
.trip-critical-layer.critical-behind-film .mo-projector,
.trip-critical-layer.is-returning .mo-projector,
.trip-critical-layer.critical-leaving .mo-projector { opacity: 0 !important; animation: none !important; }
.trip-critical-layer.critical-behind-film .mo-motes,
.trip-critical-layer.is-returning .mo-motes,
.trip-critical-layer.critical-leaving .mo-motes { opacity: 0 !important; }
/* One-frame blink; the node exists only while it plays. */
.trip-critical-layer .mo-shutter {
  position: absolute; inset: 0; z-index: 60; pointer-events: none; opacity: 0; background: #000;
}
/* The old final bloom would double up with the final glow. */
.trip-critical-layer.mo-sig .critical-final-bloom { display: none !important; }

/* ---------------------------------------- one ambient tint (cone wash merged) */
/* The cone's old second wash is folded into the tint's own gradients.
   The tint that is not showing is visibility:hidden as soon as its fade is done,
   so only one full-screen translucent layer is ever live. */
.trip-critical-layer > .mo-tint {
  background:
    radial-gradient(ellipse 78% 46% at 50% 40%, rgba(var(--mo-tint-rgb, 141, 102, 255), .34), transparent 72%),
    radial-gradient(ellipse 34% 16% at 50% 8%, rgba(var(--mo-tint-rgb, 141, 102, 255), .10), transparent 76%),
    radial-gradient(ellipse 90% 40% at 50% 104%, rgba(var(--mo-tint-rgb, 141, 102, 255), .18), transparent 76%);
  visibility: hidden;
  transition-property: opacity, visibility;
  transition-duration: var(--mo-cinematic, 720ms), 0s;
  transition-delay: 0s, var(--mo-cinematic, 720ms);
}
.trip-critical-layer > .mo-tint.is-on {
  visibility: visible;
  transition-delay: 0s, 0s;
}

/* ------------------------------------------------------- ambient loops paused */
/* From ready onward nothing in the atmosphere needs to move. Its loops stop
   (paused, so nothing snaps) and the whole element (a conic wash at ~3% alpha
   plus the charging arcs) fades away and leaves the layer tree, so neither the
   531x1148 drift layer nor the atmosphere itself is live through the turns. */
.trip-critical-layer:is(.trip-phase-ready, .trip-phase-revealing, .trip-phase-settled) .critical-atmosphere,
.trip-critical-layer:is(.trip-phase-ready, .trip-phase-revealing, .trip-phase-settled) .critical-atmosphere::before,
.trip-critical-layer:is(.trip-phase-ready, .trip-phase-revealing, .trip-phase-settled) .critical-atmosphere::after,
.trip-critical-layer:is(.trip-phase-ready, .trip-phase-revealing, .trip-phase-settled) .critical-atmosphere > i,
.trip-critical-layer:is(.trip-phase-ready, .trip-phase-revealing, .trip-phase-settled) .critical-atmosphere > i::before,
.trip-critical-layer:is(.trip-phase-ready, .trip-phase-revealing, .trip-phase-settled) .critical-atmosphere > i::after {
  animation-play-state: paused !important;
}
.trip-critical-layer:is(.trip-phase-ready, .trip-phase-revealing, .trip-phase-settled) .critical-atmosphere {
  opacity: 0 !important;
  visibility: hidden;
  transition: opacity var(--mo-emphasised, 480ms) ease, visibility 0s linear var(--mo-emphasised, 480ms);
}
/* The charging arcs lose their animated drop-shadow filter (a 1px line does not
   need a filter pass): a static soft box-shadow carries the glow. */
.trip-critical-layer .critical-atmosphere > i {
  filter: none !important;
  box-shadow: 0 0 6px rgba(183, 226, 255, .34);
}
/* The engine's three aperture panes flared with an animated brightness filter
   while charging; their opacity and border already carry the state. */
#device .trip-critical-layer .critical-engine-aperture > i { filter: none !important; }
/* The header mark's aura is a fixed soft gradient (no blur filter, no repaint)
   for the whole ceremony. */
.trip-critical-layer .critical-brand-lockup .critical-brand-aura {
  filter: none !important;
  animation: none !important;
  transition: none !important;
  background: radial-gradient(ellipse at 38% 50%, rgba(74,178,255,.26), rgba(74,178,255,.11) 34%, rgba(125,83,239,.06) 52%, transparent 70%) !important;
}

/* ------------------------------------------- the discover screen is out of play */
/* While the ritual is engaged the Discover chrome behind it is invisible and
   inert; visibility:hidden (after its fade) removes it from painting and the
   layer tree altogether, and the blur that used to animate on its way out
   goes. */
.trip-critical-host.critical-engaged > .app-header,
.trip-critical-host.critical-engaged > .friday-ribbon,
.trip-critical-host.critical-engaged > .discover-heading,
.trip-critical-host.critical-engaged > .search-glass,
.trip-critical-host.critical-engaged > .memory-control,
.trip-critical-host.critical-engaged > .daily-cryptic-home-entry,
.trip-critical-host.critical-engaged > .inspiration,
.trip-critical-host.critical-engaged > .persistent-glass-nav {
  filter: none !important;
  visibility: hidden;
  transition: opacity .36s ease, transform .56s var(--critical-ease, ease), visibility 0s linear .4s !important;
}
.trip-critical-host.critical-engaged > .premium-discover-ambient,
.trip-critical-host.critical-engaged > .orb-instruction,
.trip-critical-host.critical-engaged > .discover-shortcuts,
.trip-critical-host.critical-engaged > .discover-inspiration,
.trip-critical-host.critical-engaged::before,
.trip-critical-host.critical-engaged::after {
  visibility: hidden;
  transition: visibility 0s linear .4s;
}
/* The screen's own background and the layers above it: hide the host too and
   hand visibility back to the ritual, the Film and the poster flight. */
.trip-critical-host.critical-engaged {
  visibility: hidden;
  transition: visibility 0s linear .4s;
}
.trip-critical-host.critical-engaged > .trip-critical-layer,
.trip-critical-host.critical-engaged > .critical-film-layer,
.trip-critical-host.critical-engaged > .critical-poster-flight { visibility: visible; }

/* --------------------------------------------------------- 1 · poster develop */
/* Timeline from the flip (T), at the reveal scale 1.25 (--mo-reveal-scale):
   grain T+250 -> 1025, silver holds to T+450 then melts to colour by T+1125,
   title T+925 -> 1250. The node is gone by T+1205. */
.critical-card-front > .mo-develop {
  position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden;
  pointer-events: none;
  animation: mo-develop-life calc(900ms * var(--mo-reveal-scale, 1.25)) linear both;
}
.mo-develop > i { position: absolute; inset: 0; pointer-events: none; }
.mo-develop-silver {
  /* Silver without a filter: the poster is blended onto neutral grey with the
     luminosity blend (its hue and saturation drop out), darkened at the foot. */
  background-color: #7c7c80;
  background-image: linear-gradient(180deg, rgba(4,4,9,.02) 28%, rgba(5,5,10,.20) 51%, rgba(3,3,7,.96) 86%), var(--critical-poster);
  background-blend-mode: normal, luminosity;
  background-size: cover; background-position: center;
  animation: mo-develop-silver calc(900ms * var(--mo-reveal-scale, 1.25)) linear both;
}
.mo-develop-safe {
  background: radial-gradient(90% 70% at 50% 40%, rgba(255,112,74,.8), rgba(130,26,14,.32));
  opacity: 0;
  animation: mo-develop-safe calc(760ms * var(--mo-reveal-scale, 1.25)) var(--mo-spring-smooth, ease) both;
}
.mo-develop-grain {
  inset: -12% !important;
  background-image: var(--mo-grain, none); background-size: 96px 96px;
  opacity: 0;
  animation: mo-develop-grain-op calc(620ms * var(--mo-reveal-scale, 1.25)) linear calc(200ms * var(--mo-reveal-scale, 1.25)) both, mo-develop-grain-jump calc(360ms * var(--mo-reveal-scale, 1.25)) steps(1, end) calc(200ms * var(--mo-reveal-scale, 1.25)) both;
}
@keyframes mo-develop-life { from { opacity: 1; } to { opacity: 1; } }
/* silver holds while the card turns (to T+360), then melts to colour on the gentle spring */
@keyframes mo-develop-silver {
  0%, 40% { opacity: 1; animation-timing-function: var(--mo-spring-gentle, ease-out); }
  100% { opacity: 0; }
}
@keyframes mo-develop-safe { 0% { opacity: 0; } 25% { opacity: .3; } 100% { opacity: 0; } }
@keyframes mo-develop-grain-op { 0% { opacity: .38; } 55% { opacity: .24; } 100% { opacity: 0; } }
@keyframes mo-develop-grain-jump {
  0% { translate: 0 0; } 33% { translate: -19px 13px; } 66% { translate: 11px -17px; } 100% { translate: 11px -17px; }
}
@keyframes mo-develop-cross { from { opacity: 1; } to { opacity: 0; } }

/* ----------------------------------------------------------- 3 · final glow */
/* One soft radial gradient behind the last card: opacity 0 -> .35 -> 0 (and a
   small scale), no filter. It stays inside the card's own 14% margin, well
   within the stage's unclipped bounds, and fades to nothing before its edge, so
   there is no edge to clip. */
.trip-critical-layer.critical-final-reveal .critical-card.rank-1::before { content: none; }
.trip-critical-layer.critical-final-reveal .critical-card.rank-1.mo-glow::before {
  content: ""; position: absolute; inset: -14%; z-index: -1; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240,129,255,.62), rgba(141,102,255,.30) 52%, rgba(111,145,255,0) 100%);
  opacity: 0;
  animation: mo-final-glow calc(1100ms * var(--mo-reveal-scale, 1.25)) var(--mo-spring-gentle, ease-out) calc(120ms * var(--mo-reveal-scale, 1.25)) both;
}
@keyframes mo-final-glow {
  0% { opacity: 0; transform: scale(.86); }
  55% { opacity: .35; }
  100% { opacity: 0; transform: scale(1.04); }
}

/* ------------------------------------------------------ 4 · sprocket spine */
.triptych-spine > .mo-film {
  position: absolute; z-index: -1; left: -108px; right: -108px; top: 5px; bottom: 5px;
  overflow: hidden; pointer-events: none; opacity: 0;
  transition: opacity var(--mo-standard, 320ms) var(--mo-ease-out, ease-out) var(--mo-quick, 180ms);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}
.trip-critical-layer.trip-phase-settled .triptych-spine > .mo-film { opacity: 1; }
.mo-film-strip {
  position: absolute; top: 0; bottom: 0; left: -140px; right: -140px;
  background: rgba(12, 11, 18, .78);
  border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
  translate: calc(var(--mo-deck-s, 0) * 84px) 0;   /* 1:1 with the deck: 84px per card */
  will-change: transform;
}
.mo-film-strip::before, .mo-film-strip::after {
  content: ""; position: absolute; left: 0; right: 0; height: 5px;
  background-image: linear-gradient(90deg, rgba(247,247,248,.34) 0 7px, transparent 7px);
  background-size: 14px 5px;
}
.mo-film-strip::before { top: 3px; }
.mo-film-strip::after { bottom: 3px; }

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .trip-critical-layer .mo-motes, .trip-critical-layer .mo-shutter,
  .trip-critical-layer .critical-card.rank-1.mo-glow::before,
  .mo-develop-grain, .mo-develop-safe { display: none !important; }
  .trip-critical-layer .mo-projector { transition-duration: var(--mo-standard, 320ms); }
  .trip-critical-layer > .mo-tint { transition-duration: var(--mo-quick, 180ms), 0s; transition-delay: 0s, var(--mo-quick, 180ms); }
  .trip-critical-layer > .mo-tint.is-on { transition-delay: 0s, 0s; }
  .critical-card-front > .mo-develop { animation-duration: 320ms; }
  .mo-develop-silver { animation: mo-develop-cross 320ms linear both; }
  .mo-film-strip { translate: calc(round(nearest, var(--mo-deck-s, 0), 1) * 84px) 0; }
}
.device.manual-reduced-motion .trip-critical-layer .mo-motes,
.device.manual-reduced-motion .trip-critical-layer .mo-shutter,
.device.manual-reduced-motion .trip-critical-layer .critical-card.rank-1.mo-glow::before,
.device.manual-reduced-motion .mo-develop-grain,
.device.manual-reduced-motion .mo-develop-safe,
.reduce-motion .trip-critical-layer .mo-motes,
.reduce-motion .trip-critical-layer .mo-shutter,
.reduce-motion .trip-critical-layer .critical-card.rank-1.mo-glow::before,
.reduce-motion .mo-develop-grain,
.reduce-motion .mo-develop-safe { display: none !important; }
.device.manual-reduced-motion .trip-critical-layer .mo-projector,
.reduce-motion .trip-critical-layer .mo-projector { transition-duration: var(--mo-standard, 320ms); }
.device.manual-reduced-motion .trip-critical-layer > .mo-tint,
.reduce-motion .trip-critical-layer > .mo-tint { transition-duration: var(--mo-quick, 180ms), 0s; transition-delay: 0s, var(--mo-quick, 180ms); }
.device.manual-reduced-motion .trip-critical-layer > .mo-tint.is-on,
.reduce-motion .trip-critical-layer > .mo-tint.is-on { transition-delay: 0s, 0s; }
.device.manual-reduced-motion .critical-card-front > .mo-develop,
.reduce-motion .critical-card-front > .mo-develop { animation-duration: 320ms; }
.device.manual-reduced-motion .mo-develop-silver,
.reduce-motion .mo-develop-silver { animation: mo-develop-cross 320ms linear both; }
.device.manual-reduced-motion .mo-film-strip,
.reduce-motion .mo-film-strip { translate: calc(round(nearest, var(--mo-deck-s, 0), 1) * 84px) 0; }

/* ---------------------------------------------------------- reduce transparency */
.device.manual-solid .trip-critical-layer .mo-projector,
.device.manual-solid .trip-critical-layer .mo-motes,
.device.manual-solid .trip-critical-layer .critical-card.rank-1.mo-glow::before,
.reduce-transparency .trip-critical-layer .mo-projector,
.reduce-transparency .trip-critical-layer .mo-motes,
.reduce-transparency .trip-critical-layer .critical-card.rank-1.mo-glow::before { display: none !important; }
@media (prefers-reduced-transparency: reduce) {
  .trip-critical-layer .mo-projector,
  .trip-critical-layer .mo-motes,
  .trip-critical-layer .critical-card.rank-1.mo-glow::before { display: none !important; }
}

/* ------------------------------------------- the TRIPTIC lockup's halo
   One soft, wide horizontal glow behind the mark and the whole word, the same blue as the Discover header's
   halo (app-header's brand-home aura). It is brightest behind the mark and fades out past the last C. The
   explicit radii keep the gradient at zero inside the box, so no box or hard edge shows. This is the last rule
   for the lockup's aura, so it wins over the older round glows (frontend-completion, search-flow-premium and the
   Cryptic home's aura). It sets no display, so the Cryptic landing's header aura stays off (ds-cryptic-game.css). */
#device .critical-brand-lockup > .critical-brand-aura {
  left: 50% !important;
  top: 50% !important;
  width: 400px !important;
  height: 80px !important;
  border-radius: 0 !important;
  filter: none !important;
  transform: translate(-50%, -50%) !important;
  background:
    radial-gradient(140px 36px at 150px 50%, rgba(104, 201, 255, .34), rgba(81, 148, 255, .17) 42%, rgba(81, 148, 255, .07) 70%, rgba(81, 148, 255, 0) 100%),
    radial-gradient(120px 34px at 190px 50%, rgba(147, 87, 239, .10), rgba(147, 87, 239, 0) 100%) !important;
}

/* ===== prototype-src/film-transition.css ===== */
/* TRIPTIC film transition layer (owner: Film/transitions). See workspace/work/frontend-motion-uplift-2026-09-30/MOTION-DIRECTION.md

   Three jobs, all transform / opacity / clip-path only:
   1. Discover to ritual entry (D11): the composer card becomes the request
      capsule, the layer background fades in beneath it, the engine grows from
      the Find three button. There is never an empty frame.
   2. Film open / back (D8): the tapped poster becomes the Film hero (one view
      transition, or a hero-sized clip-path flight), the deck never dims to a
      second exposure, the hero never blur-resolves.
   3. The review shell's fake status bar and home indicator are never visible
      while the ritual is engaged, while Film is open, or on a real phone.
   The runtime is film-transition.js. Loaded after signature-reveal.css. */

:root {
  --ft-smooth: var(--motion-spring);
  --ft-ease-out: var(--motion-curve);
  --ft-exit: var(--motion-curve);
}

@keyframes ft-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ft-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ft-deck-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.96); } }
@keyframes ft-deck-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes ft-title-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ft-hero-resolve { from { opacity: .86; transform: scale(1.012); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------------
   1. Fake device chrome
   The review shell draws a 9:41 status bar and a home indicator. They are
   never shown over the ritual or Film (they ghosted through both in the
   owner's recording) and never on a real phone, which has its own.
   ------------------------------------------------------------------------ */
#device .trip-critical-host.critical-engaged > .ios-status {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none !important;
  transition: opacity var(--motion-fast) linear, visibility 0s linear .18s !important;
}
#device.critical-journey-active .home-indicator,
#device.critical-journey-active > .home-indicator {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity var(--motion-fast) linear !important;
}
@media (pointer: coarse) {
  #device .ios-status,
  #device .home-indicator { display: none !important; }
}

/* ---------------------------------------------------------------------------
   2. Entry (D11)
   Discover chrome fades out in 180 ms with no blur pass; the layer is visible
   from the first frame, its background fades in beneath; the composer card
   (the capsule starts on the composer's exact rect) collapses into the
   capsule in 480 ms; the engine grows out of Find three.
   ------------------------------------------------------------------------ */
#device .trip-critical-host.critical-engaged > .app-header,
#device .trip-critical-host.critical-engaged > .friday-ribbon,
#device .trip-critical-host.critical-engaged > .discover-heading,
#device .trip-critical-host.critical-engaged > .search-glass,
#device .trip-critical-host.critical-engaged > .memory-control,
#device .trip-critical-host.critical-engaged > .daily-cryptic-home-entry,
#device .trip-critical-host.critical-engaged > .inspiration,
#device .trip-critical-host.critical-engaged > .persistent-glass-nav {
  filter: none !important;
  transform: none !important;
  transition: opacity var(--motion-fast) linear !important;
}

#device .trip-critical-layer.ft-entry:not(.is-returning):not(.critical-leaving) {
  opacity: 1;
  transition: none;
}
#device .trip-critical-layer.ft-entry { background: transparent !important; }
#device .trip-critical-layer.ft-entry::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 25%, rgba(86, 122, 255, .15), transparent 25%),
    radial-gradient(ellipse at 50% 52%, rgba(202, 79, 247, .06), transparent 39%),
    linear-gradient(180deg, #07070d, #050509 58%, #040407);
  animation: ft-fade-in var(--motion-normal) var(--ft-ease-out) both;
}
#device .trip-critical-layer.ft-entry[data-mode="friday"]::before {
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 104, 226, .1), transparent 25%),
    radial-gradient(circle at 50% 48%, rgba(108, 164, 255, .07), transparent 36%),
    linear-gradient(180deg, #08070d, #050509 58%, #040407);
}

/* The capsule is the composer card: same rect on frame one, then it glides to
   its seat. Both ends are explicit lengths so the height transitions too. */
#device .trip-critical-layer.ft-entry:not(.is-live) .critical-request-capsule {
  height: var(--critical-request-h, 122px) !important;
  min-height: 0 !important;
}
#device .trip-critical-layer.ft-entry .critical-request-capsule {
  transition:
    left var(--motion-slow) var(--ft-smooth), top var(--motion-slow) var(--ft-smooth),
    width var(--motion-slow) var(--ft-smooth), height var(--motion-slow) var(--ft-smooth),
    border-radius var(--motion-slow) var(--ft-smooth) !important;
}

/* The engine grows out of the Find three button: scale .2 to .96 and fade,
   480 ms, starting 120 ms after submit (the runtime adds ft-engine-go). */
#device .trip-critical-layer.ft-entry.trip-phase-entry .critical-engine-stage {
  transform: translate(calc(-50% + var(--critical-engine-x, 0px)), var(--ft-engine-y, var(--critical-engine-y, 90px))) scale(.2) !important;
  opacity: 0 !important;
  transition: none !important;
}
#device .trip-critical-layer.ft-entry.ft-engine-go .critical-engine-stage {
  transform: translateX(-50%) scale(.96) !important;
  opacity: .84 !important;
  transition: transform var(--motion-slow) var(--ft-smooth), opacity var(--motion-slow) var(--ft-ease-out) !important;
}

/* ---------------------------------------------------------------------------
   3. Film
   The deck behind Film is never dimmed to a second exposure. While a
   transition runs the deck stays in flow (the runtime animates its opacity and
   scale); once Film has arrived it is hidden without a fade so nothing shows
   through. Specificity uses #device so these win over motion-system.css.
   ------------------------------------------------------------------------ */
#device .trip-critical-layer.critical-behind-film {
  opacity: 1;
  transform: none;
  visibility: hidden;
  transition: none !important;
}
#device .trip-critical-host.ft-running > .trip-critical-layer.critical-behind-film,
#device .trip-critical-host:has(> .critical-film-layer.is-leaving).ft-running > .trip-critical-layer.critical-behind-film {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: none !important;
}
#device .trip-critical-layer.critical-behind-film { transform-origin: 50% 50%; }

/* Older view-transition names (triptic-95.css, triptic-fluidity.css) mark the
   whole Film page and its hero for the standalone Film flow. Inside the
   ritual the transition here owns every name, exactly once. */
#device .critical-film-layer.recon-film,
#device .critical-film-layer .film-hero,
#device .critical-film-layer .verified-film-hero { view-transition-name: none; }

/* Film layer states (classes added by the runtime for the length of a transition).
   ft-live   the layer is visible and ignores the legacy fade / slide
   ft-clear  its own background is transparent (the runtime draws a veil)
   ft-stage  content waits for its scripted entrance
   ft-nobg   the hero background is replaced by the flying poster
   ft-pre    laid out but not rendered (the view transition's old state) */
#device .critical-film-layer.ft-live {
  opacity: 1;
  transform: none;
  transition: none;
  scroll-behavior: auto;
}
#device .critical-film-layer.ft-live.ft-clear { background: transparent !important; }
#device .critical-film-layer.ft-pre { display: none !important; }
#device .critical-film-layer.ft-nobg .verified-film-hero,
#device .critical-film-layer.ft-nobg .film-hero { background-image: none !important; }
#device .critical-film-layer.ft-stage .film-artwork-atmosphere,
#device .critical-film-layer.ft-stage .film-gradient,
#device .critical-film-layer.ft-stage .film-title,
#device .critical-film-layer.ft-stage .film-topbar,
#device .critical-film-layer.ft-stage .film-content,
#device .critical-film-layer.ft-stage-vt .film-content { opacity: 0; }

#device .critical-film-layer .ft-veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #07070b, #050509);
  pointer-events: none;
}
#device .critical-film-layer .ft-poster {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  transform-origin: 0 0;
  backface-visibility: hidden;
}
#device .critical-film-layer .ft-shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#device .trip-critical-host > .ft-proxy {
  position: absolute;
  z-index: 175;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

/* Hero: no blur resolve. A loading poster is just slightly dimmer; arriving,
   it settles with opacity + scale. */
#device .verified-film-hero.poster-resolving,
#device .critical-film-layer .verified-film-hero.poster-resolving { filter: none !important; opacity: .86; }
#device .verified-film-hero.poster-resolved { animation: ft-hero-resolve var(--motion-normal) var(--ft-ease-out) both; }
#device .verified-film-hero.poster-resolved.ft-hero-still { animation: none; }
#device .critical-film-layer.is-entering .film-hero { animation: ft-hero-resolve var(--motion-normal) var(--ft-ease-out) both; }
#device .critical-film-layer.ft-live .film-hero,
#device .critical-film-layer.ft-live .verified-film-hero { animation: none !important; opacity: 1; }
#device .critical-poster-flight { will-change: transform, opacity; filter: none; }

/* ---------------------------------------------------------------------------
   4. View transition (Safari 18+, Chromium). The runtime sets html.ft-vt-open
   or html.ft-vt-close for the length of one transition and names exactly
   these elements: the poster (trip-selected-poster), back (trip-back), the
   Film title and share.
   ------------------------------------------------------------------------ */
html.ft-vt-open .ft-proxy,
html.ft-vt-close .ft-proxy,
html.ft-vt-open .critical-film-layer .ft-poster,
html.ft-vt-close .critical-film-layer .ft-poster { view-transition-name: trip-selected-poster; }
html.ft-vt-open .critical-header .back-chevron,
html.ft-vt-open .critical-film-layer .film-topbar .back-chevron,
html.ft-vt-close .critical-header .back-chevron,
html.ft-vt-close .critical-film-layer .film-topbar .back-chevron { view-transition-name: trip-back; }
/* (final duofix R2-07, 14 November 2026) on the opened iPhone Duo the three's own page stays drawn under the Duo's stage, so
   its back is on screen in the first picture of the open while the film page, not yet in (ft-pre), is there too: two
   elements named trip-back and the open was abandoned ("Unexpected duplicate view-transition-name"). There the film's back
   is named only once the film page is in. */
html.ft-vt-open[data-env-fold="1"] .critical-film-layer.ft-pre .film-topbar .back-chevron { view-transition-name: none; }
html.ft-vt-open .critical-film-layer .film-title,
html.ft-vt-close .critical-film-layer .film-title { view-transition-name: trip-film-title; }
html.ft-vt-open .critical-film-layer .film-topbar > button:not(.back-chevron),
html.ft-vt-close .critical-film-layer .film-topbar > button:not(.back-chevron) { view-transition-name: trip-film-share; }

/* Root: the deck scales to .96 and fades out (complementary to Film fading in,
   same curve, so the sum never brightens) and is gone before the Film title
   passes half opacity. */
html.ft-vt-open::view-transition-old(root) { animation: ft-deck-out var(--motion-fast) var(--ft-ease-out) both; transform-origin: 50% 50%; }
html.ft-vt-open::view-transition-new(root) { animation: ft-fade-in var(--motion-fast) var(--ft-ease-out) both; }
html.ft-vt-close::view-transition-old(root) { animation: ft-fade-out var(--motion-fast) var(--ft-ease-out) both; }
html.ft-vt-close::view-transition-new(root) { animation: ft-deck-in var(--motion-normal) var(--ft-ease-out) both; transform-origin: 50% 50%; }

/* The poster morphs (520 open, 440 back); the two images cross-fade over the
   first 40 % going in and the last 40 % coming back. */
html.ft-vt-open::view-transition-group(trip-selected-poster) { animation-duration: var(--motion-slow); animation-timing-function: var(--ft-smooth); }
html.ft-vt-close::view-transition-group(trip-selected-poster) { animation-duration: var(--motion-normal); animation-timing-function: var(--ft-smooth); }
html.ft-vt-open::view-transition-image-pair(trip-selected-poster),
html.ft-vt-close::view-transition-image-pair(trip-selected-poster) { isolation: auto; }
html.ft-vt-open::view-transition-old(trip-selected-poster),
html.ft-vt-open::view-transition-new(trip-selected-poster),
html.ft-vt-close::view-transition-old(trip-selected-poster),
html.ft-vt-close::view-transition-new(trip-selected-poster) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
}
html.ft-vt-open::view-transition-old(trip-selected-poster) { animation: ft-fade-out var(--motion-fast) linear both; }
html.ft-vt-open::view-transition-new(trip-selected-poster) { animation: ft-fade-in var(--motion-fast) linear both; }
html.ft-vt-close::view-transition-old(trip-selected-poster) { animation: ft-fade-out var(--motion-fast) linear 264ms both; }
html.ft-vt-close::view-transition-new(trip-selected-poster) { animation: ft-fade-in var(--motion-fast) linear 264ms both; }

/* Back sits between the ritual header and the Film top bar: it morphs, it
   does not vanish. */
html.ft-vt-open::view-transition-group(trip-back),
html.ft-vt-close::view-transition-group(trip-back) { animation-duration: var(--motion-normal); animation-timing-function: var(--ft-smooth); }
/* Title rises 8 px and fades in C+220 to C+540; going back it fades in 180. */
html.ft-vt-open::view-transition-new(trip-film-title),
html.ft-vt-open::view-transition-new(trip-film-share) { animation: ft-title-in var(--motion-normal) var(--ft-ease-out) 220ms both; }
html.ft-vt-close::view-transition-old(trip-film-title),
html.ft-vt-close::view-transition-old(trip-film-share) { animation: ft-fade-out var(--motion-fast) var(--ft-ease-out) both; }

/* ---------------------------------------------------------------------------
   5. Reduce Motion: a plain 220 ms crossfade (the runtime animates opacity
   only), no flight, no view transition.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #device .trip-critical-layer.ft-entry::before { animation: none; }
  #device .trip-critical-layer.ft-entry .critical-request-capsule,
  #device .trip-critical-layer.ft-entry.ft-engine-go .critical-engine-stage { transition-duration: var(--motion-fast) !important; }
  #device .verified-film-hero.poster-resolved,
  #device .critical-film-layer.is-entering .film-hero { animation: none; }
}
.device.manual-reduced-motion .trip-critical-layer.ft-entry::before,
.reduce-motion .trip-critical-layer.ft-entry::before { animation: none; }
.device.manual-reduced-motion .verified-film-hero.poster-resolved,
.device.manual-reduced-motion .critical-film-layer.is-entering .film-hero { animation: none; }

/* ===== prototype-src/design-system.css ===== */
/* ============================================================================
   TRIPTIC design system: "The Projection Booth" (W0 tokens and core).
   Direction: workspace/work/frontend-motion-uplift-2026-09-30/DESIGN-DIRECTION.md section 1, 4, 5.

   KILL SWITCH. Every rule below that changes an existing screen is scoped under
   html.ds (set by ds-core.js unless ?ds=0). The only unscoped rule is the token block
   on :root, which only defines new --c-, --fs-, --e- and --mat- names.

   TYPE FLOOR (nothing below 11px). The generated "type-floor" block near the top of
   this file remaps every font-size under 11px found in the stylesheets that precede
   or follow this layer (534 selectors: .glass-nav button, .eyebrow, .poster-copy *,
   .friday-ribbon *, .film-v4/.film-v5 .why-panel *, .watch-options *, .settings-group *,
   .library-summary span, .prompt-copy b, .legal, .critical-card-front small/em,
   .ritual-card-* small, .critical-request-capsule span, .dna-axis *, .dna-map header *,
   cryptic labels, membership, p20, media, provider, collection,
   explore, trailer and reasoning classes and ~400 more). Mapping: eyebrow-like (uppercase or
   tracked) to 11px; p and strong/b/h* to 12-13px; everything else 11-12px. The same
   generator also snaps font-weight to 400/500/600/700 (650 does not exist in SF), caps backdrop blur at 24px,
   snaps border-radius (under 40px) to 6/10/14/20/28, and lifts low-contrast neutral text
   colours to --c-label-3. Regenerate with
   workspace/work/frontend-design-2026-10/tools/design-system-remap.mjs.
   Generated selectors use :where(html.ds) so the original specificity is preserved.

   !IMPORTANT OVERRIDES (each beats an earlier !important):
   - .ds-num / .ds-mono tabular-nums: a later `font` shorthand (which resets font-variant-numeric) must not undo it.
   - SF type ramp block (discover composer textarea, .discover-inspiration h2): legacy sets 19px/18px !important.
   - Button kinds (.primary-button, .secondary-button, .query-submit-plain, .cryptic-begin,
     .critical-film-cta, .destructive-button): background, colour, border, radius, height,
     shadow and font. Earlier layers set these with !important at triptic-app.css
     .primary-button (violet gradient), .premium-welcome .welcome-actions .primary-button,
     #device .primary-button:not(:disabled), #device .first-run-intro>.primary-button,
     #device .first-use-guide .primary-button, #device .premium-composer .query-submit.query-submit-plain.
   - .ds-pressed / .ds-pressed-row / .ds-releasing (scale .96, compressed shadow, row highlight, the spring-back
     window): beat .primary-button.is-pressing scale, button :active transforms, and the transition/box-shadow of
     controls that set them with !important. .ds-pressed:is(.p20-pressing, .is-pressing) cancels the older layers'
     !important transform/filter so a press is scaled once.
   - :focus-visible ring: beats outline:0!important on .query-submit.
   - .triptic-review-indicator relocation: beats nothing important, but sits at z-index 9999.
   - Coloured button shadows (.friday-ribbon, .daily-cryptic-home-entry, .a11y-card): neutral.
   - .content-material frosted fill: solid --c-fill-1 (beats the gradient background).
   ============================================================================ */

:root {
  /* stage and surfaces */
  --c-stage: #050507;
  --c-stage-raised: #0c0c11;
  --c-fill-1: rgba(255, 255, 255, .05);
  --c-fill-2: rgba(255, 255, 255, .08);
  --c-fill-press: rgba(255, 255, 255, .12);
  --c-line: rgba(255, 255, 255, .09);
  --c-line-strong: rgba(255, 255, 255, .16);
  /* labels (Apple opacity model). label-3 is the minimum for any text; label-4 is decoration only. */
  --c-label-1: #f5f4f7;
  --c-label-2: rgba(245, 244, 247, .68);
  --c-label-3: rgba(245, 244, 247, .56);
  --c-label-4: rgba(245, 244, 247, .24);
  /* brand */
  --c-seal: #8b5cf6;
  --c-seal-fill: #7c4deb;          /* white text on this is 5.1:1; --c-seal itself is 4.2:1 */
  --c-seal-hi: #a78bfa;
  --c-lamp: #f3eee6;
  --c-lamp-ink: #0b0b10;
  --c-plus-gold: #e8c07e;          /* TRIPTIC+ members' mark, its line art (the gold tins, 3 November 2026) */
  --c-beam: #68c9ff;
  /* (pages polish, 28 October 2026; the owner: a bright cyan glow round Find a film's field) the focus ring is the app's own
     accent, one token for every ring; the beam stays a secondary accent where it is not a focus ring */
  --c-focus: var(--c-seal-hi);
  /* semantic */
  --c-ok: #8ee8cb;
  --c-caution: #f0c786;
  --c-danger: #ff8a94;
  /* film DNA axes: the only six hues; also used by the typographic poster */
  --c-dna-emotion: #ff9f7a;
  --c-dna-tone: #f5c46b;
  --c-dna-pace: #6fd6f0;
  --c-dna-worlds: #b9a3ff;
  --c-dna-scope: #8ee8b4;
  --c-dna-answers: #f59ac8;
  /* poster tint. --tint-rgb is "r,g,b"; ds-core clamps it to HSL L35-60 S<=70. */
  --tint-rgb: 139, 92, 246;
  --tint-wash: rgba(var(--tint-rgb), .16);
  --tint-edge: rgba(var(--tint-rgb), .32);
  --tint-glow: rgba(var(--tint-rgb), .45);

  /* type: SF only (system-ui resolves to SF Pro Text/Display on Apple devices; never name them).
     One family, hierarchy from size and weight. Ramp = Apple Large Dynamic Type sizes/lines, tracking in em from
     Apple's point values. Weights 400/500/600/700 only. Keep ALL tracking in the --tr-* tokens so it can be zeroed
     in one place after the on-device check (WebKit may already apply SF's own tracking to system-ui). */
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  /* The owner (9 October 2026): one editorial display face for film titles and the large headings, the system font for
     everything else. Fraunces (SIL OFL 1.1, self-hosted in public/assets/fonts with its licence; @font-face and the
     titles it sets are in ds-look.css, section 6). Anything it cannot draw falls back to the system face. */
  --font-display: "Fraunces TRIPTIC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --tr-display: -.008em;   /* a serif at display size wants a little less air than SF's large-title tracking */
  /* ONE ROOT NUMBER. Every size and line height in the ramp is a multiple of --type-unit, which is one CSS pixel times
     --text-scale. --text-scale is 1 unless text-size.js sets it on <html> (1 to 1.35), from the app's own Larger text
     switch and from the phone's text size. Nothing in the ramp is a length of its own, so the whole ramp moves
     together and nothing else has to know. A layer that needs a size off the ramp writes calc(Npx * var(--text-scale, 1))
     and never a bare pixel size. Tracking and weights do not scale. */
  --text-scale: 1;
  --type-unit: calc(1px * var(--text-scale));
  --fs-large-title: calc(34 * var(--type-unit)); --lh-large-title: calc(41 * var(--type-unit)); --fw-large-title: 700; --tr-large-title: .011em;
  --fs-title-1: calc(28 * var(--type-unit)); --lh-title-1: calc(34 * var(--type-unit)); --fw-title-1: 700; --tr-title-1: .013em;
  --fs-title-2: calc(22 * var(--type-unit)); --lh-title-2: calc(28 * var(--type-unit)); --fw-title-2: 700; --tr-title-2: -.012em;
  --fs-title-3: calc(20 * var(--type-unit)); --lh-title-3: calc(25 * var(--type-unit)); --fw-title-3: 600; --tr-title-3: -.023em;
  --fs-headline: calc(17 * var(--type-unit)); --lh-headline: calc(22 * var(--type-unit)); --fw-headline: 600; --tr-headline: -.025em;
  --fs-body: calc(17 * var(--type-unit)); --lh-body: calc(22 * var(--type-unit)); --fw-body: 400; --tr-body: -.025em; --lh-prose: calc(24 * var(--type-unit));
  --fs-callout: calc(16 * var(--type-unit)); --lh-callout: calc(21 * var(--type-unit)); --fw-callout: 400; --tr-callout: -.02em;
  --fs-subhead: calc(15 * var(--type-unit)); --lh-subhead: calc(20 * var(--type-unit)); --fw-subhead: 400; --tr-subhead: -.015em; --fw-subhead-strong: 500;
  --fs-footnote: calc(13 * var(--type-unit)); --lh-footnote: calc(18 * var(--type-unit)); --fw-footnote: 400; --tr-footnote: -.006em;
  --fs-caption-1: calc(12 * var(--type-unit)); --lh-caption-1: calc(16 * var(--type-unit)); --fw-caption-1: 400; --tr-caption-1: 0em; --fw-caption-1-strong: 500;
  --fs-caption-2: calc(11 * var(--type-unit)); --lh-caption-2: calc(13 * var(--type-unit)); --fw-caption-2: 400; --tr-caption-2: .005em; --fw-caption-2-strong: 600;
  --tr-caps: .04em;
  --fs-eyebrow: calc(12 * var(--type-unit)); --lh-eyebrow: calc(16 * var(--type-unit)); --fw-eyebrow: 600; --tr-eyebrow: .06em;
  /* aliases kept for sheets that predate the ramp rename: caption = caption-1 */
  --fs-caption: var(--fs-caption-1); --lh-caption: var(--lh-caption-1); --fw-caption: var(--fw-caption-1-strong); --tr-caption: var(--tr-caption-1);
  /* TRANSITIONAL (remove once ds-first-run.css has moved off them): the retired display-xl and mono steps */
  --fs-display-xl: var(--fs-large-title); --lh-display-xl: var(--lh-large-title); --fw-display-xl: var(--fw-large-title); --tr-display-xl: var(--tr-large-title);
  --fs-mono: var(--fs-footnote); --lh-mono: var(--lh-footnote); --fw-mono: var(--fw-subhead-strong); --tr-mono: 0em;

  /* radii (6 inner chips, 10 small controls, 14 rows/inputs/lists, 20 cards, 28 sheets, 999 pills) */
  --r-chip: 6px; --r-control: 10px; --r-row: 14px; --r-card: 20px; --r-sheet: 28px; --r-pill: 999px;

  /* ONE LIGHT SOURCE (owner, 17 October 2026; hub/docs/DESIGN-2026-10-17.md). The light hangs above the screen, a little
     to the upper left, like a projector's spill on a booth wall. Shadows fall away from it: down and a little right
     (--light-angle is the direction a shadow falls, a gradient angle: 180deg is straight down; x = y * --light-dx). The
     rim it catches is on the top and left edges (--hl-edge). Nothing glows evenly all round unless it is round, and no
     glow is a filter blur. tests/design-light.test.mjs holds every token and every ds-*.css shadow to it
     (scripts/design/light.mjs finds and fixes strays). */
  --light-angle: 160deg;
  --light-dx: .36;
  --hl-edge: inset .5px 1px 0 rgba(255, 255, 255, .08);          /* the rim the light catches: top and left */
  --hl-edge-strong: inset .5px 1px 0 rgba(255, 255, 255, .22);   /* on a lit (light-filled) control */
  --hl-gloss: linear-gradient(var(--light-angle), rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 42%);   /* a surface's sheen, brightest upper left */
  /* elevation: four levels, each a contact shadow and a cast shadow, both falling down-right; no coloured glows.
     e-1 rests on the page (rows, chips, flat cards), e-2 is lifted (cards, posters, buttons), e-3 floats (the tab bar,
     menus, a lifted card), e-4 is over everything (sheets, alerts). */
  --e-1: var(--hl-edge), .4px 1px 2px rgba(0, 0, 0, .22);
  --e-2: var(--hl-edge), 1px 3px 6px rgba(0, 0, 0, .24), 4px 12px 28px rgba(0, 0, 0, .32);
  --e-3: var(--hl-edge), 1.5px 4px 10px rgba(0, 0, 0, .28), 9px 24px 60px rgba(0, 0, 0, .5);
  --e-4: var(--hl-edge), 2px 6px 16px rgba(0, 0, 0, .3), 13px 36px 90px rgba(0, 0, 0, .58);
  /* only the shadow part, for a surface whose own rim is drawn elsewhere (a poster, a glass layer) */
  --e-2-cast: 1px 3px 6px rgba(0, 0, 0, .24), 4px 12px 28px rgba(0, 0, 0, .32);
  --e-3-cast: 1.5px 4px 10px rgba(0, 0, 0, .28), 9px 24px 60px rgba(0, 0, 0, .5);
  /* a sheet rises over the page: its lit top edge separates it, and its shadow falls on the page below */
  --e-sheet: var(--hl-edge-strong), 2px 6px 16px rgba(0, 0, 0, .3), 6px 18px 48px rgba(0, 0, 0, .42);

  /* the one frosted material: tab bar, nav bars, sheets, toasts, alerts only */
  --mat-chrome: rgba(14, 14, 20, .74);
  --mat-chrome-solid: #16161d;
  --mat-blur: blur(24px) saturate(160%);

  /* spacing: 4pt grid */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 80px;
  --gutter: 20px; --section-gap: 32px; --row-min: 52px; --target: 44px;

  /* motion additions: older names for the motion tokens in motion-system.css (--motion-*) */
  --mo-press: var(--motion-press);
  --mo-stagger: 40ms;
  --mo-ambient: var(--motion-slow);
  --mo-spring-press: var(--motion-spring);
  --mo-ease-press: var(--motion-curve);
  --ds-rubber-limit: 320;
}

/* ===== text size: where the type stops growing early =====
   Most of the app scrolls, so its type can grow to the full text scale and the page simply gets longer. A few parts
   are FITTED instead: the three and their cards (laid out by device-fit.js to the phone's height), the Daily
   Cryptic's room with its answer field and keyboard, and objects with words printed on them (a Collection's card,
   a "Try asking for" card, a film canister). Larger type there does not make a longer page, it pushes something off
   the screen or off the object. Those parts read the same ramp from a type unit that stops at --type-cap (x1.15
   unless they say otherwise; the numbers are in ds-text-size.css). The ramp is restated for them because a custom
   property is worked out where it is declared: the copies below are the same twelve steps
   (tests/text-size.test.mjs holds the two lists together).
   A new fitted part joins by taking the class .ds-type-cap or by being added to this selector. */
html.ds :is(.ds-type-cap, .trip-critical-layer, .cg-room, .cg-scope, .dslc-can, .dslc-card, .prompt-card, .ds-tt-hero, .two-film-card, .ds-ticket, .fc-card, .fc-fitted, .fc-slots, .ds-fr-logo, .ds-ten-card-title, .sp-caption, .welcome-screen) {
  --type-unit: calc(1px * min(var(--text-scale, 1), var(--type-cap, 1.15)));
  --fs-large-title: calc(34 * var(--type-unit)); --lh-large-title: calc(41 * var(--type-unit));
  --fs-title-1: calc(28 * var(--type-unit)); --lh-title-1: calc(34 * var(--type-unit));
  --fs-title-2: calc(22 * var(--type-unit)); --lh-title-2: calc(28 * var(--type-unit));
  --fs-title-3: calc(20 * var(--type-unit)); --lh-title-3: calc(25 * var(--type-unit));
  --fs-headline: calc(17 * var(--type-unit)); --lh-headline: calc(22 * var(--type-unit));
  --fs-body: calc(17 * var(--type-unit)); --lh-body: calc(22 * var(--type-unit));
  --fs-callout: calc(16 * var(--type-unit)); --lh-callout: calc(21 * var(--type-unit));
  --fs-subhead: calc(15 * var(--type-unit)); --lh-subhead: calc(20 * var(--type-unit));
  --fs-footnote: calc(13 * var(--type-unit)); --lh-footnote: calc(18 * var(--type-unit));
  --fs-caption-1: calc(12 * var(--type-unit)); --lh-caption-1: calc(16 * var(--type-unit));
  --fs-caption-2: calc(11 * var(--type-unit)); --lh-caption-2: calc(13 * var(--type-unit));
  --fs-eyebrow: calc(12 * var(--type-unit)); --lh-eyebrow: calc(16 * var(--type-unit));
  --lh-prose: calc(24 * var(--type-unit));
}

/* ===== Cryptic game room palette (owner, 2 Oct 2026; decision in hub/docs/DECISIONS.md) =====
   The Daily Cryptic is the app's one bright room: marquee lights and candy accents on a deep violet-to-magenta
   stage. These are feature tokens, scoped to that room (.cg-room: the Cryptic screens) and to its pieces that live
   outside a screen (.cg-scope: the How it works sheet, the confetti layer, the Rituals card on Discover). Nothing
   else in the app may use them. Text pairs (checked in tests/cryptic-game.test.mjs, 4.5:1 or better):
   --cg-cream, --cg-cream-dim and --cg-pop on the stage gradient at its lightest (under its glows and a glass panel);
   --cg-ink on --cg-paper, --cg-pop, --cg-mint, --cg-coral and --cg-lilac; --cg-ink-soft on --cg-paper. */
html.ds :is(.cg-room, .cg-scope) {
  --cg-bg-top: #2a1178;
  --cg-bg-mid: #5a1fb4;
  --cg-bg-low: #7f1a8e;
  --cg-bg-deep: #1c0a52;
  --cg-ink: #23103d;
  --cg-ink-soft: #5b4480;
  --cg-cream: #fff6e5;
  --cg-cream-dim: rgba(255, 246, 229, .88);
  --cg-paper: #fff6e5;
  --cg-paper-edge: #ead8bd;
  --cg-pop: #ffd43b;
  --cg-pop-hi: #ffe98a;
  --cg-pop-deep: #d08f00;
  --cg-coral: #ff6b86;
  --cg-coral-deep: #c9304f;
  --cg-mint: #3ee6b0;
  --cg-mint-deep: #0f9a70;
  --cg-sky: #6fd6ff;
  --cg-sky-deep: #2a94c4;
  --cg-silver: #d9dfec;
  --cg-silver-deep: #9aa5bd;
  --cg-plus: #0b7a57;
  --cg-amber: #ff8a3d;
  --cg-lilac: #dccdff;
  /* glass in this room is a deep violet tint, never a white wash: text on a panel always has more contrast than on the stage */
  --cg-panel: rgba(28, 8, 78, .36);
  --cg-panel-strong: rgba(28, 8, 78, .5);
  --cg-panel-line: rgba(255, 255, 255, .26);
  --cg-panel-deep: rgba(14, 3, 44, .62);
  --cg-shadow: rgba(18, 4, 56, .55);
  --cg-glow-warm: rgba(255, 212, 59, .2);
  --cg-glow-rose: rgba(255, 107, 134, .18);
  --cg-beam: rgba(255, 246, 229, .26);
  --cg-beam-soft: rgba(255, 246, 229, .04);
  --cg-spool-shade: #eadcf8;
  --cg-spool-line: #cbb6ee;
}

/* ===== Flick in costume (owner, 8 and 13 October 2026; hub/docs/FLICK-2026-10-13.md) =====
   Feature tokens for the soft pool of light Flick stands in, in costume, in a few quiet places (ds-flick.css). His
   costumes are the owner's own renders (flick-art.js): every colour of them is in the picture, none is drawn here. */
html.ds .spc-art {
  --spc-pool: rgba(255, 246, 229, .12);
  --spc-pool-edge: rgba(255, 246, 229, 0);
}

/* ===== Film card palette (owner's brief and prototypes, 6 October 2026; hub/docs/FILM-CARDS-2026-10-07.md) =====
   A film card is a printed object: navy card stock, a gold edge, a drawing on a flat colour and one holographic
   finish. These are feature tokens, scoped to the card itself (.fc-card, .fc-mini) and to the surfaces that hold one
   (.fc-scope: My cards, the reveal, the 3D view, the Library shelf, the line under a film's rating, the starter
   sheet). Nothing else in the app may use them. A drawing's own colours, and the flat colour behind it, are data
   (they arrive with the card); these are only the card around it.
   --card-title-font is the ONE place in the app that names a serif. Every word of the interface is SF (--font-ui);
   the lettering PRINTED ON A CARD is set in the system's serif italic, as on the owner's prototype, the way a
   ticket or a book has its own lettering. It is named here once and used only by what is printed on a card: the
   film's title (front, and on the back's stub) and the one line of ours under the drawing
   (tests/design-system.test.mjs holds the exception to exactly this line; tests/film-cards-card.test.mjs names the
   three rules that may use it). It is never an imitation of any film's own title lettering. */
html.ds :is(.fc-scope, .fc-card, .fc-mini) {
  --card-ink: #0c1022;
  --card-ink-2: #11173a;
  --card-gold: #ffd27a;
  --card-gold-hi: #f7dc9a;
  --card-gold-mid: #e9c574;
  --card-gold-deep: #a87a2a;
  --card-gold-ink: #2a1c00;
  --card-gold-line: rgba(255, 210, 122, .85);
  --card-gold-faint: rgba(255, 210, 122, .55);
  --card-gold-wash: rgba(255, 210, 122, .08);
  --card-cream: #fff8ea;
  --card-number: #f3e6c4;
  --card-meta: #c9cfe4;
  --card-spark: #fff3cf;
  --card-room: #04050b;
  --card-room-glow: rgba(60, 70, 140, .55);
  --card-room-deep: rgba(4, 5, 11, .96);
  /* the holographic foil: seven colours of one rainbow, in order (the first closes the loop) */
  --card-r1: #ff5f6d; --card-r2: #ffc371; --card-r3: #f9f871; --card-r4: #5ff2a6; --card-r5: #5fd0ff; --card-r6: #a78bfa; --card-r7: #ff7ad9;
  --card-rainbow: repeating-linear-gradient(115deg, var(--card-r1) 0%, var(--card-r2) 7%, var(--card-r3) 14%, var(--card-r4) 21%, var(--card-r5) 28%, var(--card-r6) 35%, var(--card-r7) 42%, var(--card-r1) 49%);
  /* gold-stamped lettering (the line under the drawing): the card's golds across a band of light, slid by the card's angle */
  --card-gold-foil: linear-gradient(100deg, var(--card-gold-mid) 0%, var(--card-gold) 34%, var(--card-gold-hi) 45%, var(--card-cream) 50%, var(--card-gold-hi) 55%, var(--card-gold) 66%, var(--card-gold-mid) 100%);
  --card-title-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --card-radius: 16px;
  --card-art-radius: 8px;
  /* ---- three finishes (owner's approved prototype, 7 October 2026; hub/docs/FILM-CARDS-SEASONS-APP-2026-10-07.md) ----
     Standard is matte: printed light only (a soft top-left wash), a paper tooth, the inner rule pressed in. */
  --card-matte-hi: rgba(255, 255, 255, .055);
  --card-matte-lo: rgba(0, 0, 0, .22);
  --card-matte-violet: rgba(108, 92, 214, .30);
  --card-matte-blue: rgba(52, 84, 200, .34);
  --card-stock-hi: #f3ebd9;
  --card-stock-lo: #02030a;
  --card-stock-ink: rgba(222, 212, 190, .07);
  --card-press-lo: rgba(0, 0, 0, .55);
  --card-press-hi: rgba(255, 255, 255, .11);
  /* Rare is black stock and gold: five golds from highlight to shade, and one band of light across them */
  --card-rare-stock: #08080a;
  --card-rare-stock-2: #15141a;
  --card-rare-plate: #0c0b0a;
  --card-rare-stripe: #0d0d10;
  --card-rare-art: #070c09;
  --card-rg-hi: #fff4d2;
  --card-rg-1: #f3dfa6;
  --card-rg-2: #dfc072;
  --card-rg-3: #bd9544;
  --card-rg-deep: #7c5c22;
  --card-rare-foil: linear-gradient(100deg, var(--card-rg-3) 0%, var(--card-rg-2) 26%, var(--card-rg-1) 41%, var(--card-rg-hi) 50%, var(--card-rg-1) 59%, var(--card-rg-2) 74%, var(--card-rg-3) 100%);
  --card-rare-line: rgba(226, 196, 122, .92);
  --card-rare-faint: rgba(226, 196, 122, .42);
  --card-rare-wash: rgba(226, 196, 122, .07);
  --card-rare-text: #efe6cf;
  --card-rare-meta: #b3a88f;
  --card-rare-glare: rgba(255, 236, 190, .30);
  --card-rare-glow: rgba(255, 214, 130, .85);
  --card-rare-glow-soft: rgba(255, 200, 110, .38);
  --card-rare-bloom: rgba(255, 222, 150, .95);
  --card-rare-bloom-2: rgba(232, 170, 70, .42);
  --card-rare-flash: rgba(255, 232, 170, .9);
  --card-rare-mote: #fff1cc;
  --card-rare-room: rgba(176, 128, 44, .40);
  --card-foil-bloom: rgba(214, 228, 255, .9);
  --card-foil-bloom-2: rgba(150, 140, 255, .32);
  /* the picture's own frame on a Rare (the dark that gathers at its edges), and the room going dark for its reveal */
  --card-frame-1: rgba(0, 0, 0, .9);
  --card-frame-2: rgba(0, 0, 0, .62);
  --card-veil: rgba(1, 1, 3, .86);
  --card-floor: rgba(0, 0, 0, .9);
  /* a card not yet the person's (missed, or this week's before it is earned): a silhouette on dark stock */
  --card-shade-stock: #0a0c18;
  --card-shade-ink: rgba(201, 207, 228, .16);
  --card-shade-line: rgba(201, 207, 228, .22);
}
@supports (corner-shape: squircle) {
  html.ds { --ds-squircle: 1; }
  /* Cards and rows only. A button is a capsule (one primary shape, below): with a squircle corner a 999px radius is
     drawn as a soft box, so the same button was a capsule in one engine and a box in another, beside true capsules. */
  html.ds :is(.ds-list, .ds-row, .ds-card, .ds-poster-fallback) { corner-shape: squircle; }
}

/* ===== generated remaps (design-system-remap.mjs): type floor, weights, blur cap, radii, neutral colour ===== */
/* BEGIN generated: type-floor */
:where(html.ds) .welcome-actions span{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .auth-copy p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .legal{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .profile-control{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .search-glass textarea{font-size:calc(17 * var(--type-unit))}
:where(html.ds) .query-footer > span{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .section-label button{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .prompt-copy b{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .glass-nav button{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .mystery-number{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .prepare-copy p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .reveal-copy p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .result-number,:where(html.ds) .poster-rank{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .poster-copy span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .match-chip{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .revealed-3 .poster-copy span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .film-title > span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .film-title p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .watch-row{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .destination-heading p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .featured-collection small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .featured-collection button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .collection-list small,:where(html.ds) .library-sections small{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .library-summary span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .profile-identity p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .taste-card > div:first-child{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .taste-card p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .taste-card button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .profile-list button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .profile-list b{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .calibration-copy span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .calibration-copy p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .calibration-poster span{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .eyebrow{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .friday-ribbon > span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .friday-ribbon b{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .onboarding-screen > header{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .onboarding-copy p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .onboarding-card span{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .permission-screen > p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .permission-preview span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .permission-preview small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .film-v4 .film-title > span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .film-v4 .film-title p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .decision-actions span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .film-v4 .why-panel > button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .watch-options > div small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .watch-options button span{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .watch-options button strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .spoiler-safe > span{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .spoiler-safe p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .spoiler-safe button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .friday-copy p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .friday-back b{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .friday-front small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .friday-hint{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .settings-group > span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .settings-group button small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .settings-group button strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .settings-note p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .watchlist-screen > header > div span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .watchlist-grid strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .watchlist-grid small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .clarify-screen > p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .constraint-card span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .clarify-screen > small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .revealed-3 .poster-copy strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .collection-hero span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .collection-hero p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .collection-grid strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .collection-grid small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .taste-actions button span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .taste-complete p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .charged-hint{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .friday-back em{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .share-screen header>span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .share-preview span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .share-preview p{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .share-copy p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .share-destinations button{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .final-film>b{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .final-film>strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .final-film>small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .friday-complete .friday-front strong{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .friday-complete .friday-front small{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .friday-complete .friday-front strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .friday-complete .friday-front small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .reveal-complete .final-film > strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .list-search input{font-size:calc(17 * var(--type-unit))}
:where(html.ds) .collection-list button > span:nth-child(2) small:first-child{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .subpage-header span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .sublist small{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .plan-card span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .decision-screen p,:where(html.ds) .system-state-screen p,:where(html.ds) .receiver-screen p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .state-grid span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .receiver-cards b{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .receiver-screen > small{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .auth-screen .legal{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .auth-screen .auth-copy p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .auth-email .email-panel input{font-size:calc(17 * var(--type-unit))}
:where(html.ds) .auth-email .email-panel small{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .discover-v4 .profile-control{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .discover-v4 .friday-ribbon>span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .discover-v4 .friday-ribbon b{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .discover-v4 .discover-heading p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .discover-v4 .request-label{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .discover-v4 .search-glass textarea{font-size:calc(17 * var(--type-unit))}
:where(html.ds) .discover-v4 .query-footer>span{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .discover-v4 .search-preferences button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .discover-v4 .memory-links button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .discover-v4 .section-label>button{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .discover-v4 .prompt-copy b{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .discover-v4 .glass-nav button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .notification-premium > p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .permission-footnote{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .decision-actions span{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .refinement-screen > p,:where(html.ds) .replacement-screen > p,:where(html.ds) .reason-sheet > p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .refinement-screen label span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .refinement-screen textarea{font-size:calc(17 * var(--type-unit))}
:where(html.ds) .confidence-card span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .confidence-card small{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .share-trio-preview b{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .share-toggle button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .search-preferences button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .understood-summary span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .understood-summary p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .understood-summary button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .feedback-link{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .demo-screen > p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .demo-actions small{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .dna-stages small{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .a11y-card b{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .a11y-preview > small{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .a11y-controls button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .spoken-example span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .spoken-example p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .branded-poster > span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .memory-control button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .device>.persistent-glass-nav button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .discover-v5 .prompt-copy{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .discover-v5 .prompt-explore-action{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .discover-v5 .prompt-copy b{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .explore-screen .list-search input{font-size:calc(17 * var(--type-unit))}
:where(html.ds) .explore-featured small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .explore-featured p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .explore-featured button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .explore-shelf p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .explore-shelf>header button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .explore-insufficient small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .explore-insufficient p{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .explore-card-copy small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .explore-card-copy strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .explore-card-copy em{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .explore-filter-result>span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .explore-search-summary span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .explore-search-section>div:first-child small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .film-results>div:last-child button>small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .explore-loading span{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .explore-recovery p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .explore-recovery button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .explore-screen>.destination-heading p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .explore-search-guidance{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .explore-screen .filter-pills button{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .collection-save{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .collection-grid-intro span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .collection-grid-intro p{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .collection-preview .share-description{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .collection-preview small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .device.manual-large-text .explore-screen>.destination-heading p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .device.manual-large-text .explore-search-guidance{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .daily-cryptic-tile small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .daily-cryptic-tile p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .library-empty p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .taste-sprint-screen .onboarding-copy p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .taste-pace-control{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .taste-count{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .interests-screen>header>span{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .interests-copy p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .interest-grid em{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .interest-grid button>small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .interest-actions small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .daily-cryptic-home-entry small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-hero p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .cryptic-rules span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-rhythm{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-privacy{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-play-screen>header>span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-play-screen>header>strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .cryptic-clues span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-clues p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .cryptic-guess-panel label{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-guess-panel input{font-size:calc(17 * var(--type-unit))}
:where(html.ds) .cryptic-guess-panel small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-history>span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-history i{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .cryptic-result-art small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-result-art p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .cryptic-result-copy p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .cryptic-score span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-score small{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .cryptic-score em{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-archive-date{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .cryptic-archive-intro span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-archive-intro p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .cryptic-calendar-strip span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-setting-hero p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .cryptic-notification-card small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-notification-card p{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .cryptic-nudge-copy p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .ritual-query span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .ritual-query p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .ritual-card-back b{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .ritual-card-back small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .ritual-card-front strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .ritual-card-front small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .ritual-card-front em{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .ritual-copy p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .ritual-understood>span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .ritual-understood i{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .protected-session-note{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .ritual-error p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .trailer-status b{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .trailer-status small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .trailer-controls button{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .trailer-unavailable p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .film-v5 .why-panel li{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .film-v5 .why-panel li i{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .film-v5 .why-panel .reasoning-disclosure{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .reasoning-detail span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .reasoning-detail p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .reasoning-detail small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .membership-screen>p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .membership-screen>ul i{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .store-state span,:where(html.ds) .membership-status span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .store-state small,:where(html.ds) .membership-status small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .plan-structure strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .membership-legal{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .membership-fixture-tools summary{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .membership-fixture-tools button{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .continue-triptic span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .continue-triptic b{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .voice-error{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .library-compact-bar span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .library-group>h2{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .taste-evolution>span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .taste-evolution>p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .why-not-panel>button small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .why-not-panel>div p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .why-not-panel>div small{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .film-v5 .trailer-status b,:where(html.ds) .film-v5 .trailer-status small{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .film-v5 .why-panel li i{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .why-not-panel>button small{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .discover-v5.is-listening-space::after{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .discover-v5 .search-glass.is-editing textarea{font-size:calc(17 * var(--type-unit))}
:where(html.ds) .ritual-copy p{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .phase-settled .ritual-copy p{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .ritual-secondary-actions button{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .orb-instruction{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .taste-film-copy span{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .premium-taste-controls button span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .ritual-card-front.verified-film-card strong{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .ritual-card-front.verified-film-card small{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .ritual-card-front.verified-film-card em{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .premium-result-toolbar button span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .reasoning-sheet header span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .reasoning-sheet article>b{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .reasoning-sheet article p,:where(html.ds) .why-not p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .reasoning-sheet article small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .why-not span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cast-section>header small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cast-track strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .cast-track small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .verified-friday-front strong{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .verified-friday-front small{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .dna-map>header span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .dna-map>header small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .dna-axis span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .dna-axis>small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .dna-map>p{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .recon-cryptic>header span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .cryptic-scoreline{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-feedback{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-clue-rail article span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .cryptic-clue-rail article p{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .cryptic-clue-rail article em{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-clue-rail article.is-current p{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .discover-v5 .search-glass .orb-instruction{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .taste-mini-map small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .taste-mini-map b{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .taste-mini-map.insufficient-data p{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .phase-settled .ritual-copy .eyebrow{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .discover-v5 .search-glass .orb-instruction{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .premium-film-actions button span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .confidence-badge{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .recon-ritual.phase-settled .ritual-understood i{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .device.manual-large-text .ritual-copy p,:where(html.ds) .device.manual-large-text .friday-copy p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .device.manual-large-text .persistent-glass-nav button{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .media-trailer-copy>span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .media-trailer-copy p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .media-trailer-external{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .media-player-meta span,:where(html.ds) .media-player-meta a{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .media-watch-options>header small{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .availability-state{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .provider-destination>span strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .provider-destination>span small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .provider-all-link>span strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .provider-all-link>span small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .provider-trust-note{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .availability-reminder strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .availability-reminder small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .functional-sheet>span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .functional-sheet p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .film-continuity-actions button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .film-compact-header small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .integration-status{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .welcome-v4 .welcome-actions::after{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .discover-v5.first-discovery .discover-heading::before{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .safety-intervention>p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .critical-request-capsule span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .critical-request-capsule p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .critical-card-back>b{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .critical-card-back>small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .critical-card-front strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .critical-card-front small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .critical-card-front em{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .critical-status span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .critical-status p{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .critical-results>.eyebrow{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .critical-understood>span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .critical-understood i{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .critical-film-cta{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .critical-result-toolbar button span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .critical-result-toolbar .tool-reason::before{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .critical-reasoning-sheet header span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .critical-reasoning-sheet article>b{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .critical-reasoning-sheet article strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .critical-reasoning-sheet article p{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .critical-reasoning-sheet article small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .film-v5 .critical-film-dock button span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .dna-map>header span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .dna-map>header small{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .dna-axis span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .dna-axis>small{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .dna-map>p{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .device.manual-large-text .critical-status p{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .device.manual-large-text .critical-request-capsule p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .device.manual-large-text .critical-card-front strong{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .premium-welcome .welcome-message .eyebrow{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .premium-welcome .welcome-message p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .premium-welcome .welcome-actions .quiet-button{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .premium-welcome .welcome-actions>span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .premium-discover .profile-control{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .premium-discover>.friday-ribbon>span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .premium-discover>.friday-ribbon>b{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .premium-discover .discover-kicker{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .premium-discover>.discover-heading>p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .premium-composer .request-label{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .composer-guidance{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .orb-instruction{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .premium-discover>.voice-error{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .discover-shortcuts button{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .discover-shortcuts i{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .discover-inspiration>header span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .discover-inspiration header button{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .discover-inspiration .prompt-title{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .discover-inspiration .prompt-copy b{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .critical-request-capsule p{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .critical-card-front strong{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .critical-card-front small{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .critical-card-front em{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .critical-status p{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .trip-phase-settled .critical-request-capsule span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .trip-phase-settled .critical-request-capsule p{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .critical-results>.eyebrow{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .critical-understood>p{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .critical-result-toolbar button span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .premium-cryptic-home .cryptic-kicker{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .premium-cryptic-home .cryptic-intro>p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .premium-cryptic-home .cryptic-rules span{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .premium-cryptic-home .cryptic-arrival-footer .cryptic-privacy{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .premium-cryptic-home.cryptic-compact .cryptic-kicker{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .premium-cryptic-home.cryptic-compact .cryptic-intro>p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .premium-cryptic-home.cryptic-compact .cryptic-rules span{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .premium-cryptic-home.cryptic-compact .cryptic-next-film{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .premium-cryptic-home.cryptic-compact .cryptic-arrival-footer .cryptic-privacy{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .premium-cryptic-home.cryptic-tall .cryptic-kicker{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .premium-cryptic-home.cryptic-tall .cryptic-intro>p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .device.manual-large-text .premium-cryptic-home .cryptic-intro>p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .recon-cryptic .cryptic-clue-rail article p{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .recon-cryptic .cryptic-scoreline{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .device.manual-large-text .critical-understood>p{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .device.manual-large-text .critical-result-toolbar button span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .p20-constraints button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .p20-constraint-note{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .p20-dna-node strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .p20-dna-caption{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .p20-share-formats button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .p20-peek-card span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .p20-peek-card p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .p20-peek-card small{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .p20-handoff-card p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .p20-return-line{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .p20-taste-insight span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .p20-taste-insight p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .p20-live-activity header span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .p20-live-activity header small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .p20-live-activity p{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .p20-resume-chip{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .p20-sensory-preview span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .p20-sensory-preview p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .p20-sensory-preview button{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .card100-scene .critical-card-front strong{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .card100-scene .critical-card-front small{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .card100-scene .critical-card-front em{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .card100-scene.trip-phase-settled .critical-card:not(.rank-1) .critical-card-front strong{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .premium-composer .query-submit.query-submit-plain>span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .taste-profile-compact span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .taste-intelligence-profile .profile-identity>p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .taste-intelligence-insight p{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .taste-signal{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .taste-intelligence-card>small{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .taste-intelligence-card>button{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .taste-narrative>span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .premium-welcome .welcome-actions>span{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .premium-composer .composer-guidance{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .premium-composer .query-submit.query-submit-plain>span{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .discover-shortcuts button{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .discover-inspiration>header span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .discover-inspiration header button{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .discover-inspiration .prompt-copy b{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .premium-composer .request-count{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .premium-composer .query-save,:where(html.ds) .premium-composer .query-clear{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .daily-cryptic-home-entry small{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .daily-cryptic-home-entry p{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .critical-request-capsule p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .critical-status>span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .critical-status p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .critical-understood>span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .critical-understood>p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .critical-result-toolbar button span{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .device.manual-large-text .critical-status p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .device.manual-large-text .critical-card-front small{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .device.manual-large-text .critical-understood>p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .critical-results-heading>.eyebrow{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .card100-scene.trip-phase-settled .critical-card-front small{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .card100-scene.trip-phase-settled .critical-card.rank-1 .critical-card-front small{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .critical-compare-hint{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .critical-insight>span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .critical-insight>p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer.critical-compact .critical-request-capsule p{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer.critical-compact .critical-results-heading>.eyebrow{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .trip-critical-layer.critical-compact .critical-insight>span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer.critical-compact .critical-insight>p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer.critical-compact .critical-result-toolbar button span{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .device .film-v5 .cast-unavailable p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .device .film-reaction-heading>span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .device .film-reaction p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .device .request-fit p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .trip-critical-layer .critical-request-capsule>span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer .critical-request-capsule>p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer .critical-status>span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer .critical-status>p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer.trip-phase-settled .critical-results-heading>.eyebrow{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer.trip-phase-settled .critical-card-front small{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer.trip-phase-settled .critical-card[data-slot="center"] .critical-card-front small,:where(html.ds) .trip-critical-layer.trip-phase-settled .critical-card.rank-1:not([data-slot]) .critical-card-front small{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer.card100-scene .critical-card.is-revealed[data-long-title="true"]:not(.rank-1) .critical-card-front strong{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer .critical-artwork-fallback{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .trip-critical-layer .critical-artwork-fallback>span:last-child{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .trip-critical-layer.trip-phase-settled .critical-compare-hint{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer .critical-insight>span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer .critical-insight>p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer.critical-compact .critical-request-capsule>span{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer.critical-compact .critical-request-capsule>p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer.critical-compact.trip-phase-settled .critical-results-heading>.eyebrow{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer.critical-compact.trip-phase-settled .critical-card-front small{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer.critical-compact.trip-phase-settled .critical-compare-hint{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .trip-critical-layer.critical-compact .critical-result-toolbar>button>span{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .share-screen.trio-share .share-trio-poster-fallback em{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .share-screen.trio-share .share-trio-rank{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .share-screen.trio-share .share-trio-meta strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .share-screen.trio-share .share-trio-meta small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .share-screen.trio-share .share-trio-preview.sealed em{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .share-screen.trio-share>header>.share-header-title{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .share-screen.trio-share .share-copy p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .share-screen.trio-share.share-compact .share-trio-preview.sealed em{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .share-screen.trio-share.share-compact .share-trio-rank{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .share-screen.trio-share.share-compact .share-trio-meta strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .share-screen.trio-share.share-compact .share-trio-meta small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .share-screen.trio-share.share-compact .share-copy p{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .share-screen.trio-share.share-compact .share-toggle button{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .share-screen.trio-share.share-compact .share-destination{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .share-screen.trio-share.share-compact .share-destination>span{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .share-screen.trio-share.share-tall .share-copy p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .share-screen.trio-share.share-tall .share-trio-meta small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-game-score small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-section-kicker,:where(html.ds) .premium-cryptic .eyebrow{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .premium-cryptic-intro p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .premium-cryptic-rules span{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .premium-cryptic-access-note{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .cryptic-cost-line{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .cryptic-clue-stack article.is-current > span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-clue-number{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .cryptic-clue-stack article.is-revealed:not(.is-current) p,:where(html.ds) .cryptic-clue-stack article.is-sealed p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .cryptic-clue-stack article.is-sealed p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .cryptic-reveal-zone > p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .premium-cryptic-play .cryptic-guess-panel label{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .premium-cryptic-play .cryptic-guess-panel input{font-size:calc(17 * var(--type-unit))}
:where(html.ds) .premium-cryptic-play .cryptic-guess-panel > small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-review-notice{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .cryptic-reward > p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .cryptic-answer-card small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-answer-card p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .cryptic-result-stats span{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .cryptic-verified-pill{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-page-heading p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .cryptic-rank-hero > span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-rank-hero p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .cryptic-leaderboard-row > span small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-worldwide-note{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .cryptic-archive-date small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-archive-copy small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-paywall-copy > p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .cryptic-membership-benefits i{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .cryptic-store-state > span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-store-state small{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .cryptic-membership-legal{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-product-state p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .manual-large-text .cryptic-clue-stack article.is-revealed:not(.is-current) p,:where(html.ds) .manual-large-text .cryptic-clue-stack article.is-sealed p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .cryptic-header-score{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .premium-cryptic-home .cryptic-access-note small{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .cryptic-clue-stack article.is-current > em{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .premium-cryptic .cryptic-time-rules p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .cryptic-rank-card small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-rank-card em{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-unranked-card small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-unranked-card em{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .cryptic-verification-note{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .cryptic-membership-card > div > span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-store-state p{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .cryptic-cost-line,:where(html.ds) .premium-cryptic-play .cryptic-guess-panel > small,:where(html.ds) .cryptic-worldwide-note,:where(html.ds) .cryptic-verification-note,:where(html.ds) .cryptic-membership-legal{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .cryptic-leaderboard-row > span small,:where(html.ds) .cryptic-archive-copy small,:where(html.ds) .cryptic-store-state p,:where(html.ds) .cryptic-store-state strong,:where(html.ds) .cryptic-membership-benefits li,:where(html.ds) .cryptic-rank-card em{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .cryptic-header-score,:where(html.ds) .cryptic-rank-card small,:where(html.ds) .cryptic-archive-date small,:where(html.ds) .cryptic-store-state > span{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .cryptic-resume-card span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .cryptic-resume-card small{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .device .collections-api-search input{font-size:calc(17 * var(--type-unit))}
:where(html.ds) #device .api-collection-shelf>header p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) #device .api-collection-card .explore-card-copy small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) #device .collections-api-results[data-filtered="true"] .api-collection-card small{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .device .first-run-edition>p.first-run-edition-help{font-size:calc(15 * var(--type-unit))}
:where(html.ds) #device .taste-choice-evidence>p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .device .settings-operation p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .device .library-premium .destination-heading p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .device .library-cover-copy small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .device .watchlist-controls select{font-size:calc(17 * var(--type-unit))}
:where(html.ds) .device .viewing-checkin-label{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .device .viewing-checkin-heading p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .device .fingerprint-dimension small{font-size:calc(12 * var(--type-unit))}
:where(html.ds) #device .taste-intelligence-profile .profile-identity > p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) #device .fingerprint-axis-evidence p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .collectible-share>header>span,:where(html.ds) .collectible-receiver>header>span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .collectible-masthead>span:last-child{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .collectible-film.is-sealed>small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .collectible-caption>span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .collectible-footer>span{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .collectible-receiver>p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .share-link-recovery p,:where(html.ds) .share-link-recovery small{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .share-link-recovery textarea{font-size:calc(17 * var(--type-unit))}
:where(html.ds) .refinement-live>p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .refinement-live textarea{font-size:calc(17 * var(--type-unit))}
:where(html.ds) .refinement-kept .eyebrow{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .refinement-live .refinement-sent p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .request-reading-body>p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .request-reading-body li p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .refinement-kept>textarea{font-size:calc(17 * var(--type-unit))}
:where(html.ds) .triptic-review-indicator{font-size:calc(11 * var(--type-unit))}
html.ds.triptic-unscaled-web #device .discover-heading > p{font-size:calc(15 * var(--type-unit)) !important}
html.ds.triptic-unscaled-web #device .composer-guidance{font-size:calc(12 * var(--type-unit)) !important}
html.ds.triptic-unscaled-web #device .daily-cryptic-home-entry p{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) #device .film-title>p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) #device .media-trailer-copy p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) #device .feedback-sheet>p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .triptych-spine>button>i>b{font-size:calc(13 * var(--type-unit))}
@media (max-height:680px){
:where(html.ds) .discover-v4 .discover-heading p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .discover-v4 .search-glass textarea{font-size:calc(17 * var(--type-unit))}
:where(html.ds) .discover-v4 .prompt-copy{font-size:calc(12 * var(--type-unit))}
:where(html.ds) .memory-control button{font-size:calc(12 * var(--type-unit))}
}
@media (max-width:360px){
:where(html.ds) .device.manual-large-text .premium-result-toolbar button{font-size:calc(12 * var(--type-unit)) !important}
}
@media (max-height:760px){
:where(html.ds) .recon-friday.friday-complete .friday-copy p{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .premium-discover>.friday-ribbon>b{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .premium-discover>.discover-heading>p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .premium-composer .composer-guidance{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .discover-shortcuts button{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .discover-inspiration header button{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .discover-inspiration .prompt-title{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .discover-inspiration .prompt-copy b{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .discover-shortcuts button{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .discover-inspiration .prompt-copy b{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .daily-cryptic-home-entry p{font-size:calc(13 * var(--type-unit)) !important}
}
@media (min-height:761px){
:where(html.ds) .recon-ritual.phase-settled .ritual-understood i{font-size:calc(11 * var(--type-unit)) !important}
}
@media (max-width:560px) and (max-height:640px){
:where(html.ds) .premium-welcome .welcome-message .eyebrow{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .premium-welcome .welcome-message p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .premium-welcome .welcome-actions>span{font-size:calc(12 * var(--type-unit)) !important}
}
@media (max-height:700px){
:where(html.ds) .discover-inspiration .prompt-title{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .discover-inspiration .prompt-copy b{font-size:calc(13 * var(--type-unit)) !important}
}
@media (min-height:880px){
:where(html.ds) .premium-discover.friday-consumed-home .daily-cryptic-home-entry p,:where(html.ds) .premium-discover.friday-complete-home .daily-cryptic-home-entry p{font-size:calc(13 * var(--type-unit)) !important}
}
@media (max-width:560px) and (max-height:720px){
:where(html.ds) .share-screen.trio-share .share-trio-preview.sealed em{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .share-screen.trio-share .share-trio-rank{font-size:calc(11 * var(--type-unit)) !important}
:where(html.ds) .share-screen.trio-share .share-trio-meta strong{font-size:calc(13 * var(--type-unit))}
:where(html.ds) .share-screen.trio-share .share-trio-meta small{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .share-screen.trio-share .share-copy p{font-size:calc(13 * var(--type-unit)) !important}
:where(html.ds) .share-screen.trio-share .share-toggle button{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .share-screen.trio-share .share-destination{font-size:calc(12 * var(--type-unit)) !important}
:where(html.ds) .share-screen.trio-share .share-destination>span{font-size:calc(12 * var(--type-unit)) !important}
}
@media (max-width: 375px){
:where(html.ds) .cryptic-cost-line{font-size:calc(11 * var(--type-unit))}
:where(html.ds) .premium-cryptic-play .cryptic-guess-panel input{font-size:calc(17 * var(--type-unit))}
:where(html.ds) .cryptic-result-stats span{font-size:calc(12 * var(--type-unit))}
}
@media (max-height: 720px){
:where(html.ds) .premium-cryptic-home .cryptic-intro > p{font-size:calc(15 * var(--type-unit)) !important}
}
@media (max-width:360px) and (max-height:650px){
:where(html.ds) #device .collections-api-header p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) #device .api-collection-shelf>header p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) #device:not(.manual-large-text) .taste-refinement-screen:not(.first-run-taste) .onboarding-copy p{font-size:calc(15 * var(--type-unit)) !important}
}
@media (max-height:650px){
:where(html.ds) #device .first-run-screen:has(.taste-deck) .onboarding-copy p{font-size:calc(15 * var(--type-unit)) !important}
:where(html.ds) .refinement-live>p{font-size:calc(15 * var(--type-unit))}
:where(html.ds) .refinement-kept p{font-size:calc(15 * var(--type-unit))}
}
@media (max-width:350px){
:where(html.ds) .collectible-masthead>span:last-child{font-size:calc(11 * var(--type-unit))}
}
/* END generated: type-floor */

/* BEGIN generated: weights */
:where(html.ds) .primary-button{font-weight:700}
:where(html.ds) .film-title > span{font-weight:600}
:where(html.ds) .why-panel b{font-weight:500}
:where(html.ds) .eyebrow{font-weight:600}
:where(html.ds) .onboarding-actions button:last-child{font-weight:600}
:where(html.ds) .watch-options > div span{font-weight:600}
:where(html.ds) .swipe-verdict{font-weight:700}
:where(html.ds) .destructive-button{font-weight:600}
:where(html.ds) .auth-screen .auth-copy h1{font-weight:700}
:where(html.ds) .auth-screen .provider-button{font-weight:600}
:where(html.ds) .discover-v4 .friday-ribbon strong{font-weight:600}
:where(html.ds) .discover-v4 .discover-heading h1{font-weight:700}
:where(html.ds) .discover-v4 .request-label{font-weight:600}
:where(html.ds) .discover-v4 .section-label>span{font-weight:500}
:where(html.ds) .dna-stages strong{font-weight:600}
:where(html.ds) .memory-control button{font-weight:500}
:where(html.ds) .discover-v5 .prompt-heading>span{font-weight:600}
:where(html.ds) .explore-featured small{font-weight:600}
:where(html.ds) .continue-triptic span{font-weight:700}
:where(html.ds) .continue-triptic b{font-weight:600}
:where(html.ds) .library-group>h2{font-weight:700}
:where(html.ds) .library-art.friday-art .library-symbol::before{font-weight:600}
:where(html.ds) .taste-evolution>span{font-weight:600}
:where(html.ds) .why-not-panel>button strong{font-weight:600}
:where(html.ds) .why-not-panel>button em{font-weight:600}
:where(html.ds) .discover-v5.is-listening-space::after{font-weight:600}
:where(html.ds) .film-v5 .film-recommendation-context summary span{font-weight:600}
:where(html.ds) .media-trailer-copy>span{font-weight:700}
:where(html.ds) .media-trailer-play span{font-weight:600}
:where(html.ds) .media-watch-options>header span{font-weight:700}
:where(html.ds) .availability-state{font-weight:600 !important}
:where(html.ds) .provider-brand span{font-weight:700}
:where(html.ds) .critical-request-capsule span{font-weight:700}
:where(html.ds) .critical-card-back>small{font-weight:700}
:where(html.ds) .critical-question em{font-weight:400}
:where(html.ds) .critical-status span{font-weight:700}
:where(html.ds) .critical-status h1{font-weight:700}
:where(html.ds) .critical-results>.eyebrow{font-weight:700}
:where(html.ds) .critical-results>h1{font-weight:700}
:where(html.ds) .critical-understood>span{font-weight:700}
:where(html.ds) .critical-reasoning-sheet header span{font-weight:700}
:where(html.ds) .critical-reasoning-sheet h2{font-weight:700}
:where(html.ds) .premium-welcome .welcome-message h1{font-weight:700 !important}
:where(html.ds) .premium-welcome .welcome-actions .primary-button span{font-weight:700 !important}
:where(html.ds) .premium-welcome .welcome-actions .primary-button i{font-weight:400}
:where(html.ds) .premium-discover .discover-kicker{font-weight:700}
:where(html.ds) .premium-discover>.discover-heading>h1{font-weight:700 !important}
:where(html.ds) .premium-composer .request-label{font-weight:700 !important}
:where(html.ds) .discover-inspiration>header span{font-weight:700}
:where(html.ds) .discover-inspiration h2{font-weight:700}
:where(html.ds) .critical-question em{font-weight:400 !important}
:where(html.ds) .premium-cryptic-home .cryptic-kicker{font-weight:700}
:where(html.ds) .premium-cryptic-home .cryptic-intro>h1{font-weight:700}
:where(html.ds) .premium-cryptic-home .cryptic-intro>h2{font-weight:700}
:where(html.ds) .premium-cryptic-home .cryptic-rules strong{font-weight:700}
:where(html.ds) .premium-cryptic-home .cryptic-rules span{font-weight:600}
:where(html.ds) .premium-cryptic-home>.quiet-button{font-weight:600}
:where(html.ds) .premium-cryptic-home .cryptic-next-film{font-weight:600}
:where(html.ds) .p20-handoff-service{font-weight:700}
:where(html.ds) .card100-scene .critical-card-front strong{font-weight:600 !important}
:where(html.ds) .card100-scene .critical-card-front small{font-weight:700}
:where(html.ds) .premium-composer .query-submit.query-submit-plain>span{font-weight:700 !important}
:where(html.ds) .taste-profile-compact span{font-weight:700}
:where(html.ds) .taste-profile-compact strong{font-weight:600}
:where(html.ds) .taste-narrative>span{font-weight:700}
:where(html.ds) .discover-inspiration h2{font-weight:700 !important}
:where(html.ds) .premium-composer .query-save,:where(html.ds) .premium-composer .query-clear{font-weight:600 !important}
:where(html.ds) .discover-shortcuts button{font-weight:500 !important}
:where(html.ds) .discover-inspiration .prompt-title{font-weight:700 !important}
:where(html.ds) .daily-cryptic-home-entry small{font-weight:700 !important}
:where(html.ds) .daily-cryptic-home-entry strong{font-weight:600 !important}
:where(html.ds) .critical-results-heading>.eyebrow{font-weight:700}
:where(html.ds) .critical-results-heading>h1{font-weight:700}
:where(html.ds) .card100-scene.trip-phase-settled .critical-card-front strong{font-weight:600 !important}
:where(html.ds) .critical-insight>span{font-weight:700 !important}
:where(html.ds) .critical-insight>p{font-weight:400 !important}
:where(html.ds) .critical-film-cta{font-weight:700 !important}
:where(html.ds) .critical-film-cta::after{font-weight:400}
:where(html.ds) .device .request-fit>summary{font-weight:500}
:where(html.ds) .device .request-fit>summary::after{font-weight:400}
:where(html.ds) .trip-critical-layer .critical-request-capsule>span{font-weight:700 !important}
:where(html.ds) .trip-critical-layer .critical-request-capsule>p{font-weight:400 !important}
:where(html.ds) .trip-critical-layer.trip-phase-settled .critical-results-heading>.eyebrow{font-weight:700 !important}
:where(html.ds) .trip-critical-layer.trip-phase-settled .critical-results-heading>h1{font-weight:700 !important}
:where(html.ds) .trip-critical-layer.trip-phase-settled .critical-card-front strong{font-weight:600 !important}
:where(html.ds) .trip-critical-layer.trip-phase-settled .critical-card-front small{font-weight:700 !important}
:where(html.ds) .trip-critical-layer .critical-artwork-fallback{font-weight:600}
:where(html.ds) .trip-critical-layer .critical-insight>span{font-weight:700 !important}
:where(html.ds) .trip-critical-layer .critical-insight>p{font-weight:400 !important}
:where(html.ds) .trip-critical-layer .critical-film-cta{font-weight:700 !important}
:where(html.ds) .trip-critical-layer .critical-result-toolbar>button>span{font-weight:500 !important}
:where(html.ds) .share-screen.trio-share .share-trio-poster-fallback em{font-weight:700}
:where(html.ds) .share-screen.trio-share .share-trio-rank{font-weight:700}
:where(html.ds) .share-screen.trio-share .share-trio-meta strong{font-weight:700}
:where(html.ds) .share-screen.trio-share .share-trio-meta small{font-weight:700}
:where(html.ds) .share-screen.trio-share .share-trio-preview.sealed em{font-weight:700}
:where(html.ds) .share-screen.trio-share>header>.share-header-title{font-weight:700}
:where(html.ds) .share-screen.trio-share .share-copy h2{font-weight:700}
:where(html.ds) .share-screen.trio-share .share-toggle button{font-weight:600}
:where(html.ds) .share-screen.trio-share .share-destination>span{font-weight:600}
:where(html.ds) .cryptic-game-score strong{font-weight:600}
:where(html.ds) .premium-cryptic-intro h2{font-weight:400}
:where(html.ds) .premium-cryptic-rules strong{font-weight:600}
:where(html.ds) .cryptic-play-heading h1{font-weight:500}
:where(html.ds) .cryptic-play-heading-meta span{font-weight:500}
:where(html.ds) .cryptic-clue-stack article.is-current::after{font-weight:400}
:where(html.ds) .cryptic-clue-stack article.is-current > span{font-weight:700}
:where(html.ds) .cryptic-clue-stack article.is-current > p{font-weight:400}
:where(html.ds) .cryptic-clue-stack article.is-sealed p{font-weight:600}
:where(html.ds) .premium-cryptic-play .cryptic-guess-panel label{font-weight:700}
:where(html.ds) .premium-cryptic-play .cryptic-guess-panel button[type="submit"]{font-weight:600}
:where(html.ds) .cryptic-reward h1{font-weight:500}
:where(html.ds) .cryptic-answer-card h2{font-weight:500}
:where(html.ds) .cryptic-result-stats strong{font-weight:600}
:where(html.ds) .cryptic-verified-pill{font-weight:600}
:where(html.ds) #device .cryptic-result-actions [data-control-key="cryptic-result-next-edition"]{font-weight:600}
:where(html.ds) .cryptic-page-heading h1{font-weight:500}
:where(html.ds) .cryptic-rank-hero strong{font-weight:500}
:where(html.ds) .cryptic-leaderboard-row > b{font-weight:600}
:where(html.ds) .cryptic-leaderboard-row > span strong{font-weight:600}
:where(html.ds) .cryptic-archive-date b{font-weight:600}
:where(html.ds) .cryptic-archive-copy strong{font-weight:600}
:where(html.ds) .cryptic-paywall-copy h1{font-weight:500}
:where(html.ds) .cryptic-store-state strong{font-weight:600}
:where(html.ds) .cryptic-product-state h1{font-weight:500}
:where(html.ds) .cryptic-header-score{font-weight:700}
:where(html.ds) .cryptic-rank-card strong{font-weight:600}
:where(html.ds) .cryptic-rank-card > b{font-weight:400}
:where(html.ds) .cryptic-unranked-card > span{font-weight:400}
:where(html.ds) .cryptic-unranked-card strong{font-weight:600}
:where(html.ds) .cryptic-rank-hero h1{font-weight:500}
:where(html.ds) .cryptic-membership-card > div > strong{font-weight:600}
:where(html.ds) .cryptic-resume-card span{font-weight:700}
:where(html.ds) .cryptic-resume-card strong{font-weight:600}
:where(html.ds) #device .collection-membership-notes dt{font-weight:600}
:where(html.ds) #device .collection-editorial-note h2{font-weight:700}
:where(html.ds) #device :is(.collections-pagination,:where(html.ds) .collection-save-recovery) .secondary-button{font-weight:600}
:where(html.ds) .device .first-run-edition-count>strong{font-weight:500}
:where(html.ds) #device .refinement-edition-number{font-weight:500}
:where(html.ds) .device .settings-row strong{font-weight:500}
:where(html.ds) .device .library-cover-posters > span{font-weight:400}
:where(html.ds) .device .library-section > h2{font-weight:500}
:where(html.ds) .device .library-link strong{font-weight:500}
:where(html.ds) .device .fingerprint-dimension > strong{font-weight:500}
:where(html.ds) #device .taste-radar text{font-weight:500}
:where(html.ds) #device .fingerprint-axis-evidence b{font-weight:500}
:where(html.ds) .device .share-caption-switch strong{font-weight:500}
:where(html.ds) .request-reading-body h3{font-weight:700}
:where(html.ds) .request-reading-facet{font-weight:500}
:where(html.ds) #device .trip-waiting-eyebrow{font-weight:600}
/* END generated: weights */

/* BEGIN generated: blur-cap */
:where(html.ds) .glass-panel,:where(html.ds) .glass-button,:where(html.ds) .circle-control,:where(html.ds) .glass-nav{backdrop-filter:blur(24px) saturate(130%)}
:where(html.ds) .glass-panel,:where(html.ds) .glass-button,:where(html.ds) .circle-control,:where(html.ds) .glass-nav{-webkit-backdrop-filter:blur(24px) saturate(130%)}
:where(html.ds) .glass-nav{backdrop-filter:blur(24px) saturate(165%)}
:where(html.ds) .glass-nav{-webkit-backdrop-filter:blur(24px) saturate(165%)}
:where(html.ds) .content-material{backdrop-filter:blur(24px) saturate(145%)}
:where(html.ds) .glass-panel,:where(html.ds) .circle-control,:where(html.ds) .glass-nav{backdrop-filter:blur(24px) saturate(150%)}
:where(html.ds) .auth-screen .provider-button{backdrop-filter:blur(24px) saturate(145%)}
:where(html.ds) .device>.persistent-glass-nav{backdrop-filter:blur(24px) saturate(125%)}
:where(html.ds) .device>.persistent-glass-nav{-webkit-backdrop-filter:blur(24px) saturate(125%)}
:where(html.ds) .explore-compact-bar{backdrop-filter:blur(24px) saturate(140%)}
:where(html.ds) .explore-compact-bar{-webkit-backdrop-filter:blur(24px) saturate(140%)}
:where(html.ds) .glass-panel,:where(html.ds) .content-material,:where(html.ds) .search-glass,:where(html.ds) .persistent-glass-nav,:where(html.ds) .functional-sheet{backdrop-filter:blur(24px) saturate(138%)}
:where(html.ds) .glass-panel,:where(html.ds) .content-material,:where(html.ds) .search-glass,:where(html.ds) .persistent-glass-nav,:where(html.ds) .functional-sheet{-webkit-backdrop-filter:blur(24px) saturate(138%)}
:where(html.ds) .film-compact-header{backdrop-filter:blur(24px) saturate(140%)}
:where(html.ds) .film-compact-header{-webkit-backdrop-filter:blur(24px) saturate(140%)}
:where(html.ds) .film-v5 .decision-actions.critical-film-dock{backdrop-filter:blur(24px) saturate(145%) !important}
:where(html.ds) .film-v5 .decision-actions.critical-film-dock{-webkit-backdrop-filter:blur(24px) saturate(145%) !important}
:where(html.ds) .content-material,:where(html.ds) .glass-panel,:where(html.ds) .settings-group,:where(html.ds) .profile-list,:where(html.ds) .library-sections,:where(html.ds) .discover-shortcuts,:where(html.ds) .critical-understood{backdrop-filter:blur(24px) saturate(138%) !important}
:where(html.ds) .content-material,:where(html.ds) .glass-panel,:where(html.ds) .settings-group,:where(html.ds) .profile-list,:where(html.ds) .library-sections,:where(html.ds) .discover-shortcuts,:where(html.ds) .critical-understood{-webkit-backdrop-filter:blur(24px) saturate(138%) !important}
:where(html.ds) .persistent-glass-nav{backdrop-filter:blur(24px) saturate(155%) !important}
:where(html.ds) .persistent-glass-nav{-webkit-backdrop-filter:blur(24px) saturate(155%) !important}
/* END generated: blur-cap */

/* BEGIN generated: radii */
:where(html.ds) .home-indicator{border-radius:6px}
:where(html.ds) .primary-button{border-radius:20px}
:where(html.ds) .close-glyph i{border-radius:6px}
:where(html.ds) .provider-button{border-radius:14px}
:where(html.ds) .mail-icon{border-radius:6px}
:where(html.ds) .email-panel{border-radius:20px}
:where(html.ds) .search-glass{border-radius:28px}
:where(html.ds) .glass-nav{border-radius:20px}
:where(html.ds) .glass-nav button.active::after{border-radius:6px}
:where(html.ds) .nav-stack{border-radius:6px}
:where(html.ds) .mystery-shell{border-radius:20px}
:where(html.ds) .mystery-edge{border-radius:20px}
:where(html.ds) .result-inner,:where(html.ds) .result-back,:where(html.ds) .result-front{border-radius:20px}
:where(html.ds) .match-chip{border-radius:14px}
:where(html.ds) .why-panel{border-radius:20px}
:where(html.ds) .trailer-button{border-radius:14px}
:where(html.ds) .featured-collection{border-radius:28px}
:where(html.ds) .library-summary{border-radius:20px}
:where(html.ds) .taste-card{border-radius:20px}
:where(html.ds) .taste-spectrum i{border-radius:10px}
:where(html.ds) .calibration-poster{border-radius:28px}
:where(html.ds) .calibration-actions button{border-radius:14px}
:where(html.ds) .toast{border-radius:14px}
:where(html.ds) .friday-ribbon{border-radius:20px}
:where(html.ds) .onboarding-card{border-radius:28px}
:where(html.ds) .onboarding-actions button{border-radius:14px}
:where(html.ds) .decision-actions button{border-radius:20px}
:where(html.ds) .film-v4 .why-panel{border-radius:20px}
:where(html.ds) .watch-options button{border-radius:14px}
:where(html.ds) .friday-back,:where(html.ds) .friday-front{border-radius:20px}
:where(html.ds) .settings-group button:first-of-type{border-radius:14px 14px 0 0}
:where(html.ds) .settings-group button:last-child{border-radius:0 0 14px 14px}
:where(html.ds) .switch{border-radius:10px}
:where(html.ds) .watchlist-grid button > span{border-radius:20px}
:where(html.ds) .collection-grid button > span{border-radius:20px}
:where(html.ds) .share-glyph i,:where(html.ds) .action-share{border-radius:6px}
:where(html.ds) .taste-ghost{border-radius:28px}
:where(html.ds) .swipe-verdict{border-radius:6px}
:where(html.ds) .action-heart{border-radius:6px 0}
:where(html.ds) .reveal-burst i{border-radius:6px}
:where(html.ds) .action-bookmark{border-radius:6px 6px 6px 6px !important}
:where(html.ds) .action-share{border-radius:6px !important}
:where(html.ds) .share-preview{border-radius:28px}
:where(html.ds) .share-message::after{border-radius:6px 6px 6px 6px}
:where(html.ds) .final-film>span{border-radius:14px}
:where(html.ds) .glass-nav button{border-radius:20px}
:where(html.ds) .glass-nav button.active::before{border-radius:20px}
:where(html.ds) .nav-person::after{border-radius:10px 10px 0 0}
:where(html.ds) .list-search{border-radius:14px}
:where(html.ds) .sublist > button{border-radius:20px}
:where(html.ds) .sublist-art{border-radius:10px}
:where(html.ds) .account-identity{border-radius:20px}
:where(html.ds) .decision-symbol{border-radius:20px}
:where(html.ds) .destructive-button{border-radius:20px}
:where(html.ds) .state-grid button{border-radius:14px}
:where(html.ds) .receiver-cards > span{border-radius:20px}
:where(html.ds) .auth-poster{border-radius:14px}
:where(html.ds) .status-battery{border-radius:6px}
:where(html.ds) .status-battery::before{border-radius:6px}
:where(html.ds) .status-battery::after{border-radius:0 6px 6px 0}
:where(html.ds) .auth-screen .provider-button{border-radius:14px}
:where(html.ds) .auth-poster{border-radius:20px}
:where(html.ds) .auth-email .email-panel{border-radius:20px}
:where(html.ds) .auth-email .email-panel input{border-radius:14px}
:where(html.ds) .auth-status>.quiet-action{border-radius:14px}
:where(html.ds) .status-state-icon{border-radius:20px}
:where(html.ds) .discover-v4 .friday-ribbon{border-radius:20px}
:where(html.ds) .discover-v4 .search-glass{border-radius:28px}
:where(html.ds) .saved-glyph{border-radius:6px}
:where(html.ds) .discover-v4 .prompt-card{border-radius:20px}
:where(html.ds) .discover-v4 .glass-nav{border-radius:28px}
:where(html.ds) .discover-v4 .glass-nav button{border-radius:20px}
:where(html.ds) .poster-reel > span{border-radius:20px}
:where(html.ds) .refinement-screen label{border-radius:20px}
:where(html.ds) .reason-sheet{border-radius:28px 28px 0 0}
:where(html.ds) .sheet-handle{border-radius:6px}
:where(html.ds) .replacement-art{border-radius:20px}
:where(html.ds) .confidence-card{border-radius:20px}
:where(html.ds) .share-trio-preview{border-radius:28px}
:where(html.ds) .share-trio-preview > span{border-radius:20px}
:where(html.ds) .share-toggle{border-radius:14px}
:where(html.ds) .share-toggle button{border-radius:10px}
:where(html.ds) .understood-summary{border-radius:14px}
:where(html.ds) .preserve-symbol{border-radius:28px}
:where(html.ds) .demo-actions button{border-radius:14px}
:where(html.ds) .a11y-preview{border-radius:20px}
:where(html.ds) .a11y-card{border-radius:20px}
:where(html.ds) .a11y-controls button{border-radius:14px}
:where(html.ds) .spoken-example{border-radius:20px}
:where(html.ds) .branded-poster{border-radius:20px}
:where(html.ds) .glass-nav .tab-lens{border-radius:20px}
:where(html.ds) .memory-control{border-radius:14px}
:where(html.ds) .memory-control button{border-radius:14px}
:where(html.ds) .bookmark-glyph{border-radius:6px 6px 6px 6px}
:where(html.ds) .device>.persistent-glass-nav{border-radius:28px}
:where(html.ds) .device>.persistent-glass-nav button{border-radius:20px}
:where(html.ds) .device>.persistent-glass-nav .nav-stack{border-radius:6px}
:where(html.ds) .explore-featured{border-radius:28px}
:where(html.ds) .explore-insufficient>span{border-radius:14px}
:where(html.ds) .explore-collection-card.compact{border-radius:20px}
:where(html.ds) .explore-collection-card.compact .explore-card-art{border-radius:14px}
:where(html.ds) .film-results>div:last-child button{border-radius:14px}
:where(html.ds) .film-results>div:last-child button>span{border-radius:10px}
:where(html.ds) .explore-recovery{border-radius:20px}
:where(html.ds) .recovery-symbol{border-radius:20px}
:where(html.ds) .share-destinations button{border-radius:14px}
:where(html.ds) .daily-cryptic-tile{border-radius:20px}
:where(html.ds) .library-empty{border-radius:20px}
:where(html.ds) .library-empty button{border-radius:14px}
:where(html.ds) .cryptic-progress i{border-radius:6px}
:where(html.ds) .cryptic-guess-panel{border-radius:20px}
:where(html.ds) .cryptic-result-art{border-radius:28px}
:where(html.ds) .cryptic-calendar-strip button{border-radius:14px}
:where(html.ds) .cryptic-notification-card{border-radius:20px}
:where(html.ds) .ritual-processing-shadows i{border-radius:14px}
:where(html.ds) .ritual-card-back,:where(html.ds) .ritual-card-front{border-radius:14px}
:where(html.ds) .ritual-understood{border-radius:14px}
:where(html.ds) .ritual-understood i{border-radius:6px}
:where(html.ds) .trailer-preview{border-radius:20px}
:where(html.ds) .trailer-controls button{border-radius:10px}
:where(html.ds) .film-v5 .why-panel{border-radius:20px}
:where(html.ds) .spoiler-safe.is-limited{border-radius:20px}
:where(html.ds) .store-state,:where(html.ds) .membership-status{border-radius:20px}
:where(html.ds) .plan-structure{border-radius:20px}
:where(html.ds) .continue-triptic{border-radius:20px}
:where(html.ds) .library-compact-bar{border-radius:14px}
:where(html.ds) .library-group .library-sections{border-radius:20px}
:where(html.ds) .library-group .library-art{border-radius:14px}
:where(html.ds) .library-art.previous-art .library-symbol::before,:where(html.ds) .library-art.previous-art .library-symbol::after,:where(html.ds) .library-art.previous-art .library-symbol i{border-radius:6px}
:where(html.ds) .library-art.search-art .library-symbol::before{border-radius:6px 6px 6px 6px}
:where(html.ds) .library-art.friday-art .library-symbol::before{border-radius:6px}
:where(html.ds) .library-art.inbox-art .library-symbol::before{border-radius:6px}
:where(html.ds) .phase-revealing .ritual-card.active .ritual-card-back::before{border-radius:10px}
:where(html.ds) .why-not-panel{border-radius:20px}
:where(html.ds) .ritual-card-back,:where(html.ds) .ritual-card-front{border-radius:20px !important}
:where(html.ds) .ritual-secondary-actions button{border-radius:10px}
:where(html.ds) .fluid-media-progress{border-radius:6px}
:where(html.ds) .discover-v5 .query-footer .voice-control{border-radius:14px !important}
:where(html.ds) .premium-taste-controls button{border-radius:20px !important}
:where(html.ds) .taste-no-icon::before,:where(html.ds) .taste-no-icon::after{border-radius:6px}
:where(html.ds) .film-question i{border-radius:14px}
:where(html.ds) .premium-result-toolbar button{border-radius:14px !important}
:where(html.ds) .tool-share::before{border-radius:6px}
:where(html.ds) .tool-save{border-radius:6px 6px 6px 6px}
:where(html.ds) .reasoning-sheet .sheet-handle{border-radius:6px}
:where(html.ds) .why-not{border-radius:14px}
:where(html.ds) .dna-map{border-radius:20px}
:where(html.ds) .dna-map.insufficient-data .secondary-button{border-radius:14px}
:where(html.ds) .recon-cryptic .cryptic-guess-panel{border-radius:14px !important}
:where(html.ds) .cryptic-clue-rail article{border-radius:14px !important}
:where(html.ds) .premium-film-actions .action-bookmark{border-radius:6px 6px 6px 6px}
:where(html.ds) .taste-mini-map>span{border-radius:10px}
:where(html.ds) .taste-mini-map.insufficient-data{border-radius:10px}
:where(html.ds) .recon-ritual .ritual-card.rank-1.opening::after{border-radius:28px}
:where(html.ds) .recon-ritual .ritual-card-front small,:where(html.ds) .recon-friday .verified-friday-front small{border-radius:6px}
:where(html.ds) .premium-film-actions .action-x::before,:where(html.ds) .premium-film-actions .action-x::after{border-radius:6px}
:where(html.ds) .confidence-badge{border-radius:10px}
:where(html.ds) .premium-reveal-sparks::before,:where(html.ds) .premium-reveal-sparks::after{border-radius:28px}
:where(html.ds) .film-v5 .film-recommendation-context summary:focus-visible{border-radius:20px}
:where(html.ds) .save-confirmed::after{border-radius:10px}
:where(html.ds) .media-trailer{border-radius:20px}
:where(html.ds) .media-watch-options{border-radius:20px}
:where(html.ds) .provider-destination{border-radius:14px !important}
:where(html.ds) .provider-apple i::before{border-radius:6px 0 6px 0}
:where(html.ds) .provider-all-link{border-radius:14px !important}
:where(html.ds) .media-trailer.is-playing.is-docked{border-radius:14px}
:where(html.ds) .availability-reminder{border-radius:14px}
:where(html.ds) .functional-sheet{border-radius:28px}
:where(html.ds) .continuity-dismiss:before,:where(html.ds) .continuity-dismiss:after{border-radius:6px}
:where(html.ds) .recon-film.film-header-condensed .verified-film-hero{border-radius:0 0 28px 28px}
:where(html.ds) .film-compact-header{border-radius:20px}
:where(html.ds) .media-trailer.is-playing{border-radius:20px}
:where(html.ds) .critical-request-capsule{border-radius:28px}
:where(html.ds) .is-live .critical-request-capsule{border-radius:20px}
:where(html.ds) .critical-card{border-radius:20px}
:where(html.ds) .critical-card-back,:where(html.ds) .critical-card-front{border-radius:20px}
:where(html.ds) .critical-card-back::before{border-radius:14px}
:where(html.ds) .critical-card-front::after{border-radius:20px}
:where(html.ds) .critical-card-energy::before{border-radius:20px}
:where(html.ds) .critical-understood{border-radius:14px}
:where(html.ds) .critical-understood i{border-radius:10px}
:where(html.ds) .critical-film-cta{border-radius:14px !important}
:where(html.ds) .critical-result-toolbar button{border-radius:14px}
:where(html.ds) .critical-result-toolbar .tool-save{border-radius:6px 6px 6px 6px}
:where(html.ds) .critical-reasoning-sheet{border-radius:28px}
:where(html.ds) .critical-poster-flight{border-radius:20px}
:where(html.ds) .critical-poster-flight.is-expanding,:where(html.ds) .critical-poster-flight.is-expanded{border-radius:0 0 28px 28px}
:where(html.ds) .critical-poster-flight.is-returning{border-radius:20px}
:where(html.ds) .film-v5 .critical-film-dock button{border-radius:14px !important}
:where(html.ds) .critical-not-for-me-icon::before{border-radius:6px}
:where(html.ds) .premium-welcome .welcome-actions .primary-button{border-radius:20px !important}
:where(html.ds) .premium-discover>.friday-ribbon{border-radius:20px !important}
:where(html.ds) .premium-discover>.friday-ribbon>b{border-radius:10px !important}
:where(html.ds) .premium-composer{border-radius:28px !important}
:where(html.ds) .premium-composer::before{border-radius:28px}
:where(html.ds) .discover-shortcuts{border-radius:20px}
:where(html.ds) .shortcut-save{border-radius:6px 6px 6px 6px}
:where(html.ds) .discover-inspiration .prompt-card{border-radius:20px !important}
:where(html.ds) .critical-card{border-radius:20px !important}
:where(html.ds) .critical-card-back,:where(html.ds) .critical-card-front{border-radius:20px !important}
:where(html.ds) .critical-card-back::after{border-radius:14px}
:where(html.ds) .trip-phase-settled .critical-request-capsule{border-radius:14px !important}
:where(html.ds) .film-v5 .media-trailer{border-radius:20px !important}
:where(html.ds) .premium-cryptic-home .cryptic-clue-tile{border-radius:10px}
:where(html.ds) .premium-cryptic-home .cryptic-emblem-film{border-radius:20px}
:where(html.ds) .premium-cryptic-home .cryptic-film-frame{border-radius:6px}
:where(html.ds) .premium-cryptic-home>.cryptic-rules{border-radius:20px !important}
:where(html.ds) .premium-cryptic-home>.primary-button{border-radius:20px !important}
:where(html.ds) .cryptic-share-grid{border-radius:10px}
:where(html.ds) .primary-button{border-radius:14px !important}
:where(html.ds) .quiet-button,:where(html.ds) .glass-button{border-radius:14px !important}
:where(html.ds) .persistent-glass-nav{border-radius:20px !important}
:where(html.ds) .persistent-glass-nav button{border-radius:20px !important}
:where(html.ds) .trip-critical-layer[data-revealed="3"] .critical-card.rank-1 .critical-card-inner{border-radius:20px}
:where(html.ds) .p20-dna-constellation{border-radius:28px}
:where(html.ds) .p20-peek-art{border-radius:20px}
:where(html.ds) .p20-handoff-card{border-radius:28px}
:where(html.ds) .p20-taste-insight{border-radius:20px}
:where(html.ds) .p20-live-activity{border-radius:20px}
:where(html.ds) .p20-sealed-markers i{border-radius:10px}
:where(html.ds) .p20-sensory-preview{border-radius:20px}
:where(html.ds) .p20-sensory-preview button{border-radius:14px}
:where(html.ds) .card100-scene .critical-card.card100-ready{border-radius:20px !important}
:where(html.ds) .card100-depth{border-radius:14px}
:where(html.ds) .card100-secret i{border-radius:6px 6px 6px 6px}
:where(html.ds) .taste-dna-orbit{border-radius:20px}
:where(html.ds) .premium-discover>.friday-ribbon::after{border-radius:20px !important}
:where(html.ds) .premium-composer::before{border-radius:28px !important}
:where(html.ds) .premium-discover>.daily-cryptic-home-entry{border-radius:20px !important}
:where(html.ds) .critical-engine-aperture>i{border-radius:10px}
:where(html.ds) .card100-scene.trip-phase-settled .critical-card.rank-1 .critical-card-front{border-radius:20px !important}
:where(html.ds) .card100-scene.trip-phase-settled .critical-card:not(.rank-1) .critical-card-front{border-radius:20px !important}
:where(html.ds) .card100-scene.trip-phase-settled .critical-card.rank-1,:where(html.ds) .card100-scene.trip-phase-settled .critical-card.rank-1 .critical-card-back,:where(html.ds) .card100-scene.trip-phase-settled .critical-card.rank-1 .critical-card-inner{border-radius:20px !important}
:where(html.ds) .critical-result-toolbar button{border-radius:20px !important}
:where(html.ds) .critical-result-toolbar .tool-save{border-radius:6px 6px 6px 6px !important}
:where(html.ds) .trip-critical-layer.critical-compact.is-live .critical-request-capsule{border-radius:14px !important}
:where(html.ds) .device .film-v5.recon-film .verified-film-hero.poster-resolved::before{border-radius:10px}
:where(html.ds) .device .film-v5 .cast-portrait{border-radius:20px}
:where(html.ds) .device .film-reaction{border-radius:20px}
:where(html.ds) .device .request-fit-choices .quiet-button{border-radius:14px}
:where(html.ds) .trip-critical-layer .critical-engine-aperture>i{border-radius:10px !important}
:where(html.ds) .trip-critical-layer.trip-phase-settled .critical-card[data-slot],:where(html.ds) .trip-critical-layer.trip-phase-settled .critical-card:not([data-slot]){border-radius:20px !important}
:where(html.ds) .trip-critical-layer.trip-phase-settled .critical-card-inner,:where(html.ds) .trip-critical-layer.trip-phase-settled .critical-card-back,:where(html.ds) .trip-critical-layer.trip-phase-settled .critical-card-front{border-radius:20px !important}
:where(html.ds) .trip-critical-layer .critical-artwork-mark>i{border-radius:6px}
:where(html.ds) .trip-critical-layer .critical-result-toolbar>button{border-radius:20px !important}
:where(html.ds) .trip-critical-layer.critical-compact.is-live .critical-request-capsule{border-radius:20px !important}
:where(html.ds) .share-screen.trio-share .share-trio-preview>.share-trio-card{border-radius:14px !important}
:where(html.ds) .share-screen.trio-share .share-trio-preview{border-radius:28px !important}
:where(html.ds) .share-screen.trio-share .share-toggle{border-radius:14px}
:where(html.ds) .share-screen.trio-share .share-destinations{border-radius:20px}
:where(html.ds) .share-screen.trio-share>.primary-button{border-radius:20px !important}
:where(html.ds) .share-screen.trio-share.share-compact .share-trio-preview{border-radius:20px !important}
:where(html.ds) .share-screen.trio-share.share-compact .share-trio-preview>.share-trio-card{border-radius:14px !important}
:where(html.ds) .share-screen.trio-share.share-compact .share-destinations{border-radius:20px}
:where(html.ds) .premium-cryptic-emblem{border-radius:28px}
:where(html.ds) .cryptic-clue-stack article{border-radius:14px}
:where(html.ds) .cryptic-clue-stack article.is-current{border-radius:20px}
:where(html.ds) .cryptic-lock{border-radius:6px}
:where(html.ds) .cryptic-reveal-button{border-radius:14px}
:where(html.ds) .cryptic-feedback{border-radius:10px}
:where(html.ds) .premium-cryptic-play .cryptic-guess-panel{border-radius:20px !important}
:where(html.ds) .premium-cryptic-play .cryptic-guess-panel input{border-radius:14px}
:where(html.ds) .premium-cryptic-play .cryptic-guess-panel button[type="submit"]{border-radius:14px}
:where(html.ds) .cryptic-review-notice{border-radius:10px}
:where(html.ds) .cryptic-answer-card{border-radius:20px}
:where(html.ds) .cryptic-result-stats{border-radius:20px}
:where(html.ds) #device .cryptic-result-actions [data-control-key="cryptic-result-next-edition"]{border-radius:14px}
:where(html.ds) .cryptic-rank-hero{border-radius:20px}
:where(html.ds) .cryptic-leaderboard-row{border-radius:14px}
:where(html.ds) .cryptic-archive-list > button{border-radius:14px}
:where(html.ds) .cryptic-archive-date{border-radius:10px}
:where(html.ds) .cryptic-paywall-mark{border-radius:28px}
:where(html.ds) .cryptic-store-state{border-radius:20px}
:where(html.ds) .cryptic-state-symbol{border-radius:28px}
:where(html.ds) .premium-cryptic .cryptic-time-rules p{border-radius:14px}
:where(html.ds) .cryptic-rank-card{border-radius:20px}
:where(html.ds) .cryptic-rank-card > span{border-radius:14px}
:where(html.ds) .cryptic-unranked-card{border-radius:20px}
:where(html.ds) .cryptic-unranked-card > span{border-radius:14px}
:where(html.ds) .cryptic-membership-card{border-radius:20px}
:where(html.ds) .premium-cryptic-play > .cryptic-reveal-zone .cryptic-reveal-button small{border-radius:10px}
:where(html.ds) .cryptic-resume-card{border-radius:14px}
:where(html.ds) .cryptic-review-note{border-radius:10px}
:where(html.ds) .collection-film-card{border-radius:14px}
:where(html.ds) .device .api-collection-card{border-radius:20px}
:where(html.ds) .device .api-collection-card .explore-card-art{border-radius:10px}
:where(html.ds) .device .collections-api-empty{border-radius:20px}
:where(html.ds) #device .api-collection-card{border-radius:20px}
:where(html.ds) #device .collection-film-card{border-radius:20px}
:where(html.ds) #device .collections-search-invitations button{border-radius:10px}
:where(html.ds) #device .collection-cover-object>span{border-radius:14px}
:where(html.ds) #device .collections-pagination{border-radius:20px}
:where(html.ds) #device :is(.collections-pagination,:where(html.ds) .collection-save-recovery) .secondary-button{border-radius:14px}
:where(html.ds) .device .first-run-note{border-radius:20px}
:where(html.ds) .device .first-run-edition{border-radius:28px}
:where(html.ds) .device .streaming-logo{border-radius:6px}
:where(html.ds) .device .profile-orb{border-radius:20px}
:where(html.ds) #device .first-run-screen .taste-swipe-card::after{border-radius:0 20px 20px 0}
:where(html.ds) #device .first-run-screen .taste-actions button{border-radius:20px !important}
:where(html.ds) .first-taste-films img{border-radius:10px}
:where(html.ds) #device .taste-refinement-screen .secondary-button{border-radius:14px}
:where(html.ds) #device .taste-choice-evidence{border-radius:20px}
:where(html.ds) .device .settings-row-group{border-radius:20px}
:where(html.ds) .device .cryptic-sample-card{border-radius:20px}
:where(html.ds) .device .cryptic-sample-icon{border-radius:14px}
:where(html.ds) .device .settings-feedback{border-radius:14px}
:where(html.ds) .device .voice-education{border-radius:20px}
:where(html.ds) .device .friday-service-screen textarea{border-radius:14px}
:where(html.ds) .device .membership-refined .membership-actions .membership-manage{border-radius:14px}
:where(html.ds) .device .membership-recovery{border-radius:20px}
:where(html.ds) .device .membership-explainer{border-radius:20px}
:where(html.ds) .device .membership-refined .membership-progress,:where(html.ds) .device .settings-operation{border-radius:20px}
:where(html.ds) .device .membership-refined .plan-card{border-radius:20px}
:where(html.ds) .search-library-row{border-radius:20px}
:where(html.ds) .search-library-row summary{border-radius:10px}
:where(html.ds) .device .library-watchlist-cover{border-radius:28px}
:where(html.ds) .device .library-cover-posters > span{border-radius:6px}
:where(html.ds) .device .library-link-symbol{border-radius:10px}
:where(html.ds) #device .library-recovery-notice{border-radius:14px}
:where(html.ds) .device .library-history-card{border-radius:20px}
:where(html.ds) .device .viewing-checkin{border-radius:20px}
:where(html.ds) .device .viewing-checkin-poster{border-radius:6px}
:where(html.ds) .device .first-use-guide{border-radius:20px}
:where(html.ds) #device .first-use-guide button{border-radius:14px}
:where(html.ds) .device .fingerprint-range{border-radius:6px}
:where(html.ds) .device .fingerprint-range i{border-radius:6px}
:where(html.ds) #device .profile-cinema-emblem{border-radius:28px}
:where(html.ds) #device .taste-intelligence-card{border-radius:28px !important}
:where(html.ds) #device .profile-list{border-radius:20px !important}
:where(html.ds) #device .fingerprint-key{border-radius:20px}
:where(html.ds) #device .taste-strands,:where(html.ds) #device .friday-preferences{border-radius:28px}
:where(html.ds) #device #friday-preference-input{border-radius:20px}
:where(html.ds) #device .friday-notes button{border-radius:10px}
:where(html.ds) .collectible-share .triptic-collectible,:where(html.ds) .collectible-receiver .triptic-collectible{border-radius:20px}
:where(html.ds) .device .share-caption-switch input{border-radius:20px}
:where(html.ds) .device #share-caption-input{border-radius:10px}
:where(html.ds) .share-link-recovery textarea{border-radius:10px}
:where(html.ds) .refinement-live .refinement-original{border-radius:20px}
:where(html.ds) .refinement-live textarea{border-radius:14px}
:where(html.ds) .request-reading>summary:focus-visible{border-radius:6px}
:where(html.ds) .request-reading-body{border-radius:20px}
:where(html.ds) .request-reading-body .quiet-button{border-radius:10px}
:where(html.ds) .device .settings-premium .secondary-button,:where(html.ds) .device .reason-sheet .reason-options > button{border-radius:14px}
:where(html.ds) .triptic-review-indicator{border-radius:6px}
:where(html.ds) .device .feedback-draft textarea{border-radius:14px}
:where(html.ds) #device .collectible-film > b{border-radius:6px}
:where(html.ds) #device .film-content-notes summary:focus-visible{border-radius:6px}
:where(html.ds) #device .premium-composer #request-limit-live.is-over-limit{border-radius:14px}
:where(html.ds) #device .watchlist-grid .library-grid-poster{border-radius:14px}
:where(html.ds) .triptych-spine>button>i{border-radius:6px}
:where(html.ds) #device .trip-waiting-note{border-radius:20px}
:where(html.ds) #device .friday-waiting>button{border-radius:20px}
:where(html.ds) #device .friday-recovery{border-radius:20px}
:where(html.ds) #device .trip-critical-layer .critical-friday-refresh{border-radius:20px}
:where(html.ds) .trip-critical-layer.mo-deck.trip-phase-settled .critical-card[data-slot]::before{border-radius:20px}
@media (max-height:760px){
:where(html.ds) .persistent-glass-nav{border-radius:20px !important}
:where(html.ds) .premium-discover>.friday-ribbon{border-radius:20px !important}
:where(html.ds) .premium-composer{border-radius:20px !important}
:where(html.ds) .premium-composer::before{border-radius:20px !important}
:where(html.ds) .discover-inspiration .prompt-card{border-radius:20px !important}
}
@media (max-width:560px) and (max-height:640px){
:where(html.ds) .premium-welcome .welcome-actions .primary-button{border-radius:14px !important}
}
@media (max-width:560px) and (max-height:720px){
:where(html.ds) .share-screen.trio-share .share-trio-preview{border-radius:20px !important}
:where(html.ds) .share-screen.trio-share .share-trio-preview>.share-trio-card{border-radius:14px !important}
:where(html.ds) .share-screen.trio-share .share-destinations{border-radius:20px}
}
@media (max-height: 720px){
:where(html.ds) .cryptic-paywall-mark{border-radius:20px}
}
/* END generated: radii */

/* BEGIN generated: neutral-colour */
:where(html.ds) .welcome-actions span{color:var(--c-label-3)}
:where(html.ds) .legal{color:var(--c-label-3)}
:where(html.ds) .glass-nav button{color:var(--c-label-3)}
:where(html.ds) .mystery-number{color:var(--c-label-3)}
:where(html.ds) .friday-back b{color:var(--c-label-3)}
:where(html.ds) .friday-hint{color:var(--c-label-3)}
:where(html.ds) .settings-group > span{color:var(--c-label-3)}
:where(html.ds) .clarify-screen > small{color:var(--c-label-3)}
:where(html.ds) .final-film>b{color:var(--c-label-3)}
:where(html.ds) .list-search input::placeholder{color:var(--c-label-3)}
:where(html.ds) .sublist small{color:var(--c-label-3)}
:where(html.ds) .receiver-screen > small{color:var(--c-label-3)}
:where(html.ds) .auth-status .state-preview-link{color:var(--c-label-3)}
:where(html.ds) .auth-screen .legal{color:var(--c-label-3)}
:where(html.ds) .auth-screen .email-panel input::placeholder{color:var(--c-label-3)}
:where(html.ds) .auth-email .email-panel small{color:var(--c-label-3)}
:where(html.ds) .discover-v4 .query-footer>span{color:var(--c-label-3)}
:where(html.ds) .discover-v4 .glass-nav button{color:var(--c-label-3)}
:where(html.ds) .permission-footnote{color:var(--c-label-3)}
:where(html.ds) .share-toggle button{color:var(--c-label-3)}
:where(html.ds) .feedback-link{color:var(--c-label-3)}
:where(html.ds) .discover-v4 .search-glass textarea::placeholder{color:var(--c-label-3)}
:where(html.ds) .request-ellipsis{color:var(--c-label-3)}
:where(html.ds) .request-display i{color:var(--c-label-3)}
:where(html.ds) .discover-v5 .request-display .placeholder{color:var(--c-label-3)}
:where(html.ds) .device>.persistent-glass-nav button{color:var(--c-label-3)}
:where(html.ds) .explore-shelf p{color:var(--c-label-3)}
:where(html.ds) .explore-insufficient p{color:var(--c-label-3)}
:where(html.ds) .explore-card-copy em{color:var(--c-label-3)}
:where(html.ds) .explore-search-section>div:first-child small{color:var(--c-label-3)}
:where(html.ds) .film-results>div:last-child button>small{color:var(--c-label-3)}
:where(html.ds) .explore-loading{color:var(--c-label-3)}
:where(html.ds) .explore-recovery p{color:var(--c-label-3)}
:where(html.ds) .explore-screen .list-search input::placeholder{color:var(--c-label-3)}
:where(html.ds) .explore-search-guidance{color:var(--c-label-3)}
:where(html.ds) .collection-grid-intro p{color:var(--c-label-3)}
:where(html.ds) .collection-preview small{color:var(--c-label-3)}
:where(html.ds) .taste-count{color:var(--c-label-3)}
:where(html.ds) .interest-actions small{color:var(--c-label-3)}
:where(html.ds) .cryptic-rules span{color:var(--c-label-3)}
:where(html.ds) .cryptic-privacy{color:var(--c-label-3)}
:where(html.ds) .cryptic-guess-panel small{color:var(--c-label-3)}
:where(html.ds) .cryptic-history>span{color:var(--c-label-3)}
:where(html.ds) .cryptic-score em{color:var(--c-label-3)}
:where(html.ds) .cryptic-archive-intro p{color:var(--c-label-3)}
:where(html.ds) .cryptic-setting-hero p{color:var(--c-label-3)}
:where(html.ds) .ritual-query span{color:var(--c-label-3)}
:where(html.ds) .ritual-card-back b{color:var(--c-label-3)}
:where(html.ds) .ritual-card-back small{color:var(--c-label-3)}
:where(html.ds) .ritual-copy p{color:var(--c-label-3)}
:where(html.ds) .trailer-unavailable p{color:var(--c-label-3)}
:where(html.ds) .reasoning-detail small{color:var(--c-label-3)}
:where(html.ds) .store-state small,:where(html.ds) .membership-status small{color:var(--c-label-3)}
:where(html.ds) .plan-structure strong{color:var(--c-label-3)}
:where(html.ds) .membership-legal{color:var(--c-label-3)}
:where(html.ds) .membership-fixture-tools{color:var(--c-label-3)}
:where(html.ds) .library-group>h2{color:var(--c-label-3)}
:where(html.ds) .why-not-panel>div small{color:var(--c-label-3)}
:where(html.ds) .discover-v5.is-listening-space::after{color:var(--c-label-3)}
:where(html.ds) .orb-instruction{color:var(--c-label-3)}
:where(html.ds) .recon-notification .permission-footnote{color:var(--c-label-3) !important}
:where(html.ds) .cast-section>header small{color:var(--c-label-3)}
:where(html.ds) .cast-track small{color:var(--c-label-3)}
:where(html.ds) .dna-axis>small{color:var(--c-label-3)}
:where(html.ds) .dna-map>p{color:var(--c-label-3)}
:where(html.ds) .cryptic-scoreline{color:var(--c-label-3)}
:where(html.ds) .discover-v5 .search-glass .orb-instruction{color:var(--c-label-3)}
:where(html.ds) .taste-mini-map small{color:var(--c-label-3)}
:where(html.ds) .taste-mini-map.insufficient-data p{color:var(--c-label-3)}
:where(html.ds) .discover-v5 .search-glass .orb-instruction{color:var(--c-label-3) !important}
:where(html.ds) .media-watch-options>header small{color:var(--c-label-3)}
:where(html.ds) .provider-destination>span small{color:var(--c-label-3)}
:where(html.ds) .provider-all-link>span small{color:var(--c-label-3)}
:where(html.ds) .provider-trust-note{color:var(--c-label-3) !important}
:where(html.ds) .availability-reminder small{color:var(--c-label-3)}
:where(html.ds) .welcome-v4 .welcome-actions::after{color:var(--c-label-3)}
:where(html.ds) .critical-card-back>small{color:var(--c-label-3)}
:where(html.ds) .critical-status p{color:var(--c-label-3)}
:where(html.ds) .premium-welcome .welcome-actions>span{color:var(--c-label-3) !important}
:where(html.ds) .premium-composer textarea::placeholder{color:var(--c-label-3) !important}
:where(html.ds) .premium-composer:focus-within textarea::placeholder{color:var(--c-label-3) !important}
:where(html.ds) .composer-guidance{color:var(--c-label-3)}
:where(html.ds) .orb-instruction{color:var(--c-label-3) !important}
:where(html.ds) .discover-inspiration>header span{color:var(--c-label-3)}
:where(html.ds) .critical-card-back>small{color:var(--c-label-3) !important}
:where(html.ds) .p20-constraint-note{color:var(--c-label-3)}
:where(html.ds) .p20-dna-caption{color:var(--c-label-3)}
:where(html.ds) .p20-return-line{color:var(--c-label-3)}
:where(html.ds) .premium-composer .query-submit.query-submit-plain:disabled{color:var(--c-label-3) !important}
:where(html.ds) .taste-signal.muted{color:var(--c-label-3)}
:where(html.ds) .taste-intelligence-card>small{color:var(--c-label-3) !important}
:where(html.ds) .premium-composer .composer-guidance{color:var(--c-label-3) !important}
:where(html.ds) .discover-inspiration>header span{color:var(--c-label-3) !important}
:where(html.ds) .premium-composer .request-count{color:var(--c-label-3) !important}
:where(html.ds) .critical-compare-hint{color:var(--c-label-3)}
:where(html.ds) .cryptic-clue-number{color:var(--c-label-3)}
:where(html.ds) .premium-cryptic-play .cryptic-guess-panel input::placeholder{color:var(--c-label-3)}
:where(html.ds) .premium-cryptic-play .cryptic-guess-panel button[type="submit"]:disabled{color:var(--c-label-3)}
:where(html.ds) .cryptic-archive-list > button > i{color:var(--c-label-3)}
:where(html.ds) .cryptic-membership-legal{color:var(--c-label-3)}
:where(html.ds) .premium-cryptic-home .cryptic-access-note small{color:var(--c-label-3)}
:where(html.ds) .cryptic-share-grid{color:var(--c-label-3)}
:where(html.ds) #device .premium-composer .query-save:disabled{color:var(--c-label-3) !important}
/* END generated: neutral-colour */

/* ===== base: body text, type utilities, inputs, focus =========================== */
html.ds body {
  font-family: var(--font-ui);
  font-optical-sizing: auto;
  font-size: var(--fs-body);
  line-height: 1.41;
  color: var(--c-label-1);
  background: var(--c-stage);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html.ds .device { font-family: var(--font-ui); }
html.ds :is(input, textarea, select) { font-family: var(--font-ui); caret-color: var(--c-seal); }
html.ds :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"], [type="color"]), textarea, select) { font-size: var(--fs-body); }
html.ds ::placeholder { color: var(--c-label-3); opacity: 1; }
/* on the root, not `*`: a ::selection rule on every element makes Blink restyle a highlight pseudo for each element a deck frame touches (+7 per frame, +55 on the press frame) */
html.ds::selection { background: rgba(139, 92, 246, .4); }

/* type utilities: one class per ramp step; the ramp lives in --fs-*, --lh-*, --fw-*, --tr-* */
html.ds .ds-large-title { font: var(--fw-large-title) var(--fs-large-title)/var(--lh-large-title) var(--font-ui); letter-spacing: var(--tr-large-title); }
html.ds .ds-title-1 { font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); }
html.ds .ds-title-2 { font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2); }
html.ds .ds-title-3 { font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: var(--tr-title-3); }
html.ds .ds-headline { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); }
html.ds .ds-body { font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); letter-spacing: var(--tr-body); }
html.ds .ds-callout { font: var(--fw-callout) var(--fs-callout)/var(--lh-callout) var(--font-ui); letter-spacing: var(--tr-callout); }
html.ds .ds-subhead { font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); }
html.ds .ds-footnote { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-3); }
html.ds :is(.ds-caption-1, .ds-caption) { font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--c-label-3); }
html.ds .ds-caption-2 { font: var(--fw-caption-2) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-caption-2); color: var(--c-label-3); }
html.ds .ds-eyebrow { font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-label-3); }
/* numbers that change or sit in a column: tabular figures in whatever ramp style they are already in */
html.ds .ds-num { font-variant-numeric: tabular-nums !important; }
/* TRANSITIONAL: .ds-mono and .ds-display-xl are retired (no mono family, no 44px). Until ds-first-run.js has moved off
   them they resolve to tabular SF and Large Title. Remove with the --fs-mono/--fs-display-xl aliases above. */
html.ds .ds-mono { font-variant-numeric: tabular-nums !important; }
html.ds .ds-display-xl { font: var(--fw-large-title) var(--fs-large-title)/var(--lh-large-title) var(--font-ui); letter-spacing: var(--tr-large-title); }
html.ds .ds-label-1 { color: var(--c-label-1); }
html.ds .ds-label-2 { color: var(--c-label-2); }
html.ds .ds-label-3 { color: var(--c-label-3); }

/* "the words of cinema" (film, collection and clue titles) are SF Title 1/2/3 like every other title: no serif.
   Film hero + collection hero: Title 1. Cryptic clue text: Title 3. Share-preview and final-film titles: Title 2. */
html.ds :is(.film-v4 .film-title h1, .film-v5 .film-title h1, .film-title h1, .collection-hero h1, .collections-api-detail .collection-hero h1) {
  font-size: var(--fs-title-1); line-height: var(--lh-title-1); font-weight: var(--fw-title-1); letter-spacing: var(--tr-title-1);
}
html.ds :is(.cryptic-clues p, .cryptic-clue-rail article.is-current p) {
  font-size: var(--fs-title-3); line-height: var(--lh-title-3); font-weight: var(--fw-title-3); letter-spacing: var(--tr-title-3);
}
html.ds :is(.final-film > strong, .share-preview h2) {
  font-size: var(--fs-title-2); line-height: var(--lh-title-2); font-weight: var(--fw-title-2); letter-spacing: var(--tr-title-2);
}

/* headings on every screen: tight display tracking only where the type is large */
html.ds .screen h1 { font-family: var(--font-ui); text-wrap: balance; }
/* body copy: no one-word last line (P-SYSTEM, 13 October 2026: Friday 3's "…Nothing / else.", the Flick bubbles).
   As little weight as a scoped rule can carry, so a page's own wrap rule (balance, nowrap) still wins; browsers without it break as before. */
html.ds :where(#device) :where(p, li, dd, figcaption, small, label) { text-wrap: pretty; }

/* focus: the accent ring (--c-focus), never removed */
html.ds :is(button, a, [role="button"], [tabindex], summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--c-focus) !important;
  outline-offset: 2px !important;
  box-shadow: none;
}
html.ds :is(input, textarea):focus-visible { outline-offset: 0 !important; }

/* inputs: 14 radius, fill, beam focus */
html.ds :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"], [type="color"], [type="submit"]), select) {
  min-height: 48px;
  border-radius: var(--r-row);
}
html.ds input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"])::-webkit-search-cancel-button { -webkit-appearance: none; }

/* horizontal rhythm: visible text under 44px tap areas is never the target itself */
html.ds :is(.subpage-header button, .circle-control, .close-control, .back-chevron) { min-width: var(--target); min-height: var(--target); }
html.ds a[href] { -webkit-tap-highlight-color: transparent; }
html.ds :is(button, [role="button"]) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* ===== buttons: Lamp (primary), Seal (ritual starts only), Glass (secondary) ========
   Violet gradients and coloured halos are gone. Specificity is (1,2,1) so this beats the
   earlier "#device .primary-button:not(:disabled)" !important chain. */
html.ds :is(#device, body) :is(.primary-button, .critical-film-cta.primary-button, .secondary-button, .destructive-button, .query-submit.query-submit-plain) {
  position: relative;
  box-sizing: border-box;
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 24px !important;
  max-width: 100%;
  border-radius: var(--r-pill) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--fs-headline) !important;
  line-height: var(--lh-headline) !important;
  font-weight: var(--fw-headline) !important;
  letter-spacing: var(--tr-headline) !important;
  text-shadow: none !important;
  filter: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: scale var(--motion-fast) var(--motion-spring), opacity var(--motion-fast) var(--motion-curve);
  -webkit-tap-highlight-color: transparent;
}
html.ds :is(#device, body) :is(.primary-button, .secondary-button, .destructive-button) { width: 100%; }
html.ds :is(#device, body) :is(.primary-button, .secondary-button, .destructive-button, .query-submit.query-submit-plain) :is(span, i, b, strong, em) {
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

/* Find three sits beside the composer hint: compact pill, still a 48px target */
html.ds :is(#device, body) .query-submit.query-submit-plain {
  min-height: 48px !important;
  height: 48px !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 14px !important;
  flex: 0 0 auto;
}

/* one primary shape: a 50pt capsule (radius 25 = var(--r-pill) at this height), 17 Semibold, never an "→" in the label.
   Legacy markup appends the arrow as an aria-hidden <i>; the accessible name (aria-label / label span) is unchanged. */
html.ds :is(#device, body) :is(.primary-button, .secondary-button, .query-submit.query-submit-plain) > i[aria-hidden="true"] { display: none; }

/* Lamp: warm projector white, ink text */
html.ds :is(#device, body) :is(.primary-button, .critical-film-cta.primary-button):not(:disabled) {
  color: var(--c-lamp-ink) !important;
  background: var(--c-lamp) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: inset .5px 1px 0 rgba(255, 255, 255, .55), 1px 3px 6px rgba(0, 0, 0, .24), 4px 12px 28px rgba(0, 0, 0, .32) !important;   /* the light (17 Oct 2026): rim upper left, e-2 cast */
  -webkit-text-fill-color: var(--c-lamp-ink) !important;
}
html.ds :is(#device, body) :is(.primary-button, .critical-film-cta.primary-button):disabled,
html.ds :is(#device, body) .primary-button[aria-disabled="true"] {
  color: var(--c-label-3) !important;
  -webkit-text-fill-color: var(--c-label-3) !important;
  background: var(--c-fill-2) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
/* Seal: solid violet, ritual starts only (Find three, Open Friday, Begin today's puzzle) */
html.ds :is(#device, body) :is(.query-submit.query-submit-plain:not(:disabled), .cryptic-begin.primary-button:not(:disabled), .primary-button[onclick*="'friday'"]:not(:disabled), .primary-button[onclick*="tripCriticalStartFriday"]:not(:disabled), .primary-button[data-ds-kind="seal"]:not(:disabled)) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--c-seal-fill) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: var(--hl-edge-strong), var(--e-2-cast) !important;
}
html.ds :is(#device, body) .query-submit.query-submit-plain:disabled {
  color: var(--c-label-3) !important;
  -webkit-text-fill-color: var(--c-label-3) !important;
  background: var(--c-fill-2) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
/* Glass: secondary */
html.ds :is(#device, body) :is(.secondary-button, .primary-button[data-ds-kind="glass"]) {
  color: var(--c-label-1) !important;
  -webkit-text-fill-color: var(--c-label-1) !important;
  background: var(--c-fill-2) !important;
  background-image: none !important;
  border: 1px solid var(--c-line) !important;
  box-shadow: none !important;
}
html.ds :is(#device, body) .destructive-button {
  color: var(--c-danger) !important;
  -webkit-text-fill-color: var(--c-danger) !important;
  background: var(--c-fill-2) !important;
  background-image: none !important;
  border: 1px solid var(--c-line) !important;
  box-shadow: none !important;
  margin-top: 20px;
}
html.ds :is(#device, body) .secondary-button:disabled { color: var(--c-label-3) !important; -webkit-text-fill-color: var(--c-label-3) !important; opacity: 1 !important; }

/* Quiet: a text button; the tertiary action under a Lamp */
html.ds :is(#device, body) .quiet-button {
  color: var(--c-label-2);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-subhead);
  min-height: var(--target);
  background: none;
  border: 0;
  box-shadow: none;
}
html.ds :is(#device, body) .circle-control {
  background: var(--c-fill-2);
  border: 1px solid var(--c-line);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* coloured halos on other buttons become neutral (light moves; surfaces do not glow) */
html.ds :is(#device, body) :is(.friday-ribbon, .daily-cryptic-home-entry, .prompt-card, .library-hero, .a11y-card) { box-shadow: var(--e-1); }

/* pressed states (ds-core press delegation). Buttons scale; rows take a highlight. */
/* Pressing a button is pushing a key: it goes in fast (scale .96, 90ms), its drop shadow compresses into a faint inner
   shade (instant, so the surface reads as lower), and ds-core springs it back on release (WAAPI, ~1.4% overshoot).
   Reduce Motion keeps the tone/shade and drops the scale (.ds-pressed-quiet). */
html.ds .ds-pressed {
  scale: .96 !important;
  transition: scale var(--motion-press) var(--motion-curve) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22), inset 0 0 0 999px rgba(0, 0, 0, .05) !important;
}
html.ds .ds-pressed.ds-pressed-quiet { scale: 1 !important; transition: none !important; }
/* (CORNER PRESS, 4 November 2026) a control with no ground of its own over a picture (ds-core.js bareOver: a Corner tile, its poster
   and its words) goes in by scale alone: the inner shade was a dark box drawn over the picture and the words for the press */
html.ds .ds-pressed.ds-pressed-bare { box-shadow: none !important; }
html.ds .ds-releasing { transition-property: none !important; }
/* the older press layers (premium-20 .p20-pressing, product-manager-polish .is-pressing) also scale the same button: ds-core owns the press, so they stand down */
html.ds :is(.ds-pressed, .ds-pressed-row):is(.p20-pressing, .is-pressing) { transform: none !important; filter: none !important; }   /* (CORNER PRESS, 4 November 2026) a row too: the old layers' brightness(1.07) flashed on a pressed row */
html.ds :is(#device, body) :is(.primary-button, .critical-film-cta.primary-button):not(:disabled).ds-pressed { background: #dcd6cc !important; }
html.ds :is(#device, body) :is(.query-submit.query-submit-plain, .cryptic-begin.primary-button).ds-pressed:not(:disabled) { background: #6a3fd6 !important; }
html.ds .ds-pressed-row { box-shadow: inset 0 0 0 999px var(--c-fill-2) !important; scale: 1 !important; }
/* (5 November 2026, the owner: "when you press Commuters Corner, I don't like the box that appears round it") a control drawn as
   a painted shape (.ds-press-art: the ADMIT ONE ticket) never shows the press's rectangle (row fill or compressed shadow) round
   its bounding box; its own art answers the press instead (commute-corner.css: the paper dips and darkens). */
html.ds .ds-press-art:is(.ds-pressed, .ds-pressed-row, .ds-releasing) { box-shadow: none !important; background: none !important; outline: none !important; }
html.ds .ds-pressed-row .ds-chevron, html.ds .ds-pressed-row .ds-row-chevron { translate: 2px 0; }

/* ===== inset grouped lists and rows ================================================
   .ds-list > .ds-row is the canonical pair. Rows are at least 52px; the group is radius 14
   on --c-fill-1 with hairline separators inset 16px. Legacy list classes adopt it below. */
html.ds .ds-list {
  display: block;
  margin: 0 var(--gutter);
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-row);
  background: var(--c-fill-1);
  border: 0;
  box-shadow: none;
  list-style: none;
}
html.ds .ds-list-header { margin: 28px var(--gutter) 8px; padding: 0 16px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--c-label-3); }
html.ds .ds-list-footer { margin: 8px var(--gutter) 0; padding: 0 16px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }
html.ds .ds-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--row-min);
  padding: 10px 16px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--c-label-1);
  font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui);
  text-align: left;
  box-shadow: none;
}
html.ds .ds-row + .ds-row::before,
html.ds .ds-list > * + .ds-row::before {
  content: "";
  position: absolute;
  top: 0; left: 16px; right: 0;
  height: 1px;
  background: var(--c-line);
}
html.ds .ds-row-icon { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--c-fill-2); }
html.ds .ds-row-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
html.ds .ds-row-title { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); color: var(--c-label-1); }
html.ds .ds-row-sub { font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
html.ds .ds-row-value { flex: 0 0 auto; font: var(--fw-body) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
html.ds .ds-row-chevron, html.ds .ds-chevron {
  flex: 0 0 auto; width: 8px; height: 13px; margin-left: 4px; opacity: .5;
  background: var(--c-label-1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M1.5 1.5 6.5 6.5 1.5 11.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M1.5 1.5 6.5 6.5 1.5 11.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate var(--motion-press) var(--motion-curve);
}
html.ds .ds-row.is-destructive .ds-row-title { color: var(--c-danger); }

/* legacy grouped lists adopt the same shape */
html.ds :is(#device, body) :is(.profile-list, .settings-group) {
  border-radius: var(--r-row);
  overflow: hidden;
}
html.ds :is(#device, body) :is(.profile-list, .settings-group) > button {
  min-height: var(--row-min);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ===== native switch: input[type=checkbox][switch] =================================
   The native control keeps the system haptic; this only restyles the track and knob.
   Track colour crossfades via opacity on ::after; the knob moves by transform. */
html.ds input[type="checkbox"][switch] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 51px;
  height: 31px;
  margin: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-fill-press);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.ds input[type="checkbox"][switch]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c-seal);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--motion-curve);
}
html.ds input[type="checkbox"][switch]::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 2px; left: 2px;
  width: 27px; height: 27px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 1px 2px 6px rgba(0, 0, 0, .3);
  transform-origin: left center;
  transition: transform var(--motion-fast) var(--motion-spring);
}
html.ds input[type="checkbox"][switch]:checked::after { opacity: 1; }
html.ds input[type="checkbox"][switch]:checked::before { transform: translateX(20px); transform-origin: right center; }
html.ds input[type="checkbox"][switch]:active::before { transform: scaleX(1.26); }
html.ds input[type="checkbox"][switch]:checked:active::before { transform: translateX(20px) scaleX(1.26); }
html.ds input[type="checkbox"][switch]:disabled { opacity: .4; cursor: default; }

/* ===== material: one frosted chrome, everything else solid ======================== */
html.ds .ds-chrome,
html.ds :is(#device, body) .glass-nav,
html.ds :is(#device, body) .persistent-glass-nav {
  background: var(--mat-chrome);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
}
html.ds :is(#device, body) .content-material {
  background: var(--c-fill-1) !important;
  background-image: none !important;
  border: 1px solid var(--c-line);
  box-shadow: var(--e-1) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Reduce Transparency (app toggle and OS setting): chrome goes solid, no backdrop filters */
html.ds #device.manual-solid :is(.ds-chrome, .glass-nav, .persistent-glass-nav, .glass-panel, .toast, .fluid-toast),
html.ds.reduce-transparency :is(.ds-chrome, .glass-nav, .persistent-glass-nav, .glass-panel) {
  background: var(--mat-chrome-solid) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
@media (prefers-reduced-transparency: reduce) {
  html.ds :is(.ds-chrome, .glass-nav, .persistent-glass-nav, .glass-panel) { background: var(--mat-chrome-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html.ds .ds-ambient { display: none; }
}
html.ds #device.manual-solid .ds-ambient { display: none; }

/* ===== ambient poster tint: one full-screen layer pair, 480ms crossfade ============ */
html.ds .ds-ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
html.ds .ds-ambient > i {
  position: absolute; inset: -10% -10% auto -10%; height: 70%;
  background: radial-gradient(120% 90% at 50% 0%, rgba(var(--tint-rgb), .34), rgba(var(--tint-rgb), .12) 48%, transparent 76%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-slow) var(--motion-curve), visibility 0s linear var(--mo-ambient);
}
html.ds .ds-ambient > i.is-on { opacity: 1; visibility: visible; transition: opacity var(--motion-slow) var(--motion-curve), visibility 0s; }

/* ===== typographic poster fallback =================================================
   Title 2 on a gradient from one of the six DNA hues (hash of the film id), tabular caption year,
   a 16px mark and a 1px line inset 8px. Criterion-spine elegance instead of a flat tile. */
html.ds .ds-poster-fallback {
  --ds-hue: 185, 163, 255;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
  padding: 14px 14px 16px;
  overflow: hidden;
  container-type: inline-size;
  border-radius: var(--r-card);
  background:
    linear-gradient(180deg, rgba(var(--ds-hue), .14), rgba(var(--ds-hue), .34) 70%, rgba(var(--ds-hue), .5)),
    var(--c-stage-raised);
  color: var(--c-label-1);
  text-align: left;
}
html.ds .ds-poster-fallback::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: calc(var(--r-card) - 8px);
  pointer-events: none;
}
html.ds .ds-poster-fallback::after {
  content: "";
  position: absolute;
  top: 16px; left: 16px;
  width: 16px; height: 16px;
  background: var(--c-label-2);
  -webkit-mask: url("/assets/trio-mark-compact.svg") center / contain no-repeat;
  mask: url("/assets/trio-mark-compact.svg") center / contain no-repeat;
}
html.ds .ds-poster-fallback .ds-pf-title {
  position: relative; z-index: 1;
  font: var(--fw-title-2) clamp(13px, 12cqi, 22px)/1.14 var(--font-ui);
  letter-spacing: var(--tr-title-2);
  text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--c-label-1);
}
html.ds .ds-poster-fallback .ds-pf-year {
  position: relative; z-index: 1;
  font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui);
  letter-spacing: var(--tr-caption-1);
  font-variant-numeric: tabular-nums;
  color: var(--c-label-2);
}
html.ds .ds-poster-fallback > :is(svg, .brand-mark, img) { display: none !important; }
/* (2 November 2026) a poster found after the slot was drawn (film-poster.js paint) covers its stand-in */
html.ds [data-poster-for].tp-has-poster > :is(.ds-poster-fallback, .library-grid-placeholder) { visibility: hidden; }
html.ds [data-poster-for] > img.tp-filled { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; border-radius: inherit; }
html.ds .ds-hue-0 { --ds-hue: 255, 159, 122; }
html.ds .ds-hue-1 { --ds-hue: 245, 196, 107; }
html.ds .ds-hue-2 { --ds-hue: 111, 214, 240; }
html.ds .ds-hue-3 { --ds-hue: 185, 163, 255; }
html.ds .ds-hue-4 { --ds-hue: 142, 232, 180; }
html.ds .ds-hue-5 { --ds-hue: 245, 154, 200; }

/* ===== review banner: an 18px corner capsule, never in the way =================== */
html.ds .triptic-review-indicator {
  top: calc(env(safe-area-inset-top, 0px) + 4px);
  left: auto;
  right: 8px;
  transform: none;
  height: 18px;
  box-sizing: border-box;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  background: rgba(9, 12, 22, .72);
  color: var(--c-label-2);
  font: 600 calc(11 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui);
  letter-spacing: var(--tr-caption-2);
  pointer-events: none;
  opacity: .92;
}

/* ===== surface fixes found by the audit (design-system-audit.mjs) ================== */
/* coloured halos become neutral */
html.ds :is(#device, body) .friday-ribbon {
  box-shadow: var(--e-1) !important;
}
html.ds :is(#device, body) :is(.settings-premium .secondary-button, .reason-sheet .reason-options > button, .reason-options > button) {
  background: var(--c-fill-1) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--r-row) !important;
  box-shadow: none !important;
  color: var(--c-label-1) !important;
  min-height: var(--row-min);
}
html.ds :is(#device, body) .a11y-card { box-shadow: var(--e-1) !important; }

/* selected filter pills: white on the deep violet, never on the light one */
html.ds :is(#device, body) :is(.filter-pills button.active, .explore-screen .filter-pills button.active, .memory-links button:active) {
  background: var(--c-seal-fill) !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* inline banners: one footnote row with a coloured dot, no yellow-bordered boxes */
html.ds :is(#device, body) :is(.ds-inline-note, .cryptic-review-note, .share-local-warning) {
  position: relative;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0 0 0 16px;
  color: var(--c-label-2);
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui);
  box-shadow: none;
}
html.ds :is(#device, body) :is(.ds-inline-note, .cryptic-review-note, .share-local-warning)::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--c-caution);
}

/* the typographic poster wins over the legacy placeholder's centring */
html.ds :is(#device, body) .ds-poster-fallback {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  place-items: normal;
  text-align: left;
  border: 0;
}

/* low-contrast legacy text variables: lifted to at least 4.5:1 on the dark surfaces */
html.ds {
  --muted: #a4a3af;
  --cryptic-dim: #8a91a2;
  --search-muted: #a39fae;
}
html.ds #device #friday-preference-input { font-size: calc(17 * var(--type-unit)); }

/* explanatory paragraphs whose class is not a tag: body 15px; disclosures keep the 13px footnote */
html.ds :is(#device, body) :is(p.fingerprint-reading, p.first-run-edition-help, p.refinement-contract, .subpage-intro) { font-size: var(--fs-subhead); line-height: var(--lh-subhead); }
html.ds :is(#device, body) :is(p.friday-preference-scope, p.fingerprint-scope, p.share-honesty, p.share-local-warning) { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--c-label-2); }

/* poster scrim: text laid over artwork needs a real scrim at the top as well as the bottom */
html.ds :is(#device, body) .interest-grid button::after {
  background: linear-gradient(180deg, rgba(4, 4, 9, .58), rgba(4, 4, 9, .4) 40%, rgba(4, 4, 9, .96));
}
html.ds :is(#device, body) :is(p.fingerprint-reading, .p20-sensory-preview p, .film-information-source p) { font-size: var(--fs-subhead) !important; line-height: var(--lh-subhead); }

/* ===== SF type ramp: legacy off-ramp sizes snapped to the ramp (design-system-audit.mjs --type) ===================
   Page titles take Large Title 34 (tab roots, welcome-class heroes), Title 1 28 (pushed pages and states) or Title 2 22
   (compact headers); nothing else. Selectors carry #device so they beat the legacy rule; `!important` appears only where
   the legacy declaration is itself !important (the discover composer textarea and inspiration header). */
html.ds #device :is(.library-page-header h1, .collections-api-saved h1, .clarify-screen > h1, .refinement-screen h1, .replacement-screen h1, .reason-sheet h1, .subscription-screen h1, .decision-screen h1, .system-state-screen h1, .receiver-screen h1, .safety-intervention h1, .demo-screen h1, .cryptic-product-state h1, .membership-refined .membership-intro h1) {
  font-size: var(--fs-title-1); line-height: var(--lh-title-1); font-weight: var(--fw-title-1); letter-spacing: var(--tr-title-1);
}
html.ds #device :is(.refinement-live > h1, .cryptic-notification-preview .settings-intro h2, .signin-refined .signin-intro h2) {
  font-size: var(--fs-large-title); line-height: var(--lh-large-title); font-weight: var(--fw-large-title); letter-spacing: var(--tr-large-title);
}
html.ds #device :is(.subpage-header h1, .settings-premium > header h1) {
  font-size: var(--fs-title-2); line-height: var(--lh-title-2); font-weight: var(--fw-title-2); letter-spacing: var(--tr-title-2);
}
/* counts that change while the person types or plays: tabular figures (the class .ds-num does the same in markup we own) */
html.ds #device :is(.request-count, .cryptic-clue-number, .cryptic-streak b, .library-summary b) { font-variant-numeric: tabular-nums; }
html.ds #device .cryptic-sample-card strong { font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--fw-headline); letter-spacing: var(--tr-headline); }
html.ds #device .membership-refined :is(.membership-connection-note, .membership-legal) { font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
html.ds #device .discover-inspiration h2 { font-size: var(--fs-title-3) !important; line-height: var(--lh-title-3) !important; font-weight: var(--fw-title-3) !important; letter-spacing: var(--tr-title-3) !important; }
html.ds #device .premium-discover.discover-v5 .search-glass.premium-composer textarea { font-size: var(--fs-body) !important; line-height: var(--lh-body) !important; letter-spacing: var(--tr-body); }

/* ===== motion conformance (integration, 1 Oct 2026) ==================================================================
   Only transform / translate / scale / rotate / opacity / clip-path / stroke-dashoffset animate under html.ds. Legacy
   keyframes that animated filter (blur, brightness, drop-shadow), box-shadow, border-colour or background-position are
   re-pointed at ds-* twins with the same timing; the glow they carried is held static on the element instead. Keyframes
   cannot be scoped, so the legacy ones stay untouched for ?ds=0. `!important` below only beats a legacy `!important`
   animation shorthand (.screen.fluid-arrival, .screen.fluid-departure, the Friday lure). */
@keyframes ds-screen-arrive { from { opacity: .18; transform: translate3d(0, 8px, 0) scale(.996); } to { opacity: 1; transform: none; } }
@keyframes ds-screen-depart { from { opacity: 1; scale: 1; } to { opacity: 0; scale: .988; } }
@keyframes ds-tab-forward { from { opacity: .18; translate: 18px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes ds-tab-backward { from { opacity: .18; translate: -18px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes ds-mark-resolve { 0% { opacity: 0; transform: scale(.92); } 58% { opacity: 1; transform: scale(1.018); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ds-mark-fade { 0% { opacity: 0; scale: .9; } 52% { opacity: 1; scale: 1.025; } 100% { opacity: 1; scale: 1; } }
@keyframes ds-splash-resolve { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ds-brand-settle { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes ds-card-resolve { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes ds-hero-resolve { from { opacity: .72; scale: 1.035; } to { opacity: 1; scale: 1; } }
@keyframes ds-hero-resolve-flight { from { opacity: .8; transform: scale(1.025); } to { opacity: 1; transform: none; } }
@keyframes ds-clue-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ds-clue-arrive { from { opacity: .72; transform: translateY(5px) scale(.992); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ds-dot-pulse { 50% { opacity: .35; } }
@keyframes ds-lure { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@keyframes ds-media-sheen { 0%, 58%, 100% { opacity: .35; } 72% { opacity: .8; } }

/* the legacy Reduced Motion rule (animation: pm-reduced-arrive !important) keeps winning: these only apply with full motion */
@media (prefers-reduced-motion: no-preference) {
  html.ds:not(.reduce-motion) .device:not(.manual-reduced-motion) .screen.fluid-arrival { animation-name: ds-screen-arrive !important; }
  html.ds:not(.reduce-motion) .device[data-nav-direction="forward"]:not(.manual-reduced-motion) > .screen.fluid-arrival { animation-name: ds-tab-forward !important; }
  html.ds:not(.reduce-motion) .device[data-nav-direction="backward"]:not(.manual-reduced-motion) > .screen.fluid-arrival { animation-name: ds-tab-backward !important; }
  html.ds:not(.reduce-motion) .device:not(.manual-reduced-motion) .screen.fluid-departure { animation-name: ds-screen-depart !important; }
}
html.ds .splash-brand { animation-name: ds-splash-resolve; }
html.ds .splash-screen .splash-brand { animation-name: ds-mark-resolve; }
html.ds .splash-screen :is(.brand-mark, .wordmark) { animation-name: ds-mark-fade; }   /* (17 Oct 2026: no filter-blur glow; one light) */
html.ds :is(.welcome-screen, .auth-screen) .brand-lockup { animation-name: ds-brand-settle; }
html.ds .discover-v5 .prompt-card { animation-name: ds-card-resolve; }
html.ds .film-hero { animation-name: ds-hero-resolve; }
html.ds .critical-film-layer.is-entering .film-hero { animation-name: ds-hero-resolve-flight; }
html.ds .cryptic-clues article { animation-name: ds-clue-in; }
html.ds :is(.premium-cryptic-home .cryptic-clue-tile, .cryptic-clue-stack article.is-current.is-arriving) { animation-name: ds-clue-arrive; }
html.ds .friday-ribbon > span i { animation-name: ds-dot-pulse; }
html.ds .premium-discover > .friday-ribbon > b { animation-name: ds-lure !important; will-change: opacity; }
html.ds .media-trailer.is-ready::after { animation-name: ds-media-sheen; background-position: 50% 50%; }
/* (CORNER PRESS, 4 November 2026; the owner's "Buttons are ever so slightly flickering") runtime-base.js sensory() puts these on the
   whole #device for a tap's answer (a clue revealed, a guess, a search sent, a film saved): the WHOLE screen dipped to .96 / .92 / .88
   and back, a flash of everything, never only the control. The control's own press (ds-core.js) and the haptic are the answer. */
html.ds :is(.sensory-light, .sensory-medium, .sensory-hero) { animation-name: none; }
/* a second infinite loop on the system-state screens: the one ambient is the screen drift, the mark holds still */
html.ds :is(.system-state-screen, .library-empty) .brand-mark { animation: none; opacity: .8; }   /* (17 Oct 2026: no filter-blur glow) */
/* the sealed cards' shutters change colour with the card state; only their scale animates */
html.ds .card100-scene .card100-secret i:nth-child(n) { transition: transform var(--motion-slow) var(--motion-spring); }
/* the global ambient wash bled 18% on every side: 530px wide at -70px, which scrolled the page sideways under Larger Text */
html.ds #device .screen::before { inset: -18% 0; }

/* ===== prototype-src/ds-navigation.css ===== */
/* TRIPTIC ds-navigation layer (W1). Scoped under html.ds (kill switch ?ds=0).
   See workspace/work/frontend-motion-uplift-2026-09-30/DESIGN-DIRECTION.md sections 2, 3 (moments 2 and 3), 4.
   Runtime: prototype-src/ds-navigation.js.

   !IMPORTANT OVERRIDES (each beats an earlier !important):
   - #device[data-ds-nav] > .screen, .screen[data-ds-moved] { animation: none }          beats triptic-fluidity.css .screen.fluid-departure
     (animation: ... !important) and the .device[data-nav-direction] arrival rules while the JS transition runs.
   - .ds-sheet-host:focus-visible outline none                       beats the global :focus-visible ring (the sheet itself is only a focus anchor).
   - .ds-under (kept departure clones) z-index/animation beat .screen.fluid-departure !important.
   - .screen.fluid-departure animation-name (no-VT fallback)      beats the same fluid-depart !important.
   - .ds-sheet-host animation: none                                    beats triptic-fluidity.css .reason-sheet/.feedback-sheet
     fluid-sheet-rise !important and core-reconstruction .reasoning-sheet sheet-up.
   - .persistent-glass-nav left/right/bottom/height/padding/border/background/box-shadow/backdrop-filter and the tab buttons'
     display/gap/height/min-height/radius beat product-manager-polish.css, motion-system.css, design-system.css and the
     legacy globals (all !important); overflow/contain beat globals .glass-nav{overflow:hidden} and fluidity's paint
     containment so the shadow and focus ring can leave the box; button ::before/::after content none beats the legacy
     blue discs (display:block !important); .tab-lens background/border-color/box-shadow/animation beat
     product-manager-polish.css, apple-integration and globals.css. The opaque variants (Reduce Transparency, no backdrop-filter, the reduced motion tier) swap the material's custom properties only.
   - .ds-discover-fade.ds-discover-fade display none                beats ds-first-run.css (later in the bundle): the opaque
     Discover-only band above the bar would hide the page the glass is meant to show; .ds-edge-fade covers every tab.
   - #device.ds-sheet-open > .persistent-glass-nav z-index                  beats the nav's own high z-index so sheets cover it.
   - .fluid-toast.ds-toast outer background/backdrop-filter none   beats triptic-fluidity.css reduced-transparency
     and design-system.css manual-solid (the material lives on the inner .ds-toast-bg instead).
   - .fluid-toast.ds-toast translate none (reduced motion)         beats fluidity .manual-reduced-motion translate: -50% 0.

   Motion here is transform / translate / opacity / clip-path only. */

/* ===== route transitions: no-View-Transition fallback (the old fluid arrivals minus the blur) ===== */
@keyframes ds-arrive { from { opacity: 0; translate: 0 10px; scale: .992; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes ds-depart { from { opacity: 1; scale: 1; } to { opacity: 0; scale: .988; } }
html.ds #device > .screen.fluid-arrival { animation-name: ds-arrive; }
html.ds #device[data-nav-direction] > .screen.fluid-arrival { animation-name: ds-arrive; }
html.ds #device > .screen.fluid-departure { animation-name: ds-depart !important; }

/* while a JS transition runs, the CSS arrivals step aside */
html.ds #device[data-ds-nav] > .screen,
html.ds #device > .screen[data-ds-moved] { animation: none !important; }
html.ds #device > .ds-nav-dim {
  position: absolute; inset: 0; background: var(--c-stage); opacity: 0; pointer-events: none;
}
html.ds #device > .ds-nav-edge {
  position: absolute; left: 0; top: 0; bottom: 0; width: 28px; z-index: 3; pointer-events: none; transform: translateX(-28px);
  background: linear-gradient(to left, rgb(0 0 0 / .38), rgb(0 0 0 / 0));
}
html.ds #device[data-ds-nav] > .screen { will-change: transform; }
html.ds #device > .ds-under { position: absolute; inset: 0; z-index: 1 !important; animation: none !important; pointer-events: none; }
html.ds #device > .ds-under-card {
  transform: translateY(8px) scale(.94); transform-origin: 50% 0; border-radius: var(--r-row); overflow: hidden;
}
html.ds #device > .ds-under-dim { z-index: 2; background: rgb(5 5 7 / .4); opacity: 1; }

/* ===== tab dock: dark Liquid Glass (7 October 2026; hub/docs/SHELL-AND-OWN-ART-2026-10-07.md).
   The owner: "I thought I liked the purple and I still do but it feels a little less premium than I want ... maybe
   uplift Apple style." So purple is no longer the fill. The bar is a dark, translucent capsule that takes its colour
   from the page behind it; it has a fine specular edge (brightest along the top, a hairline all round) and a soft
   grounded shadow. The selected tab is a clearer, slightly raised lozenge of the same glass. Purple is the accent:
   the selected icon and label are tinted, and a faint violet bloom lies under the lozenge.

   One glass element carries the only backdrop filter; the lens, the bloom, the shadow and the tabs are plain layers
   over it, moved with transform / translate / opacity (and one clip-path pair for the minimise morph).
   ds-navigation.js dresses the bar (adds .ds-dock and the .ds-dock-* layers) and mirrors --dock-pad / --dock-min /
   --dock-h / --dock-drop / --dock-rim in its DOCK constants. Until it has, the bar is one flat dark material.

   The material is written once, in the custom properties below, and three situations swap it for an opaque one by
   changing those properties and nothing else: Reduce Transparency (the phone's setting, the app's own switch),
   a browser with no backdrop-filter, and the reduced motion tier (a phone that is struggling: the blur is the dearest
   thing on the page). The opaque bar is the same capsule, rim and lozenge in solid graphite.

   Legibility floor: icons and labels must hold 4.5:1 over anything that scrolls beneath, a white poster included. The
   floor is the glass itself, not the page: a plain shade (--dock-floor is how much of the page's light it lets
   through) lies under the tint, and
   the lens carries a dark well (--dock-well) under its sheen, so over a pure white page the lens is no lighter than
   the bar and the violet glyph still clears 4.5:1 with the sheen and the bloom on top of it; over a dark page the
   well has nothing to take away and the lens reads as clearer glass. tests/ds-navigation.test.mjs recomputes that
   worst case from these tokens (a white page, then every point of the icon box and the label box of an unselected and
   of the selected tab, with the tint, the well, the sheen and the bloom each at their value for that point); keep
   them in step. ===== */
html.ds #device {
  --dock-h: 62px;
  --dock-side: clamp(12px, 3.3%, 16px);   /* five tabs: 12.4 at 375, 12.9 at 390, 14.2 at 430 (a tab is 68.6 / 71.3 / 78.7 wide) */
  --dock-max: 430px;                   /* the widest the capsule grows: on a wide screen it is a centred capsule, never a slab */
  --dock-inset: max(var(--dock-side), calc((100% - var(--dock-max)) / 2));
  --dock-pad: 4px;
  --dock-min: 56px;                    /* the minimised circle */
  --dock-drop: 7.5px;                  /* how far the icon sinks to sit in the middle of the circle */
  --dock-rim: 1px;
  --dock-bottom: max(14px, env(safe-area-inset-bottom, 0px));
  --dock-icon: 24px;
  --dock-icon-y: 23.5px;               /* the icon's centre, from the top of the bar */
  --dock-ink: 245 244 247;             /* unselected icons and labels (= --c-label-1) */
  --dock-accent: 196 178 255;          /* the brand's violet, lifted until small type holds 4.5:1 on the lens */
  --dock-bloom: 139 92 246;            /* the brand's violet itself (= --c-seal): the light under the lozenge */
  --dock-bloom-y: 59px;                /* where that light is brightest: just under the lozenge's lower edge */
  --dock-bloom-core: .36;
  --dock-bloom-halo: .2;
  --dock-lens: blur(18px) saturate(180%);   /* lighter than --mat-blur: shapes stay readable as they pass under */
  /* The floor is a SHADE painted by the glass (--dock-under), not a brightness() in its backdrop filter. The sum is
     the same (the page's light, halved, before the tint goes over it), but a shade dims whatever is behind the bar,
     and a backdrop filter dims only what the browser hands it. In the test browser poster shelves drawn in 3D were
     left out of the filter and passed under the glass at full brightness (7 October 2026); with the floor in the
     filter the selected label fell to 3.7:1 over them. */
  --dock-floor: .5;
  --dock-glass-hi: rgb(50 48 62 / .44);      /* graphite with the faintest violet cast; lighter than the app's stage, so the capsule reads over black */
  --dock-glass-lo: rgb(24 23 33 / .58);
  --dock-solid-hi: rgb(44 42 54);
  --dock-solid-lo: rgb(27 26 34);
  --dock-well: rgb(10 9 16 / .58);     /* under the lens's sheen: the floor for the selected glyph */
  --dock-sheen: 255 255 255;           /* the lens's own light: plain white, so the lozenge is clearer glass and not a colour */
  --dock-sheen-top: .13;
  --dock-sheen-mid: .11;
  --dock-sheen-low: .09;
  /* the rim light: a crisp line along the top edge, brightest towards the leading corner, and a weaker return along
     the bottom towards the trailing one (both 1.5pt strips, so only the rim shows them); and the glass's own light, a
     veil that is strongest under the top edge. The veil is the hairline down the capsule's ends where the tint leaves
     the outermost --dock-rim uncovered, and it shows faintly through the tint everywhere else: the legibility
     arithmetic counts it (--dock-veil-*). */
  --dock-veil-top: .16;
  --dock-veil-a: .08;
  --dock-veil-b: .06;
  --dock-veil-low: .1;
  --dock-specular:
    linear-gradient(90deg, rgb(255 255 255 / .5), rgb(255 255 255 / .32) 46%, rgb(255 255 255 / .18)) top / 100% 1.5px no-repeat,
    linear-gradient(90deg, rgb(255 255 255 / .05), rgb(255 255 255 / .1) 54%, rgb(255 255 255 / .22)) bottom / 100% 1.5px no-repeat,
    linear-gradient(180deg, rgb(255 255 255 / var(--dock-veil-top)) 0, rgb(255 255 255 / var(--dock-veil-a)) 36%, rgb(255 255 255 / var(--dock-veil-b)) 64%, rgb(255 255 255 / var(--dock-veil-low)) 100%);
  --dock-shadow: 5.8px 16px 36px rgb(0 0 0 / .42), 1.4px 4px 12px rgb(0 0 0 / .3), 0 0 0 .5px rgb(0 0 0 / .5);
  /* the material, as the layers below read it */
  --dock-backdrop: var(--dock-lens);
  --dock-fill:
    radial-gradient(70% 90% at 50% -42%, rgb(255 255 255 / var(--dock-top-light)), rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, var(--dock-glass-hi), var(--dock-glass-lo));
  --dock-top-light: .08;               /* the soft highlight inside the top edge */
  /* what the glass paints behind its tint: the floor's shade here, and a solid colour when nothing shows through */
  --dock-under: linear-gradient(rgb(0 0 0 / calc(1 - var(--dock-floor))), rgb(0 0 0 / calc(1 - var(--dock-floor))));
}
/* the opaque bar: the same properties, solid. Nothing shows through, so there is nothing to floor: no well. */
html.ds #device.manual-solid,
html.ds.reduce-transparency #device,
html.ds[data-motion-tier="reduced"] #device {
  --dock-backdrop: none;
  --dock-fill: linear-gradient(180deg, var(--dock-solid-hi), var(--dock-solid-lo));
  --dock-under: var(--dock-solid-lo);
  --dock-well: rgb(10 9 16 / 0);
}
@media (prefers-reduced-transparency: reduce) {
  html.ds #device {
    --dock-backdrop: none;
    --dock-fill: linear-gradient(180deg, var(--dock-solid-hi), var(--dock-solid-lo));
    --dock-under: var(--dock-solid-lo);
    --dock-well: rgb(10 9 16 / 0);
  }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.ds #device {
    --dock-backdrop: none;
    --dock-fill: linear-gradient(180deg, var(--dock-solid-hi), var(--dock-solid-lo));
    --dock-under: var(--dock-solid-lo);
    --dock-well: rgb(10 9 16 / 0);
  }
}
html.ds #device > .persistent-glass-nav {
  left: var(--dock-inset) !important;
  right: var(--dock-inset) !important;
  bottom: var(--dock-bottom) !important;
  width: auto !important;
  height: var(--dock-h) !important;
  padding: var(--dock-pad) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  background: linear-gradient(180deg, var(--dock-solid-hi), var(--dock-solid-lo)) !important;
  box-shadow: var(--dock-shadow), inset 0 0 0 var(--dock-rim) rgb(255 255 255 / .16) !important;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* dressed: the bar itself is only a frame. It must stay free of opacity, filter and clip-path, or the glass inside
   would lose sight of the page behind it. */
html.ds #device > .persistent-glass-nav.ds-dock {
  background: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  overflow: visible !important;
  contain: layout !important;
}
html.ds #device > .persistent-glass-nav :is(.ds-dock-shadow, .ds-dock-glass, .ds-dock-tint, .ds-dock-glow) { position: absolute; display: block; pointer-events: none; }
html.ds #device > .persistent-glass-nav .ds-dock-shadow { inset: 0; z-index: 0; border-radius: var(--r-pill); box-shadow: var(--dock-shadow); }
/* the material: what is behind the bar, blurred and lifted in saturation, then shaded to the floor; its own fill is the
   rim light, which the tint covers everywhere but the outermost --dock-rim */
html.ds #device > .persistent-glass-nav .ds-dock-glass {
  inset: 0; z-index: 0; border-radius: var(--r-pill); overflow: hidden; /* the bloom inside it never passes the capsule's edge */
  background: var(--dock-specular), var(--dock-under);
  -webkit-backdrop-filter: var(--dock-backdrop); backdrop-filter: var(--dock-backdrop);
}
/* the tint: graphite, thin enough to let the page through. A soft highlight under the top edge and a hairline of
   shade inside the bottom one give the slab its thickness. (Nothing wider than a hairline is drawn here that the
   legibility arithmetic does not count.) */
html.ds #device > .persistent-glass-nav .ds-dock-tint {
  inset: var(--dock-rim); border-radius: var(--r-pill);
  background: var(--dock-fill);
  box-shadow: inset .5px 1px 0 rgb(255 255 255 / .1), inset -.5px -1px 0 rgb(0 0 0 / .3);   /* lit upper left, shaded lower right (17 Oct 2026) */
}
html.ds #device > .persistent-glass-nav button {
  position: relative; z-index: 2;
  display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px !important;
  width: auto; min-width: 0; height: auto !important; min-height: 0 !important;
  margin: 0; padding: 0 2px !important;
  border: 0; border-radius: var(--r-pill) !important;
  background: none;
  /* Caption 2, and it grows with the text size only as far as five labels fit five slots: x1.15. (iOS's own tab bar
     does not grow its labels at all.) "Collections" is 53pt wide at 11pt and its slot is 71pt on a 390pt phone. */
  font: 500 calc(11px * min(var(--text-scale, 1), 1.15))/calc(13px * min(var(--text-scale, 1), 1.15)) var(--font-ui);
  letter-spacing: var(--tr-caption-2);
  white-space: nowrap;
  color: rgb(var(--dock-ink));
  -webkit-tap-highlight-color: transparent;
}
html.ds #device > .persistent-glass-nav button::before,
html.ds #device > .persistent-glass-nav button::after { content: none !important; display: none !important; }
html.ds #device > .persistent-glass-nav button .ds-dock-label { display: block; font-weight: inherit; }
html.ds #device > .persistent-glass-nav button svg { width: var(--dock-icon); height: var(--dock-icon); margin: 0; flex: none; color: rgb(var(--dock-ink)); stroke-width: 1.8; overflow: visible; }
html.ds #device > .persistent-glass-nav button svg * { vector-effect: none; }
/* each glyph is drawn twice, the way a symbol and its .fill variant are: .ds-o at rest, .ds-s for the selected tab */
html.ds #device > .persistent-glass-nav button svg .ds-s { display: none; fill: currentColor; }
/* the selected tab: the brand's violet on the icon and the label, the filled glyph, one step of weight */
html.ds #device > .persistent-glass-nav:not(.is-scrubbing) button:is([aria-current="page"], .active),
html.ds #device > .persistent-glass-nav button.ds-scrub-hot { font-weight: 600; color: rgb(var(--dock-accent)) !important; }
/* five tabs on most phones: a tab is 68 to 74pt wide on a phone up to 402pt, and "Collections" in Semibold (58pt) then
   reaches past the lozenge's rounded lower corners (measured 7 October 2026: its box crossed the lozenge's rim by 2pt
   at 390). The selected label keeps the bar's Medium there (as iOS's own tab bars do); the lozenge, the filled glyph
   and the tint say which tab is chosen. From 425pt (the largest phones, both displays of a Duo) a tab is 78pt or
   more and the label takes its step of weight. */
@media (max-width: 424px) {
  html.ds #device > .persistent-glass-nav:not(.is-scrubbing) button:is([aria-current="page"], .active),
  html.ds #device > .persistent-glass-nav button.ds-scrub-hot { font-weight: 500; }
}
/* no halo on the glyph: an earlier layer lights the selected icon with a coloured drop-shadow (!important) */
html.ds #device > .persistent-glass-nav:not(.is-scrubbing) button:is([aria-current="page"], .active) svg,
html.ds #device > .persistent-glass-nav button.ds-scrub-hot svg { color: rgb(var(--dock-accent)); filter: none !important; }
html.ds #device > .persistent-glass-nav:not(.is-scrubbing) button:is([aria-current="page"], .active) svg .ds-o,
html.ds #device > .persistent-glass-nav button.ds-scrub-hot svg .ds-o { display: none; }
html.ds #device > .persistent-glass-nav:not(.is-scrubbing) button:is([aria-current="page"], .active) svg .ds-s,
html.ds #device > .persistent-glass-nav button.ds-scrub-hot svg .ds-s { display: inline; }
html.ds #device > .persistent-glass-nav:not(.is-scrubbing) button:is([aria-current="page"], .active) svg[data-ds-glyph="discover"],
html.ds #device > .persistent-glass-nav button.ds-scrub-hot svg[data-ds-glyph="discover"] { stroke-width: 2.3; }
html.ds #device > .persistent-glass-nav button[aria-current="page"] span:first-child { filter: none !important; }
/* Today's spark: a small solid star on the outlined leaf; cut out of the filled leaf in the glass's own dark */
html.ds #device > .persistent-glass-nav button svg .ds-o .ds-spark { fill: currentColor; stroke: none; }
html.ds #device > .persistent-glass-nav button svg .ds-s .ds-spark { fill: var(--dock-solid-lo); stroke: var(--dock-solid-lo); stroke-width: .4; }
/* the unread dot (nav.badge): the game room's yellow, on the icon's shoulder, ringed in the glass's dark so it reads as
   sitting on the glyph and not as part of it. It rides with the icon when the bar draws in to its circle. */
html.ds #device > .persistent-glass-nav > button > .ds-dock-dot {
  position: absolute; left: calc(50% + 7px); top: calc(var(--dock-icon-y) - var(--dock-pad) - 14px); z-index: 3;
  width: 8px; height: 8px; border-radius: 50%; pointer-events: none;
  background: rgb(255 212 59);
  box-shadow: 0 0 0 1.5px var(--dock-solid-lo);
}
html.ds #device > .persistent-glass-nav.ds-min > button > .ds-dock-dot { translate: 0 var(--dock-drop); }
/* nothing in the bar has a CSS transition: the lens and the morph are driven from ds-navigation.js */
html.ds #device > .persistent-glass-nav,
html.ds #device > .persistent-glass-nav button,
html.ds #device > .persistent-glass-nav .tab-lens { transition: none !important; }
/* touch-down: the tab under the finger dips (ds-core's press) and catches the light instead of the system's dark shade */
html.ds #device > .persistent-glass-nav > button.ds-pressed {
  box-shadow: inset 0 0 0 999px rgb(255 255 255 / .07) !important;
  transition: scale var(--motion-press) var(--motion-curve) !important;
}
/* on the selected tab the lens is that light already (and gives under the finger itself) */
html.ds #device > .persistent-glass-nav > button.ds-pressed:is([aria-current="page"], .active) { box-shadow: none !important; }
/* the lens: a clearer, slightly raised lozenge of the same glass that slides under the selected tab. (.ds-dock-ghost is
   the lozenge it has just left, kept for the 180ms of a Reduce Motion cross-fade.) */
html.ds #device > .persistent-glass-nav :is(.tab-lens, .ds-dock-ghost) {
  animation: none !important;
  position: absolute;
  left: var(--dock-pad); top: var(--dock-pad);
  width: calc((100% - 2 * var(--dock-pad)) / 5); height: calc(100% - 2 * var(--dock-pad));
  z-index: 1;
  border: 0;
  border-color: transparent !important;
  border-radius: var(--r-pill);
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--dock-sheen) / var(--dock-sheen-top)), rgb(var(--dock-sheen) / var(--dock-sheen-mid)) 50%, rgb(var(--dock-sheen) / var(--dock-sheen-low))),
    linear-gradient(var(--dock-well), var(--dock-well)) !important;
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .16), inset 0 1px 0 rgb(255 255 255 / .26), 1.1px 3px 10px rgb(0 0 0 / .3), 0.4px 1px 2px rgb(0 0 0 / .22) !important;
  transform: translate3d(calc(var(--to-index) * 100%), 0, 0);
  will-change: transform;
}
html.ds #device > .persistent-glass-nav .tab-lens::after { content: none; display: none; }
/* the bloom: the brand's violet, as a light lying under the lozenge. It is brightest along the lozenge's lower edge and
   gone by the icon; it sits beneath the lens and travels with it. It is a child of the glass (ds-navigation.js), above
   the tint, so the capsule's own shape cuts it off at the two end tabs; and its wide halo is exactly as wide as a tab,
   so it has faded to nothing at the layer's own edges (at 46px it was cut there and showed as a faint oblong). */
html.ds #device > .persistent-glass-nav .ds-dock-glow {
  left: var(--dock-pad); top: 0; z-index: 0;
  width: calc((100% - 2 * var(--dock-pad)) / 5); height: 100%;
  background:
    radial-gradient(ellipse 30px 7px at 50% var(--dock-bloom-y), rgb(var(--dock-bloom) / var(--dock-bloom-core)), rgb(var(--dock-bloom) / 0) 100%),
    radial-gradient(ellipse 50% 34px at 50% var(--dock-bloom-y), rgb(var(--dock-bloom) / var(--dock-bloom-halo)), rgb(var(--dock-bloom) / 0) 100%);
  transform: translate3d(calc(var(--dock-i, 0) * 100%), 0, 0);
  transform-origin: 50% var(--dock-icon-y);
}
/* minimised (scrolling down): the same glass drawn in to a circle on the left that holds the current tab's icon.
   These are the resting values; ds-navigation.js plays the spring between them (clip-path on the glass and its tint,
   translate / opacity on everything else), so nothing here is !important. */
html.ds #device > .persistent-glass-nav > button:nth-of-type(1) { --dock-n: 0; }
html.ds #device > .persistent-glass-nav > button:nth-of-type(2) { --dock-n: 1; }
html.ds #device > .persistent-glass-nav > button:nth-of-type(3) { --dock-n: 2; }
html.ds #device > .persistent-glass-nav > button:nth-of-type(4) { --dock-n: 3; }
html.ds #device > .persistent-glass-nav > button:nth-of-type(5) { --dock-n: 4; }
html.ds #device > .persistent-glass-nav.ds-min { pointer-events: none; }
html.ds #device > .persistent-glass-nav.ds-min .ds-dock-glass { clip-path: inset(calc((var(--dock-h) - var(--dock-min)) / 2) calc(100% - var(--dock-min)) calc((var(--dock-h) - var(--dock-min)) / 2) 0 round calc(var(--dock-min) / 2)); }
html.ds #device > .persistent-glass-nav.ds-min .ds-dock-tint { clip-path: inset(calc((var(--dock-h) - var(--dock-min)) / 2) calc(100% - var(--dock-min) + 2 * var(--dock-rim)) calc((var(--dock-h) - var(--dock-min)) / 2) 0 round calc(var(--dock-min) / 2)); }
html.ds #device > .persistent-glass-nav.ds-min :is(.ds-dock-shadow, .tab-lens) { opacity: 0; }
html.ds #device > .persistent-glass-nav.ds-min > button { opacity: 0; translate: calc(var(--dock-min) / 2 - var(--dock-pad) - 50% - var(--dock-n, 0) * 100%) 0; }
html.ds #device > .persistent-glass-nav.ds-min > button:is([aria-current="page"], .active) { opacity: 1; }
html.ds #device > .persistent-glass-nav.ds-min > button .ds-dock-label { opacity: 0; }
html.ds #device > .persistent-glass-nav.ds-min > button svg { translate: 0 var(--dock-drop); }
/* in the circle the glyph is drawn in the bar's white: there is no lens there, so no well under it, and the violet
   would fall under 4.5:1 over a white page. The bloom beneath it keeps the colour. */
html.ds #device > .persistent-glass-nav.ds-min > button:is([aria-current="page"], .active) svg { color: rgb(var(--dock-ink)); }
/* the scale property is applied outside the transform that carries the tab index, so it would shrink that offset too:
   the translate gives the difference back (100% - 66% of it per tab). The bloom is dimmed in the circle: there is no
   lens there, so no well under it, and the icon has to hold the same 4.5:1 over a white page */
html.ds #device > .persistent-glass-nav.ds-min .ds-dock-glow { translate: calc(var(--dock-min) / 2 - var(--dock-pad) - 50% - var(--dock-i, 0) * 66%) var(--dock-drop); scale: .66; opacity: .6; }
/* the minimised circle's button: the hit target, the focus ring and the circle's own shadow (the glass is the bar's).
   The second, wider shadow is a pool of shade round the circle: text that scrolls up to it dims as it arrives, so the
   circle reads as floating over the page and not as sitting on a word. */
html.ds #device > .ds-tab-capsule {
  position: absolute; z-index: 31; left: var(--dock-inset); bottom: calc(var(--dock-bottom) + (var(--dock-h) - var(--dock-min)) / 2);
  width: var(--dock-min); height: var(--dock-min); padding: 0; margin: 0;
  border: 0; border-radius: var(--r-pill);
  background: none; box-shadow: var(--dock-shadow), 1.4px 4px 34px 8px rgb(5 5 7 / .4);
  -webkit-tap-highlight-color: transparent;
  opacity: 0; pointer-events: none;
}
html.ds #device > .ds-tab-capsule.is-on { opacity: 1; pointer-events: auto; }
/* touch-down on the circle: the button is only the hit target, so the glass and the icon under it give with it and
   the circle catches the light (Reduce Motion keeps the light and drops the scale, as ds-core's press does) */
html.ds #device > .ds-tab-capsule.ds-pressed { background: rgb(255 255 255 / .08); }
html.ds #device > .persistent-glass-nav.ds-min .ds-dock-glass { transform-origin: calc(var(--dock-min) / 2) 50%; transition: scale var(--motion-press) var(--motion-curve); }
html.ds #device > .persistent-glass-nav.ds-min > button svg { transition: scale var(--motion-press) var(--motion-curve); }
html.ds #device:has(> .ds-tab-capsule.ds-pressed:not(.ds-pressed-quiet)) > .persistent-glass-nav.ds-min :is(.ds-dock-glass, button svg) { scale: .96; }
/* wherever another layer puts the bar away (keyboard, the ritual), the circle goes with it */
html.ds #device:is(.keyboard-open, .critical-journey-active) > .ds-tab-capsule { display: none; }
/* scroll edge: the page dims gently into the bottom so the glass has something to hold; no hard band. It is lighter
   than it was under the purple slab: the glass takes its colour from the page, so the page must still be there. With
   the bar drawn in to its circle the page gets most of that light back (ds-navigation.js runs the opacity with the morph). */
html.ds #device > .ds-edge-fade {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 29; pointer-events: none;
  height: calc(var(--dock-h) + var(--dock-bottom) + 48px);
  background: linear-gradient(to top, rgb(5 5 7 / .5) 0, rgb(5 5 7 / .3) 38%, rgb(5 5 7 / .11) 72%, rgb(5 5 7 / 0) 100%);
}
html.ds #device > .ds-edge-fade.is-min { opacity: .4; }
html.ds #device > .ds-discover-fade.ds-discover-fade { display: none; }
html.ds #device > .ds-edge-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 12; pointer-events: none; opacity: 0;
  height: calc(env(safe-area-inset-top, 0px) + 36px);
  background: linear-gradient(to bottom, rgb(5 5 7 / .9), rgb(5 5 7 / 0));
}

/* ===== sheets ===== */
@keyframes ds-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
html.ds .ds-sheet-host:focus, html.ds .ds-sheet-host:focus-visible { outline: none !important; }
html.ds .ds-sheet-host { animation: none !important; overscroll-behavior: contain; }
html.ds #device > .screen.ds-sheet-host {
  z-index: 3; top: auto; left: 0; right: 0; bottom: 0; width: auto; margin: 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--mat-chrome); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  border-top: 1px solid var(--c-line-strong);
  box-shadow: var(--e-sheet);   /* one light (17 Oct 2026): a lit top edge, the shadow falls on the page below */
  padding-top: 40px; overflow-y: auto;
}
html.ds #device > .screen.ds-sheet-auto { height: min(610px, calc(100% - 56px)); }
html.ds #device > .screen.ds-sheet-large { top: 12px; height: auto; bottom: 0; }
html.ds #device > .screen.ds-sheet-host > [class*="atmosphere"] { display: none; }
html.ds .ds-sheet-grabber {
  position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin: 0 0 0 -18px; padding: 0;
  border-radius: var(--r-pill); background: var(--c-label-4); border: 0; z-index: 2;
}
html.ds .ds-sheet-grabber::after { content: ""; position: absolute; inset: -20px -60px; }
html.ds button.ds-sheet-grabber { width: 96px; height: 44px; margin-left: -48px; top: 0; background: none; }
html.ds button.ds-sheet-grabber::before {
  content: ""; position: absolute; left: 30px; top: 8px; width: 36px; height: 5px; border-radius: var(--r-pill); background: var(--c-label-4);
}
html.ds button.ds-sheet-grabber::after { display: none; }
html.ds .ds-sheet-host.is-dragging { will-change: transform; }

/* overlay sheets that already exist in the app, now one family */
html.ds #device .ds-sheet-overlay:not(dialog):not(.p20-handoff-card) {
  left: 0; right: 0; bottom: 0; max-width: none; border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--mat-chrome); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  border: 0; border-top: 1px solid var(--c-line-strong);
  box-shadow: var(--e-sheet);   /* one light (17 Oct 2026): a lit top edge, the shadow falls on the page below */
  padding-top: 28px;
  animation: ds-sheet-up var(--motion-slow) var(--motion-spring) backwards !important;
}
html.ds #device .p20-handoff { padding: 0; background: rgb(0 0 0 / .4); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.ds #device .p20-handoff-card.ds-sheet-overlay {
  position: relative; border-radius: var(--r-sheet) var(--r-sheet) 0 0; border: 0; border-top: 1px solid var(--c-line-strong);
  padding-top: 28px; padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
  background: var(--mat-chrome); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  animation: ds-sheet-up var(--motion-slow) var(--motion-spring) backwards !important;
}
html.ds #device dialog.film-platforms-sheet.ds-sheet-host {
  inset: auto 0 0 0; width: 100%; max-width: none; max-height: calc(100% - 56px); margin: 0;
  border: 0; border-top: 1px solid var(--c-line-strong); border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--mat-chrome); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  padding-top: 32px;
  animation: ds-sheet-up var(--motion-slow) var(--motion-spring) backwards !important;
}
html.ds #device dialog.film-platforms-sheet::backdrop { background: rgb(0 0 0 / .4); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.ds #device :is(.reasoning-scrim, .functional-sheet-backdrop) { background: rgb(0 0 0 / .4); -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
/* the presenting screen steps back (card presentation) while an overlay sheet is open */
html.ds #device.ds-presenting > .screen:not(.ds-sheet-host):not(.fluid-departure) {
  transform: translateY(8px) scale(.94); transform-origin: 50% 0; border-radius: var(--r-row); overflow: hidden;
  transition: transform var(--motion-slow) var(--motion-spring);
}
/* a sheet covers the tab bar */
html.ds #device.ds-sheet-open > :is(.persistent-glass-nav, .ds-edge-fade, .ds-tab-capsule, .ds-edge-top) { z-index: 80 !important; }
/* sheet.open() API */
html.ds #device > .ds-sheet-layer { position: absolute; inset: 0; z-index: 340; }
html.ds .ds-sheet-layer > .ds-sheet-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .4); }
html.ds .ds-sheet-layer > .ds-sheet-host {
  position: absolute; left: 0; right: 0; bottom: 0; height: 92%; z-index: 1;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; border-top: 1px solid var(--c-line-strong);
  background: var(--mat-chrome); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  box-shadow: var(--e-sheet);   /* one light (17 Oct 2026): a lit top edge, the shadow falls on the page below */
  padding: 44px var(--gutter) max(24px, env(safe-area-inset-bottom, 0px)); overflow: hidden;
  display: flex; flex-direction: column;
}
html.ds .ds-sheet-title { margin: 0 0 12px; font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2); color: var(--c-label-1); }
html.ds .ds-sheet-body { flex: 1; min-height: 0; overflow-y: auto; }
html.ds #device.manual-solid .ds-sheet-host,
html.ds #device.manual-solid > .screen.ds-sheet-host { background: var(--mat-chrome-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) {
  html.ds .ds-sheet-host, html.ds #device > .screen.ds-sheet-host { background: var(--mat-chrome-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ===== one notification system ===== */
html.ds #device > .fluid-toast.ds-toast {
  position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 8px); bottom: auto;
  width: fit-content; max-width: calc(100% - 40px); margin: 0 auto; padding: 0; z-index: 300;
  background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 0; box-shadow: none; translate: none; scale: none; transition: none;
  opacity: 0; pointer-events: auto; touch-action: none; text-align: left;
}
html.ds #device > .fluid-toast.ds-toast.is-visible { opacity: 1; }
html.ds #device.manual-reduced-motion > .fluid-toast.ds-toast { translate: none !important; }
html.ds .ds-toast-bg {
  position: absolute; inset: 0; border-radius: var(--r-pill);
  background: var(--mat-chrome); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  border: 1px solid var(--c-line-strong); box-shadow: var(--e-2);
}
html.ds #device.manual-solid .ds-toast-bg, html.ds.reduce-transparency .ds-toast-bg { background: var(--mat-chrome-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) { html.ds .ds-toast-bg { background: var(--mat-chrome-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }
html.ds .ds-toast-inner {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 14px;
  font: var(--fw-headline) calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); color: var(--c-label-1);
}
html.ds .ds-toast-glyph { display: grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--c-label-1); }
html.ds .ds-toast-glyph.ds-toast-check { color: var(--c-ok); }
html.ds .ds-toast-glyph.ds-toast-caution { color: var(--c-caution); }
html.ds .ds-toast-text { min-width: 0; overflow-wrap: anywhere; }
html.ds .ds-toast-action {
  flex: none; min-width: 44px; min-height: 44px; margin: 0 -10px 0 4px; padding: 0 12px;
  border: 0; border-radius: var(--r-pill); background: none; color: var(--c-beam);
  font: var(--fw-headline) calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui);
}
html.ds .ds-toast-action:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }

html.ds #device > .ds-alert-scrim {
  position: absolute; inset: 0; z-index: 400; display: grid; place-items: center; background: rgb(0 0 0 / .4);
}
html.ds .ds-alert {
  width: 270px; padding: 20px 0 0; overflow: hidden; text-align: center;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-row);
  background: var(--mat-chrome); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  box-shadow: var(--e-4); color: var(--c-label-1);
}
html.ds .ds-alert-title { margin: 0; padding: 0 16px; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); }
html.ds .ds-alert-message { margin: 4px 0 0; padding: 0 16px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds .ds-alert-actions { display: flex; flex-direction: column; margin-top: 18px; border-top: 1px solid var(--c-line); }
html.ds .ds-alert-btn {
  min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--c-beam);
  font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui);
}
html.ds .ds-alert-btn + .ds-alert-btn { border-top: 1px solid var(--c-line); }
html.ds .ds-alert-btn.is-danger { color: var(--c-danger); }
html.ds .ds-alert-btn.is-cancel { color: var(--c-label-2); font-weight: 400; }
html.ds .ds-alert-btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
html.ds #device.manual-solid .ds-alert, html.ds.reduce-transparency .ds-alert { background: var(--mat-chrome-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) { html.ds .ds-alert { background: var(--mat-chrome-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ===== film leader (moment 3) ===== */
html.ds .ds-leader-host { overscroll-behavior-y: contain; }
html.ds .ds-leader {
  position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 26;
  width: var(--ds-leader, 44px); height: var(--ds-leader, 44px); margin-left: calc(var(--ds-leader, 44px) / -2);
  border-radius: 50%; overflow: hidden; pointer-events: none;
  background: var(--c-stage-raised); border: 1px solid var(--c-line-strong);
  opacity: 0; color: var(--c-label-1);
}
html.ds .ds-leader.ds-leader-wait { top: 50%; margin-top: -44px; opacity: 1; }
html.ds .ds-leader-ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--c-label-3); stroke-width: 1; }
html.ds .ds-leader-ring .inner { stroke: var(--c-line-strong); }
html.ds .ds-leader-sweep {
  position: absolute; inset: 0; border-radius: 50%; transform-origin: 50% 50%;
  background: conic-gradient(from 0deg, rgb(243 238 230 / .26) 0deg 180deg, transparent 180deg 360deg);
}
html.ds .ds-leader-num {
  position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; margin: 0;
  font: var(--fw-headline) calc(var(--ds-leader, 44px) * .45)/1 var(--font-ui); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--c-label-1);
}
html.ds .ds-leader-num > span { grid-area: 1 / 1; }
html.ds .ds-leader-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.ds #device.manual-solid .ds-leader { background: var(--mat-chrome-solid); }

/* ===== reduced motion: opacity only, 180ms (the JS also branches on DS.reducedMotion) ===== */
@media (prefers-reduced-motion: reduce) {
  html.ds #device.ds-presenting > .screen:not(.ds-sheet-host):not(.fluid-departure) { transform: none; transition: none; }
  }
html.ds #device.manual-reduced-motion.ds-presenting > .screen:not(.ds-sheet-host):not(.fluid-departure) { transform: none; transition: none; }

/* (release integration, 27 October 2026) Reduce Motion: a tab's page arriving is drawn at its settled layout, never transitioning
   from its undecorated one (ds-navigation.js runTab; removed after two frames) */
html.ds #device > .screen.ds-tab-still, html.ds #device > .screen.ds-tab-still * { transition: none !important; }
/* (29 October 2026; the owner: "Not immediately clear what the yellow dots correspond to when you get there to the page") a tab's
   dot has the same small dot on its cause, where the person lands: beside "Commuters Corner" and "Friday 3" on Today
   (ds-today.js causeDots), on the Library's Cards segment (film-cards.js paintCauseDot). The tab dot's own yellow and size, ringed
   in the dark so it reads on any ground; inline beside the words it belongs to; it goes with its cause. VoiceOver hears ", new"
   from the tab (and the Cards segment), so the dot itself is hidden from it. */
html.ds #device .ds-cause-dot {
  display: inline-block; width: 8px; height: 8px; margin: 0 0 0 6px; border-radius: 50%; vertical-align: .18em; flex: none; pointer-events: none;
  background: rgb(255 212 59); box-shadow: 0 0 0 1.5px rgb(10 9 14 / .85);
}
html.ds #device .dslc-seg-btn:has(> .ds-cause-dot) { position: relative; }
html.ds #device .dslc-seg-btn > .ds-cause-dot { position: absolute; top: 5px; right: 3px; margin: 0; }
@media (forced-colors: active) { html.ds #device .ds-cause-dot { background: Highlight; box-shadow: none; } }
/* (preview "dock-fade", 11 November 2026; the owner's "still janky" recording: the stall as the bar draws in) the circle is its own
   piece of the same glass where the circle rests (.ds-dock-orb, made only under the flag), and the bar's glass and the circle
   cross-fade by opacity, which the compositor runs, instead of the bar's blurred glass being cut down by clip-path on every frame.
   (Kept here, after the dock's own rules: the default dock has exactly one glass layer, tests/ds-navigation.test.mjs.)
   The tabs still travel into the circle exactly as before. Off (no flag): nothing here applies and no orb is made. */
html.ds:is(.pv-dock-fade, .pv-all) #device > .persistent-glass-nav .ds-dock-orb {
  position: absolute; z-index: 0; display: block; pointer-events: none;
  left: 0; top: calc((var(--dock-h) - var(--dock-min)) / 2); width: var(--dock-min); height: var(--dock-min);
  border-radius: var(--r-pill); overflow: hidden; opacity: 0;
  background: var(--dock-specular), var(--dock-under);
  -webkit-backdrop-filter: var(--dock-backdrop); backdrop-filter: var(--dock-backdrop);
}
html.ds:is(.pv-dock-fade, .pv-all) #device > .persistent-glass-nav .ds-dock-orb > .ds-dock-orb-tint {
  position: absolute; inset: var(--dock-rim); display: block; border-radius: var(--r-pill);
  background: var(--dock-fill);
  box-shadow: inset .5px 1px 0 rgb(255 255 255 / .1), inset -.5px -1px 0 rgb(0 0 0 / .3);
}
html.ds:is(.pv-dock-fade, .pv-all) #device > .persistent-glass-nav.ds-min .ds-dock-orb { opacity: 1; }
html.ds:is(.pv-dock-fade, .pv-all) #device > .persistent-glass-nav.ds-min:has(> .ds-dock-orb) :is(.ds-dock-glass, .ds-dock-tint) { clip-path: none; }
html.ds:is(.pv-dock-fade, .pv-all) #device > .persistent-glass-nav.ds-min:has(> .ds-dock-orb) .ds-dock-glass { opacity: 0; }
/* (preview "dock-fade", round 2, 11 November 2026; his second report: with dock-fade on, 36-48 ms "no script" stalls still sat right
   after "dock draw in" / "dock whole") the layers the morph moves are made before it starts, not in its first frames: each glass, the
   circle's glass, the edge's shade, the circle's button and the five tabs keep a layer of their own while the flag is on, so the
   morph's first frame does not have to build them (and redraw the blur behind them) while the page is moving */
html.ds:is(.pv-dock-fade, .pv-all) #device > .persistent-glass-nav :is(.ds-dock-glass, .ds-dock-orb) { will-change: opacity; }
html.ds:is(.pv-dock-fade, .pv-all) #device > .persistent-glass-nav > button { will-change: translate, opacity; }
html.ds:is(.pv-dock-fade, .pv-all) #device > :is(.ds-edge-fade, .ds-tab-capsule) { will-change: opacity; }

/* ===== prototype-src/ds-first-run.css ===== */
/* TRIPTIC ds-first-run layer: Welcome, the first-run flow, the taste card and Discover. Scoped under html.ds.
   Direction: workspace/work/frontend-motion-uplift-2026-09-30/PRESTIGE-BRIEF.md sections 3 and 6 (Workstream B).

   Type: SF only (system-ui). The ramp tokens are the section 4 names owned by design-system.css; the --fr-* values below
   are local fallbacks with the brief's numbers so this layer reads correctly before or after that file changes. Tracking is
   kept in one place (the --fr-tr-* custom properties) so it can be zeroed after the iPhone check.

   !IMPORTANT OVERRIDES (each beats an earlier !important):
   - Flow screen: #device .first-run-screen.ds-fr-flowscreen (first-run.css / triptic-app.css set display, padding, position).
   - Welcome: the legacy .welcome-brand / .welcome-actions / .launch-autograph placements (triptic-app.css, launch-signature.css).
   - Taste card: #device .first-run-screen .taste-deck / .taste-swipe-card / .taste-ghost / .taste-actions button /
     > .quiet-button (first-run.css sizes, inset, radius, margins, all !important), .first-run-screen overflow.
   - Discover: .premium-discover padding and .prompt-grid/.prompt-card sizing, shade, title and action type, .query-submit height (design-system.css
     Find three compact pill: height/min-height/padding/width !important).
   - Discover Find three light fill: overflow:hidden on .query-submit (orb-100.css sets overflow:visible !important) so the fill clips to the pill.
   Everything else is a normal declaration that wins on specificity.

   Motion in this file: transform, opacity, clip-path and visibility only. No filter, width, height or box-shadow transitions.
   Reduced Motion: .ds-fr-flow.is-rm and the media query turn every move into a <=180ms opacity change. */

html.ds {
  --fr-font: var(--font-ui, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, sans-serif);
  --fr-top: max(env(safe-area-inset-top, 0px), 44px);
  --fr-bot: max(env(safe-area-inset-bottom, 0px), 34px);
  --fr-smooth: var(--motion-curve);
  --fr-snappy: var(--motion-spring);
  --fr-ease: var(--motion-curve);
  --fr-tr-large-title: .011em;
  --fr-tr-title-2: -.012em;
  --fr-tr-body: -.025em;
  --fr-tr-subhead: -.015em;
  --fr-tr-footnote: -.006em;
  --fr-dot: rgba(245, 244, 247, .35);
}

/* ------------------------------------------------------------------ type */
html.ds .ds-fr-large-title { margin: 0; font: 700 calc(34 * var(--type-unit))/calc(41 * var(--type-unit)) var(--fr-font); letter-spacing: var(--fr-tr-large-title); color: var(--c-label-1); text-wrap: balance; }
html.ds .ds-fr-title2 { margin: 0; font: 700 calc(22 * var(--type-unit))/calc(28 * var(--type-unit)) var(--fr-font); letter-spacing: var(--fr-tr-title-2); color: var(--c-label-1); text-wrap: balance; outline: none; }
html.ds .ds-fr-body { margin: 0; font: 400 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--fr-font); letter-spacing: var(--fr-tr-body); color: var(--c-label-2); text-wrap: balance; }
html.ds .ds-fr-subhead { margin: 0; font: 400 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--fr-font); letter-spacing: var(--fr-tr-subhead); color: var(--c-label-2); text-wrap: balance; }
html.ds .ds-fr-footnote { margin: 0; font: 400 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--fr-font); letter-spacing: var(--fr-tr-footnote); color: var(--c-label-3); text-wrap: pretty; }
html.ds .ds-fr-caption { font: 500 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--fr-font); letter-spacing: 0; }
html.ds .ds-fr-num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ shared: progress dots (taste card), 6pt on a 12pt pitch */
html.ds .ds-strip { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
html.ds .ds-hole {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--fr-dot);
}
html.ds .ds-hole.is-lit { background: var(--c-lamp); }
html.ds .ds-hole.is-current::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid var(--c-lamp);
  border-radius: var(--r-pill);
  opacity: 0;
  animation: ds-hole-pulse var(--motion-slow) var(--motion-curve) 1 both;
}
html.ds .ds-hole.is-new { animation: ds-hole-fill var(--motion-normal) var(--motion-spring) 1 both; }
@keyframes ds-hole-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2); } }
@keyframes ds-hole-fill { 0% { transform: scale(1.9); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }

html.ds .ds-frs { color: var(--c-label-1); }
html.ds .ds-fr-hidden { display: none !important; }

/* ------------------------------------------------------------------ welcome */
html.ds #device .premium-welcome .welcome-actions { bottom: 62px !important; }
html.ds .ds-fr-welcome .ds-fr-foot {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) - 8px));
  display: flex;
  justify-content: center;
  pointer-events: none;
}
html.ds .ds-fr-welcome .ds-fr-foot .launch-autograph {
  position: relative;
  width: 172px;
  height: 33px;
  margin: 0;
  transform: none;
  filter: none;
  opacity: .92;
}
/* Welcome (scoped; nothing outside .premium-welcome changes) keeps its trailing arrow ("Get started →"): design-system.css hides the glyph in every other primary button */
html.ds #device .premium-welcome .welcome-actions .primary-button > i[aria-hidden="true"] { display: inline-block; }
/* ...and its 52pt button (the shared primary capsule is 50pt) */
html.ds #device .premium-welcome .welcome-actions .primary-button { min-height: 52px !important; height: 52px !important; }
/* the words under the lockup ("FILM DISCOVERY, REIMAGINED", the headline, the line) stand a little lower, for more air
   between the word TRIPTIC and the kicker (owner, 13 October 2026). A translate, so it moves with whichever of the
   older placements applies (a tall screen, a short one, the smallest): 10pt on a tall screen, 16pt on a short one,
   8pt on a short one at the largest text, where the line needs its room above Get started. */
html.ds #device .premium-welcome .welcome-message { translate: 0 var(--wl-copy-drop, 10px); }
@media (max-height: 760px) { html.ds #device .premium-welcome { --wl-copy-drop: 16px; } }
@media (max-height: 760px) { html.ds[data-text-size="largest"] #device .premium-welcome { --wl-copy-drop: 8px; } }
/* the wall drifts once over 24s and then rests (never a loop) */
@media (prefers-reduced-motion: no-preference) {
  html.ds #device:not(.manual-reduced-motion) .premium-welcome .auth-poster-track.track-a { animation: ds-wall-up 24s var(--motion-drift) 1 both !important; animation-delay: 0s !important; }
  html.ds #device:not(.manual-reduced-motion) .premium-welcome .auth-poster-track.track-b { animation: ds-wall-down 24s var(--motion-drift) 1 both !important; animation-delay: 0s !important; }
}
/* cold-launch hand-off: the launch cover owns the entrance. The welcome screen does not also fade/slide in under it,
   and its ambient loops wait (paused at their first frame) until the cover has left; static-shell removes .is-clocked then. */
html.ds #device .welcome-screen.launch-destination { animation: none !important; }
html.ds #device .welcome-screen.launch-destination.is-clocked::before,
html.ds #device .welcome-screen.launch-destination.is-clocked .premium-welcome-light i,
html.ds #device .welcome-screen.launch-destination.is-clocked .auth-poster-track { animation-play-state: paused !important; }
/* the two filaments redrew clip-path (a paint, on the main thread, forever) behind a drop-shadow: now a compositor scaleY + opacity.
   The individual `scale` property composes with the rotate each filament already carries in `transform`. */
@keyframes ds-filament { 0%, 100% { opacity: .08; scale: 1 .02; } 45% { opacity: .42; scale: 1 .6; } 78% { opacity: .08; scale: 1 1; } }
html.ds #device .premium-welcome-light i { animation-name: ds-filament; will-change: transform, opacity; }
/* ------------------------------------------------------------------ welcome: the poster wall (8 October 2026, afternoon)
   The owner: "I liked it when it was the two columns of actual movie posters ... that looks more Apple and pristine and
   premium quality". Record: hub/docs/WELCOME-2026-10-08.md. Markup: welcomePosterWall() in runtime-base.js.
   - Columns of real posters, turned a little, as a cinema lobby's wall. The mark and the word sit in their own calm pool
     of dark (the lockup's aura, ds-look.css).
   - Lit from above: the shade (a sibling of the wall, square to the screen) lets the posters show most at the top, and
     is the page's black from the headline down, so the words and the button sit on calm space. Gradients only: no filter, no blend, no mask, nothing that can show an edge.
   - Every poster is the film's own artwork as it is (no filter). Until it arrives its tile is a quiet dark card with a
     hairline; it fades in when it has loaded and decoded; a poster that fails stays a dark card. Never a broken picture.
   13 October 2026 (owner; hub/docs/WELCOME-2026-10-13.md): the wall drifts sideways along its own tilt, slowly and
   without end, and a finger can take it and flick it. The columns sit in ONE strip (.poster-wall-strip), the only
   thing that moves: one composited layer, moved by transform alone (prototype-src/welcome-wall.js repeats the columns
   it needs for a seamless loop and drives it). Before the script has measured, the strip stands where the old
   centred wall stood (its third column in the middle), so nothing jumps when the drift begins. Reduce Motion: still. */
html.ds #device .welcome-screen .auth-cinema.poster-wall {
  --pw-w: clamp(92px, 26vw, 118px);
  --pw-h: calc(var(--pw-w) * 1.5);
  --pw-gap: 12px;
  position: absolute !important;
  z-index: 0;
  top: -7% !important; bottom: 16% !important; left: -34% !important; right: -34% !important; width: auto !important; height: auto !important;
  display: block;
  margin: 0 !important; padding: 0 !important;
  opacity: 1 !important;
  transform: rotate(-6deg) !important;
  -webkit-mask-image: none !important; mask-image: none !important;
  background: none !important;
  pointer-events: none;
}
/* a wide display (the Duo opened flat, an iPad): the posters grow with the display */
@media (min-width: 600px) {
  html.ds #device .welcome-screen .auth-cinema.poster-wall { --pw-w: clamp(118px, 18.4vw, 180px); }   /* (ONBOARD, 15 October 2026) a little larger, so a wide display's wall is eight columns of five (forty pictures), not ten */
  /* the page is narrower than the display here: the wall fades into the page's black at its sides, never a cut edge */
  html.ds #device .welcome-screen > .poster-wall-shade { box-shadow: none; background-image: linear-gradient(90deg, rgb(5 5 9) 0%, rgb(5 5 9 / 0) 16%, rgb(5 5 9 / 0) 84%, rgb(5 5 9) 100%), var(--pw-shade) !important; }
}
/* the strip: its first column's left edge on the wall's centre line, then moved left two and a half columns, so the third is centred */
html.ds #device .poster-wall .poster-wall-strip {
  position: absolute; top: 0; left: 50%;
  display: flex; align-items: flex-start; gap: var(--pw-gap);
  transform: translate3d(calc(var(--pw-w) * -2.5 - var(--pw-gap) * 2), 0, 0);
  will-change: transform;
}
html.ds #device .poster-wall .poster-wall-col { flex: none; display: grid; gap: var(--pw-gap); width: var(--pw-w); margin-top: calc(var(--pw-h) * -.16); }
html.ds #device .poster-wall .poster-wall-col.is-down { margin-top: calc(var(--pw-h) * -.66); }
/* a phone: four rows (the fifth would sit under the page's black; hidden, its lazy picture is never fetched) */
@media (max-width: 599.98px) { html.ds #device .poster-wall .poster-wall-tile:nth-child(n + 5) { display: none; } }
html.ds #device .poster-wall .poster-wall-tile {
  position: relative; display: block; width: var(--pw-w); height: var(--pw-h); overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(160deg, rgb(36 33 50), rgb(17 16 24) 70%);
}
/* a hairline and a touch of light along the top edge, over the picture: a print under glass */
html.ds #device .poster-wall .poster-wall-tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07), inset 0 1px 0 rgb(255 255 255 / .12);
}
html.ds #device .poster-wall .poster-wall-img {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  opacity: 0; filter: none !important;
  -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none;
  transition: opacity var(--motion-slow) var(--motion-curve);
}
html.ds #device .poster-wall .poster-wall-img.is-in { opacity: 1; }
/* the shade, square to the screen: lit from above; a calm pool round the lockup; the page's black from the headline down */
html.ds #device .welcome-screen > .poster-wall-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  --pw-shade:
    linear-gradient(90deg, rgb(5 5 9 / .34) 0%, rgb(5 5 9 / 0) 22%, rgb(5 5 9 / 0) 78%, rgb(5 5 9 / .34) 100%),
    linear-gradient(180deg, rgb(5 5 9 / .3) 0%, rgb(5 5 9 / .16) 9%, rgb(5 5 9 / .22) 22%, rgb(5 5 9 / .56) 34%, rgb(5 5 9 / .9) 43%, rgb(5 5 9 / .985) 52%, rgb(5 5 9) 62%);
  background: var(--pw-shade);
}
/* a finger can take the wall anywhere above the button: sideways is the wall's, up and down stay the page's (and a
   pinch stays the reader's). Nothing on the page is selected or called up by a long press while the wall is held. */
html.ds #device .welcome-screen.ds-fr-welcome { touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; }
html.ds #device .welcome-screen.ds-fr-welcome.is-wall-held { cursor: grabbing; }

@keyframes ds-wall-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -230px, 0); } }
@keyframes ds-wall-down { from { transform: translate3d(0, -170px, 0); } to { transform: translate3d(0, 0, 0); } }


/* ------------------------------------------------------------------ first-run flow: shared stage and chrome */
html.ds #device .first-run-screen.ds-fr-flowscreen {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  padding: 0 !important;
  overflow: clip !important;
  background: none !important;
}
html.ds #device .first-run-screen.ds-fr-flowscreen::before, html.ds #device .first-run-screen.ds-fr-flowscreen::after { display: none !important; }
html.ds .ds-fr-flow { position: absolute; inset: 0; overflow: clip; color: var(--c-label-1); font-family: var(--fr-font); -webkit-font-smoothing: antialiased; }
html.ds .ds-fr-glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 0;
  width: 620px;
  height: 620px;
  margin: -310px 0 0 -310px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139, 92, 246, .22), rgba(139, 92, 246, .09) 56%, transparent 100%);
  transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0);
  transition: transform var(--motion-slow) var(--fr-smooth);
  pointer-events: none;
}
html.ds .ds-fr-flow[data-step="intro"] { --gx: 0px; --gy: 330px; }
html.ds .ds-fr-scene { position: absolute; z-index: 1; inset: 0; }
html.ds .ds-fr-page { position: absolute; inset: 0; }
html.ds .ds-fr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* section title (owner, 6 October 2026): every first-run page says which part of the app it sets up or introduces, in
   one line and one hand: "DISCOVER · HOW TO ASK", "TODAY · DAILY CRYPTIC", "YOUR SERVICES · STREAMING", "FILM DNA · YOUR
   TASTE". The part of the app is the brighter half. In the flow it is the top line, centred between Back and Skip (the
   76pt each side is the wider of the two, so it is centred on the screen); on the gate and the finale it is the same
   top line; on the taste deck, whose top line is the progress strip, it is the kicker over the question. */
html.ds .ds-fr-section {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; margin: 0;
  font: 600 calc(11 * var(--type-unit))/calc(14 * var(--type-unit)) var(--fr-font); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
  color: var(--c-label-2); pointer-events: none;
}
html.ds .ds-fr-section > b { flex: none; font-weight: 700; color: var(--c-label-1); }
html.ds .ds-fr-section > i { flex: none; font-style: normal; color: var(--c-label-3); }
html.ds .ds-fr-section > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html.ds .ds-fr-flow > .ds-fr-section { position: absolute; z-index: 3; top: calc(var(--fr-top) + 4px); left: 76px; right: 76px; height: 44px; }
html.ds #device .first-run-screen:is(.ds-fr-gate, .ds-fr-finale) > .ds-fr-section { position: absolute; z-index: 2; top: calc(var(--fr-top) + 4px); left: 24px; right: 24px; height: 44px; }
/* the finale opens with the fifteen posters flying over the top of the page: its title arrives with the radar, under them */
html.ds .ds-fr-finale > .ds-fr-section { transition: opacity var(--motion-normal) var(--motion-curve); }
html.ds .ds-fr-finale.ds-fr-play:not(.ds-fr-radar-in) > .ds-fr-section { opacity: 0; }
html.ds #device .first-run-screen.ds-fr-taste .onboarding-copy > .ds-fr-section { margin: 0 0 3px; }
/* Larger text (the app's switch or the phone's setting): the section's name is one line across the page, so it goes up
   one size and no further, with a touch less tracking so the longest title still fits a 375pt phone */
html.ds[data-text-size]:not([data-text-size="standard"]) #device .ds-fr-section { font-size: 12px; line-height: 16px; letter-spacing: .07em; }

html.ds .ds-fr-foot { position: absolute; left: 24px; right: 24px; text-align: center; }

/* chrome: persistent nodes, never re-created between steps */
html.ds .ds-fr-bar { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: calc(var(--fr-bot) + 8px); height: 50px; }
html.ds .ds-fr-primary {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-lamp);
  color: var(--c-lamp-ink);
  font: 600 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--fr-font);
  letter-spacing: var(--fr-tr-body);
  cursor: pointer;
  touch-action: manipulation;
}
html.ds .ds-fr-primary::after { content: ""; position: absolute; inset: 0; background: var(--c-fill-press); mix-blend-mode: multiply; opacity: 0; transition: opacity var(--motion-press) linear; pointer-events: none; }
html.ds .ds-fr-primary.ds-pressed::after { opacity: 1; background: rgba(0, 0, 0, .16); mix-blend-mode: normal; }
html.ds .ds-fr-primary-label { display: block; }
/* back: a 44pt target top-left, the mirror of Skip (same top line, same glass 36pt shape); never inside the Continue bar */
html.ds .ds-fr-back {
  position: absolute;
  z-index: 3;
  top: calc(var(--fr-top) + 4px);
  left: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-label-1);
  cursor: pointer;
  touch-action: manipulation;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: opacity var(--motion-fast) var(--fr-ease), transform var(--motion-fast) var(--fr-smooth), visibility 0s linear 240ms;
}
html.ds .ds-fr-back::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--mat-chrome);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
}
html.ds .ds-fr-back svg { width: 20px; height: 20px; margin-left: -1px; }
html.ds .ds-fr-flow.has-back .ds-fr-back { opacity: 1; visibility: visible; transform: none; transition-delay: 100ms, 100ms, 0s; }

html.ds .ds-fr-cap { position: absolute; left: 50%; top: 540px; width: 320px; margin-left: -160px; text-align: center; }
html.ds .ds-fr-cap .ds-fr-subhead { margin-top: 6px; }
/* the heading takes programmatic focus for VoiceOver on a page change; no ring for that (keyboard focus rings stay on controls) */
/* !important: beats the app-wide :focus-visible ring (motion-surfaces / design-system set it with !important); only for
   headings that take programmatic focus (tabindex=-1). */
html.ds .ds-fr-flow :is(h1, h2)[tabindex="-1"]:focus, html.ds .ds-fr-flow :is(h1, h2)[tabindex="-1"]:focus-visible { outline: none !important; }

/* the page before the cards: the first three sealed cards stand where the tour's example window stood */
html.ds .ds-fr-deck { position: absolute; left: 50%; top: 150px; width: 300px; height: 360px; margin-left: -150px; }
html.ds .ds-fr-seal {
  position: absolute;
  left: 50%;
  top: 56px;
  width: 140px;
  height: 210px;
  margin-left: -70px;
  overflow: hidden;
  border: 1px solid rgba(167, 139, 250, .5);
  border-radius: var(--r-card);
  background: linear-gradient(165deg, rgba(139, 92, 246, .62), rgba(139, 92, 246, .18) 48%, var(--c-stage-raised) 76%), var(--c-stage-raised);
  box-shadow: var(--e-2);
  transform-origin: 50% 100%;
}
html.ds .ds-fr-seal-1 { transform: translateX(-70px) rotate(-8deg); z-index: 1; }
html.ds .ds-fr-seal-3 { transform: translateX(70px) rotate(8deg); z-index: 1; }
html.ds .ds-fr-seal-2 { transform: translateY(-18px); z-index: 3; }
html.ds .ds-fr-how { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: calc(var(--fr-bot) + 8px + 50px + 10px); border-radius: var(--r-card); }
html.ds .ds-fr-how > summary { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; list-style: none; color: var(--c-label-2); font: 400 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--fr-font); letter-spacing: var(--fr-tr-footnote); cursor: pointer; }
html.ds .ds-fr-how > summary::-webkit-details-marker { display: none; }
html.ds .ds-fr-how > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--motion-fast) var(--fr-ease); }
html.ds .ds-fr-how[open] { padding: 0 16px 8px; background: var(--mat-chrome); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); border: 1px solid var(--c-line); }
html.ds .ds-fr-how[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
html.ds .ds-fr-how-body { display: grid; gap: 8px; padding: 0 0 4px; }
html.ds .ds-fr-how-links { display: flex; flex-wrap: wrap; gap: 0 16px; }
html.ds .ds-fr-textbtn { min-height: 44px; padding: 0; border: 0; background: none; color: var(--c-label-1); font: 400 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--fr-font); text-decoration: underline; text-decoration-color: var(--c-label-4); text-underline-offset: 4px; cursor: pointer; }

/* focus: visible and in the beam colour */
html.ds .ds-fr-flow :is(button, summary):focus-visible, html.ds .ds-fr-welcome :is(button):focus-visible, html.ds .ds-fr-ask :is(button):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }

/* Reduced Motion: the page arrives with a <=180ms opacity change, nothing travels */
html.ds .ds-fr-flow.is-rm :is(.ds-fr-glow, .ds-fr-primary, .ds-fr-primary-label) { transition-property: opacity; transition-duration: var(--motion-fast); }
html.ds .ds-fr-flow.is-rm .ds-fr-back { transform: none; transition: opacity var(--motion-fast) linear, visibility 0s linear 180ms; }
html.ds .ds-fr-flow.is-rm .ds-fr-glow { transition: none; }
/* Reduce Transparency: a solid stage, no washes */
html.ds #device.manual-solid .ds-fr-glow, html.ds.reduce-transparency #device .ds-fr-glow { display: none; }
html.ds #device.manual-solid :is(.ds-fr-back::before, .ds-fr-how[open]),
html.ds.reduce-transparency #device :is(.ds-fr-back::before, .ds-fr-how[open]) { background: var(--mat-chrome-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) {
  html.ds .ds-fr-glow { display: none; }
  html.ds #device :is(.ds-fr-back::before, .ds-fr-how[open]) { background: var(--mat-chrome-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ------------------------------------------------------------------ calibration gate: the sealed deck peeks from the bottom */
html.ds #device .first-run-screen.ds-fr-gate {
  position: absolute !important;
  inset: 0 !important;
  display: flex;
  flex-direction: column;
  padding: 0 24px;
  overflow: hidden;
}
html.ds .ds-fr-gate-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 40px 0 168px;
}
html.ds .ds-fr-gate-body h1 { margin: 0; color: var(--c-label-1); font: 700 calc(34 * var(--type-unit))/calc(41 * var(--type-unit)) var(--fr-font); letter-spacing: var(--fr-tr-large-title); text-wrap: balance; }
html.ds .ds-fr-gate-body p { margin: 0 0 16px; color: var(--c-label-2); font-size: var(--fs-body); line-height: var(--lh-body); max-width: none; }
html.ds .ds-sealed-deck {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 138px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
html.ds .ds-fr-gate::before {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -10%;
  height: 46%;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(139, 92, 246, .34), transparent 72%);
}
html.ds .ds-sealed {
  position: absolute;
  left: 50%;
  top: 14px;
  width: 224px;
  height: 336px;
  margin-left: -112px;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(167, 139, 250, .5);
  border-radius: var(--r-card);
  background: linear-gradient(165deg, rgba(139, 92, 246, .62), rgba(139, 92, 246, .18) 48%, var(--c-stage-raised) 76%), var(--c-stage-raised);
  box-shadow: var(--e-2);
  transform-origin: 50% 100%;
}
html.ds .ds-sealed-1 { transform: translateX(-132px) rotate(-8deg); top: 34px; z-index: 1; }
html.ds .ds-sealed-3 { transform: translateX(132px) rotate(8deg); top: 34px; z-index: 1; }
html.ds .ds-sealed-2 { top: 10px; z-index: 3; }
html.ds .ds-sealed-edge { position: absolute; top: 12px; bottom: 0; width: 7px; background: repeating-linear-gradient(180deg, var(--c-label-4) 0 9px, transparent 9px 18px); border-radius: var(--r-chip); }
html.ds .ds-sealed-edge-l { left: 10px; }
html.ds .ds-sealed-edge-r { right: 10px; }
html.ds .ds-sealed-mark { position: absolute; left: 50%; top: 38px; width: 40px; height: 40px; margin-left: -20px; opacity: .95; }
html.ds .ds-sealed b { position: absolute; left: 26px; top: 12px; font: 500 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--fr-font); color: var(--c-label-3); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ calibration card (first fifteen and recalibration) */
html.ds #device .first-run-screen.ds-fr-taste {
  position: absolute !important;
  inset: 0 !important;
  display: flex;
  flex-direction: column;
  padding: max(12px, env(safe-area-inset-top, 0px)) 20px max(18px, env(safe-area-inset-bottom, 0px));
  overflow: hidden !important;
}
html.ds #device .first-run-screen.ds-fr-taste > header {
  flex: 0 0 auto;
  height: 44px;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  align-items: center;
  border: 0 !important;
}
html.ds #device .first-run-screen.ds-fr-taste > header .ds-fr-x {
  justify-self: start;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--mat-chrome);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  color: var(--c-label-1);
}
html.ds .ds-fr-x svg { width: 20px; height: 20px; }
html.ds #device .first-run-screen.ds-fr-taste > header .ds-fr-count { justify-self: end; white-space: nowrap; font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--fr-font); letter-spacing: var(--fr-tr-subhead); color: var(--c-label-1); font-variant-numeric: tabular-nums; }
html.ds #device .first-run-screen.ds-fr-taste > progress { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; }
html.ds .ds-fr-progress { justify-self: center; display: flex; align-items: center; gap: 6px; }
html.ds #device .first-run-screen.ds-fr-taste .onboarding-copy { flex: 0 0 auto; margin: 10px 0 0 !important; text-align: center; }
html.ds #device .first-run-screen.ds-fr-taste .onboarding-copy .eyebrow { display: none; }
html.ds #device .first-run-screen.ds-fr-taste .onboarding-copy h1 { margin: 0 !important; font: 700 calc(22 * var(--type-unit))/calc(28 * var(--type-unit)) var(--fr-font) !important; letter-spacing: var(--fr-tr-title-2) !important; color: var(--c-label-1); text-wrap: balance; }
html.ds #device .first-run-screen.ds-fr-taste .onboarding-copy p {
  position: absolute; width: 1px; height: 1px; margin: -1px !important; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
html.ds #device .first-run-screen.ds-fr-taste.recalibration-screen .onboarding-copy p {
  position: static; width: auto; height: auto; margin: 6px 0 0 !important; overflow: visible; clip-path: none; white-space: normal;
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui) !important; color: var(--c-label-3) !important;
}
html.ds #device .first-run-screen.ds-fr-taste .taste-deck {
  position: relative !important;
  flex: 1 1 0;
  display: grid !important;
  place-items: center;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 12px 0 !important;
  perspective: none;
}
html.ds #device .first-run-screen.ds-fr-taste .taste-swipe-card {
  position: relative !important;
  width: auto !important;
  height: min(100%, 450px) !important;
  aspect-ratio: 2 / 3 !important;
  max-width: 100% !important;
  border: 1px solid var(--c-line-strong) !important;
  border-radius: var(--r-card) !important;
  background: var(--c-stage-raised) !important;
  box-shadow: var(--e-3) !important;
  touch-action: pan-y !important;
  transform: none;
  transition: none !important;
  will-change: transform;
}
html.ds #device .first-run-screen.ds-fr-taste .taste-swipe-card.verified-taste-poster { transform: none; box-shadow: var(--e-3) !important; border-color: var(--c-line-strong) !important; }
html.ds #device .first-run-screen.ds-fr-taste .taste-swipe-card::after { display: none !important; }
html.ds #device .first-run-screen.ds-fr-taste .taste-swipe-card .taste-film-copy { padding: 56px 18px 18px !important; }
html.ds #device .first-run-screen.ds-fr-taste .taste-swipe-card .taste-film-copy strong { font: 700 calc(22 * var(--type-unit))/calc(28 * var(--type-unit)) var(--fr-font) !important; letter-spacing: var(--fr-tr-title-2) !important; color: var(--c-label-1); }
html.ds #device .first-run-screen.ds-fr-taste .taste-swipe-card .taste-film-copy span { font: 400 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--fr-font) !important; letter-spacing: var(--fr-tr-subhead) !important; font-variant-numeric: tabular-nums; color: var(--c-label-2) !important; }
html.ds #device .first-run-screen.ds-fr-taste .taste-ghost {
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: auto !important;
  height: min(100%, 450px) !important;
  aspect-ratio: 2 / 3 !important;
  max-width: 100% !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-card) !important;
  background: var(--c-stage-raised) !important;
  transform: translate(-50%, calc(-50% + 12px)) scale(.94) !important;
  opacity: .8 !important;
}
html.ds #device .first-run-screen.ds-fr-taste .taste-ghost.ghost-b { transform: translate(-50%, calc(-50% + 24px)) scale(.88) !important; opacity: .5 !important; }
/* the choice glyph fades in on the side you drag toward: heart in lamp, cross in grey */
html.ds .ds-fr-taste .swipe-verdict {
  top: 18px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 0 !important;
  transform: none;
}
html.ds .ds-fr-taste .swipe-verdict svg { width: 26px; height: 26px; }
html.ds .ds-fr-taste .verdict-yes { right: 18px !important; left: auto !important; background: var(--c-lamp); color: var(--c-lamp-ink); opacity: var(--drag-yes, 0); }
html.ds .ds-fr-taste .verdict-no { left: 18px !important; right: auto !important; background: var(--c-stage-raised); color: var(--c-label-2); border: 1px solid var(--c-line-strong); opacity: var(--drag-no, 0); }
/* swipe affordance: white hand-drawn ink beside the first card (decorative; fades on the first touch) */
html.ds .ds-fr-doodle { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
html.ds .ds-fr-doodle-side { position: absolute; top: 14%; width: 76px; height: 118px; overflow: visible; fill: none; stroke: var(--c-label-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7)); }
html.ds .ds-fr-doodle-r { right: -6px; rotate: 4deg; }
html.ds .ds-fr-doodle-l { left: -6px; rotate: -4deg; }
html.ds .ds-fr-ink-word path { stroke-width: 1.9; }
/* controls (8 October 2026): "What did you think of this film?" is answered with the film page's own three answers, in
   the owner's order (Not for me, Liked it, Loved it): three 64pt circles, each named beneath. Under them, Undo (a 44pt
   circle) beside "Haven't seen it" (a pill). The same in the first fifteen and in more films from Settings. */
html.ds #device .first-run-screen.ds-fr-taste .ds-fr-actions {
  flex: 0 0 auto;
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  gap: 14px !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
}
html.ds #device .first-run-screen.ds-fr-taste .ds-fr-actions > button {
  flex: 0 0 88px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 88px !important;
  min-width: 88px !important;
  height: auto !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--c-label-1);
  -webkit-tap-highlight-color: transparent;
}
html.ds #device .first-run-screen.ds-fr-taste .ds-fr-actions .ds-fr-disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  background: var(--c-fill-2);
  transition: transform var(--motion-fast) var(--fr-ease);
}
html.ds #device .first-run-screen.ds-fr-taste .ds-fr-actions > button:active .ds-fr-disc { transform: scale(.94); }
/* Loved it is the warmest answer: its circle carries the Lamp's edge */
html.ds #device .first-run-screen.ds-fr-taste .ds-fr-actions > button[data-answer="loved"] .ds-fr-disc { border-color: var(--c-lamp); }
/* !important beats first-run.css `.taste-actions button i { position: relative !important }`, which would put the flash in the grid and push the icon off-centre */
html.ds #device .first-run-screen.ds-fr-taste .ds-fr-actions .ds-fr-flash { position: absolute !important; inset: 0 !important; }
html.ds .ds-fr-flash { position: absolute; inset: 0; z-index: 0; border-radius: 50%; background: var(--c-lamp); opacity: 0; pointer-events: none; }
html.ds #device .first-run-screen.ds-fr-taste .ds-fr-actions .ds-fr-disc svg { position: relative; z-index: 1; display: block; width: 28px; height: 28px; margin: 0 !important; filter: none !important; color: var(--c-label-1); }
html.ds #device .first-run-screen.ds-fr-taste .ds-fr-actions .ds-fr-disc svg * { stroke: currentColor !important; }
html.ds #device .first-run-screen.ds-fr-taste .ds-fr-actions > button[data-answer="loved"] .ds-fr-disc svg { color: var(--c-lamp); }
html.ds #device .first-run-screen.ds-fr-taste .ds-fr-actions .ds-fr-answer-word {
  position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip-path: none !important;
  white-space: nowrap; font: 500 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--fr-font); letter-spacing: var(--fr-tr-footnote); color: var(--c-label-2);
  /* older layers pin a deck button's label at 11pt or 12px with !important */
  font-size: calc(13 * var(--type-unit)) !important; line-height: calc(18 * var(--type-unit)) !important; white-space: nowrap !important;
}
html.ds #device .first-run-screen.ds-fr-taste > .ds-fr-more-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 12px 0 0;
}
html.ds #device .first-run-screen.ds-fr-taste .ds-fr-undo {
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-fill-1);
  color: var(--c-label-2);
}
html.ds #device .first-run-screen.ds-fr-taste .ds-fr-undo svg { width: 22px; height: 22px; }
html.ds #device .first-run-screen.ds-fr-taste .ds-fr-undo > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.ds #device .first-run-screen.ds-fr-taste .ds-fr-undo:disabled { opacity: .4; }
html.ds #device .first-run-screen.ds-fr-taste .ds-fr-unsure {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-height: 44px;
  margin: 0 !important;
  padding: 0 22px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-fill-2);
  color: var(--c-label-1);
  font: 400 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--fr-font); letter-spacing: var(--fr-tr-subhead);
  text-decoration: none;
}
/* the row stays centred on "Haven't seen it": an empty 44pt partner on the right balances Undo on the left */
html.ds #device .first-run-screen.ds-fr-taste > .ds-fr-more-row::after { content: ""; flex: 0 0 44px; }
html.ds #device .first-run-screen.ds-fr-taste > .first-run-help { display: none; }

/* ------------------------------------------------------------------ calibration finale */
html.ds #device .first-run-screen.ds-fr-finale {
  display: flex;
  flex-direction: column;
  padding: max(12px, env(safe-area-inset-top, 0px)) 20px max(24px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
html.ds .ds-fr-stage { position: relative; flex: 0 0 auto; height: 408px; margin-top: 14px; }
html.ds .ds-sheet {
  position: absolute;
  left: 50%;
  top: -20px;
  display: grid;
  grid-template-columns: repeat(3, 60px);
  grid-auto-rows: 90px;
  gap: 6px;
  margin-left: -96px;
  transform-origin: 50% 50%;
  transition: scale var(--motion-slow) var(--motion-spring), opacity var(--motion-normal) var(--motion-curve);
}
html.ds .ds-frame {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-chip);
  background: var(--c-stage-raised);
  transition: opacity var(--motion-normal) var(--motion-curve);
}
html.ds .ds-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.ds .ds-frame.is-like { border-color: var(--c-lamp); }
html.ds .ds-fr-play .ds-frame { animation: ds-frame-in var(--motion-slow) var(--motion-spring) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes ds-frame-in { from { transform: translate(var(--fx, 0), 360px) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
html.ds .ds-sheet.is-judged .ds-frame:not(.is-like) { opacity: .35; }
html.ds .ds-sheet.is-shrunk, html.ds .ds-sheet.is-done { scale: .3; opacity: 0; }
html.ds .ds-fr-radar { position: absolute; left: 50%; top: 82px; width: 270px; height: 270px; margin-left: -135px; }
/* the box holds Film DNA's five lines (ds-film-dna.js draws them into .ds-fr-dna); it fades in as the sheet shrinks,
   then the beads find their places */
html.ds .ds-fr-finale .ds-fr-radar { transition: opacity var(--motion-normal) var(--motion-curve); }
html.ds .ds-fr-play:not(.ds-fr-radar-in) .ds-fr-radar { opacity: 0; }
@keyframes ds-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* a short phone (iPhone SE, device-fit "compact"): the contact sheet and the five lines are drawn smaller about the same
   centre and the headline a size down, so "Start discovering" is on the first screen and not under the fold */
html.ds[data-device-h="compact"] .ds-fr-finale .ds-fr-stage { height: 300px; }
html.ds[data-device-h="compact"] .ds-fr-finale .ds-sheet { top: -2px; grid-template-columns: repeat(3, 46px); grid-auto-rows: 69px; gap: 5px; margin-left: -74px; }
html.ds[data-device-h="compact"] .ds-fr-finale .ds-fr-radar { top: 76px; width: 208px; height: 208px; margin-left: -104px; }
html.ds[data-device-h="compact"] #device .ds-fr-finale .onboarding-copy h1 { font: 700 calc(28 * var(--type-unit))/calc(34 * var(--type-unit)) var(--fr-font) !important; }
html.ds[data-device-h="compact"] #device .ds-fr-finale > .primary-button { margin-top: 14px; }
html.ds .ds-fr-finale.ds-fr-play:not(.ds-fr-final) :is(.onboarding-copy, .ds-fr-insight, .ds-fr-localnote, .primary-button, .quiet-button) { opacity: 0; }
html.ds .ds-fr-finale :is(.onboarding-copy, .ds-fr-insight, .ds-fr-localnote, .primary-button, .quiet-button) { transition: opacity var(--motion-normal) var(--motion-curve), translate var(--motion-normal) var(--motion-curve); }
html.ds #device .ds-fr-finale .onboarding-copy { margin: 0 !important; text-align: center; }
html.ds #device .ds-fr-finale .onboarding-copy .eyebrow { display: block; color: var(--c-label-3); margin-bottom: 8px; }
html.ds #device .ds-fr-finale .onboarding-copy h1 { font: 700 calc(34 * var(--type-unit))/calc(41 * var(--type-unit)) var(--fr-font) !important; letter-spacing: var(--fr-tr-large-title) !important; text-wrap: balance; }
html.ds #device .ds-fr-finale .ds-fr-insight { margin: 12px 0 0; font: 400 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--fr-font); letter-spacing: var(--fr-tr-subhead); color: var(--c-label-2); text-align: center; }
html.ds #device .ds-fr-finale .ds-fr-localnote { margin: 10px 4px 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); text-align: center; }
html.ds #device .ds-fr-finale > .primary-button { height: 50px; min-height: 50px; margin-top: 18px; border-radius: var(--r-pill); font: 600 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--fr-font); letter-spacing: var(--fr-tr-body); }
html.ds #device .ds-fr-finale > .quiet-button:not(.first-run-help) { margin: 4px auto 0 !important; }
html.ds #device .ds-fr-finale > .first-run-help { display: none; }

/* ------------------------------------------------------------------ Discover */
html.ds #device .premium-discover.ds-fr-discover { padding: 0 20px 138px !important; }
html.ds #device .ds-fr-discover .discover-heading { margin: 16px 0 18px !important; }
html.ds #device .ds-fr-discover .discover-heading .ds-fr-eyebrow { margin: 0 0 8px !important; color: var(--c-label-3) !important; font: 600 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--fr-font) !important; letter-spacing: .06em !important; }
html.ds #device .ds-fr-discover .discover-heading h1 { margin: 0; font: 700 calc(34 * var(--type-unit))/calc(41 * var(--type-unit)) var(--fr-font) !important; letter-spacing: var(--fr-tr-large-title) !important; text-wrap: balance; color: var(--c-label-1); }
html.ds .ds-fr-discover .premium-composer { position: relative; overflow: hidden; padding-top: 16px; }
html.ds #device .ds-fr-discover .premium-composer .request-label { color: var(--c-label-3) !important; text-shadow: none !important; }
html.ds .ds-fr-discover .premium-composer .request-count { font-family: var(--fr-font); font-variant-numeric: tabular-nums; color: var(--c-label-3); }
html.ds .ds-fr-discover .premium-composer #query { font-size: calc(17 * var(--type-unit)); line-height: calc(24 * var(--type-unit)); }
/* composer footer: the hint sits on its own line above mic + Find three, so it never wraps into a cramped column */
html.ds #device .ds-fr-discover .premium-composer .composer-footer { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 12px !important; height: auto !important; min-height: 0 !important; }
html.ds #device .ds-fr-discover .premium-composer .composer-footer .composer-guidance {
  order: 0;
  flex: 0 0 100%;
  width: 100% !important;
  max-width: none !important;
  margin: 0;
  padding: 0 !important;
  font-size: var(--fs-footnote) !important;
  line-height: var(--lh-footnote) !important;
  color: var(--c-label-3) !important;
}
html.ds #device .ds-fr-discover .premium-composer .composer-footer .composer-actions { order: 1; flex: 1 1 100%; display: flex; align-items: center; justify-content: flex-start !important; gap: 12px; width: 100% !important; min-width: 0 !important; }
html.ds #device .ds-fr-discover .composer-actions .voice-control {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: var(--c-fill-2);
  color: var(--c-label-1);
}
html.ds #device .ds-fr-discover .composer-footer .query-submit.query-submit-plain {
  flex: 1 1 auto !important;
  height: 52px !important;
  min-height: 52px !important;
  width: auto !important;
  padding: 0 20px !important;
}
/* composer beam (moment 10): a 1px top-edge line and a soft cone that brighten with length and follow the caret line */
html.ds .ds-beam { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; opacity: var(--ds-beam-o, .15); transform-origin: 0 50%; transition: opacity var(--motion-fast) var(--motion-curve); }
html.ds .ds-beam-line { position: absolute; top: 0; left: 0; width: 180px; height: 1px; translate: var(--ds-beam-x, 0) 0; background: linear-gradient(90deg, transparent, var(--c-lamp) 50%, transparent); transition: translate var(--motion-fast) var(--motion-curve); }
html.ds .ds-beam-cone { position: absolute; top: 1px; left: 0; width: 260px; height: 60px; translate: calc(var(--ds-beam-x, 0px) - 40px) 0; background: radial-gradient(ellipse 50% 100% at 50% 0, rgba(243, 238, 230, .1), transparent 100%); transition: translate var(--motion-fast) var(--motion-curve); }
html.ds #device.manual-solid .ds-beam-cone, html.ds.reduce-transparency .ds-beam-cone { display: none; }
@media (prefers-reduced-transparency: reduce) { html.ds .ds-beam-cone { display: none; } }
html.ds #device.manual-reduced-motion .ds-beam-line, html.ds #device.manual-reduced-motion .ds-beam-cone { transition: none; }
@media (prefers-reduced-motion: reduce) { html.ds .ds-beam-line, html.ds .ds-beam-cone { transition: none; } html.ds .ds-beam { transition-duration: var(--motion-fast); } }
html.ds .ds-mirror { position: fixed; left: -9999px; top: 0; visibility: hidden; pointer-events: none; padding: 0; border: 0; }

/* shortcuts: Recent / Saved searches */
html.ds .ds-fr-discover .discover-shortcuts { margin: 10px 0 0; }
html.ds .ds-fr-discover .discover-shortcuts button { min-height: 44px; color: var(--c-label-2); font-size: var(--fs-subhead); }

/* Try asking for: a horizontal snap carousel of six requests. Each card is ONE OBJECT ON A FLAT COLOUR (one of TRIPTIC's
   own drawings, own-art.js: never a film still) over the request in the app's type, with "Use this request" as its
   last line. They are a set, like cards from one deck: the same panel, the same plate, the next one in view.
   (7 October 2026. Until then the cards were film stills with the words printed over them.) */
html.ds .ds-fr-discover .discover-inspiration { margin-top: 22px; }
html.ds .ds-fr-discover .discover-inspiration > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
html.ds .ds-fr-discover .discover-inspiration > header h2 { margin: 0; color: var(--c-label-1); }
html.ds .ds-fr-discover .discover-inspiration > header button { min-height: 44px; padding: 0; color: var(--c-seal-hi); font-size: var(--fs-subhead); }
html.ds #device .ds-fr-discover .prompt-grid.ds-carousel {
  display: flex !important;
  align-items: stretch;
  gap: 12px;
  margin: 0 -20px;
  padding: 0 20px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
html.ds .ds-fr-discover .prompt-grid.ds-carousel::-webkit-scrollbar { display: none; }
html.ds #device .ds-fr-discover .prompt-grid.ds-carousel .prompt-card {
  flex: 0 0 min(62%, 236px) !important;
  width: min(62%, 236px) !important;
  height: auto !important;
  min-height: 0 !important;
  scroll-snap-align: start;
  display: flex !important; flex-direction: column; align-items: stretch;
  padding: 0 !important;
  overflow: hidden !important;
  text-align: left;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-sheet) !important;
  background: var(--c-stage-raised) !important;
  box-shadow: var(--e-1) !important;
}
/* older layers lay a tinted veil and a glow over every prompt card (::before / ::after, !important): a flat colour needs neither */
html.ds #device .ds-fr-discover .prompt-card.prompt-own-art::before,
html.ds #device .ds-fr-discover .prompt-card.prompt-own-art::after { content: none !important; display: none !important; }
/* the object on its colour: the panel is the top of the card, and a hairline of shade where it meets the plate */
html.ds #device .ds-fr-discover .prompt-card .prompt-art {
  position: relative; flex: none; display: block; width: 100%; height: 148px;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / .18), inset 0 1px 0 rgb(255 255 255 / .1);
}
/* the plate: the request, then the action on the card's last line whatever the request's length */
html.ds #device .ds-fr-discover .prompt-card .prompt-copy {
  position: static !important; inset: auto !important; z-index: auto !important;
  display: flex !important; flex-direction: column; flex: 1 1 auto;
  width: auto !important; max-width: none !important; min-height: calc(110 * var(--type-unit));
  margin: 0 !important; padding: 14px 16px 15px !important;
  background: none !important; text-shadow: none !important;
}
html.ds #device .ds-fr-discover .prompt-card .prompt-title {
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  max-height: calc(66 * var(--type-unit)) !important; margin: 0 !important;
  font: 600 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--fr-font) !important; letter-spacing: var(--fr-tr-body) !important;
  color: var(--c-label-1) !important; text-shadow: none !important; text-wrap: balance;
}
html.ds #device .ds-fr-discover .prompt-card .prompt-copy b {
  display: block; margin-top: auto !important; padding-top: 10px;
  font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--fr-font) !important; letter-spacing: var(--fr-tr-subhead) !important;
  color: var(--c-label-2) !important; text-shadow: none !important;
}
html.ds #device .ds-fr-discover .prompt-card .prompt-copy b i { color: var(--c-seal-hi); font-style: normal; }
/* the request that is in the box: a ring in the brand's violet, and its last line says so */
html.ds #device .ds-fr-discover .prompt-card.is-request-selected { border-color: var(--c-seal-hi) !important; box-shadow: 0 0 0 1px var(--c-seal-hi), var(--e-1) !important; }
html.ds #device .ds-fr-discover .prompt-card.is-request-selected .prompt-copy b { color: var(--c-seal-hi) !important; }
/* the page ends on the requests: the tab bar's clearance follows, and nothing else */

/* scroll-edge fade above the tab bar (a child of #device so it stays put while the screen scrolls) */
html.ds #device > .ds-discover-fade {
  position: absolute;
  z-index: 210;
  left: 0;
  right: 0;
  bottom: 78px;
  height: 36px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--c-stage));
}
/* class, not :has(): a :has() on #device re-styled the whole device on every class change of the ritual layer */
html.ds #device.critical-journey-active > .ds-discover-fade { display: none; }

/* one ambient loop on Discover: the screen drift stays, the second atmosphere loop rests */
html.ds #device .discover-v5::after { animation: none !important; }

/* the launch screens fill the device whatever the cascade says about .screen */
html.ds #device .ds-fr-welcome { position: absolute !important; inset: 0 !important; }

/* decorative bleed (sealed cards, poster wall, glow pools) is clipped, never scrollable, so Larger Text cannot scroll sideways */
html.ds #device .ds-fr-welcome,
html.ds #device .first-run-screen.ds-fr-intro,
html.ds #device .first-run-screen.ds-fr-gate,
html.ds #device .first-run-screen.ds-fr-taste { overflow: clip !important; }
html.ds #device .first-run-screen.ds-fr-intro::before { width: 100% !important; left: 0 !important; }
html.ds #device .ds-fr-gate .ds-sealed-deck,
html.ds #device .ds-fr-welcome .auth-cinema,
html.ds #device .ds-fr-welcome .global-trio-atmosphere { overflow: clip !important; contain: paint; }
html.ds #device .ds-fr-welcome .auth-cinema, html.ds #device .ds-fr-gate .ds-sealed-deck { contain: paint; }
html.ds #device .first-run-screen.ds-fr-gate::before,
html.ds #device .ds-fr-welcome::before { width: 100% !important; left: 0 !important; }
html.ds #device .ds-fr-welcome .auth-cinema { left: 0 !important; right: 0 !important; width: 100% !important; overflow: clip !important; contain: paint; }
html.ds #device .ds-fr-wallclip { position: absolute; inset: 0; overflow: clip; contain: paint; pointer-events: none; z-index: 0; }

/* Reduce Transparency (app toggle, html.reduce-transparency and the OS setting): my glass goes solid, washes and fades go away */
html.ds #device.manual-solid :is(.ds-fr-taste .circle-control, .ds-fr-taste .quiet-button, .ds-fr-ask),
html.ds.reduce-transparency #device :is(.ds-fr-taste .circle-control, .ds-fr-taste .quiet-button, .ds-fr-ask) {
  background: var(--mat-chrome-solid) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.ds #device.manual-solid .ds-discover-fade, html.ds.reduce-transparency #device .ds-discover-fade { display: none; }
@media (prefers-reduced-transparency: reduce) {
  html.ds #device :is(.ds-fr-taste .circle-control, .ds-fr-taste .quiet-button, .ds-fr-ask) { background: var(--mat-chrome-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html.ds #device .ds-discover-fade { display: none; }
}

/* "Help me get you next time" (ds-first-run.js mountInvitation): after the first full three, one quiet row under the request
   box. Static: it carries no motion of its own (one ambient loop a screen), and leaves with a 180ms fade when it is put off. */
html.ds .ds-fr-ask {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 4px;
  margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--c-line); border-radius: var(--r-card);
  background: var(--c-fill-2); color: var(--c-label-1); text-align: left;
}
html.ds .ds-fr-ask-cards { position: relative; width: 44px; height: 54px; }
html.ds .ds-fr-ask-cards > i { position: absolute; left: 50%; bottom: 0; width: 28px; height: 42px; margin-left: -14px; border: 1px solid rgba(167, 139, 250, .5); border-radius: 6px; background: linear-gradient(165deg, rgba(139, 92, 246, .62), rgba(139, 92, 246, .18) 56%, var(--c-stage-raised)); transform-origin: 50% 100%; }
html.ds .ds-fr-ask-cards > i:nth-child(1) { transform: translateX(-10px) rotate(-9deg); }
html.ds .ds-fr-ask-cards > i:nth-child(2) { transform: translateY(-4px); z-index: 2; }
html.ds .ds-fr-ask-cards > i:nth-child(3) { transform: translateX(10px) rotate(9deg); }
html.ds .ds-fr-ask-copy { display: grid; gap: 2px; min-width: 0; }
html.ds .ds-fr-ask-copy > b { font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--fr-font); letter-spacing: var(--fr-tr-subhead); color: var(--c-label-1); }
html.ds .ds-fr-ask-copy > span { font: 400 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--fr-font); letter-spacing: var(--fr-tr-footnote); color: var(--c-label-2); text-wrap: pretty; }
html.ds .ds-fr-ask-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; margin-top: 6px; }
html.ds .ds-fr-ask-go, html.ds .ds-fr-ask-later { min-height: 44px; border: 0; cursor: pointer; touch-action: manipulation; font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--fr-font); letter-spacing: var(--fr-tr-subhead); }
html.ds .ds-fr-ask-go { padding: 0 20px; border-radius: var(--r-pill); background: var(--c-lamp); color: var(--c-lamp-ink); }
html.ds .ds-fr-ask-later { padding: 0 12px; background: none; color: var(--c-label-2); font-weight: 400; }

/* Profile control: initials only for a verified account; otherwise a neutral person glyph (no guest identity is invented). */
html.ds .profile-control:has(.trip-avatar-glyph) { display: grid; place-items: center; padding: 0; }
html.ds .profile-control .trip-avatar-glyph { display: block; width: 20px; height: 20px; color: var(--c-label-2); }

/* Discover moment: Find three fills with light as the request gains meaningful words (a third a word, full at 3:
   owner, 20 October 2026), then one glint passes across it when it is ready (hub/docs/FIND-GLINT-2026-10-20.md).
   Composited only: translate on layers clipped to the pill, opacity for the glint. --ds-fill is written by
   ds-first-run.js (0..1). */
html.ds #device .ds-fr-discover .composer-footer .query-submit.query-submit-plain { overflow: hidden !important; isolation: isolate; }
html.ds #device .ds-fr-discover .query-submit.query-submit-plain > span { position: relative; z-index: 1; }
/* the fill: cream light rising from the foot of the pill, with a brighter lip on its leading edge. The layer is 44px
   wider than the pill so, when full, the lip has gone past the right edge and nothing bright rests there. */
html.ds #device .ds-fr-discover .query-submit.query-submit-plain::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% + 44px);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(243, 238, 230, .4) 0, rgba(243, 238, 230, .4) calc(100% - 44px), rgba(243, 238, 230, .72) calc(100% - 26px), rgba(243, 238, 230, .3) calc(100% - 12px), transparent 100%);
  -webkit-mask-image: linear-gradient(0deg, black 0, rgba(0, 0, 0, .4) 58%, transparent 100%);
  mask-image: linear-gradient(0deg, black 0, rgba(0, 0, 0, .4) 58%, transparent 100%);
  transform: translateX(calc((var(--ds-fill, 0) - 1) * 100%));
  transition: transform var(--motion-slow) var(--motion-spring);
  will-change: transform;
}
html.ds #device .ds-fr-discover .query-submit.query-submit-plain:disabled::before { opacity: 0; }
/* the glint: a sheen, not a wipe. A narrow bright core inside a wider soft halo, each with a long, even falloff, leaning
   15 degrees, added to the violet (plus-lighter: it brightens, it never greys), brightest along the top rim like light on
   glass and softer at the foot. The layer is the pill's own width and the 168px band sits in its middle, so the travel
   (half the layer and the band's half-width, each way) is the pill's own width on an iPhone, an iPad or Duo: it always
   starts and ends off the edges. Under the label (which stays crisp above it); clipped by the pill's own corners. */
html.ds #device .ds-fr-discover .query-submit.query-submit-plain::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  opacity: 0;
  background-image:
    linear-gradient(105deg, transparent 39%, rgba(255, 255, 255, .05) 43%, rgba(255, 255, 255, .2) 46.5%, rgba(255, 255, 255, .46) 50%, rgba(255, 255, 255, .2) 53.5%, rgba(255, 255, 255, .05) 57%, transparent 61%),
    linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, .025) 26%, rgba(255, 255, 255, .07) 34%, rgba(255, 255, 255, .14) 42%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .14) 58%, rgba(255, 255, 255, .07) 66%, rgba(255, 255, 255, .025) 74%, transparent 82%);
  background-size: 168px 100%;
  background-position: 50% 0;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, black 0, rgba(0, 0, 0, .78) 40%, rgba(0, 0, 0, .5) 100%);
  mask-image: linear-gradient(180deg, black 0, rgba(0, 0, 0, .78) 40%, rgba(0, 0, 0, .5) 100%);
  mix-blend-mode: plus-lighter;
  transform: translateX(calc(-50% - 84px));
}
html.ds #device .ds-fr-discover .query-submit.query-submit-plain.ds-glint::after { animation: ds-fr-glint var(--motion-ceremony) var(--motion-breathe) 1 both; }
@keyframes ds-fr-glint {
  0% { opacity: 0; transform: translateX(calc(-50% - 84px)); }
  16% { opacity: 1; }
  84% { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(50% + 84px)); }
}
/* ds-look.js's waiting band on the same button wears the same light here (its own timing is untouched) */
html.ds #device .ds-fr-discover .premium-composer .query-submit.query-submit-plain > .ds-look-sheen {
  background-image:
    linear-gradient(105deg, transparent 39%, rgba(255, 255, 255, .05) 43%, rgba(255, 255, 255, .2) 46.5%, rgba(255, 255, 255, .46) 50%, rgba(255, 255, 255, .2) 53.5%, rgba(255, 255, 255, .05) 57%, transparent 61%),
    linear-gradient(105deg, transparent 12%, rgba(255, 255, 255, .025) 22%, rgba(255, 255, 255, .07) 32%, rgba(255, 255, 255, .14) 42%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .14) 58%, rgba(255, 255, 255, .07) 68%, rgba(255, 255, 255, .025) 78%, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, black 0, rgba(0, 0, 0, .78) 40%, rgba(0, 0, 0, .5) 100%);
  mask-image: linear-gradient(180deg, black 0, rgba(0, 0, 0, .78) 40%, rgba(0, 0, 0, .5) 100%);
  mix-blend-mode: plus-lighter;
}
/* Reduce Motion and Low Power: the fill fades instead of travelling, and no glint */
@media (prefers-reduced-motion: reduce) {
  html.ds #device .ds-fr-discover .query-submit.query-submit-plain::before { transform: none; opacity: var(--ds-fill, 0); transition: opacity var(--motion-fast) linear; }
  html.ds #device .ds-fr-discover .query-submit.query-submit-plain.ds-glint::after { animation: none; }
}
html.ds #device.manual-reduced-motion .ds-fr-discover .query-submit.query-submit-plain::before,
html.ds.reduce-motion #device .ds-fr-discover .query-submit.query-submit-plain::before { transform: none; opacity: var(--ds-fill, 0); transition: opacity var(--motion-fast) linear; }
html.ds #device.manual-reduced-motion .ds-fr-discover .query-submit.query-submit-plain.ds-glint::after,
html.ds:is(.reduce-motion, .mo-low-power) #device .ds-fr-discover .query-submit.query-submit-plain.ds-glint::after { animation: none; }

/* ===== Settings' film rating ("Refine your taste"): the page before a round and the page after it ================
   8 October 2026 (owner: "that page isn't good enough; it needs to be majorly uplifted in line with how it is at
   onboarding"). The same grammar as the first fifteen's own pages: the round control on the page's edge, the flow's
   section title at the top ("FILM DNA · MORE FILMS"), the three sealed cards of the taste intro in the middle, a Title 2
   question and a Subhead under it, centred, and the one Lamp button at the foot. The round between them is the taste
   card screen above, exactly as in the first fifteen. */
html.ds #device > .screen.taste-refinement-screen.ds-fr-more {
  position: absolute !important; inset: 0 !important;
  display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box; text-align: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) 20px max(18px, env(safe-area-inset-bottom, 0px)) !important;
  overflow-x: hidden; overflow-y: auto;
}
html.ds #device > .screen.taste-refinement-screen.ds-fr-more > * { flex: none; }
/* the older glow behind a screen is drawn larger than the screen, which gave this short page empty scroll */
html.ds #device > .screen.taste-refinement-screen.ds-fr-more::before { inset: 0; transform: none !important; animation: none !important; }
html.ds #device > .screen.taste-refinement-screen.ds-fr-more > header {
  display: grid; grid-template-columns: 72px 1fr 72px; align-items: center;
  height: 44px; min-height: 44px; margin: 26px 0 0; padding: 0; border: 0; background: none;
}
html.ds #device > .screen.taste-refinement-screen.ds-fr-more > header > .ds-fr-x {
  justify-self: start; display: grid; place-items: center; width: var(--target); height: var(--target); min-height: 0; margin: 0; padding: 0;
  border: 1px solid var(--c-line) !important; border-radius: 50% !important; background: var(--mat-chrome) !important; box-shadow: none !important; color: var(--c-label-1);
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
}
html.ds #device > .screen.taste-refinement-screen.ds-fr-more > header > span { grid-column: 3; justify-self: end; font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--fr-font); font-variant-numeric: tabular-nums; color: var(--c-label-1); }
html.ds #device > .screen.taste-refinement-screen.ds-fr-more > .ds-fr-section { position: absolute; z-index: 2; top: calc(max(12px, env(safe-area-inset-top, 0px)) + 26px); left: 76px; right: 76px; height: 44px; }
/* the stage: the sealed deck of the taste intro, centred in the room the page has */
html.ds #device > .screen.taste-refinement-screen.ds-fr-more :is(.refinement-invitation, .refinement-done) {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; min-height: 0; margin: 0; padding: 0 !important;
  border: 0; border-radius: 0; background: none; box-shadow: none; text-align: center;
}
html.ds #device > .screen.taste-refinement-screen.ds-fr-more .ds-fr-more-art { position: relative; flex: 1 1 auto; min-height: 250px; }
/* the page before a round never squeezes its words under each other: on a short phone, or with larger text, the cards
   step down in size and the page scrolls rather than overlapping */
html.ds #device > .screen.taste-refinement-screen.ds-fr-more .refinement-invitation { flex: 1 0 auto; }
@media (max-height: 740px) {
  html.ds #device > .screen.taste-refinement-screen.ds-fr-more .ds-fr-more-art { min-height: 220px; }
  html.ds #device > .screen.taste-refinement-screen.ds-fr-more .ds-fr-more-art > .ds-fr-deck { scale: .8; transform-origin: 50% 50%; }
}
html.ds #device > .screen.taste-refinement-screen.ds-fr-more .ds-fr-more-art > .ds-fr-deck { top: 50%; margin-top: -170px; }
html.ds #device > .screen.taste-refinement-screen.ds-fr-more .refinement-done { justify-content: center; }
html.ds #device > .screen.taste-refinement-screen.ds-fr-more .refinement-edition-number {
  display: block; margin: 0 0 var(--sp-2) !important;
  font: 700 calc(64 * var(--type-unit))/1 var(--fr-font) !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: var(--c-seal-hi);
}
html.ds #device > .screen.taste-refinement-screen.ds-fr-more .onboarding-copy { margin: 0 0 var(--sp-5) !important; padding: 0 4px; text-align: center; }
html.ds #device > .screen.taste-refinement-screen.ds-fr-more .onboarding-copy > .eyebrow { display: none; }
html.ds #device > .screen.taste-refinement-screen.ds-fr-more .onboarding-copy > h1 {
  margin: 0 0 6px; font: 700 calc(22 * var(--type-unit))/calc(28 * var(--type-unit)) var(--fr-font) !important; letter-spacing: var(--fr-tr-title-2); color: var(--c-label-1); text-wrap: balance;
}
html.ds #device > .screen.taste-refinement-screen.ds-fr-more .onboarding-copy > p {
  max-width: 320px; margin: 0 auto !important; font: 400 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--fr-font) !important; letter-spacing: var(--fr-tr-subhead); color: var(--c-label-2); text-wrap: pretty;
}
html.ds #device > .screen.taste-refinement-screen.ds-fr-more :is(.refinement-invitation, .refinement-done) ~ :is(.primary-button, .secondary-button),
html.ds #device > .screen.taste-refinement-screen.ds-fr-more .refinement-invitation > .primary-button { margin: var(--sp-2) 0 0; }
html.ds #device > .screen.taste-refinement-screen.ds-fr-more :is(.quiet-button) {
  align-self: center; width: auto; min-height: var(--target); margin: var(--sp-1) 0 0 !important; padding: 0 var(--sp-4);
  font: 500 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--fr-font); letter-spacing: var(--fr-tr-subhead); color: var(--c-label-1);
}
html.ds #device > .screen.taste-refinement-screen.ds-fr-more .quiet-button:disabled { color: var(--c-label-3); }
html.ds #device > .screen.taste-refinement-screen.ds-fr-more > .refinement-local-note {
  margin: var(--sp-2) 0 0 !important; text-align: center;
  font: 400 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--fr-font) !important; letter-spacing: var(--fr-tr-footnote); color: var(--c-label-3) !important;
}
html.ds #device > .screen.taste-refinement-screen.ds-fr-more > .first-run-error { margin: var(--sp-4) 0 0; }
/* a timed round, paused: its two buttons sit under the card's answers */
html.ds #device .first-run-screen.ds-fr-taste > .refinement-pause { flex: 0 0 auto; display: flex; justify-content: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; }
html.ds #device .first-run-screen.ds-fr-taste > .refinement-pause[hidden] { display: none; }
html.ds #device .first-run-screen.ds-fr-taste > .refinement-pause > button { width: auto; min-height: var(--target); margin: 0; padding: 0 var(--sp-4); }

/* ================================================================== Film DNA · More films, the page before a round
   (pages polish, 28 October 2026; the owner: blank cards, a gap above them, the headline sitting low)
   - the cards show the first three films the round will ask about (taste-refinement.js firstPosters; ds-first-run.js buildDeck);
     a poster that does not load leaves the sealed card;
   - why the gap: the cards' stage took every spare pixel (flex 1 1 auto) and stood the deck in its middle, so the taller the
     phone, the further the headline sank. The stage is now as tall as the deck needs (it shrinks on a short phone), and the
     cards, the words and the two choices stand together in the middle of the page;
   - "You've rated N films" under the words; the second choice in the one link look. */
html.ds .ds-fr-seal > .ds-fr-seal-poster { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* (29 October 2026) the mark and the sprocket edges are not hidden when the poster arrives: the poster covers them as it fades
   in, so there is no moment of an empty card between the two */
html.ds .ds-fr-seal.has-poster { border-color: color-mix(in srgb, var(--c-label-1) 18%, transparent); }
/* (taste intro, 29 October 2026; hub/docs/TASTE-INTRO-2026-10-29.md) a poster is drawn only once it has decoded: until then the
   card keeps its sealed look, then the poster fades in over it (at once when it was already in the cache; a fade is all
   Reduce Motion keeps). One that fails is removed (ds-first-run.js posterSettle) and the sealed card stays. On the page before the fifteen
   the posters are softly dimmed so the headline stays the hero. */
html.ds .ds-fr-seal > .ds-fr-seal-poster { opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve); }
html.ds .ds-fr-seal.has-poster > .ds-fr-seal-poster { opacity: 1; }
html.ds .ds-fr-seal.is-poster-instant > .ds-fr-seal-poster { transition: none; }
/* (5 November 2026; the owner, on this page: "make the films brighter and give them the fly into place parallax feature we've
   already used, highlights of purple on the film title can be a lighter more alive purple")
   - BRIGHTER: the posters are drawn at their own light; nothing filters, veils or recolours the artwork (until now they were
     dimmed to half: brightness .5 / .62). The centre card stays the hero by place: raised, in front, the longer shadow (--e-3);
     each side card takes only a soft contact shade from the centre card, on the half that runs under it.
   - THE FAN: ds-first-run.js flies the three in and splays them (collection-fan.js splay), then they live (alive: TRIPTIC_DEPTH);
     the deck gives them the Collection fan's perspective, takes a finger (a drag tilts, the page still scrolls) and a sheen that
     slides against the tilt (--cf-lx / --cf-ly, as on a Collection's cover). At rest the cards stand at their own transform.
   - THE RIM: the app's bright violet (--c-seal-hi, the one focus-ring accent) for the posters' rim, with a soft halo of it that
     brightens on the side the phone tips toward. Transform and opacity only. */
html.ds .ds-fr-page-intro .ds-fr-deck { perspective: 850px; pointer-events: auto; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.ds .ds-fr-page-intro .ds-fr-seal { backface-visibility: hidden; }
html.ds .ds-fr-page-intro .ds-fr-seal.has-poster {
  border-color: color-mix(in srgb, var(--c-seal-hi) 82%, transparent);
  box-shadow: var(--e-2), 0 0 16px -3px color-mix(in srgb, var(--c-seal-hi) 42%, transparent);
}
html.ds .ds-fr-page-intro .ds-fr-seal-2.has-poster { box-shadow: var(--e-3), 0 0 22px -3px color-mix(in srgb, var(--c-seal-hi) 50%, transparent); }
/* the sheen (the Collection cover's own band of light), over the poster, under the rim */
html.ds .ds-fr-page-intro .ds-fr-seal.has-poster::before {
  content: ""; position: absolute; z-index: 3; left: -60%; top: -30%; width: 220%; height: 160%; pointer-events: none;
  background: linear-gradient(112deg, transparent 32%, rgb(255 255 255 / .04) 40%, rgb(255 255 255 / .16) 47%, rgb(255 246 230 / .07) 52%, transparent 62%);
  transform: translate(calc(var(--cf-lx, 0) * -24% - 6%), calc(var(--cf-ly, 0) * -14%));
}
/* the rim's light: a thin bright-violet edge with the top catching white, a little brighter as the fan tips (its opacity) */
html.ds .ds-fr-page-intro .ds-fr-seal.has-poster::after {
  content: ""; position: absolute; z-index: 4; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 0 0 1px color-mix(in srgb, var(--c-seal-hi) 55%, transparent), inset 0 0 14px -4px color-mix(in srgb, var(--c-seal-hi) 60%, transparent);
  opacity: calc(.7 + .3 * max(var(--cf-lx, 0), -1 * var(--cf-lx, 0), var(--cf-ly, 0), -1 * var(--cf-ly, 0)));
}
/* the side cards' contact shade: only the half under the centre card, never a veil over the whole poster */
html.ds .ds-fr-page-intro .ds-fr-seal-1.has-poster::after { background: linear-gradient(90deg, transparent 62%, rgb(0 0 0 / .2)); }
html.ds .ds-fr-page-intro .ds-fr-seal-3.has-poster::after { background: linear-gradient(270deg, transparent 62%, rgb(0 0 0 / .2)); }
html.ds .ds-fr-page-intro .ds-fr-deck.cf-lite .ds-fr-seal::before { content: none; }
html.ds .ds-fr-page-intro .ds-fr-deck.cf-held { cursor: grabbing; }
html.ds .ds-fr-page-intro .ds-fr-deck.cf-live { cursor: grab; }
html.ds #device > .screen.taste-refinement-screen.ds-fr-more .refinement-invitation { justify-content: center; }
html.ds #device > .screen.taste-refinement-screen.ds-fr-more .refinement-invitation > .ds-fr-more-art { flex: 0 1 300px; min-height: 230px; max-height: 300px; }
html.ds #device > .screen.taste-refinement-screen.ds-fr-more .refinement-invitation > .ds-fr-more-art > .ds-fr-deck { top: 50%; margin-top: -150px; }
@media (max-height: 740px) {
  html.ds #device > .screen.taste-refinement-screen.ds-fr-more .refinement-invitation > .ds-fr-more-art { flex-basis: 240px; min-height: 210px; }
  html.ds #device > .screen.taste-refinement-screen.ds-fr-more .refinement-invitation > .ds-fr-more-art > .ds-fr-deck { margin-top: -160px; }
}
html.ds #device > .screen.taste-refinement-screen.ds-fr-more .refinement-invitation > .onboarding-copy { margin-top: var(--sp-4) !important; }
html.ds #device > .screen.taste-refinement-screen.ds-fr-more .onboarding-copy > .refinement-rated {
  margin: var(--sp-2) auto 0 !important; font: 600 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--fr-font) !important; color: var(--c-label-2);
}
html.ds #device > .screen.taste-refinement-screen.ds-fr-more .refinement-invitation > .refinement-timed.ds-link { align-self: center; padding: 0 var(--sp-2); }

/* ================================================================== the taste deck's card screen (29 October 2026; the owner's
   iPhone screenshot at 3 of 15; hub/docs/TASTE-INTRO-2026-10-29.md)
   - "Loved it" looked chosen before anything was chosen: its circle carried the Lamp's edge (#f3eee6, a near-white ring) on
     every card, so after a tap on it the next card seemed to arrive with it pre-selected. The ring goes; the heart keeps the
     Lamp's colour. (Measured too: after a tap the finger's :hover stays on whatever button is under it; no answer button
     has a hover look, and the app's hover looks are now kept to a real pointer: see design-system.css.)
   - the dots agree with "3 of 15": the films answered are dimly lit, the film on screen is a longer, fully lit dot.
   - the close button is the intro page's Back: one 44pt target, a 36pt glass circle, at the same place on the screen.
   - "Haven't seen it" sits on the centre line with Undo to its left (a three-column row, whatever is in it).
   - the answers keep 16pt from the foot of the stack: the card stands on the deck's floor, the cards beneath peek 9 and
     18pt below it, and the card shrinks before anything overlaps (swipe-deck.css).
   - the two endless moves on these pages (the backdrop's 18s drift of a blurred layer larger than the screen, the card's
     satin sweep) are still: measured in a browser, they doubled the cost of every frame, a card's flight included (an idle
     frame 30 ms instead of 17 ms). */
html.ds #device .first-run-screen.ds-fr-taste .ds-fr-actions > button[data-answer="loved"] .ds-fr-disc { border-color: var(--c-line-strong); }
html.ds #device .first-run-screen.ds-fr-taste .ds-hole.is-lit { background: color-mix(in srgb, var(--c-lamp) 52%, transparent); }
html.ds #device .first-run-screen.ds-fr-taste .ds-hole.is-current { width: 14px; background: var(--c-lamp); }
@media (max-height: 600px) { html.ds #device .first-run-screen.ds-fr-taste .ds-hole.is-current { width: 11px; } }
html.ds #device .first-run-screen.ds-fr-taste > header { margin-top: calc(var(--fr-top) + 4px - max(12px, env(safe-area-inset-top, 0px))); }
html.ds #device .screen:is(.first-run-screen.ds-fr-taste, .taste-refinement-screen.ds-fr-more) > header > .ds-fr-x {
  position: absolute; z-index: 3; top: 0; left: -12px; isolation: isolate;
  width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0;
  border: 0 !important; border-radius: 50% !important; background: none !important; box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--c-label-1);
}
html.ds #device .screen:is(.first-run-screen.ds-fr-taste, .taste-refinement-screen.ds-fr-more) > header > .ds-fr-x::before {
  content: ""; position: absolute; inset: 4px; z-index: -1;
  border: 1px solid var(--c-line); border-radius: 50%; background: var(--mat-chrome);
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
}
html.ds #device.manual-solid .screen > header > .ds-fr-x::before, html.ds.reduce-transparency #device .screen > header > .ds-fr-x::before { background: var(--mat-chrome-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) { html.ds #device .screen > header > .ds-fr-x::before { background: var(--mat-chrome-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }
html.ds #device .first-run-screen.ds-fr-taste > .ds-fr-more-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 12px; }
html.ds #device .first-run-screen.ds-fr-taste > .ds-fr-more-row::after { content: none; }
html.ds #device .first-run-screen.ds-fr-taste > .ds-fr-more-row > .ds-fr-undo { grid-column: 1; justify-self: end; }
html.ds #device .first-run-screen.ds-fr-taste > .ds-fr-more-row > .ds-fr-unsure { grid-column: 2; border-radius: var(--r-pill) !important; }
html.ds #device .first-run-screen.ds-fr-taste :is(.ds-fr-actions > button, .ds-fr-more-row > button, header > .ds-fr-x) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
html.ds #device .first-run-screen.ds-fr-taste .taste-deck { place-items: end center; margin-bottom: 34px !important; }
html.ds #device .screen:is(.ds-fr-intro, .ds-fr-taste, .ds-fr-gate, .ds-fr-finale, .ds-fr-more)::before, html.ds #device .first-run-screen.ds-fr-taste .verified-taste-poster::before { animation: none !important; }
/* an older layer pads the card screen 18 / 24pt on a short phone (first-run.css, max-height 650px): the flow's own padding
   holds, so the close button and the header line stand where the intro's Back and section line stand */
@media (max-height: 650px) { html.ds #device .first-run-screen.ds-fr-taste:has(.taste-deck) { padding: max(12px, env(safe-area-inset-top, 0px)) 20px max(18px, env(safe-area-inset-bottom, 0px)) !important; } }
/* the intro page on the shortest phones (the card screen's header sits 4pt under the top there: device-fit.css): its Back and
   section line stand on that same line, so Back and the close button are in one place through the whole flow */
@media (max-height: 600px) {
  html.ds[data-fit] .ds-fr-flow > :is(.ds-fr-back, .ds-fr-section) { top: calc(max(12px, env(safe-area-inset-top, 0px)) + 4px); }
  html.ds[data-fit] #device .first-run-screen.ds-fr-taste > header { margin-top: 4px; }
}
/* the card in flight keeps the size it had in the deck (taste-card-preparation.js sizes its holder to the card's own box) */
html.ds #device .first-run-screen.ds-fr-taste .taste-flight.taste-flight-sized > .taste-swipe-card { width: 100% !important; height: 100% !important; max-width: none !important; }
/* the poster's light behind the card (first-run.css taste-atmosphere): each answer paints a new full-screen layer, the most
   expensive frame of an answer (measured: with it, frames of 80 to 150 ms in a software-drawn browser; without it, none over
   33). The lit layer has no blur, so it needs no bleed past the screen (9% each side was 39% more to paint), and its fade
   waits until the card has arrived, so the paint never lands in the card's own flight. */
html.ds #device .first-run-screen.ds-fr-taste .taste-atmosphere-layer.is-lit { inset: 0; }
html.ds #device .first-run-screen.ds-fr-taste .taste-atmosphere-layer:is(.is-entering, .is-outgoing) { animation-delay: var(--motion-normal); }
/* (29 October 2026, the coordinator's check of the stills) the close button stood over the first dots: once it was placed absolutely
   (to stand where the intro's Back stands) it left its grid cell, and the dots were auto-placed into that first narrow column, the
   count into the middle. Each takes its own column by name: close at the left edge, the dots centred between close and the count,
   the count at the right. The dot row can only shrink its gaps, never the circle. */
html.ds #device .first-run-screen.ds-fr-taste > header > .ds-fr-x { grid-column: 1; grid-row: 1; }
html.ds #device .first-run-screen.ds-fr-taste > header > .ds-fr-progress { grid-column: 2; grid-row: 1; justify-self: center; min-width: 0; max-width: 100%; flex-wrap: nowrap; }
html.ds #device .first-run-screen.ds-fr-taste > header > .ds-fr-count { grid-column: 3; grid-row: 1; }
html.ds #device .first-run-screen.ds-fr-taste > header > .sw-clock { grid-column: 2; grid-row: 1; }
@media (max-width: 359px) { html.ds #device .first-run-screen.ds-fr-taste > header > .ds-fr-progress { gap: 3px; } }

/* ===== prototype-src/ds-film-share.css ===== */
/* TRIPTIC ds-film-share layer (W3). Scoped under html.ds; ?ds=0 restores the previous Film and Share.
   Direction: workspace/work/frontend-motion-uplift-2026-09-30/DESIGN-DIRECTION.md section 2 (Film and sharing,
   settled reveal), section 3 moments 1 and 7, section 4 shared elements.

   Owns: the Film page (order, hero, rows, stretch and parallax), the Film save micro-interaction,
   the settled-reveal chrome (capsule disclosure, dock), the ticket-stub Share card and the receiver
   preview. It never touches the reveal choreography or the card to Film transition; it styles around them.

   !IMPORTANT OVERRIDES (each beats an earlier !important):
   - .film-v5.recon-film .film-hero height/min-height (frontend-completion.css): long titles grow the hero.
   - .film-v5.recon-film background (frontend-completion.css): the Film page paints its own ground and tint (transparent only
     while film-transition clears it), so the deck never shows through.
   - .film-hero height / background-size / border-radius (frontend-completion.css, triptic-apple-integration.css): a taller
     hero whose poster is drawn by a masked ::before so it fades into the page; the condensed state no longer dims it.
   - .film-content background / ::before, .why-panel / .request-fit / .film-information-source chrome (legacy content-material
     and feedback-experience.css): no sheet edge, no boxed notes; quiet rows instead.
   - .decision-actions geometry and buttons (frontend-completion.css, motion-surfaces.css): four glass wells with labels.
   - .media-trailer-copy, .media-trailer-play, .media-trailer-external (triptic-media-integration.css, interaction-targets.css):
     caption not printed (still read by assistive tech), one Liquid Glass play button, a corner YouTube link. Their pressed
     state beats design-system.css .ds-pressed (scale/box-shadow !important) with a deeper glass press.
   - .watch-options logo grid (streaming-preferences.js markup; legacy .provider-* !important chrome does not apply to it).
   - .edit-film-platforms, .cast-track small (legacy sizes): a small "Your platforms" control; one-line role captions.
   - .film-v5 .film-content padding (product-manager-polish.css): section rhythm is owned here.
   - .film-v5.recon-film .film-title h1 (32px), .film-v5 .cast-track strong (14px) and .edit-film-platforms (14px): legacy !important sizes snapped to the SF ramp.
   - .film-hero background-position (premium-20.css, product-manager-polish.css): the legacy focal/parallax
     shift animated background-position; the hero is moved with translate/scale instead.
   - .critical-film-cta / .critical-result-toolbar geometry (frontend-completion.css, search-flow-premium.css,
     motion-system.css, motion-surfaces.css): the settled dock is re-laid out with the same sticky
     stack and the same --surf-* variables, so the dock-spacing audit still holds.
   - .critical-friday-refresh[hidden] (motion-surfaces.css display rule): a hidden refresh stays hidden.
   - .collectible-* (share-experience.css): the share card is rebuilt as a ticket.
   - .critical-understood / .ds-request-details (refinement-experience.css, design-system.css): the request block
     becomes a popover under the capsule (width, background, padding, borders, inner boxes).
   - .critical-result-toolbar > button, .critical-film-cta > svg (frontend-completion.css, motion-surfaces.css): the
     three tools are 44px circular icon buttons; the CTA is one line without a chevron.
   - #share-image-download[data-ds-kind="glass"] (design-system.css Lamp rule): Save image is Glass.
   - #device.critical-journey-active > .ds-edge-fade (ds-navigation.css, z 29): hidden while the ritual is up, because
     it sits above the layer and veils the dock.
   ========================================================================================= */

/* ===================================================================== Film page
   One continuous hero: the poster is painted by .film-hero::before under a mask that fades it into the page,
   and the blurred atmosphere below carries its colour on, so there is no edge between hero and content.
   The hero keeps its background-image (film-transition and tripResolveFilmPoster measure it); it is
   drawn at size 0 so only the masked layer is visible. Both Film variants (from a reveal and from a
   Collection) share this markup and this design. */
html.ds #device .film-v5 {
  --ds-film-ground: var(--c-stage);
  --ds-film-tint: 120, 110, 150;
  --ds-film-fade: linear-gradient(180deg, rgb(0, 0, 0) 0, rgb(0, 0, 0) 54%, rgba(0, 0, 0, .62) 74%, rgba(0, 0, 0, .18) 90%, transparent 100%);
}
/* the page paints its own ground (the deck must never show through); transitions still clear it (ft-clear) */
html.ds #device .film-v5.recon-film:not(.ft-clear) {
  background:
    radial-gradient(130% 62% at 50% 8%, rgba(var(--ds-film-tint), .14), transparent 72%),
    var(--ds-film-ground) !important;
}
html.ds #device.manual-solid .film-v5.recon-film:not(.ft-clear) { background: var(--c-stage) !important; }

/* hero: a tall poster, no frame, no title box */
html.ds #device .film-v5.recon-film .film-hero {
  --film-hero-height: clamp(420px, 72svh, 600px);
  height: var(--film-hero-height) !important; min-height: var(--film-hero-height) !important;
  transition: none;
  transform-origin: 50% 0;
  will-change: translate, scale;
  background-position: 50% 24% !important;
  border-radius: 0 !important;
}
html.ds #device .film-v5.recon-film .film-hero[style*="--poster"] { background-size: 0 0 !important; background-repeat: no-repeat !important; }
html.ds #device .film-v5.recon-film .film-hero[style*="--poster"]::before {
  content: ""; display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; opacity: 1; filter: none; transform: none;
  background: var(--poster) 50% 24% / cover no-repeat;
  -webkit-mask: var(--ds-film-fade); mask: var(--ds-film-fade);
}
/* scrolling no longer dims, shrinks or rounds the hero (frontend-completion's condensed state animated filter) */
html.ds #device .film-v5.recon-film.film-header-condensed .film-hero { filter: none !important; transform: none; border-radius: 0 !important; }
/* the blurred poster carries the colour past the hero: a touch brighter, starting higher */
html.ds #device .film-v5.recon-film .film-artwork-atmosphere::before { inset: calc(var(--film-hero-height) - 300px) -40px 0; opacity: .42; }
html.ds #device .film-v5.recon-film .film-gradient {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .40), transparent 24%),
    linear-gradient(180deg, transparent 44%, rgba(5, 5, 7, .30) 64%, rgba(5, 5, 7, .58) 84%, rgba(5, 5, 7, .36) 100%);
}
html.ds #device.manual-solid .film-v5.recon-film .film-gradient {
  background: linear-gradient(180deg, rgba(0, 0, 0, .40), transparent 24%), linear-gradient(180deg, transparent 50%, var(--c-stage) 100%);
}

/* the collector's foil: a holographic sheen across the poster that travels with scroll (translate only) */
html.ds #device .film-v5 .ds-film-foil {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: var(--ds-film-fade); mask: var(--ds-film-fade);
  mix-blend-mode: overlay; opacity: 1;
}
html.ds #device .film-v5 .ds-film-foil > i {
  position: absolute; top: -10%; bottom: -10%; left: -100%; width: 300%; display: block; will-change: translate;
  translate: var(--ds-foil-x, 8%) 0;
  background:
    linear-gradient(112deg,
      transparent 28%,
      rgba(255, 170, 230, .0) 31%, rgba(255, 170, 230, .62) 37%,
      rgba(150, 220, 255, .78) 42.5%, rgba(255, 250, 210, .85) 45%, rgba(255, 236, 170, .62) 48%,
      rgba(186, 160, 255, .55) 52.5%, transparent 60%);
}
html.ds #device .film-v5 .ds-film-foil > i::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(112deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 4px);
  -webkit-mask: linear-gradient(112deg, transparent 32%, rgb(0, 0, 0) 44%, transparent 58%);
  mask: linear-gradient(112deg, transparent 32%, rgb(0, 0, 0) 44%, transparent 58%);
}
/* one glint as the page opens, then the sheen rests until you scroll */
html.ds #device .film-v5 .ds-film-foil.is-glint > i { animation: ds-foil-glint var(--motion-ceremony) var(--motion-spring) 650ms backwards; }
@keyframes ds-foil-glint { from { translate: -34% 0; } to { translate: var(--ds-foil-x, 8%) 0; } }
html.ds #device.manual-solid .film-v5 .ds-film-foil,
html.ds #device.manual-reduced-motion .film-v5 .ds-film-foil,
html.ds.reduce-motion #device .film-v5 .ds-film-foil { display: none; }
@media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) {
  html.ds #device .film-v5 .ds-film-foil { display: none; }
}

/* title block: one eyebrow, the title, quiet meta */
html.ds #device .film-v5.recon-film .film-title {
  left: 0; right: 0; bottom: 0; max-width: none !important; z-index: 2; /* an older layer holds the block to 320pt (!important): the facts then broke after two of their four parts on every phone */
  box-sizing: border-box; padding: 96px 20px 20px;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .35);
}
html.ds #device .film-v5.recon-film .film-title > span {
  display: inline-block; margin: 0 0 8px; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0;
  box-shadow: none !important;
  font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui);
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--c-label-2) !important;
}
html.ds #device .film-v5.recon-film .film-title h1 {
  margin: 0 0 8px; max-width: 12em;
  font: var(--fw-large-title) var(--fs-large-title)/var(--lh-large-title) var(--font-ui);
  font-size: var(--fs-large-title) !important; line-height: var(--lh-large-title) !important; /* .recon-film .film-title h1 sets 32px !important */
  letter-spacing: var(--tr-large-title); color: var(--c-label-1);
  text-wrap: balance;
}
/* longer titles step down to Title 1 */
html.ds #device .film-v5.recon-film.ds-title-long .film-title h1,
html.ds #device .film-v5.recon-film.film-long-title .film-title h1 {
  font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui);
  font-size: var(--fs-title-1) !important; line-height: var(--lh-title-1) !important;
  letter-spacing: var(--tr-title-1); max-width: 13em;
}
html.ds #device .film-v5.recon-film .film-title > p {
  margin: 0;
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui) !important;
  letter-spacing: var(--tr-subhead) !important; font-variant-numeric: tabular-nums;
  color: var(--c-label-2);
}
html.ds #device .film-v5.recon-film.film-long-title .film-title { padding: 96px 20px 20px; }

/* the bar the title condenses into once the poster has scrolled away: the app's one chrome material as a capsule, the
   round Back and Share every page has, the title at Headline and one quiet line under it (it was a caption in the
   poster's own colour, which could be any colour) */
html.ds #device .film-v5 > .film-compact-header {
  box-sizing: border-box; margin-left: 12px; margin-right: 12px; padding: 0 5px; gap: var(--sp-2);
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--mat-chrome); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  box-shadow: var(--e-2);
}
html.ds #device .film-v5 > .film-compact-header > button {
  background: var(--c-fill-2) !important; border: 1px solid var(--c-line) !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.ds #device .film-v5 > .film-compact-header strong { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1); }
html.ds #device .film-v5 > .film-compact-header small {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-label-2);
}
html.ds #device.manual-solid .film-v5 > .film-compact-header { background: var(--mat-chrome-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) {
  html.ds #device .film-v5 > .film-compact-header { background: var(--mat-chrome-solid) !important; }
}

/* content: one ordered column on the same ground as the hero's fade (no sheet edge) */
html.ds #device .film-v5 > .film-content {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 2px 20px 56px !important;
  background: none !important;
}
html.ds #device .film-v5 > .film-content::before { content: none !important; }
html.ds #device .film-v5 .film-content > * { order: 65; margin-left: 0; margin-right: 0; }
html.ds #device .film-v5 .film-content > .decision-actions { order: 0; }
html.ds #device .film-v5 .film-content > .film-reaction { order: 5; }
html.ds #device .film-v5 .film-content > .why-panel { order: 10; }
html.ds #device .film-v5 .film-content > .request-fit,
html.ds #device .film-v5 .film-content > .why-not-panel { order: 12; }
html.ds #device .film-v5 .film-content > .film-recommendation-context,
html.ds #device .film-v5 .film-content > .film-context-unavailable { order: 14; }
/* the owner, 9 October 2026 (22:00): why it matched, then the synopsis, then the trailer, then the cast; where to watch
   after them (Lane FILMPAGE; the DOM is put in the same order by film-page-order.js, so it is also the reading order) */
html.ds #device .film-v5 .film-content > .spoiler-safe { order: 20; }
html.ds #device .film-v5 .film-content > .media-trailer,
html.ds #device .film-v5 .film-content > .trailer-preview { order: 30; }
html.ds #device .film-v5 .film-content > .cast-section { order: 40; }
html.ds #device .film-v5 .film-content > .watch-options { order: 50; }
html.ds #device .film-v5 .film-content > .film-information-source { order: 60; }
html.ds #device .film-v5 .film-content > .feedback-link { order: 70; }

/* --- THE ACTION BAR (8 October 2026; hub/docs/FILM-ACTIONS-2026-10-08.md).
   The owner, of the row as it was: "didn't look good in terms of words fitting on and being able to see the boxes round
   the icons, so uplift and make sexier." What his iPhone showed and why:
     - a smudged rounded square behind every action: the app's oldest rule (globals: `.decision-actions button`) gives
       each button its own `backdrop-filter: blur(24px)`, and no later layer ever took it away. WebKit paints a blurred
       tile for it; the tiles overlapped each other and whatever was behind them.
     - "Add to watchlis": that label was allowed to be 14pt wider than its quarter of the row, and the next button's
       tile was painted over its last letter.
     - the title half hidden: the poster moved at half the page's speed and the title was part of the poster, so the
       row rode up over the title as soon as the page was scrolled (ds-film-share.js now moves the title with the page).

   What it is now: ONE capsule of the tab bar's own dark glass holding the four actions, each an icon over a short
   label, exactly as a tab is. The material is not copied: every --dock-* token below is ds-navigation.css's, so the
   legibility floor (4.5:1 over a white picture), the solid bar under Reduce Transparency / no backdrop-filter / the
   reduced motion tier, and any later change to the glass arrive here by themselves.
     - nothing is painted behind an action. The only surfaces are the capsule and, under the one action that is ON, the
       tab bar's lens: a clearer, slightly raised lozenge with the brand's violet as a light beneath it.
     - a film is in one state at a time (film-state.js), so there is at most one lens, as there is one selected tab.
     - ON is said three ways, never by colour alone: the lens, the glyph drawn solid, and the icon and label in violet.
       "Seen it" also changes its glyph and its words to the answer given (Loved it / Liked it / Not for me).
     - the labels are the tab bar's Caption 2 Medium and, like the tab bar's, grow with the text size only to x1.15: four
       labels share one fitted bar. Each is one line. The four segments are equal while the words allow it; when the
       longest ("Not interested") needs more than a quarter it takes what it needs and the other three share the rest.
       If even that cannot be had (a wider face than expected), film-actions.js adds .is-tight and a label takes a
       second line. Never an ellipsis, never a clipped letter, never below 11pt.
     - on a wide screen (an iPhone Duo's inner display) it is a capsule no wider than the tab bar's, never a slab. */
html.ds #device .film-v5 .film-content > .decision-actions {
  --fa-h: 64px;                         /* the capsule; an action inside it is 56pt tall */
  --fa-pad: var(--dock-pad, 4px);
  --fa-scale: min(var(--text-scale, 1), 1.15);
  --type-unit: calc(1px * var(--fa-scale));  /* the labels' ramp is held at x1.15 here, as the tab bar's is */
  --fs-caption-2: calc(11 * var(--type-unit)); --lh-caption-2: calc(13 * var(--type-unit));
  --fa-shadow: 0 14px 30px rgb(0 0 0 / .34), 0 3px 10px rgb(0 0 0 / .26), 0 0 0 .5px rgb(0 0 0 / .5);
  position: relative !important; inset: auto !important; z-index: 4 !important;
  box-sizing: border-box !important;
  display: grid !important; grid-template-columns: repeat(4, minmax(max-content, 1fr)) !important; gap: 0 !important; align-items: stretch !important;
  width: auto !important; max-width: var(--dock-max, 430px) !important; height: auto !important; min-height: var(--fa-h) !important;
  margin: var(--sp-2) 0 var(--sp-6) !important; padding: var(--fa-pad) !important;
  overflow: hidden !important;         /* the violet light never passes the capsule's edge */
  background: none !important; border: 0 !important; border-radius: var(--r-pill) !important; box-shadow: var(--fa-shadow) !important;
  /* the capsule itself is only a frame: free of filter, opacity and its own backdrop filter, or the glass inside it
     would lose sight of the picture behind */
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
html.ds #device .film-v5 .film-content > .decision-actions.is-tight { grid-template-columns: repeat(4, minmax(min-content, 1fr)) !important; }
/* the glass: what is behind the bar, blurred and lifted in saturation, then shaded to the floor; its own fill is the rim
   light, which the tint covers everywhere but the outermost hairline */
html.ds #device .film-v5 .film-content > .decision-actions::before {
  content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important;
  width: auto !important; height: auto !important; margin: 0 !important; border: 0 !important; border-radius: inherit !important; pointer-events: none;
  opacity: 1 !important; transform: none !important; filter: none !important; box-shadow: none !important;
  background: var(--dock-specular), var(--dock-under) !important;
  -webkit-backdrop-filter: var(--dock-backdrop) !important; backdrop-filter: var(--dock-backdrop) !important;
}
/* the tint: graphite, thin enough to let the picture through */
html.ds #device .film-v5 .film-content > .decision-actions::after {
  content: "" !important; display: block !important; position: absolute !important; inset: var(--dock-rim, 1px) !important; z-index: 0 !important;
  width: auto !important; height: auto !important; margin: 0 !important; border: 0 !important; border-radius: inherit !important; pointer-events: none;
  opacity: 1 !important; transform: none !important; filter: none !important;
  background: var(--dock-fill) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), inset 0 -1px 0 rgb(0 0 0 / .3) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* an action: an icon over its word. Nothing of its own is painted: no fill, no edge, no shadow, no backdrop filter. */
html.ds #device .film-v5 .film-content > .decision-actions > button {
  position: relative !important; z-index: 1 !important; box-sizing: border-box !important; isolation: isolate;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  gap: 2px !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: calc(var(--fa-h) - 2 * var(--fa-pad)) !important;
  margin: 0 !important; padding: 6px 9px 7px !important;
  background: none !important; border: 0 !important; border-radius: var(--r-pill) !important; box-shadow: none !important; outline: 0;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important; transform: none !important; opacity: 1 !important;
  color: rgb(var(--dock-ink, 245 244 247)) !important; -webkit-text-fill-color: currentColor;
  font: 500 var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui) !important;
  letter-spacing: var(--tr-caption-2) !important; text-transform: none !important;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer;
  animation: none !important;
}
html.ds #device .film-v5 .film-content > .decision-actions > button > svg,
html.ds #device .film-v5 .film-content > .decision-actions > button > i {
  flex: none; box-sizing: border-box; display: block; width: var(--dock-icon, 24px) !important; height: var(--dock-icon, 24px) !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: visible;
  color: currentColor !important; stroke-width: 1.8 !important; opacity: 1;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important;
  transition: none !important;
}
html.ds #device .film-v5 .film-content > .decision-actions > button > svg * { vector-effect: none; }
html.ds #device .film-v5 .film-content > .decision-actions > button > span {
  display: block !important; box-sizing: border-box; width: auto !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; -webkit-line-clamp: unset !important; text-align: center;
  font: inherit !important; font-size: var(--fs-caption-2) !important; line-height: var(--lh-caption-2) !important; letter-spacing: inherit !important;
  color: currentColor !important; opacity: 1;
}
html.ds #device .film-v5 .film-content > .decision-actions.is-tight > button { justify-content: flex-start !important; padding-left: 4px !important; padding-right: 4px !important; }
html.ds #device .film-v5 .film-content > .decision-actions.is-tight > button > span { white-space: normal !important; overflow-wrap: normal; text-wrap: balance; }

/* ON. The tab bar's lens under the action (::before) and the brand's violet as a light beneath it (::after), both
   inside the capsule. They are there for every action and shown for the one that is on, so the lens can spring in. */
html.ds #device .film-v5 .film-content > .decision-actions > button::before {
  content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: -1 !important;
  width: auto !important; height: auto !important; margin: 0 !important; border: 0 !important; border-radius: var(--r-pill) !important; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--dock-sheen, 255 255 255) / var(--dock-sheen-top, .13)), rgb(var(--dock-sheen, 255 255 255) / var(--dock-sheen-mid, .11)) 50%, rgb(var(--dock-sheen, 255 255 255) / var(--dock-sheen-low, .09))),
    linear-gradient(var(--dock-well, rgb(10 9 16 / .58)), var(--dock-well, rgb(10 9 16 / .58))) !important;
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .16), inset 0 1px 0 rgb(255 255 255 / .26), 0 3px 10px rgb(0 0 0 / .3), 0 1px 2px rgb(0 0 0 / .22) !important;
  opacity: 0; scale: .9; transform: none !important; filter: none !important;
  transition: opacity var(--motion-fast) var(--motion-curve), scale var(--motion-normal) var(--motion-spring);
}
html.ds #device .film-v5 .film-content > .decision-actions > button::after {
  content: "" !important; display: block !important; position: absolute !important; z-index: -2 !important;
  inset: calc(-1 * var(--fa-pad)) 0 !important; width: auto !important; height: auto !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; pointer-events: none;
  background:
    radial-gradient(ellipse 30px 7px at 50% calc(100% - 3px), rgb(var(--dock-bloom, 139 92 246) / var(--dock-bloom-core, .36)), rgb(var(--dock-bloom, 139 92 246) / 0) 100%),
    radial-gradient(ellipse 50% 34px at 50% calc(100% - 3px), rgb(var(--dock-bloom, 139 92 246) / var(--dock-bloom-halo, .2)), rgb(var(--dock-bloom, 139 92 246) / 0) 100%) !important;
  box-shadow: none !important; transform: none !important; filter: none !important;
  opacity: 0; transition: opacity var(--motion-fast) var(--motion-curve);
}
html.ds #device .film-v5 .film-content > .decision-actions > button[aria-pressed="true"] { color: rgb(var(--dock-accent, 196 178 255)) !important; }
html.ds #device .film-v5 .film-content > .decision-actions > button[aria-pressed="true"]::before { opacity: 1; scale: 1; }
html.ds #device .film-v5 .film-content > .decision-actions > button[aria-pressed="true"]::after { opacity: 1; }
/* the glyph drawn solid, the way a symbol and its .fill variant are. A tick or a stroke inside a solid disc is cut out
   in the glass's own dark. */
html.ds #device .film-v5 .film-content > .decision-actions > button[aria-pressed="true"] > svg:is([data-trip-icon="bookmark"], [data-trip-icon="heart"], [data-trip-icon="thumbUp"], [data-trip-icon="thumbDown"]) path { fill: currentColor !important; fill-opacity: 1 !important; }
html.ds #device .film-v5 .film-content > .decision-actions > button[aria-pressed="true"] > svg:is([data-trip-icon="watched"], [data-trip-icon="pass"]) circle { fill: currentColor !important; fill-opacity: 1 !important; }
html.ds #device .film-v5 .film-content > .decision-actions > button[aria-pressed="true"] > svg:is([data-trip-icon="watched"], [data-trip-icon="pass"]) path { fill: none !important; stroke: var(--dock-solid-lo, rgb(27 26 34)); stroke-width: 2.1; }

/* under the finger: the action dips (ds-core's press, as a tab does) and catches the light */
html.ds #device .film-v5 .film-content > .decision-actions > button.ds-pressed,
html.ds #device .film-v5 .film-content > .decision-actions > button:active:not([aria-disabled="true"]) { box-shadow: inset 0 0 0 999px rgb(255 255 255 / .07) !important; }
html.ds #device .film-v5 .film-content > .decision-actions > button[aria-pressed="true"]:is(.ds-pressed, :active) { box-shadow: none !important; }
/* it answers: the icon springs once when its action is switched on (film-actions.js adds .fa-pop; ds-film-share.js
   adds .ds-save-pop to the watchlist the same way) */
html.ds #device .film-v5 .film-content > .decision-actions > button:is(.fa-pop, .ds-save-pop) > svg { animation: fa-pop var(--motion-normal) var(--motion-spring) both; }
@keyframes fa-pop { 0% { scale: .78; } 55% { scale: 1.12; } 100% { scale: 1; } }
/* a keyboard's focus: a ring inside the action (the capsule clips what is outside it) */
html.ds #device .film-v5 .film-content > .decision-actions > button:focus-visible { outline: 2px solid var(--c-focus) !important; outline-offset: -3px !important; }
/* an action that cannot apply (film-actions.js says why when it is touched) */
html.ds #device .film-v5 .film-content > .decision-actions > button[aria-disabled="true"] { cursor: default; }
html.ds #device .film-v5 .film-content > .decision-actions > button[aria-disabled="true"] > svg,
html.ds #device .film-v5 .film-content > .decision-actions > button[aria-disabled="true"] > span { opacity: .38; }
/* Reduce Motion: the lens fades in where it is; nothing springs */
@media (prefers-reduced-motion: reduce) {
  html.ds #device .film-v5 .film-content > .decision-actions > button::before { scale: 1; transition: opacity var(--motion-fast) var(--motion-curve); }
  html.ds #device .film-v5 .film-content > .decision-actions > button:is(.fa-pop, .ds-save-pop) > svg { animation: none; }
}
html.ds.reduce-motion #device .film-v5 .film-content > .decision-actions > button::before,
html.ds #device.manual-reduced-motion .film-v5 .film-content > .decision-actions > button::before,
html.ds[data-motion-tier="reduced"] #device .film-v5 .film-content > .decision-actions > button::before { scale: 1; transition: opacity var(--motion-fast) var(--motion-curve); }
html.ds.reduce-motion #device .film-v5 .film-content > .decision-actions > button:is(.fa-pop, .ds-save-pop) > svg,
html.ds #device.manual-reduced-motion .film-v5 .film-content > .decision-actions > button:is(.fa-pop, .ds-save-pop) > svg,
html.ds[data-motion-tier="reduced"] #device .film-v5 .film-content > .decision-actions > button:is(.fa-pop, .ds-save-pop) > svg { animation: none; }
@media (forced-colors: active) {
  html.ds #device .film-v5 .film-content > .decision-actions { border: 1px solid ButtonText !important; }
  html.ds #device .film-v5 .film-content > .decision-actions > button[aria-pressed="true"] { outline: 2px solid Highlight !important; outline-offset: -3px !important; }
}

/* section chrome. The page is built from the same three things as Today, Library and You:
   a card (the reason this film is here, and "How was it?"), a titled shelf (Where to watch, Trailer, Cast, Synopsis:
   Title 3 with a quiet link on the right, as "Reels" in Library) and a grouped list (the film's small print). */
html.ds #device .film-v5 .watch-options,
html.ds #device .film-v5 .cast-section,
html.ds #device .film-v5 .spoiler-safe {
  margin: 0 0 var(--section-gap); padding: 0; background: none !important; border: 0; border-radius: 0; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.ds #device .film-v5 .media-trailer { margin: 0 0 var(--section-gap); }

/* --- Why this matched / From the Collection: the card Film DNA has on You. A title and a quiet tag on one line, the
   reason as the card's one statement under a short rule in the poster's colour, and, when there is a
   request to answer for, "Did it suit your request?" as the card's last row. */
html.ds #device .film-v5 .film-content > .why-panel {
  margin: 0 0 var(--section-gap) !important; padding: var(--sp-4) var(--sp-4) var(--sp-1) !important;
  background: var(--c-fill-1) !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-card) !important;
  box-shadow: var(--e-1) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.ds #device .film-v5 .film-content > .why-panel:has(+ .request-fit) {
  margin-bottom: 0 !important; border-bottom: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important;
}
html.ds #device.manual-solid .film-v5 .film-content > :is(.why-panel, .request-fit, .film-reaction) { background: var(--c-stage-raised) !important; }
html.ds #device .film-v5 .why-panel > div:first-child {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 var(--sp-2);
}
html.ds #device .film-v5 .why-panel > div:first-child > span {
  font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui);
  letter-spacing: var(--tr-headline); text-transform: none; color: var(--c-label-1);
}
html.ds #device .film-v5 .why-panel .confidence-badge {
  flex: none; min-height: 0; margin-left: auto; padding: 0; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important;
  font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); font-size: var(--fs-caption-1) !important; letter-spacing: var(--tr-caption-1);
  color: var(--c-label-2) !important; text-align: right; /* the older layers tint the tag by strength with !important; the words already say it */
}
html.ds #device .film-v5 .why-panel .film-reason {
  margin: 0 0 var(--sp-3);
  font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: var(--tr-title-3); color: var(--c-label-1);
  text-wrap: balance;
}
/* the short match note (service note, or the Collection's reason) is set as a pull-quote */
html.ds #device .film-v5 .why-panel .film-reason[data-match-note] {
  position: relative; margin: 0 0 var(--sp-3); padding: 19px 0 0 0;
  font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: var(--tr-title-3);
  color: var(--c-label-1); text-wrap: balance; background: none !important; border: 0 !important;
}
/* No quotation mark (owner, 11 October 2026, hub/docs/TIDY-2026-10-13.md): the note is TRIPTIC's own words (a match
   note, a Collection's reason, "The film revealed by this Cryptic puzzle."), not a quotation, and a lone opening mark
   with no closing one read as a mistake. A short rule in the poster's colour marks the statement instead. Real
   quotations elsewhere are set as a matched pair in the copy itself. */
html.ds #device .film-v5 .why-panel .film-reason[data-match-note]::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 28px; height: 3px; border-radius: 999px;
  background: rgba(var(--ds-film-tint), .9);
}
@media (forced-colors: active) { html.ds #device .film-v5 .why-panel .film-reason[data-match-note]::before { background: CanvasText; } }
/* (P-JOURNEY) a companion's note is followed by where the pairing comes from, in the caption style, never louder */
html.ds #device .film-v5 .why-panel .film-reason[data-match-note] + .ds-why-source { margin: -4px 0 var(--sp-3); }
html.ds #device .film-v5 .why-panel .ds-why-source {
  margin: 0 0 var(--sp-3); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-3);
}
html.ds #device .film-v5 .why-panel.ds-from-collection { display: flex; flex-direction: column; }
html.ds #device .film-v5 .why-panel.ds-from-collection > div:first-child { order: 2; margin: 0 0 var(--sp-3); justify-content: flex-start; }
html.ds #device .film-v5 .why-panel.ds-from-collection > div:first-child > span { font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); }
html.ds #device .film-v5 .why-panel.ds-from-collection .film-reason[data-match-note] { order: 1; margin-bottom: var(--sp-2); }
/* the attributed evidence quote: caption, then body behind a thin rule, six lines then More */
html.ds #device .film-v5 .why-panel .film-reason.ds-why-evidence {
  margin: 0 0 6px; padding: 0 0 0 14px; border-left: 2px solid var(--c-line-strong);
  font: var(--fw-body) var(--fs-body)/var(--lh-prose) var(--font-ui); letter-spacing: var(--tr-body); color: var(--c-label-1); text-wrap: pretty;
}
html.ds #device .film-v5 .why-panel .film-reason.ds-why-evidence::before { content: none; }
html.ds #device .film-v5 .why-panel .ds-why-src {
  display: block; margin: 0 0 6px; font: var(--fw-caption) var(--fs-caption)/var(--lh-caption) var(--font-ui); letter-spacing: 0; color: var(--c-label-3);
}
html.ds #device .film-v5 .why-panel .ds-why-quote {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
  font: var(--fw-body) var(--fs-body)/var(--lh-prose) var(--font-ui); letter-spacing: var(--tr-body); color: var(--c-label-1);
}
html.ds #device .film-v5 .why-panel .ds-why-evidence.is-open .ds-why-quote { display: block; -webkit-line-clamp: unset; overflow: visible; }
html.ds #device .film-v5 .why-panel .ds-why-more {
  min-height: 44px; margin: 0 0 8px; padding: 0 0 0 16px; border: 0; background: none; color: var(--c-label-2);
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui);
}
html.ds #device .film-v5 .why-panel ul { list-style: none; margin: 0; padding: 0; }
html.ds #device .film-v5 .why-panel li {
  display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 11px 0;
  border-top: 1px solid var(--c-line);
  font: 400 var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-1);
}
html.ds #device .film-v5 .why-panel li > i {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -1px;
  border-radius: 50%; font-style: normal; font-size: calc(13 * var(--type-unit)); font-weight: 700;
  color: var(--c-ok); background: rgba(142, 232, 203, .12); border: 1px solid rgba(142, 232, 203, .3);
}
html.ds #device .film-v5 .why-panel li.ds-caution > i {
  color: var(--c-caution); background: rgba(240, 199, 134, .12); border-color: rgba(240, 199, 134, .3);
}
html.ds #device .film-v5 .why-panel li > span { min-width: 0; overflow-wrap: anywhere; }

/* "Did it suit your request?": the last row of the card above it (the row "See what's behind it" is on the Film DNA
   card): one hairline, a 52pt row, the question, "Optional" or "Answered", and a plus that opens it in place. */
html.ds #device .film-v5 .film-content > .request-fit {
  margin: 0 0 var(--section-gap) !important; padding: 0 var(--sp-4) !important;
  background: var(--c-fill-1) !important; border: 1px solid var(--c-line) !important; border-top: 0 !important;
  border-radius: 0 0 var(--r-card) var(--r-card) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.ds #device .film-v5 .film-content > .request-fit::before,
html.ds #device .film-v5 .film-content > .request-fit::after { content: none !important; }
html.ds #device .film-v5 .film-content > .request-fit > summary {
  min-height: var(--row-min) !important; padding: 0 !important; background: none !important; border: 0 !important; border-top: 1px solid var(--c-line) !important; box-shadow: none !important;
  font: var(--fw-body) var(--fs-headline)/var(--lh-headline) var(--font-ui) !important; letter-spacing: var(--tr-headline) !important; color: var(--c-label-1) !important;
}
html.ds #device .film-v5 .film-content > .request-fit > summary::after { margin-left: 0; }
html.ds #device .film-v5 .film-content > .request-fit > summary > span { flex: 1 1 auto; min-width: 0; }
html.ds #device .film-v5 .film-content > .request-fit > summary small { flex: none; margin-left: auto; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui) !important; color: var(--c-label-2) !important; }
html.ds #device .film-v5 .film-content > .request-fit > .request-fit-body { padding: 0 0 var(--sp-3) !important; border-top: 0 !important; }
html.ds #device .film-v5 .film-content > .request-fit .request-fit-body > p { margin: 0 0 var(--sp-3); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); }
html.ds #device .film-v5 .film-content > .request-fit .request-fit-body > .request-fit-occasion { color: var(--c-label-1); overflow-wrap: anywhere; }
html.ds #device .film-v5 .film-content > .request-fit .request-fit-body > .request-fit-receipt { margin: var(--sp-3) 0 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-3); }
html.ds #device .film-v5 .film-content > .request-fit .request-fit-edit .quiet-button { padding: 0; font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-1); }
/* inside the card the two answers share the row by the length of their words, so "Suited my request" keeps one line
   on a 375pt phone; they are set at the size of the three answers under "How was it?" */
html.ds #device .film-v5 .film-content > .request-fit .request-fit-choices { display: flex !important; gap: var(--sp-2) !important; }
html.ds #device .film-v5 .film-content > .request-fit .request-fit-choices > .request-fit-choice {
  flex: 1 1 auto; padding: 4px 10px !important; gap: 6px !important;
  font: var(--fw-subhead-strong) var(--fs-footnote)/var(--lh-caption-1) var(--font-ui) !important; letter-spacing: var(--tr-footnote) !important; text-wrap: balance;
}
html.ds #device .film-v5 .film-content > .request-fit .request-fit-choice[aria-pressed="true"] { font-weight: var(--fw-headline) !important; }

/* The two answers are buttons, not text ("put Suited my request and Not quite right in buttons so people know what to
   click"). The DS Quiet rule (text button, no fill) used to win over the legacy chip styling, so they read as copy.
   Now: two Glass pills side by side (fill-2 + 1px line), a thumb icon, 48pt tall, ds-core's press scale on touch, and
   the chosen answer (aria-pressed="true") takes the Lamp fill and a heavier thumb, so the selection is unmistakable.
   feedback-experience.js gives a saved answer a "detent" haptic through TRIPTIC_DS.feel. */
html.ds #device .request-fit .request-fit-choices {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 10px !important;
  margin: 4px 0 0 !important;
}
html.ds #device .request-fit .request-fit-choices > .request-fit-choice {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  min-width: 0 !important; min-height: 48px !important; margin: 0 !important; padding: 0 14px !important;
  border: 1px solid var(--c-line-strong) !important; border-radius: var(--r-pill) !important;
  background: var(--c-fill-2) !important; background-image: none !important; box-shadow: none !important;
  color: var(--c-label-1) !important; -webkit-text-fill-color: var(--c-label-1) !important;
  font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui) !important; letter-spacing: var(--tr-subhead) !important;
  text-align: center !important; white-space: normal !important;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color var(--motion-press) var(--motion-curve), border-color var(--motion-press) var(--motion-curve), color var(--motion-press) var(--motion-curve) !important;
}
html.ds #device .request-fit .request-fit-choice > .trip-ui-icon { flex: none; width: 20px; height: 20px; }
html.ds #device .request-fit .request-fit-choice > span { min-width: 0; }
html.ds #device .request-fit .request-fit-choice:active { background: var(--c-fill-press) !important; }
html.ds #device .request-fit .request-fit-choice[aria-pressed="true"] {
  background: var(--c-lamp) !important; border-color: var(--c-lamp) !important;
  color: var(--c-lamp-ink) !important; -webkit-text-fill-color: var(--c-lamp-ink) !important;
  font-weight: var(--fw-headline) !important;
}
html.ds #device .request-fit .request-fit-choice[aria-pressed="true"] > .trip-ui-icon { stroke-width: 2.1; }
html.ds #device .request-fit .request-fit-choice:focus-visible { outline: 2px solid var(--c-focus) !important; outline-offset: 3px !important; }
@media (forced-colors: active) {
  html.ds #device .request-fit .request-fit-choice { border-color: ButtonText !important; }
  html.ds #device .request-fit .request-fit-choice[aria-pressed="true"] { background: Highlight !important; color: HighlightText !important; -webkit-text-fill-color: HighlightText !important; }
}

/* --- "How was it?": the card Mark watched opens, straight under the row it was tapped in (it used to be added at
   the foot of a long page, where nothing said it had arrived). The same card as Why this matched; three answers as
   the glass pills "Did it suit your request?" uses; the chosen one takes the Lamp fill. */
html.ds #device .film-v5 .film-content > .film-reaction {
  margin: 0 0 var(--sp-4) !important; padding: var(--sp-4) var(--sp-4) 0 !important;
  background: var(--c-fill-1) !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-card) !important;
  box-shadow: var(--e-1) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.ds #device .film-v5 .film-reaction > :last-child:not(details) { margin-bottom: var(--sp-4); }
html.ds #device .film-v5 .film-reaction-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 var(--sp-3); }
html.ds #device .film-v5 .film-reaction h2 { margin: 0; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1); }
html.ds #device .film-v5 .film-reaction-heading > span {
  font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); text-transform: none; color: var(--c-label-2);
}
html.ds #device .film-v5 .film-reaction-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
html.ds #device .film-v5 .film-reaction-choices > button {
  box-sizing: border-box; min-width: 0; min-height: 48px; margin: 0; padding: 4px 6px;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-fill-2); box-shadow: none;
  color: var(--c-label-1); -webkit-text-fill-color: var(--c-label-1);
  font: var(--fw-subhead-strong) var(--fs-footnote)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-footnote); text-align: center; text-wrap: balance;
  transition: background-color var(--motion-press) var(--motion-curve), border-color var(--motion-press) var(--motion-curve), color var(--motion-press) var(--motion-curve);
}
html.ds #device .film-v5 .film-reaction-choices > button:active { background: var(--c-fill-press); }
html.ds #device .film-v5 .film-reaction-choices > button[aria-pressed="true"] {
  background: var(--c-lamp); border-color: var(--c-lamp); color: var(--c-lamp-ink); -webkit-text-fill-color: var(--c-lamp-ink);
  font-weight: var(--fw-headline); box-shadow: none;
}
html.ds #device .film-v5 .film-reaction p { margin: var(--sp-3) 0 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-2); }
html.ds #device .film-v5 .film-reaction > h2 + p { font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); margin-top: var(--sp-2); }
html.ds #device .film-v5 .film-reaction-edit { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); margin-top: var(--sp-1); }
html.ds #device .film-v5 .film-reaction .quiet-button { min-height: var(--target); padding: 0; font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-1); }
html.ds #device .film-v5 .film-reaction > details { margin: var(--sp-3) calc(-1 * var(--sp-4)) 0; padding: 0 var(--sp-4); border-top: 1px solid var(--c-line); color: var(--c-label-1); }
html.ds #device .film-v5 .film-reaction > details > summary {
  min-height: var(--row-min); font: var(--fw-body) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1);
}
html.ds #device .film-v5 .film-reaction > details > p { margin: 0 0 var(--sp-4); }
html.ds #device .film-v5 .film-reaction-edit:not(:empty) + details { margin-top: var(--sp-1); }
@media (forced-colors: active) {
  html.ds #device .film-v5 .film-reaction-choices > button { border-color: ButtonText; }
  html.ds #device .film-v5 .film-reaction-choices > button[aria-pressed="true"] { background: Highlight; color: HighlightText; -webkit-text-fill-color: HighlightText; }
}
/* it arrives: the card opens downwards out of the row and the page makes room (feedback-experience.js adds the class
   only when a tap made the card, never when the page is drawn with it already there) */
html.ds #device .film-v5 .film-reaction.is-arriving { animation: ds-film-reaction-in var(--motion-normal) var(--motion-spring) both; transform-origin: 50% 0; }
@keyframes ds-film-reaction-in { from { opacity: 0; translate: 0 -10px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@media (prefers-reduced-motion: reduce) { html.ds #device .film-v5 .film-reaction.is-arriving { animation: none; } }
html.ds #device.manual-reduced-motion .film-v5 .film-reaction.is-arriving,
html.ds[data-motion-tier="reduced"] #device .film-v5 .film-reaction.is-arriving { animation: none; }
/* [film-actions:start] */
/* ====================================================================================================================
   FILM PAGE ACTIONS (7 October 2026; prototype-src/film-actions.js over film-state.js)
   Four actions, one state per film, visible at a glance:
     Watchlist (the bookmark fills) · Seen it -> Loved it / Liked it / Not for me · Share · Not interested (drawn solid).
   The bar itself is "THE ACTION BAR" above (8 October 2026). An action that cannot apply (a seen film is not waiting;
   an unreleased film cannot have been seen) is dimmed and says why when touched. Below: the cards the bar opens.
   ==================================================================================================================== */
html.ds #device .film-v5 .film-content > .film-pass { order: 6; }
html.ds #device .film-v5 .film-content > .film-connection { order: 7; }

/* --- Seen it: the one question, in place. Three answers as tiles (a small mark over the words, so "Not for me" fits a
   third of the card at any text size); the chosen one takes the Lamp fill. Under them, one line: what that answer
   changed in Film DNA. Under that, an empty place the film-cards layer may fill. */
html.ds #device .film-v5 .film-seen .film-reaction-choices > button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 64px; padding: 9px 4px 8px; border-radius: var(--r-row);
}
html.ds #device .film-v5 .film-seen .film-reaction-choices > button > svg { flex: none; width: 22px; height: 22px; color: currentColor; filter: none; }
html.ds #device .film-v5 .film-seen .film-reaction-choices > button > span { display: block; max-width: 100%; }
html.ds #device .film-v5 .film-seen .film-reaction-choices > button[aria-pressed="true"] > svg :is(path) { fill: currentColor; fill-opacity: .18; }
html.ds #device .film-v5 .film-seen .film-seen-line { margin: var(--sp-3) 0 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-2); text-wrap: pretty; }
html.ds #device .film-v5 .film-seen .film-seen-line.is-confirming { font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1); }
html.ds #device .film-v5 .film-seen .film-seen-line[hidden] { display: none; }
html.ds #device .film-v5 .film-seen [data-film-card-slot] { margin: var(--sp-3) 0 0; }
html.ds #device .film-v5 .film-seen [data-film-card-slot]:empty { display: none; }
html.ds #device .film-v5 .film-seen .film-reaction-edit:empty { display: none; }
html.ds #device .film-v5 .film-seen .film-reaction-edit .quiet-button { color: var(--c-label-2); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); }
html.ds #device .film-v5 .film-seen > :last-child { margin-bottom: var(--sp-4); }
html.ds #device .film-v5 .film-seen > .film-reaction-edit:last-child { margin-bottom: var(--sp-1); }

/* --- Not interested: said at once; a quick why where the film came from Friday 3 or a search; Undo always there. */
html.ds #device .film-v5 .film-content > .film-pass {
  margin: 0 0 var(--sp-4) !important; padding: var(--sp-4) var(--sp-4) var(--sp-1) !important;
  background: var(--c-fill-1) !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-card) !important;
  box-shadow: var(--e-1) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.ds #device.manual-solid .film-v5 .film-content > .film-pass { background: var(--c-stage-raised) !important; }
html.ds #device .film-v5 .film-pass-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
html.ds #device .film-v5 .film-pass-head > strong { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1); }
html.ds #device .film-v5 .film-pass-head > span { font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--c-label-2); }
html.ds #device .film-v5 .film-pass-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
html.ds #device .film-v5 .film-pass-choices > button {
  box-sizing: border-box; min-width: 0; min-height: 48px; margin: 0; padding: 4px 8px;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-fill-2); box-shadow: none;
  color: var(--c-label-1); -webkit-text-fill-color: var(--c-label-1);
  font: var(--fw-subhead-strong) var(--fs-footnote)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-footnote); text-align: center; text-wrap: balance;
  transition: background-color var(--motion-press) var(--motion-curve);
}
html.ds #device .film-v5 .film-pass-choices > button:active { background: var(--c-fill-press); }
html.ds #device .film-v5 .film-pass-line { margin: var(--sp-3) 0 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); text-wrap: pretty; }
html.ds #device .film-v5 .film-pass-line:empty { display: none; }
html.ds #device .film-v5 .film-pass .quiet-button { min-height: var(--target); padding: 0; font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-1); }
html.ds #device .film-v5 .film-pass.is-arriving { animation: ds-film-reaction-in var(--motion-normal) var(--motion-spring) both; transform-origin: 50% 0; }
@media (prefers-reduced-motion: reduce) { html.ds #device .film-v5 .film-pass.is-arriving { animation: none; } }
html.ds #device.manual-reduced-motion .film-v5 .film-pass.is-arriving,
html.ds[data-motion-tier="reduced"] #device .film-v5 .film-pass.is-arriving { animation: none; }
@media (forced-colors: active) { html.ds #device .film-v5 .film-pass-choices > button { border-color: ButtonText; } }

/* --- The answers the bar asks for (8 October 2026): "How was it?" and "Not interested. Why?" are parts of the action
   bar, so their answers are the bar again: one capsule of the same glass (the tab bar's --dock-* tokens), an icon over
   a word, and the same lens, violet and solid glyph for the answer that is chosen. They were three pale tiles whose
   chosen one turned cream, and two grey pills: a different app from the bar they opened under. Nothing they do or say
   has changed. The capsule lies on the page's own card, with nothing moving behind it, so it carries no backdrop
   filter. The words are Footnote Medium and grow with the text size in full: three words have a card's width to share. */
html.ds #device .film-v5 .film-seen .film-reaction-choices,
html.ds #device .film-v5 .film-pass .film-pass-choices {
  --fa-pad: var(--dock-pad, 4px);
  position: relative; z-index: 0; box-sizing: border-box; display: grid; gap: 0; align-items: stretch;
  padding: var(--fa-pad); border: 0; border-radius: var(--r-pill); overflow: hidden;
  background: none; box-shadow: 0 6px 16px rgb(0 0 0 / .26), 0 0 0 .5px rgb(0 0 0 / .5);
}
html.ds #device .film-v5 .film-seen .film-reaction-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.ds #device .film-v5 .film-pass .film-pass-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--sp-3); }
html.ds #device .film-v5 .film-seen .film-reaction-choices::before,
html.ds #device .film-v5 .film-pass .film-pass-choices::before {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
  background: var(--dock-specular), linear-gradient(var(--dock-solid-lo, rgb(27 26 34)), var(--dock-solid-lo, rgb(27 26 34)));
}
html.ds #device .film-v5 .film-seen .film-reaction-choices::after,
html.ds #device .film-v5 .film-pass .film-pass-choices::after {
  content: ""; position: absolute; inset: var(--dock-rim, 1px); z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--dock-solid-hi, rgb(44 42 54)), var(--dock-solid-lo, rgb(27 26 34)));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), inset 0 -1px 0 rgb(0 0 0 / .3);
}
html.ds #device .film-v5 .film-seen .film-reaction-choices > button,
html.ds #device .film-v5 .film-pass .film-pass-choices > button {
  position: relative; z-index: 1; isolation: isolate; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; min-height: 56px; margin: 0; padding: 7px 6px 8px;
  background: none !important; border: 0; border-radius: var(--r-pill); box-shadow: none;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: rgb(var(--dock-ink, 245 244 247)); -webkit-text-fill-color: currentColor;
  font: 500 var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); text-align: center; text-wrap: balance;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: none;
}
html.ds #device .film-v5 .film-pass .film-pass-choices > button { min-height: 44px; padding: 6px 10px; }
html.ds #device .film-v5 .film-seen .film-reaction-choices > button > svg { flex: none; width: 24px; height: 24px; color: currentColor; stroke-width: 1.8; filter: none; }
html.ds #device .film-v5 .film-seen .film-reaction-choices > button > svg * { vector-effect: none; }
html.ds #device .film-v5 .film-seen .film-reaction-choices > button > span { display: block; max-width: 100%; font: inherit; color: currentColor; }
/* the chosen answer: the lens, the violet light under it, the glyph drawn solid */
html.ds #device .film-v5 .film-seen .film-reaction-choices > button::before,
html.ds #device .film-v5 .film-pass .film-pass-choices > button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-pill); pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--dock-sheen, 255 255 255) / var(--dock-sheen-top, .13)), rgb(var(--dock-sheen, 255 255 255) / var(--dock-sheen-mid, .11)) 50%, rgb(var(--dock-sheen, 255 255 255) / var(--dock-sheen-low, .09))),
    linear-gradient(rgb(10 9 16 / .3), rgb(10 9 16 / .3));
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .16), inset 0 1px 0 rgb(255 255 255 / .26), 0 3px 10px rgb(0 0 0 / .3), 0 1px 2px rgb(0 0 0 / .22);
  opacity: 0; scale: .9;
  transition: opacity var(--motion-fast) var(--motion-curve), scale var(--motion-normal) var(--motion-spring);
}
html.ds #device .film-v5 .film-seen .film-reaction-choices > button::after {
  content: ""; position: absolute; inset: calc(-1 * var(--fa-pad)) 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 30px 7px at 50% calc(100% - 3px), rgb(var(--dock-bloom, 139 92 246) / var(--dock-bloom-core, .36)), rgb(var(--dock-bloom, 139 92 246) / 0) 100%),
    radial-gradient(ellipse 50% 34px at 50% calc(100% - 3px), rgb(var(--dock-bloom, 139 92 246) / var(--dock-bloom-halo, .2)), rgb(var(--dock-bloom, 139 92 246) / 0) 100%);
  opacity: 0; transition: opacity var(--motion-fast) var(--motion-curve);
}
html.ds #device .film-v5 .film-seen .film-reaction-choices > button[aria-pressed="true"] {
  background: none !important; border-color: transparent; color: rgb(var(--dock-accent, 196 178 255)); -webkit-text-fill-color: currentColor; font-weight: 500;
}
html.ds #device .film-v5 .film-seen .film-reaction-choices > button[aria-pressed="true"]::before { opacity: 1; scale: 1; }
html.ds #device .film-v5 .film-seen .film-reaction-choices > button[aria-pressed="true"]::after { opacity: 1; }
html.ds #device .film-v5 .film-seen .film-reaction-choices > button[aria-pressed="true"] > svg path { fill: currentColor; fill-opacity: 1; }
/* under the finger: it catches the light, as an action in the bar does (ds-core's press dips it) */
html.ds #device .film-v5 .film-seen .film-reaction-choices > button:is(.ds-pressed, :active),
html.ds #device .film-v5 .film-pass .film-pass-choices > button:is(.ds-pressed, :active) { background: none !important; box-shadow: inset 0 0 0 999px rgb(255 255 255 / .07) !important; }
html.ds #device .film-v5 .film-seen .film-reaction-choices > button[aria-pressed="true"]:is(.ds-pressed, :active) { box-shadow: none !important; }
html.ds #device .film-v5 .film-seen .film-reaction-choices > button:focus-visible,
html.ds #device .film-v5 .film-pass .film-pass-choices > button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
  html.ds #device .film-v5 .film-seen .film-reaction-choices > button::before { scale: 1; transition: opacity var(--motion-fast) var(--motion-curve); }
}
html.ds.reduce-motion #device .film-v5 .film-seen .film-reaction-choices > button::before,
html.ds #device.manual-reduced-motion .film-v5 .film-seen .film-reaction-choices > button::before,
html.ds[data-motion-tier="reduced"] #device .film-v5 .film-seen .film-reaction-choices > button::before { scale: 1; transition: opacity var(--motion-fast) var(--motion-curve); }
@media (forced-colors: active) {
  html.ds #device .film-v5 .film-seen .film-reaction-choices,
  html.ds #device .film-v5 .film-pass .film-pass-choices { border: 1px solid ButtonText; }
  html.ds #device .film-v5 .film-seen .film-reaction-choices > button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -3px; color: ButtonText; }
}

/* --- Shares a connection: one quiet row, small posters and a few words. Only ever drawn from films the person
   loved or liked; absent when there is nothing true to say. */
html.ds #device .film-v5 .film-content > .film-connection { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-6); padding: 0 2px; }
html.ds #device .film-v5 .film-connection-posters { display: flex; flex: none; padding-left: 10px; }
html.ds #device .film-v5 .film-connection-poster {
  box-sizing: border-box; width: 34px; height: 51px; margin-left: -10px; border-radius: var(--r-chip); overflow: hidden;
  background: var(--c-stage-raised); border: 1px solid var(--c-line-strong); box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
}
html.ds #device .film-v5 .film-connection-poster:nth-child(2) { rotate: 3deg; }
html.ds #device .film-v5 .film-connection-poster:nth-child(3) { rotate: 6deg; }
html.ds #device .film-v5 .film-connection-poster > img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.ds #device .film-v5 .film-connection > p { min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
html.ds #device .film-v5 .film-connection > p > small { font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--c-label-3); }
html.ds #device .film-v5 .film-connection > p > span { font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1); text-wrap: pretty; }
html.ds #device .film-v5 button.film-connection-poster { appearance: none; padding: 0; color: inherit; font: inherit; cursor: pointer; }
html.ds #device .film-v5 .film-connection-title { appearance: none; display: inline; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
html.ds #device .film-v5 .film-connection-title:active { opacity: .6; }
/* --- What next (14 October 2026; hub/docs/AFTER-2026-10-14.md): the small card that opens straight under the rating card,
   just after a rating and only then. One line about taste, "Because of that:" with one film, and "Three more". It arrives
   once, as the rating card does (opacity, translate and scale: the compositor's properties only). The same markup stands
   inside Flick's "Intermission's over" card (return-delights.css), so the inner rules do not depend on the film page. */
html.ds #device .film-v5 .film-content > .film-next { order: 6; }
html.ds #device .film-v5 .film-content > .film-next {
  margin: 0 0 var(--sp-4) !important; padding: var(--sp-4) var(--sp-4) 0 !important;
  background: var(--c-fill-1) !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-card) !important;
  box-shadow: var(--e-1) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.ds #device.manual-solid .film-v5 .film-content > .film-next { background: var(--c-stage-raised) !important; }
html.ds .film-next-taste { margin: 0 0 var(--sp-3); color: var(--c-label-1); text-wrap: pretty; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); }
html.ds .film-next-pick { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; }
html.ds .film-next-lead { font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--c-label-3); }
html.ds .film-next-film {
  appearance: none; display: flex; align-items: center; gap: var(--sp-3); box-sizing: border-box; width: 100%; min-height: var(--target); margin: 0; padding: var(--sp-1) 0;
  border: 0; border-radius: var(--r-control); background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent;
}
html.ds .film-next-film:active, html.ds .film-next-more:active { background: var(--c-fill-press, var(--c-fill-2)); }
html.ds .film-next-film:focus-visible, html.ds .film-next-more:focus-visible { outline: 2px solid var(--c-focus, var(--c-label-1)); outline-offset: 2px; }
html.ds .film-next-poster {
  flex: none; box-sizing: border-box; width: 40px; height: 60px; border-radius: var(--r-chip); overflow: hidden;
  background: var(--c-stage-raised); border: 1px solid var(--c-line-strong); box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
}
html.ds .film-next-poster > img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.ds .film-next-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.ds .film-next-copy > strong { font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1); overflow-wrap: anywhere; }
html.ds .film-next-copy > strong > em { font-style: normal; font-weight: var(--fw-subhead); color: var(--c-label-3); }
html.ds .film-next-copy > span { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-2); text-wrap: pretty; overflow-wrap: anywhere; }
/* the list chevron: both rows leave this card for another page */
html.ds .film-next-film::after, html.ds .film-next-more::after {
  content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 0 auto; border: solid var(--c-label-3); border-width: 2px 2px 0 0; rotate: 45deg;
}
html.ds .film-next-more {
  appearance: none; display: flex; align-items: center; box-sizing: border-box; width: 100%; min-height: var(--target); margin: var(--sp-1) 0 0; padding: 0;
  border: 0; border-top: 1px solid var(--c-line); border-radius: 0; background: none; color: var(--c-label-1); text-align: left; cursor: pointer;
  font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); -webkit-tap-highlight-color: transparent;
}
html.ds #device .film-v5 .film-next .film-next-more { width: calc(100% + var(--sp-4) * 2); margin: var(--sp-2) calc(-1 * var(--sp-4)) 0; padding: 0 calc(var(--sp-4) + 4px) 0 var(--sp-4); }
html.ds #device .film-v5 .film-next .film-next-more:active { border-radius: 0 0 var(--r-card) var(--r-card); }
html.ds #device .film-v5 .film-next.is-arriving { animation: ds-film-reaction-in var(--motion-normal) var(--motion-spring) both; transform-origin: 50% 0; }
@media (prefers-reduced-motion: reduce) { html.ds #device .film-v5 .film-next.is-arriving { animation: none; } }
html.ds #device.manual-reduced-motion .film-v5 .film-next.is-arriving,
html.ds[data-motion-tier="reduced"] #device .film-v5 .film-next.is-arriving { animation: none; }
/* the largest text: a smaller poster, so the film's name and reason keep the room */
html.ds[data-text-size="largest"] .film-next-poster { width: 32px; height: 48px; }
@media (forced-colors: active) { html.ds #device .film-v5 .film-content > .film-next { border: 1px solid ButtonText !important; } html.ds .film-next-film::after, html.ds .film-next-more::after { border-color: ButtonText; } }
/* [film-actions:end] */

/* --- section titles: Title 3 with a footnote line */
html.ds #device .film-v5 .watch-options > header > div > span,
html.ds #device .film-v5 .cast-section > header > span,
html.ds #device .film-v5 .spoiler-safe > .ds-section-head > span {
  display: block; margin: 0;
  font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: var(--tr-title-3);
  color: var(--c-label-1); text-transform: none;
}
html.ds #device .film-v5 .watch-options > header > div > small,
html.ds #device .film-v5 .cast-section > header > small,
html.ds #device .film-v5 .spoiler-safe > .ds-section-head > small {
  display: block; margin-top: 2px;
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3);
}
html.ds #device .film-v5 .cast-section > header,
html.ds #device .film-v5 .spoiler-safe > .ds-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 0;
}

/* --- Where to watch: title, a small "Your platforms" control, then one calm status line or the listings */
html.ds #device .film-v5 .watch-options.media-watch-options {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 0;
  margin: 0 0 var(--section-gap) !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
}
html.ds #device .film-v5 .watch-options > header { grid-column: 1; grid-row: 1; margin: 0; padding: 0; display: block; }
html.ds #device .film-v5 .watch-options .edit-film-platforms {
  grid-column: 2; grid-row: 1; align-self: center; justify-self: end;
  width: auto !important; height: 44px !important; min-height: 44px !important; margin: 0 -10px 0 0 !important; padding: 0 10px !important;
  display: inline-flex !important; align-items: center; gap: 4px; white-space: nowrap;
  font: 500 var(--fs-subhead)/var(--lh-subhead) var(--font-ui) !important;
  font-size: var(--fs-subhead) !important; /* #device .media-watch-options > .edit-film-platforms sets 14px !important */
  color: var(--c-label-2) !important; background: none !important; border: 0 !important; border-radius: var(--r-pill) !important; box-shadow: none !important;
}
html.ds #device .film-v5 .watch-options .edit-film-platforms::after { content: "\203A"; color: var(--c-label-3); font-size: var(--fs-headline); line-height: 1; margin-top: -2px; }
html.ds #device .film-v5 .watch-options .edit-film-platforms:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
html.ds #device .film-v5 .watch-options .provider-trust-note {
  grid-column: 1 / -1; margin: 8px 0 0; max-width: none;
  font: var(--fw-caption) var(--fs-caption)/var(--lh-caption) var(--font-ui); color: var(--c-label-3);
}
/* the first note is the status line */
html.ds #device .film-v5 .watch-options > header + .provider-trust-note {
  display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 0; min-height: 0;
  font: 400 var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2);
  background: none; border: 0; border-radius: 0;
}
html.ds #device .film-v5 .watch-options > header + .provider-trust-note::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-label-3);
}
/* a film not yet in UK cinemas: when it opens (ds-film-share.js decorateRelease, wording from ds-coming-soon.js) */
html.ds #device .film-v5 .watch-options > .ds-watch-release {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 0;
  font: 600 var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1);
}
html.ds #device .film-v5 .watch-options > .ds-watch-release::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-lamp); }
html.ds #device .film-v5 .watch-options.ds-watch-error > header + .provider-trust-note::before { background: var(--c-caution); }
html.ds #device .film-v5 .watch-options.ds-watch-pending > header + .provider-trust-note::before { background: var(--c-beam); }
html.ds #device .film-v5 .watch-options.ds-watch-listed > header + .provider-trust-note::before { background: var(--c-ok); }
html.ds #device .film-v5 .watch-options .provider-grid {
  grid-column: 1 / -1; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; margin: 12px 0 0;
  background: var(--c-fill-1); border: 1px solid var(--c-line); border-radius: var(--r-row); overflow: hidden;
}
html.ds #device .film-v5 .watch-options .provider-destination {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 16px; margin: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; text-decoration: none; color: var(--c-label-1);
}
html.ds #device .film-v5 .watch-options .provider-destination + .provider-destination { border-top: 1px solid var(--c-line); }
html.ds #device .film-v5 .watch-options .provider-destination strong { display: block; font: 600 var(--fs-headline)/var(--lh-headline) var(--font-ui); }
html.ds #device .film-v5 .watch-options .provider-destination small { display: block; margin-top: 2px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }
html.ds #device .film-v5 .watch-options .provider-all-link { grid-column: 1 / -1; display: inline-flex; align-items: center; min-height: 44px; margin: 4px 0 0; color: var(--c-label-1); font: 500 var(--fs-subhead)/var(--lh-subhead) var(--font-ui); text-decoration: none; }
html.ds #device .film-v5 .ds-provider-logo {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden;
  border-radius: var(--r-control); background: var(--c-fill-2); border: 1px solid var(--c-line);
}
html.ds #device .film-v5 .ds-provider-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
html.ds #device .film-v5 .ds-provider-logo.is-light { background: var(--c-lamp); }
html.ds #device .film-v5 .ds-provider-logo b { font: var(--fw-headline) var(--fs-headline)/1 var(--font-ui); color: var(--c-label-1); }

/* --- Where to watch, listed: the providers' real logos as app icons (TMDB logo_path), five across on a phone, your own
   platforms first with a thin violet ring and a check; each icon opens that provider (provider-links.js). One quiet line
   below carries the checked date, the JustWatch credit and the full TMDB list. */
html.ds #device .film-v5 .watch-options .watch-logos {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 14px 6px;
  margin: 16px 0 0; padding: 0; list-style: none;
}
html.ds #device .film-v5 .watch-logo { min-width: 0; margin: 0; padding: 0; }
html.ds #device .film-v5 .watch-logo > :is(a, span) {
  display: grid; justify-items: center; align-content: start; gap: 7px; min-height: 44px; padding: 2px 0 0; color: var(--c-label-2); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
html.ds #device .film-v5 .watch-logo-icon {
  position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-row); overflow: visible;
  background: var(--c-fill-2); box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 0 0 .5px rgba(255, 255, 255, .16);
  transition: scale var(--motion-fast) var(--motion-curve);
}
html.ds #device .film-v5 .watch-logo-icon img { display: block; width: 100%; height: 100%; border-radius: var(--r-row); object-fit: cover; }
html.ds #device .film-v5 .watch-logo-icon::after { /* a fine glass edge over the logo, like an app icon on the Home Screen */
  content: ""; position: absolute; inset: 0; border-radius: var(--r-row); pointer-events: none; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
}
html.ds #device .film-v5 .watch-logo-icon b { font: var(--fw-title-3) var(--fs-title-3)/1 var(--font-ui); color: var(--c-label-1); }
html.ds #device .film-v5 .watch-logo-name {
  max-width: calc(100% + 6px); margin-inline: -3px; /* a one-word name ("Paramount+") may use the gap rather than break */
  text-align: center; font: 500 var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); color: var(--c-label-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word;
}
/* A logo is laid over its own initial, so one that fails to load leaves the letter, never a broken image. A service
   with no logo in the listing is its name on a tile in its own colours (streaming-preferences.js). */
html.ds #device .film-v5 .watch-logo-icon > b + img { position: absolute; inset: 0; }
html.ds #device .film-v5 .watch-logo-icon > .streaming-wordmark {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--r-row);
  font: 700 var(--fs-footnote)/1 var(--font-ui); letter-spacing: 0; white-space: nowrap;
}
html.ds #device .film-v5 .watch-logo-icon > .streaming-live-logo { position: absolute; inset: 0; width: 100%; height: 100%; translate: none; }
/* Free services (BBC iPlayer, ITVX, Channel 4 ...): one small green tag under the name, "Free" or "Free · ads". A
   subscription carries none, and rent or buy offers are never listed, so the three can never be mistaken for each other. */
html.ds #device .film-v5 .watch-logo-tag {
  justify-self: center; margin-top: -5px; white-space: nowrap; /* plain green words: five tiles across leave no room for a pill each */
  font: 600 var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-caption-2);
  color: var(--c-ok);
}
html.ds #device .film-v5 .watch-logo.is-mine .watch-logo-icon { box-shadow: 0 4px 12px rgba(0, 0, 0, .35), 0 0 0 2px var(--c-stage), 0 0 0 3.5px var(--c-seal-hi); }
html.ds #device .film-v5 .watch-logo.is-mine .watch-logo-icon::before { /* the check: small, top-right, on the ring */
  content: ""; position: absolute; z-index: 1; right: -6px; top: -6px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-seal-hi) center / 11px 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.6l4.6-5.2' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 2px var(--c-stage);
}
html.ds #device .film-v5 .watch-logo.is-mine .watch-logo-name { color: var(--c-label-1); }
html.ds #device .film-v5 .watch-logo > a.ds-pressed { scale: 1 !important; box-shadow: none !important; } /* the icon answers, not the cell */
html.ds #device .film-v5 .watch-logo > a:is(.ds-pressed, :active) .watch-logo-icon { scale: .9; transition-duration: var(--motion-press); }
html.ds #device .film-v5 .watch-logo > a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-control); }
html.ds #device .film-v5 .watch-options .watch-meta {
  grid-column: 1 / -1; margin: 16px 0 0; font: 400 var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); color: var(--c-label-3);
}
html.ds #device .film-v5 .watch-options .watch-meta .watch-all-link {
  display: inline-flex; min-height: 0; margin: 0; padding: 12px 0; font: inherit; color: var(--c-label-2); text-decoration: none;
}
/* the TV licence note keeps its own line: beside a tappable link it would wrap, a tall line apart, on a 375pt phone */
html.ds #device .film-v5 .watch-options .watch-meta .watch-licence { display: block; margin-top: -6px; }
html.ds #device .film-v5 .watch-options .watch-meta .watch-licence-dot { display: none; }
html.ds #device .film-v5 .watch-options .watch-ranking-note { display: none; } /* said once in Your platforms; not repeated under every film */

/* --- Trailer: 16:9 poster art under the violet wash, one Liquid Glass play button, a corner link.
   The panel is 16:9 AT THE WIDTH ITS PAGE GIVES IT, and nothing caps its height (7 October 2026). It used to carry
   max-height: 210px, which a phone up to 402pt wide never reaches (its panel is at most 204pt tall). On a wider
   screen (a 430 or 440pt phone, either display of an iPhone Duo) the cap bit, and a box with an aspect ratio cannot be both
   16:9 and its full width once its height is capped: an engine either keeps the width and breaks the ratio (a 640 x 210
   strip on the Duo's inner display) or keeps the ratio and narrows the box (373 x 210, set against the left edge).
   The owner saw the second on a Duo. The playing box (.trailer-player-shell) never had the cap, so the picture also
   jumped size when Play was pressed. */
html.ds #device .film-v5 .media-trailer:not(.is-playing) {
  position: relative; width: auto; aspect-ratio: 16 / 9; height: auto; min-height: 0; max-height: none; padding: 0; overflow: hidden;
  border-radius: var(--r-card); border: 0; box-shadow: var(--e-2), inset 0 0 0 1px rgba(255, 255, 255, .08);
  isolation: isolate;
}
html.ds #device .film-v5 .media-trailer.is-ready:not(.is-playing) .media-trailer-scrim {
  background:
    radial-gradient(90% 120% at 50% 50%, transparent 30%, rgba(5, 5, 7, .45) 100%),
    linear-gradient(160deg, rgba(139, 92, 246, .46), rgba(76, 42, 160, .30) 55%, rgba(5, 5, 7, .55)) !important;
  opacity: 1 !important;
}
/* the caption is read by assistive tech (it states the privacy behaviour) but not printed */
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-copy {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play {
  position: absolute; left: 50%; top: 50%; right: auto; bottom: auto; z-index: 3;
  width: 68px !important; height: 68px !important; min-width: 68px; min-height: 68px !important; margin: -34px 0 0 -34px !important; padding: 0 !important;
  transform: none !important;
  display: grid !important; place-items: center; overflow: hidden;
  border-radius: 50% !important; border: 0 !important; color: var(--c-label-1);
  background:
    radial-gradient(70% 46% at 34% 16%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 100%),
    radial-gradient(90% 50% at 60% 104%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .10)) !important;
  -webkit-backdrop-filter: blur(6px) saturate(120%) brightness(1.32); backdrop-filter: blur(6px) saturate(120%) brightness(1.32);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .7),
    inset 0 0 14px rgba(255, 255, 255, .22),
    inset 0 0 0 .5px rgba(255, 255, 255, .4),
    0 12px 32px rgba(0, 0, 0, .30),
    0 2px 6px rgba(0, 0, 0, .18) !important;
  transition: scale var(--motion-fast) var(--motion-spring);
}
/* specular rim: a thin bright arc across the top-left edge */
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from 200deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .12) 18%, rgba(255, 255, 255, .04) 42%, rgba(255, 255, 255, .5) 62%, rgba(255, 255, 255, .12) 82%, rgba(255, 255, 255, .9));
  -webkit-mask: linear-gradient(rgb(0, 0, 0) 0 0) content-box, linear-gradient(rgb(0, 0, 0) 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(rgb(0, 0, 0) 0 0) content-box exclude, linear-gradient(rgb(0, 0, 0) 0 0);
}
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play::after { content: none !important; }
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play > i {
  position: static !important; display: block !important; width: 22px !important; height: 24px !important; margin: 0 0 0 5px !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important;
  background: var(--c-label-1) !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
  clip-path: polygon(8% 4%, 96% 50%, 8% 96%);
}
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play > i::before,
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play > i::after { content: none !important; }
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play > span {
  position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important;
}
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play:active { scale: .93; }
/* Pressed: the glass is pushed IN. Scale .92 (fast, 90ms), the drop shadow collapses into a deep inner shade, the glass
   darkens (less brightness through it), the top highlight slides down-right and dims, and the rim's specular arc turns 40deg as
   if the light caught a tilted lens. ds-film-share.js holds this state for at least 130ms after a real tap so a quick tap is
   seen, then the player opens by expanding out of the button (.trailer-player-host clip, below). */
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play:is(.ds-pressed, .ds-press-hold) {
  scale: .92 !important; transition: scale var(--motion-press) var(--motion-curve) !important;
  background:
    radial-gradient(64% 40% at 46% 30%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 100%),
    radial-gradient(90% 50% at 60% 104%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, rgba(18, 12, 38, .34), rgba(255, 255, 255, .06)) !important;
  -webkit-backdrop-filter: blur(6px) saturate(115%) brightness(.86); backdrop-filter: blur(6px) saturate(115%) brightness(.86);
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, .42),
    inset 0 -1px 0 rgba(255, 255, 255, .3),
    inset 0 0 0 .5px rgba(255, 255, 255, .34),
    0 3px 10px rgba(0, 0, 0, .26),
    0 1px 2px rgba(0, 0, 0, .2) !important;
}
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play::before { transition: rotate var(--motion-fast) var(--motion-curve), opacity var(--motion-fast) var(--motion-curve); }
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play:is(.ds-pressed, .ds-press-hold)::before { rotate: 40deg; opacity: .55; transition-duration: var(--motion-press); }
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play:is(.ds-pressed, .ds-press-hold) > i { scale: .94; opacity: .86; }
/* Released: the key springs back up past flush and settles (ds-film-share.js adds .ds-press-release for 170ms, then the
   player grows out of the button). The glass returns to its resting light at once so the rebound reads as a release. */
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play.ds-press-release { animation: ds-play-release var(--motion-fast) var(--motion-curve) both; }
@keyframes ds-play-release { 0% { scale: .92; } 62% { scale: 1.06; } 100% { scale: 1; } }
html.ds #device .film-v5 .media-trailer.is-ready:not(.is-playing) .media-trailer-external { border-radius: var(--r-pill); transition: scale var(--motion-fast) var(--motion-curve), background-color var(--motion-fast) linear; }
html.ds #device .film-v5 .media-trailer.is-ready:not(.is-playing) .media-trailer-external:is(.ds-pressed, :active) {
  scale: .93 !important; transition-duration: var(--motion-press) !important;
  background: rgba(5, 5, 7, .34) !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .36), inset 0 0 0 .5px rgba(255, 255, 255, .18) !important; opacity: 1;
}
/* the player opens out of the play button: a circle the button's size grows to the whole 16:9 box */
html.ds #device .film-v5 .media-trailer.trailer-player-shell.ds-from-press .trailer-player-host { animation: ds-trailer-open var(--motion-slow) var(--motion-spring) both; }
@keyframes ds-trailer-open { from { clip-path: circle(31px at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@media (prefers-reduced-motion: reduce) {
  html.ds #device .film-v5 .media-trailer.trailer-player-shell.ds-from-press .trailer-player-host { animation: none; }
}
html.ds #device.manual-reduced-motion .film-v5 .media-trailer.trailer-player-shell.ds-from-press .trailer-player-host { animation: none; }
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
html.ds #device.manual-solid .film-v5 .media-trailer:not(.is-playing) .media-trailer-play { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--c-stage-raised) !important; }
html.ds #device .film-v5 .media-trailer.is-ready:not(.is-playing) .media-trailer-external {
  position: absolute; top: auto; left: auto; right: 6px; bottom: 4px; z-index: 3;
  min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  margin: 0; padding: 0 10px; background: none !important; border: 0 !important; box-shadow: none !important;
  font: 500 var(--fs-caption)/var(--lh-caption) var(--font-ui) !important; color: var(--c-label-1) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5); text-decoration: none; opacity: .86;
}
html.ds #device .film-v5 .media-trailer.is-ready:not(.is-playing) .media-trailer-external i { font-style: normal; color: inherit !important; opacity: .8; }
/* no identified trailer: one quiet row, never an empty frame */
html.ds #device .film-v5 .media-trailer.media-trailer-unavailable:not(.is-playing) {
  aspect-ratio: auto; max-height: none; height: auto !important; min-height: 0 !important;
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px;
  padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; overflow: visible;
  text-align: left;
}
html.ds #device .film-v5 .media-trailer.media-trailer-unavailable .media-trailer-art,
html.ds #device .film-v5 .media-trailer.media-trailer-unavailable .media-trailer-scrim { display: none; }
html.ds #device .film-v5 .media-trailer.media-trailer-unavailable::before {
  content: "Trailer"; position: static !important; display: block; flex: 1 1 auto; inset: auto; width: auto; height: auto; margin: 0; padding: 0;
  background: none; border: 0; opacity: 1; transform: none; text-align: left;
  font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: var(--tr-title-3); color: var(--c-label-1);
}
html.ds #device .film-v5 .media-trailer.media-trailer-unavailable::after { content: none !important; }
html.ds #device .film-v5 .media-trailer.media-trailer-unavailable .media-trailer-external {
  position: static !important; flex: none; display: inline-flex !important; align-items: center; gap: 4px; width: auto !important; height: 44px !important; min-height: 44px !important;
  margin: 0 -10px 0 0 !important; padding: 0 10px !important;
  background: none !important; border: 0 !important; box-shadow: none !important; text-decoration: none;
  font: 500 var(--fs-subhead)/var(--lh-subhead) var(--font-ui) !important; color: var(--c-label-2) !important;
}
html.ds #device .film-v5 .media-trailer.media-trailer-unavailable .media-trailer-external i { font-style: normal; color: inherit !important; }

/* --- Cast: 64px circles, one consistent caption: name two lines, role one line */
html.ds #device .film-v5 .cast-track {
  display: flex; gap: 12px; margin: 0 -20px; padding: 0 20px 4px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-padding: 0 20px; scrollbar-width: none;
}
html.ds #device .film-v5 .cast-track::-webkit-scrollbar { display: none; }
html.ds #device .film-v5 .cast-track > article {
  flex: none; display: block; width: 84px; min-width: 0; overflow: hidden; scroll-snap-align: start; text-align: center; padding: 0; background: none; border: 0;
}
html.ds #device .film-v5 .cast-portrait {
  display: grid; place-items: center; position: relative;
  width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; overflow: hidden;
  background: var(--c-fill-2); border: 1px solid var(--c-line);
}
html.ds #device .film-v5 .cast-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
html.ds #device .film-v5 .cast-initials { font: 600 calc(17 * var(--type-unit))/1 var(--font-ui); color: var(--c-label-2); }
html.ds #device .film-v5 .cast-track strong {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font: 600 var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-1);
  font-size: var(--fs-footnote) !important; line-height: var(--lh-footnote) !important; /* .device .film-v5 .cast-track strong sets 14px !important */
  overflow-wrap: normal; word-break: normal; hyphens: manual;
}
html.ds #device .film-v5 .cast-track small {
  display: block; width: 100%; max-width: 100%; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: var(--fw-caption) calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui); color: var(--c-label-3);
}
html.ds #device .film-v5 .cast-section.cast-unavailable { display: none; }

/* --- Synopsis, then the age rating (only when there is one) */
html.ds #device .film-v5 .spoiler-safe > span:not(.ds-section-head) {
  display: block; margin: 0 0 10px;
  font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui);
  letter-spacing: var(--tr-title-3); text-transform: none; color: var(--c-label-1);
}
html.ds #device .film-v5 .spoiler-safe > p {
  margin: 0; font: var(--fw-body) var(--fs-body)/var(--lh-prose) var(--font-ui); letter-spacing: var(--tr-body); color: var(--c-label-1); text-wrap: pretty;
}
/* the generic "notes aren't available" disclosure is replaced by the rating row, or removed (ds-film-share.js) */
html.ds #device .film-v5 .spoiler-safe > .film-content-notes.ds-notes-empty { display: none; }
html.ds #device .film-v5 .ds-rating {
  display: flex; align-items: center; gap: var(--sp-3); box-sizing: border-box; min-height: 64px; margin: var(--sp-5) 0 0; padding: 10px var(--sp-4);
  background: var(--c-fill-1); border-radius: var(--r-row);
}
html.ds #device .film-v5 .ds-rating-badge {
  --ds-bbfc: 150, 150, 160;
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid rgb(var(--ds-bbfc));
  background: rgba(var(--ds-bbfc), .14);
  font: 700 calc(15 * var(--type-unit))/1 var(--font-ui); letter-spacing: 0; color: var(--c-label-1); font-variant-numeric: tabular-nums;
}
html.ds #device .film-v5 .ds-rating-badge.is-wide { font-size: calc(13 * var(--type-unit)); }
html.ds #device .film-v5 .ds-rating-badge.is-text { width: auto; min-width: 40px; padding: 0 10px; border-radius: var(--r-control); font-size: calc(13 * var(--type-unit)); }
html.ds #device .film-v5 .ds-rating-badge[data-bbfc="u"] { --ds-bbfc: 72, 186, 120; }
html.ds #device .film-v5 .ds-rating-badge[data-bbfc="pg"] { --ds-bbfc: 236, 196, 64; }
html.ds #device .film-v5 .ds-rating-badge[data-bbfc="12"],
html.ds #device .film-v5 .ds-rating-badge[data-bbfc="12a"] { --ds-bbfc: 240, 136, 52; }
html.ds #device .film-v5 .ds-rating-badge[data-bbfc="15"] { --ds-bbfc: 236, 92, 150; }
html.ds #device .film-v5 .ds-rating-badge[data-bbfc="18"],
html.ds #device .film-v5 .ds-rating-badge[data-bbfc="r18"] { --ds-bbfc: 226, 64, 72; }
html.ds #device .film-v5 .ds-rating > span:last-child { min-width: 0; }
html.ds #device .film-v5 .ds-rating strong { display: block; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); color: var(--c-label-1); }
html.ds #device .film-v5 .ds-rating small { display: block; margin-top: 2px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds #device .film-v5 .spoiler-safe:has(> .ds-rating) { margin-bottom: var(--sp-4); }

/* --- provenance and report: the page's small print, as one grouped list of two rows (the list Settings is made of) */
html.ds #device .film-v5 .film-information-source {
  margin: 0 !important; padding: 0 var(--sp-4) !important; border: 0 !important; border-radius: var(--r-row) var(--r-row) 0 0 !important;
  background: var(--c-fill-1) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.ds #device .film-v5 .film-information-source > summary {
  min-height: var(--row-min); display: flex; align-items: center; gap: var(--sp-3); padding: 0 !important; list-style: none; cursor: pointer;
  font: var(--fw-body) var(--fs-headline)/var(--lh-headline) var(--font-ui) !important; letter-spacing: var(--tr-headline) !important; color: var(--c-label-1) !important;
}
html.ds #device .film-v5 .film-information-source > summary::-webkit-details-marker { display: none; }
/* the row that opens in place carries the app's one disclosure chevron (ds-finish.css, section 7); the row that
   leaves the page carries the list chevron */
html.ds #device .film-v5 .feedback-link::after {
  content: ""; flex: none; width: 8px; height: 13px; margin-left: auto; opacity: .5; background: var(--c-label-1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M1.5 1.5 6.5 6.5 1.5 11.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M1.5 1.5 6.5 6.5 1.5 11.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.ds #device .film-v5 .film-information-source > div { padding: 0 0 var(--sp-3); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-2); }
html.ds #device .film-v5 .feedback-link {
  position: relative; align-self: stretch; display: flex; align-items: center; gap: var(--sp-3); box-sizing: border-box;
  min-height: var(--row-min); margin: 0; padding: 0 var(--sp-4); background: var(--c-fill-1); border: 0; border-radius: 0 0 var(--r-row) var(--r-row);
  font: var(--fw-body) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1); text-align: left; text-decoration: none;
}
html.ds #device .film-v5 .feedback-link::before { content: ""; position: absolute; top: 0; left: var(--sp-4); right: 0; height: 1px; background: var(--c-line); }
html.ds #device.manual-solid .film-v5 :is(.film-information-source, .feedback-link, .ds-rating) { background: var(--c-stage-raised) !important; }

/* --- Save: the bookmark is drawn solid and springs once (.ds-save-pop, added by ds-film-share.js): "THE ACTION BAR" above. */

/* ---- Film motion: stretch and parallax write translate/scale from ds-film-share.js (no transform/animation clash) */
html.ds #device .film-v5 .film-hero.ds-stretching { transition: none; }
html.ds #device .film-v5 .film-hero.ds-stretch-release { transition: scale var(--motion-slow) var(--motion-spring), translate var(--motion-slow) var(--motion-spring); }

@media (prefers-reduced-motion: reduce) {
  html.ds #device .film-v5 .decision-actions button.ds-save-pop svg { animation: none; }
  html.ds #device .film-v5 .film-hero.ds-stretch-release { transition: none; }
}
html.ds #device.manual-reduced-motion .film-v5 .decision-actions button.ds-save-pop svg,
html.ds.reduce-motion #device .film-v5 .decision-actions button.ds-save-pop svg { animation: none; }

/* ============================================================ Settled reveal chrome
   One request capsule (YOUR REQUEST + a details chevron); the duplicate block under the deck is gone. */
html.ds #device .trip-critical-layer .ds-req-toggle { display: none; }
html.ds #device .trip-critical-layer.trip-phase-settled .ds-req-toggle:not([hidden]) {
  display: flex; position: absolute; inset: 0; z-index: 3; box-sizing: border-box;
  align-items: center; justify-content: flex-end; padding: 0 12px 0 0; margin: 0;
  background: none; border: 0; border-radius: inherit; color: var(--c-label-2); min-height: 44px;
}
html.ds #device .trip-critical-layer .ds-req-toggle svg { transition: transform var(--motion-normal) var(--motion-spring); }
html.ds #device .trip-critical-layer .ds-req-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
html.ds #device .trip-critical-layer .ds-req-toggle:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
html.ds #device .trip-critical-layer.trip-phase-settled .critical-request-capsule > p { padding-right: 36px; }

/* the original block (moved under the capsule by ds-film-share.js) is only a popover now */
html.ds #device .trip-critical-layer .ds-request-details { display: none !important; }
html.ds #device .trip-critical-layer.trip-phase-settled .critical-results > .critical-understood { display: none !important; }
html.ds #device .trip-critical-layer.ds-req-open .ds-request-details {
  display: block !important; position: absolute; z-index: 40; left: 20px; right: 20px;
  top: calc(var(--critical-request-settled-y, 91px) + var(--critical-request-settled-h, 60px) + 8px);
  max-height: calc(100% - var(--critical-request-settled-y, 91px) - 160px); overflow: auto;
  width: auto !important; max-width: none !important; box-sizing: border-box; padding: 6px 18px 16px !important; margin: 0 !important;
  background: var(--mat-chrome) !important; -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  border: 1px solid var(--c-line-strong) !important; border-radius: var(--r-card) !important; box-shadow: var(--e-2) !important;
  animation: ds-pop-in var(--motion-fast) var(--motion-spring) both;
  transform-origin: 50% 0;
}
html.ds #device.manual-solid .trip-critical-layer.ds-req-open .ds-request-details { background: var(--mat-chrome-solid) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.ds #device .ds-request-details > span,
html.ds #device .ds-request-details > p { display: none !important; }
html.ds #device .ds-request-details .request-reading { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
html.ds #device .ds-request-details .request-reading-body { border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
html.ds #device .ds-request-details .request-reading-body .quiet-button,
html.ds #device .ds-request-details .request-reading-body button { min-height: 44px; margin-top: 8px; padding: 0 18px; border-radius: var(--r-pill) !important; border: 1px solid var(--c-line-strong) !important; background: var(--c-fill-2) !important; color: var(--c-label-1) !important; font: 600 var(--fs-subhead)/1 var(--font-ui); }
html.ds #device .ds-request-details .request-reading > summary { display: none; }
html.ds #device .ds-request-details .request-reading-host { display: block; border: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; }
html.ds #device .ds-request-details .request-reading-host::before, html.ds #device .ds-request-details .request-reading-host::after, html.ds #device .ds-request-details .request-reading::before, html.ds #device .ds-request-details .request-reading::after, html.ds #device .ds-request-details::before, html.ds #device .ds-request-details::after { content: none !important; }
html.ds #device .ds-request-details .request-reading-body { padding: 10px 0 0; color: var(--c-label-2); font: 400 var(--fs-subhead)/var(--lh-subhead) var(--font-ui); }
html.ds #device .ds-request-details .request-reading-body p { margin: 0 0 12px; color: var(--c-label-2); font-size: var(--fs-subhead); line-height: var(--lh-subhead); }
html.ds #device .ds-request-details .request-reading-body h3 { margin: 14px 0 6px; font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-label-3); }
html.ds #device .ds-request-details .request-reading-body ul { list-style: none; margin: 0; padding: 0; }
html.ds #device .ds-request-details .request-reading-body li { padding: 10px 0; border-top: 1px solid var(--c-line); }
html.ds #device .ds-request-details .request-reading-body li p { margin: 2px 0 0; color: var(--c-label-1); }
html.ds #device .ds-request-details .request-reading-body small { display: block; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }
html.ds #device .ds-request-details .request-reading-facet { font: 500 var(--fs-caption)/var(--lh-caption) var(--font-ui); color: var(--c-label-3); }
@keyframes ds-pop-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

/* the results block bottoms out; CTA and the three tools are one dock that rides the safe area */
html.ds #device .card100-scene.trip-phase-settled .critical-results {
  min-height: calc(100% - var(--critical-result-body-y, 599px)); align-content: end;
}
html.ds #device .trip-critical-layer.trip-phase-settled {
  --surf-toolbar-h: 64px;
  --surf-dock-lift: 24px;
  --surf-dock-base: calc(var(--mo-safe-bottom) + var(--surf-dock-lift) + var(--surf-toolbar-h) + var(--surf-dock-gap));
}
html.ds #device .trip-critical-layer.trip-phase-settled .critical-result-toolbar {
  bottom: calc(var(--mo-safe-bottom) + var(--surf-dock-lift));
  min-height: var(--surf-toolbar-h) !important; height: var(--surf-toolbar-h);
}
html.ds #device .trip-critical-layer.trip-phase-settled .critical-result-toolbar::after { bottom: calc(-1 * (var(--mo-safe-bottom) + var(--surf-dock-lift))); }
html.ds #device .trip-critical-layer .critical-result-toolbar > button {
  display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 4px !important; min-height: 44px !important; height: var(--surf-toolbar-h, 64px) !important; padding: 0 !important;
  background: none !important; border: 0 !important; border-radius: var(--r-row) !important; box-shadow: none !important;
  color: var(--c-label-1) !important;
}
html.ds #device .trip-critical-layer .critical-result-toolbar > button::before,
html.ds #device .trip-critical-layer .critical-result-toolbar > button::after { content: none !important; }
html.ds #device .trip-critical-layer .critical-result-toolbar > button > svg,
html.ds #device .trip-critical-layer .critical-result-toolbar > button > i {
  flex: none; box-sizing: border-box; width: 44px !important; height: 44px !important; padding: 11px; margin: 0;
  border-radius: 50%; background: var(--c-fill-2); border: 1px solid var(--c-line);
  color: var(--c-label-1) !important; filter: none !important;
  transition: transform var(--motion-fast) var(--motion-spring), background-color var(--motion-fast) var(--motion-curve);
}
html.ds #device .trip-critical-layer .critical-result-toolbar > button > span {
  font: 500 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui) !important; letter-spacing: 0; color: var(--c-label-2) !important;
}
html.ds #device .trip-critical-layer .critical-result-toolbar > button:hover { background: none !important; }
html.ds #device .trip-critical-layer .critical-result-toolbar > button:active > svg { transform: scale(.94); }
html.ds #device .trip-critical-layer .critical-result-toolbar > button:focus-visible { box-shadow: none !important; }
html.ds #device .trip-critical-layer .critical-result-toolbar > button:focus-visible > svg { outline: 2px solid var(--c-focus); outline-offset: 2px; }
html.ds #device .trip-critical-layer .critical-result-toolbar > button[aria-pressed="true"] > svg { background: var(--c-lamp); color: var(--c-lamp-ink) !important; border-color: transparent; }
html.ds #device .trip-critical-layer .critical-result-toolbar > button[aria-pressed="true"] > svg path { fill: currentColor; fill-opacity: .2; }

/* W1's tab-bar edge fade (z 29) is a sibling of the screen and would veil the dock; the ritual has no tab bar */
html.ds #device.critical-journey-active > .ds-edge-fade { display: none !important; }
html.ds #device .trip-critical-layer.ds-req-open .ds-request-details { background: var(--mat-chrome-solid) !important; }

/* CTA: Lamp, one line */
html.ds #device .trip-critical-layer .critical-film-cta { display: flex !important; justify-content: center; align-items: center; padding: 0 20px !important; }
html.ds #device .trip-critical-layer .critical-film-cta .critical-cta-spacer { display: none; }
html.ds #device .trip-critical-layer .critical-film-cta .critical-cta-label { font: 700 var(--fs-headline)/var(--lh-headline) var(--font-ui) !important; letter-spacing: 0; white-space: nowrap; }
html.ds #device .trip-critical-layer .critical-film-cta::after { content: none !important; }
html.ds #device .trip-critical-layer .critical-film-cta > svg { display: none !important; }
/* a hidden refresh stays hidden (motion-surfaces.css gives it display: block outside Friday) */
html.ds #device .trip-critical-layer .critical-friday-refresh[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html.ds #device .trip-critical-layer.ds-req-open .ds-request-details { animation: none; }
  html.ds #device .trip-critical-layer .ds-req-toggle svg { transition: none; }
}
html.ds #device.manual-reduced-motion .trip-critical-layer.ds-req-open .ds-request-details { animation: none; }

/* ============================================================ Ticket stub (moment 7)
   320 x 520. Body 396 + stub 124, a perforation between. 3D lives only inside .ds-tk-tilt. */
html.ds #device .ds-ticket {
  --ds-tk-tint: 255, 255, 255;
  position: relative; display: block; box-sizing: border-box; width: 320px; max-width: 100%; height: 520px; margin: 0 auto; padding: 0;
  overflow: visible; isolation: auto; touch-action: pan-y; -webkit-user-select: none; user-select: none;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
html.ds #device .ds-ticket::before { content: none; }
html.ds #device .ds-ticket--mystery, html.ds #device .ds-ticket--mystery.is-trio { --ds-tk-tint: 139, 92, 246; }
html.ds #device .ds-tk-shadow { position: absolute; inset: 14px 6px 0; border-radius: var(--r-card); box-shadow: var(--e-3); pointer-events: none; }
html.ds #device .ds-tk-tilt {
  position: absolute; inset: 0; will-change: transform;
  transition: transform var(--motion-slow) var(--motion-spring);
}
html.ds #device .ds-tk-tilt.is-tilting { transition: transform var(--motion-press) linear; }

html.ds #device .ds-tk-body,
html.ds #device .ds-tk-stub {
  /* (final review R1, 14 November 2026) the ticket's width (320, or the screen's room on a 320pt phone: max-width 100%), not a
     fixed 320: on an iPhone SE with Display Zoom the body and stub ran 20pt past the screen's right edge */
  position: absolute; left: 0; width: 100%; box-sizing: border-box; overflow: hidden;
  background:
    linear-gradient(160deg, rgba(var(--ds-tk-tint), .22), rgba(var(--ds-tk-tint), .03) 58%, transparent),
    var(--c-stage-raised);
  border: 1px solid var(--c-line-strong);
  transition: transform var(--motion-normal) var(--motion-spring);
}
html.ds #device .ds-tk-body {
  top: 0; height: 396px; padding: 16px; border-radius: var(--r-card) var(--r-card) 0 0; border-bottom: 0;
  -webkit-mask: radial-gradient(circle 11px at 0 100%, transparent 98%, rgb(0, 0, 0) 100%) left top / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 100%, transparent 98%, rgb(0, 0, 0) 100%) right top / 51% 100% no-repeat;
  mask: radial-gradient(circle 11px at 0 100%, transparent 98%, rgb(0, 0, 0) 100%) left top / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 100%, transparent 98%, rgb(0, 0, 0) 100%) right top / 51% 100% no-repeat;
}
html.ds #device .ds-tk-stub {
  top: 396px; height: 124px; padding: 0 16px 0 20px; border-radius: 0 0 var(--r-card) var(--r-card); border-top: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; transform-origin: 0 0;
  -webkit-mask: radial-gradient(circle 11px at 0 0, transparent 98%, rgb(0, 0, 0) 100%) left top / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 0, transparent 98%, rgb(0, 0, 0) 100%) right top / 51% 100% no-repeat;
  mask: radial-gradient(circle 11px at 0 0, transparent 98%, rgb(0, 0, 0) 100%) left top / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 0, transparent 98%, rgb(0, 0, 0) 100%) right top / 51% 100% no-repeat;
}
html.ds #device .ds-tk-stub::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 0; border-top: 2px dashed var(--c-line-strong);
}
html.ds #device .ds-ticket.is-torn .ds-tk-stub { transform: translate(0, 8px) rotate(3deg); }
html.ds #device .ds-ticket.is-torn .ds-tk-body { transform: translate(0, -2px) rotate(-.4deg); transform-origin: 0 100%; }
html.ds #device .ds-tk-perf { display: none; }

/* foil: the wordmark is a mask; a gradient layer inside it travels opposite to the tilt */
html.ds #device .ds-tk-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 28px; margin: 0 0 12px; }
html.ds #device .ds-tk-foil {
  position: relative; display: block; width: 126px; height: 22px; overflow: hidden; margin-left: 2px;
  -webkit-mask: url("/assets/triptic-wordmark-white.svg") left center / contain no-repeat; mask: url("/assets/triptic-wordmark-white.svg") left center / contain no-repeat;
  background: var(--c-lamp);
}
html.ds #device .ds-tk-foil-shine {
  position: absolute; inset: -6px -60px; display: block; will-change: translate;
  background: linear-gradient(105deg, rgb(246, 217, 168) 0%, rgb(230, 168, 255) 22%, rgb(143, 227, 255) 46%, rgb(246, 217, 168) 68%, rgb(230, 168, 255) 100%);
}
html.ds #device .ds-tk-sheen { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
html.ds #device .ds-tk-sheen > i { position: absolute; inset: -40px; display: block; background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, .06) 44%, rgba(255, 255, 255, 0) 56%); will-change: translate; }
html.ds #device .ds-tk-kind { font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-label-2); font-variant-numeric: tabular-nums; }

/* window: poster, triptych or sealed panels */
html.ds #device .ds-tk-window {
  position: relative; z-index: 1; display: flex; gap: 2px; width: 100%; height: 232px; overflow: hidden;
  border-radius: var(--r-control); background: var(--c-stage); border: 1px solid var(--c-line);
}
html.ds #device .ds-ticket--trio .ds-tk-window, html.ds #device .ds-ticket--mystery .ds-tk-window, html.ds #device .ds-ticket--collection .ds-tk-window { height: 214px; }
html.ds #device .ds-tk-art { position: relative; display: block; flex: 1 1 0; min-width: 0; overflow: hidden; }
html.ds #device .ds-tk-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; display: block; }
html.ds #device .ds-ticket--trio .ds-tk-art > img, html.ds #device .ds-ticket--collection .ds-tk-art > img { object-position: 50% 30%; }
html.ds #device .ds-tk-art .ds-tk-fallback { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
html.ds #device .ds-tk-rank { position: absolute; left: 6px; top: 6px; padding: 2px 6px; border-radius: var(--r-chip); background: rgba(5, 5, 7, .62); font: 600 var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); font-variant-numeric: tabular-nums; color: var(--c-label-1); }
html.ds #device .ds-tk-sealed {
  position: relative; display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; justify-content: space-between; padding: 12px 0;
  background: linear-gradient(180deg, rgba(var(--ds-tk-tint), .62), rgba(var(--ds-tk-tint), .22) 70%, var(--c-stage-raised));
  /* sprocket edges: two columns of holes */
  background-image:
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(5, 5, 7, .55) 7px 14px),
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(5, 5, 7, .55) 7px 14px),
    linear-gradient(180deg, rgba(var(--ds-tk-tint), .62), rgba(var(--ds-tk-tint), .22) 70%, var(--c-stage-raised));
  background-size: 5px 100%, 5px 100%, 100% 100%;
  background-position: 5px 0, calc(100% - 5px) 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
html.ds #device .ds-tk-sealed > b { font: 600 var(--fs-footnote)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-footnote); font-variant-numeric: tabular-nums; color: var(--c-label-1); }
html.ds #device .ds-tk-sealed > small { font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-label-2); }
html.ds #device .ds-tk-sealed-mark { width: 28px; height: 28px; opacity: .9; }

/* title block */
html.ds #device .ds-tk-titles { position: relative; z-index: 1; margin: 12px 0 0; }
html.ds #device .ds-tk-title {
  margin: 0; font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui) !important; letter-spacing: var(--tr-title-2) !important; max-width: none !important; color: var(--c-label-1);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: balance;
}
html.ds #device .ds-ticket--trio .ds-tk-title, html.ds #device .ds-ticket--mystery .ds-tk-title, html.ds #device .ds-ticket--collection .ds-tk-title { font-size: var(--fs-title-3) !important; line-height: var(--lh-title-3) !important; font-weight: var(--fw-title-3) !important; letter-spacing: var(--tr-title-3) !important; -webkit-line-clamp: 1; }
html.ds #device .ds-ticket--collection .ds-tk-title { -webkit-line-clamp: 2; }
html.ds #device .ds-tk-year { margin: 4px 0 0 !important; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui) !important; letter-spacing: var(--tr-subhead) !important; color: var(--c-label-2); font-variant-numeric: tabular-nums; }
html.ds #device .ds-tk-list { list-style: none; margin: 8px 0 0; padding: 0; }
html.ds #device .ds-tk-list li { display: flex; gap: 10px; align-items: baseline; height: 20px; overflow: hidden; }
html.ds #device .ds-tk-list b { flex: none; font: 600 var(--fs-caption-1)/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-1); font-variant-numeric: tabular-nums; color: var(--c-label-3); }
html.ds #device .ds-tk-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--fw-subhead) var(--fs-subhead)/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1); }
html.ds #device .ds-ticket .collectible-request { position: relative; z-index: 1; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid var(--c-line); }
html.ds #device .ds-ticket .collectible-request > span { font: var(--fw-caption-2-strong) var(--fs-caption-2)/calc(14 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-eyebrow); color: var(--c-label-3); }
html.ds #device .ds-ticket .collectible-request > h2 { margin: 4px 0 0 !important; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui) !important; letter-spacing: var(--tr-headline) !important; color: var(--c-label-1); -webkit-line-clamp: 3; }
html.ds #device .ds-ticket.has-request .ds-tk-list, html.ds #device .ds-ticket.has-request .ds-tk-year { display: none; }

/* stub: printed in SF caption 1 Semibold capitals, tabular */
html.ds #device .ds-tk-stub-text { margin: 0; display: grid; gap: 4px; font: 600 var(--fs-caption-1)/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-label-1); font-variant-numeric: tabular-nums; }
html.ds #device .ds-tk-stub-text span { display: block; white-space: nowrap; }
html.ds #device .ds-tk-stub-text span + span { color: var(--c-label-2); }
html.ds #device .ds-tk-barcode { flex: none; width: 60px; height: 36px; color: var(--c-label-2); }

/* ============================================================ Share screen layout */
html.ds #device .collectible-share.ds-share {
  display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box;
  padding: 14px 20px calc(36px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; background: transparent;
}
html.ds #device .collectible-share.ds-share > * { order: 20; }
/* the page's frame is every pushed page's: the 20pt edge (an older layer held it at 24 with !important) and the one
   header, a round control on the edge and the title at Title 2, centred. It had a small tracked line beside the
   control instead of a title. */
html.ds #device .collectible-share.ds-share { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
html.ds #device .collectible-share.ds-share > header {
  order: 0; display: grid; grid-template-columns: var(--target) minmax(0, 1fr) var(--target); align-items: center; gap: var(--sp-2);
  min-height: var(--target); margin: 0 0 var(--sp-3); padding: 0;
}
html.ds #device .collectible-share.ds-share > header > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; text-transform: none;
  font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2); color: var(--c-label-1);
}
html.ds #device .collectible-share.ds-share > .share-toggle { order: 1; margin: 0 0 14px; min-height: 44px; }
html.ds #device .collectible-share.ds-share > .ds-ticket { order: 2; margin: 0 auto 20px; flex: none; }
html.ds #device .collectible-share.ds-share > #share-primary { order: 3; margin: 0; }
html.ds #device .collectible-share.ds-share > .share-caption-control { order: 5; }
html.ds #device .collectible-share.ds-share > .collectible-share-actions { order: 4; }
html.ds #device .collectible-share.ds-share > #share-image-status { order: 6; }
html.ds #device .collectible-share.ds-share > .share-link-recovery { order: 7; }
html.ds #device .collectible-share.ds-share > .share-honesty { order: 8; }
html.ds #device .collectible-share.ds-share > .share-local-warning { order: 9; }
html.ds #device .collectible-share.ds-share > .settings-note { order: 2; }

/* mode toggle: one segmented control */
html.ds #device .collectible-share .share-toggle { display: flex; gap: 2px; padding: 2px; background: var(--c-fill-1); border: 1px solid var(--c-line); border-radius: var(--r-pill); }
html.ds #device .collectible-share .share-toggle button { flex: 1 1 0; min-height: 44px; padding: 0 8px; white-space: nowrap; border: 0; border-radius: var(--r-pill); background: none; color: var(--c-label-2); font: 600 var(--fs-subhead)/var(--lh-subhead) var(--font-ui); }
html.ds #device .collectible-share .share-toggle button.active, html.ds #device .collectible-share .share-toggle button[aria-pressed="true"] { background: var(--c-fill-press); color: var(--c-label-1); }

/* controls: Lamp Share..., Glass Save image, native note switch */
html.ds #device .collectible-share .primary-button { width: 100%; margin: 0; }
html.ds #device .collectible-share .share-caption-control {
  margin: 16px 0 0; padding: 0 16px; background: var(--c-fill-1); border: 1px solid var(--c-line); border-radius: var(--r-row); text-align: left;
}
html.ds #device .collectible-share .share-caption-switch { min-height: 56px; }
html.ds #device .collectible-share .share-caption-switch strong { font: 600 var(--fs-headline)/var(--lh-headline) var(--font-ui); }
html.ds #device .collectible-share .share-caption-switch small { margin-top: 2px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }
html.ds #device .collectible-share .share-caption-switch input[switch] { width: 51px; height: 31px; padding: 0; background: var(--c-fill-press); }
html.ds #device .collectible-share .share-caption-switch input[switch]::after { width: auto; height: auto; box-shadow: none; transition: opacity var(--motion-fast) var(--motion-curve); }
html.ds #device .collectible-share .share-caption-switch input[switch]:checked { background: var(--c-fill-press); }
html.ds #device .collectible-share .share-caption-switch input[switch]:checked::after { transform: none; }
html.ds #device .collectible-share .share-caption-switch input[switch]:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
html.ds #device .collectible-share #share-caption-fields { margin: 0 0 14px; }
html.ds #device .collectible-share #share-caption-input { background: var(--c-stage); border: 1px solid var(--c-line-strong); border-radius: var(--r-control); }
html.ds #device .collectible-share .share-image-status { margin: 10px 0 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }

/* Save image, Copy link and Messages: one row of equals under Share, the same row as every share sheet (share-sheet.css) */

/* caution copy: one footnote row with a --c-caution dot */
html.ds #device .collectible-share .ds-footnote-row,
html.ds #device .collectible-receiver .ds-footnote-row {
  display: flex; gap: 10px; align-items: flex-start; max-width: none; margin: 14px 0 0 !important; padding: 0 !important; border: 0 !important;
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui) !important; color: var(--c-label-3) !important;
}
html.ds #device .collectible-share .ds-footnote-row::before,
html.ds #device .collectible-receiver .ds-footnote-row::before {
  content: ""; position: static !important; flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--c-caution);
}
/* Glass: Save image */
html.ds #device .collectible-share #share-image-download[data-ds-kind="glass"] {
  color: var(--c-label-1) !important; -webkit-text-fill-color: var(--c-label-1) !important;
  background: var(--c-fill-2) !important; background-image: none !important; border: 1px solid var(--c-line) !important; box-shadow: none !important;
}
html.ds #device .collectible-share #share-image-download[data-ds-kind="glass"]:disabled { color: var(--c-label-3) !important; -webkit-text-fill-color: var(--c-label-3) !important; }

/* ============================================================ Receiver preview (design only) */
html.ds #device .collectible-receiver.ds-receiver {
  display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box; padding: 14px 20px calc(36px + env(safe-area-inset-bottom, 0px)); overflow-y: auto;
}
html.ds #device .collectible-receiver.ds-receiver > header { margin: 0 0 12px; }
html.ds #device .collectible-receiver.ds-receiver > header > .eyebrow { font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); color: var(--c-label-3); }
html.ds #device .collectible-receiver.ds-receiver > .ds-ticket { margin: 0 auto 8px; flex: none; }
html.ds #device .collectible-receiver.ds-receiver > h1 { margin: 20px 0 16px; font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); text-align: center; color: var(--c-label-1); }
html.ds #device .collectible-receiver.ds-receiver .primary-button { width: 100%; margin: 0; }
html.ds #device .collectible-receiver.ds-receiver .received-film-list { margin: 0 0 16px; }
html.ds #device .collectible-receiver.ds-receiver .quiet-button { align-self: center; min-height: 44px; color: var(--c-label-2); }

/* ============================================================ One film: ADMIT ONE ticket (moment 7)
   Flows to its content (body + 92px stub) instead of the fixed 520 trio frame. The note slot is a fixed
   72px so choosing or clearing a message never moves the chips under the finger. */
html.ds #device .ds-ticket--single { height: auto; }
html.ds #device .ds-ticket--single .ds-tk-tilt { position: relative; inset: auto; }
html.ds #device .ds-ticket--single .ds-tk-body,
html.ds #device .ds-ticket--single .ds-tk-stub {
  position: relative; top: auto;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 140px 140px,
    linear-gradient(162deg, rgba(var(--ds-tk-tint), .26), rgba(var(--ds-tk-tint), .04) 55%, transparent 80%),
    var(--c-stage-raised);
}
html.ds #device .ds-ticket--single .ds-tk-body { height: auto; padding: 18px 18px 0; }
html.ds #device .ds-ticket--single .ds-tk-top { height: 24px; margin: 0 0 14px; }
html.ds #device .ds-ticket--single .ds-tk-foil { width: 112px; height: 19px; }
html.ds #device .ds-ticket--single .ds-tk-kind { color: var(--c-label-3); }

/* the poster as a framed print, lit by its own colour */
html.ds #device .ds-tk-frame { display: block; height: 224px; gap: 0; border-radius: var(--r-row); background: var(--c-stage); isolation: isolate; }
html.ds #device .ds-tk-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 5, 7, .16), rgba(5, 5, 7, .5));
}
html.ds #device .ds-tk-glow {
  position: absolute; z-index: 0; left: -15%; top: -25%; width: 130%; height: 150%; object-fit: cover; display: block;
  filter: blur(22px) saturate(1.15); opacity: .62;
}
html.ds #device .ds-tk-frame .ds-tk-print {
  position: absolute; z-index: 2; top: 12px; left: 50%; flex: none; width: auto; height: calc(100% - 24px); aspect-ratio: 2 / 3;
  translate: -50% 0; border-radius: var(--r-chip); overflow: hidden; box-shadow: var(--e-2); background: var(--c-stage-raised);
}
html.ds #device .ds-tk-frame .ds-tk-print > img { object-position: 50% 50%; }
html.ds #device .ds-tk-frame .ds-tk-print::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-chip); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); pointer-events: none; }

html.ds #device .ds-ticket--single .ds-tk-titles { margin: 18px 0 0; text-align: center; }
html.ds #device .ds-ticket--single .ds-tk-title { -webkit-line-clamp: 2; }
html.ds #device .ds-tk-meta { margin: 4px 0 0 !important; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui) !important; letter-spacing: var(--tr-subhead) !important; color: var(--c-label-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the chosen message: a short hairline, then the line itself (never in speech marks: owner, 2 Oct 2026) */
html.ds #device .ds-tk-note-slot { position: relative; z-index: 1; height: 72px; }
/* sender only: an empty slot says what it is for (the exported image simply omits it) */
html.ds #device #share-sender-collectible.ds-ticket--single:not(.has-note) .ds-tk-note-slot::after {
  content: "Pick a message below, if you like"; display: block; padding: 12px 8px 0; text-align: center;
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-3);
}
html.ds #device .ds-tk-note { margin: 0; padding: 12px 8px 0; text-align: center; }
html.ds #device .ds-tk-note[hidden] { display: none; }
html.ds #device .ds-tk-note::before { content: ""; display: block; width: 28px; height: 1px; margin: 0 auto 9px; background: var(--c-line-strong); }
html.ds #device .ds-tk-note .ds-tk-note-line {
  margin: 0; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-lamp);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: balance;
}
html.ds #device .ds-tk-note.is-arriving { animation: ds-tk-note-in var(--motion-normal) var(--motion-curve) both; }
/* several films (8 October): a picked line is the three's headline, in the lamp's colour as one film's line is; a
   Collection keeps its title and has the line under it, after the same short hairline */
html.ds #device .ds-ticket.has-message:not(.ds-ticket--collection) .ds-tk-title { color: var(--c-lamp); }
html.ds #device .ds-tk-message { margin: 10px 0 0 !important; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui) !important; letter-spacing: var(--tr-headline) !important; color: var(--c-lamp); }
html.ds #device .ds-tk-message[hidden] { display: none; }
html.ds #device .ds-tk-message::before { content: ""; display: block; width: 28px; height: 1px; margin: 0 0 9px; background: var(--c-line-strong); }
html.ds #device .ds-tk-title.is-arriving, html.ds #device .ds-tk-message.is-arriving { animation: ds-tk-note-in var(--motion-normal) var(--motion-curve) both; }
@keyframes ds-tk-note-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }

/* tear line: punched holes between the notches; the stub prints Issued + No. */
html.ds #device .ds-ticket--single .ds-tk-stub { height: 92px; padding: 0 18px 0 20px; }
html.ds #device .ds-ticket--single .ds-tk-stub::before {
  left: 20px; right: 20px; top: 0; height: 4px; border-top: 0;
  background: radial-gradient(circle at 2px 2px, var(--c-stage) 1.6px, transparent 2.1px) 0 0 / 9px 4px repeat-x;
}
html.ds #device .ds-tk-fields { margin: 0; display: flex; gap: 28px; }
html.ds #device .ds-tk-field { display: grid; gap: 2px; }
html.ds #device .ds-tk-field small { font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-label-3); }
html.ds #device .ds-tk-field b { font: 600 var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.ds #device .ds-ticket--single .ds-tk-barcode { width: 64px; }

/* ============================================================ Message chips: four fixed lines, one at a time */
html.ds #device .collectible-share.ds-share > .share-message-control { order: 2; margin: 0 0 20px; }
html.ds #device .collectible-share .share-message-control > span { display: block; margin: 0 0 10px; text-align: center; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-3); }
html.ds #device .collectible-share .share-message-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
html.ds #device .collectible-share .share-message-chip {
  position: relative; display: inline-flex; align-items: center; min-height: 36px; height: 36px; margin: 0; padding: 0 15px; box-sizing: border-box;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-fill-1); box-shadow: none;
  color: var(--c-label-1); -webkit-text-fill-color: var(--c-label-1); white-space: nowrap;
  font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead);
  -webkit-tap-highlight-color: transparent; transition: scale var(--motion-press) var(--motion-curve);
}
html.ds #device .collectible-share .share-message-chip::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
html.ds #device .collectible-share .share-message-chip[aria-pressed="true"] {
  background: var(--c-lamp); border-color: var(--c-lamp); color: var(--c-lamp-ink); -webkit-text-fill-color: var(--c-lamp-ink);
  animation: ds-chip-on var(--motion-fast) var(--motion-spring);
}
@keyframes ds-chip-on { from { scale: .94; } to { scale: 1; } }
html.ds #device .collectible-share .share-message-chip:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }

/* ---- reduced motion: the ticket does not tilt; the tear is a 180ms fade-less nudge; reduce transparency: no ambient */
@media (prefers-reduced-motion: reduce) {
  html.ds #device .ds-tk-tilt { transition: none; transform: none !important; }
  html.ds #device .ds-tk-body, html.ds #device .ds-tk-stub { transition: transform var(--motion-fast) linear; }
  html.ds #device .ds-ticket.is-torn .ds-tk-stub { transform: translate(0, 8px); }
  html.ds #device .ds-tk-note.is-arriving { animation: ds-tk-note-fade var(--motion-fast) linear both; }
  html.ds #device .ds-tk-title.is-arriving, html.ds #device .ds-tk-message.is-arriving { animation: ds-tk-note-fade var(--motion-fast) linear both; }
  html.ds #device .collectible-share .share-message-chip[aria-pressed="true"] { animation: none; }
}
html.ds #device.manual-reduced-motion .ds-tk-tilt { transition: none; transform: none !important; }
html.ds #device.manual-reduced-motion .ds-tk-body, html.ds #device.manual-reduced-motion .ds-tk-stub { transition: transform var(--motion-fast) linear; }
html.ds #device.manual-reduced-motion .ds-ticket.is-torn .ds-tk-stub { transform: translate(0, 8px); }
html.ds #device.manual-reduced-motion .ds-tk-note.is-arriving { animation: ds-tk-note-fade var(--motion-fast) linear both; }
html.ds #device.manual-reduced-motion .ds-tk-title.is-arriving, html.ds #device.manual-reduced-motion .ds-tk-message.is-arriving { animation: ds-tk-note-fade var(--motion-fast) linear both; }
html.ds #device.manual-reduced-motion .collectible-share .share-message-chip[aria-pressed="true"] { animation: none; }
@keyframes ds-tk-note-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 350px) {
  html.ds #device .collectible-share.ds-share { padding-left: 16px; padding-right: 16px; }
}

/* a vertical swipe on the ticket still scrolls the screen; horizontal and held presses drive the tilt */
html.ds #device .ds-ticket { touch-action: pan-y; }
html.ds #device .ds-ticket, html.ds #device .ds-ticket * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
/* (R2-B, 22 October 2026) the poster light drawn once (poster-light.js dress): the live blur is no longer needed */
html.ds #device .ds-tk-glow.pl-lit { filter: none; }

/* (FILM PAGE FIXES, 29 October 2026; the owner) a film with no synopsis has no "Synopsis": its section holds only the place for
   the age rating (ds-film-share.js decorateNotes), and with no rating either it is not shown at all */
html.ds #device .film-v5 .spoiler-safe.film-no-synopsis:not(:has(.ds-rating)) { display: none; }
html.ds #device .film-v5 .film-content-notes[hidden] { display: none !important; }

/* (FILM PAGE FIXES, 29 October 2026; the owner: the "your service" check on a Where-to-watch tile showed as a sliver, and two
   names ran together, "Prime Video Prime Videc") the one service tile clips what is inside it (ds-service-tile.css, overflow
   hidden, 28 October), and the check was drawn inside the tile. It is now drawn by the tile's link, over the tile's top-right
   corner and outside the clip. Each name keeps to its own column: two lines at most, then an ellipsis, with a gap between. */
html.ds #device .film-v5 .watch-logo.is-mine .watch-logo-icon::before { content: none; }
html.ds #device .film-v5 .watch-logo > :is(a, span) { position: relative; }
html.ds #device .film-v5 .watch-logo.is-mine > :is(a, span)::before {
  content: ""; position: absolute; z-index: 2; left: calc(50% + 26px - 12px); top: -5px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-seal-hi) center / 11px 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.6l4.6-5.2' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 2px var(--c-stage); pointer-events: none;
}
html.ds #device .film-v5 .watch-options .watch-logos { column-gap: 10px; }
html.ds #device .film-v5 .watch-logo-name {
  max-width: calc(100% + 8px); margin-inline: -4px; white-space: normal; overflow-wrap: break-word; /* the 10 px gap keeps 2 px between */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}

/* ===== prototype-src/ds-library-collections.css ===== */
/* TRIPTIC ds-library-collections layer (W4). Scoped under html.ds (kill switch ?ds=0).
   See workspace/work/frontend-motion-uplift-2026-09-30/DESIGN-DIRECTION.md sections 1-5 and ds-library-collections.js.

   Library (hero, Reels film cans, Watched row, grouped list), grid pages (segmented sort, filter menu, tiles,
   light-table peek), archive edition cards, empty and error states, Collections (header, rail, lenticular cards,
   shelves, loading), Collection detail (pull-down fan).

   !IMPORTANT OVERRIDES (each beats an earlier !important in library-grid-artwork.css or design-system.css):
     .dslc-tile .library-grid-poster background; .dslc-tile title font and colour; .dslc-tile > small font and colour;
     .dslc-table-poster height and background; the wash of a tile's poster while it is on its way ([data-lp-frame]).
     Everything else beats legacy rules by specificity alone
     ("html.ds #device ..." selectors, one id plus classes).

   Motion: transform / translate / rotate / scale / opacity only. The scroll-driven pieces (Reels cans, the
   lenticular fan) are wrapped in @supports (animation-timeline: view()); elsewhere they sit in a static pose.
   Reduced Motion removes them; Reduce Transparency (OS or app toggle) swaps every tinted wash for a solid fill; nothing here uses a blur. */

/* The global .screen::before ambient layer drifts forever and is wider than the screen (530px at -70px), which
   makes the pushed lists report 70px of horizontal overflow. These screens are lit by the poster tint instead,
   so the layer is pinned to the screen and held still. */
html.ds #device :is(.dslc-screen, .dslc-library, .dslc-collections)::before { animation: none; inset: 0; }

/* ===================================================================== shared pieces */
html.ds .dslc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.ds .dslc-glyph {
  display: block; width: 64px; height: 64px; flex: 0 0 64px; color: var(--c-label-3);
  background: var(--c-label-3);
  -webkit-mask: url("/assets/trio-mark-compact.svg") center / contain no-repeat;
  mask: url("/assets/trio-mark-compact.svg") center / contain no-repeat;
  opacity: .9;
}
html.ds .dslc-glyph.is-snapped { background: none; -webkit-mask: none; mask: none; opacity: 1; }
html.ds .dslc-glyph.is-snapped svg { display: block; width: 64px; height: 64px; }

html.ds #device .dslc-empty,
html.ds #device .dslc-state {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin: 24px 0; padding: 40px 24px 24px;
  text-align: center; border: 0; border-radius: 0; background: none; box-shadow: none;
}
html.ds #device .dslc-empty > h2, html.ds #device .dslc-empty > h3,
html.ds #device .dslc-state > h2 { margin: 4px 0 0; font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: 0; color: var(--c-label-1); text-wrap: balance; }
html.ds #device .dslc-empty > p, html.ds #device .dslc-state > p[role="alert"] { margin: 0; max-width: 32ch; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: 0; color: var(--c-label-2); text-wrap: balance; }
html.ds #device .dslc-empty > :is(.secondary-button, .primary-button),
html.ds #device .dslc-state > :is(.secondary-button, .primary-button) { width: auto; min-width: 184px; margin-top: 12px; }
html.ds #device .dslc-state > .quiet-button { width: auto; min-width: 184px; margin-top: 0; }
html.ds #device .dslc-state > .dslc-state-foot { margin: 8px 0 0; max-width: 32ch; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }
html.ds #device .dslc-shelf-empty { margin: 0; padding: 20px 24px 8px; }

/* ====================================================================== LIBRARY tab root */
html.ds #device .dslc-library.library-premium { padding: 12px 20px 128px; }
html.ds #device .dslc-library > .app-header { padding: 0; }
html.ds #device .dslc-library .destination-heading { margin: 12px 0 20px; }
html.ds #device .dslc-library .destination-heading h1 { font: var(--fw-large-title) var(--fs-large-title)/var(--lh-large-title) var(--font-ui); letter-spacing: var(--tr-large-title); margin: 0; }

/* 1. The Library is four rooms behind one segmented control (15 October 2026, lane LIBRARY; hub/docs/LIBRARY-2026-10-15.md).
   Only the room being looked at is in the page. Motion: opacity and transform only (the room's arrival is drawn in script and
   skipped under Reduce Motion). Colour: the app's tokens; the scrim over a poster is a dark gradient with light type on it,
   as every poster title in the app is. */
html.ds #device .dslc-rooms { container: dslc-rooms / inline-size; min-width: 0; }
html.ds #device .dslc-seg.dslc-rooms-seg { flex: none; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); width: 100%; margin: 4px 0 20px; }
html.ds #device .dslc-seg.dslc-rooms-seg .dslc-seg-pill { width: calc((100% - 6px) / var(--n, 4)); }
html.ds #device .dslc-seg.dslc-rooms-seg .dslc-seg-btn { padding: 0 4px; white-space: nowrap; font-size: calc(14 * var(--type-unit)); line-height: calc(18 * var(--type-unit)); }
html.ds #device .dslc-seg.dslc-rooms-seg .dslc-seg-btn[hidden] { display: none; }
html.ds #device .dslc-seg.dslc-rooms-seg .dslc-seg-btn[aria-selected="true"] { color: var(--c-label-1); font-weight: 600; }
/* the larger text sizes: two by two, so no name is ever cut, and the chosen one is a lit plate rather than a sliding pill */
html.ds #device .dslc-seg.dslc-rooms-seg.is-stacked { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; border-radius: var(--r-row); }
html.ds #device .dslc-seg.dslc-rooms-seg.is-stacked .dslc-seg-pill { display: none; }
html.ds #device .dslc-seg.dslc-rooms-seg.is-stacked .dslc-seg-btn { height: auto; min-height: 44px; border-radius: var(--r-row); }
html.ds #device .dslc-seg.dslc-rooms-seg.is-stacked .dslc-seg-btn[aria-selected="true"] { background: var(--c-fill-press); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
html.ds #device .dslc-room { min-width: 0; }
html.ds #device .dslc-room:focus-visible { outline: none; }
html.ds #device .dslc-room-foot { margin: 8px 0 0; }
html.ds #device .dslc-room-foot .dslc-list-header { margin-top: 32px; }

/* Watchlist: NEXT TO WATCH, full width, then the rest as a wall of posters */
html.ds #device .dslc-next {
  position: relative; display: block; width: 100%; max-width: 460px; min-height: 0; margin: 0 auto 28px; padding: 0; border: 0; border-radius: var(--r-sheet);
  background: none; box-shadow: none; text-align: left; color: inherit; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
html.ds #device .dslc-next:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 4px; }
html.ds #device .dslc-next-poster { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: var(--e-2), inset 0 0 0 1px var(--c-line); }
html.ds #device .dslc-next-poster > img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: none; border-radius: inherit; }
html.ds #device .dslc-next-poster > img[hidden] { display: none; }
html.ds #device .dslc-next-poster .ds-poster-fallback { position: absolute; inset: 0; border-radius: inherit; padding: 28px; }
html.ds #device .dslc-next-scrim {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 88px 20px 20px;
  background: linear-gradient(0deg, rgba(5, 5, 7, .9), rgba(5, 5, 7, .66) 52%, rgba(5, 5, 7, 0)); color: rgb(255 255 255);
}
html.ds #device .dslc-next-eyebrow { font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); color: rgb(255 255 255 / .78); }
html.ds #device .dslc-next-title { font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); text-wrap: balance; overflow-wrap: anywhere; }
html.ds #device .dslc-next-meta { font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .82); }
html.ds #device .dslc-caught-up { margin: 4px 0 24px; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); text-wrap: balance; }
/* the wall: the same poster tiles the Watchlist page draws, as wide as the room allows */
html.ds #device .dslc-room .dslc-grid.watchlist-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 156px), 1fr)); }
html.ds #device .dslc-room .dslc-grid.watchlist-grid.is-small { grid-template-columns: repeat(auto-fill, minmax(min(100%, 100px), 1fr)); gap: 20px 12px; }
/* a wide room (an iPad, the Duo's inner display): the next film stands beside its words' edge, never a slab */
@container dslc-rooms (min-width: 640px) {
  html.ds #device .dslc-next { max-width: 380px; margin: 0 0 32px; }
  html.ds #device .dslc-room .dslc-grid.watchlist-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
  html.ds #device .dslc-room .dslc-grid.watchlist-grid.is-small { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
}

/* Reels: the film cans, a wrapped grid that takes the room (they were a row of ten) */
html.ds #device .dslc-room-reels .dslc-reel-track {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); justify-items: center; gap: 8px 10px; margin: 0; padding: 4px 0 8px;
  overflow: visible; scroll-snap-type: none;
}
html.ds #device .dslc-room-reels .dslc-can-slot { scroll-snap-align: none; }
html.ds #device .dslc-room-reels .dslc-can-wrap { animation: none; will-change: auto; }

/* Cards: the trophy cabinet as a room of its own: this week's card, the shelf of seasons, then how cards work */
html.ds #device .dslc-room-cards .dslc-cards-week:empty, html.ds #device .dslc-room-cards .dslc-cards-shelf:empty { display: none; }
html.ds #device .dslc-room-cards .dslc-cards-shelf > .fc-shelf { margin-top: 28px; }
html.ds #device .dslc-room-cards .dslc-cards-week + .dslc-cards-shelf:empty + .dslc-room-foot, html.ds #device .dslc-room-cards .dslc-cards-week:empty + .dslc-cards-shelf:empty + .dslc-room-foot { margin-top: 0; }

/* searching the Library: the segmented control and the rooms step aside for the results */
html.ds #device .dslp-searching :is(.dslc-rooms-seg, .dslc-rooms) { display: none; }


/* shelves */
html.ds #device .dslc-shelf { margin: 32px 0 0; }
html.ds #device .dslc-shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0 0 4px; }
html.ds #device .dslc-shelf-head h2 { margin: 0; font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--c-label-1); }
html.ds #device .dslc-see-all {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: 0 -8px 0 0; padding: 0 8px; border: 0; background: none;
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2);
}
html.ds #device .dslc-see-all .ds-row-chevron { margin-left: 2px; }

/* 2. Reels: the film-can shelf (moment 8) */
html.ds #device .dslc-reel-track {
  display: flex; gap: 10px; margin: 0 -20px; padding: 10px 20px 40px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none;
}
html.ds #device .dslc-reel-track::-webkit-scrollbar { display: none; }
/* The can (1 Oct 2026 redesign): a brushed gunmetal canister, machined lids, a dark glass label window that shows
   the edition's three posters (a sealed Friday shows a violet star-dust instead). Friday cans carry a violet rim light. */
html.ds #device .dslc-can-slot { flex: 0 0 124px; width: 124px; height: 200px; scroll-snap-align: start; }
html.ds #device .dslc-can {
  --dslc-rim: rgba(255, 255, 255, .5);
  --dslc-rim-glow: rgba(255, 255, 255, 0);
  position: relative; display: block; width: 124px; height: 200px; min-height: 0; padding: 0; margin: 0;
  border: 0; background: none; box-shadow: none; color: inherit; text-align: left; font: inherit; border-radius: 0;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
html.ds #device .dslc-can[data-kind="friday"], html.ds #device .dslc-can[data-state="sealed"] { --dslc-rim: var(--c-seal-hi); --dslc-rim-glow: rgba(139, 92, 246, .55); }
html.ds #device .dslc-can:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 6px; border-radius: var(--r-row); }
html.ds #device .dslc-can-wrap { position: absolute; inset: 0; display: block; transform-origin: 50% 100%; }
html.ds #device .dslc-can-body {
  position: absolute; left: 4px; right: 4px; top: 8px; bottom: 8px; display: block; border-radius: var(--r-chip);
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .55) 0%, rgba(255, 255, 255, .10) 7%, rgba(255, 255, 255, .34) 13%, rgba(255, 255, 255, .08) 21%,
      rgba(255, 255, 255, .03) 46%, rgba(255, 255, 255, .12) 70%, rgba(255, 255, 255, .02) 82%, rgba(0, 0, 0, .6) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(58, 58, 66, 1), rgba(26, 26, 32, 1));
  box-shadow: 0 14px 22px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .5);
  transition: translate var(--motion-fast) var(--motion-spring), scale var(--motion-fast) var(--motion-spring);
}
html.ds #device .dslc-can.is-lifted .dslc-can-body { translate: 0 -14px; scale: 1.05; }
/* Library moment: as a can opens, its top lid breaks the seal: it lifts, gives a quarter-turn's worth of twist (a few degrees of rotateZ
   about its left end) and a glint runs along the lip, then it seats again when the can closes. rotate/translate/transform only. */
html.ds #device .dslc-can-lid.is-top { transform-origin: 8% 50%; transition: rotate var(--motion-normal) var(--motion-spring), translate var(--motion-normal) var(--motion-spring); }
html.ds #device .dslc-can.is-lifted .dslc-can-lid.is-top { rotate: -9deg; translate: 0 -6px; }
html.ds #device .dslc-can-lid.is-top::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34px; border-radius: inherit; opacity: 0; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55) 50%, transparent); transform: translateX(-34px); }
html.ds #device .dslc-can.is-lifted .dslc-can-lid.is-top::before { animation: dslc-lid-glint var(--motion-slow) var(--motion-curve) 60ms both; }
@keyframes dslc-lid-glint { 0% { opacity: 0; transform: translateX(-34px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(124px); } }
/* machined lids: a wider band with a highlight lip and two pressed grooves */
html.ds #device .dslc-can-lid {
  position: absolute; left: -4px; right: -4px; height: 18px; display: block; border-radius: var(--r-chip);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(255, 255, 255, .22) 12%, rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, .02) 64%, rgba(255, 255, 255, .14) 84%, rgba(0, 0, 0, .55)),
    linear-gradient(180deg, rgba(255, 255, 255, .42) 0 1px, rgba(255, 255, 255, .08) 1px 6px, rgba(0, 0, 0, .35) 6px 7px, rgba(255, 255, 255, .1) 7px 11px, rgba(0, 0, 0, .3) 11px 12px, rgba(255, 255, 255, .06) 12px),
    rgba(52, 52, 60, 1);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .45);
}
html.ds #device .dslc-can-lid.is-top { top: 0; }
html.ds #device .dslc-can-lid.is-bottom { bottom: 0; transform: scaleY(-1); }
/* the rim light: a thin lit edge on each lid; violet and glowing on Friday */
html.ds #device .dslc-can-lid::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 1px; border-radius: var(--r-pill);
  background: var(--dslc-rim); box-shadow: 0 0 8px 1px var(--dslc-rim-glow); opacity: .85;
}
html.ds #device .dslc-can-label {
  position: absolute; left: 10px; right: 10px; top: 27px; bottom: 27px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px;
  padding: 8px 8px 9px; border-radius: var(--r-chip); overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 38%), rgba(8, 8, 12, .9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(0, 0, 0, .6);
  color: var(--c-label-1);
}
/* glass glare across the window */
html.ds #device .dslc-can-label::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 0 30%, rgba(255, 255, 255, .07) 31% 40%, transparent 41%), linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 18%, transparent 80%, rgba(0, 0, 0, .34));
}
html.ds #device .dslc-can-date {
  font: 600 var(--fs-caption-2)/calc(13 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: var(--c-label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.ds #device .dslc-can[data-kind="friday"] .dslc-can-date { color: var(--c-seal-hi); }
/* the window: the edition's three posters, edge to edge */
html.ds #device .dslc-can-win {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; height: 38px; flex: 0 0 auto; border-radius: var(--r-chip); overflow: hidden;
  background: rgba(255, 255, 255, .06);
}
html.ds #device .dslc-can-win > .dslc-can-pf { position: relative; display: block; overflow: hidden; background: rgba(255, 255, 255, .05); }
html.ds #device .dslc-can-win > .dslc-can-pf > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
html.ds #device .dslc-can-win > .dslc-can-pf > .ds-poster-fallback { position: absolute; inset: 0; }
html.ds #device .dslc-can-win > .dslc-can-pf > .ds-poster-fallback > * { display: none; }
html.ds #device .dslc-can-win.is-sealed {
  display: block;
  background:
    radial-gradient(1px 1px at 18% 30%, rgba(255, 255, 255, .8), transparent 60%),
    radial-gradient(1px 1px at 72% 22%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1px 1px at 44% 70%, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1px 1px at 86% 64%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1px 1px at 30% 84%, rgba(255, 255, 255, .45), transparent 60%),
    radial-gradient(60% 90% at 50% 50%, rgba(139, 92, 246, .45), rgba(139, 92, 246, .08) 60%, transparent 75%),
    rgba(12, 10, 22, 1);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .28);
}
html.ds #device .dslc-can-win.is-sealed::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; translate: -50% -50%; border-radius: var(--r-pill);
  background: radial-gradient(circle at 35% 30%, var(--c-seal-hi), var(--c-seal-fill) 60%, rgba(60, 30, 140, 1));
  box-shadow: 0 0 10px rgba(139, 92, 246, .8), inset 0 0 0 1px rgba(255, 255, 255, .25);
}
html.ds #device .dslc-can-req {
  flex: 1 1 auto; min-height: 0; font: 600 var(--fs-caption-1)/calc(15 * var(--type-unit)) var(--font-ui); letter-spacing: 0; color: var(--c-label-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word;
}
html.ds #device .dslc-can-chip {
  align-self: flex-start; display: inline-block; padding: 1px 8px; border-radius: var(--r-pill);
  font: 600 var(--fs-caption-2)/calc(14 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; white-space: nowrap;
}
html.ds #device .dslc-can-label .dslc-can-chip.is-kept { box-shadow: inset 0 0 0 1px rgba(245, 244, 247, .5); color: var(--c-label-1); }
html.ds #device .dslc-can-label .dslc-can-chip.is-revealed { box-shadow: inset 0 0 0 1px var(--c-line-strong); color: var(--c-lamp); }
html.ds #device .dslc-can-label .dslc-can-chip.is-sealed { box-shadow: inset 0 0 0 1px var(--c-seal-hi), 1px 3px 10px rgba(139, 92, 246, .35); color: var(--c-seal-hi); }
/* the soft floor: a flipped, masked silhouette at low alpha (no duplicate DOM, no filter) */
html.ds #device .dslc-can-reflect {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); height: 40px; display: block; overflow: hidden; opacity: .16; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent); mask-image: linear-gradient(to bottom, black, transparent);
}
html.ds #device .dslc-can-reflect > i {
  position: absolute; left: 4px; top: 0; width: 116px; height: 184px; display: block; transform: scaleY(-1); border-radius: var(--r-chip);
  background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .3) 14%, rgba(255, 255, 255, .1) 30%, rgba(255, 255, 255, .16) 70%, rgba(255, 255, 255, .05));
}
html.ds #device .dslc-can[data-kind="friday"] .dslc-can-reflect > i { background: linear-gradient(180deg, rgba(167, 139, 250, .5), rgba(167, 139, 250, .1)); }

@keyframes dslc-reel { 0% { rotate: -8deg; scale: .92; } 50% { rotate: 0deg; scale: 1; } 100% { rotate: 8deg; scale: .92; } }
@supports (animation-timeline: view(inline)) {
  html.ds #device .dslc-can-wrap { animation: dslc-reel linear both; animation-timeline: view(inline); animation-range: cover; will-change: rotate, scale; }
}
@media (prefers-reduced-motion: reduce) {
  html.ds #device .dslc-can-wrap { animation: none; }
  html.ds #device .dslc-can-body { transition: opacity var(--motion-fast) linear; }
  html.ds #device .dslc-can.is-lifted .dslc-can-body { translate: 0 0; scale: 1; }
}
html.ds #device.manual-reduced-motion .dslc-can-wrap { animation: none; }
html.ds #device.manual-reduced-motion .dslc-can-body { transition: opacity var(--motion-fast) linear; }
html.ds #device.manual-reduced-motion .dslc-can.is-lifted .dslc-can-body { translate: 0 0; scale: 1; }

/* the tap: a dim, then three posters (or sealed cards) fan into a triptych */
html.ds #device > .dslc-triptych { position: absolute; inset: 0; z-index: 110; pointer-events: none; overflow: hidden; }
html.ds #device .dslc-triptych-dim { position: absolute; inset: 0; background: rgba(5, 5, 7, .62); }
html.ds #device .dslc-fan-card {
  position: absolute; display: block; width: 88px; height: 132px; overflow: hidden; border-radius: var(--r-row);
  background: var(--c-fill-2); box-shadow: var(--e-3), 0 0 0 1px var(--c-line-strong); transform-origin: 50% 100%; will-change: transform, opacity;
}
html.ds #device .dslc-fan-card > img, html.ds #device .dslc-thumb > img, html.ds #device .dslc-poster-box > img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: block; }
html.ds #device .dslc-fan-card > img[hidden], html.ds #device .dslc-thumb > img[hidden], html.ds #device .dslc-poster-box > img[hidden] { display: none; }
html.ds #device .dslc-fan-card .ds-poster-fallback, html.ds #device .dslc-thumb .ds-poster-fallback, html.ds #device .dslc-poster-box .ds-poster-fallback { position: absolute; inset: 0; }
html.ds #device .dslc-fan-card .ds-poster-fallback { border-radius: var(--r-row); padding: 10px; }
html.ds #device .dslc-fan-card .ds-pf-year, html.ds #device .dslc-thumb .ds-pf-year { display: none; }
html.ds #device .dslc-fan-card.is-sealed, html.ds #device .dslc-thumb.is-sealed {
  background: linear-gradient(180deg, rgba(139, 92, 246, .22), rgba(139, 92, 246, .06)), var(--c-stage-raised);
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .7), var(--e-2); display: grid; place-items: center;
}
html.ds #device .dslc-sealed-mark { display: block; width: 28px; height: 28px; background: var(--c-seal-hi); -webkit-mask: url("/assets/trio-mark-compact.svg") center / contain no-repeat; mask: url("/assets/trio-mark-compact.svg") center / contain no-repeat; }
html.ds #device .dslc-thumb.is-sealed .dslc-sealed-mark { width: 18px; height: 18px; }

/* The Library on the iPhone Duo's inner display (14 Oct 2026, lane COLLECT; tests/ds-loading-browser.test.mjs, "Duo inner:
   nothing wider than the screen"). film-cards-week.css opens the cards shelf like a book: a leaf each side of the fold, and
   Flick's note (.sps-tip: his figure beside his words) stands on the right leaf. That is right where a leaf is wide (the
   inner display itself); where the shelf is narrow (the review frame draws this fold inside a 390-point phone: a leaf of 158
   points) the figure left the words 32 points, a word like "reincarnated" ran 42 points past the screen's edge and the page
   grew sideways. The cause is the leaf, not the words, so the shelf is asked how wide it is: narrower than a figure and a
   readable bubble twice over, the note takes the whole shelf, as it does on a phone. */
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] #device .fc-shelf { container: fc-shelf / inline-size; }
@container fc-shelf (max-width: 479px) {
  html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] #device .fc-shelf > :is(.sps, .sps-tip) { grid-column: 1 / -1; }
}

/* 4. inset grouped list: 28px tinted tiles */
html.ds #device .dslc-list.ds-list { margin: 0; }
html.ds #device .dslc-list-header { margin: 28px 0 8px; padding: 0 16px; }
html.ds #device .dslc-row.ds-row { display: flex; width: 100%; min-height: var(--row-min); padding: 10px 16px; margin: 0; border-radius: 0; background: none; text-align: left; }
html.ds #device .dslc-row .ds-row-icon svg { width: 18px; height: 18px; }
html.ds #device .dslc-row .ds-row-title, html.ds #device .dslc-row .ds-row-sub { display: block; }
html.ds #device .dslc-tone-search { background: rgba(104, 201, 255, .18); color: var(--c-beam); }
html.ds #device .dslc-tone-history { background: rgba(111, 214, 240, .18); color: var(--c-dna-pace); }
html.ds #device .dslc-tone-worlds { background: rgba(185, 163, 255, .18); color: var(--c-dna-worlds); }
html.ds #device .dslc-tone-viewed { background: rgba(245, 196, 107, .18); color: var(--c-dna-tone); }
html.ds #device .dslc-tone-friday { background: rgba(139, 92, 246, .22); color: var(--c-seal-hi); }
html.ds #device .dslc-tone-inbox { background: rgba(245, 154, 200, .18); color: var(--c-dna-answers); }
html.ds #device .dslc-footnote.ds-list-footer { margin: 16px 0 0; text-align: left; }

/* ====================================================================== grid pages */
html.ds #device .dslc-gridpage.library-premium { padding-left: 20px; padding-right: 20px; }
html.ds #device .dslc-controls { position: relative; z-index: 6; display: flex; align-items: center; gap: 10px; margin: 4px 0 22px; }
html.ds #device .dslc-seg {
  position: relative; flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr); height: 44px; min-width: 0;
  border: 0; box-shadow: inset 0 0 0 1px var(--c-line); border-radius: var(--r-pill); background: var(--c-fill-1);
}
html.ds #device .dslc-seg-pill {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: var(--r-pill);
  background: var(--c-fill-press); box-shadow: inset 0 0 0 1px var(--c-line-strong);
  translate: calc(var(--i, 0) * 100%) 0;
  transition: translate var(--motion-normal) var(--motion-spring);
}
html.ds #device .dslc-seg-btn {
  position: relative; z-index: 1; min-width: 0; min-height: 0; height: 100%; padding: 0 6px; border: 0; border-radius: var(--r-pill); background: none; box-shadow: none;
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2);
}
html.ds #device .dslc-seg-btn[aria-checked="true"] { color: var(--c-label-1); font-weight: 600; }
html.ds #device .dslc-seg-btn:focus-visible, html.ds #device .dslc-filter-btn:focus-visible, html.ds #device .dslc-menu-item:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 0; }
html.ds #device .dslc-filter { position: relative; flex: 0 0 44px; }
html.ds #device .dslc-filter-btn { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-fill-1); color: var(--c-label-1); box-shadow: none; }
html.ds #device .dslc-filter-btn svg { width: 20px; height: 20px; }
html.ds #device .dslc-filter-btn.is-on { background: var(--c-lamp); color: var(--c-lamp-ink); border-color: transparent; }
html.ds #device .dslc-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 232px; padding: 6px; border-radius: var(--r-row);
  background: var(--mat-chrome-solid); border: 1px solid var(--c-line-strong); box-shadow: var(--e-2);
  transform-origin: 100% 0; animation: dslc-menu-in var(--motion-fast) var(--motion-curve) both;
}
@keyframes dslc-menu-in { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
html.ds #device .dslc-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--r-control); background: none; box-shadow: none;
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); color: var(--c-label-1); text-align: left;
}
html.ds #device .dslc-menu-item:active { background: var(--c-fill-2); }
html.ds #device .dslc-menu-item i { flex: 0 0 18px; height: 18px; background: var(--c-label-1); opacity: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m3.5 9.5 3.6 3.5 7.4-8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m3.5 9.5 3.6 3.5 7.4-8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
html.ds #device .dslc-menu-item[aria-checked="true"] i { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.ds #device .dslc-menu { animation: none; } html.ds #device .dslc-seg-pill { transition: none; } }
html.ds #device.manual-reduced-motion .dslc-menu { animation: none; }
html.ds #device.manual-reduced-motion .dslc-seg-pill { transition: none; }

html.ds #device .dslc-grid.watchlist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; margin-top: 0; align-items: start; }
html.ds #device .dslc-grid > .dslc-tile {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; text-align: left; color: inherit;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
html.ds #device .dslc-grid > .dslc-tile .library-grid-poster { border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--c-line); background: var(--c-fill-1) !important; }
/* A poster on its way keeps its own wash (ds-loading.css, from the server's two colours), which the flat fill above and
   interaction-targets.css would otherwise paint over: the Library's posters are these tiles. */
html.ds #device .dslc-grid > .dslc-tile .library-grid-poster[data-lp-frame] {
  background:
    radial-gradient(120% 70% at 30% 18%, rgba(var(--lp-a), .95), transparent 70%),
    radial-gradient(110% 60% at 75% 100%, rgba(var(--lp-b), .9), transparent 72%),
    linear-gradient(170deg, rgba(var(--lp-a), .7), rgba(var(--lp-b), .9)),
    rgb(var(--lp-b)) !important;
}
html.ds #device .dslc-grid > .dslc-tile .ds-poster-fallback { border-radius: var(--r-card); }
html.ds #device .dslc-grid > .dslc-tile > strong {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 0; margin: 10px 0 0;
  font: var(--fw-headline) calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui) !important; letter-spacing: 0; color: var(--c-label-1) !important;
}
html.ds #device .dslc-grid > .dslc-tile > small { display: block; margin: 4px 0 0; font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui) !important; letter-spacing: var(--tr-caption-1); font-variant-numeric: tabular-nums; color: var(--c-label-2) !important; }
html.ds #device .dslc-grid > .dslc-tile:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 4px; border-radius: var(--r-card); }

/* the light table: a held poster lifts over a dimmed, slightly lit room */
html.ds #device > .dslc-table {
  position: absolute; inset: 0; z-index: 110; opacity: 0; touch-action: none; -webkit-user-select: none; user-select: none;
  background: radial-gradient(72% 46% at 50% 47%, rgba(var(--dslc-lit, 243, 238, 230), .2), transparent 74%), rgba(5, 5, 7, .8);
  transition: opacity var(--motion-fast) var(--motion-curve);
}
html.ds #device > .dslc-table.is-open { opacity: 1; }
html.ds #device > .dslc-table.is-leaving { opacity: 0; transition-duration: var(--motion-fast); }
html.ds #device .dslc-table-card { position: absolute; left: 50%; top: 45%; width: min(58%, 232px); transform: translate(-50%, -50%); will-change: transform; }
html.ds #device .dslc-table-poster { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; height: auto !important; overflow: hidden; border-radius: var(--r-card); box-shadow: var(--e-3), 0 0 0 1px var(--c-line-strong); background: var(--c-fill-2) !important; }
html.ds #device .dslc-table-poster > img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
html.ds #device .dslc-table-poster .ds-poster-fallback { position: absolute; inset: 0; border-radius: var(--r-card); }
html.ds #device .dslc-table-cap { position: absolute; left: -24px; right: -24px; top: 100%; margin-top: 18px; text-align: center; opacity: 0; transition: opacity var(--motion-fast) var(--motion-curve); }
html.ds #device > .dslc-table.is-open .dslc-table-cap { opacity: 1; transition-delay: 160ms; }
html.ds #device .dslc-table-cap strong { display: block; font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2); color: var(--c-label-1); text-wrap: balance; }
html.ds #device .dslc-table-cap small { display: block; margin-top: 4px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-2); }

/* ====================================================================== edition cards */
html.ds #device .dslc-editions .sublist, html.ds #device .dslc-editions .library-history-list { display: grid; gap: 12px; }
html.ds #device .dslc-edition {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 12px; align-items: center; gap: 14px; box-sizing: border-box; width: 100%; height: 100px; min-height: 100px; margin: 0; padding: 0 16px;
  border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: var(--e-1); color: var(--c-label-1); text-align: left;
}
html.ds #device .dslc-edition[data-kind="friday"] { box-shadow: var(--e-1), inset 3px 0 0 var(--c-seal); }
html.ds #device .dslc-triptych-thumb { display: flex; align-items: center; }
html.ds #device .dslc-thumb { position: relative; display: block; flex: 0 0 40px; width: 40px; height: 60px; overflow: hidden; border-radius: var(--r-chip); background: var(--c-fill-2); box-shadow: 0 0 0 1px var(--c-line-strong), 0 6px 12px rgba(0, 0, 0, .4); }
html.ds #device .dslc-thumb + .dslc-thumb { margin-left: -12px; }
html.ds #device .dslc-thumb:nth-child(2) { translate: 0 -4px; }
html.ds #device .dslc-thumb .ds-poster-fallback { border-radius: var(--r-chip); padding: 4px; }
html.ds #device .dslc-thumb .ds-poster-fallback::before { display: none; }
html.ds #device .dslc-thumb .ds-poster-fallback::after { top: 50%; left: 50%; width: 14px; height: 14px; translate: -50% -50%; }
html.ds #device .dslc-thumb .ds-pf-title { display: none; }
html.ds #device .dslc-edition-copy { display: grid; gap: 4px; min-width: 0; align-content: center; justify-items: start; }
html.ds #device .dslc-edition-date { font: 600 var(--fs-footnote)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-footnote); font-variant-numeric: tabular-nums; color: var(--c-label-2); }
html.ds #device .dslc-edition-req { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: var(--fw-headline) calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); color: var(--c-label-1); text-wrap: balance; overflow-wrap: anywhere; }
html.ds #device .dslc-edition .dslc-can-chip.is-kept { background: var(--c-fill-2); color: var(--c-label-2); }
html.ds #device .dslc-edition .dslc-can-chip.is-revealed { border: 1px solid var(--c-line-strong); color: var(--c-lamp); padding: 1px 7px; }
html.ds #device .dslc-edition .dslc-can-chip.is-sealed { background: rgba(139, 92, 246, .22); color: var(--c-seal-hi); }
html.ds #device .dslc-edition:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 2px; }

/* ================================================================== COLLECTIONS tab root */
html.ds #device .dslc-collections.collections-api-screen { padding-top: 12px; }
html.ds #device .dslc-collections > .app-header { padding: 0; }
html.ds #device .dslc-collections .collections-api-content { padding: 12px 0 136px; }
html.ds #device .dslc-coll-head.collections-api-header { display: block; margin-bottom: 0; }
/* ============================================================ COLLECTIONS: two kinds of collection, one page (14 Oct 2026, lane COLLECT)
   The owner: "the search box just above the cinematic universe would only be for the collections part of it, but it's not
   clear, it looks like it could be for the cinematic universe search. We need to be clear it's a different type of
   collection ie a collection of stills." The page, in order: the title; the Cinematic Universe's block (cinematic-universe.css:
   its kind, "A collection of film stills", its name, a line, the living sky); a break; FILM COLLECTIONS, whose heading comes
   first and whose search comes directly under it, then the shelves. Nothing else is on the page. */
html.ds #device .collections-films { margin: 0; }   /* (the screen's own scroll-padding-top, 72px, keeps its heading clear of the tab title when "Search film collections" brings it up) */
html.ds #device .cu-block + .collections-films { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--c-line); }
html.ds #device .collections-films-head h2 { margin: 0; font: 600 var(--fs-title-2)/var(--lh-title-2) var(--font-ui); color: var(--c-label-1); text-wrap: balance; }
html.ds #device .collections-films-head p { margin: 2px 0 0; max-width: none; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
/* a search, a browsed list or a failed load is about the film collections alone: the stills' block rests (hidden, not torn
   down: its sky is not on the screen, so it stops drawing) and the break above the heading goes with it; while typing, the
   search is the first thing on the page */
html.ds #device .collections-api-content:has(.collections-api-results[data-filtered="true"], .collections-api-state) .cu-block { display: none; }
html.ds #device .collections-api-content:has(.collections-api-results[data-filtered="true"], .collections-api-state) .cu-block + .collections-films { margin-top: 0; padding-top: 0; border-top: 0; }
html.ds #device .collections-api-content:has(.collections-api-results[data-searching="true"]) .collections-films-head { display: none; }
html.ds #device .collections-api-content:has(.collections-api-results[data-searching="true"]) .dslc-search.collections-api-search { margin-top: 0; }
/* legacy hides the title while a state card shows; the tab keeps its title through errors (aligned with the tab label) */
html.ds #device .dslc-collections .collections-api-content:not(:has(.collections-api-results[data-searching="true"])) .dslc-coll-head > .dslc-title-block { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
html.ds #device .dslc-title-block h1 { margin: 0; font: var(--fw-large-title) var(--fs-large-title)/var(--lh-large-title) var(--font-ui); letter-spacing: var(--tr-large-title); text-wrap: balance; }
html.ds #device .dslc-title-block p { margin: 4px 0 0; max-width: none; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
html.ds #device .dslc-search.collections-api-search { position: relative; display: block; margin-top: 16px; }
html.ds #device .dslc-search input { width: 100%; min-width: 0; height: 48px; min-height: 48px; margin: 0; padding: 0 46px 0 44px; border: 1px solid var(--c-line); border-radius: var(--r-row); background: var(--c-fill-2); box-sizing: border-box; font-size: calc(17 * var(--type-unit)); line-height: calc(24 * var(--type-unit)); color: var(--c-label-1); }
html.ds #device .dslc-search input:focus { border-color: var(--c-focus); outline: none; }
/* "Search collections of films" is the longest placeholder in the app: at the largest text size it ends in an ellipsis, not mid-word */
html.ds #device .dslc-search input, html.ds #device .dslc-search input::placeholder { text-overflow: ellipsis; }
html.ds #device .dslc-search::before {
  content: ""; position: absolute; left: 14px; top: 14px; width: 20px; height: 20px; z-index: 1; background: var(--c-label-3); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='7' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m16 16 5 5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='7' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m16 16 5 5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.ds #device .dslc-clear { position: absolute; right: 2px; top: 2px; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; background: none; box-shadow: none; }
html.ds #device .dslc-clear[hidden] { display: none; }
html.ds #device .dslc-clear i { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--c-label-3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM6.6 5.2 10 8.6l3.4-3.4 1.4 1.4-3.4 3.4 3.4 3.4-1.4 1.4-3.4-3.4-3.4 3.4-1.4-1.4 3.4-3.4-3.4-3.4Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM6.6 5.2 10 8.6l3.4-3.4 1.4 1.4-3.4 3.4 3.4 3.4-1.4 1.4-3.4-3.4-3.4 3.4-1.4-1.4 3.4-3.4-3.4-3.4Z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* suggestions only while the search field is focused */
html.ds #device .dslc-films .dslc-chips { display: none; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
html.ds #device .dslc-films.is-searching .dslc-chips { display: flex; animation: dslc-rise var(--motion-fast) var(--motion-curve) both; }
@keyframes dslc-rise { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
html.ds #device .dslc-chips button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-fill-1); box-shadow: none; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-1); }
html.ds #device .dslc-chips button::before { content: "\2197"; margin: 0; color: var(--c-label-3); }
html.ds #device .dslc-chips button:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 2px; }

/* shelves */
html.ds #device .dslc-coll-shelf.api-collection-shelf { margin: 28px 0 0; padding: 0; }
html.ds #device .dslc-coll-shelf > header { margin: 0 0 12px; }
html.ds #device .dslc-coll-shelf > header h2 { margin: 0; font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: 0; color: var(--c-label-1); }
html.ds #device .dslc-coll-shelf > header p { margin: 4px 0 0; max-width: none; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }
html.ds #device .dslc-track { --dslc-gut: var(--triptic-brand-gutter, 22px); display: flex; gap: 12px; margin: 0 calc(var(--dslc-gut) * -1); padding: 4px var(--dslc-gut) 22px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
html.ds #device .dslc-track::-webkit-scrollbar { display: none; }
html.ds #device .dslc-track.is-feature { gap: 14px; padding-inline: max(16px, calc(50% + var(--dslc-gut) - 170px)); scroll-padding-inline: max(16px, calc(50% + var(--dslc-gut) - 170px)); scroll-snap-type: x mandatory; }
html.ds #device .dslc-track.is-shelf { scroll-snap-type: x proximity; scroll-padding-inline: var(--dslc-gut); }
html.ds #device .dslc-track.is-compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0 0 12px; overflow: visible; }

/* the card: 340x420 this-week, 260x320 shelves, compact in search results */
html.ds #device .dslc-card.api-collection-card {
  --dslc-pw: 100px; --dslc-hue: 185, 163, 255;
  position: relative; isolation: isolate; display: block; box-sizing: border-box; flex: 0 0 260px; width: 260px; height: 320px; min-height: 0; padding: 0; margin: 0; overflow: hidden;
  border: 1px solid var(--c-line); border-radius: var(--r-sheet); background: var(--c-fill-1); box-shadow: var(--e-1); color: var(--c-label-1); text-align: left; align-items: initial;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
html.ds #device .dslc-card.is-feature { --dslc-pw: 136px; flex-basis: 340px; width: 340px; height: 420px; scroll-snap-align: center; }
html.ds #device .dslc-card.is-shelf { scroll-snap-align: start; }
html.ds #device .dslc-card.is-compact { --dslc-pw: 78px; flex-basis: auto; width: 100%; height: 252px; border-radius: var(--r-card); }
html.ds #device .dslc-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background: radial-gradient(92% 58% at 50% 20%, rgba(var(--dslc-hue), .34), transparent 74%);
}
html.ds #device .dslc-card.is-tinted::before { opacity: 1; transition: opacity var(--motion-slow) var(--motion-curve); }
html.ds #device .dslc-card:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 3px; }
html.ds #device .dslc-fan { position: absolute; left: 0; right: 0; top: 26px; height: calc(var(--dslc-pw) * 1.5); display: block; pointer-events: none; }
html.ds #device .dslc-card.is-feature .dslc-fan { top: 36px; }
html.ds #device .dslc-fan-p {
  position: absolute; left: 50%; bottom: 0; display: block; overflow: hidden; width: var(--dslc-pw); margin-left: calc(var(--dslc-pw) / -2);
  aspect-ratio: 2 / 3; border-radius: var(--r-row); background: var(--c-stage-raised);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45), 0 0 0 1px var(--c-line-strong); transform-origin: 50% 100%;
}
html.ds #device .dslc-card.is-feature .dslc-fan-p { border-radius: var(--r-card); }
html.ds #device .dslc-fan-p.is-c { z-index: 3; }
html.ds #device .dslc-fan-p.is-l, html.ds #device .dslc-fan-p.is-r { z-index: 1; width: calc(var(--dslc-pw) * .88); margin-left: calc(var(--dslc-pw) * -.44); bottom: 6px; }
/* static pose where scroll-driven animation is unsupported or Reduced Motion is on */
html.ds #device .dslc-fan-p.is-l { rotate: -11deg; translate: calc(var(--dslc-pw) * -.56) 0; }
html.ds #device .dslc-fan-p.is-r { rotate: 11deg; translate: calc(var(--dslc-pw) * .56) 0; }
html.ds #device .dslc-fan-p > img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: block; }
html.ds #device .dslc-fan-p > img[hidden] { display: none; }
html.ds #device .dslc-fan-p > img.is-fresh { animation: dslc-fade var(--motion-normal) var(--motion-curve) both; }
@keyframes dslc-fade { from { opacity: 0; } to { opacity: 1; } }
html.ds #device .dslc-fan-p .ds-poster-fallback { position: absolute; inset: 0; border-radius: inherit; padding: 10px; }
html.ds #device .dslc-fan-p .ds-poster-fallback::before { inset: 6px; border-radius: var(--r-control); }
html.ds #device .dslc-fan-p .ds-poster-fallback::after { top: 12px; left: 12px; width: 14px; height: 14px; }
html.ds #device .dslc-card.is-compact .ds-pf-title, html.ds #device .dslc-card.is-shelf .ds-pf-year { display: none; }
/* blank film stock: the two back cards until the real detail posters arrive (never a repeated poster) */
html.ds #device .dslc-stock { position: absolute; inset: 0; display: block; background: linear-gradient(165deg, rgba(var(--dslc-hue), .34), rgba(255, 255, 255, .03)), var(--c-stage-raised); }
html.ds #device .dslc-stock::before, html.ds #device .dslc-stock::after { content: ""; position: absolute; top: 10px; bottom: 10px; width: 5px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .16) 0 7px, transparent 7px 16px); }
html.ds #device .dslc-stock::before { left: 7px; }
html.ds #device .dslc-stock::after { right: 7px; }
/* lenticular sheen */
html.ds #device .dslc-fan-p::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, .2) 49%, transparent 66%); translate: -70% 0; }
html.ds #device .dslc-card-copy { position: absolute; left: 22px; right: 22px; bottom: 20px; display: grid; gap: 4px; }
html.ds #device .dslc-card.is-feature .dslc-card-copy { left: 24px; right: 24px; bottom: 24px; gap: 6px; }
html.ds #device .dslc-kicker { font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-label-2); }
html.ds #device .dslc-card-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2); color: var(--c-label-1); text-wrap: balance; overflow-wrap: anywhere;
}
html.ds #device .dslc-card.is-feature .dslc-card-title { font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); }
html.ds #device .dslc-card.is-compact .dslc-card-title { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); }
html.ds #device .dslc-card.is-compact .dslc-card-copy { left: 14px; right: 14px; bottom: 14px; }
html.ds #device .dslc-card-meta { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); font-variant-numeric: tabular-nums; font-style: normal; color: var(--c-label-2); }

/* moment 11: the fan opens as the card crosses the centre (+-8 to +-14 degrees). One depth rule (9 October 2026,
   hub/docs/SURFACES-2026-10-09.md): the posters no longer drift against the card (the 10-12px translate is gone); the
   fan only opens and closes. */
@keyframes dslc-fan-l { 0% { rotate: -8deg; } 50% { rotate: -14deg; } 100% { rotate: -8deg; } }
@keyframes dslc-fan-r { 0% { rotate: 8deg; } 50% { rotate: 14deg; } 100% { rotate: 8deg; } }
@keyframes dslc-sheen { 0% { translate: -70% 0; } 100% { translate: 70% 0; } }
@supports (animation-timeline: view(inline)) {
  html.ds #device .dslc-card { view-timeline: --dslc-card inline; }
  html.ds #device .dslc-fan-p { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --dslc-card; animation-range: cover; }
  html.ds #device .dslc-fan-p.is-l { animation-name: dslc-fan-l; }
  html.ds #device .dslc-fan-p.is-r { animation-name: dslc-fan-r; }
  html.ds #device .dslc-fan-p::after { animation: dslc-sheen linear both; animation-timeline: --dslc-card; animation-range: cover; }
}
/* Collections moment: the depth that slid the fan and the title block against each other as the shelf scrolled (scale
   .95-1.05, 7-9px) is gone: one depth rule (9 October 2026, hub/docs/SURFACES-2026-10-09.md), posters move with the
   page and nothing else does. */
@media (prefers-reduced-motion: reduce) {
  html.ds #device .dslc-fan, html.ds #device .dslc-card-copy { animation: none; }
  html.ds #device .dslc-can-lid.is-top { transition: none; }
  html.ds #device .dslc-can.is-lifted .dslc-can-lid.is-top { rotate: 0deg; translate: 0 0; }
  html.ds #device .dslc-can.is-lifted .dslc-can-lid.is-top::before { animation: none; }
}
html.ds #device.manual-reduced-motion .dslc-fan, html.ds #device.manual-reduced-motion .dslc-card-copy { animation: none; }
html.ds #device.manual-reduced-motion .dslc-can-lid.is-top { transition: none; }
html.ds #device.manual-reduced-motion .dslc-can.is-lifted .dslc-can-lid.is-top { rotate: 0deg; translate: 0 0; }
html.ds #device.manual-reduced-motion .dslc-can.is-lifted .dslc-can-lid.is-top::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html.ds #device .dslc-fan-p, html.ds #device .dslc-fan-p::after { animation: none; }
}
html.ds #device.manual-reduced-motion .dslc-fan-p, html.ds #device.manual-reduced-motion .dslc-fan-p::after { animation: none; }

/* loading: skeleton "unexposed film" (after 400ms, one sweep every 1.6s, three cycles) or W1's leader */
html.ds #device .dslc-loading { position: relative; min-height: 120px; margin-top: 24px; }
html.ds #device .dslc-loading.is-leader { min-height: 320px; }
html.ds #device .dslc-loading.is-skeleton { animation: dslc-fade var(--motion-fast) var(--motion-curve) 400ms both; }
html.ds #device .dslc-skel-row { display: flex; gap: 14px; margin: 0 -20px; padding: 0 max(16px, calc(50% - 170px)); overflow: hidden; }
html.ds #device .dslc-skel-row.is-small { margin-top: 16px; padding-inline: 20px; gap: 12px; }
html.ds #device .dslc-skel { position: relative; flex: 0 0 340px; height: 420px; overflow: hidden; border-radius: var(--r-sheet); background: var(--c-fill-1); border: 1px solid var(--c-line); }
html.ds #device .dslc-skel.is-shelf { flex-basis: 260px; height: 320px; }
html.ds #device .dslc-skel::before {
  content: ""; position: absolute; inset: 14px 10px; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .06) 0 8px, transparent 8px 20px) left / 6px 100% no-repeat, repeating-linear-gradient(180deg, rgba(255, 255, 255, .06) 0 8px, transparent 8px 20px) right / 6px 100% no-repeat;
}
html.ds #device .dslc-skel-fan { position: absolute; left: 0; right: 0; top: 40px; height: 204px; display: block; }
html.ds #device .dslc-skel.is-shelf .dslc-skel-fan { top: 30px; height: 150px; }
html.ds #device .dslc-skel-fan b { position: absolute; left: 50%; bottom: 0; width: 136px; aspect-ratio: 2 / 3; margin-left: -68px; border-radius: var(--r-card); background: var(--c-fill-2); }
html.ds #device .dslc-skel.is-shelf .dslc-skel-fan b { width: 100px; margin-left: -50px; border-radius: var(--r-row); }
html.ds #device .dslc-skel-fan b:nth-child(1) { rotate: -11deg; translate: -76px 0; scale: .9; }
html.ds #device .dslc-skel-fan b:nth-child(3) { rotate: 11deg; translate: 76px 0; scale: .9; }
html.ds #device .dslc-skel.is-shelf .dslc-skel-fan b:nth-child(1) { translate: -56px 0; }
html.ds #device .dslc-skel.is-shelf .dslc-skel-fan b:nth-child(3) { translate: 56px 0; }
html.ds #device .dslc-skel-line { position: absolute; left: 24px; height: 12px; border-radius: var(--r-chip); background: var(--c-fill-2); display: block; }
html.ds #device .dslc-skel-line.is-a { bottom: 62px; width: 62%; height: 18px; }
html.ds #device .dslc-skel-line.is-b { bottom: 30px; width: 30%; }
html.ds #device .dslc-sweep { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .08) 50%, transparent 65%); translate: -100% 0; animation: dslc-sweep var(--motion-ceremony) var(--motion-curve) 3 both; }
@keyframes dslc-sweep { from { translate: -100% 0; } to { translate: 100% 0; } }
html.ds #device .dslc-skel-list { position: relative; display: grid; gap: 12px; overflow: hidden; border-radius: var(--r-row); }
html.ds #device .dslc-skel-list i { display: block; height: 76px; border-radius: var(--r-row); background: var(--c-fill-1); border: 1px solid var(--c-line); }
html.ds #device .dslc-skel-list .dslc-sweep { position: absolute; inset: 0; }
@media (prefers-reduced-motion: reduce) { html.ds #device .dslc-sweep { animation: none; translate: 0 0; opacity: 0; } html.ds #device .dslc-loading.is-skeleton { animation-duration: var(--motion-fast); } }
html.ds #device.manual-reduced-motion .dslc-sweep { animation: none; opacity: 0; }

/* Saved Collections rows */
html.ds #device .dslc-saved.collections-api-saved { padding: 12px 0 128px; }
html.ds #device .dslc-saved > .api-collection-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; height: auto; margin: 0 0 10px; padding: 12px 16px; border: 1px solid var(--c-line); border-radius: var(--r-row); background: var(--c-fill-1); box-shadow: none; }
html.ds #device .dslc-saved > .api-collection-card .explore-card-copy strong { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1); }
html.ds #device .dslc-saved > .api-collection-card .explore-card-copy em { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); font-style: normal; color: var(--c-label-2); }
/* (pages polish, 28 October 2026; the owner) a saved list is a card worth keeping: the Collection's own cover fan above, its kind, its
   title with the rows' chevron beside it, and "8 films · Saved 28 Oct" quietly under. It is swiped left to remove (ds-swipe-rows). */
html.ds #device .dslc-saved > .saved-collection { margin: 0 0 12px; }
html.ds #device .dslc-saved > .saved-collection > .saved-collection-card { display: grid; gap: 12px; width: 100%; height: auto; min-height: 64px; margin: 0; padding: 14px 16px 16px; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-stage-raised); box-shadow: none; text-align: left; color: inherit; }
html.ds #device .dslc-saved .saved-collection-cover { display: block; pointer-events: none; }
html.ds #device .dslc-saved .saved-collection-cover .collection-cover-object { height: 150px; margin: 0; }
html.ds #device .dslc-saved .saved-collection-cover .collection-cover-object > span { width: 78px; height: 117px; transform: translateX(calc(var(--cover-position) * 58px)) rotateY(calc(var(--cover-position) * -12deg)) rotateZ(calc(var(--cover-position) * 9deg)); }
html.ds #device .dslc-saved .saved-collection-cover .collection-cover-object > span:nth-child(2) { transform: translateZ(24px); }
html.ds #device .dslc-saved .saved-collection-card .explore-card-copy { display: grid; gap: 2px; min-width: 0; }
html.ds #device .dslc-saved .saved-collection-kind { font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-label-3); }
html.ds #device .dslc-saved .saved-collection-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html.ds #device .dslc-saved .saved-collection-title > strong { min-width: 0; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1); }
/* the rows' chevron (the app's one: the icon set's stroke, the quiet label colour), by the title, never a blue glyph mid-card */
html.ds #device .dslc-saved .saved-collection-chev { flex: none; width: 18px; height: 18px; background: var(--c-label-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat; }
html.ds #device .dslc-saved .saved-collection-card .explore-card-copy em { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); font-style: normal; color: var(--c-label-2); }
html.ds #device .dslc-saved > .saved-collections-more { margin: 8px 4px 0; }

/* ================================================================== COLLECTION detail */
html.ds #device .dslc-detail .collection-detail-copy h1 { font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); margin: 0 0 12px; text-wrap: balance; }
/* the ONE paragraph under the title (owner, 6 October 2026): body type, the secondary label colour, no orphans */
html.ds #device .dslc-detail .collection-detail-copy .collection-lede { margin: 0 0 12px; font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); letter-spacing: var(--tr-body); color: var(--c-label-2); text-wrap: pretty; }
html.ds #device .dslc-detail .collection-cover-object > span {
  transform: translateX(calc(var(--cover-position) * (69px + 16px * var(--dslc-pull, 0)))) rotateY(calc(var(--cover-position) * -12deg)) rotateZ(calc(var(--cover-position) * (11deg + 6deg * var(--dslc-pull, 0))));
}
html.ds #device .dslc-detail .collection-cover-object > span:nth-child(2) { transform: translateZ(34px) translateY(calc(-3px - 6px * var(--dslc-pull, 0))) scale(calc(1 + .04 * var(--dslc-pull, 0))); }
html.ds #device .dslc-detail .collection-detail-copy .collection-share-action { width: auto; min-width: 220px; }
html.ds #device .dslc-detail .collection-film-card { box-shadow: none; border-radius: var(--r-card); background: var(--c-fill-1); border: 1px solid var(--c-line); }
html.ds #device .dslc-detail .collection-film-card strong { font: var(--fw-headline) calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); color: var(--c-label-1); }
html.ds #device .dslc-detail .collection-film-card small { font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-label-2); }

/* ======================================================= Reduce Transparency (OS setting and the app toggle)
   Solid rooms: no tinted wash behind the hero, cards or sealed cards; the light-table dims to a solid stage. */
@media (prefers-reduced-transparency: reduce) {
  html.ds #device .dslc-hero.library-watchlist-cover { background: var(--c-fill-1); }
  html.ds #device .dslc-card::before { display: none; }
  html.ds #device .dslc-stock { background: var(--c-stage-raised); }
  html.ds #device .dslc-fan-card.is-sealed, html.ds #device .dslc-thumb.is-sealed { background: var(--c-stage-raised); }
  html.ds #device > .dslc-table { background: var(--c-stage); }
}
html.ds.reduce-transparency #device .dslc-hero.library-watchlist-cover,
html.ds #device.manual-solid .dslc-hero.library-watchlist-cover { background: var(--c-fill-1); }
html.ds.reduce-transparency #device .dslc-card::before, html.ds #device.manual-solid .dslc-card::before { display: none; }
html.ds.reduce-transparency #device .dslc-stock, html.ds #device.manual-solid .dslc-stock,
html.ds.reduce-transparency #device .dslc-fan-card.is-sealed, html.ds #device.manual-solid .dslc-fan-card.is-sealed,
html.ds.reduce-transparency #device .dslc-thumb.is-sealed, html.ds #device.manual-solid .dslc-thumb.is-sealed { background: var(--c-stage-raised); }
html.ds.reduce-transparency #device > .dslc-table, html.ds #device.manual-solid > .dslc-table { background: var(--c-stage); }

/* The shared press rule transitions scale, filter, box-shadow and opacity on every button. Here only scale and
   opacity may move (a tint or a pressed-state change must not animate a shadow or filter). */
html.ds #device :is(.dslc-hero, .dslc-clear, .dslc-chips button, .dslc-can, .dslc-card, .dslc-seg-btn, .dslc-filter-btn, .dslc-menu-item, .dslc-edition, .dslc-see-all, .dslc-state button, .dslc-empty button, .dslc-detail button) { transition-property: scale, opacity; }

/* ================================================================== COLLECTIONS: colour, flow cards, hero, search blocks
   Cards lay out in flow (fan, then copy) so a long kicker or title can never sit under the posters.
   Colour is tasteful and quiet: a soft aurora behind the tab, a hue per shelf, tinted card edges. */
html.ds #device .dslc-card.api-collection-card { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 26px 22px 20px; }
html.ds #device .dslc-card.is-feature { padding: 36px 24px 24px; }
html.ds #device .dslc-card.is-compact { height: auto; min-height: 236px; padding: 22px 14px 14px; }
html.ds #device .dslc-fan { position: relative; top: auto; left: auto; right: auto; flex: 0 0 auto; margin: 0 -22px; height: calc(var(--dslc-pw) * 1.5); }
html.ds #device .dslc-card.is-feature .dslc-fan { top: auto; margin: 0 -24px; }
html.ds #device .dslc-card.is-compact .dslc-fan { margin: 0 -14px; }
html.ds #device .dslc-card-copy { position: relative; left: auto; right: auto; bottom: auto; margin-top: auto; padding-top: 14px; min-width: 0; }
html.ds #device .dslc-card.is-feature .dslc-card-copy, html.ds #device .dslc-card.is-compact .dslc-card-copy { left: auto; right: auto; bottom: auto; }
html.ds #device .dslc-card.is-compact .dslc-card-copy { padding-top: 12px; }
html.ds #device .dslc-kicker { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing: var(--tr-eyebrow); color: rgb(var(--dslc-hue)); filter: brightness(1.25); }
/* A card with no eyebrow (the "Curated by TRIPTIC" shelf: its heading has already said it) gives the freed line to its posters,
   so the space between the fan and the title stays what it is on a labelled card. */
html.ds #device .dslc-card.is-feature.is-plain { --dslc-pw: 146px; }
html.ds #device .dslc-card.is-shelf.is-plain { --dslc-pw: 108px; }

html.ds #device .dslc-card.api-collection-card { border-color: color-mix(in srgb, rgb(var(--dslc-hue)) 30%, var(--c-line)); }
html.ds #device .dslc-card::before { background: radial-gradient(92% 58% at 50% 20%, rgba(var(--dslc-hue), .34), transparent 74%), linear-gradient(0deg, rgba(var(--dslc-hue), .16), transparent 46%); }

/* the tab: a faint aurora, a colour-washed title, one accent per shelf */
html.ds #device .dslc-collections.collections-api-screen {
  background:
    radial-gradient(120% 40% at 12% 0%, color-mix(in srgb, var(--c-dna-worlds) 16%, transparent), transparent 70%),
    radial-gradient(90% 34% at 100% 14%, color-mix(in srgb, var(--c-dna-emotion) 11%, transparent), transparent 72%),
    radial-gradient(110% 30% at 0% 46%, color-mix(in srgb, var(--c-dna-pace) 8%, transparent), transparent 72%);
  background-attachment: local;
}
/* (8 October 2026: plain, like every other tab's title; the owner saw the gold end of the gradient as a yellow tint) */
html.ds #device .dslc-title-block h1 { background: none; -webkit-text-fill-color: currentColor; color: var(--c-label-1); }
html.ds #device .dslc-coll-shelf { --shelf-hue: var(--c-dna-worlds); }
html.ds #device .dslc-coll-shelf[data-shelf="curated"] { --shelf-hue: var(--c-dna-tone); }
html.ds #device .dslc-coll-shelf[data-shelf="unusually-specific"] { --shelf-hue: var(--c-dna-worlds); }
html.ds #device .dslc-coll-shelf[data-shelf="seasonal"] { --shelf-hue: var(--c-dna-emotion); }
html.ds #device .dslc-coll-shelf[data-shelf="fresh-picks"] { --shelf-hue: var(--c-dna-pace); }
/* P-COLLECT (13 October 2026): the personal shelf and the three fixed editorial shelves (home-shelves.mjs) */
html.ds #device .dslc-coll-shelf[data-shelf="for-you"] { --shelf-hue: var(--c-dna-answers); }
html.ds #device .dslc-coll-shelf[data-shelf="filmmakers"] { --shelf-hue: var(--c-dna-tone); }
html.ds #device .dslc-coll-shelf[data-shelf="subjects"] { --shelf-hue: var(--c-dna-pace); }
html.ds #device .dslc-coll-shelf[data-shelf="places"] { --shelf-hue: var(--c-dna-scope); }
html.ds #device .dslc-coll-shelf > header h2 { display: flex; align-items: center; gap: 10px; }
html.ds #device .dslc-coll-shelf > header h2::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--shelf-hue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--shelf-hue) 22%, transparent); }
html.ds #device .collections-shelf-theme { display: inline-flex; align-items: center; margin: 6px 0 0; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--c-dna-emotion) 45%, transparent); background: color-mix(in srgb, var(--c-dna-emotion) 14%, transparent); font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-dna-emotion); }
html.ds #device .dslc-card[data-kind="editorial"] { --dslc-hue: 245, 196, 107; }
html.ds #device .dslc-card[data-kind="seasonal"] { --dslc-hue: 255, 159, 122; }

/* Seasonal themes: ONE place. --season-rgb is the light, --season-deep the shade; months pick the pair. */
html.ds #device [data-season="1"]  { --season-rgb: 150, 208, 255; --season-deep: 18, 46, 92; }   /* icy blue */
html.ds #device [data-season="2"]  { --season-rgb: 255, 124, 164; --season-deep: 92, 18, 52; }   /* rose */
html.ds #device [data-season="3"]  { --season-rgb: 124, 222, 164; --season-deep: 18, 72, 50; }   /* fresh green */
html.ds #device [data-season="4"]  { --season-rgb: 176, 172, 255; --season-deep: 48, 40, 112; }  /* lilac */
html.ds #device [data-season="5"]  { --season-rgb: 196, 232, 112; --season-deep: 48, 82, 24; }   /* leaf */
html.ds #device [data-season="6"]  { --season-rgb: 255, 204, 84; --season-deep: 104, 62, 10; }   /* sun gold */
html.ds #device [data-season="7"]  { --season-rgb: 76, 214, 224; --season-deep: 10, 70, 92; }    /* sea teal */
html.ds #device [data-season="8"]  { --season-rgb: 255, 144, 96; --season-deep: 102, 40, 20; }   /* coral */
html.ds #device [data-season="9"]  { --season-rgb: 242, 172, 74; --season-deep: 92, 50, 14; }    /* harvest amber */
html.ds #device [data-season="10"] { --season-rgb: 255, 122, 26; --season-deep: 112, 40, 0; }    /* pumpkin */
html.ds #device [data-season="11"] { --season-rgb: 255, 188, 66; --season-deep: 108, 46, 10; }   /* ember / firework gold */
html.ds #device [data-season="12"] { --season-rgb: 232, 66, 78; --season-deep: 16, 72, 50; }     /* deep red over evergreen */
html.ds #device .dslc-card.is-seasonal {
  --dslc-hue: var(--season-rgb);
  border-color: color-mix(in srgb, rgb(var(--season-rgb)) 38%, var(--c-line));
  background:
    radial-gradient(86% 52% at 50% 26%, rgba(var(--season-rgb), .30), transparent 72%),
    linear-gradient(172deg, rgba(var(--season-deep), .78), rgba(var(--season-deep), .34) 58%, rgba(var(--season-deep), .16)),
    var(--c-stage-raised);
  box-shadow: var(--e-1), 0 10px 34px -14px rgba(var(--season-rgb), .5);
}
html.ds #device .dslc-card.is-seasonal::before { opacity: 1; background: radial-gradient(70% 46% at 50% 24%, rgba(var(--season-rgb), .46), transparent 76%), linear-gradient(0deg, rgba(var(--season-deep), .5), transparent 52%); }
html.ds #device .dslc-card.is-seasonal .dslc-kicker { filter: none; color: color-mix(in srgb, rgb(var(--season-rgb)) 55%, var(--c-label-1)); }
html.ds #device .dslc-detail[data-season], html.ds #device .dslc-detail [data-season] { --detail-rgb: var(--season-rgb); }
html.ds #device .dslc-detail .collection-hero[data-season] {
  --hero-rgb: var(--season-rgb); --hero-live: var(--season-rgb);
  background:
    radial-gradient(90% 60% at 50% 34%, rgba(var(--season-rgb), .26), transparent 74%),
    linear-gradient(170deg, rgba(var(--season-deep), .82), rgba(var(--season-deep), .30) 70%),
    var(--c-stage-raised);
  box-shadow: 0 14px 44px -18px rgba(var(--season-rgb), .55);
}
html.ds #device .dslc-detail .collection-hero[data-season] .collection-hero-kicker { background: rgba(var(--season-deep), .7); color: var(--c-label-1); }
html.ds #device.manual-solid .dslc-card.is-seasonal, html.ds #device.manual-solid .dslc-detail .collection-hero[data-season] { background: rgb(var(--season-deep)); box-shadow: none; }
html.ds #device .dslc-chips button::before { color: var(--c-dna-pace); }
html.ds #device .dslc-chips button { border-color: color-mix(in srgb, var(--c-dna-pace) 28%, var(--c-line)); background: color-mix(in srgb, var(--c-dna-pace) 8%, var(--c-fill-1)); }
html.ds #device .dslc-search input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-focus) 24%, transparent); }

/* search invitation, result count and the suggest block */
html.ds #device .collections-result-count { margin: 18px 0 -8px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds #device .collections-search-invite, html.ds #device .collections-suggest {
  display: grid; gap: 6px; justify-items: start; margin: 28px 0 0; padding: 20px; border: 1px solid var(--c-line); border-radius: var(--r-card);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c-dna-worlds) 14%, transparent), color-mix(in srgb, var(--c-dna-pace) 8%, transparent) 70%), var(--c-fill-1);
}
html.ds #device .collections-search-invite .eyebrow { color: var(--c-dna-pace); }
html.ds #device .collections-search-invite h2, html.ds #device .collections-suggest h2 { margin: 0; font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); color: var(--c-label-1); }
html.ds #device .collections-search-invite p, html.ds #device .collections-suggest p { margin: 0 0 8px; max-width: none; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
html.ds #device .collections-search-invite button, html.ds #device .collections-suggest-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-fill-2); box-shadow: none; font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); color: var(--c-label-1); text-decoration: none; }
html.ds #device .collections-suggest-action:focus-visible, html.ds #device .collections-search-invite button:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 2px; }

/* detail: the box that holds the fan owns the label; its tint is the centre poster's colour (or an id-derived hue) */
html.ds #device .dslc-detail .collection-hero { --hero-rgb: 170, 170, 176; position: relative; isolation: isolate; display: grid; grid-auto-rows: min-content; align-content: start; gap: 6px; min-height: 0; height: auto; justify-items: center; margin: 4px 20px 0; padding: 16px 0 14px; overflow: hidden; border: 1px solid color-mix(in srgb, rgb(var(--hero-live, var(--hero-rgb))) 38%, var(--c-line)); border-radius: var(--r-sheet); background: linear-gradient(170deg, rgba(var(--hero-rgb), .26), rgba(var(--hero-rgb), .05) 70%), var(--c-fill-1); }
html.ds #device .dslc-detail .collection-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; background: radial-gradient(90% 80% at 50% 38%, rgba(var(--hero-live, var(--hero-rgb)), .42), transparent 78%), linear-gradient(0deg, rgba(var(--hero-live, var(--hero-rgb)), .18), transparent 55%); transition: opacity var(--motion-slow) var(--motion-curve); }
html.ds #device .dslc-detail .collection-hero.is-tinted::after { opacity: 1; }
html.ds #device .dslc-detail .collection-hero-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(var(--hero-live, var(--hero-rgb)), .22); font: var(--fw-eyebrow) var(--fs-eyebrow)/calc(16 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-label-1); }
html.ds #device .dslc-detail .collection-hero-kicker i { width: 6px; height: 6px; border-radius: var(--r-pill); background: rgb(var(--hero-live, var(--hero-rgb))); }
html.ds #device .dslc-detail .collection-hero .collection-cover-object { margin: 6px 0 0; left: 0; right: auto; width: 100%; }
html.ds #device .dslc-detail .collection-header-quiet { visibility: hidden; }
/* The rest of the page takes the same poster colour as the box (--detail-rgb, set with the tint); until then it is neutral. */
html.ds #device .dslc-detail { --detail-rgb: 170, 170, 176; }
html.ds #device .dslc-detail .collection-editorial-note { border-color: rgba(var(--detail-rgb), .28); background: linear-gradient(135deg, rgba(var(--detail-rgb), .16), var(--c-fill-1)); color: var(--c-label-1); box-shadow: none; }
html.ds #device .dslc-detail .collection-editorial-note h2 { color: color-mix(in srgb, rgb(var(--detail-rgb)) 30%, var(--c-label-1)); }
html.ds #device .dslc-detail .collection-films-heading { color: var(--c-label-2); }
html.ds #device .dslc-detail .collection-membership-notes { border-top-color: var(--c-line); border-bottom-color: var(--c-line); color: var(--c-label-2); }
html.ds #device .dslc-detail .collection-membership-notes summary, html.ds #device .dslc-detail .collection-membership-notes dt { color: var(--c-label-1); }

@media (prefers-reduced-transparency: reduce) {
  html.ds #device .dslc-collections.collections-api-screen { background: none; }
  html.ds #device .collections-search-invite, html.ds #device .collections-suggest { background: var(--c-fill-1); }
  html.ds #device .dslc-detail .collection-hero { background: var(--c-fill-1); }
  html.ds #device .dslc-detail .collection-hero::after { display: none; }
}
html.ds.reduce-transparency #device .dslc-collections.collections-api-screen, html.ds #device.manual-solid .dslc-collections.collections-api-screen { background: none; }
html.ds.reduce-transparency #device .collections-search-invite, html.ds #device.manual-solid .collections-search-invite,
html.ds.reduce-transparency #device .collections-suggest, html.ds #device.manual-solid .collections-suggest,
html.ds.reduce-transparency #device .dslc-detail .collection-hero, html.ds #device.manual-solid .dslc-detail .collection-hero { background: var(--c-fill-1); }
html.ds.reduce-transparency #device .dslc-detail .collection-hero::after, html.ds #device.manual-solid .dslc-detail .collection-hero::after { display: none; }

/* No filter rail (owner, 11 October 2026, hub/docs/TIDY-2026-10-13.md). What it opened is reached in place: "See all" on
   the Curated by TRIPTIC and Unusually specific shelves, "See every list" beside "Search Collections", and a way back
   to Collections from a browsed list. Type follows the text size (tokens), so the largest size wraps rather than clips. */
html.ds #device .dslc-coll-shelf > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
html.ds #device .dslc-coll-shelf > header > div { flex: 1 1 auto; min-width: 0; }
html.ds #device .collections-see-all { flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: -10px -8px 0 0; padding: 0 8px; border: 0; background: none; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); white-space: nowrap; }
html.ds #device .collections-see-all .row-chevron { position: static; margin-left: 2px; font-style: normal; color: var(--c-label-3); }
html.ds #device .collections-browse-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 12px 0 -14px -4px; padding: 0 12px 0 4px; border: 0; border-radius: var(--r-pill); background: none; font: 600 var(--fs-body)/var(--lh-body) var(--font-ui); color: var(--c-label-1); }
html.ds #device .collections-back-chevron { font-style: normal; font-size: 1.5em; line-height: 1; margin-top: -.1em; color: var(--c-label-2); }
html.ds #device .collections-invite-actions { display: flex; flex-wrap: wrap; gap: 8px; }
html.ds #device :is(.collections-see-all, .collections-browse-back):focus-visible { outline: 1px solid var(--c-focus); outline-offset: 2px; }

/* ================================================================== COLLECTIONS: the front page (15 October 2026, lane YOUCOLLECT)
   SHIP brief section 8 items 10 to 13. Two or three picks stand large at the top of "Film collections" (under the search, which
   stays under its heading), a poster, the title and the list's own first line; "From your Library" follows; every other shelf
   is a list of compact rows. Nothing here moves by itself (the Cinematic Universe's drift is this page's one ambient motion):
   a pick or a row answers the finger with the shared press, and that is all. The colour is the poster's own (or the month's,
   for a seasonal pick), kept low, so the eye goes to the first pick. */
html.ds #device .dslc-coll-shelf.api-collection-shelf { container: dslc-shelf / inline-size; }
html.ds #device .collections-picks { container: dslc-picks / inline-size; display: grid; gap: 12px; margin: 24px 0 0; }
html.ds #device .dslc-pick.api-collection-card {
  --dslc-hue: 185, 163, 255;
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 16px; box-sizing: border-box;
  flex: none; width: 100%; min-width: 0; height: auto; min-height: 148px; margin: 0; padding: 18px 16px 18px 20px; overflow: hidden;
  border: 1px solid var(--c-line); border-radius: var(--r-sheet); background: var(--c-fill-1); box-shadow: var(--e-1); color: var(--c-label-1); text-align: left;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
html.ds #device .dslc-pick.is-lead.api-collection-card { min-height: 236px; padding: 22px 20px 22px 22px; column-gap: 18px; }
html.ds #device .dslc-pick::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55; pointer-events: none; background: radial-gradient(90% 90% at 100% 0%, rgba(var(--dslc-hue), .36), transparent 70%); }
html.ds #device .dslc-pick.is-tinted::before { opacity: 1; transition: opacity var(--motion-slow) var(--motion-curve); }
html.ds #device .dslc-pick.is-seasonal.api-collection-card { --dslc-hue: var(--season-rgb); border-color: color-mix(in srgb, rgb(var(--season-rgb)) 38%, var(--c-line)); background: linear-gradient(172deg, rgba(var(--season-deep), .7), rgba(var(--season-deep), .3) 62%, rgba(var(--season-deep), .12)), var(--c-stage-raised); box-shadow: var(--e-1), 0 10px 34px -14px rgba(var(--season-rgb), .5); }
html.ds #device .dslc-pick.is-seasonal::before { display: none; }   /* the month's own gradient (above) is the whole tint */
html.ds #device .dslc-pick.is-seasonal .dslc-kicker { filter: none; color: color-mix(in srgb, rgb(var(--season-rgb)) 55%, var(--c-label-1)); }
html.ds #device .dslc-pick:focus-visible, html.ds #device .dslc-row:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 3px; }
html.ds #device .dslc-pick .dslc-kicker { white-space: normal; overflow: visible; text-overflow: clip; }
html.ds #device .dslc-pick-copy { grid-column: 1; grid-row: 1; display: grid; gap: 6px; align-content: end; min-width: 0; }
html.ds #device .dslc-pick-art { grid-column: 2; grid-row: 1; align-self: center; pointer-events: none; }
html.ds #device .dslc-pick-poster { position: relative; display: block; width: 78px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--r-row); background: var(--c-fill-2); box-shadow: var(--e-2); }
html.ds #device .dslc-pick.is-lead .dslc-pick-poster { width: 118px; border-radius: var(--r-card); }
html.ds #device .dslc-pick-poster > img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: block; }
html.ds #device .dslc-pick-poster > img[hidden] { display: none; }
html.ds #device .dslc-pick-poster .ds-poster-fallback { position: absolute; inset: 0; border-radius: inherit; padding: 8px; }
html.ds #device .dslc-pick-poster .ds-pf-year { display: none; }
html.ds #device .dslc-pick-title { display: block; font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: var(--tr-title-3); color: var(--c-label-1); text-wrap: balance; overflow-wrap: anywhere; }
html.ds #device .dslc-pick.is-lead .dslc-pick-title { font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); }
html.ds #device .dslc-pick-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); text-wrap: pretty; }
html.ds #device .dslc-pick.is-lead .dslc-pick-line { -webkit-line-clamp: 3; color: var(--c-label-1); opacity: .86; }
html.ds #device .dslc-pick-meta { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); font-style: normal; font-variant-numeric: tabular-nums; color: var(--c-label-3); }
html.ds #device .dslc-pick .tm-lock-badge { top: 12px; left: 16px; }
html.ds #device .collections-picks.is-stacked .dslc-pick.api-collection-card { grid-template-columns: minmax(0, 1fr); row-gap: 14px; align-items: start; }
html.ds #device .collections-picks.is-stacked .dslc-pick-art { grid-column: 1; grid-row: 1; justify-self: start; }
html.ds #device .collections-picks.is-stacked .dslc-pick-copy { grid-column: 1; grid-row: 2; }
html.ds #device .collections-picks.is-stacked .dslc-pick-poster, html.ds #device .collections-picks.is-stacked .dslc-pick.is-lead .dslc-pick-poster { width: 64px; }
html.ds #device .collections-picks.is-stacked .dslc-pick.api-collection-card { min-height: 0; }
html.ds #device .collections-picks.is-stacked .dslc-pick-line { -webkit-line-clamp: 4; }
@container dslc-picks (min-width: 600px) {
  html.ds #device .collections-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.ds #device .collections-picks[data-picks="3"] .dslc-pick.is-lead { grid-column: 1 / -1; min-height: 224px; }
}
/* the rest: compact rows, the shelf's own heading above, a hairline between */
html.ds #device .dslc-track.is-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
html.ds #device .dslc-row.api-collection-card {
  position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; box-sizing: border-box;
  flex: none; width: 100%; min-width: 0; height: auto; min-height: 72px; margin: 0; padding: 8px 4px 8px 0; overflow: hidden;
  border: 0; border-top: 1px solid var(--c-line); border-radius: 0; background: none; box-shadow: none; color: var(--c-label-1); text-align: left;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
html.ds #device .dslc-track.is-rows > .dslc-row:first-child { border-top: 0; }
html.ds #device .dslc-row-thumb { position: relative; display: block; width: 44px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 6px; background: var(--c-fill-2); box-shadow: var(--e-1); }
html.ds #device .dslc-row.is-seasonal .dslc-row-thumb { box-shadow: var(--e-1), 0 0 0 1px rgba(var(--season-rgb), .5); }
html.ds #device .dslc-row-thumb > img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: block; }
html.ds #device .dslc-row-thumb > img[hidden] { display: none; }
html.ds #device .dslc-row-thumb .ds-poster-fallback { position: absolute; inset: 0; border-radius: inherit; padding: 4px; }
html.ds #device .dslc-row-thumb .ds-pf-title, html.ds #device .dslc-row-thumb .ds-pf-year { display: none; }
html.ds #device .dslc-row-copy { display: grid; gap: 2px; min-width: 0; }
html.ds #device .dslc-row .dslc-kicker { font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-eyebrow); }
html.ds #device .dslc-row-title { display: block; font: var(--fw-headline) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: 0; color: var(--c-label-1); text-wrap: balance; overflow-wrap: anywhere; }
html.ds #device .dslc-row-meta { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); font-style: normal; font-variant-numeric: tabular-nums; color: var(--c-label-3); }
html.ds #device .dslc-row-chev { width: 8px; height: 8px; margin-right: 6px; border-top: 2px solid var(--c-label-3); border-right: 2px solid var(--c-label-3); transform: rotate(45deg); }
/* (release polish, 28 October 2026; the owner: locked rows' pills sat inset, open rows' chevrons at the edge) a locked row keeps
   its chevron on the same right edge as every row, the TRIPTIC+ pill just before it: the same edge, and plainly a way in */
html.ds #device .dslc-row:has(.tm-lock-badge) { grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 10px; }
html.ds #device .dslc-row:has(.tm-lock-badge) > .dslc-row-thumb { margin-right: 4px; }
html.ds #device .dslc-row .tm-lock-badge { position: static; justify-self: end; grid-column: 3; grid-row: 1; margin-right: 0; }
html.ds #device .dslc-row:has(.tm-lock-badge) .dslc-row-chev { grid-column: 4; grid-row: 1; }
@container dslc-shelf (min-width: 620px) {
  html.ds #device .dslc-track.is-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  html.ds #device .dslc-track.is-rows > .dslc-row:nth-child(2) { border-top: 0; }
}
/* the shared press: only scale and opacity move */
html.ds #device :is(.dslc-pick, .dslc-row) { transition-property: scale, opacity; }
@media (prefers-contrast: more) { html.ds #device .dslc-pick.api-collection-card { border-color: var(--c-line-strong); } }
html.ds.reduce-transparency #device .dslc-pick::before, html.ds #device.manual-solid .dslc-pick::before { display: none; }
html.ds.reduce-transparency #device .dslc-pick.api-collection-card, html.ds #device.manual-solid .dslc-pick.api-collection-card { background: var(--c-stage-raised); }
/* (release polish, 28 October 2026; the owner: truncated eyebrows) a row's kicker ("WITH FANTASTIC MR. FOX") may take two lines,
   broken between words; it is never cut off mid-word */
html.ds #device .dslc-row .dslc-kicker { white-space: normal; overflow: hidden; text-overflow: clip; overflow-wrap: normal; word-break: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* (release polish, 28 October 2026) the page's foot: one quiet line to every list (it was a card with two buttons) */
html.ds #device .collections-every-line { margin: 22px 0 0; }
html.ds #device .collections-every-line .collections-every { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--c-label-1); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); font-weight: 600; cursor: pointer; }
html.ds #device .collections-every-line .collections-every-count { color: var(--c-label-3); font-weight: 400; font-variant-numeric: tabular-nums; }
html.ds #device .collections-every-line .row-chevron { color: var(--c-label-3); font-style: normal; }
/* (release polish, 28 October 2026; the owner: the Library's switcher spacing) the five rooms share the app's segmented control (its
   height, pill and colours), each label centred in its own fifth with room either side: one weight in both states (the selected
   one no longer grows bold and shifts), a size that fits five, a step smaller on a 320-wide phone */
html.ds #device .dslc-seg.dslc-rooms-seg:not(.is-stacked) .dslc-seg-btn { padding: 0 2px; font-weight: 600; font-size: calc(13 * var(--type-unit)); letter-spacing: var(--tr-footnote); text-align: center; }
html.ds #device .dslc-seg.dslc-rooms-seg:not(.is-stacked) .dslc-seg-btn[aria-selected="true"] { font-weight: 600; }
@media (max-width: 359px) { html.ds #device .dslc-seg.dslc-rooms-seg:not(.is-stacked) .dslc-seg-btn { font-size: calc(11.5 * var(--type-unit)); letter-spacing: var(--tr-caption-2); } }

/* ================================================================== EVERY COLLECTION (pages polish, 28 October 2026; the owner's
   screenshot of the full grid). Every Collection card (.dslc-card, the grid's and the shelves'):
   - a title is never cut short: up to three lines, a little smaller in the two-across grid, broken only between words
     (it was two lines with an ellipsis: "A family, assembled by…" lost its punchline);
   - no grey film-strip panels: the two back cards only stand when a real poster has arrived in them (the first six free lists
     fetch theirs, as before); an empty one looked unloaded. Nothing more is fetched;
   - the eyebrow ("NICHE") sits in the card's top margin, so the poster and the words below it stand in the same place on every
     card with or without one; the words are anchored to the card's foot;
   - the TRIPTIC+ mark is in the foot after the film count (ds-library-collections.js), not over the poster. */
html.ds #device .dslc-card .dslc-card-title { -webkit-line-clamp: 3; overflow-wrap: break-word; word-break: normal; hyphens: manual; }
html.ds #device .dslc-card.is-compact .dslc-card-title { font: var(--fw-headline) var(--fs-callout)/var(--lh-callout) var(--font-ui); letter-spacing: var(--tr-headline); }
html.ds #device .dslc-fan > .dslc-fan-p:is(.is-l, .is-r):not(:has(> img)) { display: none; }
html.ds #device .dslc-card.api-collection-card { position: relative; }
/* (2 November 2026; the owner's screenshot: "NICHE" drawn over "A crown is not a simple job.") the eyebrow's place is measured from the
   CARD: its words block (.dslc-card-copy) is position: relative (above), which made the eyebrow's top: 9px a point inside the words,
   on the title's first line. The words block no longer positions anything, and the margin grows with the eyebrow's own line height
   (30px at the standard text size, as before; more at larger sizes), so the two never meet at any title length, size or width. */
html.ds #device .dslc-card.is-compact { padding-top: calc(14px + var(--lh-eyebrow, 16px)); }
html.ds #device .dslc-card.is-compact .dslc-card-copy { position: static; }
html.ds #device .dslc-card.is-compact .dslc-kicker { position: absolute; top: 9px; left: 14px; right: 14px; }
html.ds #device .dslc-card .dslc-card-copy { margin-top: auto; }
html.ds #device .dslc-card-meta .dslc-card-lock { margin-left: 0; vertical-align: 1px; }

/* ===== prototype-src/collection-fan.css ===== */
/* TRIPTIC Collection fan (4 November 2026): the cover's three posters with depth, a sheen that follows the light, and the copies
   that fly them in and back. Script: collection-fan.js. Only a Collection page's cover (.collection-hero) and the flight's
   copies (#device > .cf-fly) are styled here; a saved list's small fan (Library) is left as it is.
   The living tilt is written by the script as each card's `rotate` and `translate` (the cards' own `transform`, their place in
   the fan, is never touched) and as --cf-lx / --cf-ly (-1..1) on the cover, which slide the sheen. Transform and opacity only. */

/* ------------------------------------------------------------------------------------------ depth */
/* (the app's one poster shadow, ds-surfaces.css --poster-shadow, is kept and laid over: the card's edge, a soft drop, a long
   one, and an ambient one in the page's own colour; it is !important there, so here too, on this one hero only) */
/* (the copies take the cards' computed shadow inline: collection-fan.js layer()) */
html.ds #device > .screen.collections-api-detail .collection-hero .collection-cover-object > span {
  box-shadow:
    var(--poster-shadow, 0 1px 2px rgb(0 0 0 / .4)),
    inset 0 1px 0 rgb(255 255 255 / .22),
    3px 6px 0 -2px #3b2b4b,
    2px 8px 14px -4px rgb(0 0 0 / .5),
    5px 20px 32px -10px rgb(0 0 0 / .62),
    0 30px 52px -20px rgba(var(--hero-live, var(--hero-rgb, 120, 100, 150)), .45) !important;
  backface-visibility: hidden;
}
html.ds #device > .cf-fly .cf-card { backface-visibility: hidden; }
/* the sheen: a soft band of light across the card, sliding against the tilt (the light stays where it is) */
html.ds #device .collections-api-detail .collection-hero .collection-cover-object > span::before,
html.ds #device > .cf-fly .cf-card::before {
  content: ""; position: absolute; z-index: 1; left: -60%; top: -30%; width: 220%; height: 160%; pointer-events: none;
  background: linear-gradient(112deg, transparent 32%, rgb(255 255 255 / .05) 40%, rgb(255 255 255 / .24) 47%, rgb(255 246 230 / .1) 52%, transparent 62%);
  transform: translate(calc(var(--cf-lx, 0) * -24% - 6%), calc(var(--cf-ly, 0) * -14%));
}
/* (the sheen moves by a 2D transform with no layer of its own: it is painted into its card and cut by the card's own rounded
   corners, on the iPhone too; a clip-path there would also cut the card's shadows) */
/* the copies carry the cover cards' own gloss (collections-client.css), so the hand-over is the same picture */
html.ds #device > .cf-fly .cf-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, #ffffff42, transparent 28%, transparent 64%, #dec2ff1c);
  box-shadow: inset 0 1px #fff9, inset 0 0 0 1px #ffffff19;
}
/* a phone that cannot keep up: no sheen */
html.ds #device .collection-cover-object.cf-lite > span::before { content: none; }

/* the living fan answers a finger: the cover takes touches (a drag tilts it; the page still scrolls up and down) */
html.ds #device .collections-api-detail .collection-hero .collection-cover-object.cf-live { pointer-events: auto; touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab; }
html.ds #device .collections-api-detail .collection-hero .collection-cover-object.cf-held { cursor: grabbing; }
html.ds #device .collections-api-detail .collection-hero .collection-cover-object.cf-live > span { will-change: transform; }

/* ----------------------------------------------------------------------------------------- the copies */
html.ds #device > .cf-fly {
  position: absolute; z-index: 290; display: block; pointer-events: none; contain: layout; overflow: visible;
}
html.ds #device > .cf-fly .cf-path { position: absolute; display: block; transform-origin: 0 0; will-change: transform; }
html.ds #device > .cf-fly .cf-card {
  position: absolute; inset: 0; display: block; overflow: hidden; box-sizing: border-box; border-style: solid; will-change: transform;
}
html.ds #device > .cf-fly .cf-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.ds #device > .cf-fly .cf-card [hidden] { display: none; }
html.ds #device > .cf-fly .cf-card .collection-poster-fallback:not([hidden]) { display: grid; place-items: center; width: 100%; height: 100%; }
html.ds #device > .cf-fly .cf-card .collection-poster-fallback .brand-mark { width: 38px; height: 38px; object-fit: contain; }
/* the tile's own picture on the top card while the stack leaves it (and as it comes home) */
html.ds #device > .cf-fly .cf-face {
  position: absolute; inset: 0; z-index: 3; display: block; border-radius: inherit;
  background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; will-change: opacity;
}
html.ds #device > .cf-fly *, html.ds #device > .cf-fly *::before, html.ds #device > .cf-fly *::after { transition: none !important; animation: none !important; }

/* Reduce Motion: a still fan with its depth (the script writes no tilt; the sheen rests) */
@media (prefers-reduced-motion: reduce) {
  html.ds #device .collection-cover-object > span::before { transform: translate(-6%, 0); }
}
html.ds #device.manual-reduced-motion .collection-cover-object > span::before { transform: translate(-6%, 0); }
@media (forced-colors: active) { html.ds #device > .cf-fly { display: none; } }

/* ===== prototype-src/living-depth.css ===== */
/* TRIPTIC living depth (4 November 2026): the look of every use of the one tilt system (living-depth.js, the uses in
   living-depth-uses.js). Each element is given --ld-x / --ld-y (the tilt, -1..1), --ld-sheen (where the light falls) and
   --ld-r (the tilt's size) by the script, only while it is on screen and only while it may move (.ld-live). Everything here
   puts them in a transform (translate / rotate / scale, the individual properties, so an element's own `transform` and its
   own press are left as they are) or an opacity: no layout, no paint of the page around them.
   html.ld-static (Reduce Motion, Low Power): the depth stands still (the layers at rest, no drift, no glint).
   html.ld-still (Reduce Motion): no moving press either (a press shows its state at once). */

/* every layer added is an ld-layer (living-depth-uses.js): never dressed by the page's own rules, never a touch target */
html.ds ld-layer { display: block; pointer-events: none; }

/* ======================================================================================== the orb (every play button) */
/* the trailer's glass orb (ds-film-share.css draws it; its press, .ds-pressed / .ds-press-release, stays its own) */
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play.ld-on { overflow: visible !important; }
/* the resting highlight leaves the glass's background for a layer of its own (.ld-orb-spec), so it can slide */
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play.ld-on:not(.ds-pressed):not(.ds-press-hold) {
  background:
    radial-gradient(90% 50% at 60% 104%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)) !important;
}
/* a bead turning 2-3 degrees: drawn by its layers (the glyph, the highlight, the shadow and the rim each move by their depth),
   never by turning the glass itself in 3D (a 3D turn breaks the glass's backdrop blur, in WebKit and Chromium alike) */
/* the glyph: a layer behind the glass, shifting a touch against the rim */
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play.ld-live > i,
html.ds .ds-tt-pp.ld-live > svg { translate: calc(var(--ld-x, 0) * 1.7px) calc(var(--ld-y, 0) * 1.4px); }
/* the rim's own specular arc turns with the light (its press turn, 40deg, is the press's) */
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play.ld-live:not(.ds-pressed):not(.ds-press-hold)::before { rotate: calc(var(--ld-sheen, 0) * -34deg); }
/* the specular highlight and the rim light: a layer over the glyph, inside the bead */
html.ds .ld-orb-spec {
  position: absolute; inset: 0; z-index: 4; display: block; overflow: hidden; border-radius: 50%; clip-path: circle(50%); pointer-events: none;
  box-shadow: inset 0 -1.5px 2.5px -1px rgba(255, 255, 255, .42), inset 0 0 0 .5px rgba(255, 255, 255, .18);
}
html.ds .ld-orb-spec::before {
  content: ""; position: absolute; left: 6%; top: -4%; width: 62%; height: 46%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .62), rgba(255, 255, 255, .2) 55%, rgba(255, 255, 255, 0));
  translate: calc(var(--ld-x, 0) * -5px) calc(var(--ld-y, 0) * -4px);
  transition: scale var(--motion-fast) var(--motion-curve), opacity var(--motion-fast) var(--motion-curve);
}
/* the glint: now and then a slow band of light crosses the glass */
html.ds .ld-orb-spec::after {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: -60%; width: 34%; rotate: 22deg; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  animation: ld-glint 9s var(--motion-breathe) 2.4s infinite;
}
@keyframes ld-glint { 0%, 78% { translate: 0 0; opacity: 0; } 80% { opacity: .9; } 94% { opacity: .9; } 96%, 100% { translate: 420% 0; opacity: 0; } }
/* the soft shadow under it, which shifts with the tilt (under the bead's own drop shadow) */
html.ds .ld-orb-shade {
  position: absolute; left: 14%; right: 14%; top: 74%; height: 52%; z-index: -1; display: block; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0));
  translate: calc(var(--ld-x, 0) * 3px) calc(var(--ld-y, 0) * 2.5px);
  transition: scale var(--motion-fast) var(--motion-curve), opacity var(--motion-fast) var(--motion-curve);
}
html.ds .ds-tt-pp > .ld-orb-shade { display: none; }
/* pressed: it sinks a little, the highlight shrinks, the shadow tightens; let go, it springs back */
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play.ld-down { translate: 0 1.5px; }
html.ds .ld-down > .ld-orb-spec::before { scale: .7; opacity: .62; transition-duration: var(--motion-press); }
html.ds .ld-down > .ld-orb-shade { scale: .82; opacity: .6; transition-duration: var(--motion-press); }
html.ds .ds-tt-pp.ld-down { scale: .95; }
html.ds #device .film-v5 .media-trailer:not(.is-playing) .media-trailer-play.ld-up { animation: ld-orb-up var(--motion-normal) var(--motion-curve) both; }
@keyframes ld-orb-up { 0% { translate: 0 1.5px; } 55% { translate: 0 -1px; } 100% { translate: 0 0; } }
html.ds .ld-up > .ld-orb-spec::before { animation: ld-spec-up var(--motion-normal) var(--motion-curve) both; }
@keyframes ld-spec-up { 0% { scale: .7; opacity: .62; } 60% { scale: 1.08; opacity: 1; } 100% { scale: 1; opacity: 1; } }

/* ========================================================================================== the TRIPTIC+ card */
html.ds .ld-mcard-host { perspective: 640px; }
html.ds .tm-hero-art.ld-mcard-host { position: relative; }
html.ds .ld-mcard {
  /* (the owner, 4 November: never over the velvet rope) it is presented ABOVE the rope, between the posts' heads: the rope's
     highest point between the posts is 40% down the painting, and the card ends at 36%, its shadow short and tight */
  position: absolute; left: 50%; top: 2%; z-index: 2; display: block; width: 37%; aspect-ratio: 1.586; translate: -50% 0;
  border-radius: 7.5% / 11.9%; pointer-events: none; container-type: inline-size;
  transform-style: preserve-3d;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .45), 0 4px 7px -3px rgba(0, 0, 0, .65);
  --mc-a: #e4e7ec; --mc-b: #a8aeb8; --mc-c: #f4f6f8; --mc-d: #7d848f; --mc-ink: #8e959f; --mc-hi: rgba(255, 255, 255, .8); --mc-lo: rgba(40, 46, 56, .55);
}
html.ds.is-plus .ld-mcard { --mc-a: #f6e3a1; --mc-b: #c79b45; --mc-c: #fbedb8; --mc-d: #9b6d22; --mc-ink: #b08638; --mc-hi: rgba(255, 249, 226, .9); --mc-lo: rgba(92, 58, 10, .55); }
html.ds .ld-mcard.ld-live { rotate: calc(var(--ld-y, 0) * -1) calc(var(--ld-x, 0) + .0001) 0 calc(var(--ld-r, 0) * 7deg); }
html.ds .ld-mcard > * { position: absolute; display: block; pointer-events: none; }
html.ds .ld-mcard-face { inset: 0; border-radius: inherit; background: linear-gradient(128deg, var(--mc-a) 0%, var(--mc-b) 34%, var(--mc-c) 52%, var(--mc-b) 70%, var(--mc-d) 100%); }
/* brushed metal: fine lines across the face */
html.ds .ld-mcard-brush { inset: 0; border-radius: inherit; opacity: .55; mix-blend-mode: overlay;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 .5px, rgba(0, 0, 0, .08) .5px 1.5px, rgba(255, 255, 255, .1) 1.5px 2.5px); }
/* the foil: a faint rainbow of the light, only where the light falls */
html.ds .ld-mcard-foil { inset: 0; border-radius: inherit; mix-blend-mode: soft-light; opacity: calc(.22 + var(--ld-r, 0) * .4);
  background: linear-gradient(115deg, transparent 20%, rgba(255, 120, 200, .55) 38%, rgba(120, 220, 255, .55) 50%, rgba(255, 240, 140, .55) 62%, transparent 80%) 0 0 / 100% 100%; }
/* the embossed mark: struck into the metal (a light edge above, a shadow edge below), the + a little raised */
html.ds .ld-mcard-mark {
  left: 9%; top: 13%; display: flex; align-items: baseline; gap: .04em; margin: 0;
  font: 600 10.5cqw/1 var(--font-ui, -apple-system, system-ui, sans-serif); letter-spacing: .2em; color: var(--mc-ink);
  text-shadow: 0 -.6px 0 var(--mc-lo), 0 .8px 0 var(--mc-hi);
}
html.ds .ld-mcard-plus { letter-spacing: 0; font-weight: 700; text-shadow: 0 -.8px 0 var(--mc-lo), 0 1px 0 var(--mc-hi), 0 0 6px rgba(255, 255, 255, .25); }
/* (5 November 2026, the owner: "remove the payment thing from this card") no chip: a membership card, not a payment card */
html.ds .ld-mcard-tier { right: 9%; bottom: 12%; font: 600 5.6cqw/1 var(--font-ui, system-ui, sans-serif); letter-spacing: .24em; color: var(--mc-ink); text-shadow: 0 -.5px 0 var(--mc-lo), 0 .6px 0 var(--mc-hi); }
html.ds.is-plus .ld-mcard-tier::before { content: "MEMBER"; }
/* a member's card: Flick struck into the gold, a seal to the right of the chip, above MEMBER (the owner, 4 November). Never his
   colours: his relief (public/assets/card-emboss/flick-relief.png, from his own art) as a mask on three layers of the card's own
   metal: a dark edge and a light edge either side, the face between. As the card tips, the light edge and the dark edge trade
   places a fraction (the light stays where it is): real embossing. Reduce Motion: the relief stands lit from the top left. */
html.ds .ld-mcard > .ld-mcard-flick { display: none; }
html.ds.is-plus .ld-mcard > .ld-mcard-flick { display: block; right: 7%; top: 28%; width: 30%; aspect-ratio: 1; }
html.ds .ld-mcard-flick > ld-layer { position: absolute; inset: 0;
  -webkit-mask: url("/assets/card-emboss/flick-relief.png") 50% 50% / contain no-repeat; mask: url("/assets/card-emboss/flick-relief.png") 50% 50% / contain no-repeat; }
html.ds .ld-mf-lo { background: var(--mc-lo); opacity: .9; translate: calc(.7px + var(--ld-x, 0) * .45px) calc(.9px + var(--ld-y, 0) * .45px); }
html.ds .ld-mf-hi { background: var(--mc-hi); opacity: .95; translate: calc(-.6px - var(--ld-x, 0) * .45px) calc(-.8px - var(--ld-y, 0) * .45px); }
html.ds .ld-mf-face { background: linear-gradient(128deg, var(--mc-c), var(--mc-b) 48%, var(--mc-a) 70%, var(--mc-b)); }
/* the specular sweep: a band of light across the card, sliding against the tilt; the card's edge catching it */
html.ds .ld-mcard-sheen { inset: 0; overflow: hidden; border-radius: inherit; }
html.ds .ld-mcard-sheen::before { content: ""; position: absolute; left: -70%; top: -40%; width: 240%; height: 180%;
  background: linear-gradient(110deg, transparent 34%, rgba(255, 255, 255, .08) 41%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .12) 53%, transparent 62%);
  translate: calc(var(--ld-sheen, 0) * -26% - 4%) calc(var(--ld-y, 0) * -8%); }
html.ds .ld-mcard-edge { inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .75px rgba(255, 255, 255, .55), inset 0 1px 0 var(--mc-hi), inset 0 -1px 0 var(--mc-lo); }
/* the small card in the membership row's icon (a member's): it stands in for the glyph, in the same box */
html.ds .ds-row-icon.ld-on { position: relative; perspective: 120px; }
html.ds .ld-mini-card { display: none; }
html.ds.is-plus .ds-row-icon.ld-on > :not(.ld-mini-card) { opacity: 0; }
html.ds.is-plus .ld-mini-card {
  position: absolute; left: 50%; top: 50%; display: block; overflow: hidden; width: 86%; aspect-ratio: 1.586; translate: -50% -50%; border-radius: 3px; pointer-events: none;
  background: linear-gradient(128deg, #f6e3a1, #c79b45 34%, #fbedb8 52%, #c79b45 70%, #9b6d22);
  box-shadow: inset 0 0 0 .5px rgba(255, 249, 226, .7), 0 2px 4px -1px rgba(0, 0, 0, .55);
}
html.ds.is-plus .ds-row-icon.ld-live > .ld-mini-card { rotate: calc(var(--ld-y, 0) * -1) calc(var(--ld-x, 0) + .0001) 0 calc(var(--ld-r, 0) * 14deg); }
html.ds .ld-mini-card > .ld-mcard-sheen { position: absolute; inset: 0; display: block; }

/* ============================================================================================ the ticket (Today) */
html.ds .ccn-ticket.ld-on { perspective: 760px; }
html.ds .ccn-ticket.ld-live { rotate: calc(var(--ld-y, 0) * -1) calc(var(--ld-x, 0) + .0001) 0 calc(var(--ld-r, 0) * 2.4deg); }
/* the stub has no 3D turn of its own (4 November 2026, the owner's iPhone recording): a 3D-rotated stub inside the tilting,
   perspective-bearing ticket was drawn by WebKit as a small layer at the ticket's top left, over ADMIT ONE. It tips with the
   ticket as one card, in its own grid cell after the perforation; the perforation's light and the stub's sheen still follow
   the tilt. (tests/living-depth-browser.test.mjs and tests/commute-corner-browser.test.mjs keep it in place.) */
/* card stock: the print is embossed (a light edge below each letter, a soft dent above) */
html.ds .ccn-ticket.ld-on :is(.ccn-tk-admit, .ccn-tk-name, .ccn-tk-serial) { text-shadow: 0 .8px 0 rgba(255, 252, 240, .7), 0 -.5px 0 rgba(60, 20, 70, .28); }
html.ds .ccn-ticket.ld-on :is(.ccn-tk-games, .ccn-tk-line) { text-shadow: 0 .6px 0 rgba(255, 252, 240, .55); }
/* the light on the card (only on the card's own printed shape: its picture is the mask) */
html.ds .ld-tk-sheen { position: absolute; inset: 0; z-index: 3; display: block; overflow: hidden; pointer-events: none; }
html.ds .ccn-ticket.has-art .ccn-tk-main > .ld-tk-sheen { -webkit-mask: var(--tk-main) 0 0 / 100% 100% no-repeat; mask: var(--tk-main) 0 0 / 100% 100% no-repeat; }
html.ds .ccn-ticket.has-art .ccn-tk-stub > .ld-tk-sheen { -webkit-mask: var(--tk-stub) 0 0 / 100% 100% no-repeat; mask: var(--tk-stub) 0 0 / 100% 100% no-repeat; }
html.ds .ccn-ticket:not(.has-art) .ld-tk-sheen { border-radius: inherit; }
html.ds .ld-tk-sheen::before { content: ""; position: absolute; left: -60%; top: -50%; width: 220%; height: 200%;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 246, 220, .08) 42%, rgba(255, 250, 234, .48) 49%, rgba(255, 246, 220, .1) 56%, transparent 64%);
  translate: calc(var(--ld-sheen, 0) * -22% - 6%) 0; }
html.ds .ccn-tk-stub > .ld-tk-sheen::before { translate: calc(var(--ld-sheen, 0) * -22% - 34%) 0; }
/* the perforation: the gold between the punched holes catches a band of light that runs along it as the phone tips (only on
   the card's own print: the stub's picture is the mask, so the holes stay holes) */
html.ds .ld-tk-perf { position: absolute; left: 0; top: 0; bottom: 0; z-index: 4; display: block; width: 9%; overflow: hidden; pointer-events: none;
  opacity: clamp(.25, calc(.6 + var(--ld-x, 0) * .4), 1); }
html.ds .ccn-ticket.has-art .ld-tk-perf { -webkit-mask: var(--tk-stub) 0 0 / 1111% 100% no-repeat; mask: var(--tk-stub) 0 0 / 1111% 100% no-repeat; }
html.ds .ccn-ticket:not(.has-art) .ld-tk-perf { display: none; }
html.ds .ld-tk-perf::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%;
  background: linear-gradient(180deg, rgba(255, 246, 214, 0), rgba(255, 250, 230, .95) 50%, rgba(255, 246, 214, 0));
  translate: 0 calc(60% + var(--ld-y, 0) * 70%); }

/* ============================================================================================ the split flaps */
/* the top leaf tips on its hinge with the tilt, so the gap at the hinge shows, as on a departures board; the flip is untouched
   (only the resting halves move, never the falling leaves) */
html.ds .ds-cs-flaps.ld-on > .f, html.ds .ds-tt-flaps.ld-on > .ds-tt-flap { perspective: 42px; }
html.ds .ds-tt-flaps.ld-on > .ds-tt-flap { perspective: 120px; }
html.ds .ds-cs-flaps.ld-live > .f > .f-top, html.ds .ds-tt-flaps.ld-live > .ds-tt-flap > .f-top { rotate: 1 0 0 calc(6deg + var(--ld-y, 0) * 28deg); translate: 0 calc(max(var(--ld-y, 0), calc(var(--ld-y, 0) * -1)) * -.6px); }
html.ds .ds-cs-flaps.ld-live > .f > .f-bot, html.ds .ds-tt-flaps.ld-live > .ds-tt-flap > .f-bot { rotate: 1 0 0 calc(var(--ld-y, 0) * -10deg); translate: 0 calc(max(var(--ld-y, 0), calc(var(--ld-y, 0) * -1)) * .6px); }
/* the gap: the hinge's dark line opens as the leaf tips, and the leaf's lower edge falls into its shadow */
html.ds .ds-cs-flaps.ld-live > .f::after { scale: 1 calc(1.1 + max(var(--ld-y, 0), calc(var(--ld-y, 0) * -1)) * 1.1); }
html.ds .ds-cs-flaps.ld-on > .f > .f-top::after, html.ds .ds-tt-flaps.ld-on > .ds-tt-flap > .f-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)); opacity: calc(.15 + max(var(--ld-y, 0), 0) * .7);
}
html.ds .ds-cs-flaps.ld-on > .f > .f-bot::before, html.ds .ds-tt-flaps.ld-on > .ds-tt-flap > .f-bot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1; pointer-events: none;
  background: rgba(255, 255, 255, .22); opacity: calc(.2 + max(var(--ld-y, 0), 0) * .8);
}
html.ds .ds-tt-flaps.ld-on > .ds-tt-flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; z-index: 3; height: 2px; margin-top: -1px; background: rgba(0, 0, 0, .75); pointer-events: none; }
html.ds .ds-tt-flaps.ld-live > .ds-tt-flap::after { scale: 1 calc(1 + max(var(--ld-y, 0), calc(var(--ld-y, 0) * -1)) * 1.4); }

/* ====================================================================================== the enamel pins (streak, run) */
/* the week's arches: each a pin, its enamel glossy and its metal edge catching the light, the badge tipping a little */
html.ds :is(.fc-emblem3, .fc-week-arch).ld-on { perspective: 160px; }
html.ds :is(.fc-emblem3, .fc-week-arch).ld-live > .fc-arch { rotate: calc(var(--ld-y, 0) * -1) calc(var(--ld-x, 0) + .0001) 0 calc(var(--ld-r, 0) * 9deg); }
html.ds :is(.fc-emblem3, .fc-week-arch).ld-on > .fc-arch { box-shadow: inset 0 .75px 0 rgba(255, 246, 214, .75), inset 0 -.75px 0 rgba(60, 36, 4, .5); }
html.ds :is(.fc-emblem3, .fc-week-arch).ld-on > .fc-arch.is-lit { box-shadow: inset 0 .75px 0 rgba(255, 249, 226, .9), inset 0 -.75px 0 rgba(90, 56, 8, .55), 0 0 8px var(--card-gold-faint); }
html.ds :is(.fc-emblem3, .fc-week-arch).ld-on > .fc-arch::after { content: ""; position: absolute; left: -40%; top: -30%; width: 180%; height: 70%; z-index: 1; pointer-events: none;
  background: linear-gradient(170deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .12) 50%, transparent 72%); border-radius: 50%;
  translate: calc(var(--ld-sheen, 0) * -22%) calc(var(--ld-y, 0) * -10%); }
/* a season's trophy and the Daily Cryptic's run: the same pin */
html.ds :is(.fc-trophy, .cg-run-chip).ld-on { position: relative; overflow: hidden; isolation: isolate; }
html.ds :is(.fc-trophy, .cg-run-chip).ld-live { rotate: calc(var(--ld-y, 0) * -1) calc(var(--ld-x, 0) + .0001) 0 calc(var(--ld-r, 0) * 6deg); }
html.ds :is(.fc-trophy, .cg-run-chip).ld-on { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 236, 190, .35), 0 2px 5px -2px rgba(0, 0, 0, .6); }
html.ds .ld-pin-gloss { position: absolute; inset: 0; z-index: 2; display: block; overflow: hidden; border-radius: inherit; pointer-events: none; }
html.ds .ld-pin-gloss::before { content: ""; position: absolute; left: -50%; top: -60%; width: 200%; height: 120%; border-radius: 50%;
  background: linear-gradient(175deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .08) 55%, transparent 70%);
  translate: calc(var(--ld-sheen, 0) * -16%) calc(var(--ld-y, 0) * -8%); }
html.ds .ld-pin-gloss::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 26%; rotate: 18deg; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  translate: calc(var(--ld-sheen, 0) * 120% + 220%) 0; opacity: calc(.25 + var(--ld-r, 0) * .5); }

/* ============================================================================================ the held print */
html.ds :is(.fcs-frame, .triptic-collectible, .share-trio-preview).ld-on { isolation: isolate; }
html.ds :has(> :is(.fcs-frame, .triptic-collectible, .share-trio-preview).ld-on) { perspective: 900px; }
html.ds :is(.fcs-frame, .triptic-collectible, .share-trio-preview).ld-live { rotate: calc(var(--ld-y, 0) * -1) calc(var(--ld-x, 0) + .0001) 0 calc(var(--ld-r, 0) * 3.2deg); }
html.ds .ld-print-sheen { position: absolute; inset: 0; z-index: 6; display: block; overflow: hidden; border-radius: inherit; clip-path: inset(0 round var(--r-card, 20px)); pointer-events: none; }
/* paper: a faint grain, and a soft band of light that slides across it */
html.ds .ld-print-sheen::before { content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 120px 120px; }
html.ds .ld-print-sheen::after { content: ""; position: absolute; left: -70%; top: -30%; width: 240%; height: 160%;
  background: linear-gradient(112deg, transparent 36%, rgba(255, 252, 244, .07) 44%, rgba(255, 252, 244, .2) 50%, rgba(255, 252, 244, .06) 56%, transparent 64%);
  translate: calc(var(--ld-sheen, 0) * -22% - 4%) calc(var(--ld-y, 0) * -6%); }
/* sent: the print lifts toward you and settles */
html.ds :is(.fcs-frame, .triptic-collectible, .share-trio-preview).ld-send { animation: ld-send var(--motion-slow) var(--motion-curve) both; }
@keyframes ld-send { 0% { translate: 0 0; scale: 1; } 30% { translate: 0 -12px; scale: 1.035; } 100% { translate: 0 0; scale: 1; } }

/* ============================================================================================ the rating deck */
/* the poster sits behind, the title in the middle, the stamp in front: they part as the card is dragged or the phone tips */
html.ds .taste-swipe-card.ld-live > img { scale: 1.045; translate: calc(var(--ld-x, 0) * -1.6%) calc(var(--ld-y, 0) * -1.2%); }
html.ds .taste-swipe-card.ld-live .taste-film-copy { translate: calc(var(--ld-x, 0) * 5px) calc(var(--ld-y, 0) * 3px); }
html.ds .taste-swipe-card.ld-live :is(.swipe-verdict, .sw-stamps) { translate: calc(var(--ld-x, 0) * 14px) calc(var(--ld-y, 0) * 8px); }

/* ============================================================================================ still */
/* Reduce Motion and Low Power: the depth stands (no tilt is written; nothing glints or drifts) */
html.ds.ld-static .ld-orb-spec::after { animation: none; opacity: 0; }
html.ds.ld-still :is(.ld-up, .ld-down), html.ds.ld-still .ld-up *, html.ds.ld-still .ld-send { animation: none !important; }
html.ds.ld-still .ld-orb-spec::before, html.ds.ld-still .ld-orb-shade { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html.ds .ld-orb-spec::after { animation: none !important; }
}
/* a device that cannot keep up: no sheens, only the transforms */
html.ds .ld-lite :is(.ld-tk-sheen, .ld-print-sheen, .ld-mcard-sheen, .ld-pin-gloss), html.ds .ld-lite.ld-mcard .ld-mcard-foil { display: none; }
@media (forced-colors: active) { html.ds :is(.ld-orb-spec, .ld-orb-shade, .ld-mcard, .ld-tk-sheen, .ld-tk-perf, .ld-pin-gloss, .ld-print-sheen) { display: none; } }

/* ===== prototype-src/ds-you-settings.css ===== */
/* TRIPTIC ds-you-settings layer (W5). Scoped under html.ds. See
   workspace/work/frontend-motion-uplift-2026-09-30/DESIGN-DIRECTION.md section 2 (You and Settings) and section 4
   (toggles, alerts). Film DNA's own page, card and picture are ds-film-dna.css; this file keeps their frame
   (.dsy-dna-page) and the card's shell (.dsy-dna-card).

   Covers: You (profile), Interests, Settings and every sub-page (account, subscription, sign in,
   delete account, privacy, search history, region, spoiler, Cryptic settings, accessibility preview, state
   gallery, deep links, demo, system state, poster fallback). Markup comes from ds-you-settings.js, which
   re-arranges the existing screens without touching their handlers.

   This file defines no new colours.

   !IMPORTANT OVERRIDES (each beats an earlier !important):
   - #device .fingerprint-screen padding (taste-fingerprint.css, !important): the Film DNA page frame.
   - html.ds #device .destructive-button (design-system.css button kinds, !important): the danger row and
     the alert's confirm cell change radius, height, width and background.
   - #device .screen padding-bottom on the tab roots (product-manager-polish.css !important): You keeps the
     tab-bar clearance it needs.
   Motion: only transform and opacity animate; Reduce Motion gives a 180ms opacity fade. */

/* ===== shared page frame ======================================================== */
html.ds #device :is(.dsy-page, .dsy-region, .dsy-spoiler) {
  padding: 20px var(--gutter) max(40px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
html.ds #device .dsy-dna-page { padding: 20px var(--gutter) max(48px, env(safe-area-inset-bottom)) !important; }
html.ds #device :is(.dsy-page, .dsy-region, .dsy-spoiler, .dsy-dna-page) > .global-trio-atmosphere { opacity: .5; }

/* The global .screen::before ambient layer (24px blur, infinite drift) costs frames on iPhone-class GPUs and
   the You/Settings pages are static lists: hold it still here so idle stays at one frame per vsync. */
html.ds #device :is(.dsy-page, .dsy-region, .dsy-spoiler, .dsy-dna-page, .dsy-you, .dsy-interests)::before { animation: none !important; inset: 0; }

/* inline nav: back button, 17px title, spacer */
html.ds #device .dsy-nav {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  min-height: 44px;
}
html.ds #device .dsy-nav > h1 {
  margin: 0;
  padding: 0;
  font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui);
  letter-spacing: 0;
  text-align: center;
  color: var(--c-label-1);
}
html.ds #device .dsy-nav > span:not(.eyebrow):not(.dsy-nav-eyebrow) { display: block; width: 44px; height: 44px; }
html.ds #device .membership-refined .dsy-nav.membership-toolbar { display: flex; justify-content: space-between; margin-bottom: 8px; }
html.ds #device .dsy-nav .dsy-nav-eyebrow { color: var(--c-label-3); }

/* the eyebrow + subtitle stacks are gone; a lone intro line is a footnote */
html.ds #device .dsy-intro {
  margin: 0 16px 16px;
  font: var(--fw-footnote) var(--fs-subhead)/var(--lh-subhead) var(--font-ui);
  letter-spacing: 0;
  color: var(--c-label-2);
}
html.ds #device .dsy-page .settings-intro.dsy-intro p { margin: 0; font: inherit; color: inherit; letter-spacing: 0; }

/* ===== inset grouped lists (W0 .ds-list/.ds-row, tuned for Settings) ================= */
html.ds #device :is(.dsy-page, .dsy-region, .dsy-spoiler, .dsy-dna-page) .ds-list { margin-left: 0; margin-right: 0; }
html.ds #device .dsy-page .settings-section { margin: 0 0 4px; }
html.ds #device .dsy-page .settings-section > h2.ds-list-header,
html.ds #device .dsy-dna-page .ds-list-header { margin: 28px 0 8px; padding: 0 16px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--fw-footnote); letter-spacing: 0; text-transform: none; color: var(--c-label-3); }
html.ds #device .dsy-page .settings-section > .subpage-intro { margin: 0 16px 12px; }
html.ds #device .dsy-list .ds-row {
  padding: 10px 16px;
  min-height: var(--row-min);
  gap: 12px;
  background: none;
  border-radius: 0;
  color: var(--c-label-1);
}
html.ds #device .dsy-list .ds-row + .ds-row { border-top: 0; }
html.ds #device .dsy-list .ds-row-title {
  display: block;
  font: var(--fw-body) var(--fs-headline)/var(--lh-headline) var(--font-ui);
  letter-spacing: 0;
  color: var(--c-label-1);
}
html.ds #device .dsy-list .ds-row-sub {
  display: block;
  margin: 2px 0 0;
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui);
  color: var(--c-label-2);
}
html.ds #device .dsy-list .ds-row:disabled { opacity: 1; }
html.ds #device .dsy-list .ds-row:disabled .ds-row-title { color: var(--c-label-2); }
html.ds #device .dsy-list .ds-row:disabled .ds-row-sub { color: var(--c-label-3); }
html.ds #device .dsy-list .ds-row:disabled .ds-row-chevron { opacity: .2; }

/* 28px tinted icon tiles: Your TRIPTIC = seal, Feel & sound = beam, Rituals = caution, Trust = neutral */
html.ds .dsy-tile { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; background: var(--dsy-tile-bg, var(--c-fill-2)); color: var(--dsy-tile-ink, var(--c-label-2)); }
html.ds .dsy-tile .dsy-glyph, html.ds .dsy-tile svg { width: 18px; height: 18px; display: block; }
html.ds .dsy-tone-seal { --dsy-tile-bg: color-mix(in srgb, var(--c-seal) 30%, transparent); --dsy-tile-ink: var(--c-seal-hi); }
html.ds .dsy-tone-beam { --dsy-tile-bg: color-mix(in srgb, var(--c-beam) 24%, transparent); --dsy-tile-ink: var(--c-beam); }
html.ds .dsy-tone-caution { --dsy-tile-bg: color-mix(in srgb, var(--c-caution) 24%, transparent); --dsy-tile-ink: var(--c-caution); }
html.ds .dsy-tone-neutral { --dsy-tile-bg: var(--c-fill-2); --dsy-tile-ink: var(--c-label-2); }
/* (pages polish, 28 October 2026) Flick & hints, Trust & help and Trailers & data in colours of their own (grey read as disabled) */
html.ds .dsy-tone-flick { --dsy-tile-bg: color-mix(in srgb, var(--c-dna-emotion) 24%, transparent); --dsy-tile-ink: var(--c-dna-emotion); }
html.ds .dsy-tone-help { --dsy-tile-bg: color-mix(in srgb, var(--c-ok) 20%, transparent); --dsy-tile-ink: var(--c-ok); }
html.ds .dsy-tone-media { --dsy-tile-bg: color-mix(in srgb, var(--c-dna-answers) 22%, transparent); --dsy-tile-ink: var(--c-dna-answers); }
html.ds .dsy-tone-danger { --dsy-tile-bg: color-mix(in srgb, var(--c-danger) 22%, transparent); --dsy-tile-ink: var(--c-danger); }

/* native switch sits at the row end; the legacy <i class="switch"> is hidden in JS */
html.ds #device .dsy-list .dsy-switch { margin-left: auto; }
html.ds #device .dsy-list .ds-row[role="switch"] > .dsy-switch { pointer-events: auto; }
html.ds #device .dsy-list .ds-row[aria-disabled="true"] { opacity: .6; }

/* ===== notes, disclosures, footers ====================================================== */
html.ds #device .dsy-page .dsy-note,
html.ds #device .dsy-dna-page .settings-note {
  margin: 0 0 16px;
  padding: 16px;
  border: 0;
  border-radius: var(--r-row);
  background: var(--c-fill-1);
  box-shadow: none;
}
html.ds #device .dsy-page .dsy-note > strong,
html.ds #device .dsy-dna-page .settings-note > strong { display: block; margin: 0 0 4px; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: 0; color: var(--c-label-1); }
html.ds #device .dsy-page .dsy-note p,
html.ds #device .dsy-dna-page .settings-note p { margin: 0; font: var(--fw-body) var(--fs-subhead)/var(--lh-body) var(--font-ui); color: var(--c-label-2); }
html.ds #device .dsy-page .dsy-note p + p { margin-top: 8px; }
html.ds #device .dsy-page :is(.privacy-explanation, .membership-explainer) {
  margin: 20px 0;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-row);
  background: var(--c-fill-1);
  box-shadow: none;
}
html.ds #device .dsy-page :is(.privacy-explanation, .membership-explainer) > summary {
  min-height: var(--row-min);
  display: flex;
  align-items: center;
  padding: 0;
  font: var(--fw-body) var(--fs-headline)/var(--lh-headline) var(--font-ui);
  color: var(--c-label-1);
}
html.ds #device .dsy-page :is(.privacy-explanation, .membership-explainer) p { margin: 0 0 12px; font: var(--fw-body) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
html.ds #device .dsy-page .membership-legal,
html.ds #device .dsy-page .membership-connection-note,
html.ds #device .dsy-page .signin-connection-note,
html.ds #device .dsy-page .account-capability-note { margin: 12px 16px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }
html.ds #device .dsy-page .membership-intro h1 { font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); margin: 4px 0 8px; text-align: left; }
html.ds #device .dsy-page .membership-intro p { margin: 0 0 20px; font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); color: var(--c-label-2); }
html.ds #device .dsy-page .membership-recovery { border: 0; border-radius: var(--r-row); background: var(--c-fill-1); overflow: hidden; }
html.ds #device .dsy-page .membership-recovery .quiet-button { min-height: var(--row-min); padding: 0 16px; font: var(--fw-body) var(--fs-headline)/var(--lh-headline) var(--font-ui); color: var(--c-label-1); }
html.ds #device .dsy-page .membership-recovery .quiet-button:disabled { color: var(--c-label-3); }
html.ds #device .dsy-page .membership-recovery .quiet-button + .quiet-button { border-top: 1px solid var(--c-line); }
html.ds #device .dsy-page .membership-refined .membership-actions .membership-manage { background: var(--c-fill-2); border: 1px solid var(--c-line); border-radius: var(--r-row); min-height: var(--row-min); }
html.ds #device .dsy-page .membership-catalogue-note, html.ds #device .dsy-page .membership-plans-heading { color: var(--c-label-2); letter-spacing: 0; }
html.ds #device .dsy-page .membership-progress, html.ds #device .dsy-page .settings-operation { background: var(--c-fill-1); border: 0; border-radius: var(--r-row); }
html.ds #device .dsy-page .plan-card { border-radius: var(--r-row); }

html.ds #device .dsy-footer {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 36px 0 4px; padding: 0; text-align: center;
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); letter-spacing: 0;
}
html.ds #device .dsy-footer-mark { width: 20px; height: 20px; opacity: .72; }
html.ds #device .dsy-footer-name { color: var(--c-label-2); }
html.ds #device .dsy-footer-build { font-size: calc(12 * var(--type-unit)); line-height: calc(16 * var(--type-unit)); color: var(--c-label-3); }

/* ===== danger row ======================================================================== */
html.ds #device .destructive-button.dsy-danger-row {
  width: 100% !important;
  height: auto !important;
  min-height: var(--row-min) !important;
  margin: 20px 0 8px !important;
  padding: 10px 16px !important;
  justify-content: flex-start !important;
  gap: 12px;
  border: 0 !important;
  border-radius: var(--r-row) !important;
  background: var(--c-fill-1) !important;
  font-weight: var(--fw-body) !important;
  text-align: left;
}
html.ds #device .destructive-button.dsy-danger-row > svg { flex: 0 0 auto; width: 18px; height: 18px; }
html.ds #device .destructive-button.dsy-danger-row:disabled { opacity: .5 !important; }
html.ds #device .dsy-page .settings-feedback { padding: 12px 16px; border: 0; border-radius: var(--r-row); background: var(--c-fill-1); font: var(--fw-footnote) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }

/* ===== designed alert: 270 wide, chrome material, static dim ================================ */
html.ds .dsy-alert-scrim {
  position: absolute; inset: 0; z-index: 12000;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .52);
}
html.ds .dsy-alert {
  box-sizing: border-box;
  width: min(270px, 100%);
  margin: 0;
  padding: 20px 0 0;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-card);
  background: var(--mat-chrome);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  box-shadow: var(--e-3);
  color: var(--c-label-1);
  text-align: center;
  overflow: hidden;
}
html.ds #device.manual-solid .dsy-alert, html.ds.reduce-transparency .dsy-alert { background: var(--mat-chrome-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) { html.ds .dsy-alert { background: var(--mat-chrome-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }
html.ds .dsy-alert .dsy-alert-title { display: block; padding: 0 20px; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); color: var(--c-label-1); }
html.ds .dsy-alert .dsy-alert-body { margin: 8px 0 0; padding: 0 20px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds .dsy-alert .dsy-alert-check { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 0 20px; text-align: left; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-1); }
html.ds .dsy-alert .dsy-alert-check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--c-seal); }
html.ds .dsy-alert .dsy-alert-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; border-top: 1px solid var(--c-line-strong); }
html.ds #device .dsy-alert .dsy-alert-btn {
  width: 100% !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 8px !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  font-size: var(--fs-headline) !important; font-weight: var(--fw-body) !important; line-height: 1.15 !important;
  white-space: normal; text-align: center;
  color: var(--c-label-1) !important; -webkit-text-fill-color: var(--c-label-1) !important;
}
html.ds #device .dsy-alert .dsy-alert-btn + .dsy-alert-btn { border-left: 1px solid var(--c-line-strong) !important; }
html.ds #device .dsy-alert .dsy-alert-btn.is-danger { color: var(--c-danger) !important; -webkit-text-fill-color: var(--c-danger) !important; font-weight: var(--fw-headline) !important; }
html.ds #device .dsy-alert .dsy-alert-btn:disabled { color: var(--c-label-3) !important; -webkit-text-fill-color: var(--c-label-3) !important; }
html.ds #device .dsy-alert .dsy-alert-btn.ds-pressed, html.ds #device .dsy-alert .dsy-alert-btn.ds-pressed-row { scale: 1 !important; background: var(--c-fill-2) !important; }

/* ===== You ========================================================================================= */
/* Redesigned 8 October 2026 (the owner: "doesn't feel premium enough"). Restraint: one header, the person, one strip of
   numbers, one large card (Film DNA), one group of rows. The room is ds-look.css's, as on every page. */
html.ds #device .dsy-you { padding: 20px var(--gutter) 136px !important; box-sizing: border-box; }
html.ds #device .dsy-you-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
html.ds #device .dsy-you-head h1 { margin: 0; font: var(--fw-large-title) var(--fs-large-title)/var(--lh-large-title) var(--font-ui); letter-spacing: var(--tr-large-title); color: var(--c-label-1); text-align: left; }

/* the person: a small monogram at the right of the title, lit from within by the brand's two lights. It opens the Account page;
   its name and sign-in line stay in the markup for VoiceOver and for account.js, and are shown on the Account page. */
html.ds #device .dsy-ident { flex: 0 0 auto; margin: 0; }
html.ds #device .dsy-ident-main { position: relative; display: grid; place-items: center; width: 48px; min-width: 48px; height: 48px; min-height: 48px; margin: -4px -4px -4px 0; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--c-label-1); }
html.ds #device .dsy-monogram {
  position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background:
    radial-gradient(70% 70% at 30% 22%, rgb(104 201 255 / .42), rgb(104 201 255 / .12) 55%, rgb(104 201 255 / 0) 100%),
    radial-gradient(80% 80% at 78% 86%, rgb(139 92 246 / .62), rgb(139 92 246 / .2) 60%, rgb(139 92 246 / 0) 100%),
    var(--c-stage-raised);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(255 255 255 / .12), 0 6px 18px rgb(76 50 170 / .30);
}
html.ds #device .dsy-monogram > span { font: 600 calc(18 * var(--type-unit))/1 var(--font-ui); letter-spacing: 0; color: var(--c-label-1); text-shadow: 0 1px 10px rgb(150 200 255 / .45); }
html.ds #device .dsy-monogram svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* Film DNA: the page's hero (15 October 2026). It opens the page, full width and tall: its sentence in Title 1, the five lines
   large with their beads joined by the thread, the lines that moved lit and the rest a step back. The shell is here;
   ds-film-dna.js draws what is inside it and ds-film-dna.css styles it, so the larger sizes below are set on the card. */
html.ds #device .dsy-dna-card { margin: 0 0 22px; padding: 22px 20px 6px; min-height: 120px; border-radius: var(--r-sheet); border: 1px solid var(--c-line-strong);
  background: radial-gradient(120% 70% at 85% 0%, rgb(139 92 246 / .22), rgb(139 92 246 / 0) 70%), radial-gradient(90% 60% at 0% 100%, rgb(104 201 255 / .10), rgb(104 201 255 / 0) 70%), linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), var(--e-2); }
html.ds #device .dsy-dna-card .fd-card-title { font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-label-2); }
html.ds #device .dsy-dna-card .fd-card-line { margin: 10px 0 0; font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); }
html.ds #device .dsy-dna-card .fd-strand.is-compact { --fd-end: 74px; margin-top: 22px; row-gap: 4px; }
html.ds #device .dsy-dna-card .fd-strand.is-compact .fd-lane { min-height: 52px; }
html.ds #device .dsy-dna-card .fd-strand.is-compact .fd-end { font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
html.ds #device .dsy-dna-card .fd-strand.is-compact .fd-track { height: 20px; }
html.ds #device .dsy-dna-card .fd-strand.is-compact .fd-track::before { height: 3px; margin-top: -1.5px; }
html.ds #device .dsy-dna-card .fd-strand.is-compact .fd-bead { width: 20px; height: 20px; box-shadow: 0 0 0 3px var(--c-stage), 0 0 0 4px color-mix(in srgb, var(--h) 45%, transparent), 0 0 18px color-mix(in srgb, var(--h) 45%, transparent); }
html.ds #device .dsy-dna-card .fd-strand.is-compact .fd-bead-twin { width: 14px; height: 14px; box-shadow: inset 0 0 0 3px var(--h), 0 0 0 2px var(--c-stage); }
html.ds #device .dsy-dna-card .fd-strand.is-compact .fd-ghost { width: 16px; height: 16px; }
html.ds #device .dsy-dna-card .fd-open-line { min-height: 48px; }
/* the latest movement: the lines that moved keep their ring, their way and their lit end; the others step back */
html.ds #device .dsy-dna-card.has-moment .fd-lane:not(.is-moved) { opacity: .6; }
html.ds #device .dsy-dna-card .fd-lane.is-moved .fd-bead { width: 24px; height: 24px; box-shadow: 0 0 0 3px var(--c-stage), 0 0 0 5px var(--h), 0 0 26px color-mix(in srgb, var(--h) 70%, transparent); }
html.ds #device .dsy-dna-card .fd-lane.is-moved.leans-moved-low .fd-end-low, html.ds #device .dsy-dna-card .fd-lane.is-moved.leans-moved-high .fd-end-high { color: var(--c-label-1); font-weight: 700; }
html.ds #device .dsy-dna-card .fd-lane.is-moved .fd-bar.fd-shift { height: 6px; opacity: .9; }
html.ds #device .dsy-you-list { margin: 0; }
html.ds.reduce-transparency #device .dsy-dna-card, html.ds #device.manual-solid .dsy-dna-card { background: var(--c-stage-raised); }

/* ===== Interests ================================================================================== */
html.ds #device .dsy-interests { padding: 16px var(--gutter) 0 !important; box-sizing: border-box; }
html.ds #device .dsy-interests > header { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0 0 8px; }
html.ds #device .dsy-interests > header > span { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); font-variant-numeric: tabular-nums; color: var(--c-label-2); }
html.ds #device .dsy-interests .interests-copy h1 { margin: 4px 0 8px; font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); text-align: left; }
html.ds #device .dsy-interests .interests-copy p { margin: 0 0 20px; font: var(--fw-body) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
html.ds #device .dsy-interests .interest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 28px; }
html.ds #device .dsy-interest {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 0; height: auto; padding: 14px 12px 14px;
  border: 1px solid var(--c-line); border-radius: var(--r-card);
  background: var(--c-fill-1); background-image: none; box-shadow: none; color: var(--c-label-1); text-align: left;
  overflow: hidden;
}
html.ds #device .dsy-interest::before, html.ds #device .dsy-interest::after { display: none; }
html.ds #device .dsy-interest > :is(strong, em) { position: static; left: auto; right: auto; bottom: auto; z-index: auto; display: block; max-width: 100%; overflow: visible; white-space: normal; text-overflow: clip; }
html.ds #device .dsy-interest.selected { transform: none; border-color: var(--c-seal); }
html.ds #device .dsy-interest > strong { font: var(--fw-headline) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: 0; color: var(--c-label-1); text-wrap: balance; }
html.ds #device .dsy-interest > em { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); font-style: normal; color: var(--c-label-2); }
html.ds #device .dsy-fan { position: relative; display: block; width: 100%; height: 84px; margin: 2px 0 10px; }
html.ds #device .dsy-fan-card { position: absolute; bottom: 0; left: 50%; width: 54px; height: 81px; margin-left: -27px; overflow: hidden; border-radius: 6px; background: var(--c-fill-2); box-shadow: var(--e-2); transform-origin: 50% 100%; }
html.ds #device .dsy-fan-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.ds #device .dsy-fan-0 { transform: translateX(-34px) rotate(-9deg); z-index: 1; }
html.ds #device .dsy-fan-1 { transform: translateY(-4px); z-index: 3; }
html.ds #device .dsy-fan-2 { transform: translateX(34px) rotate(9deg); z-index: 2; }
html.ds #device .dsy-fan-card.ds-poster-fallback { border-radius: 6px; }
html.ds #device .dsy-fan-card .ds-pf-title { font-size: calc(11 * var(--type-unit)); line-height: calc(12 * var(--type-unit)); }
html.ds #device .dsy-fan-card .ds-pf-year { display: none; }
html.ds #device .dsy-interest > .dsy-check { position: absolute; top: 10px; right: 10px; left: auto; bottom: auto; z-index: 5; backdrop-filter: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--c-line-strong); background: var(--c-fill-1); color: transparent; font-size: 0; }
html.ds #device .dsy-check svg { width: 14px; height: 14px; }
html.ds #device .dsy-interest[aria-pressed="true"] { border-color: var(--c-seal); background: color-mix(in srgb, var(--c-seal) 14%, var(--c-fill-1)); box-shadow: inset 0 0 0 1px var(--c-seal); }
html.ds #device .dsy-interest[aria-pressed="true"] > .dsy-check { background: var(--c-seal-fill); border-color: var(--c-seal-fill); color: var(--c-label-1); }
html.ds #device .dsy-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* bottom chrome bar, with a scroll-edge fade above it so nothing overlaps the tiles */
html.ds #device .dsy-bar { position: sticky; left: auto; width: auto; transform: none; bottom: 0; z-index: 4; margin: 0 calc(-1 * var(--gutter)); padding: 12px var(--gutter) max(14px, env(safe-area-inset-bottom)); display: grid; gap: 6px; border-top: 1px solid var(--c-line); text-align: center; }
html.ds #device .dsy-bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 32px; background: linear-gradient(to top, var(--c-stage), transparent); pointer-events: none; }
html.ds #device .dsy-bar .primary-button { width: 100%; }
html.ds #device .dsy-bar .dsy-bar-note { font: var(--fw-caption) var(--fs-caption)/var(--lh-caption) var(--font-ui); color: var(--c-label-3); }
html.ds #device .dsy-bar, html.ds #device .interest-actions.ds-chrome { background: color-mix(in srgb, var(--c-stage) 90%, transparent); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); }
html.ds #device.manual-solid .dsy-bar { background: var(--mat-chrome-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ===== Region: provider logos, trailing check, brand-coloured edge =================================== */
html.ds #device .dsy-region .choice-cards { display: grid; gap: 8px; margin: 4px 0 16px; }
html.ds #device .dsy-platform {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 8px 14px 8px 8px;
  border: 1px solid transparent; border-radius: var(--r-row); background: var(--c-fill-1); box-shadow: none; text-align: left; color: var(--c-label-1);
}
html.ds #device .dsy-platform .streaming-logo { flex: 0 0 auto; width: 76px; height: 46px; display: grid; place-items: center; overflow: hidden; border-radius: var(--r-control); }
html.ds #device .dsy-platform .streaming-logo img { width: 100%; height: 100%; object-fit: contain; }
html.ds #device .dsy-platform > strong { flex: 1 1 auto; font: var(--fw-body) var(--fs-headline)/var(--lh-headline) var(--font-ui); color: var(--c-label-1); }
html.ds #device .dsy-tick { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--c-line-strong); color: transparent; font-size: 0; }
html.ds #device .dsy-tick svg { width: 14px; height: 14px; }
html.ds #device .dsy-platform[aria-pressed="true"] { background: var(--tint-wash); border-color: var(--tint-edge); box-shadow: inset 0 0 0 1px var(--tint-edge); }
html.ds #device .dsy-platform[aria-pressed="true"] .dsy-tick { background: var(--c-lamp); border-color: var(--c-lamp); color: var(--c-lamp-ink); }
html.ds #device .dsy-region .primary-button { margin-top: 12px; }

/* ===== Spoiler: checkmark rows + live example ======================================================== */
html.ds #device .dsy-check-list { margin: 4px 0 0; }
html.ds #device .dsy-check-list > .ds-row { cursor: pointer; }
html.ds #device .dsy-check-list > .ds-row .dsy-tick { margin-left: auto; border: 0; background: none; color: transparent; }
html.ds #device .dsy-check-list > .ds-row[aria-pressed="true"] .dsy-tick { color: var(--c-seal-hi); }
html.ds #device .dsy-check-list > .ds-row[aria-pressed="true"] .dsy-tick svg { width: 20px; height: 20px; stroke-width: 2.4; }
html.ds #device .dsy-example { margin: 24px 0 0; display: grid; gap: 8px; }
html.ds #device .dsy-example-tag { padding: 0 16px; font-size: calc(12 * var(--type-unit)); line-height: calc(16 * var(--type-unit)); letter-spacing: var(--tr-caption-1); color: var(--c-label-3); }
html.ds #device .dsy-example-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--r-card); background: var(--c-fill-1); border: 1px solid var(--c-line); }
html.ds #device .dsy-example-poster { flex: 0 0 auto; width: 48px; height: 72px; display: grid; place-items: center; border-radius: var(--r-control); background: var(--c-fill-2); border: 1px solid var(--c-line); }
html.ds #device .dsy-example-copy strong { display: block; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); color: var(--c-label-1); }
html.ds #device .dsy-example-copy p { margin: 4px 0 0; font: var(--fw-body) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }

/* ===== review tools: state gallery, deep links, accessibility, demo, system state ===================== */
html.ds #device .dsy-state-list .ds-row { min-height: 56px; }
html.ds #device .dsy-state-kind { display: block; font-size: calc(11 * var(--type-unit)); line-height: calc(14 * var(--type-unit)); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-label-3); }
html.ds #device .dsy-page .settings-group { padding: 0; margin: 0 0 16px; }
html.ds #device .dsy-page .settings-group .dsy-group-label { display: block; padding: 12px 16px 4px; font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-label-3); }
html.ds #device .dsy-page .settings-group > .ds-row .ds-row-title { flex: 1 1 auto; font: var(--fw-body) var(--fs-headline)/var(--lh-headline) var(--font-ui); }
html.ds #device .dsy-page .a11y-preview, html.ds #device .dsy-page .spoken-example { border-radius: var(--r-card); background: var(--c-fill-1); border: 1px solid var(--c-line); box-shadow: none; }
html.ds #device .dsy-page .a11y-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
html.ds #device .dsy-chip { flex: 1 1 auto; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); background: var(--c-fill-2); border: 1px solid var(--c-line); color: var(--c-label-1); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); }
html.ds #device .dsy-chip[aria-pressed="true"] { background: var(--c-lamp); color: var(--c-lamp-ink); border-color: var(--c-lamp); }
html.ds #device .dsy-page-demoMode .demo-actions > button { border-radius: var(--r-row); background: var(--c-fill-1); border: 1px solid var(--c-line); box-shadow: none; }
html.ds #device .dsy-page-demoMode .demo-actions > button strong { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); }
html.ds #device .dsy-page-demoMode .demo-actions > button small { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }

/* sign in */
html.ds #device .dsy-page .signin-provider-list { gap: 12px; }
html.ds #device .dsy-page .signin-refined .signin-provider, html.ds #device .dsy-page .signin-provider { border-radius: var(--r-row); min-height: var(--row-min); }
html.ds #device .dsy-page .signin-brand img:first-child { filter: none; }

/* Safari-friendly large-text behaviour: no horizontal overflow */
html.ds #device .dsy-page, html.ds #device .dsy-you, html.ds #device .dsy-dna-page, html.ds #device .dsy-interests { overflow-x: hidden; }
html.ds #device .dsy-list .ds-row-body, html.ds #device .dsy-axis-head > span { overflow-wrap: anywhere; }
html.ds #device.manual-large-text .dsy-interest-grid, html.ds #device.manual-large-text .dsy-interests .interest-grid { grid-template-columns: 1fr; }

/* ===== motion + reduced ================================================================================ */
html.ds .dsy-switch { transition: none; }

/* Settings moment: switches feel physical. Press squashes the knob (wider, shorter); a change lands with a squash-and-settle and a
   tiny overshoot past the stop. scale/translate only; the knob's own spring (--mo-spring-snappy) carries the travel. */
html.ds #device .dsy-switch::before { transition: transform var(--motion-normal) var(--motion-spring), scale var(--motion-fast) var(--motion-spring); }
html.ds #device .dsy-switch:active::before, html.ds #device .ds-pressed-row > .dsy-switch::before { transform: none; scale: 1.2 .9; }
html.ds #device .dsy-switch:checked:active::before, html.ds #device .ds-pressed-row > .dsy-switch:checked::before { transform: translateX(20px); scale: 1.2 .9; }
html.ds #device .dsy-switch.dsy-land::before { animation: dsy-knob-land-off var(--motion-normal) var(--motion-curve) both; }
html.ds #device .dsy-switch:checked.dsy-land::before { animation-name: dsy-knob-land-on; }
@keyframes dsy-knob-land-on { 0% { scale: 1.16 .92; translate: 0 0; } 50% { scale: .95 1.05; translate: 2.5px 0; } 100% { scale: 1 1; translate: 0 0; } }
@keyframes dsy-knob-land-off { 0% { scale: 1.16 .92; translate: 0 0; } 50% { scale: .95 1.05; translate: -2.5px 0; } 100% { scale: 1 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  html.ds #device .dsy-switch::before { transition: none; }
  html.ds #device .dsy-switch.dsy-land::before { animation: none; }
}
html.ds #device.manual-reduced-motion .dsy-switch::before { transition: none; }
html.ds #device.manual-reduced-motion .dsy-switch.dsy-land::before { animation: none; }

/* Membership moment: one slow amber light runs along the TRIPTIC+ wordmark on arrival (letters take it one after another, opacity only) */
html.ds #device .dsy-plus-host { position: relative; }
html.ds #device .dsy-plus-light, html.ds #device .dsy-plus-light b { color: var(--c-caution); }
html.ds #device .dsy-plus-light { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; }
html.ds #device .dsy-plus-ch { display: inline-block; will-change: opacity; font-style: normal; opacity: 0; animation: dsy-plus-ch var(--motion-slow) var(--motion-curve) calc(700ms + var(--ds-i, 0) * 90ms) both; }
@keyframes dsy-plus-ch { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html.ds #device .dsy-plus-light { display: none; } }
html.ds #device.manual-reduced-motion .dsy-plus-light { display: none; }

/* ===== Settings > About (the one place data sources are named; owner rule 1 Oct 2026) ========= */
html.ds #device .about-screen .about-identity {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 8px 0 4px; padding: 24px 16px 20px;
  border: 0; border-radius: var(--r-card); background: var(--c-fill-1); text-align: center;
}
html.ds #device .about-screen .about-mark { width: 44px; height: 44px; margin-bottom: 8px; }
/* ===== the word behind the name (lane VOICE, 13 October 2026): a dictionary entry for "triptych", in About under the
   name, and after the logo's secret (delight-moments.css places that one). The headword in the titles' face (ds-look.css
   section 6 sets the face), the rest in the app's type ramp, so it grows with the text size. Three hinged panels, drawn in a hairline, sit at its right. */
html.ds .tw { margin: 0; text-align: left; color: var(--c-label-1); }
html.ds .tw-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; }
html.ds .tw-word { font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); font-style: normal; letter-spacing: var(--tr-title-2); color: var(--c-label-1); }
html.ds .tw-word > span { padding: 0 1px; color: var(--c-label-3); font-weight: 400; }
html.ds .tw-ipa { font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
html.ds .tw-pos { font: italic var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-3); }
html.ds .tw-art { order: 9; align-self: center; flex: 0 0 auto; margin-left: auto; width: 34px; height: auto; fill: color-mix(in srgb, var(--c-seal) 10%, transparent); stroke: var(--c-seal-hi); stroke-width: 1.3; stroke-linejoin: round; opacity: .85; }
html.ds .tw-sense { margin: 10px 0 0; font: var(--fw-callout) var(--fs-callout)/var(--lh-callout) var(--font-ui); color: var(--c-label-1); text-wrap: pretty; }
html.ds .tw-origin { margin: 4px 0 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds .tw-ours { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--c-line); font: italic var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); text-wrap: balance; }
html.ds #device .about-screen .about-define { margin: 12px 0 4px; padding: 18px 18px 16px; border-radius: var(--r-card); background: var(--c-fill-1); }
html.ds #device .about-screen .about-identity > strong { font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: var(--tr-title-3); color: var(--c-label-1); }
html.ds #device .about-screen .about-identity > small { font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
html.ds #device .about-screen .about-version { margin-top: 6px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-label-3); }
html.ds #device .about-screen .settings-section > h2 { margin: 28px 0 8px; padding: 0 16px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--c-label-3); }
html.ds #device .about-screen .about-credit-list { padding: 0; border: 0; border-radius: var(--r-row); background: var(--c-fill-1); overflow: hidden; }
html.ds #device .about-screen .about-credit { padding: 14px 16px; }
html.ds #device .about-screen .about-credit + .about-credit { border-top: 1px solid var(--c-line); }
html.ds #device .about-screen .about-credit > strong { display: block; font: var(--fw-headline) var(--fs-callout)/var(--lh-callout) var(--font-ui); color: var(--c-label-1); }
html.ds #device .about-screen .about-credit > p { margin: 4px 0 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds #device .about-screen .about-credit > a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-top: 4px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); text-decoration: none; }
html.ds #device .about-screen .about-support-row { text-decoration: none; color: inherit; }
/* the device's own motion reading, at the bottom, muted: "Motion: balanced · 58 fps" */
html.ds #device .about-screen .about-diagnostic { margin: 28px 16px 8px; text-align: center; font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-label-3); }

/* ===== prototype-src/ds-film-dna.css ===== */
/* TRIPTIC ds-film-dna layer (6 October 2026). Scoped under html.ds. Markup: ds-film-dna.js.
   Record: hub/docs/FILM-DNA-2026-10-06.md.

   Film DNA's page (home, one line, one kind, one fact, every film), the card on You and the first reading.
   The page frame (.dsy-dna-page), the inline nav (.dsy-nav) and the card shell (.dsy-dna-card) stay in
   ds-you-settings.css; inset lists are W0's .ds-list/.ds-row.

   Colour: the five lines use five of W0's six --c-dna-* hues through --h (mood: emotion, pace: pace, world: worlds,
   size: scope, endings: answers); everything else is a label, fill or line token. No new colours, no new radii.
   Type: the SF ramp only. Every label wraps; nothing is clipped at larger text sizes.
   Motion (ds-film-dna.js, Web Animations): transform, opacity and stroke-dashoffset only. Reduce Motion and the
   "reduced" motion tier get the finished picture with no movement.

   !IMPORTANT OVERRIDES:
   - html.ds :focus-visible ring (design-system.css): the detail page's statement takes focus when the page arrives, for
     VoiceOver and the keyboard; it is a heading, not a control, so it shows no ring. */

/* ===== page ============================================================================================== */
html.ds #device .fd-page .fd-view { display: block; }
html.ds #device .fd-page .fd-nav > h1 { text-wrap: balance; }
html.ds #device .fd-page .ds-list-header { text-wrap: balance; }
html.ds #device .fd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
html.ds #device .fd-slot:empty { display: none; }
html.ds #device .fd-slot > .primary-button { width: 100%; margin: 24px 0 0; }
html.ds #device .fd-grow { margin: 16px 0 8px; }
html.ds #device .fd-grow-line { margin: 0; color: var(--c-label-2); font: var(--fw-footnote); text-wrap: pretty; }
html.ds #device .fd-grow .fd-slot > .primary-button { margin-top: 12px; }

/* ===== the hero: one sentence and the five lines ======================================================= */
html.ds #device .fd-hero {
  position: relative;
  margin: 4px 0 0;
  padding: 26px 18px 16px;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background:
    radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--c-seal) 18%, transparent), transparent 62%),
    radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--c-beam) 9%, transparent), transparent 60%),
    var(--c-fill-1);
  box-shadow: var(--e-1);
}
/* the film-strip edge the You page already uses for its totals */
html.ds #device .fd-hero::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background: radial-gradient(circle 2px at 50% 6px, var(--c-line-strong) 96%, transparent) 0 0 / 14px 10px repeat-x;
}
html.ds #device .fd-hero-top { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
html.ds #device .fd-mark { display: grid; place-items: center; flex: 0 0 auto; }
html.ds #device .fd-mark img { display: block; width: 15px; height: 16px; opacity: .9; }
html.ds #device .fd-hero-name { font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-label-2); }
html.ds #device .fd-hero-tag { margin-left: auto; font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--c-label-2); text-align: right; }
html.ds #device .fd-headline { margin: 0; font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2); color: var(--c-label-1); text-align: left; text-wrap: balance; }
html.ds #device .fd-headline-more { margin: 8px 0 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); text-align: left; text-wrap: pretty; }
html.ds #device .fd-basis { margin: 10px 0 0; font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); font-variant-numeric: tabular-nums; color: var(--c-label-3); text-align: left; }
html.ds #device .fd-basis-tap { margin-top: 12px; color: var(--c-label-2); }
html.ds #device .fd-basis-tap + .fd-basis { margin-top: 2px; }
html.ds #device .fd-hero-cta { width: 100%; margin: 20px 0 4px; }

/* ===== the five lines ====================================================================================== */
html.ds .fd-strand { position: relative; z-index: 0; display: grid; grid-template-columns: var(--fd-end, 78px) minmax(0, 1fr) var(--fd-end, 78px); column-gap: 12px; margin: 16px 0 0; }
/* each end word sits against its end of the line; the two word columns are as wide as their longest word */
@supports (grid-template-columns: subgrid) {
  html.ds .fd-strand { grid-template-columns: fit-content(34%) minmax(0, 1fr) fit-content(34%); }
}
html.ds .fd-thread { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
html.ds .fd-thread-path { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .55; }
html.ds .fd-lane {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: var(--fd-end, 78px) minmax(0, 1fr) var(--fd-end, 78px);
  align-items: center;
  column-gap: 12px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 4px 0;
  border: 0;
  border-radius: var(--r-control);
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
html.ds .fd-end { font: var(--fw-subhead-strong) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-3); overflow-wrap: anywhere; }
html.ds .fd-end-low { text-align: right; }
html.ds .fd-end-high { text-align: left; }
@supports (grid-template-columns: subgrid) {
  html.ds .fd-lane { grid-template-columns: subgrid; }
}
html.ds :is(.fd-lane, .fd-rail).leans-low .fd-end-low,
html.ds :is(.fd-lane, .fd-rail).leans-high .fd-end-high,
html.ds :is(.fd-lane, .fd-rail).is-both .fd-end { color: var(--c-label-1); font-weight: 600; }
html.ds :is(.fd-lane, .fd-rail).is-balanced .fd-end { color: var(--c-label-2); }
html.ds .fd-track { position: relative; display: block; height: 14px; }
html.ds .fd-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: var(--r-pill); background: var(--c-fill-press); }
html.ds :is(.fd-lane, .fd-rail):is(.is-thin, .is-none) .fd-track::before { background: repeating-linear-gradient(90deg, var(--c-line-strong) 0 4px, transparent 4px 10px); }
html.ds .fd-mid { position: absolute; left: 50%; top: 50%; width: 1px; height: 10px; margin: -5px 0 0 -.5px; background: var(--c-line-strong); }
html.ds .fd-bar { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--h) 60%, transparent); }
html.ds .fd-bar-both { background: color-mix(in srgb, var(--h) 36%, transparent); }
html.ds .fd-bead { position: absolute; z-index: 2; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--h); box-shadow: 0 0 0 3px var(--c-stage), 0 0 0 4px color-mix(in srgb, var(--h) 40%, transparent); transform: translate(-50%, -50%); }
html.ds .fd-bead-twin { width: 10px; height: 10px; background: var(--c-stage); box-shadow: inset 0 0 0 2px var(--h), 0 0 0 2px var(--c-stage); }
html.ds button.fd-lane:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* the compact picture: the card on You and the first reading */
html.ds .fd-strand.is-compact { margin-top: 12px; }
html.ds .fd-strand.is-compact { --fd-end: 70px; }
html.ds .fd-strand.is-compact .fd-lane { min-height: 34px; padding: 2px 0; }
html.ds .fd-strand.is-compact .fd-end { font-size: var(--fs-caption-1); line-height: var(--lh-caption-1); }
html.ds .fd-strand.is-compact .fd-track { height: 12px; }
html.ds .fd-strand.is-compact .fd-bead { width: 12px; height: 12px; }
html.ds .fd-strand.is-compact .fd-bead-twin { width: 8px; height: 8px; }

/* ===== lists on this page ================================================================================== */
html.ds #device .fd-page .fd-list { margin-left: 0; margin-right: 0; }
html.ds #device .fd-page .fd-list .ds-row { padding: 12px 16px; text-align: left; color: var(--c-label-1); }
html.ds #device .fd-page .fd-list .ds-row-title { display: block; font: var(--fw-body) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1); }
html.ds #device .fd-page .fd-list .ds-row-sub { display: block; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); }
html.ds #device .fd-page .fd-list .ds-row-value { font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-label-2); white-space: nowrap; }
html.ds #device .fd-page .fd-list + .fd-list { margin-top: 12px; }

/* what stands out */
html.ds #device .fd-trait { align-items: flex-start; }
html.ds #device .fd-page .fd-trait .ds-row-title { font-weight: 600; }
html.ds #device .fd-trait-dot { flex: 0 0 10px; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--h); }
html.ds #device .fd-trait .fd-chev { align-self: center; }
html.ds #device .fd-trait-why { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; }
html.ds #device .fd-thumbs { display: inline-flex; gap: 4px; }
html.ds #device .fd-trait-see { font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--c-label-2); }

/* kinds of film */
html.ds #device .fd-kind .ds-row-body { gap: 8px; }
html.ds #device .fd-meter { display: block; height: 4px; border-radius: var(--r-pill); background: var(--c-fill-2); overflow: hidden; }
html.ds #device .fd-meter > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--c-seal-hi); }
html.ds #device .fd-more .ds-row-title { font-weight: var(--fw-body); color: var(--c-seal-hi); }

/* three facts */
html.ds #device .fd-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html.ds #device .fd-fact { display: grid; align-content: start; gap: 4px; min-height: 76px; margin: 0; padding: 14px 10px 12px; border: 0; border-radius: var(--r-row); background: var(--c-fill-1); box-shadow: none; color: var(--c-label-1); text-align: left; }
html.ds #device .fd-fact-value { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1); overflow-wrap: anywhere; }
html.ds #device .fd-fact-label { font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--c-label-2); }

/* how it is worked out */
html.ds #device .fd-how { padding: 14px 16px; border-radius: var(--r-row); background: var(--c-fill-1); }
html.ds #device .fd-how p { margin: 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); text-wrap: pretty; }
html.ds #device .fd-how p + p { margin-top: 8px; }
html.ds #device .fd-how .fd-changed { color: var(--c-label-1); }
html.ds #device .fd-small { margin: 10px -16px -14px; padding: 0 16px; border-top: 1px solid var(--c-line); }
html.ds #device .fd-small > summary { display: flex; align-items: center; min-height: var(--target); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-seal-hi); cursor: pointer; list-style: none; }
html.ds #device .fd-small > summary::-webkit-details-marker { display: none; }
html.ds #device .fd-small > div { padding: 0 0 14px; }

/* the Friday notes editor (taste-preferences.js markup), as one inset group */
html.ds #device .fd-editor { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
html.ds #device .fd-editor > details { padding: 0 16px; overflow: hidden; border-radius: var(--r-row); background: var(--c-fill-1); }
html.ds #device .fd-editor > details + details { margin-top: 12px; }
html.ds #device .fd-editor > details > summary { display: flex; align-items: center; min-height: var(--row-min); padding: 0; font: var(--fw-body) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1); cursor: pointer; }
html.ds #device .fd-editor > details[open] > summary { border-bottom: 1px solid var(--c-line); }
html.ds #device .fd-editor p { margin: 10px 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds #device .fd-editor label { display: block; margin: 14px 0 8px; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-1); }
html.ds #device .fd-editor #friday-preference-input { width: 100%; min-height: 120px; padding: 12px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-row); background: var(--c-stage-raised); color: var(--c-label-1); font-size: calc(17 * var(--type-unit)); line-height: calc(24 * var(--type-unit)); }
html.ds #device .fd-editor #friday-preference-input:focus-visible { border-color: var(--c-focus); box-shadow: none; }
html.ds #device .fd-editor .primary-button { width: 100%; margin: 12px 0 4px; }
html.ds #device .fd-editor .quiet-button { width: 100%; }
html.ds #device .fd-editor #friday-preference-status { margin: 10px 16px 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds #device .fd-editor #friday-preference-status:empty { display: none; }
html.ds #device .fd-editor .friday-notes ul { margin: 0; padding: 0; list-style: none; }
html.ds #device .fd-editor .friday-notes li { padding: 10px 0; border-top: 1px solid var(--c-line); }
html.ds #device .fd-editor .friday-notes li > div { display: flex; gap: 8px; }
html.ds #device .fd-editor .friday-notes button { min-height: var(--target); padding: 0 14px; border: 1px solid var(--c-line); border-radius: var(--r-control); background: var(--c-fill-2); color: var(--c-label-1); }
html.ds #device .fd-hidden, html.ds #device .fd-manage { margin-top: 12px; }

/* ===== posters ============================================================================================= */
html.ds .fd-poster { position: relative; display: block; flex: 0 0 auto; overflow: hidden; border-radius: var(--r-chip); background: var(--c-fill-2); }
html.ds .fd-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.ds .fd-thumb { width: 28px; height: 42px; }
html.ds .fd-dot { width: 22px; height: 33px; border-radius: 0; box-shadow: 0 0 0 1px var(--c-stage); }
html.ds .fd-film-poster { width: 44px; height: 66px; }
html.ds .fd-poster.is-fallback { padding: 0; }
html.ds .fd-poster.is-fallback:not(.fd-film-poster) > * { display: none; }
html.ds .fd-film-poster.is-fallback .ds-pf-title { font-size: calc(11 * var(--type-unit)); line-height: calc(12 * var(--type-unit)); }
html.ds .fd-film-poster.is-fallback .ds-pf-year { display: none; }

/* ===== a detail page ======================================================================================= */
html.ds #device .fd-d-hero { margin: 4px 0 0; }
html.ds #device .fd-statement:is(:focus, :focus-visible) { outline: none !important; box-shadow: none !important; }
html.ds #device .fd-statement { margin: 0; font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2); color: var(--c-label-1); text-align: left; text-wrap: balance; outline: none; }
html.ds #device .fd-d-line { margin: 8px 0 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); text-wrap: pretty; }
html.ds #device .fd-d-basis { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
html.ds #device .fd-d-basis:empty { display: none; }
html.ds #device .fd-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-fill-2); font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); font-variant-numeric: tabular-nums; color: var(--c-label-2); }
html.ds #device .fd-chip.is-strong { background: color-mix(in srgb, var(--h) 22%, transparent); color: var(--c-label-1); }
html.ds #device .fd-empty { margin: 20px 16px 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }

/* the rail: their films placed along the line */
html.ds #device .fd-rail { position: relative; margin: 20px 0 0; padding: 14px 16px 12px; border-radius: var(--r-card); background: var(--c-fill-1); border: 1px solid var(--c-line); }
html.ds #device .fd-keep { position: absolute; top: 0; width: 50%; height: 100%; max-height: 270px; pointer-events: none; }
html.ds #device .fd-keep-a { left: 0; }
html.ds #device .fd-keep-b { right: 0; }
html.ds #device .fd-swarm { position: relative; }
html.ds #device .fd-swarm.is-yours { height: calc(var(--rows, 1) * 35px + 8px); }
html.ds #device .fd-swarm.is-no { height: 40px; margin-top: 6px; }
html.ds #device .fd-pin { position: absolute; left: 0; display: block; }
html.ds #device .fd-swarm.is-yours .fd-pin { bottom: 4px; transform: translate(-50%, calc(var(--lv) * -35px)); }
html.ds #device .fd-swarm.is-no .fd-pin { top: 0; transform: translate(-50%, 0); opacity: .5; z-index: calc(4 - var(--lv)); margin-left: calc(var(--lv) * 5px); }
html.ds #device .fd-rail .fd-track { height: 16px; }
html.ds #device .fd-rail .fd-bar { height: 4px; opacity: .5; }
html.ds #device .fd-rail .fd-bar-slight { opacity: .3; }
html.ds #device .fd-rail .fd-bar-strong { opacity: .85; }
html.ds #device .fd-rail-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
html.ds #device .fd-rail-key { margin: 8px 16px 0; font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--c-label-3); }
html.ds #device .fd-means { display: grid; gap: 6px; margin: 16px 0 0; padding: 14px 16px; border-radius: var(--r-row); background: var(--c-fill-1); }
html.ds #device .fd-means p { margin: 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); }
html.ds #device .fd-means b { font-weight: 600; color: var(--c-label-1); }

/* film rows */
html.ds #device .fd-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
html.ds #device .fd-group-head .ds-num { flex: 0 0 auto; }
html.ds #device .fd-group-note { margin: -2px 16px 8px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-3); }
html.ds #device .fd-films { margin: 0; padding: 0; list-style: none; }
html.ds #device .fd-films:focus { outline: none; }
html.ds #device .fd-film { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
html.ds #device .fd-film + .fd-film::before { content: ""; position: absolute; top: 0; left: 72px; right: 0; height: 1px; background: var(--c-line); }
html.ds #device .fd-film-body { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
html.ds #device .fd-film-title { font: var(--fw-headline) var(--fs-callout)/var(--lh-callout) var(--font-ui); letter-spacing: var(--tr-callout); color: var(--c-label-1); overflow-wrap: anywhere; }
html.ds #device .fd-film-meta { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); font-variant-numeric: tabular-nums; color: var(--c-label-3); }
html.ds #device .fd-film-why { margin-top: 2px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-2); }
html.ds #device .fd-film-value { flex: 0 0 auto; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-label-2); }
html.ds #device .fd-film.is-no .fd-film-poster { opacity: .55; }
html.ds #device .fd-all { display: block; width: 100%; min-height: var(--target); margin: 4px 0 0; padding: 0 16px; border: 0; background: none; box-shadow: none; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-seal-hi); text-align: left; }
html.ds #device .fd-hide { width: 100%; margin: 20px 0 0; }

/* a small chart for a fact */
html.ds #device .fd-chart { display: grid; gap: 10px; margin: 20px 0 0; padding: 16px; border-radius: var(--r-row); background: var(--c-fill-1); }
html.ds #device .fd-chart-row { display: grid; grid-template-columns: minmax(64px, 34%) minmax(0, 1fr) 24px; align-items: center; gap: 10px; }
html.ds #device .fd-chart-label { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); font-variant-numeric: tabular-nums; color: var(--c-label-2); }
html.ds #device .fd-chart-bar { display: block; height: 8px; border-radius: var(--r-pill); background: var(--c-fill-2); overflow: hidden; }
html.ds #device .fd-chart-bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--c-label-3); }
html.ds #device .fd-chart-row.is-top .fd-chart-bar > i { background: var(--c-seal-hi); }
html.ds #device .fd-chart-row.is-top .fd-chart-label { color: var(--c-label-1); }
html.ds #device .fd-chart-n { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-label-2); text-align: right; }

/* ===== the card on You ====================================================================================== */
html.ds #device .fd-card { padding: 16px 16px 0; }
html.ds #device .fd-card-head { display: flex; align-items: baseline; gap: 10px; }
html.ds #device .fd-card-title { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1); }
html.ds #device .fd-card-tag { margin-left: auto; font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--c-label-2); text-align: right; }
html.ds #device .fd-card-line { margin: 8px 0 0; font: var(--fw-headline) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: var(--tr-title-3); color: var(--c-label-1); text-align: left; text-wrap: balance; }
html.ds #device .fd-card-sub { margin: 6px 0 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); }
html.ds #device .fd-card-cta { padding: 16px 0; }
html.ds #device .fd-card-cta .primary-button { width: 100%; }
html.ds #device .fd-card-open { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: calc(100% + 32px); min-height: var(--row-min); margin: 12px -16px 0; padding: 0 16px; border: 0; border-top: 1px solid var(--c-line); background: none; box-shadow: none; color: var(--c-label-1); font: var(--fw-body) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); text-align: left; }

/* ===== the first reading (end of the first fifteen) ======================================================== */
html.ds #device .ds-fr-radar > .ds-fr-dna { position: absolute; left: 50%; top: 50%; width: 300px; max-width: calc(100vw - 48px); transform: translate(-50%, -50%); }
html.ds #device .ds-fr-dna .fd-strand { margin: 0; }

/* ===== deeper cuts (8 October): one quiet card a stat ====================================================
   Each card is one button (its spoken label is the whole stat as a sentence); the picture inside is aria-hidden.
   Same surface, radii and type as the facts above it. Nothing moves except the app's own press. */
html.ds #device .fd-deep-list { display: grid; gap: 12px; }
html.ds #device .fd-deep {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  width: 100%;
  min-height: var(--target);
  margin: 0;
  padding: 14px 16px 16px;
  border: 0;
  border-radius: var(--r-row);
  background: var(--c-fill-1);
  box-shadow: none;
  color: var(--c-label-1);
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
html.ds #device .fd-deep:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
html.ds #device .fd-deep-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html.ds #device .fd-deep-title { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1); text-wrap: balance; }
html.ds #device .fd-deep-line { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-2); text-wrap: pretty; }
html.ds #device .fd-deep-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 8px; }
html.ds #device .fd-deep-foot { margin-top: 6px; }
html.ds #device .fd-deep-text { display: block; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1); text-wrap: pretty; }

/* people: a director or an actor, the posters of their films and how many */
html.ds #device .fd-deep-people { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
html.ds #device .fd-deep-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
html.ds #device .fd-deep-name { font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1); overflow-wrap: anywhere; }
html.ds #device .fd-deep-n { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-label-2); white-space: nowrap; }
html.ds #device .fd-deep-person .fd-thumbs { min-width: calc(3 * 28px + 2 * 4px); }
/* at the largest text the names need the room more than the posters need to line up */
html.ds[data-text-size="largest"] #device .fd-deep-person .fd-thumbs { min-width: 0; }
html.ds #device .fd-deep-more { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }

/* the decades: one column a decade, the busiest one lit */
html.ds #device .fd-deep-cols { display: flex; align-items: stretch; gap: 6px; height: 112px; }
html.ds #device .fd-deep-col { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 4px; flex: 1 1 0; min-width: 0; }
html.ds #device .fd-deep-col-bar { position: relative; display: block; width: 100%; max-width: 28px; height: 100%; border-radius: var(--r-chip); background: var(--c-fill-2); overflow: hidden; }
html.ds #device .fd-deep-col-bar > i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: var(--r-chip); background: var(--c-label-3); }
html.ds #device .fd-deep-col.is-top .fd-deep-col-bar > i { background: var(--c-seal-hi); }
html.ds #device .fd-deep-col-n, html.ds #device .fd-deep-col-label { font: var(--fw-caption-2) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-caption-2); font-variant-numeric: tabular-nums; color: var(--c-label-2); white-space: nowrap; }
html.ds #device .fd-deep-col-n:empty::before { content: "\00a0"; }
html.ds #device .fd-deep-col.is-top :is(.fd-deep-col-n, .fd-deep-col-label) { color: var(--c-label-1); font-weight: var(--fw-caption-2-strong); }
/* at the largest text a long run of decades keeps every other label, so none collide (the spoken label has them all) */
html.ds[data-text-size="largest"] #device .fd-deep-cols.is-long .fd-deep-col:not(.is-top) .fd-deep-col-label.is-quiet { visibility: hidden; }

/* record holders: four cells, two across while they fit, one across at larger text */
html.ds #device .fd-deep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5em), 1fr)); gap: 14px 12px; }
html.ds #device :is(.fd-deep-cell, .fd-deep-finding) { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
html.ds #device .fd-deep-cell-body { display: grid; gap: 1px; min-width: 0; }
html.ds #device .fd-deep-cell-label { font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--c-label-2); }
html.ds #device .fd-deep-cell-title { font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1); overflow-wrap: anywhere; }
html.ds #device .fd-deep-cell-value { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-label-2); }

/* countries: the count, the languages, then the sentence */
html.ds #device .fd-deep-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
html.ds #device .fd-deep-value { font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2); font-variant-numeric: tabular-nums; color: var(--c-label-1); }
html.ds #device .fd-deep-sub { font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-label-2); }

/* the crowd: each finding with the film it is about */
html.ds #device .fd-deep-findings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

/* ===== your taste moved (9 October): the card at the top of Film DNA, and once on You ========================
   Record: hub/docs/FILM-DNA-MOVES-2026-10-09.md. The same surface as the hero, lit a little by the beam. The five
   lines show a faint ring where the bead was and a soft bar along the way it went; lines that barely moved go quiet.
   Movement is the beads' one journey (ds-film-dna.js, transform and opacity), none under Reduce Motion. */
html.ds #device .fd-moved {
  position: relative;
  margin: 4px 0 16px;
  padding: 20px 18px 16px;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background:
    radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--c-beam) 16%, transparent), transparent 64%),
    radial-gradient(90% 60% at 0% 100%, color-mix(in srgb, var(--c-seal) 12%, transparent), transparent 62%),
    var(--c-fill-1);
  box-shadow: var(--e-1);
}
html.ds #device .fd-moved-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
html.ds #device .fd-moved-title { margin: 0; font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-label-2); }
html.ds #device .fd-moved-new { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 9px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-beam) 22%, transparent); font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--c-label-1); }
html.ds #device .fd-moved-sentence { margin: 10px 0 0; font: var(--fw-headline) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: var(--tr-title-3); color: var(--c-label-1); text-align: left; text-wrap: balance; }
html.ds #device .fd-moved-strand { margin-top: 14px; }
html.ds .fd-strand .fd-lane.is-still { opacity: .42; }
html.ds .fd-strand .fd-lane.is-none { opacity: .42; }
html.ds .fd-ghost { position: absolute; z-index: 1; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--c-stage); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--h) 70%, transparent); transform: translate(-50%, -50%); }
html.ds .fd-strand.is-compact .fd-ghost { width: 10px; height: 10px; }
html.ds .fd-bar.fd-shift { background: color-mix(in srgb, var(--h) 46%, transparent); }
html.ds #device .fd-moved-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 10px 0 0; font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--c-label-3); }
html.ds #device .fd-moved-key > span { display: inline-flex; align-items: center; gap: 6px; }
html.ds #device .fd-moved-key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
html.ds #device .fd-key-was { box-shadow: inset 0 0 0 1.5px var(--c-label-3); }
html.ds #device .fd-key-now { background: var(--c-label-2); }
html.ds #device .fd-moved-sub { margin: 18px 0 6px; font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1); }
html.ds #device .fd-moved-films { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
html.ds #device .fd-moved-film { display: flex; align-items: center; gap: 12px; min-width: 0; }
html.ds #device .fd-moved-basis { margin: 14px 0 0; font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--c-label-3); }
html.ds #device .fd-moved-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 0; }
html.ds #device .fd-moved-share { flex: 1 1 10em; margin: 0; }
html.ds #device .fd-moved-done { flex: 0 1 auto; min-height: var(--target); margin: 0; padding: 0 16px; border: 0; border-radius: var(--r-control); background: none; box-shadow: none; font: var(--fw-body) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-seal-hi); }
html.ds #device .fd-moved-done:focus-visible, html.ds #device .fd-card-moved:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* once on You: a gentle line above the reading */
html.ds #device .fd-card-moved {
  display: grid;
  gap: 2px;
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--r-row);
  background: color-mix(in srgb, var(--c-beam) 12%, var(--c-fill-1));
  box-shadow: none;
  color: var(--c-label-1);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
html.ds #device .fd-card-moved-eyebrow { font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--c-label-2); }
html.ds #device .fd-card-moved-line { font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1); text-wrap: pretty; }
html.ds #device .fd-card-moved-see { display: flex; align-items: center; gap: 4px; margin-top: 4px; font: var(--fw-subhead-strong) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-seal-hi); }

@media (prefers-reduced-motion: reduce) {
  html.ds .fd-thread-path { stroke-dashoffset: 0; }
}
/* (release polish, 28 October 2026) Record holders: an odd cell (a film holding two records) spans the grid's width */
html.ds #device .fd-deep-grid > .fd-deep-cell.is-wide { grid-column: 1 / -1; }
html.ds #device .fd-deep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* (release polish, 28 October 2026; the owner) "9 more kinds" wears the rows' chevron, turned down: it opens the rest in place */
html.ds #device .fd-more .fd-chev { rotate: 90deg; }

/* (4 November 2026; the owner: "Not incredibly clear there where the change was") a line that moved, on You, until it has been
   seen: the dashed ring is where you were (the key under the lines says so), a soft trail runs to where the bead is now, and a
   note under the line says which way and from what. Seen, the card settles: the ring, the trail, the key and the notes fade (ds-film-dna.js, one opacity move; Reduce Motion: at once). */
html.ds #device .fd-lane-note { position: relative; z-index: 2; grid-column: 1 / -1; justify-self: center; margin: -4px 0 2px; padding: 0 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-stage) 88%, transparent); font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: color-mix(in srgb, var(--h) 55%, var(--c-label-1)); text-align: center; text-wrap: balance; }
html.ds #device .fd-strand.has-change .fd-ghost.fd-was { background: var(--c-stage); box-shadow: none; border: 2px dashed color-mix(in srgb, var(--h) 80%, transparent); box-sizing: border-box; }
html.ds #device .fd-strand.has-change .fd-lane.leans-moved-high .fd-bar.fd-shift { background: linear-gradient(90deg, color-mix(in srgb, var(--h) 8%, transparent), color-mix(in srgb, var(--h) 70%, transparent)); }
html.ds #device .fd-strand.has-change .fd-lane.leans-moved-low .fd-bar.fd-shift { background: linear-gradient(270deg, color-mix(in srgb, var(--h) 8%, transparent), color-mix(in srgb, var(--h) 70%, transparent)); }
html.ds #device .fd-change-key { margin: 6px 0 4px; }
html.ds #device .fd-change-key .fd-key-was { box-shadow: none; border: 1.5px dashed var(--c-label-3); box-sizing: border-box; }
html.ds #device .dsy-dna-card.is-settled :is(.fd-ghost, .fd-shift, .fd-lane-note, .fd-change-key) { opacity: 0; }
html.ds #device .dsy-dna-card.has-moment.is-settled .fd-lane:not(.is-moved) { opacity: 1; }

/* ===== prototype-src/film-dna-print.css ===== */
/* TRIPTIC Film DNA print (4 November 2026). Scoped under html.ds. Markup: film-dna-print-reveal.js (.fdp-reveal) and
   film-dna-print-view.js (Lines / Print, the key). Record: hub/docs/FILM-DNA-PRINT-IN-APP-2026-11-04.md.

   The reveal is the approved prototype's page (public/prototype/film-dna-print.html, 3 November 2026) as a layer over #device:
   its plum room, its words and its leaves, on the app's own tokens (type ramp, motion tokens, line colours --c-dna-*).
   Everything that moves is opacity and transform. Reduce Motion (.is-reduced, or the Lines / Print switch): no movement. */

/* ===== the reveal: a layer of #device ==================================================================== */
html.ds #device > .fdp-reveal {
  --fdp-plum-0: #2a1530; --fdp-plum-1: #160b1a; --fdp-plum-2: #09060c;
  --fdp-safe-t: var(--safe-top, env(safe-area-inset-top, 0px)); --fdp-brand-top: max(17px, env(safe-area-inset-top, 0px)); --fdp-gutter: clamp(20px, 5.64vw, 24px); --fdp-safe-b: var(--safe-bottom, env(safe-area-inset-bottom, 0px));
  position: absolute; inset: 0; z-index: 290; overflow: hidden;
  background: var(--ds-room-floor-colour, var(--fdp-plum-2)); color: var(--c-label-1);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; touch-action: none;
}
html.ds #device > .screen.fdp-under > * { visibility: hidden; }
/* the bridge from the page before (the rating deck, You): the app's own room first, and the print's plum room comes up over it
   as the hold painting arrives, so the reveal is the same place lit differently (Reduce Motion: the plum room at once) */
html.ds .fdp-reveal .fdp-app-room { position: absolute; inset: 0; background-color: var(--ds-room-floor-colour);
  background-image: var(--ds-room-wash), var(--ds-room-pools), var(--ds-room-air), var(--ds-room-floor);
  background-size: 100% var(--ds-room-wash-height), 100% var(--ds-room-wash-height), 100% 100%, 100% 100%; background-repeat: no-repeat; }
html.ds .fdp-reveal:not(.is-reduced) :is(.fdp-room-bg, .fdp-room-tone) { animation: fdp-room-up var(--motion-ceremony) var(--motion-curve) backwards; }
@keyframes fdp-room-up { from { opacity: 0; } }
html.ds .fdp-reveal .fdp-room-bg { position: absolute; inset: 0; background:
    radial-gradient(80% 60% at 8% 52%, rgb(90 31 180 / .16), rgb(90 31 180 / 0) 72%),
    radial-gradient(86% 62% at 84% 34%, rgb(127 26 142 / .14), rgb(127 26 142 / 0) 70%),
    radial-gradient(90% 55% at 50% 42%, rgba(120, 60, 130, .22), transparent 70%),
    radial-gradient(140% 90% at 50% 40%, var(--fdp-plum-0) 0%, var(--fdp-plum-1) 42%, var(--fdp-plum-2) 78%, var(--c-stage) 100%); }
html.ds .fdp-reveal .fdp-room { position: absolute; inset: 0; background-repeat: no-repeat; opacity: 0; filter: brightness(.86); transition: opacity var(--motion-slow) var(--motion-curve); }
html.ds .fdp-reveal .fdp-room.is-in { opacity: 1; }
html.ds .fdp-reveal .fdp-layer { position: absolute; left: 0; top: 0; pointer-events: none; }
html.ds .fdp-reveal .fdp-c-hold, html.ds .fdp-reveal .fdp-c-holdcut { opacity: 0; transition: opacity var(--motion-slow) var(--motion-curve); }
html.ds .fdp-reveal .fdp-c-hold.is-in { opacity: 1; }
html.ds .fdp-reveal.is-forming-run .fdp-c-hold { transition: none; }
html.ds .fdp-reveal .fdp-c-print { opacity: 0; transform-origin: var(--ax, 50%) var(--ay, 50%); }
html.ds .fdp-reveal .fdp-c-bloom { opacity: 0; }
html.ds .fdp-reveal .fdp-c-bloom.is-on { opacity: 1; }
html.ds .fdp-reveal .fdp-forming-video { transform-origin: 0 0; object-fit: fill; transition: opacity var(--motion-normal) var(--motion-curve); }
html.ds .fdp-reveal.is-reduced .fdp-c-print { transition: opacity var(--motion-slow) var(--motion-curve); }
/* the ring breathes: a soft warm halo over the painted ring (opacity and scale only) */
html.ds .fdp-reveal .fdp-ring-glow { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; transform: translate(var(--ax, -999px), var(--ay, -999px)); }
html.ds .fdp-reveal .fdp-ring-glow i { position: absolute; left: calc(var(--rr, 20px) * -3); top: calc(var(--rr, 20px) * -3); width: calc(var(--rr, 20px) * 6); height: calc(var(--rr, 20px) * 6); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 160, .55), rgba(255, 170, 110, .22) 45%, rgba(255, 150, 100, 0) 100%); opacity: .5; }
html.ds .fdp-reveal:not(.is-reduced) .fdp-ring-glow:not(.is-gone) i { animation: fdp-ring-breathe 3.2s var(--motion-breathe, cubic-bezier(.45,0,.55,1)) infinite alternate; }
@keyframes fdp-ring-breathe { from { opacity: .32; transform: scale(.94); } to { opacity: .78; transform: scale(1.06); } }
html.ds .fdp-reveal .fdp-ring-glow.is-gone { opacity: 0; transition: opacity var(--motion-slow) var(--motion-curve); }
/* alive afterwards: a slow breath of light on the ribbons, and now and then one soft travelling light */
html.ds .fdp-reveal .fdp-c-hi { opacity: 0; mix-blend-mode: screen; }
@supports (mix-blend-mode: plus-lighter) { html.ds .fdp-reveal .fdp-c-hi, html.ds .fdp-reveal .fdp-sweep { mix-blend-mode: plus-lighter; } }
html.ds .fdp-reveal.is-settled:not(.is-reduced) .fdp-c-hi { animation: fdp-alive-breathe 3s var(--motion-breathe, cubic-bezier(.45,0,.55,1)) 1.2s infinite alternate; }
@keyframes fdp-alive-breathe { from { opacity: 0; } to { opacity: .16; } }
html.ds .fdp-reveal .fdp-sweep { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(104deg, transparent 0 41%, #000 50%, transparent 59% 100%); mask-image: linear-gradient(104deg, transparent 0 41%, #000 50%, transparent 59% 100%); }
html.ds .fdp-reveal .fdp-sweep canvas { position: absolute; left: 0; top: 0; }
html.ds .fdp-reveal.is-reduced :is(.fdp-sweep, .fdp-c-hi) { display: none; }

/* the leaves */
html.ds .fdp-reveal .fdp-stage { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
html.ds .fdp-reveal .fdp-leaf { position: relative; min-width: 0; min-height: 0; }
html.ds .fdp-reveal .fdp-leaf-print { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; justify-items: center;
  padding: 0 var(--fdp-gutter) calc(var(--fdp-safe-b) + 22px); text-align: center; }
html.ds .fdp-reveal .fdp-leaf-lines { display: none; }
html.ds #device .fdp-reveal .fdp-undo { flex: none; width: auto; min-height: var(--target, 44px); margin: 0; padding: 0 4px 0 12px; color: var(--c-label-2); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--fr-font); transition: opacity var(--motion-normal) var(--motion-curve); }
html.ds .fdp-reveal .fdp-undo.is-dim { opacity: 0; pointer-events: none; }
html.ds .fdp-reveal .fdp-top { display: grid; justify-items: center; }
html.ds .fdp-reveal .fdp-top > .fdp-state { grid-area: 1 / 1; display: grid; justify-items: center; align-content: start; gap: 10px; }
html.ds #device .fdp-reveal .fdp-title { margin: 0; font: 700 calc(22 * var(--type-unit))/calc(28 * var(--type-unit)) var(--fr-font); letter-spacing: var(--fr-tr-title-2); color: var(--c-label-1); text-wrap: balance; max-width: 16em; }
html.ds .fdp-reveal .fdp-title:focus { outline: none; }
/* the header: the app's own brand, where the five tabs have it (shared-brand.css: the same height, padding, mark and word sizes) */
html.ds #device > .fdp-reveal .fdp-header { position: relative; z-index: 2; justify-self: stretch; box-sizing: border-box; width: 100%; height: calc(var(--fdp-brand-top) + 71px); margin: 0; padding: calc(var(--fdp-brand-top) + 25px) 0 0; display: flex; align-items: center; justify-content: space-between; background: none; }
html.ds #device > .fdp-reveal .fdp-header .brand-home { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: transparent; }
html.ds #device > .fdp-reveal .fdp-header .brand-mark { width: 34px; height: 34px; }
html.ds #device > .fdp-reveal .fdp-header .wordmark { width: 88px; height: auto; }
@media (max-height: 760px) {
  html.ds #device > .fdp-reveal .fdp-header { height: calc(var(--fdp-brand-top) + 63px); }
  html.ds #device > .fdp-reveal .fdp-header .brand-mark { width: 31px; height: 31px; }
}
/* the words: the rating deck's own (its section line, its question's heading token, the body and secondary styles) */
html.ds .fdp-reveal .fdp-eyebrow { justify-content: center; }
html.ds .fdp-reveal .fdp-cta { margin: 0; font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--fr-font); letter-spacing: var(--fr-tr-body); color: var(--c-label-1); }
html.ds .fdp-reveal .fdp-sub { margin: 4px 0 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--fr-font); letter-spacing: var(--fr-tr-subhead); color: var(--c-label-2); }
html.ds .fdp-reveal .fdp-lede { margin: 0; font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--fr-font); letter-spacing: var(--fr-tr-body); color: var(--c-label-1); }
html.ds .fdp-reveal .fdp-fine { margin: 4px 0 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--fr-font); letter-spacing: var(--fr-tr-footnote); color: var(--c-label-3); }
html.ds .fdp-reveal .fdp-lines-head { margin: 0 0 20px; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--fr-font); color: var(--c-label-1); }
html.ds .fdp-reveal .fdp-top { margin-top: clamp(4px, 1.6vh, 20px); }
html.ds .fdp-reveal .fdp-slot { position: relative; width: 100%; min-height: 0; align-self: stretch; }
html.ds .fdp-reveal .fdp-hold { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; box-shadow: none;
  cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; border-radius: 40px; }
/* the app's own button look (a fill, a lift) never reaches the hold: it is the picture itself */
html.ds #device > .fdp-reveal .fdp-hold, html.ds #device > .fdp-reveal .fdp-hold:is(:hover, :active, :focus), html.ds #device > .fdp-reveal :is(.fdp-undo, .fdp-link) { -webkit-appearance: none; appearance: none; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.ds .fdp-reveal .fdp-hold:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -8px; }
html.ds .fdp-reveal [data-step="reveal"] .fdp-hold { pointer-events: none; }
html.ds .fdp-reveal .fdp-bottom { display: grid; width: 100%; max-width: 420px; justify-items: center; }
html.ds .fdp-reveal .fdp-bottom > .fdp-state { grid-area: 1 / 1; display: grid; justify-items: center; align-content: end; width: 100%; }
html.ds #device .fdp-reveal .fdp-link { width: auto; margin: 8px 0 0; min-height: var(--target, 44px); padding: 0 12px; color: var(--c-label-2); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--fr-font); letter-spacing: var(--fr-tr-subhead); }
html.ds .fdp-reveal :is(.fdp-link, .fdp-undo, .primary-button, .quiet-button):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
html.ds .fdp-reveal .fdp-actions { display: grid; gap: 10px; width: 100%; margin-top: 16px; }

/* the two states' words: the old leave first, the new arrive after them (a small rise; opacity and transform only) */
html.ds .fdp-reveal .fdp-state { transition: opacity var(--motion-slow) var(--motion-curve) 220ms, transform var(--motion-slow) var(--motion-curve) 220ms, visibility 0s linear 0s; }
html.ds .fdp-reveal .fdp-state.is-off { opacity: 0; transform: translateY(8px); visibility: hidden; transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-curve), visibility 0s linear var(--motion-normal); }
html.ds .fdp-reveal .fdp-bottom .fdp-s-hold.is-dim { opacity: 0; transform: translateY(4px); transition-duration: var(--motion-normal); transition-delay: 0s; }
html.ds .fdp-reveal .fdp-s-reveal:not(.is-off) > * { animation: fdp-rise var(--motion-slow) var(--motion-curve) 220ms backwards; }
html.ds .fdp-reveal .fdp-s-reveal:not(.is-off) > :nth-child(2) { animation-delay: 290ms; }
html.ds .fdp-reveal .fdp-s-reveal:not(.is-off) > :nth-child(3) { animation-delay: 360ms; }
@keyframes fdp-rise { from { opacity: 0; transform: translateY(10px); } }
html.ds .fdp-reveal.is-reduced :is(.fdp-state, .fdp-state.is-off) { transform: none !important; }
html.ds .fdp-reveal.is-reduced .fdp-s-reveal > * { animation: none !important; }

/* the five lines: the other leaf, lighting in order of strength as the print forms */
html.ds .fdp-reveal .fdp-lines { display: grid; gap: 20px; width: min(100%, 380px); margin: 0; padding: 0; list-style: none; text-align: left; }
html.ds .fdp-reveal .fdp-line { display: grid; gap: 8px; opacity: .34; transition: opacity var(--motion-slow) var(--motion-curve); }
html.ds .fdp-reveal .fdp-line.is-lit { opacity: 1; }
html.ds .fdp-reveal .fdp-line-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
html.ds .fdp-reveal .fdp-line-title { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); color: var(--c-label-1); }
html.ds .fdp-reveal .fdp-line-read { font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--h); text-align: right; }
html.ds .fdp-reveal .fdp-track { position: relative; height: 18px; }
html.ds .fdp-reveal .fdp-track::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, transparent, var(--h) 12%, var(--h) 88%, transparent); opacity: .5; }
html.ds .fdp-reveal .fdp-bead { position: absolute; top: 2px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--h); box-shadow: 0 0 0 3px rgba(9,6,12,.9), 0 0 16px var(--h); }
html.ds .fdp-reveal .fdp-line.is-none .fdp-bead { display: none; }
html.ds .fdp-reveal .fdp-ends { display: flex; justify-content: space-between; gap: 8px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }

/* two leaves: the Duo's inner display (its own leaves; nothing on the fold), and any wide landscape screen */
html.ds .fdp-reveal.is-book .fdp-stage { grid-template-columns: var(--fdp-lw) var(--fdp-fw) var(--fdp-rw); }
html.ds .fdp-reveal.is-wide .fdp-stage { grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); }
html.ds .fdp-reveal:is(.is-book, .is-wide) .fdp-leaf-print { grid-column: 1; }
html.ds .fdp-reveal:is(.is-book, .is-wide) .fdp-leaf-lines { display: grid; grid-column: 3; align-content: center; justify-items: center; padding: calc(var(--fdp-safe-t) + 24px) 36px calc(var(--fdp-safe-b) + 24px); overflow: hidden; }
/* a short phone (iPhone SE): a little less air */
@media (max-height: 700px) {
  html.ds .fdp-reveal .fdp-top { margin-top: 2px; }
  html.ds .fdp-reveal .fdp-actions { margin-top: 10px; }
  html.ds .fdp-reveal .fdp-link { margin-top: 4px; }
}
/* an iPad held upright: a larger print in a centred column */
@media (min-width: 700px) and (max-aspect-ratio: 5/4) {
  html.ds .fdp-reveal .fdp-leaf-print { padding-left: 10vw; padding-right: 10vw; }
  html.ds .fdp-reveal .fdp-bottom { max-width: 440px; }
}
html.ds .fdp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ===== Lines / Print on You and Film DNA ================================================================== */
html.ds #device .fdp-seg {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 280px; margin: 14px 0 0; padding: 3px;
  border-radius: var(--r-pill); background: var(--c-fill-2); isolation: isolate;
}
html.ds #device .fdp-seg-thumb { position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-label-1) 16%, transparent); box-shadow: inset 0 .5px 0 rgba(255,255,255,.16); transition: transform var(--motion-normal) var(--motion-curve); }
html.ds #device .fdp-scope[data-fdp-view="print"] > .fdp-seg .fdp-seg-thumb { transform: translateX(100%); }
html.ds #device .fdp-seg-btn { min-height: var(--target); margin: 0; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: none; box-shadow: none;
  color: var(--c-label-2); font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); transition: color var(--motion-normal) var(--motion-curve); }
html.ds #device .fdp-seg-btn[aria-selected="true"] { color: var(--c-label-1); }
html.ds #device .fdp-seg-btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
html.ds #device .fdp-scope:not([data-fdp-view="print"]) > .fdp-panel { display: none; }
html.ds #device .fdp-scope[data-fdp-view="print"] > :is(.fd-strand, .fd-basis, .fd-change-key, .fd-moved-key) { display: none; }

html.ds #device .fdp-panel { margin: 14px 0 0; }
html.ds #device .fdp-plate { position: relative; width: 100%; max-width: 440px; aspect-ratio: 5 / 6; margin: 0 auto; overflow: hidden; border-radius: var(--r-row);
  background: radial-gradient(90% 60% at 50% 44%, rgba(120, 60, 130, .32), transparent 70%), radial-gradient(140% 90% at 50% 40%, #2a1530 0%, #160b1a 46%, #09060c 100%); }
html.ds #device .fdp-scope[data-fdp-where="you"] .fdp-plate { aspect-ratio: 1 / 1; }
html.ds #device .fdp-still { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity var(--motion-slow) var(--motion-curve); }
html.ds #device .fdp-plate.is-painted .fdp-still { opacity: 1; }
html.ds #device .fdp-forming-line { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; text-align: center; color: var(--c-label-1);
  font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); text-shadow: 0 1px 12px rgba(0,0,0,.6); }
/* the one line under the print: no explanation (the owner: "keep it mysterious") */
html.ds #device .fdp-line { margin: 12px 0 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); text-align: center; text-wrap: balance; }
html.ds #device .fdp-panel-actions { display: grid; gap: 8px; margin: 10px 0 0; }
html.ds #device .fdp-panel-actions > button { width: 100%; margin: 0; }
html.ds #device .fdp-scope[data-fdp-where="you"] .fdp-panel-actions { margin-bottom: 14px; }
/* once on You: a gentle row when the print has changed (or has never been revealed) */
html.ds #device .fdp-offer { display: grid; gap: 2px; width: 100%; margin: 12px 0 0; padding: 12px 14px; border: 0; border-radius: var(--r-row);
  background: color-mix(in srgb, var(--c-dna-emotion) 10%, var(--c-fill-1)); box-shadow: none; color: var(--c-label-1); text-align: left; -webkit-tap-highlight-color: transparent; }
html.ds #device .fdp-offer:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
html.ds #device .fdp-offer-eyebrow { font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--c-label-2); }
html.ds #device .fdp-offer-see { display: flex; align-items: center; gap: 4px; margin-top: 4px; font: var(--fw-subhead-strong) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-seal-hi); }
@media (prefers-reduced-motion: reduce) {
  html.ds #device :is(.fdp-seg-thumb, .fdp-seg-btn, .fdp-still) { transition: none; }
}
/* the share sheet's picture: the card's own 4:5 */
html.ds .fdp-share .fdp-share-frame { aspect-ratio: 4 / 5; width: min(270px, 70%); height: auto; margin-left: auto; margin-right: auto; }
html.ds .fdp-share .fdp-share-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ===== prototype-src/ds-rituals.css ===== */
/* TRIPTIC ds-rituals layer (W6): Daily Cryptic and Friday. Scoped under html.ds (kill switch ?ds=0).
   Direction: workspace/work/frontend-motion-uplift-2026-09-30/DESIGN-DIRECTION.md sections 1, 2 (Rituals),
   3 (moments 4, 4b, 9) and 4 (loading / empty / error). Behaviour lives in ds-rituals.js.

   !IMPORTANT OVERRIDES (each beats an earlier !important):
   - .cryptic-focus-screen (the play screen) display, height, min-height, overflow and padding-bottom
     (cryptic-premium.css pins the play screen box with !important).
   - .ds-cr-home .premium-cryptic-rules display: none (the home hides the scoring triptych; an earlier rule pins its display).
   - .circle-control inside .ds-nothing: position/margin (cryptic-premium.css and triptic-app.css pin
     header circle controls with !important).
   - Cryptic home h1 font/margin (cryptic-premium.css pins font-size 31.5px !important at max-height 720px) and the
     Discover "Try asking for" card filter, box-shadow, ring, .prompt-shade background and .prompt-copy background
     (frontend-completion.css, viewport-corrections.css, interaction-targets.css pin them with !important).
   - the request capsule over a revealed Friday three, compact layout: its line's display (design-system.css pins the
     two-line clamp with !important; a why line is kept to one line there).
   Motion: transform and opacity only; springs from --mo-*. Reduced motion is 180ms opacity-only; reduced
   transparency removes the washes. No raw hex (tokens, rgb() and color-mix only). */

html.ds {
  /* sprocket holes (mask shapes, no colour): vertical for side rails, horizontal for top and bottom rails */
  --ds-holes-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15'%3E%3Crect x='1.5' y='2.5' width='7' height='10' rx='2'/%3E%3C/svg%3E");
  --ds-holes-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='10'%3E%3Crect x='2.5' y='1.5' width='10' height='7' rx='2'/%3E%3C/svg%3E");
  --ds-wash: color-mix(in srgb, var(--c-seal) 22%, transparent);
}

/* 2 Oct 2026: the Cryptic landing, play and result screens are now drawn in the bright game room (cryptic-premium.js +
   ds-cryptic-game.css). The "Cryptic home", "Cryptic play" and "Cryptic result" blocks below no longer match any screen
   (their classes are not emitted any more); they are kept, with their tests, until a separate clean-up removes them with
   the matching legacy rules in cryptic-premium.css, design-system.css and device-fit.css. Still live here: the How it
   works sheet, the ticket stub, the frames strip, the odometer, the film leader, the archive rows, Friday and Rituals. */

/* ============================================================================ shared pieces */
html.ds .ds-chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill);
  font: var(--fw-eyebrow) var(--fs-eyebrow)/1 var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  background: var(--c-fill-2); color: var(--c-label-2); white-space: nowrap;
}
html.ds .ds-chip.is-sealed { background: color-mix(in srgb, var(--c-seal) 26%, transparent); color: var(--c-seal-hi); }
html.ds .ds-chip.is-solved { background: color-mix(in srgb, var(--c-ok) 16%, transparent); color: var(--c-ok); }
/* (pages polish, 28 October 2026) Friday 3's newest three, "Latest", one chip wherever it is said (Your Fridays and the display, on
   the page's dark and on Friday's purple alike) */
html.ds .ds-chip.is-latest { background: rgb(255 255 255 / .14); color: var(--c-label-1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); }
/* three titles in a row: the first whole, the rest counted (never cut mid-title) */
html.ds .ds-ed-title > .ds-ed-more { color: var(--c-label-2); font-weight: 400; white-space: nowrap; }
/* .ds-num (design-system.css) carries tabular figures; the retired mono family is gone. */
html.ds .ds-eyebrow { font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-label-3); }

/* ============================================================================ cryptic screens: stage */
html.ds .premium-cryptic {
  background: radial-gradient(90% 38% at 50% -8%, var(--ds-wash), transparent 74%), var(--c-stage);
  color: var(--c-label-1);
}
html.ds .ds-cr .global-trio-atmosphere { display: none; }
html.ds .ds-cr .cryptic-review-note { margin: 4px 20px 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-label-3); text-align: left; }

/* ============================================================================ Cryptic home: one sealed card */
html.ds .ds-cr-home .cryptic-review-note, html.ds .ds-cr-play .cryptic-review-note { display: none; } /* the corner capsule already says LOCAL REVIEW */
html.ds .premium-cryptic-home.ds-cr-home { display: flex; flex-direction: column; min-height: 100%; }
html.ds .ds-cr-home .cryptic-intro-copy {
  flex: 1 1 auto; display: flex; flex-direction: column; width: min(100% - 40px, 430px); margin: 14px auto 0; text-align: left;
}
html.ds .ds-cr-home .cryptic-intro-copy .cryptic-kicker, html.ds .ds-cr-home .cryptic-intro-copy > p:not(.ds-edition-line),
html.ds .ds-cr-home .cryptic-five-to-one, html.ds .ds-cr-home .cryptic-time-rules,
html.ds .ds-cr-home .cryptic-access-note { display: none; }
html.ds .ds-cr-home.premium-cryptic-home > .cryptic-rules.premium-cryptic-rules, html.ds .ds-cr-home .premium-cryptic-rules { display: none !important; }
html.ds .ds-cr-home .cryptic-intro-copy h1 {
  margin: 0; font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--c-label-3);
}
html.ds .ds-hero { display: flex; flex-direction: column; align-items: center; margin: auto 0; padding: 0 0 18px; text-align: center; }
html.ds .ds-hero h2 {
  max-width: 100%; margin: 34px 0 0; font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui);
  letter-spacing: var(--tr-title-1); color: var(--c-label-1); text-wrap: balance;
}
html.ds .ds-hero p.ds-edition-line { max-width: 100%; margin: 12px 0 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); white-space: nowrap; color: var(--c-label-3); text-align: center; }
html.ds .ds-hero .ds-frames-body[hidden] { display: none; }
html.ds .ds-hero .ds-frames-body { margin-top: 20px; }

/* the sealed card: dark glass, a faint violet edge light, the mark small in the centre */
html.ds .ds-seal-card {
  position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 168px; height: 252px; border-radius: var(--r-card); isolation: isolate;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--c-seal) 22%, transparent), transparent 70%), linear-gradient(168deg, var(--c-stage-raised), var(--c-stage) 80%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-seal-hi) 26%, var(--c-line)), inset 0 1px 0 color-mix(in srgb, var(--c-seal-hi) 42%, transparent), var(--e-3);
  animation: ds-stub-in var(--motion-slow) var(--motion-spring) both;
}
html.ds .ds-seal-glow {
  position: absolute; z-index: -1; inset: -34px; border-radius: 28px; pointer-events: none; opacity: .5;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-seal) 38%, transparent), transparent);
  animation: ds-glow-breathe 6s var(--motion-breathe) infinite;
}
html.ds .ds-seal-card[data-visible="0"] .ds-seal-glow { animation-play-state: paused; }
html.ds .ds-seal-card.has-poster { background: var(--ds-poster) center / cover, var(--c-stage-raised); box-shadow: inset 0 0 0 1px var(--c-line-strong), var(--e-3); }
html.ds .ds-seal-card.has-poster .ds-seal-glow { opacity: .28; }
html.ds .ds-seal-mark { width: 44px; height: 44px; opacity: .9; }
html.ds .ds-seal-develop {
  position: absolute; inset: 0; border-radius: var(--r-card); pointer-events: none;
  background-color: rgb(124 124 128); background-image: linear-gradient(180deg, rgb(4 4 9 / .02) 28%, rgb(5 5 10 / .24) 100%), var(--ds-poster); background-blend-mode: normal, luminosity; background-size: cover; background-position: center;
  animation: ds-seal-develop var(--motion-ceremony) var(--motion-spring) 200ms both;
}

/* quiet links and the action */
html.ds .ds-cr-home .premium-cryptic-home-actions { width: min(100% - 40px, 430px); margin: 0 auto; padding: 0 0 max(8px, env(safe-area-inset-bottom)); }
html.ds .ds-cr-home .cryptic-begin { min-height: 52px; }
html.ds .ds-links { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 6px; }
html.ds .ds-links .quiet-button, html.ds .ds-cr-home .premium-cryptic-home-actions .ds-links .quiet-button {
  width: auto; min-width: 44px; margin: 0; padding: 0 16px; font: var(--fw-subhead) var(--fs-subhead)/calc(20 * var(--type-unit)) var(--font-ui); color: var(--c-label-2);
}
html.ds .ds-links .quiet-button + .quiet-button::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: 16px; border-radius: 50%; vertical-align: middle; background: var(--c-label-4); }

/* the frames row as one line of small dots */
html.ds .ds-dots { display: flex; justify-content: center; align-items: center; gap: 9px; height: 14px; }
html.ds .ds-dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--c-fill-2); }
html.ds .ds-dot.is-played { background: var(--c-label-3); }
html.ds .ds-dot.is-solved { background: var(--c-lamp); }
html.ds .ds-dot.is-today { box-shadow: 0 0 0 2px var(--c-stage), 0 0 0 3px var(--c-label-2); }

/* How it works: a bottom sheet over the home */
html.ds .ds-how { position: absolute; z-index: 90; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; }
html.ds .ds-how-scrim { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; background: rgb(0 0 0 / .56); animation: ds-fade-in var(--motion-fast) var(--motion-curve) both; }
html.ds .ds-how-panel {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 22px 20px max(20px, env(safe-area-inset-bottom)); border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--mat-chrome-solid); box-shadow: inset 0 0 0 1px var(--c-line-strong), var(--e-3); color: var(--c-label-1);
  animation: ds-how-up var(--motion-normal) var(--motion-spring) both;
}
html.ds .ds-how.is-leaving .ds-how-panel { animation: ds-how-down var(--motion-fast) var(--motion-curve) both; }
html.ds .ds-how.is-leaving .ds-how-scrim { animation: ds-fade-out var(--motion-fast) linear both; }
html.ds .ds-how-grab { position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: var(--r-pill); background: var(--c-label-4); }
html.ds .ds-how-title { margin: 8px 0 8px; font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2); color: var(--c-label-1); }
html.ds .ds-how-list { display: grid; gap: 0; }
html.ds .ds-how-item { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--c-line); }
html.ds .ds-how-item strong { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); color: var(--c-label-1); }
html.ds .ds-how-item > span { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds .ds-how-line { display: flex; align-items: baseline; gap: 14px; margin: 0; padding: 3px 0; }
html.ds .ds-how-line b { flex: 0 0 64px; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-label-1); }
html.ds .ds-how-line span { font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
html.ds .ds-how-done {
  min-height: 52px; margin-top: 10px; border: 0; border-radius: var(--r-pill); background: var(--c-lamp); color: var(--c-lamp-ink);
  font: var(--fw-headline) var(--fs-headline)/1 var(--font-ui);
}

/* the ticket stub */
html.ds .ds-stub {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 0 92px; align-items: stretch;
  width: min(100% - 40px, 430px); min-height: 132px; margin: 22px auto 0; border-radius: var(--r-card);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c-seal) 30%, var(--c-stage-raised)), var(--c-stage-raised) 72%);
  box-shadow: inset 0 0 0 1px var(--c-line-strong), var(--e-1);
  -webkit-mask: radial-gradient(circle 9px at calc(100% - 92px) 0, transparent 96%, black) top / 100% 50.5% no-repeat, radial-gradient(circle 9px at calc(100% - 92px) 100%, transparent 96%, black) bottom / 100% 50.5% no-repeat;
  mask: radial-gradient(circle 9px at calc(100% - 92px) 0, transparent 96%, black) top / 100% 50.5% no-repeat, radial-gradient(circle 9px at calc(100% - 92px) 100%, transparent 96%, black) bottom / 100% 50.5% no-repeat;
  overflow: hidden; isolation: isolate;
  animation: ds-stub-in var(--motion-slow) var(--motion-spring) both;
}
html.ds .ds-stub::before {
  content: ""; position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: 16px; background: var(--c-label-4);
  -webkit-mask: var(--ds-holes-v) 3px 0 / 10px 15px repeat-y; mask: var(--ds-holes-v) 3px 0 / 10px 15px repeat-y;
}
html.ds .ds-stub-body { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px 10px 16px 30px; }
html.ds .ds-stub-face {
  position: relative; flex: 0 0 52px; width: 52px; height: 78px; display: grid; place-items: center; border-radius: var(--r-control);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c-seal) 55%, var(--c-stage)), var(--c-stage-raised));
  box-shadow: inset 0 0 0 1px var(--c-line-strong);
}
html.ds .ds-stub-face img { width: 30px; height: 30px; opacity: .92; }
html.ds .ds-stub-face.has-poster { background: var(--ds-poster) center / cover, var(--c-fill-2); }
html.ds .ds-stub-text { display: grid; gap: 6px; min-width: 0; }
html.ds .ds-stub-kicker { font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); white-space: nowrap; color: var(--c-label-3); }
html.ds .ds-stub-title { font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: var(--tr-title-3); color: var(--c-label-1); }
html.ds .ds-stub-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-caption); color: var(--c-label-2); }
html.ds .ds-stub-perf { position: relative; z-index: 1; width: 0; margin: 14px 0; border-left: 2px dashed var(--c-line-strong); }
html.ds .ds-stub-tear { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 14px 10px 12px 14px; }
html.ds .ds-stub-tear > .ds-num { font-size: var(--fs-footnote); font-weight: 600; color: var(--c-label-1); }
html.ds .ds-stub-count { font-size: var(--fs-caption); color: var(--c-label-3); }
html.ds .ds-stub-frames { display: flex; gap: 3px; }
html.ds .ds-stub-frame { display: block; width: 10px; height: 15px; border-radius: 0; background: var(--c-fill-2); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
html.ds .ds-stub-frame.is-lit { background: var(--c-seal-hi); box-shadow: none; }
html.ds .ds-stub[data-state="solved"] .ds-stub-frame, html.ds .ds-stub[data-state="played"] .ds-stub-frame { background: var(--c-label-3); box-shadow: none; }
html.ds .ds-stub-hero { margin-top: 14px; margin-bottom: 16px; }

/* scoring triptych: three columns, tabular numerals */
html.ds .ds-cr .premium-cryptic-rules, html.ds .premium-cryptic-home.ds-cr > .cryptic-rules.premium-cryptic-rules {
  width: min(100% - 40px, 430px); margin: 14px auto 0 !important; height: auto !important; min-height: 0; border: 0; border-radius: var(--r-card); background: var(--c-fill-1);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
html.ds .ds-cr .premium-cryptic-rules > div { padding: 14px 6px 13px; text-align: center; }
html.ds .ds-cr .premium-cryptic-rules > div + div { border-left: 1px solid var(--c-line); }
html.ds .ds-cr .premium-cryptic-rules strong { font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-label-1); letter-spacing: var(--tr-title-2); }
html.ds .ds-cr .premium-cryptic-rules span { margin-top: 3px; font: var(--fw-caption) var(--fs-caption)/var(--lh-caption) var(--font-ui); color: var(--c-label-3); }
html.ds .ds-cr .cryptic-time-rules { width: min(100% - 40px, 430px); margin: 10px auto 0; }

/* frames row (moment 4b) */
html.ds .ds-frames { width: min(100% - 40px, 430px); margin: 24px auto 0; }
html.ds .ds-frames-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
html.ds .ds-frames-head .ds-num { font-size: var(--fs-caption); color: var(--c-label-3); }
html.ds .ds-film {
  overflow-x: auto; overflow-y: hidden; border-radius: var(--r-row); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line);
  scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  -webkit-mask: linear-gradient(90deg, transparent, black 22px); mask: linear-gradient(90deg, transparent, black 22px);
}
html.ds .ds-film::-webkit-scrollbar { display: none; }
html.ds .ds-film-track { width: max-content; min-width: 100%; padding: 0 8px; }
html.ds .ds-film-rail {
  display: block; height: 10px; background: var(--c-label-4);
  -webkit-mask: var(--ds-holes-h) 0 0 / 15px 10px repeat-x; mask: var(--ds-holes-h) 0 0 / 15px 10px repeat-x;
}
html.ds .ds-film-row { display: flex; margin: 0; padding: 2px 0; list-style: none; }
html.ds .ds-fr {
  position: relative; flex: 0 0 40px; height: 58px; margin: 0 2px; border-radius: var(--r-chip); scroll-snap-align: end; overflow: hidden;
  background: var(--c-stage-raised); box-shadow: inset 0 0 0 1px var(--c-line);
  display: flex; align-items: flex-end; justify-content: flex-start; padding: 0 0 4px 5px;
}
html.ds .ds-fr-n { font: var(--fw-caption-2-strong) var(--fs-caption-2)/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-label-3); }
html.ds .ds-fr.is-played { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-label-3); }
html.ds .ds-fr.is-played .ds-fr-n { color: var(--c-label-2); }
html.ds .ds-fr.is-solved { background: var(--ds-poster, none) center / cover, linear-gradient(160deg, color-mix(in srgb, var(--c-seal) 60%, var(--c-stage)), var(--c-stage-raised)); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
html.ds .ds-fr.is-solved .ds-fr-n { position: relative; z-index: 1; color: var(--c-label-1); }
html.ds .ds-fr.is-solved::after { content: ""; position: absolute; inset: auto 0 0; height: 60%; background: linear-gradient(to top, rgb(0 0 0 / .7), transparent); }
html.ds .ds-fr.is-today { box-shadow: inset 0 0 0 2px var(--c-beam); }
html.ds .ds-fr.is-gaining { animation: ds-frame-gain var(--motion-slow) var(--motion-spring) 1800ms both; }
html.ds .ds-frames-cap { margin: 10px 0 0; }
html.ds .ds-frames-cap .ds-num { font-size: var(--fs-caption); color: var(--c-label-3); }
html.ds .ds-frames-host.is-mini .ds-film { border-radius: var(--r-control); -webkit-mask: none; mask: none; overflow: hidden; }
html.ds .ds-frames-host.is-mini .ds-film-track { padding: 0 3px; }
html.ds .ds-frames-host.is-mini .ds-film-rail { height: 6px; -webkit-mask-size: 9px 6px; mask-size: 9px 6px; }
html.ds .ds-frames-host.is-mini .ds-fr { flex: 0 0 14px; height: 24px; margin: 0 1.5px; padding: 0; border-radius: 0; }
html.ds .ds-frames-host.is-mini .ds-fr-n { display: none; }

/* ============================================================================ Cryptic play (moment 4): one focal clue
   Calm by construction: header (Leave · brand · How it works), one quiet status line (pips + "Clue 2 of 6 · 850 pts"),
   the current clue as the only headline, earlier clues as a soft list above it, and the guess dock pinned at the bottom.
   Unopened clues are implied by the pips; there are no sealed rows. Scoring lives in the How it works sheet. */
html.ds .ds-cr-play.cryptic-focus-screen { display: flex !important; flex-direction: column; height: 100% !important; min-height: 0 !important; overflow: clip !important; padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; }
html.ds .ds-cr-play .cryptic-how-button { color: var(--c-label-2); }
html.ds .ds-cr-play .cryptic-how-button .trip-ui-icon { width: 22px; height: 22px; }

/* status: pips over one caption */
html.ds .ds-cr-play .cryptic-focus-status { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 6px auto 0; padding: 0 20px; text-align: center; }
html.ds .ds-cr-play .cryptic-focus-pips { display: flex; align-items: center; gap: 7px; height: 8px; }
html.ds .ds-cr-play .cryptic-focus-pip { display: block; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--c-fill-2); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
html.ds .ds-cr-play .cryptic-focus-pip.is-revealed { background: var(--c-label-3); box-shadow: none; }
html.ds .ds-cr-play .cryptic-focus-pip.is-current { width: 22px; background: var(--c-lamp); box-shadow: none; transform-origin: left center; }
html.ds .ds-cr-play .cryptic-focus-pip.ds-lit { animation: ds-pip-grow var(--motion-normal) var(--motion-spring) both; }
html.ds .ds-cr-play .cryptic-focus-pip.ds-dim { animation: ds-frame-dim var(--motion-slow) var(--motion-curve) both; }
html.ds .ds-cr-play .cryptic-focus-caption {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 7px; margin: 0;
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); font-variant-numeric: tabular-nums; color: var(--c-label-2);
}
html.ds .ds-cr-play .cryptic-focus-caption > i { font-style: normal; color: var(--c-label-4); }
html.ds .ds-cr-play .cryptic-focus-score { display: inline-flex; align-items: baseline; gap: 3px; color: var(--c-label-2); }
html.ds .ds-cr-play .cryptic-focus-score strong { font-weight: 600; color: var(--c-label-1); }
html.ds .ds-cr-play .cryptic-focus-score strong.ds-odo-src { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.ds .ds-cr-play .cryptic-focus-score .ds-odo { align-self: center; font: 600 var(--fs-footnote)/1 var(--font-ui); color: var(--c-label-1); }
html.ds .ds-cr-play .cryptic-focus-guesses { color: var(--c-label-2); }

/* the stage: the only scrolling region; the clue group centres itself while it fits */
html.ds .ds-cr-play .cryptic-focus-stage {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: min(100% - 48px, 520px); margin: 0 auto; padding: 18px 0 14px;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
html.ds .ds-cr-play .cryptic-focus-stage::-webkit-scrollbar { display: none; }
html.ds .ds-cr-play .cryptic-focus-clues { display: flex; flex-direction: column; gap: 26px; margin: auto 0; }
html.ds .ds-cr-play .cryptic-focus-earlier { display: grid; gap: 12px; margin: 0; padding: 0 0 22px; list-style: none; border-bottom: 1px solid var(--c-line); }
html.ds .ds-cr-play .cryptic-focus-earlier li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: baseline; }
html.ds .ds-cr-play .cryptic-focus-earlier-number { font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-label-3); text-align: right; }
html.ds .ds-cr-play .cryptic-focus-earlier p { margin: 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); overflow-wrap: anywhere; }
html.ds .ds-cr-play .cryptic-focus-current { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; outline: none; transition: opacity var(--motion-fast) var(--motion-curve); }
html.ds .ds-cr-play .cryptic-focus-label { font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-seal-hi); }
html.ds .ds-cr-play .cryptic-focus-text {
  max-width: 22ch; margin: 0; font: 600 var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); color: var(--c-label-1);
  text-wrap: balance; overflow-wrap: anywhere; hyphens: manual;
}
html.ds .ds-cr-play .cryptic-focus-current.is-long .cryptic-focus-text { max-width: 26ch; font-size: var(--fs-title-2); line-height: var(--lh-title-2); letter-spacing: var(--tr-title-2); }
html.ds .ds-cr-play .cryptic-focus-current.ds-out { animation: ds-clue-out var(--motion-slow) var(--motion-spring) both; }
html.ds .ds-cr-play .ds-lined .ds-w { display: inline-block; animation: ds-line-in var(--motion-normal) var(--motion-curve) calc(160ms + var(--ds-line, 0) * var(--mo-stagger, 40ms)) both; }
html.ds .ds-cr-play.is-revealing-clue .cryptic-focus-current { opacity: .4; }
html.ds .ds-cr-play.is-found .cryptic-focus-pip { width: 7px; background: var(--c-lamp); box-shadow: none; animation: ds-frame-gain var(--motion-normal) var(--motion-spring) both; }
html.ds .ds-cr-play.is-found .cryptic-focus-label { color: var(--c-ok); }

/* the dock: feedback line, one input with the Lamp Guess button, then a quiet "Need another clue?" */
html.ds .ds-cr-play .cryptic-focus-dock { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; width: min(100% - 32px, 520px); margin: 0 auto; padding: 10px 0 0; }
html.ds .ds-cr-play .cryptic-focus-feedback { min-height: 0; margin: 0 0 10px; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-1); text-align: center; }
html.ds .ds-cr-play .cryptic-focus-feedback:empty { display: none; }
html.ds .ds-cr-play.is-found .cryptic-focus-feedback { color: var(--c-ok); }
html.ds .ds-cr-play .cryptic-focus-row {
  display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 18px; border-radius: var(--r-pill);
  background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line-strong);
}
html.ds .ds-cr-play .cryptic-focus-row:focus-within { box-shadow: inset 0 0 0 1.5px var(--c-label-3); }
html.ds .ds-cr-play .cryptic-focus-row.ds-weave { animation: ds-weave var(--motion-fast) var(--motion-spring) both; }
html.ds .ds-cr-play .cryptic-focus-row input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; outline: none; background: transparent; box-shadow: none;
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); color: var(--c-label-1); caret-color: var(--c-seal-hi);
}
html.ds .ds-cr-play .cryptic-focus-row input::placeholder { color: var(--c-label-3); opacity: 1; }
html.ds .ds-cr-play .cryptic-focus-row button[type="submit"] {
  flex: 0 0 auto; min-width: 84px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: var(--c-lamp); box-shadow: none; color: var(--c-lamp-ink);
  font: var(--fw-headline) var(--fs-headline)/1 var(--font-ui);
}
html.ds .ds-cr-play .cryptic-focus-row button[type="submit"]:disabled { background: var(--c-fill-2); color: var(--c-label-3); }
html.ds .ds-cr-play .cryptic-focus-hint {
  display: inline-flex; align-self: center; align-items: baseline; justify-content: center; gap: 7px; min-height: 44px; margin: 4px 0 0; padding: 0 14px;
  border: 0; border-radius: var(--r-pill); background: transparent; box-shadow: none; color: var(--c-label-1);
  font: var(--fw-subhead) var(--fs-subhead)/1 var(--font-ui);
}
html.ds .ds-cr-play .cryptic-focus-hint small { font: var(--fw-footnote) var(--fs-footnote)/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-label-3); }
html.ds .ds-cr-play .cryptic-focus-hint:disabled { color: var(--c-label-3); }
html.ds .ds-cr-play .cryptic-focus-hint.is-opening { opacity: .8; }

/* keyboard up: the visual viewport owns the height; keep the clue, quieten the rest */
html.ds .device.keyboard-open > .ds-cr-play.cryptic-focus-screen { padding-bottom: 6px !important; }
html.ds .device.keyboard-open .ds-cr-play .cryptic-focus-stage { padding-top: 10px; }
html.ds .device.keyboard-open .ds-cr-play .cryptic-focus-earlier { display: none; }
html.ds .device.keyboard-open .ds-cr-play .cryptic-focus-text { font-size: var(--fs-title-2); line-height: var(--lh-title-2); letter-spacing: var(--tr-title-2); }
html.ds .device.keyboard-open .ds-cr-play .cryptic-focus-hint { min-height: 40px; margin-top: 0; }

/* phone sizes (device-fit.js): SE-class compact heights tighten; tall wide phones give the clue more room */
html.ds[data-device-h="compact"] .ds-cr-play .cryptic-focus-status { gap: 8px; margin-top: 2px; }
html.ds[data-device-h="compact"] .ds-cr-play .cryptic-focus-stage { padding: 12px 0 8px; }
html.ds[data-device-h="compact"] .ds-cr-play .cryptic-focus-clues { gap: 20px; }
html.ds[data-device-h="compact"] .ds-cr-play .cryptic-focus-earlier { gap: 9px; padding-bottom: 16px; }
html.ds[data-device-h="compact"] .ds-cr-play .cryptic-focus-text { font-size: var(--fs-title-2); line-height: var(--lh-title-2); letter-spacing: var(--tr-title-2); }
html.ds[data-device-h="compact"] .ds-cr-play .cryptic-focus-current.is-long .cryptic-focus-text { font-size: var(--fs-title-3); line-height: var(--lh-title-3); letter-spacing: var(--tr-title-3); }
html.ds[data-device-h="compact"] .ds-cr-play .cryptic-focus-hint { margin-top: 0; }
html.ds[data-device-w="narrow"] .ds-cr-play .cryptic-focus-stage { width: calc(100% - 40px); }
html.ds[data-device-w="narrow"] .ds-cr-play .cryptic-focus-dock { width: calc(100% - 24px); }
html.ds[data-device-h="tall"] .ds-cr-play .cryptic-focus-status { gap: 12px; margin-top: 10px; }
html.ds[data-device-h="tall"] .ds-cr-play .cryptic-focus-clues { gap: 32px; }
html.ds[data-device-h="tall"][data-device-w="wide"] .ds-cr-play .cryptic-focus-current:not(.is-long) .cryptic-focus-text { font-size: var(--fs-large-title); line-height: var(--lh-large-title); letter-spacing: var(--tr-large-title); }
html.ds[data-device-h="tall"] .ds-cr-play .cryptic-focus-dock { padding-top: 14px; }
html.ds .manual-large-text .ds-cr-play .cryptic-focus-earlier p { font-size: var(--fs-body); line-height: var(--lh-body); }

/* the score odometer */
html.ds .ds-odo { display: inline-flex; font: var(--fw-headline) var(--fs-headline)/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-label-1); height: 1em; }
html.ds .ds-odo-col { display: inline-block; height: 1em; overflow: hidden; }
html.ds .ds-odo-strip { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -1em)); }
html.ds .ds-odo-strip > i { display: block; height: 1em; font-style: normal; line-height: 1; }
html.ds .ds-odo-sep { display: inline-block; line-height: 1; }

/* film-leader countdown for Preparing */
html.ds .ds-rl-host { width: auto; height: auto; min-width: 0; border: 0; border-radius: 0; background: none; box-shadow: none; display: grid; place-items: center; font-size: 0; }
html.ds .ds-rl { position: relative; display: block; width: 88px; height: 88px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--c-line-strong); overflow: hidden; }
html.ds .ds-rl-ring { position: absolute; inset: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c-line-strong); }
html.ds .ds-rl-x { position: absolute; inset: 0; background: linear-gradient(var(--c-line-strong), var(--c-line-strong)) center / 1.5px 100% no-repeat, linear-gradient(var(--c-line-strong), var(--c-line-strong)) center / 100% 1.5px no-repeat; }
html.ds .ds-rl-sweep {
  position: absolute; inset: 0; border-radius: 50%; transform-origin: 50% 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, color-mix(in srgb, var(--c-lamp) 38%, transparent) 99.5%, transparent 100%);
  animation: ds-rl-sweep var(--motion-slow) linear 3 both;
}
html.ds .ds-rl-num { position: absolute; inset: 22px; display: block; overflow: hidden; border-radius: 50%; background: var(--c-stage); font: var(--fw-title-1) var(--fs-title-1)/calc(44 * var(--type-unit)) var(--font-ui); font-variant-numeric: tabular-nums; text-align: center; color: var(--c-label-1); height: 44px; }
html.ds .ds-rl-col { display: flex; flex-direction: column; animation: ds-rl-count 2400ms steps(1, end) both; }
html.ds .ds-rl-col > span { display: block; height: 44px; font-size: var(--fs-title-1); line-height: calc(44 * var(--type-unit)); font-weight: var(--fw-title-1); }
html.ds .ds-cr .cryptic-state-card[data-state="loading"] { background: none; border: 0; box-shadow: none; }

/* ============================================================================ Cryptic result: the solve */
html.ds .ds-cr-result { padding-left: 20px !important; padding-right: 20px !important; }
html.ds .ds-cr-result .cryptic-reward { width: min(100%, 430px); margin-top: 6px; }
html.ds .ds-cr-result .cryptic-reward-halo, html.ds .ds-cr-result .cryptic-reward-mark { display: none; }
html.ds .ds-cr-result .cryptic-reward .eyebrow { margin: 6px 0 0; font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); color: var(--c-seal-hi); }
html.ds .ds-cr-result .cryptic-reward h1 { margin: 12px 0 0; font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); }
html.ds .ds-cr-result .cryptic-reward > p { font: var(--fw-body) calc(15 * var(--type-unit))/calc(21 * var(--type-unit)) var(--font-ui); color: var(--c-label-2); }
html.ds .ds-cr-result .cryptic-reward.ds-solved > h1, html.ds .ds-cr-result .cryptic-reward.ds-solved > p {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
html.ds .ds-cr-result .cryptic-answer-card { min-height: 0; margin-top: 18px; border: 0; border-radius: 0; background: none; overflow: visible; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
html.ds .ds-cr-result .cryptic-answer-card::after { content: none; }
html.ds .ds-cr-result .cryptic-answer-card > div:not(.ds-develop) { position: static; left: auto; right: auto; bottom: auto; }
html.ds .ds-cr-result .cryptic-answer-card small { display: block; font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); color: var(--c-label-3); }
html.ds .ds-cr-result .cryptic-answer-card h2 { margin: 8px 0 0; font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); color: var(--c-label-1); }
html.ds .ds-cr-result .cryptic-answer-card p { margin: 6px 0 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); font-variant-numeric: tabular-nums; color: var(--c-label-2); }
html.ds .ds-cr-result .cryptic-answer-card:not(.ds-poster-card) { padding: 22px 18px; border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); align-items: stretch; }
html.ds .ds-cr-result .cryptic-answer-card:not(.ds-poster-card) h2 { font-size: calc(28 * var(--type-unit)); line-height: calc(32 * var(--type-unit)); }
html.ds .ds-develop {
  position: relative; order: -1; width: 176px; aspect-ratio: 2 / 3; border-radius: var(--r-row); overflow: hidden;
  background: var(--ds-poster, none) center / cover, linear-gradient(160deg, color-mix(in srgb, var(--c-seal) 40%, var(--c-stage)), var(--c-stage-raised));
  box-shadow: inset 0 0 0 1px var(--c-line-strong), var(--e-3);
}
html.ds .ds-develop > i { position: absolute; inset: 0; pointer-events: none; }
html.ds .ds-develop-silver {
  background-color: rgb(124 124 128);
  background-image: linear-gradient(180deg, rgb(4 4 9 / .02) 28%, rgb(5 5 10 / .2) 51%, rgb(3 3 7 / .96) 86%), var(--ds-poster, none);
  background-blend-mode: normal, luminosity; background-size: cover; background-position: center; opacity: 0;
}
/* the polaroid fog: warm milk over the frame that clears to full colour while the silver stage passes under it.
   It takes the place of the old darkroom safelight glow, so a solve still composites exactly three layers. */
html.ds .ds-develop-safe { background: radial-gradient(90% 70% at 50% 35%, var(--c-lamp), color-mix(in srgb, var(--c-lamp) 84%, var(--c-caution))); opacity: 0; }
html.ds .ds-solve .ds-develop { animation: ds-rise var(--motion-normal) var(--motion-curve) 300ms both; }
html.ds .ds-solve .ds-develop-silver { animation: ds-develop-silver var(--motion-ceremony) linear 600ms both; }
html.ds .ds-solve .ds-develop-safe { animation: ds-develop-milk 2100ms var(--motion-curve) 300ms both; }
html.ds .ds-solve .cryptic-answer-card > div:not(.ds-develop) { position: relative; }
html.ds .ds-solve .cryptic-answer-card > div:not(.ds-develop)::before {
  content: ""; position: absolute; left: 50%; bottom: -10px; width: 100%; height: 1px; background: var(--c-line-strong); transform-origin: 50% 50%;
  animation: ds-collapse var(--motion-fast) var(--motion-curve) both;
}
html.ds .ds-solve .cryptic-answer-card small, html.ds .ds-solve .cryptic-answer-card > div:not(.ds-develop) > p { animation: ds-fade-in var(--motion-normal) var(--motion-curve) 760ms both; }
html.ds .ds-lp { position: relative; display: inline-block; }
html.ds .ds-pressing .ds-lp { animation: ds-lp-in var(--motion-fast) var(--motion-curve) calc(120ms + var(--ds-i, 0) * 1ms) both; }
html.ds .ds-pressing .ds-lp::after {
  content: ""; position: absolute; inset: -.12em -.08em; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--c-lamp), transparent); opacity: 0;
  animation: ds-ink var(--motion-normal) var(--motion-curve) calc(120ms + var(--ds-i, 0) * 1ms) both;
}
html.ds .ds-cr-result .cryptic-result-stats {
  grid-template-columns: 1fr 1fr; width: 100%; margin-top: 16px; border: 0; border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line);
}
html.ds .ds-cr-result .cryptic-result-stats > div { padding: 14px 8px; }
html.ds .ds-cr-result .cryptic-result-stats > div:first-child { grid-column: 1 / -1; padding: 18px 8px 14px; border-bottom: 1px solid var(--c-line); }
html.ds .ds-cr-result .cryptic-result-stats > div + div { border-left: 0; }
html.ds .ds-cr-result .cryptic-result-stats > div:nth-child(3) { border-left: 1px solid var(--c-line); }
html.ds .ds-cr-result .cryptic-result-stats strong { font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-label-1); }
html.ds .ds-cr-result .cryptic-result-stats > div:first-child strong { font-size: var(--fs-large-title); line-height: var(--lh-large-title); font-weight: var(--fw-large-title); letter-spacing: var(--tr-large-title); }
html.ds .ds-cr-result .cryptic-result-stats span { font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); color: var(--c-label-3); margin-top: 4px; }
html.ds .ds-solve .cryptic-result-stats { animation: ds-score-in var(--motion-slow) var(--motion-spring) 1300ms both; }
html.ds .ds-timecode { margin: 12px 0 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); font-variant-numeric: tabular-nums; color: var(--c-label-3); text-align: center; }
html.ds .ds-timecode b { font-weight: 600; color: var(--c-label-1); }
html.ds .ds-solve .ds-timecode { animation: ds-fade-in var(--motion-normal) var(--motion-curve) 1500ms both; }
html.ds .ds-cr-result .cryptic-share-grid { margin-top: 12px; color: var(--c-label-3); }
html.ds .ds-cr-result .ds-frames { width: 100%; }
html.ds .ds-cr-result .cryptic-rank-card, html.ds .ds-cr-result .cryptic-unranked-card { border: 0; border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); }
html.ds .ds-cr-result .cryptic-time-summary, html.ds .ds-cr-result .cryptic-next-edition { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }

/* ============================================================================ Cryptic archive, paywall, settings, nudge */
html.ds .ds-cr .cryptic-page-heading h1 { font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); color: var(--c-label-1); }
html.ds .ds-cr .cryptic-page-heading p { font: var(--fw-body) calc(15 * var(--type-unit))/calc(21 * var(--type-unit)) var(--font-ui); color: var(--c-label-2); }
html.ds .ds-cr .cryptic-section-kicker { font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); color: var(--c-seal-hi); }
html.ds .ds-cr .cryptic-archive-list { gap: 10px; }
html.ds .ds-cr .cryptic-archive-list > button.ds-ed-row {
  position: relative; grid-template-columns: 52px minmax(0, 1fr) 20px; min-height: 84px; padding: 12px 14px 12px 34px; gap: 14px;
  border: 0; border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); overflow: hidden;
}
html.ds .ds-cr .cryptic-archive-list > button.ds-ed-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 18px; background: var(--c-label-4);
  -webkit-mask: var(--ds-holes-v) 4px 0 / 10px 15px repeat-y; mask: var(--ds-holes-v) 4px 0 / 10px 15px repeat-y;
}
html.ds .ds-cr .cryptic-archive-date { width: 52px; height: 64px; border: 0; border-radius: var(--r-chip); background: var(--c-stage-raised); box-shadow: inset 0 0 0 1px var(--c-line-strong); color: var(--c-label-1); }
html.ds .ds-cr .cryptic-archive-date b { font: var(--fw-title-3) var(--fs-title-3)/calc(22 * var(--type-unit)) var(--font-ui); font-variant-numeric: tabular-nums; }
html.ds .ds-cr .cryptic-archive-date { display: grid; place-items: center; }
html.ds .ds-cr .cryptic-archive-date small { display: none; }
html.ds .ds-cr .cryptic-archive-list > button.has-poster .cryptic-archive-date { background: var(--ds-poster) center / cover, var(--c-stage-raised); }
html.ds .ds-cr .cryptic-archive-list > button.has-poster .cryptic-archive-date b { text-shadow: 0 1px 4px var(--c-stage); }
html.ds .ds-cr .cryptic-archive-copy strong { font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); font-variant-numeric: tabular-nums; color: var(--c-label-1); }
html.ds .ds-cr .cryptic-archive-copy small { display: inline-flex; align-items: center; margin-top: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); background: var(--c-fill-2); font: var(--fw-caption-2-strong) var(--fs-caption-2)/1 var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-label-2); }
html.ds .ds-cr .cryptic-archive-list > button[data-ds-state="solved"] .cryptic-archive-copy small { background: color-mix(in srgb, var(--c-ok) 16%, transparent); color: var(--c-ok); }
html.ds .ds-cr .cryptic-archive-list > button i { color: var(--c-label-3); }
html.ds .ds-cr .cryptic-product-state, html.ds .ds-cr .cryptic-state-card { background: none; border: 0; box-shadow: none; }
html.ds .ds-cr .cryptic-product-state h1 { font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); color: var(--c-label-1); }
html.ds .ds-cr .cryptic-product-state p { font: var(--fw-body) calc(15 * var(--type-unit))/calc(21 * var(--type-unit)) var(--font-ui); color: var(--c-label-2); }

html.ds [data-product-route="crypticPaywall"] .membership-toolbar, html.ds [data-product-route="crypticPaywall"] .membership-intro { margin-left: 20px; margin-right: 20px; }
html.ds [data-product-route="crypticPaywall"] .ds-stub-hero { margin: 4px 20px 20px; width: auto; }
html.ds [data-product-route="crypticSettings"] .ds-stub-hero { margin: 8px 20px 16px; width: auto; }
html.ds [data-product-route="crypticSettings"] .ds-stub-hero .ds-stub-tear > .ds-num { color: var(--c-label-1); }
html.ds [data-product-route="crypticNudge"] .cryptic-sample-card {
  position: relative; overflow: hidden; border: 0; border-radius: var(--r-card); padding-left: 34px; background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line);
}
html.ds [data-product-route="crypticNudge"] .cryptic-sample-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 18px; background: var(--c-label-4);
  -webkit-mask: var(--ds-holes-v) 4px 0 / 10px 15px repeat-y; mask: var(--ds-holes-v) 4px 0 / 10px 15px repeat-y;
}

/* ============================================================================ Friday reel (moment 9) */
html.ds .ds-reel { display: block; }
html.ds .ds-reel-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
html.ds .ds-reel-strip::before, html.ds .ds-reel-strip::after {
  content: ""; grid-column: 1 / -1; height: 10px; background: var(--c-label-4);
  -webkit-mask: var(--ds-holes-h) 0 0 / 15px 10px repeat-x; mask: var(--ds-holes-h) 0 0 / 15px 10px repeat-x;
}
html.ds .ds-rf {
  position: relative; display: flex; align-items: flex-end; justify-content: center; height: 76px; padding-bottom: 7px; border-radius: var(--r-chip);
  background: var(--c-stage-raised); box-shadow: inset 0 0 0 1px var(--c-line);
}
html.ds .ds-rf-d { font: var(--fw-caption-2-strong) var(--fs-caption-2)/1 var(--font-ui); letter-spacing: var(--tr-caption-2); font-variant-numeric: tabular-nums; color: var(--c-label-3); }
/* (pages polish, 28 October 2026; the owner: "the week strip's states are backwards": Mon and Tue, gone, had the brightest outlines
   and Thursday, still to come, was the darkest) Past days are the dimmest, a faint frame with no fill and the quietest label; today is lit (the
   beam); the days still to come are the plain frame; Friday is the goal (the seal). One order of brightness: past < ahead < today, Friday. */
html.ds .ds-rf.is-past { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-line) 70%, transparent); }
html.ds .ds-rf.is-past .ds-rf-d { color: var(--c-label-3); }
html.ds .ds-rf.is-ahead { background: var(--c-stage-raised); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
html.ds .ds-rf.is-ahead .ds-rf-d { color: var(--c-label-2); }
html.ds .ds-rf.is-today { background: color-mix(in srgb, var(--c-beam) 16%, var(--c-stage-raised)); box-shadow: inset 0 0 0 2px var(--c-beam); }
html.ds .ds-rf.is-today .ds-rf-d { color: var(--c-label-1); }
html.ds .ds-rf.is-can { background: color-mix(in srgb, var(--c-seal) 24%, var(--c-stage-raised)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-seal-hi) 70%, transparent); }
html.ds .ds-rf.is-can.is-today { box-shadow: inset 0 0 0 2px var(--c-beam); }
html.ds .ds-rf.is-can .ds-rf-d { color: var(--c-seal-hi); }
html.ds .ds-can {
  position: absolute; left: 50%; top: 14px; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--c-stage) 0 5.5px, transparent 6px),
    radial-gradient(circle at 50% 50%, transparent 0 10px, color-mix(in srgb, var(--c-seal-hi) 70%, transparent) 10.5px 11.5px, transparent 12px),
    var(--c-seal-fill);
  box-shadow: inset 0 0 0 1.5px var(--c-seal-hi);
}
html.ds .ds-can-hub { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 10%, rgb(255 255 255 / .16) 10% 14%, transparent 14% 43%, rgb(255 255 255 / .16) 43% 47%, transparent 47% 76%, rgb(255 255 255 / .16) 76% 80%, transparent 80%); }
html.ds .ds-reel-line { margin: 10px 0 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); font-variant-numeric: tabular-nums; color: var(--c-label-2); }
/* split-flap: a flipping digit is two half-cards. The top half of the old digit folds forward, the bottom half hands over at the hinge. */
html.ds .ds-flip { position: relative; display: inline-block; perspective: 120px; }
html.ds .ds-flip-new { display: inline-block; animation: ds-flip-new var(--motion-normal) linear calc(var(--ds-i, 0) * 40ms) both; }
html.ds .ds-flip::before, html.ds .ds-flip::after { content: attr(data-prev); position: absolute; inset: 0; display: block; pointer-events: none; }
html.ds .ds-flip::before { clip-path: inset(0 0 50% 0); transform-origin: 50% 50%; backface-visibility: hidden; animation: ds-flip-top var(--motion-fast) var(--motion-curve) calc(var(--ds-i, 0) * 40ms) both; }
html.ds .ds-flip::after { clip-path: inset(50% 0 0 0); animation: ds-flip-hold var(--motion-normal) linear calc(var(--ds-i, 0) * 40ms) both; }
@keyframes ds-flip-new { 0%, 49% { clip-path: inset(0 0 50% 0); } 50%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes ds-flip-top { from { transform: rotateX(0deg); opacity: 1; } 99% { opacity: 1; } to { transform: rotateX(-90deg); opacity: 0; } }
@keyframes ds-flip-hold { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
html.ds .ds-reel[data-state="open"] .ds-can { animation: ds-breathe 6s var(--motion-breathe) infinite; }
html.ds .ds-reel[data-state="open"][data-visible="0"] .ds-can { animation-play-state: paused; }
html.ds .ds-reel.is-mini .ds-reel-strip { gap: 3px; }
html.ds .ds-reel.is-mini .ds-reel-strip::before, html.ds .ds-reel.is-mini .ds-reel-strip::after { height: 6px; -webkit-mask-size: 9px 6px; mask-size: 9px 6px; }
html.ds .ds-reel.is-mini .ds-rf { height: 34px; padding-bottom: 0; }
html.ds .ds-reel.is-mini .ds-rf-d { display: none; }
html.ds .ds-reel.is-mini .ds-can { top: 7px; width: 20px; height: 20px; margin-left: -10px; background: radial-gradient(circle at 50% 50%, var(--c-stage) 0 3px, transparent 3.5px), var(--c-seal-fill); box-shadow: inset 0 0 0 1px var(--c-seal-hi); }
html.ds .ds-reel.is-mini .ds-reel-line { margin-top: 8px; font-size: calc(11 * var(--type-unit)); line-height: calc(14 * var(--type-unit)); }

/* the Friday pre-release screen */
html.ds .ds-fri-hero { margin: 6px 20px 0; padding: 16px 16px 14px; border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); }
html.ds .ds-fri-note { margin: 12px 0 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }
html.ds .ds-fri .onboarding-copy h2 { font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); }

/* Friday archive: 100px edition cards */
html.ds [data-product-route="fridayArchive"] .sublist, html.ds [data-product-route="fridayArchive"] .library-history-list { display: grid; gap: 10px; margin: 6px 20px 0; padding: 0; }
html.ds .ds-ed-row {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) 16px; align-items: center; gap: 16px; width: 100%; min-height: 100px;
  padding: 12px 14px; border: 0; border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); text-align: left; color: var(--c-label-1);
}
html.ds .ds-ed-thumb { display: grid; grid-template-columns: repeat(3, 40px); gap: 4px; }
html.ds .ds-ed-tile { display: block; width: 40px; height: 60px; border-radius: var(--r-chip); background: var(--c-fill-2); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
html.ds .ds-ed-tile.has-poster { background: var(--ds-poster) center / cover, var(--c-fill-2); }
html.ds .ds-ed-tile.is-sealed { background: color-mix(in srgb, var(--c-seal) 12%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-seal-hi) 70%, transparent); }
html.ds .ds-ed-hue-0 { background: linear-gradient(160deg, color-mix(in srgb, var(--c-dna-emotion) 55%, var(--c-stage)), var(--c-stage-raised)); }
html.ds .ds-ed-hue-1 { background: linear-gradient(160deg, color-mix(in srgb, var(--c-dna-tone) 55%, var(--c-stage)), var(--c-stage-raised)); }
html.ds .ds-ed-hue-2 { background: linear-gradient(160deg, color-mix(in srgb, var(--c-dna-pace) 55%, var(--c-stage)), var(--c-stage-raised)); }
html.ds .ds-ed-hue-3 { background: linear-gradient(160deg, color-mix(in srgb, var(--c-dna-worlds) 55%, var(--c-stage)), var(--c-stage-raised)); }
html.ds .ds-ed-hue-4 { background: linear-gradient(160deg, color-mix(in srgb, var(--c-dna-scope) 55%, var(--c-stage)), var(--c-stage-raised)); }
html.ds .ds-ed-hue-5 { background: linear-gradient(160deg, color-mix(in srgb, var(--c-dna-answers) 55%, var(--c-stage)), var(--c-stage-raised)); }
html.ds .ds-ed-hue-0.has-poster, html.ds .ds-ed-hue-1.has-poster, html.ds .ds-ed-hue-2.has-poster, html.ds .ds-ed-hue-3.has-poster, html.ds .ds-ed-hue-4.has-poster, html.ds .ds-ed-hue-5.has-poster { background: var(--ds-poster) center / cover, var(--c-fill-2); }
html.ds .ds-ed-copy { display: grid; gap: 4px; min-width: 0; justify-items: start; }
html.ds .ds-ed-date { font: 600 var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); font-variant-numeric: tabular-nums; color: var(--c-label-2); }
html.ds .ds-ed-title { font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; }
html.ds .ds-ed-title:has(> .ds-ed-more) { display: block; -webkit-line-clamp: unset; overflow: visible; }
html.ds .ds-ed-note { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); text-align: left; }
html.ds .ds-ed-chev { font-style: normal; font-size: calc(22 * var(--type-unit)); line-height: 1; color: var(--c-label-3); }
html.ds .ds-ed-card.is-cryptic { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 14px; border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); }
html.ds .ds-ed-frame { display: block; width: 66px; height: 96px; border-radius: var(--r-chip); background: var(--c-stage-raised); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
html.ds .ds-ed-frame.is-solved { background: var(--ds-poster, none) center / cover, linear-gradient(160deg, color-mix(in srgb, var(--c-seal) 60%, var(--c-stage)), var(--c-stage-raised)); }
html.ds .ds-ed-frame.is-played { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-label-3); }

/* ============================================================================ Discover "Tonight" slots */
html.ds .ds-tonight [data-ds-slot][data-ds-filled] > .ds-tonight-legacy { display: none; }
/* 1 Oct 2026 redesign: each ritual is an object. Friday: three sealed cards fanned behind a violet seal. Cryptic: a
   machined film reel whose leader ends in a lit "?" frame. Title top, object centre, schedule + state chip below. */
html.ds .ds-tonight-slot[data-ds-filled] { height: auto; overflow: visible; border: 0; background: none; box-shadow: none; }
html.ds .ds-tn-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; min-height: 232px; padding: 14px 14px 12px; text-align: left; overflow: hidden;
  border: 0; border-radius: var(--r-card); color: var(--c-label-1); cursor: pointer;
  background: radial-gradient(120% 70% at 50% 58%, rgba(255, 255, 255, .05), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)), var(--c-stage-raised);
  box-shadow: inset 0 0 0 1px var(--c-line-strong), inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 30px rgba(0, 0, 0, .4);
}
html.ds .ds-tn-card.is-friday {
  background: radial-gradient(90% 60% at 50% 55%, rgba(139, 92, 246, .26), transparent 72%), linear-gradient(180deg, rgba(139, 92, 246, .1), rgba(139, 92, 246, .02)), var(--c-stage-raised);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .3), inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 30px rgba(0, 0, 0, .4);
}
html.ds .ds-tn-card.is-cryptic { background: radial-gradient(90% 60% at 40% 55%, rgba(104, 201, 255, .12), transparent 72%), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)), var(--c-stage-raised); }
html.ds .ds-tn-title { font: 600 var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-1); }
html.ds .ds-tn-art { position: relative; display: block; flex: 1 1 auto; min-height: 92px; }
/* the fan */
html.ds .ds-tn-fc {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 66px; margin: -33px 0 0 -23px; border-radius: var(--r-chip); display: block;
  background:
    radial-gradient(1px 1px at 30% 20%, rgba(255, 255, 255, .25), transparent 70%), radial-gradient(1px 1px at 70% 64%, rgba(255, 255, 255, .2), transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02) 45%, rgba(0, 0, 0, .3)), rgba(20, 18, 30, 1);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .55), 1px 4px 14px rgba(139, 92, 246, .35), 0 8px 14px rgba(0, 0, 0, .5);
  transition: rotate var(--motion-fast) var(--motion-spring), translate var(--motion-fast) var(--motion-spring);
}
html.ds .ds-tn-fc.is-l { translate: -26px 5px; rotate: -14deg; opacity: .9; }
html.ds .ds-tn-fc.is-r { translate: 26px 5px; rotate: 14deg; opacity: .9; }
html.ds .ds-tn-fc.is-c { width: 52px; height: 74px; margin: -37px 0 0 -26px; box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .7), 2px 5px 18px rgba(139, 92, 246, .5), 0 10px 16px rgba(0, 0, 0, .55); }
html.ds .ds-tn-seal {
  position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; translate: -50% -50%; display: flex; align-items: center; justify-content: center; gap: 2px; border-radius: var(--r-pill);
  background: radial-gradient(circle at 34% 28%, var(--c-seal-hi), var(--c-seal-fill) 58%, rgba(58, 28, 130, 1));
  box-shadow: 0 0 0 2px rgba(20, 18, 30, 1), 0 0 0 3px rgba(167, 139, 250, .6), 0 0 14px rgba(139, 92, 246, .8);
}
html.ds .ds-tn-seal > b { display: block; width: 2px; height: 10px; border-radius: var(--r-pill); background: rgba(245, 244, 247, .9); }
html.ds .ds-tn-card.is-friday:active .ds-tn-fc.is-l { translate: -32px 6px; rotate: -18deg; }
html.ds .ds-tn-card.is-friday:active .ds-tn-fc.is-r { translate: 32px 6px; rotate: 18deg; }
/* the reel */
html.ds .ds-tn-reelsvg { position: absolute; left: 50%; top: 50%; width: 132px; height: 76px; translate: -50% -50%; overflow: visible; }
html.ds .ds-tn-reelsvg .s-hi { stop-color: rgba(150, 150, 162, 1); }
html.ds .ds-tn-reelsvg .s-mid { stop-color: rgba(70, 70, 80, 1); }
html.ds .ds-tn-reelsvg .s-lo { stop-color: rgba(28, 28, 34, 1); }
html.ds .ds-tn-disc { fill: url(#ds-tn-metal); stroke: rgba(255, 255, 255, .22); stroke-width: .8; }
html.ds .ds-tn-rimline { fill: none; stroke: rgba(0, 0, 0, .45); stroke-width: 1; }
html.ds .ds-tn-hole { fill: var(--c-stage); stroke: rgba(255, 255, 255, .14); stroke-width: .8; }
html.ds .ds-tn-hub { fill: rgba(110, 110, 122, 1); stroke: rgba(0, 0, 0, .5); stroke-width: .8; }
html.ds .ds-tn-axle { fill: var(--c-stage); }
html.ds .ds-tn-leader { fill: rgba(30, 30, 36, 1); stroke: rgba(255, 255, 255, .16); stroke-width: .6; }
html.ds .ds-tn-sprockets { fill: rgba(255, 255, 255, .28); }
html.ds .ds-tn-q rect { fill: rgba(104, 201, 255, .14); stroke: var(--c-beam); stroke-width: 1.4; filter: drop-shadow(0 0 4px rgba(104, 201, 255, .9)); }
html.ds .ds-tn-q text { fill: var(--c-beam); font: 700 var(--fs-footnote) var(--font-ui); }
html.ds .ds-tn-reel-spin { transform-box: fill-box; transform-origin: center; transition: rotate var(--motion-slow) var(--motion-spring); }
html.ds .ds-tn-card.is-cryptic:active .ds-tn-reel-spin { rotate: -40deg; }
/* footer */
html.ds .ds-tn-line { font-size: var(--fs-caption-1); line-height: var(--lh-caption-1); letter-spacing: var(--tr-caption-1); font-variant-numeric: tabular-nums; color: var(--c-label-2); text-wrap: balance; min-width: 0; margin-bottom: -2px; }
html.ds .ds-tn-line .ds-tn-part { display: block; }
html.ds .ds-tn-line .ds-tn-sep { display: none; }
/* action button: visual only (the card is the tap target). Lamp-white for the Cryptic, Seal violet for Friday, dimmed while sealed. */
html.ds .ds-tn-cta {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 38px; flex: 0 0 auto; border-radius: var(--r-pill);
  font: 700 var(--fs-eyebrow)/1 var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; white-space: nowrap;
  transition: scale var(--motion-fast) var(--motion-spring);
}
html.ds .ds-tn-cta-label { font: inherit; letter-spacing: inherit; }
html.ds .ds-tn-cta-ico { display: inline-flex; flex: 0 0 auto; }
html.ds .ds-tn-cta-ico:empty { display: none; }
html.ds .ds-tn-cta-ico svg { display: block; width: 13px; height: 13px; fill: currentColor; stroke: none; }
html.ds .ds-tn-cta-ico svg:has(rect) { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
html.ds .ds-tn-card.is-cryptic .ds-tn-cta {
  color: var(--c-lamp-ink); background: linear-gradient(180deg, rgba(255, 255, 255, .92), var(--c-lamp));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 16px rgba(0, 0, 0, .38), 2px 5px 18px rgba(104, 201, 255, .16);
}
html.ds .ds-tn-card.is-friday .ds-tn-cta[data-state="open"] {
  color: var(--c-label-1); background: linear-gradient(180deg, var(--c-seal), var(--c-seal-fill));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 18px rgba(124, 77, 235, .45), 3px 7px 22px rgba(139, 92, 246, .3);
}
html.ds .ds-tn-card.is-friday .ds-tn-cta[data-state="sealed"] {
  color: var(--c-label-2); background: rgba(139, 92, 246, .08);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .32);
}
html.ds .ds-tn-card:active .ds-tn-cta { scale: .97; }
html.ds .ds-tn-card:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
/* arrival: the fan opens and the reel settles, once per visit */
@keyframes ds-tn-fan-l { from { translate: 0 0; rotate: 0deg; opacity: 0; } }
@keyframes ds-tn-fan-r { from { translate: 0 0; rotate: 0deg; opacity: 0; } }
@keyframes ds-tn-reel-in { from { rotate: 70deg; } }
html.ds .ds-tn-card.is-friday .ds-tn-fc.is-l { animation: ds-tn-fan-l var(--motion-slow) var(--motion-spring) 120ms both; }
html.ds .ds-tn-card.is-friday .ds-tn-fc.is-r { animation: ds-tn-fan-r var(--motion-slow) var(--motion-spring) 160ms both; }
html.ds .ds-tn-reel-spin { animation: ds-tn-reel-in var(--motion-slow) var(--motion-spring) 140ms both; }
html.ds #device.manual-reduced-motion .ds-tn-card.is-friday .ds-tn-fc.is-l, html.ds #device.manual-reduced-motion .ds-tn-card.is-friday .ds-tn-fc.is-r, html.ds #device.manual-reduced-motion .ds-tn-card .ds-tn-reel-spin { animation: none; transition: none; }

/* ============================================================================ Nothing sealed here */
html.ds .ds-nothing {
  position: absolute; z-index: 70; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 72px 28px max(40px, env(safe-area-inset-bottom)); text-align: center; background: radial-gradient(90% 40% at 50% 0%, var(--ds-wash), transparent 74%), var(--c-stage);
  animation: ds-fade-in var(--motion-normal) var(--motion-curve) both;
}
html.ds .ds-nothing .ds-nothing-back { position: absolute !important; top: max(18px, env(safe-area-inset-top)); left: 18px; margin: 0 !important; }
html.ds .ds-nothing-art { display: flex; align-items: flex-end; justify-content: center; gap: 0; width: 100%; height: 190px; margin-bottom: 14px; }
html.ds .ds-nothing-art .ds-reel { width: 100%; max-width: 340px; align-self: center; }
html.ds .ds-nothing-card {
  position: relative; display: flex; align-items: flex-end; justify-content: center; width: 88px; height: 140px; padding-bottom: 12px; margin: 0; border-radius: var(--r-row);
  box-shadow: inset 0 0 0 1.5px var(--c-line-strong); background: color-mix(in srgb, var(--c-label-1) 3%, transparent); overflow: hidden;
}
html.ds .ds-nothing-card::before, html.ds .ds-nothing-card::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12px; background: var(--c-label-4);
  -webkit-mask: var(--ds-holes-v) 1px 0 / 10px 15px repeat-y; mask: var(--ds-holes-v) 1px 0 / 10px 15px repeat-y;
}
html.ds .ds-nothing-card::before { left: 0; }
html.ds .ds-nothing-card::after { right: 0; }
html.ds .ds-nothing-card b { font: var(--fw-caption-1) var(--fs-caption-1)/1 var(--font-ui); letter-spacing: var(--tr-caption-1); font-variant-numeric: tabular-nums; color: var(--c-label-3); }
html.ds .ds-nothing-art { gap: 10px; }
html.ds .ds-nothing-card.rank-1 { order: 2; z-index: 2; width: 104px; height: 160px; }
html.ds .ds-nothing-card.rank-2 { order: 1; }
html.ds .ds-nothing-card.rank-3 { order: 3; }
html.ds .ds-nothing-card.rank-2 { transform: rotate(-4deg) translateY(8px); }
html.ds .ds-nothing-card.rank-3 { transform: rotate(4deg) translateY(8px); }
html.ds .ds-nothing-title { margin: 4px 0 0; max-width: 320px; font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); color: var(--c-label-1); }
html.ds .ds-nothing-copy { margin: 0 0 14px; max-width: 300px; font: var(--fw-body) calc(15 * var(--type-unit))/calc(21 * var(--type-unit)) var(--font-ui); color: var(--c-label-2); }
html.ds .ds-nothing-cta { min-width: 220px; }

/* ============================================================================ keyframes */
@keyframes ds-stub-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ds-clue-out { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ds-line-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ds-frame-light { from { opacity: .35; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ds-frame-dim { 0% { opacity: 1; } 35% { opacity: .3; } 100% { opacity: 1; } }
@keyframes ds-pip-grow { from { opacity: .4; transform: scaleX(.4); } to { opacity: 1; transform: none; } }
@keyframes ds-frame-gain { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes ds-weave { 0% { transform: translateX(0); } 17% { transform: translateX(-5px); } 33% { transform: translateX(5px); } 50% { transform: translateX(-5px); } 67% { transform: translateX(5px); } 83% { transform: translateX(-5px); } 100% { transform: translateX(0); } }
@keyframes ds-lp-in { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes ds-ink { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
@keyframes ds-rise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ds-develop-silver { 0%, 40% { opacity: 1; animation-timing-function: var(--motion-spring); } 100% { opacity: 0; } }
@keyframes ds-develop-milk { 0%, 16% { opacity: .94; } 100% { opacity: 0; } }
@keyframes ds-score-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ds-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-collapse { from { opacity: 1; transform: translateX(-50%) scaleX(1); } to { opacity: .6; transform: translateX(-50%) scaleX(.2); } }
@keyframes ds-glow-breathe { 0%, 100% { opacity: .38; } 50% { opacity: .78; } }
@keyframes ds-seal-develop { from { opacity: 1; } to { opacity: 0; } }
@keyframes ds-how-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ds-how-down { from { transform: none; } to { transform: translateY(100%); } }
@keyframes ds-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ds-breathe { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes ds-rl-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ds-rl-count { 0% { transform: translateY(0); } 33.333% { transform: translateY(-33.333%); } 66.666% { transform: translateY(-66.666%); } 100% { transform: translateY(-66.666%); } }
@keyframes ds-rt-fade { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================================ reduced motion: 180ms, opacity only */
@media (prefers-reduced-motion: reduce) {
  html.ds .ds-stub, html.ds .ds-cr-play .cryptic-focus-current.ds-out, html.ds .ds-cr-play .ds-lined .ds-w, html.ds .ds-pressing .ds-lp,
  html.ds .ds-solve .ds-develop, html.ds .ds-solve .cryptic-result-stats, html.ds .ds-solve .ds-timecode, html.ds .ds-fr.is-gaining, html.ds .ds-nothing,
  html.ds .ds-solve .cryptic-answer-card small, html.ds .ds-solve .cryptic-answer-card > div:not(.ds-develop) > p { animation: ds-rt-fade var(--motion-fast) linear both; animation-delay: 0ms; }
  html.ds .ds-seal-card, html.ds .ds-how-panel, html.ds .ds-how-scrim, html.ds .ds-how.is-leaving .ds-how-panel, html.ds .ds-how.is-leaving .ds-how-scrim { animation: ds-rt-fade var(--motion-fast) linear both; animation-delay: 0ms; }
  html.ds .ds-seal-glow { animation: none; opacity: .5; }
  html.ds .ds-seal-develop { animation: none; opacity: 0; }
  html.ds .ds-solve .ds-develop-silver { animation: none; opacity: 0; }
  html.ds .ds-solve .ds-develop-safe, html.ds .ds-pressing .ds-lp::after, html.ds .ds-solve .cryptic-answer-card > div:not(.ds-develop)::before { animation: none; opacity: 0; }
  html.ds .ds-cr-play .cryptic-focus-pip.ds-lit, html.ds .ds-cr-play .cryptic-focus-pip.ds-dim, html.ds .ds-cr-play.is-found .cryptic-focus-pip, html.ds .ds-cr-play .cryptic-focus-row.ds-weave { animation: ds-rt-fade var(--motion-fast) linear both; }
  html.ds .ds-cr-play .cryptic-focus-current { transition: none; }
  html.ds .ds-rl-sweep, html.ds .ds-rl-col, html.ds .ds-reel[data-state="open"] .ds-can { animation: none; }
  html.ds .ds-flip-new, html.ds .ds-flip::before, html.ds .ds-flip::after { animation: none; }
  html.ds .ds-flip::before, html.ds .ds-flip::after { display: none; }
  html.ds .ds-rl-col { transform: translateY(-66.666%); }
  html.ds .ds-odo-strip { transition: none !important; }
  html.ds .ds-tn-card.is-friday .ds-tn-fc.is-l, html.ds .ds-tn-card.is-friday .ds-tn-fc.is-r, html.ds .ds-tn-card .ds-tn-reel-spin { animation: none; transition: none; }
}
html.ds .device.manual-reduced-motion .ds-stub, html.ds .reduce-motion .ds-stub,
html.ds .device.manual-reduced-motion .cryptic-focus-current.ds-out, html.ds .reduce-motion .cryptic-focus-current.ds-out,
html.ds .device.manual-reduced-motion .ds-lined .ds-w, html.ds .reduce-motion .ds-lined .ds-w,
html.ds .device.manual-reduced-motion .ds-pressing .ds-lp, html.ds .reduce-motion .ds-pressing .ds-lp,
html.ds .device.manual-reduced-motion .ds-solve .ds-develop, html.ds .reduce-motion .ds-solve .ds-develop,
html.ds .device.manual-reduced-motion .ds-solve .cryptic-result-stats, html.ds .reduce-motion .ds-solve .cryptic-result-stats,
html.ds .device.manual-reduced-motion .ds-solve .ds-timecode, html.ds .reduce-motion .ds-solve .ds-timecode,
html.ds .device.manual-reduced-motion .ds-fr.is-gaining, html.ds .reduce-motion .ds-fr.is-gaining,
html.ds .device.manual-reduced-motion .ds-nothing, html.ds .reduce-motion .ds-nothing { animation: ds-rt-fade var(--motion-fast) linear both; animation-delay: 0ms; }
html.ds .device.manual-reduced-motion .ds-seal-card, html.ds .reduce-motion .ds-seal-card,
html.ds .device.manual-reduced-motion .ds-how-panel, html.ds .reduce-motion .ds-how-panel,
html.ds .device.manual-reduced-motion .ds-how-scrim, html.ds .reduce-motion .ds-how-scrim { animation: ds-rt-fade var(--motion-fast) linear both; animation-delay: 0ms; }
html.ds .device.manual-reduced-motion .ds-seal-glow, html.ds .reduce-motion .ds-seal-glow { animation: none; opacity: .5; }
html.ds .device.manual-reduced-motion .ds-seal-develop, html.ds .reduce-motion .ds-seal-develop { animation: none; opacity: 0; }
html.ds .device.manual-reduced-motion .ds-solve .ds-develop-silver, html.ds .reduce-motion .ds-solve .ds-develop-silver,
html.ds .device.manual-reduced-motion .ds-solve .ds-develop-safe, html.ds .reduce-motion .ds-solve .ds-develop-safe,
html.ds .device.manual-reduced-motion .ds-pressing .ds-lp::after, html.ds .reduce-motion .ds-pressing .ds-lp::after,
html.ds .device.manual-reduced-motion .ds-rl-sweep, html.ds .reduce-motion .ds-rl-sweep,
html.ds .device.manual-reduced-motion .ds-rl-col, html.ds .reduce-motion .ds-rl-col,
html.ds .device.manual-reduced-motion .ds-reel[data-state="open"] .ds-can, html.ds .reduce-motion .ds-reel[data-state="open"] .ds-can { animation: none; }
html.ds .device.manual-reduced-motion .ds-rl-col, html.ds .reduce-motion .ds-rl-col { transform: translateY(-66.666%); }
html.ds .device.manual-reduced-motion .ds-cr-play .cryptic-focus-pip.ds-lit, html.ds .reduce-motion .ds-cr-play .cryptic-focus-pip.ds-lit,
html.ds .device.manual-reduced-motion .ds-cr-play .cryptic-focus-pip.ds-dim, html.ds .reduce-motion .ds-cr-play .cryptic-focus-pip.ds-dim,
html.ds .device.manual-reduced-motion .ds-cr-play.is-found .cryptic-focus-pip, html.ds .reduce-motion .ds-cr-play.is-found .cryptic-focus-pip,
html.ds .device.manual-reduced-motion .ds-cr-play .cryptic-focus-row.ds-weave, html.ds .reduce-motion .ds-cr-play .cryptic-focus-row.ds-weave { animation: ds-rt-fade var(--motion-fast) linear both; }
html.ds .device.manual-reduced-motion .ds-odo-strip, html.ds .reduce-motion .ds-odo-strip { transition: none !important; }
html.ds .device.manual-reduced-motion .ds-flip-new, html.ds .reduce-motion .ds-flip-new { animation: none; }
html.ds .device.manual-reduced-motion .ds-flip::before, html.ds .device.manual-reduced-motion .ds-flip::after, html.ds .reduce-motion .ds-flip::before, html.ds .reduce-motion .ds-flip::after { display: none; }

/* ============================================================================ reduced transparency: solid, no washes */
@media (prefers-reduced-transparency: reduce) {
  html.ds .premium-cryptic, html.ds .ds-nothing { background: var(--c-stage); }
  html.ds .ds-stub, html.ds .ds-tn-card.is-friday, html.ds .ds-seal-card:not(.has-poster) { background: var(--c-stage-raised); }
  html.ds .ds-seal-glow { display: none; }
}
html.ds .device.manual-solid .premium-cryptic, html.ds .device.manual-solid .ds-nothing { background: var(--c-stage); }
html.ds .device.manual-solid .ds-stub, html.ds .device.manual-solid .ds-tn-card.is-friday { background: var(--c-stage-raised); }
html.ds .device.manual-solid .ds-seal-card:not(.has-poster) { background: var(--c-stage-raised); }
html.ds .device.manual-solid .ds-seal-glow, html.ds .device.manual-solid .ds-develop-safe { display: none; }

/* material response on the ritual buttons stays compositor-only (the global rule also transitions box-shadow) */
html.ds .ds-cr-play .cryptic-focus-hint, html.ds .ds-cr-result .cryptic-rank-card { transition-property: transform, opacity; }

/* the film leader replaces the spinner: its ring must not keep spinning behind it */
html.ds .cryptic-product-state[data-state="loading"] .cryptic-state-symbol.ds-rl-host::after { animation: none; border-color: transparent; }

/* the global .screen::before ambient layer is 530px wide at -70px, which makes Cryptic pages report 70px of sideways overflow
   under Larger Text; keep its drift (the one ambient on these screens) but pin it to the screen width */
html.ds #device .premium-cryptic::before { inset: -6% 0; }

/* ============================================================================ Cryptic title and header (lane B, 1 Oct)
   One calm title system for every Cryptic screen. Before: the home h1 was meant to be a quiet eyebrow but
   `#device .premium-cryptic-home .cryptic-intro-copy>h1{font-size:31.5px!important}` (max-height 720px) made it a
   two-line 31px headline with a 16px line box that overprinted itself and the wordmark; in the game the title
   was hidden and the score column pushed the lockup off centre.
   !important here beats that earlier !important (font-size / margin of the home h1).
   Large text: everything wraps or stacks, nothing is absolutely placed. */
html.ds { --tr-cr-title: .16em; }
html.ds #device .premium-cryptic-header { grid-template-columns: minmax(48px, 1fr) auto minmax(48px, 1fr); column-gap: 8px; }
html.ds #device .premium-cryptic-header > :first-child { justify-self: start; }
html.ds #device .premium-cryptic-header > :last-child { justify-self: end; }
html.ds #device .premium-cryptic-header .critical-brand-lockup { max-width: 100%; }

/* home: the Daily Cryptic as a hairline-flanked eyebrow above the sealed card */
html.ds #device .premium-cryptic-home.ds-cr-home .cryptic-intro-copy > h1 {
  display: flex; flex: 0 0 auto; align-items: center; gap: 14px; align-self: stretch; margin: 10px 0 14px !important; padding: 0;
  font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui) !important; letter-spacing: var(--tr-cr-title); text-align: center;
  text-transform: uppercase; color: var(--c-seal-hi); text-wrap: balance;
}
html.ds #device .premium-cryptic-home.ds-cr-home .cryptic-intro-copy > h1::before,
html.ds #device .premium-cryptic-home.ds-cr-home .cryptic-intro-copy > h1::after {
  content: ""; flex: 1 1 12px; min-width: 12px; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-seal-hi) 55%, transparent));
}
html.ds #device .premium-cryptic-home.ds-cr-home .cryptic-intro-copy > h1::after { transform: scaleX(-1); }

html.ds #device .premium-cryptic-play .premium-cryptic-header { grid-template-columns: minmax(48px, 1fr) auto minmax(48px, 1fr); }
/* in the game the header keeps only the mark: the clue is the one headline on this screen */
html.ds #device .premium-cryptic-play .premium-cryptic-header .critical-brand-lockup .wordmark { display: none; }

/* ============================================================================ Discover: "Try asking for" cards (lane B, 1 Oct)
   The poster art sat under three dark layers (the .prompt-shade ramp to solid, a .76-.9 black wash on .prompt-copy
   from interaction-targets.css, and the card's own black ground). Now the art is lifted (saturate + brightness),
   each card carries a hue from the ds-hue family (glow, ring, shadow), and legibility comes from one tight scrim
   that only covers the text block at the foot of the card.
   !important beats the earlier !important background / filter / text-shadow rules on .prompt-shade, .prompt-copy
   and .prompt-card (frontend-completion.css, viewport-corrections.css, interaction-targets.css). */
html.ds #device .discover-inspiration .prompt-card { --pc: 139, 92, 246; }
html.ds #device .discover-inspiration .prompt-card:nth-child(5n + 2) { --pc: 111, 214, 240; }
html.ds #device .discover-inspiration .prompt-card:nth-child(5n + 3) { --pc: 245, 196, 107; }
html.ds #device .discover-inspiration .prompt-card:nth-child(5n + 4) { --pc: 245, 154, 200; }
html.ds #device .discover-inspiration .prompt-card:nth-child(5n + 5) { --pc: 142, 232, 180; }
html.ds #device .discover-inspiration .prompt-card {
  filter: saturate(1.32) brightness(1.14) contrast(1.04) !important;
  box-shadow: var(--e-2) !important;
}
html.ds #device .discover-inspiration .prompt-card::after {
  border-color: rgba(var(--pc), .42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 22px rgba(var(--pc), .12) !important;
}
html.ds #device .discover-inspiration .prompt-card.prompt-film-art .prompt-shade {
  background: radial-gradient(120% 80% at 0% 100%, rgba(var(--pc), .3), transparent 62%), linear-gradient(0deg, rgba(5, 5, 7, .88) 0%, rgba(5, 5, 7, .76) 36%, rgba(5, 5, 7, .44) 58%, transparent 79%) !important;
}
html.ds #device .discover-inspiration .prompt-copy { background: none !important; }
html.ds #device .discover-inspiration .prompt-copy b { color: var(--c-label-1) !important; }
html.ds #device .discover-inspiration .prompt-copy b i { color: rgb(var(--pc)); font-style: normal; }

/* a Dynamic Type-sized title never needs more than centred wrapping */
html.ds #device.manual-large-text .premium-cryptic-home.ds-cr-home .cryptic-intro-copy > h1 { font-size: var(--fs-footnote) !important; line-height: var(--lh-footnote) !important; }

/* [friday-page:start] */
/* ====================================================================================================================
   THE FRIDAY 3 PAGE BELOW ITS MAIN BLOCK (7 October 2026; prototype-src/friday-page.js under friday-experience.js)
   What it draws on · Your Friday notes · Reminder · Your Fridays (a person's own history: a week opens in place, face up).
   The page is worth opening on a Tuesday: the reel above counts down to the person's own Friday 6pm.
   ==================================================================================================================== */
html.ds #device .friday-service-screen .friday-welcome {
  display: grid; gap: var(--sp-3); margin: var(--sp-5) 0 0; padding: var(--sp-4); border-radius: var(--r-card);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-seal) 16%, transparent), color-mix(in srgb, var(--c-seal) 4%, transparent)), var(--c-fill-1);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-seal-hi) 34%, transparent);
}
html.ds #device .friday-service-screen .friday-welcome > strong { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1); }
html.ds #device .friday-service-screen .friday-welcome > p { margin: 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
html.ds #device .friday-service-screen .friday-welcome > button { width: 100%; margin: 0; }
html.ds #device .friday-service-screen .friday-welcome > .friday-recovery { margin: 0; }

html.ds #device .friday-service-screen .fp-sections { display: grid; gap: var(--sp-6); margin: var(--sp-7) 0 var(--sp-5); }
html.ds #device .friday-service-screen .fp-section { display: grid; gap: var(--sp-3); min-width: 0; justify-items: start; }
html.ds #device .friday-service-screen .fp-h { margin: 0; font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-label-3); text-wrap: initial; }
html.ds #device .friday-service-screen .fp-line { margin: 0; font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); color: var(--c-label-1); }
html.ds #device .friday-service-screen .fp-line.fp-quiet { font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
html.ds #device .friday-service-screen .fp-section > .quiet-button { width: auto; min-height: 44px; margin: 0; padding-inline: 0; justify-self: start; text-align: left; }
html.ds #device .friday-service-screen .fp-section > .settings-row { width: 100%; min-height: var(--row-min, 60px); margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-row); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); }
html.ds #device .friday-service-screen .fp-notes-list { display: grid; gap: var(--sp-2); width: 100%; margin: 0; padding: 0; list-style: none; }
html.ds #device .friday-service-screen .fp-notes-list > li {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-row); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line);
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-1); overflow-wrap: anywhere;
}

/* Your Fridays: one row a week (the 100px edition card), which opens in place */
html.ds #device .friday-service-screen .fp-history { justify-items: stretch; }
html.ds #device .friday-service-screen .fp-week { display: grid; gap: 0; min-width: 0; border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); overflow: hidden; }
html.ds #device .friday-service-screen .fp-week.is-open { box-shadow: inset 0 0 0 1px var(--c-line-strong); }
html.ds #device .friday-service-screen .fp-week > .fp-week-row { margin: 0; background: none; box-shadow: none; border-radius: 0; }
html.ds #device .friday-service-screen .fp-week .ds-ed-copy > .ds-chip { margin-top: 2px; }
html.ds #device .friday-service-screen .fp-chev { justify-self: end; transition: transform var(--motion-fast) var(--motion-curve); }
html.ds #device .friday-service-screen .fp-week.is-open .fp-chev { transform: rotate(90deg); }
html.ds #device .friday-service-screen .ds-ed-tile.fp-marked { position: relative; }
html.ds #device .friday-service-screen .fp-mark {
  position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-stage-raised); color: var(--c-label-1); box-shadow: 0 0 0 1.5px var(--c-fill-1), inset 0 0 0 1px var(--c-line-strong);
}
html.ds #device .friday-service-screen .is-loved > .fp-mark { background: var(--c-lamp); color: var(--c-lamp-ink); box-shadow: 0 0 0 1.5px var(--c-fill-1); }
html.ds #device .friday-service-screen .fp-mark > svg { width: 12px; height: 12px; display: block; }
html.ds #device .friday-service-screen .fp-week-body { display: grid; gap: var(--sp-3); padding: 0 var(--sp-3) var(--sp-3); }
html.ds #device .friday-service-screen .fp-week-why {
  display: grid; gap: 4px; margin: 0; padding: var(--sp-3) var(--sp-1) 0; border-top: 1px solid var(--c-line);
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-1);
}
html.ds #device .friday-service-screen .fp-week-why > span { font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); color: var(--c-seal-hi); }
html.ds #device .friday-service-screen .fp-films { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
html.ds #device .friday-service-screen .fp-film {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 16px; align-items: center; gap: var(--sp-3); width: 100%; min-height: 96px; margin: 0; padding: var(--sp-2);
  border: 0; border-radius: var(--r-row); background: var(--c-fill-2); color: var(--c-label-1); text-align: left; cursor: pointer;
}
html.ds #device .friday-service-screen .fp-film[aria-busy="true"] { opacity: .6; }
html.ds #device .friday-service-screen .fp-poster { display: block; width: 56px; height: 84px; border-radius: var(--r-chip); background-color: var(--c-stage-raised); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
html.ds #device .friday-service-screen .fp-poster.has-poster { background: var(--ds-poster) center / cover, var(--c-fill-2); }
html.ds #device .friday-service-screen .fp-film-copy { display: grid; gap: 2px; min-width: 0; justify-items: start; }
html.ds #device .friday-service-screen .fp-film-copy > strong { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1); overflow-wrap: anywhere; }
html.ds #device .friday-service-screen .fp-film-copy > small { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); font-variant-numeric: tabular-nums; }
html.ds #device .friday-service-screen .fp-why { margin-top: 2px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds #device .friday-service-screen .fp-state { margin-top: 4px; }
html.ds #device .friday-service-screen .fp-state.is-loved { background: color-mix(in srgb, var(--c-lamp) 18%, transparent); color: var(--c-lamp); }
html.ds #device .friday-service-screen .fp-state.is-liked, html.ds #device .friday-service-screen .fp-state.is-seen { background: color-mix(in srgb, var(--c-ok) 16%, transparent); color: var(--c-ok); }
html.ds #device .friday-service-screen .fp-state.is-passed, html.ds #device .friday-service-screen .fp-state.is-watchlist { background: var(--c-fill-2); color: var(--c-label-2); box-shadow: inset 0 0 0 1px var(--c-line); }

/* Lane B, 8 October 2026 (the Friday 3 PAGE): "This week, I'm in the mood for…" (friday-experience.js moodMarkup). The
   box is Discover's request box made smaller: an ink-dark writing surface with a hairline rim that turns to the seal's
   violet while typing. Saved, the words stand in a quiet quote with "Change" under them. */
html.ds #device .friday-service-screen .fp-mood { justify-items: stretch; margin: var(--sp-5) 0 0; }
html.ds #device .friday-service-screen .fp-mood > .fp-h, html.ds #device .friday-service-screen .fp-mood > .fp-line { justify-self: start; }
html.ds #device .friday-service-screen .fp-mood-glass {
  position: relative; width: 100%; min-width: 0; border-radius: var(--r-card);
  background: linear-gradient(125deg, var(--c-fill-1), transparent 38%), linear-gradient(155deg, var(--c-fill-2), var(--c-stage-raised) 75%);
  box-shadow: inset 0 0 0 1px var(--c-line-strong), inset 0 -1px 0 var(--c-stage);
}
html.ds #device .friday-service-screen .fp-mood-glass:focus-within { box-shadow: inset 0 0 0 1px var(--c-seal-hi), inset 0 -1px 0 var(--c-stage); }
html.ds #device .friday-service-screen .fp-mood-glass.is-loading { min-height: 76px; opacity: .55; }
html.ds #device .friday-service-screen .fp-mood-glass > textarea {
  display: block; width: 100%; min-height: 76px; max-height: 168px; margin: 0; padding: var(--sp-3) var(--sp-4);
  border: 0; border-radius: var(--r-card); background: none; box-shadow: none; resize: none; field-sizing: content;
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); color: var(--c-label-1); caret-color: var(--c-seal-hi);
}
html.ds #device .friday-service-screen .fp-mood-glass > textarea::placeholder { color: var(--c-label-3); }
html.ds #device .friday-service-screen .fp-mood-glass > textarea:focus-visible { outline: none; }
html.ds #device .friday-service-screen .fp-mood > .fp-mood-save { width: 100%; margin: 0; }
html.ds #device .friday-service-screen .fp-mood > .fp-mood-save[aria-busy="true"] { opacity: .7; }
html.ds #device .friday-service-screen .fp-mood-error { color: var(--c-caution); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); }
html.ds #device .friday-service-screen .fp-mood-saved {
  margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-row); min-width: 0;
  background: color-mix(in srgb, var(--c-seal) 10%, var(--c-fill-1)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-seal-hi) 34%, transparent);
}
html.ds #device .friday-service-screen .fp-mood-saved > p { margin: 0; font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); color: var(--c-label-1); overflow-wrap: anywhere; }
html.ds #device .friday-service-screen .fp-mood > .fp-mood-change { width: auto; min-height: 44px; margin: 0; padding-inline: 0; justify-self: start; }
/* The largest text: the page's one action ("Open your Friday 3", "Open your welcome three", "Save") may take two lines
   rather than be cut by the 50pt capsule. */
html.ds[data-text-size="largest"] #device .friday-service-screen > .primary-button, html.ds[data-text-size="largest"] #device .friday-service-screen  .friday-welcome > .primary-button, html.ds[data-text-size="largest"] #device .friday-service-screen .fp-mood > .primary-button { height: auto !important; min-height: 50px; padding-block: var(--sp-2); white-space: normal; line-height: var(--lh-headline); }
@media (prefers-reduced-motion: reduce) { html.ds #device .friday-service-screen .fp-mood-glass { transition: none; } }
html.ds[data-motion-tier="reduced"] #device .friday-service-screen .fp-mood-glass, html.ds #device.manual-reduced-motion .friday-service-screen .fp-mood-glass { transition: none; }

/* The revealed three: the week's line sits in the capsule above the cards and the per-film lines open beneath it, in
   the three's own request-details panel (ds-film-share.css .ds-request-details .request-reading-body). In the compact
   layout (a small phone, or the largest text) the capsule holds its label and ONE line, so the line is kept to one. */
html.ds #device .trip-critical-layer.critical-compact .critical-request-capsule[data-why] > p { display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Open, the week's line is said ONCE (it used to stand in the capsule, shortened, and again as the first line of the
   panel under it). The capsule and the panel become one card: the panel starts at the capsule's own top; the capsule,
   lifted over it with its surface taken away, keeps only its label and the chevron; its shortened copy of the line
   steps aside, and the panel sets the whole line where that copy stood, in the same type, with the per-film lines
   beneath. So opening reads as the line unfolding to its full length. (friday-page.js marks the line .friday-why-week.) */
html.ds #device .trip-critical-layer.ds-req-open .critical-request-capsule[data-why] { z-index: 41 !important; background: none !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.ds #device .trip-critical-layer.ds-req-open .critical-request-capsule[data-why]::before, html.ds #device .trip-critical-layer.ds-req-open .critical-request-capsule[data-why]::after { opacity: 0 !important; }
html.ds #device .trip-critical-layer.ds-req-open .critical-request-capsule[data-why] > p { visibility: hidden !important; }
html.ds #device .trip-critical-layer.ds-req-open .critical-request-capsule[data-why] + .ds-request-details {
  top: var(--critical-request-settled-y, 91px); max-height: calc(100% - var(--critical-request-settled-y, 91px) - 160px);
  padding-top: 6px !important;
}
/* the compact capsule is 3pt wider each side and sets its words 16pt in: the card and the line match it */
html.ds #device .trip-critical-layer.critical-compact.ds-req-open .critical-request-capsule[data-why] + .ds-request-details { left: 17px; right: 17px; padding: 2px 15px 14px !important; }
/* the line keeps clear of the chevron, as the capsule's copy did, and keeps the capsule's colour */
html.ds #device .ds-request-details .friday-why-reading .friday-why-week { padding-right: 36px; color: var(--c-label-1); }
@media (prefers-reduced-motion: reduce) { html.ds #device .friday-service-screen .fp-chev { transition: none; } }
html.ds[data-motion-tier="reduced"] #device .friday-service-screen .fp-chev, html.ds #device.manual-reduced-motion .friday-service-screen .fp-chev { transition: none; }
/* [friday-page:end] */

/* [friday-display] THE DISPLAY (owner, 9 October 2026; friday-page.js tripFridayDisplayHTML): their three on Friday 3's own
   purple, the electric card's colours (ds-today.css .dt-fri-hero), as a triptych: the centre poster forward, the two
   either side turned a little towards it, as the reveal leaves them. One living thing: a light running round the stage's
   rim (transform only), still under Reduce Motion and the reduced tier. Posters open their film pages. */
html.ds #device .f3-page { padding-bottom: calc(var(--sp-7) + env(safe-area-inset-bottom, 0px)); }
html.ds #device .f3-page > header .f3-info-control { display: grid; place-items: center; color: var(--c-label-1); }
html.ds #device .f3-page > header .f3-info-control > svg { width: 22px; height: 22px; }
html.ds #device .f3-stage { position: relative; isolation: isolate; margin: var(--sp-3) 0 0; padding: 2px; border-radius: var(--r-sheet); overflow: hidden;
  /* (JOIN, 10 October 2026: lane LOOK's halo rule, scripts/lib/glow-audit.mjs: the stage's light falls below it, never a
     glow all round a rectangle, which WebKit can draw as a square box) */
  box-shadow: 0 18px 44px rgb(84 40 200 / .45), 0 26px 48px -18px rgb(167 139 250 / .3); }
html.ds #device .f3-rim { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: var(--r-sheet); background: rgb(196 170 255 / .5); }
html.ds #device .f3-rim-spin { position: absolute; left: 50%; top: 50%; width: 190%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0deg, rgb(255 255 255 / 0) 0deg, rgb(255 255 255 / 0) 120deg, rgb(214 196 255 / .55) 150deg, rgb(255 255 255 / 0) 176deg, rgb(255 255 255 / 0) 250deg, rgb(214 196 255 / .9) 322deg, rgb(255 255 255) 352deg, rgb(255 255 255 / 0) 360deg);
  animation: f3-rim-turn 7s linear infinite; }
html.ds #device .f3-face { --fri-face-r: calc(var(--r-sheet) - 2px); position: absolute; inset: 2px; z-index: 0; border-radius: var(--fri-face-r);
  background:
    radial-gradient(70% 46% at 50% 38%, rgb(205 184 255 / .42), rgb(205 184 255 / 0) 72%),
    radial-gradient(80% 60% at 0% 0%, rgb(255 255 255 / .12), rgb(255 255 255 / 0) 62%),
    linear-gradient(170deg, rgb(118 72 232), rgb(98 54 214) 50%, rgb(70 34 170)); }
html.ds #device .f3-stage-body { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--sp-3); padding: 22px 16px 22px; text-align: center; color: rgb(255 255 255); }
html.ds #device .f3-kicker { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); color: rgb(236 228 255); }
html.ds #device .f3-now { padding: 2px 9px; border-radius: var(--r-pill); font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: 0; color: rgb(255 255 255); background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); white-space: nowrap; }
html.ds #device .f3-title { margin: 0; max-width: 22ch; font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2); color: rgb(255 255 255); text-wrap: balance; }
/* the triptych */
html.ds #device .f3-trip { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, .8fr); align-items: center; gap: 8px; width: 100%; max-width: 420px; margin: var(--sp-2) 0 0; padding: 0; list-style: none; perspective: 900px; }
html.ds #device .f3-slot { min-width: 0; }
html.ds #device .f3-slot.is-l { transform: translateY(10px) rotateY(16deg); transform-origin: right center; }
html.ds #device .f3-slot.is-r { transform: translateY(10px) rotateY(-16deg); transform-origin: left center; }
html.ds #device .f3-slot.is-c { z-index: 1; }
html.ds #device .f3-poster { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; margin: 0; padding: 0; border: 0; border-radius: 10px; overflow: hidden;
  background: linear-gradient(160deg, rgb(76 44 160), rgb(32 20 76)); box-shadow: 0 0 0 1px rgb(236 228 255 / .5), 0 12px 26px rgb(18 6 56 / .6); color: rgb(255 255 255); }   /* (JOIN: a shadow, dark enough never to read as a cut light) */
html.ds #device .f3-slot.is-c .f3-poster { box-shadow: 0 0 0 1.5px rgb(255 255 255 / .8), 0 16px 34px rgb(18 6 56 / .65); }   /* (JOIN: no light glow cut by the stage's edge) */
html.ds #device .f3-poster > img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.ds #device .f3-poster.is-type { display: grid; place-items: end start; padding: 10px; }
html.ds #device .f3-poster-title { font: var(--fw-subhead-strong) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); text-align: left; overflow-wrap: anywhere; }
html.ds #device .f3-poster.is-sealed { display: grid; place-items: center; }
html.ds #device .f3-slot.is-c .f3-poster.is-sealed { background: linear-gradient(160deg, rgb(96 60 196), rgb(40 24 92)); }
html.ds #device .f3-seal { display: flex; align-items: center; justify-content: center; gap: 3px; width: 34px; height: 34px; border-radius: 50%; background: var(--c-seal-fill); box-shadow: 0 0 0 1px rgb(255 255 255 / .45), 0 0 16px rgb(214 196 255 / .8); }
html.ds #device .f3-seal > b { display: block; width: 2.5px; height: 13px; border-radius: 999px; background: rgb(255 255 255); }
html.ds #device .f3-mark { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: rgb(255 255 255); background: rgb(30 14 80 / .82); box-shadow: 0 0 0 1px rgb(255 255 255 / .5); }
html.ds #device .f3-mark.is-loved { color: var(--c-lamp-ink); background: var(--c-lamp); }
html.ds #device .f3-mark > svg { width: 13px; height: 13px; display: block; }
html.ds #device .f3-line { margin: 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: rgb(236 228 255); }
html.ds #device .f3-why { display: grid; gap: 4px; max-width: 34ch; margin: var(--sp-2) 0 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: rgb(244 240 255); text-wrap: pretty; }
html.ds #device .f3-why > span { font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); color: rgb(222 208 255); }
/* the key: Today's electric key, the same white pill */
html.ds #device .f3-key { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin: var(--sp-2) 0 0; padding: 0 18px 0 22px; border: 0; border-radius: var(--r-pill);
  color: rgb(76 36 190); background: rgb(255 255 255); font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline);
  box-shadow: inset 0 2px 0 rgb(214 196 255 / .7), 0 4px 0 rgb(60 26 150 / .55); }
html.ds #device .f3-key > b { font-weight: inherit; }
html.ds #device .f3-key > svg, html.ds #device .f3-chev > svg { width: 16px; height: 16px; display: block; }
/* the three in words, under the stage */
html.ds #device .f3-films { display: grid; gap: 0; margin: var(--sp-5) 0 0; padding: 0; list-style: none; border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); overflow: hidden; }
html.ds #device .f3-films > li + li { box-shadow: inset 0 1px 0 var(--c-line); }
html.ds #device .f3-film { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; width: 100%; min-height: 60px; margin: 0; padding: 14px 14px 14px 16px; border: 0; border-radius: 0; background: none; text-align: left; color: var(--c-label-1); }
html.ds #device .f3-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: var(--fw-subhead-strong) var(--fs-footnote)/1 var(--font-ui); color: rgb(255 255 255); background: var(--c-seal-fill); }
html.ds #device .f3-film-copy { display: grid; gap: 3px; min-width: 0; justify-items: start; }
html.ds #device .f3-film-copy > strong { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); overflow-wrap: anywhere; }
html.ds #device .f3-film-copy > small { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds #device .f3-film-why { font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
html.ds #device .f3-film-copy > .ds-chip { margin-top: 4px; }
html.ds #device .f3-chev { align-self: center; color: var(--c-label-3); }
html.ds #device .f3-next { margin: var(--sp-5) 0 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); text-align: center; }
@keyframes f3-rim-turn { to { transform: rotate(1turn); } }
/* the light round the stage rests off screen and in the background (motion-living.js, .mo-living) */
html.ds #device .f3-stage.mo-off .f3-rim-spin { animation-play-state: paused; }
/* the largest text: the key may wrap; the triptych keeps its shape */
html.ds[data-text-size="largest"] #device .f3-key { text-align: left; padding-block: 10px; }
@media (prefers-reduced-motion: reduce) { html.ds #device .f3-rim-spin { animation: none; display: none; } html.ds #device .f3-rim { background: rgb(222 208 255 / .9); } }
html.ds[data-motion-tier="reduced"] #device .f3-rim-spin, html.ds #device.manual-reduced-motion .f3-rim-spin { animation: none; display: none; }
html.ds[data-motion-tier="reduced"] #device .f3-rim, html.ds #device.manual-reduced-motion .f3-rim { background: rgb(222 208 255 / .9); }
/* [friday-display:end] */

/* ===== prototype-src/friday-depth.css ===== */
/* TRIPTIC Friday 3's three, in depth (4 November 2026): the display's triptych (.f3-trip, ds-rituals.css [friday-display])
   given the Collection fan's depth. Script: friday-depth.js (a use of living-depth.js: --ld-x / --ld-y / --ld-sheen / --ld-r,
   -1..1, on the triptych, only while it is on screen and may move: .ld-live). The posters keep their places, sizes and
   their slots' own turn exactly; everything here is a `rotate` / `translate` (the individual properties: the slots' own
   `transform` and the poster's press lift, `scale`, stay theirs) or an opacity. The artwork is never recoloured, blurred or
   scaled: a gloss and a moving sheen lie over it, a shadow under it.
   Depth by layer, back to front: the shadow on the stage (moves against the tilt), the poster (turns, and parts by depth:
   the centre poster most, and nearer as it tilts), the sheen (the light, which stays where it is as the posters turn), the
   gloss on the poster's edge. html.ld-static (Reduce Motion, Low Power): no variables are written; the layers stand at rest, the posters exactly as they
   were (an identity transform: the artwork drawn 1:1, as crisp as before). */

html.ds #device .f3-trip.ld-on { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.ds #device .f3-trip.ld-on > .f3-slot { position: relative; perspective: 720px; }

/* the poster: its static drop shadow gives way to the moving one below (the ring and a contact shadow stay) */
html.ds #device .f3-trip.ld-on .f3-poster {
  box-shadow: 0 0 0 1px rgb(236 228 255 / .5), 0 2px 5px rgb(18 6 56 / .55);
  translate: calc(var(--ld-x, 0) * 2.4px) calc(var(--ld-y, 0) * 1.8px) 0;
  backface-visibility: hidden;
}
html.ds #device .f3-trip.ld-on > .f3-slot.is-c .f3-poster {
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / .8), 0 3px 7px rgb(18 6 56 / .6);
  /* the centre poster stands nearer (depth only: its place in the row is its own) and moves most. Its nearness grows with the
     tilt (--ld-r); at rest it is exactly where and as it was: a constant z under the slot's perspective would only magnify the
     picture (720 / 711, about 1.3 %) and soften it */
  translate: calc(var(--ld-x, 0) * 4.5px) calc(var(--ld-y, 0) * 3.5px) calc(var(--ld-r, 0) * 9px);
}
/* the turn: every poster about its own centre, by the tilt (never a zero axis) */
html.ds #device .f3-trip.ld-live .f3-poster { rotate: calc(var(--ld-y, 0) * -1) calc(var(--ld-x, 0) + .0001) 0 calc(var(--ld-r, 0) * 9deg); will-change: transform; }
html.ds #device .f3-trip.ld-live > .f3-slot.is-c .f3-poster { rotate: calc(var(--ld-y, 0) * -1) calc(var(--ld-x, 0) + .0001) 0 calc(var(--ld-r, 0) * 10deg); }

/* the shadow: on the stage under each poster, soft and long, sliding against the tilt (the light is above and in front). A soft
   pool of shade (a gradient, not a box-shadow: a box-shadow is cut out under its own box, which shows as the tilt moves it) */
html.ds #device .f3-trip.ld-on .f3d-shade {
  position: absolute; left: -12%; right: -12%; top: 22%; bottom: -16%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(14 4 48 / .72), rgb(14 4 48 / .46) 52%, rgb(14 4 48 / 0));
  translate: calc(var(--ld-x, 0) * -6px) calc(var(--ld-y, 0) * -4px + 2px);
  opacity: calc(.85 + var(--ld-r, 0) * .15);
}
html.ds #device .f3-trip.ld-on > .f3-slot.is-c .f3d-shade {
  top: 24%; bottom: -20%;
  background: radial-gradient(closest-side, rgb(14 4 48 / .86), rgb(14 4 48 / .56) 52%, rgb(14 4 48 / 0));
  translate: calc(var(--ld-x, 0) * -9px) calc(var(--ld-y, 0) * -6px + 4px);
}
html.ds #device .f3-trip.ld-live .f3d-shade { will-change: transform; }

/* the sheen: a band of light across the poster's gloss. The light stays put as the posters turn, so it crosses the three as
   one sheet (--f3d-i: the slot, -1 0 1). A 2D move inside the poster, cut by its own rounded corners. */
html.ds #device .f3-trip.ld-on .f3d-sheen {
  position: absolute; left: -70%; top: -20%; width: 240%; height: 140%; pointer-events: none;
  background: linear-gradient(112deg, transparent 34%, rgb(255 255 255 / .05) 41%, rgb(255 255 255 / .34) 47%, rgb(255 246 230 / .1) 52%, transparent 60%);
  translate: calc(var(--ld-sheen, 0) * -24% + var(--f3d-i, 0) * -8% - 3%) calc(var(--ld-y, 0) * -8%);
  opacity: calc(.6 + var(--ld-r, 0) * .4);
}
html.ds #device .f3-trip.ld-live .f3d-sheen { will-change: transform, opacity; }
/* the gloss: the poster's edge catching the light, a little brighter where the light falls */
html.ds #device .f3-trip.ld-on .f3d-gloss {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0) 72%, rgb(222 200 255 / .1));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .42), inset 0 0 0 1px rgb(255 255 255 / .08);
  opacity: calc(.78 + var(--ld-sheen, 0) * .22);
}
/* a phone that cannot keep up: no sheen */
html.ds #device .f3-trip.ld-lite .f3d-sheen { display: none; }
/* the mark (seen, loved) stays above the light */
html.ds #device .f3-trip.ld-on .f3-mark { z-index: 1; }
@media (forced-colors: active) { html.ds #device .f3-trip .f3d-sheen, html.ds #device .f3-trip .f3d-gloss { display: none; } }

/* ===== prototype-src/ds-cryptic-game.css ===== */
/* TRIPTIC ds-cryptic-game layer: the bright game room for the Daily Cryptic (owner, 2 Oct 2026).
   Runtime pair: ds-cryptic-game.js. Markup: cryptic-premium.js (.cg-room screens). Palette: the --cg-* feature tokens in
   design-system.css, scoped to .cg-room / .cg-scope. Decision: hub/docs/DECISIONS.md (2026-10-02).

   One room, three screens: the landing (.cg-landing: marquee, stage, the world card, the run, Play), play (.cg-play:
   clue tokens, points and the live speed bonus, Spool and his speech bubble, the clue tickets, a chunky field and
   buttons) and the result (.cg-result: the film sharp, points and world rank, the week and the film card's arch).
   Everything is original artwork: Spool (TRIPTIC's own film can as a character) and generic cinema stickers. No film
   character, film or studio logo, or recognisable silhouette is drawn here.

   Rules kept: every selector under html.ds; colours only from tokens (white / black alphas for light and shade); the SF
   ramp (11-34px) and weights 400-700; token tracking; radii 10/14/20/28/pill. Motion is transform / opacity only, pauses
   when the page is hidden (html.cg-paused) and is dropped under Reduce Motion (the room stays bright and complete).

   !important: the room's own background, colour and box (earlier layers paint every .screen near-black with !important);
   the keyboard band itself is seated by device-fit.css. */

/* ------------------------------------------------------------------ the room */
html.ds #device > .screen.cg-room {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box;
  width: 100%; height: 100% !important; min-height: 0 !important; margin: 0 !important;
  padding: max(12px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom)) !important;
  overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain;
  color: var(--cg-cream) !important; font-family: var(--font-ui); text-align: left;
  background:
    radial-gradient(120% 46% at 50% -6%, var(--cg-glow-warm), transparent 70%),
    radial-gradient(110% 42% at 50% 108%, var(--cg-glow-rose), transparent 72%),
    linear-gradient(170deg, var(--cg-bg-top) 0%, var(--cg-bg-mid) 48%, var(--cg-bg-low) 100%) !important;
}
html.ds #device > .screen.cg-room::before, html.ds #device > .screen.cg-room::after { content: none !important; }
html.ds :where(.cg-room) :where(h1, h2, p, ol, ul) { margin: 0; padding: 0; }
html.ds :where(.cg-room) :where(ol, ul) { list-style: none; }
html.ds .cg-room button { font-family: var(--font-ui); -webkit-tap-highlight-color: transparent; }
html.ds .cg-room button:focus-visible { outline: 3px solid var(--c-focus, var(--c-seal-hi)); outline-offset: 3px; }

/* header: a round control either side, the brand (or the points) between */
html.ds .cg-header { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; flex: 0 0 auto; min-height: 48px; }
html.ds .cg-round, html.ds .cg-round-spacer { width: 44px; height: 44px; }
html.ds .cg-room .cg-round {
  display: grid; place-items: center; padding: 0; border: 1px solid var(--cg-panel-line); border-radius: 50%;
  background: var(--cg-panel); color: var(--cg-cream); box-shadow: 0 4px 0 var(--cg-panel-deep);
}
html.ds .cg-room .cg-round .trip-ui-icon { width: 22px; height: 22px; }
html.ds .cg-header > .critical-brand-lockup { justify-self: center; }
html.ds .cg-header .header-brand-aura { display: none; }
html.ds .cg-room .cryptic-review-note { display: none; }

/* chunky buttons: a bright face sitting on a darker lip; pressing pushes the face down onto it */
html.ds .cg-room .cg-btn {
  position: relative; display: block; flex: 0 0 auto; width: 100%; min-height: 62px; margin: 0; padding: 0 0 6px; border: 0; border-radius: 20px;
  background: var(--cg-pop-deep); color: var(--cg-ink); box-shadow: 0 10px 22px var(--cg-shadow);
  font: 700 calc(20 * var(--type-unit))/calc(25 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-title-3); text-align: center;
}
html.ds .cg-room .cg-btn-face {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 18px; border-radius: 20px;
  background: linear-gradient(180deg, var(--cg-pop-hi), var(--cg-pop) 52%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6);
  transition: translate var(--motion-press) var(--motion-curve);
}
html.ds .cg-room .cg-btn:not(:disabled):is(:active, .ds-pressed) .cg-btn-face { translate: 0 5px; }
html.ds .cg-room .cg-btn.ds-pressed { scale: 1 !important; }
html.ds .cg-room .cg-btn:disabled { background: var(--cg-panel-deep); box-shadow: none; color: var(--cg-cream-dim); }
html.ds .cg-room .cg-btn:disabled .cg-btn-face { background: var(--cg-panel); box-shadow: inset 0 0 0 1px var(--cg-panel-line); }
/* a waiting Guess sits flat and unlit until there is something to check */
html.ds .cg-room .cg-btn-pop:disabled { background: none; }
html.ds .cg-room .cg-btn-pop:disabled .cg-btn-face { translate: 0 3px; }
html.ds .cg-room .cg-btn-glass { min-height: 54px; background: var(--cg-panel-deep); color: var(--cg-cream); box-shadow: none; font: 600 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-headline); }
html.ds .cg-room .cg-btn-glass .cg-btn-face { min-height: 48px; background: var(--cg-panel-strong); box-shadow: inset 0 0 0 1px var(--cg-panel-line); }
html.ds .cg-room .cg-link {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: 14px; background: none; color: var(--cg-cream);
  font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); text-decoration: underline; text-decoration-color: var(--cg-panel-line); text-underline-offset: 4px;
}

/* ------------------------------------------------------------------ Flick (the mascot; lane FLICK, 13 October 2026)
   The owner's renders of Flick (flick-art.js, ds-flick.css) in place of Spoolie's drawing: one square picture per mood,
   standing on its floor. His moods move the whole of him (transform only): curious leans in, thinking sways while a
   guess is checked, a cheer hops, an oops wobbles twice, a finished day breathes. Reduce Motion: still. */
html.ds .cg-spool { position: relative; display: block; flex: 0 0 auto; aspect-ratio: 1; }
html.ds .cg-spool > .flk { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 96%; }
html.ds .cg-spool[data-mood="curious"] > .flk { animation: cg-lean 1.9s var(--motion-spring) both; }
html.ds .cg-spool[data-mood="thinking"] > .flk { animation: cg-sway 2.4s var(--motion-breathe) infinite; }
html.ds .cg-spool[data-mood="cheer"] > .flk { animation: cg-jump 620ms var(--motion-breathe) infinite alternate; }
html.ds .cg-spool[data-mood="oops"] > .flk { animation: cg-wobble var(--motion-slow) var(--motion-curve) 2; }
html.ds .cg-spool[data-mood="sleepy"] > .flk { animation: cg-breathe 3.6s var(--motion-breathe) infinite; }

/* stickers */
html.ds .cg-icon { display: block; width: 100%; height: 100%; overflow: visible; }
html.ds .cg-icon .i-pop { fill: var(--cg-pop); }
html.ds .cg-icon .i-coral { fill: var(--cg-coral); }
html.ds .cg-icon .i-cream { fill: var(--cg-paper); }
html.ds .cg-icon .i-sky { fill: var(--cg-sky); }
html.ds .cg-icon .i-ink { fill: var(--cg-ink); }
html.ds .cg-icon .i-globe-land { fill: var(--cg-mint); }
html.ds .cg-icon .i-cut { fill: var(--cg-bg-mid); }
html.ds .cg-icon .i-glass { fill: var(--cg-sky); opacity: .45; }
html.ds .cg-icon .i-line { fill: none; stroke: var(--cg-pop-deep); stroke-width: 2; stroke-dasharray: 2.5 3; stroke-linecap: round; }
html.ds .cg-icon .i-mint-ring { fill: none; stroke: var(--cg-mint); stroke-width: 5; }
html.ds .cg-icon .i-pop-stroke { fill: none; stroke: var(--cg-pop); stroke-width: 6.5; stroke-linecap: round; }
html.ds .cg-icon .i-shine { fill: none; stroke: white; stroke-width: 2.4; stroke-linecap: round; opacity: .8; }

/* ------------------------------------------------------------------ landing */
html.ds .cg-landing { gap: 12px; }
html.ds .cg-hero { flex: 0 0 auto; display: grid; justify-items: center; gap: 8px; text-align: center; }
html.ds .cg-kicker { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 8px; font: 700 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--cg-pop); }
html.ds .cg-kicker > b { font: 700 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-headline); }
html.ds .cg-kicker > span { font: 600 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--cg-cream); }
html.ds .cg-kicker > span::before { content: "·"; margin-right: 8px; color: var(--cg-cream-dim); }
/* the marquee: a sign ringed with bulbs that chase */
html.ds .cg-headline {
  position: relative; box-sizing: border-box; width: 100%; padding: 22px 10px 20px; border-radius: 28px; background: var(--cg-panel-deep);
  font: 700 calc(28 * var(--type-unit))/calc(34 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-title-1); color: var(--cg-cream); text-wrap: balance;
  text-shadow: 0 3px 0 var(--cg-shadow); box-shadow: inset 0 0 0 1px var(--cg-panel-line), 0 12px 26px var(--cg-shadow);
}
html.ds .cg-headline > span { display: inline-block; }
html.ds .cg-headline > span:nth-child(3) { display: block; color: var(--cg-pop); }
html.ds .cg-headline.is-two > span { display: block; }
html.ds .cg-headline.is-two > span:nth-child(2) { color: var(--cg-pop); }
html.ds .cg-headline::before, html.ds .cg-headline::after {
  content: ""; position: absolute; inset: 0; padding: 7px; border-radius: 28px; pointer-events: none;
  background: radial-gradient(circle, var(--cg-pop-hi) 0 2.4px, transparent 3.2px) 0 0 / 15px 15px round;
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
  animation: cg-bulb 1.4s steps(1, end) infinite;
}
html.ds .cg-headline::after { background-position: 7.5px 7.5px; animation-delay: -.7s; }
html.ds .cg-edition {
  padding: 5px 14px; border-radius: 999px; background: var(--cg-panel); box-shadow: inset 0 0 0 1px var(--cg-panel-line);
  font: 600 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); font-variant-numeric: tabular-nums; color: var(--cg-cream);
}

/* the stage: spotlight, floor glow, the mystery poster, Spool, stickers adrift */
html.ds .cg-stage { position: relative; flex: 1 1 auto; min-height: 118px; margin: 0 -20px; --cg-px: 0; --cg-py: 0; }
html.ds .cg-stage.is-plain { min-height: 24px; }
html.ds .cg-beam {
  position: absolute; left: 50%; top: -14px; bottom: 18px; width: 300px; translate: -50% 0;
  background: linear-gradient(180deg, var(--cg-beam), var(--cg-beam-soft) 82%, transparent);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
}
html.ds .cg-floor { position: absolute; left: 50%; bottom: 0; width: 280px; height: 44px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, var(--cg-glow-warm), transparent); }
html.ds .cg-poster {
  position: absolute; left: 50%; bottom: 22px; height: min(74%, 196px); aspect-ratio: 2 / 3; translate: -98% 0; rotate: -7deg; box-sizing: border-box;
  display: grid; place-items: center; border: 4px solid var(--cg-paper); border-radius: 14px;
  background: linear-gradient(160deg, var(--cg-amber), var(--cg-coral) 62%, var(--cg-coral-deep)); box-shadow: 0 14px 26px var(--cg-shadow);
  transform-origin: 50% 100%; animation: cg-wiggle 5.2s var(--motion-breathe) infinite;
}
html.ds .cg-poster.has-poster { background: var(--cg-poster) center / cover no-repeat, var(--cg-bg-deep); animation: none; }
html.ds .cg-poster-q { width: 46%; height: auto; overflow: visible; }
html.ds .cg-poster-q path { fill: none; stroke: var(--cg-paper); stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; }
html.ds .cg-poster-q circle { fill: var(--cg-paper); }
html.ds .cg-poster-tape { position: absolute; top: -9px; left: 50%; width: 42px; height: 16px; translate: -50% 0; rotate: 4deg; border-radius: 0; background: var(--cg-pop); opacity: .92; }
html.ds .cg-poster-spark { position: absolute; width: 10px; height: 10px; background: var(--cg-paper); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: cg-twinkle 2.2s var(--motion-breathe) infinite; }
html.ds .cg-spark-1 { top: 14%; right: 14%; }
html.ds .cg-spark-2 { bottom: 16%; left: 14%; width: 8px; height: 8px; animation-delay: -1.1s; }
html.ds .cg-poster-tick { position: absolute; right: -12px; top: -12px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--cg-mint); color: var(--cg-ink); font: 700 calc(20 * var(--type-unit))/1 var(--font-ui); box-shadow: 0 4px 0 var(--cg-mint-deep); }
html.ds .cg-poster-tick:empty { display: none; }
html.ds .cg-spool-stage { position: absolute; left: 50%; bottom: 6px; height: min(80%, 208px); translate: -14% 0; }
html.ds .cg-float { position: absolute; width: 40px; height: 40px; translate: calc(var(--cg-px) * var(--cg-depth, 6px)) calc(var(--cg-py) * var(--cg-depth, 6px)); transition: translate var(--motion-normal) var(--motion-curve); animation: cg-drift 6s var(--motion-breathe) infinite; }
html.ds .cg-float-1 { left: 5%; top: 0; width: 44px; height: 44px; rotate: -12deg; --cg-depth: 12px; }
html.ds .cg-float-2 { right: 6%; top: 2%; width: 44px; height: 44px; rotate: 14deg; --cg-depth: 9px; animation-duration: 7s; animation-delay: -2s; }
html.ds .cg-float-3 { left: 43%; top: 3%; width: 26px; height: 26px; rotate: 10deg; --cg-depth: 16px; animation-duration: 5s; animation-delay: -1s; }
html.ds .cg-float-4 { left: 2%; top: 40%; width: 38px; height: 38px; rotate: -8deg; --cg-depth: 14px; animation-duration: 6.6s; animation-delay: -3s; }
html.ds .cg-float-5 { left: 3%; bottom: 6%; width: 36px; height: 36px; rotate: -16deg; --cg-depth: 8px; animation-duration: 7.4s; animation-delay: -4s; }
html.ds .cg-float-6 { right: 4%; bottom: 0; width: 34px; height: 34px; rotate: 18deg; --cg-depth: 11px; animation-duration: 5.6s; animation-delay: -2.5s; }
html.ds .cg-float-7 { left: 24%; top: 6%; width: 24px; height: 24px; rotate: 12deg; --cg-depth: 18px; animation-duration: 4.8s; animation-delay: -.5s; }
html.ds .cg-float-8 { right: 27%; top: 0; width: 30px; height: 30px; rotate: -20deg; --cg-depth: 15px; animation-duration: 8s; animation-delay: -5s; }

/* the daily strip: today's number and date beside the countdown to the next film */
html.ds .cg-daily { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
html.ds .cg-daily .cg-edition { padding: 5px 10px; white-space: nowrap; }
html.ds .cg-daily .cg-countdown { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 10px; white-space: nowrap; border-radius: 999px; background: var(--cg-panel-deep); box-shadow: inset 0 0 0 1px var(--cg-panel-line); font: 600 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--cg-cream); }
html.ds .cg-daily .cg-countdown .cg-clock { font: 700 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); }

/* the landing's quiet lines (owner, 6 Oct 2026: the landing was too busy): one chip for a run in progress, and one line
   for the world ranking (your place once you have finished, the live count of players before). No cards. The week of
   ticket stubs and what the run earns next are on the result. */
html.ds .cg-quiet { flex: 0 0 auto; display: grid; justify-items: center; gap: 6px; min-width: 0; }
html.ds .cg-run-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: 999px; background: var(--cg-panel); box-shadow: inset 0 0 0 1px var(--cg-panel-line); font: 600 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--cg-cream); }
html.ds .cg-run-chip .cg-icon { width: 18px; height: 18px; rotate: -10deg; }
html.ds .cg-world { flex: 0 0 auto; max-width: 100%; }
html.ds .cg-world-copy { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px; min-width: 0; text-align: center; }
html.ds .cg-world-copy > strong { font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--cg-cream); }
html.ds .cg-world-copy > strong b { font-weight: 700; color: var(--cg-pop); font-variant-numeric: tabular-nums; }
html.ds .cg-world-tail { font: 400 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--cg-cream-dim); }
/* The tail is its own line under the count (P-SYSTEM, 13 October 2026). As one line with a "·" it wrapped on every phone
   ("Be the first to play today" / "· world rank with TRIPTIC+"), and the second line began with the dot. */
html.ds .cg-world-copy > .cg-world-tail { flex-basis: 100%; }
/* a free player (owner, 6 October 2026): the same line is one button to the membership page; its tail names TRIPTIC+ */
html.ds .cg-world.is-plus { appearance: none; display: block; min-height: 44px; margin: -8px 0; padding: 8px 12px; border: 0; border-radius: 14px; background: none; color: var(--cg-cream); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.ds .cg-world.is-plus:focus-visible { outline: 2px solid var(--cg-pop); outline-offset: 2px; }
html.ds .cg-world-tail.is-plus { font-weight: 600; color: var(--cg-cream); }
/* a themed week ("Halloween week"): a small ribbon with swallow-tail ends, on the landing and beside the lives in play */
html.ds .cg-ribbon { flex: 0 0 auto; display: inline-flex; filter: drop-shadow(0 3px 0 var(--cg-coral-deep)); }
html.ds .cg-ribbon > span { padding: 3px 22px; background: var(--cg-coral); color: var(--cg-ink); font: 700 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-1); white-space: nowrap; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%, 9px 50%); }
html.ds .cg-daily .cg-ribbon { flex-basis: 100%; justify-content: center; margin-bottom: 2px; }
html.ds .cg-live { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font: 600 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--cg-cream-dim); }
html.ds .cg-live b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cg-cream); }
html.ds .cg-live-dot { position: relative; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--cg-mint); }
html.ds .cg-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--cg-mint); animation: cg-live 1.8s var(--motion-breathe) infinite; }
html.ds .cg-live.is-paused .cg-live-dot { background: var(--cg-lilac); }
html.ds .cg-live.is-paused .cg-live-dot::after { content: none; }
html.ds .cg-live-word { font-weight: 700; color: var(--cg-mint); }
html.ds .cg-live.is-paused .cg-live-word { color: var(--cg-lilac); }

/* the week (owner, 9 October 2026, 22:00): the days of the week, lit for the days played, and one line on the film
   card's Daily Cryptic arch. No numbers, no stubs, no tiers. A played day is a filled gold disc; today, still open, is a
   gold ring; days to come are faint; a missed day is a quiet outline. Static: nothing here loops. */
html.ds .cg-run { flex: 0 0 auto; display: grid; gap: 12px; padding: 14px; border-radius: 20px; background: var(--cg-panel); box-shadow: inset 0 0 0 1px var(--cg-panel-line); }
html.ds .cg-week-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; min-width: 0; }
html.ds .cg-week-head > h2 { font: 700 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--cg-cream); }
html.ds .cg-week-head > small { font: 500 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--cg-cream-dim); }
html.ds .cg-week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
html.ds .cg-day { display: grid; place-items: center; min-width: 0; }
html.ds .cg-day > span {
  display: grid; place-items: center; box-sizing: border-box; width: min(100%, 40px); aspect-ratio: 1; border-radius: 50%;
  font: 700 calc(15 * var(--type-unit))/1 var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--cg-cream-dim);
  box-shadow: inset 0 0 0 1.5px var(--cg-panel-line);
}
html.ds .cg-day.is-played > span { color: var(--cg-ink); background: radial-gradient(circle at 35% 30%, var(--cg-pop-hi), var(--cg-pop) 62%, var(--cg-pop-deep)); box-shadow: 0 3px 0 var(--cg-pop-deep), 0 0 14px var(--cg-glow-warm); }
html.ds .cg-day.is-today:not(.is-played) > span { color: var(--cg-pop); box-shadow: inset 0 0 0 2px var(--cg-pop); }
html.ds .cg-day.is-later > span { opacity: .45; box-shadow: inset 0 0 0 1.5px var(--cg-panel-line); }
html.ds .cg-day.is-missed > span { opacity: .7; }
html.ds .cg-week-line { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--cg-panel-line); font: 500 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--cg-cream); text-wrap: pretty; }
html.ds .cg-arches { display: block; width: 40px; height: auto; overflow: visible; }
html.ds .cg-arches .cg-arch { fill: none; stroke: var(--cg-pop); stroke-width: 2; opacity: .55; }
html.ds .cg-arches .cg-arch.is-cryptic { opacity: 1; }
html.ds .cg-arches .cg-arch-fill { fill: var(--cg-pop); stroke: var(--cg-pop); stroke-width: 2; filter: drop-shadow(0 0 4px var(--cg-glow-warm)); }

html.ds .cg-actions { flex: 0 0 auto; display: grid; gap: 10px; }
html.ds .cg-progress { display: flex; justify-content: center; gap: 8px; }
html.ds .cg-progress > span { padding: 5px 12px; border-radius: 999px; background: var(--cg-panel); box-shadow: inset 0 0 0 1px var(--cg-panel-line); font: 600 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--cg-cream); }
html.ds .cg-progress b { font-weight: 700; color: var(--cg-pop); }
html.ds .cg-play-button { min-height: 68px; font-size: calc(22 * var(--type-unit)); line-height: calc(28 * var(--type-unit)); letter-spacing: var(--tr-title-2); }
html.ds .cg-play-button .cg-btn-face { min-height: 62px; }
html.ds .cg-landing[data-cg-status="fresh"] .cg-play-button:not(:disabled) .cg-btn-face { animation: cg-beckon 2.6s var(--motion-breathe) 1.2s infinite; }
html.ds .cg-links { display: flex; justify-content: center; gap: 8px; }
html.ds .cg-foot { font: 400 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--cg-cream-dim); text-align: center; text-wrap: balance; }
/* (10 November 2026, the owner) the free-days line, a little brighter (the room's cream, as its other words) and in two short lines at
   its sentence boundary: this week's count, then what TRIPTIC+ adds (cryptic-premium.js footLines) */
html.ds .cg-landing .cg-foot { color: var(--cg-cream); }
html.ds .cg-foot-line { display: block; }
/* (10 November 2026, the owner: the small TRIPTIC at the top is faint on the purple) its full strength, and the room's own shadow
   under its thin strokes */
html.ds .cg-landing .cg-header > .critical-brand-lockup { opacity: 1; }
html.ds .cg-landing .cg-header > .critical-brand-lockup :is(.brand-mark, .wordmark) { filter: drop-shadow(0 1px 1px var(--cg-shadow)); }
html.ds .cg-countdown { display: flex; align-items: baseline; justify-content: center; gap: 8px; font: 400 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--cg-cream-dim); text-align: center; }
html.ds .cg-countdown .cg-clock { font: 700 calc(20 * var(--type-unit))/calc(25 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-title-3); font-variant-numeric: tabular-nums; color: var(--cg-pop); }

/* ------------------------------------------------------------------ play */
html.ds #device > .screen.cg-play { gap: 10px; overflow: hidden !important; }
html.ds .cg-score { position: relative; justify-self: center; display: grid; justify-items: center; gap: 4px; width: min(100%, 190px); }
html.ds .cg-score-line { display: flex; align-items: baseline; gap: 5px; font: 600 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--cg-cream-dim); }
html.ds .cg-score-value { font: 700 calc(28 * var(--type-unit))/calc(30 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-title-1); font-variant-numeric: tabular-nums; color: var(--cg-pop); text-shadow: 0 2px 0 var(--cg-shadow); }
html.ds .cg-meter { display: block; width: 100%; height: 8px; border-radius: 999px; background: var(--cg-panel-deep); box-shadow: inset 0 0 0 1px var(--cg-panel-line); overflow: hidden; }
html.ds .cg-meter > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cg-amber), var(--cg-pop)); transform-origin: 0 50%; transform: scaleX(var(--cg-fill, 1)); transition: transform var(--motion-slow) var(--motion-spring); }
/* the speed bonus: still to be won, ticking down gently beside the points (display only; the service decides) */
html.ds .cg-score-line { flex-wrap: nowrap; white-space: nowrap; }
html.ds .cg-speed { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; padding: 2px 9px 2px 4px; border-radius: 999px; background: var(--cg-panel-deep); box-shadow: inset 0 0 0 1px var(--cg-panel-line); align-self: center; }
html.ds .cg-speed .cg-icon { width: 14px; height: 14px; }
html.ds .cg-speed-n { min-width: 4ch; font: 700 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); font-variant-numeric: tabular-nums; color: var(--cg-sky); text-align: right; }
html.ds .cg-speed-word { margin-left: 3px; font: 600 calc(11 * var(--type-unit))/calc(13 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-2); color: var(--cg-cream-dim); }
html.ds .cg-speed.is-spent .cg-speed-n, html.ds .cg-speed.is-spent .cg-icon { display: none; }
html.ds .cg-speed.is-spent { padding-left: 9px; }
html.ds .cg-speed.is-spent .cg-speed-word { margin-left: 0; }
/* (Phase E review, 13 October 2026) The points, "pts" and the live bonus chip need 237pt on one line; the header's
   middle column is 223pt on a 375pt phone and 238pt on a 390pt one. The score's one column grew to fit them and the
   block slid right: the chip and the meter ran under the How it works button (19pt over it at 375). The column now
   stays the score's own width and the line centres on it, and where the header is under 370pt (every iPhone but the
   largest) the live chip says "+140" with its bolt and no word, as it already does while the keyboard is up; "no rush"
   keeps its word. VoiceOver's line (data-cg-speed-said) is unchanged. */
html.ds .cg-score { grid-template-columns: minmax(0, 1fr); }
html.ds #device > .screen.cg-play .cg-header { container: cg-header / inline-size; }
@container cg-header (max-width: 369px) {
  html.ds .cg-speed:not(.is-spent) .cg-speed-word { display: none; }
}
html.ds .cg-speed-cap { font: 600 calc(11 * var(--type-unit))/calc(13 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-2); color: var(--cg-cream-dim); text-align: center; }
/* (28 October 2026, the owner: the "+140" chip "shows before playing with no explanation") the chip is a button (a 44pt target round
   it) and its line, under the meter, says what the bonus is and how it falls (cryptic-premium.js speedWhyLine) */
html.ds button.cg-speed { position: relative; appearance: none; border: 0; margin-top: 0; margin-bottom: 0; color: var(--cg-cream); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.ds button.cg-speed::after { content: ""; position: absolute; inset: -11px -4px; }
html.ds button.cg-speed:focus-visible { outline: 2px solid var(--c-focus, var(--c-seal-hi)); outline-offset: 2px; }
html.ds .cg-score .cg-speed-cap { margin: 6px auto 0; max-width: 30ch; text-wrap: balance; }
html.ds .cg-speed-cap[hidden] { display: none; }
html.ds .cg-meter { position: relative; }
html.ds .cg-meter > .cg-meter-bonus { display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: auto; background: var(--cg-sky); transform-origin: 0 50%; transform: translateX(calc(var(--cg-fill, 1) * 100%)) scaleX(var(--cg-bonus, 0)); transition: transform var(--motion-slow) linear; border-radius: 0 999px 999px 0; }
html.ds .cg-penalty { position: absolute; right: -6px; top: -2px; padding: 2px 8px; border-radius: 999px; background: var(--cg-coral); color: var(--cg-ink); font: 700 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); font-style: normal; font-variant-numeric: tabular-nums; pointer-events: none; animation: cg-penalty var(--motion-ceremony) var(--motion-curve) both; }

/* A past puzzle in play says so, once, under the header (readiness review CG2): a quiet label in the room's own panel.
   While the keyboard is up the game gives every point of height to the clue, and the label steps aside. */
html.ds .cg-past {
  flex: 0 0 auto; align-self: center; margin: -4px 0 0; padding: 3px 12px; border-radius: 999px;
  background: var(--cg-panel); box-shadow: inset 0 0 0 1px var(--cg-panel-line);
  font: 600 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--cg-cream-dim); white-space: nowrap;
}
html.ds #device.keyboard-open > .cg-play .cg-past { display: none; }
html.ds .cg-tokens { flex: 0 0 auto; display: grid; grid-template-columns: repeat(var(--cg-token-count, 5), minmax(0, 1fr)); gap: 6px; }
html.ds .cg-room .cg-token > :is(button, span) {
  display: grid; justify-items: center; align-content: center; gap: 0; box-sizing: border-box; width: 100%; height: 46px; margin: 0; padding: 0; border: 0; border-radius: 14px;
  background: var(--cg-panel); box-shadow: inset 0 0 0 1.5px var(--cg-panel-line); color: var(--cg-cream-dim);
}
html.ds .cg-token b { font: 700 calc(15 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); font-variant-numeric: tabular-nums; }
html.ds .cg-token small { font: 600 calc(11 * var(--type-unit))/calc(13 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-2); font-variant-numeric: tabular-nums; }
html.ds .cg-room .cg-token.is-sealed > span { background: none; box-shadow: none; border: 1.5px dashed var(--cg-panel-line); }
html.ds .cg-room .cg-token.is-open > button { background: var(--cg-paper); color: var(--cg-ink); box-shadow: 0 3px 0 var(--cg-paper-edge); }
html.ds .cg-room .cg-token.is-current > button { background: var(--cg-pop); color: var(--cg-ink); box-shadow: 0 3px 0 var(--cg-pop-deep); animation: cg-token-in var(--motion-slow) var(--motion-spring) both; }
html.ds .cg-room .cg-token.is-viewing > button { outline: 2px solid var(--cg-sky); outline-offset: 2px; }
html.ds .cg-play.is-found .cg-token > :is(button, span) { background: var(--cg-mint); color: var(--cg-ink); box-shadow: 0 3px 0 var(--cg-mint-deep); border: 0; }

html.ds .cg-host { position: relative; flex: 2 1 64px; min-height: 64px; display: flex; align-items: center; gap: 14px; container-type: size; }
html.ds .cg-spool-host { height: 64px; height: min(100cqh, 210px); }
html.ds .cg-bubble {
  position: relative; flex: 1 1 auto; min-width: 0; padding: 10px 14px; border-radius: 20px; background: var(--cg-paper); color: var(--cg-ink);
  font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); text-wrap: balance; box-shadow: 0 4px 0 var(--cg-paper-edge);
}
html.ds .cg-bubble::before { content: ""; position: absolute; left: -6px; top: 50%; width: 14px; height: 14px; margin-top: -7px; rotate: 45deg; border-radius: 0; background: var(--cg-paper); }
html.ds .cg-play[data-cg-mood="oops"] .cg-bubble { animation: cg-bubble-pop var(--motion-normal) var(--motion-spring); }

/* the clue tickets: one per opened clue, the latest in view; flick back for the earlier ones */
html.ds .cg-clues {
  position: relative; flex: 1 1 auto; min-height: 104px; display: flex; align-items: stretch; gap: 12px; margin: 0 -20px; padding: 4px 26px 8px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
html.ds .cg-clues::-webkit-scrollbar { display: none; }
html.ds .cg-clue-card {
  flex: 0 0 100%; box-sizing: border-box; min-width: 0; display: grid; grid-template-columns: 62px minmax(0, 1fr); scroll-snap-align: center; border-radius: 20px; overflow: hidden;
  background: var(--cg-paper); color: var(--cg-ink); box-shadow: 0 6px 0 var(--cg-paper-edge), 0 16px 26px var(--cg-shadow);
  -webkit-mask: radial-gradient(circle 9px at 62px 0, transparent 97%, black) top / 100% 51% no-repeat, radial-gradient(circle 9px at 62px 100%, transparent 97%, black) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 9px at 62px 0, transparent 97%, black) top / 100% 51% no-repeat, radial-gradient(circle 9px at 62px 100%, transparent 97%, black) bottom / 100% 51% no-repeat;
}
html.ds .cg-clue-stub { display: grid; align-content: center; justify-items: center; gap: 0; background: var(--cg-bg-mid); color: var(--cg-cream); border-right: 2px dashed var(--cg-paper); }
html.ds .cg-clue-stub small { font: 600 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--cg-lilac); }
html.ds .cg-clue-stub b { font: 700 calc(34 * var(--type-unit))/calc(38 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-large-title); font-variant-numeric: tabular-nums; color: var(--cg-pop); }
html.ds .cg-clue-text { align-self: center; max-height: 100%; box-sizing: border-box; padding: 14px 18px; overflow-y: auto; font: 600 calc(20 * var(--type-unit))/calc(25 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-title-3); color: var(--cg-ink); text-wrap: pretty; }
html.ds .cg-clue-card.is-long .cg-clue-text { font: 600 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-headline); }
html.ds .cg-clue-card.is-arriving { animation: cg-card-in var(--motion-slow) var(--motion-spring) both; }
html.ds .cg-play.is-revealing-clue .cg-clue-card.is-current { opacity: .6; }

/* typed clues: one look for each kind of clue. The ticket's right side is a small stage for the clue; what it says is
   also there as plain words for a screen reader (the drawn side is aria-hidden). */
html.ds .cg-ticket { position: relative; min-width: 0; min-height: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; color: var(--cg-ink); }
html.ds .cg-ticket::-webkit-scrollbar { display: none; }
html.ds .cg-clues.is-typed { flex: 1 1 200px; }
html.ds .cg-ticket > :first-child, html.ds .cg-ticket > :is(.cg-ticket-mark, .cg-postmark, .cg-gift-bow) + * { margin-top: auto; }
html.ds .cg-ticket > :last-child { margin-bottom: auto; }
html.ds .cg-ticket-kind { align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: var(--cg-lilac); color: var(--cg-ink); font: 700 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-1); white-space: nowrap; }
html.ds .cg-ticket-line { font: 600 calc(20 * var(--type-unit))/calc(25 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-title-3); color: var(--cg-ink); text-wrap: pretty; }
html.ds .cg-ticket.is-mid .cg-ticket-line { font: 600 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-headline); }
html.ds .cg-ticket.is-long .cg-ticket-line { font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); }
/* riddle: said slant, with a magnifier in the corner */
html.ds .cg-ticket-riddle .cg-ticket-line { font-style: italic; }
html.ds .cg-ticket-mark { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; rotate: 14deg; }
/* pictograms: each picture on its own tile; they pop in one after another */
html.ds .cg-emoji { align-self: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; max-width: 100%; }
html.ds .cg-emoji:is([data-n="5"], [data-n="6"]) { max-width: 176px; }
html.ds .cg-emoji > span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--cg-lilac); box-shadow: 0 3px 0 var(--cg-spool-line); font: 400 calc(28 * var(--type-unit))/1 var(--font-ui); }
/* wrong genre: the same story, stamped with the genre it is being told in */
html.ds .cg-ticket-wrong-genre .cg-told { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
html.ds .cg-stamp { display: inline-block; padding: 2px; border-radius: 10px; background: var(--cg-coral); box-shadow: 0 3px 0 var(--cg-coral-deep); rotate: -4deg; }
html.ds .cg-stamp > span { display: block; padding: 1px 9px; border: 1.5px dashed var(--cg-ink); border-radius: 10px; font: 700 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--cg-ink); white-space: nowrap; }
/* tagline: the film's own words, in quotation marks */
html.ds .cg-ticket-line.cg-quote { font-style: italic; }
/* keywords: pinned up like notes on the cutting-room wall */
html.ds .cg-pins { display: flex; flex-wrap: wrap; gap: 10px 8px; }
html.ds .cg-pins > b { padding: 6px 12px; border-radius: 999px; background: var(--cg-pop); box-shadow: 0 3px 0 var(--cg-pop-deep); rotate: -2deg; font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--cg-ink); }
html.ds .cg-pins > b:nth-child(2) { background: var(--cg-mint); box-shadow: 0 3px 0 var(--cg-mint-deep); rotate: 1.5deg; }
html.ds .cg-pins > b:nth-child(3) { background: var(--cg-sky); box-shadow: 0 3px 0 var(--cg-sky-deep); rotate: -1deg; }
html.ds .cg-pins > b:nth-child(4) { background: var(--cg-lilac); box-shadow: 0 3px 0 var(--cg-spool-line); rotate: 2deg; }
/* facts and era: the small print, postmarked with the year (or the decade) */
html.ds .cg-postmark { position: absolute; right: 10px; top: 8px; display: grid; place-items: center; width: 54px; height: 54px; box-sizing: border-box; border: 2px dashed var(--cg-ink-soft); border-radius: 50%; rotate: 12deg; }
html.ds .cg-postmark > span { font: 700 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); font-variant-numeric: tabular-nums; color: var(--cg-ink-soft); }
html.ds .cg-ticket.has-postmark .cg-ticket-kind { margin-bottom: 14px; }
/* people: who made it (by another film of theirs) and who is in it (as monograms, until the gift names them) */
html.ds .cg-ticket-line.cg-credit { font: 500 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--cg-ink-soft); }
html.ds .cg-credit b { font-weight: 700; color: var(--cg-ink); }
html.ds .cg-monograms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--cg-ink-soft); }
html.ds .cg-monogram { display: grid; place-items: center; min-width: 44px; height: 44px; box-sizing: border-box; padding: 0 9px; border-radius: 999px; background: var(--cg-bg-mid); box-shadow: 0 3px 0 var(--cg-bg-deep); font: 700 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--cg-cream); white-space: nowrap; }
html.ds .cg-monogram.is-director { background: var(--cg-pop); box-shadow: 0 3px 0 var(--cg-pop-deep); color: var(--cg-ink); }
/* poster: the real poster, out of focus, at ONE medium blur for the whole round (owner, 9 October 2026, 22:00: no
   steps, no dots). It is only ever sharp on the result. The picture has no alt text and nothing near it names the film. */
html.ds .cg-ticket-poster { flex-direction: row; align-items: center; gap: 14px; }
html.ds .cg-ticket-poster > :first-child, html.ds .cg-ticket-poster > :last-child { margin-top: 0; margin-bottom: 0; }
html.ds :is(.cg-pt-frame, .cg-peek-frame) { position: relative; flex: 0 0 auto; display: block; overflow: hidden; aspect-ratio: 2 / 3; box-sizing: border-box; border-radius: 10px; background: var(--cg-bg-mid); }
html.ds .cg-pt-frame { width: 96px; border: 3px solid var(--cg-bg-mid); rotate: -3deg; box-shadow: 0 6px 14px var(--cg-shadow); }
html.ds .cg-blur { position: absolute; inset: -16px; background: center / cover no-repeat; filter: blur(6px); }
html.ds .cg-peek-frame .cg-blur { inset: -10px; filter: blur(3.4px); }
html.ds .cg-blur-shine { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .24), transparent 42%); }
html.ds .cg-pt-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 8px; align-content: center; justify-items: start; }
html.ds .cg-ticket-poster .cg-ticket-line { font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); }
html.ds .cg-ticket-poster:is(.is-mid, .is-long) .cg-ticket-line { font: 600 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); }
/* the poster beside Spool, from the moment its clue is open and for the rest of the round, at the same blur: in view
   whichever clue is showing. Tap it to flick back to that ticket. It pops in once, when its clue opens. */
html.ds .cg-room .cg-peek { flex: 0 0 auto; display: grid; place-items: center; width: 56px; min-height: 76px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; box-shadow: none; }
html.ds .cg-room .cg-peek.is-arriving { animation: cg-count-pop var(--motion-slow) var(--motion-spring) 280ms both; }
html.ds .cg-peek-frame { width: 50px; border: 2px solid var(--cg-paper); rotate: 5deg; box-shadow: 0 5px 10px var(--cg-shadow); }
/* Spool makes room for it, so the bubble keeps its width */
html.ds .cg-host:has(.cg-peek) .cg-spool-host { height: min(100cqh, 132px); }
html.ds[data-device-h="tall"] .cg-room .cg-peek { width: 68px; min-height: 96px; }
html.ds[data-device-h="tall"] .cg-peek-frame { width: 62px; }
/* gift: the last clue. The names, the year, and the title as a row of lights with most of them still dark */
html.ds .cg-gift-bow { position: absolute; right: 8px; top: 6px; width: 32px; height: 32px; rotate: 10deg; }
html.ds .cg-ticket .cg-ticket-line.is-lead { font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--cg-ink); }
html.ds .cg-tiles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; --cg-tile: 26px; }
html.ds .cg-tiles.is-m { --cg-tile: 22px; gap: 7px 10px; }
html.ds .cg-tiles.is-s { --cg-tile: 18px; gap: 6px 9px; }
html.ds .cg-tiles.is-xs { --cg-tile: 15px; gap: 5px 8px; }
html.ds .cg-word { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; }
html.ds .cg-word > b { display: grid; place-items: center; width: var(--cg-tile); height: var(--cg-tile); border-radius: 50%; background: var(--cg-pop); box-shadow: 0 2px 0 var(--cg-pop-deep); font: 700 calc(15 * var(--type-unit))/1 var(--font-ui); color: var(--cg-ink); }
html.ds .cg-tiles.is-m .cg-word > b { font-size: calc(13 * var(--type-unit)); }
html.ds .cg-tiles:is(.is-s, .is-xs) .cg-word > b { font-size: calc(11 * var(--type-unit)); }
html.ds .cg-word > b.is-blank { background: var(--cg-paper-edge); box-shadow: inset 0 2px 0 var(--cg-spool-line); }
html.ds .cg-word > i { font: 700 calc(15 * var(--type-unit))/1 var(--font-ui); font-style: normal; color: var(--cg-ink-soft); }
/* each kind arrives its own way (once, with its ticket) */
html.ds .cg-clue-card.is-arriving .cg-emoji > span { animation: cg-count-pop var(--motion-slow) var(--motion-spring) calc(260ms + var(--cg-i, 0) * 120ms) both; }
html.ds .cg-clue-card.is-arriving .cg-stamp { animation: cg-stamp var(--motion-slow) var(--motion-spring) 460ms both; }
html.ds .cg-clue-card.is-arriving .cg-postmark { animation: cg-stamp var(--motion-slow) var(--motion-spring) 420ms both; }
html.ds .cg-clue-card.is-arriving :is(.cg-monogram, .cg-pins > b) { animation: cg-count-pop var(--motion-slow) var(--motion-spring) calc(300ms + var(--cg-i, 0) * 110ms) both; }
html.ds .cg-clue-card.is-arriving .cg-word > b { animation: cg-flip var(--motion-slow) var(--motion-spring) calc(360ms + min(var(--cg-i, 0) * 45ms, 1500ms)) both; }
html.ds .cg-clue-card.is-arriving .cg-gift-bow { animation: cg-count-pop var(--motion-slow) var(--motion-spring) 200ms both; }

html.ds .cg-dock { flex: 0 0 auto; display: grid; gap: 10px; margin: 0; }
html.ds .cg-dock-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
html.ds .cg-dock-top .cg-lives { margin-left: auto; white-space: nowrap; }
/* on the narrowest phones a ribbon and the words "5 guesses left" do not both fit: the hearts say it (and the label is still spoken) */
html.ds[data-device-w="narrow"] .cg-dock-top .cg-ribbon ~ .cg-lives .cg-focus-guesses { display: none; }
html.ds .cg-lives { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 18px; font: 600 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--cg-cream-dim); }
html.ds .cg-lives[hidden] { display: none; }
html.ds .cg-life-pips { display: inline-flex; gap: 4px; }
html.ds .cg-life-pips > i { width: 14px; height: 13px; background: var(--cg-coral); clip-path: path("M7 13S0 8.7 0 3.9A3.7 3.7 0 0 1 7 2.4 3.7 3.7 0 0 1 14 3.9C14 8.7 7 13 7 13Z"); }
html.ds .cg-life-pips > i.is-lost { background: var(--cg-panel-line); }
html.ds .cg-life-pips > i.cg-pop-off { animation: cg-pop-off var(--motion-slow) var(--motion-curve) both; }
html.ds .cg-guess { display: grid; gap: 10px; }
html.ds .cg-room .cg-guess input {
  box-sizing: border-box; width: 100%; min-width: 0; height: 56px; margin: 0; padding: 0 18px; border: 3px solid transparent; border-radius: 20px; outline: none;
  background: var(--cg-paper); color: var(--cg-ink); caret-color: var(--cg-bg-mid); box-shadow: inset 0 3px 0 var(--cg-paper-edge);
  font: 600 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-headline);
}
html.ds .cg-room .cg-guess input::placeholder { color: var(--cg-ink-soft); opacity: 1; font-weight: 500; }
html.ds .cg-room .cg-guess input:focus { border-color: var(--cg-pop); outline: none !important; box-shadow: inset 0 3px 0 var(--cg-paper-edge), 0 0 0 4px var(--cg-glow-warm); }
html.ds .cg-guess.cg-shake { animation: cg-shake var(--motion-slow) var(--motion-curve); }
html.ds .cg-reveal { margin-top: 2px; }
html.ds .cg-reveal small { padding: 2px 9px; border-radius: 999px; background: var(--cg-coral); color: var(--cg-ink); font: 700 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); font-variant-numeric: tabular-nums; }
/* Giving up (owner, 9 Oct 2026): where "Reveal next clue" was once every clue is open. The first press asks, in Spool's
   bubble, and the one button becomes two of the same height: the safe choice first, the ending one marked in coral. */
html.ds .cg-giveup-ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
html.ds .cg-room .cg-giveup-ask .cg-btn-face { padding: 0 10px; }
html.ds .cg-room .cg-giveup-yes:not(:disabled) .cg-btn-face { box-shadow: inset 0 0 0 2px var(--cg-coral); }

/* Films to pick from as you type (owner, 9 Oct 2026): a paper list that rises from the field, over the clue, so it is
   never under the keyboard. At most a few rows show; the rest scroll (the client caps the height to the room above the
   field). Rows are 44px: each is a tap target. */
html.ds .cg-guess { position: relative; }
html.ds .cg-room .cg-suggest {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: calc(100% + 8px); box-sizing: border-box; max-height: 228px; margin: 0; padding: 0;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 3px solid var(--cg-pop); border-radius: 20px;
  background: var(--cg-paper); color: var(--cg-ink); box-shadow: 0 14px 30px var(--cg-shadow); list-style: none;
}
html.ds .cg-room .cg-suggest[hidden] { display: none; }
/* the list rises over the row of lives: that row steps aside while it is open, so nothing peeks round its corners */
html.ds .cg-dock:has(.cg-suggest:not([hidden])) .cg-dock-top { visibility: hidden; }
html.ds .cg-room .cg-suggest-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 16px; cursor: pointer;
  font: 600 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-headline); -webkit-tap-highlight-color: transparent;
}
html.ds .cg-room .cg-suggest-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ds .cg-room .cg-suggest-item > small { flex: 0 0 auto; color: var(--cg-ink-soft); font: 600 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds .cg-room .cg-suggest-item + .cg-suggest-item { border-top: 1px solid var(--cg-paper-edge); }
html.ds .cg-room .cg-suggest-item:is(:active, [aria-selected="true"]) { background: var(--cg-paper-edge); }
@media (hover: hover) { html.ds .cg-room .cg-suggest-item:hover { background: var(--cg-paper-edge); } }

/* keyboard up: the band is short. Keep the points, Spool thinking along, the latest clue, the field and Guess; the
   tokens, lives and Reveal step aside. On the tightest band (an SE, or Safari's toolbar showing) Spool steps aside too. */
html.ds #device.keyboard-open > .screen.cg-play { gap: 8px; padding-top: 8px !important; padding-bottom: 8px !important; }
html.ds #device.keyboard-open > .cg-play :is(.cg-tokens, .cg-reveal, .cg-lives, .cg-speed-word, .cg-dock-top) { display: none; }
html.ds #device.keyboard-open > .cg-play .cg-ticket { gap: 4px; padding: 8px 14px; }
html.ds #device.keyboard-open > .cg-play :is(.cg-ticket-mark, .cg-postmark, .cg-gift-bow) { display: none; }
html.ds #device.keyboard-open > .cg-play .cg-ticket.has-postmark .cg-ticket-kind { margin-bottom: 0; }
html.ds #device.keyboard-open > .cg-play .cg-ticket .cg-ticket-line { font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); }
html.ds #device.keyboard-open > .cg-play .cg-ticket-poster .cg-ticket-line, html.ds #device.keyboard-open > .cg-play .cg-ticket .cg-ticket-line.is-lead { font: 600 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds #device.keyboard-open > .cg-play .cg-emoji > span { width: 40px; height: 40px; font-size: calc(22 * var(--type-unit)); }
html.ds #device.keyboard-open > .cg-play .cg-pt-frame { width: 58px; }
html.ds #device.keyboard-open > .cg-play .cg-monogram { min-width: 36px; height: 36px; }
html.ds #device.keyboard-open > .cg-play .cg-host { flex: 0 0 72px; min-height: 0; }
html.ds #device.keyboard-open > .cg-play .cg-bubble { padding: 8px 14px; }
html.ds #device.keyboard-open > .cg-play .cg-clues { min-height: 84px; padding-bottom: 8px; }
html.ds #device.keyboard-open > .cg-play .cg-clue-text { font: 600 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-headline); padding: 10px 14px; }
html.ds #device.keyboard-open > .cg-play .cg-guess { grid-template-columns: minmax(0, 1fr) auto; }
html.ds #device.keyboard-open > .cg-play .cg-guess-button { width: auto; min-width: 104px; min-height: 56px; }
html.ds #device.keyboard-open > .cg-play .cg-guess-button .cg-btn-face { min-height: 50px; }
html.ds[data-keyboard-room="tight"] #device.keyboard-open > .cg-play .cg-host { display: none; }
html.ds[data-keyboard-room="tight"] #device.keyboard-open > .cg-play .cg-header { min-height: 44px; }

/* THE IN-GAME KEYBOARD (13 November 2026, the owner: with the iPhone's keyboard up the films list covered the riddle). On a touch
   screen the Cryptic types on the keys the other three games use (game-shell.js; cryptic-premium.js keys()). A tap on the field
   brings them up at the foot of the play screen (.is-keys); a tap elsewhere puts them away. With them up the screen is what it was
   with the iPhone's keyboard up (the rules above, the same compaction), and the films list sits in the column between the clue and
   the field, never over the clue's words (cryptic-premium.js keysListRoom). Nothing here applies with the keys down. */
html.ds #device > .screen.cg-play.is-keys { gap: 8px; padding-bottom: 0 !important; }
html.ds .cg-play.is-keys :is(.cg-tokens, .cg-reveal, .cg-lives, .cg-speed-word, .cg-dock-top, .cg-past) { display: none; }
html.ds .cg-play.is-keys .cg-score .cg-speed-cap { display: none; }
html.ds .cg-play.is-keys .cg-ticket { gap: 4px; padding: 8px 14px; }
html.ds .cg-play.is-keys :is(.cg-ticket-mark, .cg-postmark, .cg-gift-bow) { display: none; }
html.ds .cg-play.is-keys .cg-ticket.has-postmark .cg-ticket-kind { margin-bottom: 0; }
html.ds .cg-play.is-keys .cg-emoji > span { width: 40px; height: 40px; font-size: calc(22 * var(--type-unit)); }
html.ds .cg-play.is-keys .cg-pt-frame { width: 58px; }
html.ds .cg-play.is-keys .cg-monogram { min-width: 36px; height: 36px; }
html.ds .cg-play.is-keys .cg-host { flex: 0 0 64px; min-height: 0; }
html.ds .cg-play.is-keys .cg-bubble { padding: 8px 14px; }
html.ds .cg-play.is-keys .cg-clues { flex: 1 1 0; min-height: 48px; padding-bottom: 8px; }
/* the clue's words at the top of their ticket: the list opening and closing under them never moves them */
html.ds .cg-play.is-keys .cg-clue-card .cg-clue-text { align-self: start; padding-top: 10px; }
html.ds .cg-play.is-keys .cg-clue-card .cg-clue-stub { align-content: start; padding-top: 10px; }
html.ds .cg-play.is-keys .cg-clue-card .cg-ticket > :is(:first-child, .cg-ticket-mark + *, .cg-postmark + *, .cg-gift-bow + *) { margin-top: 0; }
/* while the list is open Flick's row steps aside for it (his line comes back with the list closed: a miss, a pick) */
html.ds .cg-play.is-keys:has(.cg-suggest:not([hidden])) .cg-host { display: none; }
/* the field and Guess on one row; the list above them, in the column (not over the clue) */
html.ds .cg-play.is-keys .cg-guess { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
html.ds .cg-play.is-keys .cg-guess > .cg-field { grid-row: 2; grid-column: 1; }
html.ds .cg-play.is-keys .cg-guess > .cg-guess-button { grid-row: 2; grid-column: 2; width: auto; min-width: 104px; min-height: 56px; }
html.ds .cg-play.is-keys .cg-guess-button .cg-btn-face { min-height: 50px; }
html.ds .cg-room.cg-play.is-keys .cg-suggest { position: static; grid-row: 1; grid-column: 1 / -1; box-shadow: 0 6px 14px var(--cg-shadow); }
/* the field the keys type into and the keys' own colours: commute-corner.css ("the Daily Cryptic's keys") */
/* a short column (an SE at x1.35): two rows of films would leave the clue's words too little room, so while the list is open the
   clue's type steps down (is-keys-snug), then the points row steps aside (is-keys-bare); both come back as the list closes */
html.ds .cg-play.is-keys.is-keys-snug :is(.cg-ticket .cg-ticket-line, .cg-clue-text) { font-size: calc(15 * var(--type-unit)); line-height: calc(20 * var(--type-unit)); letter-spacing: var(--tr-subhead); }
html.ds .cg-play.is-keys.is-keys-snug .cg-ticket-poster .cg-ticket-line { font-size: calc(13 * var(--type-unit)); line-height: calc(18 * var(--type-unit)); }
html.ds .cg-play.is-keys.is-keys-bare .cg-header { display: none; }

/* THE WHOLE CLUE, ALWAYS (10 November 2026, the owner on an iPhone SE: the clue was cut off mid-sentence). cryptic-premium.js
   fitClue steps Flick's row down until the clue and the controls fit: is-snug (Flick small, his line on one short card), then
   is-lean (the row steps aside, as on the tightest keyboard band), then is-tight (Guess beside the field, as with the keyboard
   up); the clue's ticket takes the room. A clue that is still taller
   (the largest text, the keyboard up) scrolls in its own ticket and says so: a fade at its foot until the end has been read, and
   the scroll bar shown. */
html.ds .cg-play.is-snug .cg-host { flex: 0 0 52px; min-height: 0; gap: 10px; }
html.ds .cg-play.is-snug .cg-bubble { padding: 6px 12px; font: 600 calc(14 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); box-shadow: 0 3px 0 var(--cg-paper-edge); }
html.ds .cg-play.is-lean .cg-host { display: none; }
html.ds .cg-play.is-tight .cg-guess { grid-template-columns: minmax(0, 1fr) auto; }
html.ds .cg-play.is-tight .cg-guess-button { width: auto; min-width: 104px; min-height: 56px; }
html.ds .cg-play.is-tight .cg-guess-button .cg-btn-face { min-height: 50px; }
html.ds .cg-play :is(.cg-ticket, .cg-clue-text).is-more { scrollbar-width: thin; scrollbar-color: var(--cg-spool-line) transparent; overscroll-behavior: contain; }
html.ds .cg-play :is(.cg-ticket, .cg-clue-text).is-more::-webkit-scrollbar { display: block; width: 4px; }
html.ds .cg-play :is(.cg-ticket, .cg-clue-text).is-more::-webkit-scrollbar-thumb { background: var(--cg-spool-line); }
html.ds .cg-play :is(.cg-ticket, .cg-clue-text).is-more:not(.is-end) { -webkit-mask: linear-gradient(180deg, black calc(100% - 28px), transparent); mask: linear-gradient(180deg, black calc(100% - 28px), transparent); }
html.ds .cg-play :is(.cg-ticket, .cg-clue-text).is-more:focus-visible { outline: 2px solid var(--c-focus, var(--cg-sky)); outline-offset: -3px; }

/* (10 November 2026, the owner: the "Speed bonus" note "appears and disappears during play, nudging the clue numbers up and down";
   the coordinator: it may cover nothing either) the note keeps its room under the meter all the time: hidden, it still holds its
   place, so nothing moves as it comes and goes. Where the screen cannot spare that room (cryptic-premium.js fitClue is-brief, the
   step before Flick gives way) the room is given up and the note is one short line said in the score row itself, over the points
   and the chip for its few seconds (the chip still takes the tap that puts it away); the whole note stays for VoiceOver. */
html.ds .cg-score .cg-speed-cap[hidden] { display: block; visibility: hidden; }
html.ds .cg-score-line { position: relative; }
html.ds .cg-speed-brief { display: none; }
html.ds .cg-play.is-brief .cg-score .cg-speed-cap { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.ds .cg-play.is-brief .cg-score.is-why .cg-speed-brief { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; white-space: nowrap;
  font: 600 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--cg-cream); }
html.ds .cg-play.is-brief .cg-score.is-why .cg-score-line > :not(.cg-speed-brief) { opacity: 0; }

/* states inside the room (loading, sign-in, error) */
html.ds .cg-room .cryptic-product-state { flex: 1 1 auto; display: grid; align-content: center; justify-items: center; gap: 10px; margin: 0; padding: 20px 8px; border: 0; background: none; box-shadow: none; text-align: center; color: var(--cg-cream); }
html.ds .cg-room .cryptic-product-state h1 { font: 700 calc(28 * var(--type-unit))/calc(34 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-title-1); color: var(--cg-cream); }
html.ds .cg-room .cryptic-product-state p { max-width: 320px; font: 400 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--cg-cream-dim); }
html.ds .cg-room .cryptic-product-state .cryptic-state-symbol { color: var(--cg-cream); }
html.ds .cg-room .cryptic-product-state :is(.primary-button, .quiet-button) { width: min(100%, 320px); margin-top: 6px; }

/* ------------------------------------------------------------------ result */
html.ds .cg-result-body { display: grid; gap: 14px; padding-bottom: 8px; }
html.ds .cg-result-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; text-align: left; }
html.ds .cg-spool-result { width: 84px; }
html.ds .cg-result-hero .sps-art.cg-spool-result { width: 84px; }
html.ds .cg-result-words { display: grid; gap: 2px; justify-items: start; }
html.ds .cg-result-words .cg-kicker { justify-content: flex-start; }
html.ds .cg-result-headline { font: 700 calc(28 * var(--type-unit))/calc(34 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-title-1); color: var(--cg-cream); text-shadow: 0 3px 0 var(--cg-shadow); text-wrap: balance; }
html.ds .cg-result-sub { font: 400 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--cg-cream-dim); text-wrap: balance; }
html.ds .cg-answer { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px; border-radius: 20px; background: var(--cg-paper); color: var(--cg-ink); box-shadow: 0 6px 0 var(--cg-paper-edge), 0 16px 26px var(--cg-shadow); }
html.ds .cg-answer-words { min-width: 0; }
html.ds .cg-answer-art { display: grid; place-items: center; width: 96px; aspect-ratio: 2 / 3; border-radius: 10px; background: var(--cg-bg-mid) center / cover no-repeat; rotate: -3deg; box-shadow: 0 6px 14px var(--cg-shadow); }
html.ds .cg-answer-art.is-empty .cg-icon { width: 48px; height: 48px; }
/* the end of the puzzle (owner, 9 October 2026, 22:00): the poster arrives as the round showed it, at the poster clue's
   one blur, and comes into focus with a short moment: the blur clears as the poster settles from a little closer. Under
   Reduce Motion it is simply sharp. */
html.ds .cg-answer-art { position: relative; overflow: hidden; }
html.ds .cg-answer-blur { position: absolute; inset: -12px; background: center / cover no-repeat; filter: blur(6px); opacity: 0; }
html.ds .cg-result.cg-celebrate .cg-answer-blur { animation: cg-fade-out var(--motion-ceremony) var(--motion-curve) calc(520ms + var(--cg-age, 0ms)) both; }
html.ds .cg-result.cg-celebrate .cg-answer-art:has(.cg-answer-blur) { animation: cg-sharpen var(--motion-ceremony) var(--motion-spring) calc(420ms + var(--cg-age, 0ms)) both; }
html.ds .cg-answer small { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--cg-mint); font: 700 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--cg-ink); }
html.ds .cg-result.is-failed .cg-answer small { background: var(--cg-lilac); }
html.ds .cg-answer h2 { margin-top: 8px; font: 700 calc(22 * var(--type-unit))/calc(28 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-title-2); color: var(--cg-ink); overflow-wrap: anywhere; text-wrap: balance; }
html.ds .cg-answer p { margin-top: 2px; font: 500 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--cg-ink-soft); }
html.ds .cg-scoreboard { display: grid; justify-items: center; gap: 8px; padding: 14px; border-radius: 20px; background: var(--cg-panel); box-shadow: inset 0 0 0 1px var(--cg-panel-line); text-align: center; }
html.ds .cg-final { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; }
/* the points' info button: the receipt opens in a sheet (owner, 9 October 2026, 22:00: "0 points (i)") */
html.ds .cg-room .cg-points-info { position: relative; align-self: center; display: grid; place-items: center; width: 32px; height: 32px; margin: 0 0 0 -2px; padding: 0; border: 0; border-radius: 50%; background: var(--cg-panel-strong); box-shadow: inset 0 0 0 1px var(--cg-panel-line); color: var(--cg-cream); cursor: pointer; }
html.ds .cg-room .cg-points-info::before { content: ""; position: absolute; inset: -6px; }
html.ds .cg-room .cg-points-info svg { width: 18px; height: 18px; }
html.ds .cg-final strong { font: 700 calc(34 * var(--type-unit))/calc(41 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-large-title); font-variant-numeric: tabular-nums; color: var(--cg-pop); text-shadow: 0 3px 0 var(--cg-shadow); }
html.ds .cg-final span { font: 600 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--cg-cream); }
html.ds .cg-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 999px; background: var(--cg-pop); color: var(--cg-ink); font: 700 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); box-shadow: 0 3px 0 var(--cg-pop-deep); }
html.ds .cg-badge .cg-icon { width: 20px; height: 20px; }
html.ds .cg-badge .cg-icon .i-pop { fill: var(--cg-ink); }
html.ds .cg-result-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
html.ds .cg-result-chips li { padding: 4px 11px; border-radius: 999px; background: var(--cg-panel); box-shadow: inset 0 0 0 1px var(--cg-panel-line); font: 400 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--cg-cream); }
html.ds .cg-result-chips b { font-weight: 700; }
html.ds .cg-grid { display: flex; gap: 6px; font: 400 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--font-ui); color: var(--cg-cream-dim); }
html.ds .cg-grid i { font-style: normal; }
html.ds .cg-grid i.is-solved { color: var(--cg-mint); }
html.ds .cg-grid i.is-used { color: var(--cg-pop); }
/* THE GOLDEN TICKET (lane NIGHT, 10 October 2026; record hub/docs/NIGHT-2026-10-10.md): a perfect solve (the first
   clue, no wrong guess; cryptic-premium.js goldenTicket) is printed on gold, in the Perfect solve badge's place. A
   ticket: two half-round notches cut by a mask (no colour has to match what is behind it) and its edge drawn inside
   it, so nothing outside the ticket is lit or cut. It pops in once on the score's beat, one band of light crosses it
   once, then it is still (no loop). Reduce Motion: simply there (the room's own rule). The grid's solving clue is a
   gold star. */
html.ds .cg-grid i.is-golden { color: var(--cg-pop); }
html.ds .cg-golden { display: grid; justify-items: center; max-width: 100%; margin: 2px 0; }
html.ds .cg-golden-face {
  position: relative; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; box-sizing: border-box; min-height: 54px;
  padding: 8px 24px 9px 22px; border-radius: 10px; overflow: hidden; isolation: isolate; rotate: -2deg;
  background: linear-gradient(115deg, var(--cg-pop-hi), var(--cg-pop) 46%, var(--cg-pop-deep)); color: var(--cg-ink);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.12), inset 0 0 0 1.5px rgba(255,255,255,.5), inset 0 0 0 5px rgba(0,0,0,.06);
  -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 96%, rgba(0,0,0,1) 100%) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 96%, rgba(0,0,0,1) 100%) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 7px at 0 50%, transparent 96%, rgba(0,0,0,1) 100%) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 96%, rgba(0,0,0,1) 100%) right / 51% 100% no-repeat;
}
html.ds .cg-golden-star { flex: none; width: 24px; height: 24px; fill: var(--cg-ink); }
html.ds .cg-golden-words { display: grid; min-width: 0; text-align: left; }
html.ds .cg-golden-words b { font: 700 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-headline); }
html.ds .cg-golden-words small { font: 600 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--cg-ink); overflow-wrap: anywhere; }
html.ds .cg-golden-sheen { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 46%; pointer-events: none; opacity: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.55) 50%, rgba(255,255,255,0)); }
html.ds .cg-result.cg-celebrate .cg-golden { animation: cg-count-pop var(--motion-slow) var(--motion-spring) calc(1500ms + var(--cg-age, 0ms)) both; }
html.ds .cg-result.cg-celebrate .cg-golden-sheen { animation: cg-golden-sheen var(--motion-ceremony) var(--motion-curve) calc(2060ms + var(--cg-age, 0ms)) 1 both; }
@keyframes cg-golden-sheen { 0% { opacity: 0; transform: translateX(-120%); } 16% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; transform: translateX(240%); } }
/* Flick's best spin: his cheer, turning once on the spot with a little lift, as the ticket lands */
html.ds .cg-spool-result.cg-spool-perfect { transform-origin: 50% 62%; }
html.ds .cg-result.cg-celebrate .cg-spool-result.cg-spool-perfect { animation: cg-spin-once var(--motion-ceremony) var(--motion-spring) calc(1500ms + var(--cg-age, 0ms)) 1 both; }
@keyframes cg-spin-once { 0% { transform: perspective(480px) translateY(0) rotateY(0deg); } 45% { transform: perspective(480px) translateY(-10px) rotateY(200deg); } 100% { transform: perspective(480px) translateY(0) rotateY(360deg); } }
/* speed rating under the points */
html.ds .cg-rating { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px 4px 7px; border-radius: 999px; background: var(--cg-sky); color: var(--cg-ink); font: 700 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); box-shadow: 0 3px 0 var(--cg-sky-deep); }
html.ds .cg-rating .cg-icon { width: 16px; height: 16px; }
html.ds .cg-rating .cg-icon .i-pop { fill: var(--cg-ink); }
html.ds .cg-rating small { font: 600 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); font-variant-numeric: tabular-nums; }

/* the world ranking: your exact place among everyone who has finished today, live */
html.ds .cg-worldrank { display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: var(--cg-panel-deep); box-shadow: inset 0 0 0 1px var(--cg-panel-line); }
html.ds .cg-wr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html.ds .cg-wr-head > h2 { display: inline-flex; align-items: center; gap: 6px; font: 700 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--cg-pop); }
html.ds .cg-wr-head > h2 .cg-icon { width: 20px; height: 20px; }
html.ds .cg-wr-place { display: grid; gap: 2px; justify-items: center; text-align: center; }
html.ds .cg-wr-rank { font: 700 calc(34 * var(--type-unit))/calc(41 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-large-title); font-variant-numeric: tabular-nums; color: var(--cg-cream); text-shadow: 0 3px 0 var(--cg-shadow); }
html.ds .cg-wr-rank sup { font: 700 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--font-ui); vertical-align: baseline; position: relative; top: -.6em; margin-left: 1px; color: var(--cg-pop); }
html.ds .cg-wr-of { font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--cg-cream); }
html.ds .cg-wr-of b { font-weight: 700; font-variant-numeric: tabular-nums; }
html.ds .cg-wr-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
html.ds .cg-wr-chips > li { padding: 4px 11px; border-radius: 999px; background: var(--cg-panel); box-shadow: inset 0 0 0 1px var(--cg-panel-line); font: 400 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--cg-cream); }
html.ds .cg-wr-chips > li b { font-weight: 700; font-variant-numeric: tabular-nums; }
html.ds .cg-wr-chips > li.is-top { background: var(--cg-mint); color: var(--cg-ink); box-shadow: 0 3px 0 var(--cg-mint-deep); font-weight: 700; }
html.ds .cg-wr-note { font: 400 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--cg-cream-dim); text-align: center; text-wrap: balance; }
html.ds .cg-wr-note strong { font-weight: 700; color: var(--cg-cream); }
/* the ranking, locked (a free player): the app's one locked line (membership.css .tm-locked-line, .tm-seal, .tm-lock-chip)
   in this room's colours. Where the place would be there is this line and nothing else: no number, no blur.
   (#device: the lock treatment is scoped under #device, and these place it here.) */
html.ds #device .cg-wr-locked { min-height: 60px; padding: 10px 10px 10px 12px; border-radius: 14px; background: var(--cg-panel); box-shadow: inset 0 0 0 1px var(--cg-panel-line), 0 4px 0 var(--cg-shadow); color: var(--cg-cream); font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); -webkit-tap-highlight-color: transparent; }
html.ds #device .cg-wr-locked > span:nth-child(2) { text-wrap: balance; }
html.ds #device .cg-wr-locked small { color: var(--cg-cream-dim); font: 400 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds #device .cg-wr-locked > i { color: var(--cg-cream-dim); }
html.ds #device .cg-wr-locked:focus-visible { outline: 2px solid var(--cg-pop); outline-offset: 2px; }
html.ds #device .cg-wr-seal { width: 38px; height: 38px; border-radius: 10px; }
html.ds #device .cg-wr-seal svg { width: 18px; height: 18px; }
html.ds #device .cg-wr-head .tm-lock-chip { flex: none; }
/* how today's players did: one bar per clue, then the ones it got away from; yours is lit */
html.ds .cg-dist { display: grid; gap: 6px; }
html.ds .cg-dist > h3 { font: 600 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--cg-cream-dim); text-align: center; }
html.ds .cg-dist-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 6px; height: 84px; }
html.ds .cg-dist-bars > li { display: grid; grid-template-rows: 16px minmax(0, 1fr) 16px; justify-items: center; gap: 2px; height: 100%; min-width: 0; }
html.ds .cg-dist-n { font: 700 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-1); font-variant-numeric: tabular-nums; color: var(--cg-cream); }
html.ds .cg-dist-col { position: relative; align-self: stretch; justify-self: stretch; border-radius: 10px; background: var(--cg-panel); overflow: hidden; }
html.ds .cg-dist-col > i { position: absolute; inset: 0; border-radius: 0; background: var(--cg-lilac); transform-origin: 50% 100%; transform: scaleY(var(--cg-bar, 0)); transition: transform var(--motion-slow) var(--motion-curve); }
html.ds .cg-dist-bars > li.is-you .cg-dist-col > i { background: var(--cg-pop); }
html.ds .cg-dist-bars > li.is-you .cg-dist-n { color: var(--cg-pop); }
/* "None · you" is wider than its sixth of the row on a 375pt phone and broke on to a second line, under the bars
   (readiness review CG4). A label stays on one line; it is centred on its bar and may reach into the gap beside it. */
html.ds .cg-dist-k { font: 600 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--cg-cream-dim); white-space: nowrap; }
html.ds .cg-dist-bars > li.is-you .cg-dist-k { color: var(--cg-pop); font-weight: 700; }
html.ds .cg-wr-figures { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font: 400 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--cg-cream-dim); }
html.ds .cg-wr-figures b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cg-cream); }
html.ds .cg-wr-asof { font: 400 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-1); font-variant-numeric: tabular-nums; color: var(--cg-cream-dim); }

/* the receipt: how the points were worked out, line by line, on a strip torn from the till */
html.ds .cg-receipt {
  display: grid; gap: 6px; padding: 16px 16px 20px; background: var(--cg-paper); color: var(--cg-ink); border-radius: 10px 10px 0 0;
  -webkit-mask: linear-gradient(black 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at 50% 100%, transparent 0 90deg, black 0) bottom / 14px 8px repeat-x;
  mask: linear-gradient(black 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from 135deg at 50% 0, black 0 90deg, transparent 0) bottom / 14px 8px repeat-x;
  filter: drop-shadow(0 6px 0 var(--cg-shadow));
}
html.ds .cg-receipt > h2 { font: 700 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-1); text-transform: uppercase; color: var(--cg-ink-soft); text-align: center; }
html.ds .cg-receipt-lines { display: grid; gap: 4px; padding: 8px 0; border-top: 2px dashed var(--cg-paper-edge); border-bottom: 2px dashed var(--cg-paper-edge); }
html.ds .cg-receipt-lines > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--cg-ink); }
html.ds .cg-receipt-lines > li > b { font: 700 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); font-variant-numeric: tabular-nums; }
html.ds .cg-receipt-lines > li > small { grid-column: 1 / -1; font: 500 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--cg-ink-soft); }
html.ds .cg-receipt-lines > li.is-plus > b { color: var(--cg-plus); }
html.ds .cg-receipt-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px; font: 700 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--cg-ink); }
html.ds .cg-receipt-total > b { font: 700 calc(22 * var(--type-unit))/calc(28 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-title-2); font-variant-numeric: tabular-nums; }
html.ds .cg-receipt-foot { font: 500 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--cg-ink-soft); text-align: center; }
html.ds [data-notify-slot]:empty { display: none; }
/* a live refresh redraws these in place: their arrival plays once, with the screen */
html.ds .cg-result.cg-celebrate .cg-settled.cg-settled { animation: none; }

html.ds .cg-room :is(.cg-rank, .cg-unranked) {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; margin: 0; padding: 12px 14px; border: 0; border-radius: 20px;
  background: var(--cg-panel); box-shadow: inset 0 0 0 1px var(--cg-panel-line); color: var(--cg-cream); text-align: left;
}
html.ds .cg-room :is(.cg-rank, .cg-unranked) > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cg-pop); color: var(--cg-ink); font-weight: 700; }
html.ds .cg-room .cg-unranked > span { background: var(--cg-panel-strong); color: var(--cg-cream); }
html.ds .cg-room :is(.cg-rank, .cg-unranked) > div { display: grid; gap: 1px; min-width: 0; }
html.ds .cg-room :is(.cg-rank, .cg-unranked) small { font: 600 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--cg-pop); }
html.ds .cg-room :is(.cg-rank, .cg-unranked) strong { font: 700 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--cg-cream); }
html.ds .cg-room :is(.cg-rank, .cg-unranked) em { font: 400 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); font-style: normal; letter-spacing: var(--tr-footnote); color: var(--cg-cream-dim); }
html.ds .cg-room .cg-rank > b { font: 700 calc(20 * var(--type-unit))/1 var(--font-ui); color: var(--cg-cream-dim); }
html.ds .cg-verify { display: grid; gap: 4px; padding: 12px 14px; border-radius: 20px; background: var(--cg-panel); box-shadow: inset 0 0 0 1px var(--cg-panel-line); }
html.ds .cg-verify-note { font: 400 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--cg-cream-dim); }
html.ds .cg-verify-note:first-child { font-weight: 600; color: var(--cg-cream); }
html.ds .cg-verify .cg-link { justify-self: start; padding-left: 0; }
html.ds .cg-result-actions { display: grid; gap: 10px; }
html.ds .cg-result-actions .cg-link { justify-self: center; }
html.ds .cg-next { padding: 4px 0 6px; }
html.ds .cg-home { display: grid; padding-bottom: 6px; }

/* the ceremony: plays once, for a finish just watched. --cg-age (a negative time, set when the client redraws the result
   mid-ceremony) lets a redraw continue each animation where it was instead of starting it again. */
html.ds .cg-result.cg-celebrate .cg-result-headline { animation: cg-headline-in var(--motion-slow) var(--motion-spring) calc(80ms + var(--cg-age, 0ms)) both; }
html.ds .cg-result.cg-celebrate .cg-answer { animation: cg-card-in var(--motion-slow) var(--motion-spring) calc(220ms + var(--cg-age, 0ms)) both; }
html.ds .cg-result.cg-celebrate .cg-scoreboard { animation: cg-rise var(--motion-slow) var(--motion-spring) calc(360ms + var(--cg-age, 0ms)) both; }
html.ds .cg-result.cg-celebrate .cg-badge { animation: cg-count-pop var(--motion-slow) var(--motion-spring) calc(1500ms + var(--cg-age, 0ms)) both; }
html.ds .cg-result.cg-celebrate :is(.cg-worldrank, .cg-run) { animation: cg-rise var(--motion-slow) var(--motion-spring) calc(520ms + var(--cg-age, 0ms)) both; }
/* the week's entrance (it is shown only here): today's day lights as the card arrives, once */
html.ds .cg-result.cg-celebrate .cg-run.is-fresh .cg-day.is-today.is-played > span { animation: cg-count-pop var(--motion-slow) var(--motion-spring) calc(1100ms + var(--cg-age, 0ms)) both; }
html.ds .cg-result.cg-celebrate .cg-run.is-fresh .cg-week-line { animation: cg-rise var(--motion-normal) var(--motion-spring) calc(1300ms + var(--cg-age, 0ms)) both; }
html.ds .cg-confetti { position: absolute; z-index: 60; left: 50%; top: 30%; width: 0; height: 0; pointer-events: none; }
html.ds .cg-bit { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--cg-paper); opacity: 0; animation: cg-burst 1.9s var(--motion-curve) var(--w, 0ms) both; }
html.ds .cg-bit.is-s { clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); border-radius: 0; width: 16px; height: 16px; }
html.ds .cg-bit.is-t { width: 16px; height: 9px; border-radius: 0; }
html.ds .cg-bit.is-d { width: 8px; height: 8px; }
html.ds .cg-bit.is-c0 { background: var(--cg-pop); }
html.ds .cg-bit.is-c1 { background: var(--cg-paper); }
html.ds .cg-bit.is-c2 { background: var(--cg-coral); }
html.ds .cg-bit.is-c3 { background: var(--cg-mint); }

/* the archive and the worldwide board live in the same room: their existing rows, in the room's colours */
html.ds #device > .screen.cg-room.cg-sub {
  --c-label-1: var(--cg-cream); --c-label-2: var(--cg-cream-dim); --c-label-3: var(--cg-cream-dim); --c-label-4: var(--cg-panel-line);
  --c-line: var(--cg-panel-line); --c-line-strong: var(--cg-panel-line); --c-stage: var(--cg-bg-deep); --c-stage-raised: var(--cg-panel-deep); --c-fill-1: var(--cg-panel); --c-fill-2: var(--cg-panel-strong);
  --cryptic-ink: var(--cg-cream); --cryptic-muted: var(--cg-cream-dim); --cryptic-line: var(--cg-panel-line); --cryptic-line-strong: var(--cg-panel-line);
  gap: 14px;
}
html.ds .cg-sub .cryptic-page-heading { display: grid; gap: 4px; margin: 0; padding: 0; text-align: left; }
html.ds .cg-sub .cryptic-section-kicker { font: 700 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--cg-pop); text-transform: none; }
html.ds .cg-sub .cryptic-page-heading h1 { font: 700 calc(28 * var(--type-unit))/calc(34 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-title-1); color: var(--cg-cream); }
html.ds .cg-sub .cryptic-page-heading p { font: 400 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--cg-cream-dim); }
html.ds .cg-sub .cryptic-archive-list { display: grid; gap: 10px; margin: 0; padding: 0; }
html.ds .cg-room.cg-sub .cryptic-archive-list > button { margin: 0; border: 0; border-radius: 20px; background: var(--cg-panel); box-shadow: inset 0 0 0 1px var(--cg-panel-line); color: var(--cg-cream); }
html.ds .cg-room.cg-sub .cryptic-archive-list > button[data-ds-state="solved"] .cryptic-archive-copy small { background: var(--cg-mint); color: var(--cg-ink); }
html.ds .cg-room.cg-sub .cryptic-archive-list > button[data-ds-state="played"] .cryptic-archive-copy small { background: var(--cg-lilac); color: var(--cg-ink); }
html.ds .cg-room.cg-sub .cryptic-archive-date { background: var(--cg-pop); color: var(--cg-ink); box-shadow: 0 3px 0 var(--cg-pop-deep); }
html.ds .cg-room.cg-sub .cryptic-archive-date b { color: var(--cg-ink); text-shadow: none; }
html.ds .cg-room.cg-sub .cryptic-archive-more { display: grid; }
html.ds .cg-room.cg-sub :is(.cryptic-rank-hero, .cryptic-leaderboard-row) { border: 0; background: var(--cg-panel); box-shadow: inset 0 0 0 1px var(--cg-panel-line); color: var(--cg-cream); }
html.ds .cg-room.cg-sub .cryptic-rank-hero > strong { color: var(--cg-pop); }
html.ds .cg-room.cg-sub .cryptic-leaderboard-row.is-viewer { background: var(--cg-paper); color: var(--cg-ink); --c-label-1: var(--cg-ink); --c-label-2: var(--cg-ink-soft); --c-label-3: var(--cg-ink-soft); --cryptic-ink: var(--cg-ink); --cryptic-muted: var(--cg-ink-soft); }
html.ds .cg-room.cg-sub .cryptic-leaderboard-row.is-viewer :is(b, strong, small, em) { color: var(--cg-ink); }
html.ds .cg-room.cg-sub .cryptic-worldwide-note { color: var(--cg-cream-dim); }
html.ds .cg-room .quiet-button { color: var(--cg-cream); }

/* the How it works sheet, in the room's colours */
html.ds .ds-how.cg-scope { --c-label-1: var(--cg-cream); --c-label-2: var(--cg-cream-dim); --c-label-3: var(--cg-cream-dim); --c-line: var(--cg-panel-line); --c-label-4: var(--cg-panel-line); }
html.ds .ds-how.cg-scope .ds-how-panel { max-height: calc(100% - 48px); overflow-y: auto; background: linear-gradient(180deg, var(--cg-bg-mid), var(--cg-bg-top)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 var(--cg-panel-line), var(--e-3); }
html.ds .ds-how.cg-scope .ds-how-line b { color: var(--cg-pop); }
html.ds .ds-how.cg-scope .ds-how-done { background: var(--cg-pop); color: var(--cg-ink); box-shadow: 0 5px 0 var(--cg-pop-deep); font-weight: 700; }
html.ds .ds-how.cg-scope .cryptic-how-report { color: var(--cg-cream); }

/* ------------------------------------------------------------------ the Rituals card on Discover: the room in miniature */
html.ds .ds-tn-card.is-cryptic.cg-mini {
  color: var(--cg-cream);
  background: radial-gradient(90% 60% at 50% 46%, var(--cg-glow-warm), transparent 72%), radial-gradient(100% 50% at 50% 110%, var(--cg-glow-rose), transparent 72%), linear-gradient(168deg, var(--cg-bg-top), var(--cg-bg-mid) 52%, var(--cg-bg-low));
  box-shadow: inset 0 0 0 1px var(--cg-panel-line), inset 0 1px 0 rgba(255, 255, 255, .16), 0 14px 30px rgba(0, 0, 0, .4);
}
html.ds .ds-tn-card.cg-mini .ds-tn-title { color: var(--cg-cream); }
html.ds .ds-tn-card.cg-mini .ds-tn-line { color: var(--cg-cream); font-weight: 600; }
html.ds .ds-tn-card.is-cryptic.cg-mini .ds-tn-cta { color: var(--cg-ink); background: linear-gradient(180deg, var(--cg-pop-hi), var(--cg-pop) 52%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 0 var(--cg-pop-deep); }
html.ds .cg-mini-glow { position: absolute; left: 50%; bottom: 0; width: 120px; height: 22px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, var(--cg-glow-warm), transparent); }
html.ds .cg-mini-spool { position: absolute; left: 50%; bottom: 2px; height: min(100%, 104px); translate: -50% 0; }
html.ds .cg-mini-run { position: absolute; right: -2px; top: 0; display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px 3px 5px; border-radius: 999px; background: var(--cg-panel-deep); box-shadow: inset 0 0 0 1px var(--cg-panel-line); }
html.ds .cg-mini-run .cg-icon { width: 18px; height: 18px; rotate: -10deg; }
html.ds .cg-mini-run.is-risk .cg-icon { filter: saturate(.5) opacity(.85); }
html.ds .cg-mini-run b { font: 700 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); color: var(--cg-pop); }
html.ds .ds-tn-card.cg-mini:active .cg-mini-spool { scale: 1.04; }

/* ------------------------------------------------------------------ yesterday's answer: ONE quiet row on the landing
   (owner, 6 October 2026). The last thing on the page, below the fold on a small phone; a slim row with a hairline, never a
   second card. The poster thumbnail, "Yesterday: <film> (year)", how the world did and how the reader did. */
html.ds .cg-yest-slot:empty { display: none; }
html.ds .cg-room .cg-yest {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; min-height: 56px; margin: 0; padding: 8px 10px 8px 12px;
  border: 0; border-radius: 14px; background: var(--cg-panel); box-shadow: inset 0 0 0 1px var(--cg-panel-line); color: var(--cg-cream); text-align: left;
}
/* the thumbnail is a little print: square corners, a cream edge, pinned a touch off true */
html.ds .cg-yest-art { display: grid; place-items: center; width: 30px; aspect-ratio: 2 / 3; margin: 2px; background: var(--cg-bg-deep) center / cover no-repeat; box-shadow: 0 0 0 2px var(--cg-cream), 0 3px 8px var(--cg-shadow); rotate: -3deg; }
html.ds .cg-yest-art.is-empty .cg-icon { width: 22px; height: 22px; }
html.ds .cg-yest-art.is-sealed { background: var(--cg-pop); }
html.ds .cg-yest-art.is-sealed > b { font: 700 calc(20 * var(--type-unit))/calc(25 * var(--type-unit)) var(--font-ui); color: var(--cg-ink); }
html.ds .cg-yest-copy { display: grid; gap: 1px; min-width: 0; }
html.ds .cg-yest-copy > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--cg-cream); }
html.ds .cg-yest-when, html.ds .cg-yest-year { font-weight: 500; color: var(--cg-cream-dim); }
html.ds .cg-yest-copy > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--cg-cream-dim); }
html.ds .cg-yest-copy > small.cg-yest-you { font-weight: 600; color: var(--cg-cream); }
html.ds :is(.cg-yest-go, .cg-bridge-go) { display: grid; place-items: center; width: 20px; height: 20px; color: var(--cg-cream-dim); }
html.ds :is(.cg-yest-go, .cg-bridge-go, .cg-answer-go) > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.ds .cg-room .cg-yest.ds-pressed { scale: .985 !important; }

/* ------------------------------------------------------------------ the result: the poster opens the film's page */
html.ds .cg-room button.cg-answer-art { padding: 0; border: 0; color: var(--cg-ink); cursor: pointer; }
html.ds .cg-answer-go { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cg-ink); color: var(--cg-cream); }
html.ds .cg-answer-go > svg { width: 12px; height: 12px; stroke-width: 2.2; }

/* ------------------------------------------------------------------ from the game to the product, under the film
   Owner, 9 October 2026, 22:00: under "This edition's film: <title>", two buttons: "Add to Watchlist" (it toggles to
   "Added") and "Start a TRIPTIC: 3 films like this". Inside the film's paper card, full width, one under the other. */
html.ds .cg-bridge { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 2px; }
html.ds .cg-room :is(.cg-bridge-save, .cg-bridge-main) {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 48px; margin: 0; padding: 8px 14px; border: 0; border-radius: 14px;
  font: 700 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); text-align: center; cursor: pointer;
}
html.ds .cg-room .cg-bridge-save { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cg-paper-edge); color: var(--cg-ink); }
html.ds .cg-room .cg-bridge-main { background: var(--cg-ink); color: var(--cg-cream); box-shadow: 0 4px 0 var(--cg-shadow); }
html.ds .cg-room :is(.cg-bridge-save, .cg-bridge-main) > span { min-width: 0; text-wrap: balance; }
html.ds .cg-bridge-save > svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
html.ds .cg-room .cg-bridge-save.is-saved { background: var(--cg-mint); box-shadow: none; }
html.ds .cg-bridge-save.is-saved > svg { fill: currentColor; }
/* TRIPTIC's own mark in the room's colours: three small cards, fanned */
html.ds .cg-bridge-three { display: block; flex: 0 0 auto; width: 30px; height: 26px; overflow: visible; }
html.ds .cg-bridge-three .b-shade { fill: black; opacity: .3; }
html.ds .cg-bridge-three .b-l { fill: var(--cg-coral); }
html.ds .cg-bridge-three .b-c { fill: var(--cg-pop); }
html.ds .cg-bridge-three .b-r { fill: var(--cg-sky); }
html.ds .cg-bridge-three .b-line { fill: none; stroke: var(--cg-ink); stroke-width: 1.6; stroke-linecap: round; opacity: .5; }
html.ds .cg-room :is(.cg-bridge-main, .cg-bridge-save).ds-pressed { scale: .985 !important; }

/* the room's sheets (How it works; How your points were worked out): once risen, the panel's arrival animation lets go,
   so the sheet drag can move it and the scrim can fade with it */
html.ds .ds-how.cryptic-how.is-open :is(.ds-how-panel, .ds-how-scrim) { animation: none; }
html.ds .ds-how.cryptic-how .ds-how-panel { touch-action: pan-y; }
html.ds .ds-how.cryptic-points .cg-receipt { flex: 0 0 auto; align-content: start; margin: 6px 0 14px; }
html.ds .ds-how.cryptic-points .cg-receipt-lines { padding-top: 0; border-top: 0; }
html.ds .ds-how.cryptic-points .cg-receipt > *, html.ds .ds-how.cryptic-points .cg-receipt-lines > li { margin: 0; }

/* ------------------------------------------------------------------ size classes (device-fit) */
html.ds[data-device-h="compact"] #device > .screen.cg-landing { gap: 8px; }
html.ds[data-device-h="compact"] .cg-headline { padding: 13px 10px 11px; }
html.ds[data-device-w="wide"]:not([data-device-h="compact"]) .cg-headline:not(.is-two) { font-size: calc(34 * var(--type-unit)); line-height: calc(40 * var(--type-unit)); letter-spacing: var(--tr-large-title); }
html.ds[data-device-h="compact"] .cg-stage { min-height: 96px; }
html.ds[data-device-h="compact"] .cg-landing .cg-hero { gap: 6px; }
html.ds[data-device-h="compact"] .cg-landing .cg-foot { display: none; }
html.ds[data-device-h="compact"] .cg-ticket { gap: 6px; padding: 12px 14px; }
html.ds[data-device-h="compact"] .cg-pt-frame { width: 84px; }
html.ds[data-device-h="compact"] .cg-pt-copy { gap: 6px; }
html.ds[data-device-h="compact"] .cg-ticket.is-xlong .cg-ticket-line, html.ds[data-device-h="compact"] .cg-ticket .cg-ticket-line.is-lead { font: 600 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds[data-device-h="compact"] .cg-tiles.is-l { --cg-tile: 22px; gap: 6px 10px; }
html.ds[data-device-h="compact"] .cg-tiles.is-m { --cg-tile: 20px; }
html.ds[data-device-h="compact"] .cg-tiles.is-s { --cg-tile: 17px; }
html.ds[data-device-h="compact"] .cg-tiles.is-l .cg-word > b { font-size: calc(13 * var(--type-unit)); }
html.ds[data-device-h="compact"] .cg-emoji > span { width: 46px; height: 46px; }
html.ds[data-device-h="compact"] .cg-play-button { min-height: 62px; }
html.ds[data-device-h="compact"] .cg-play-button .cg-btn-face { min-height: 56px; }
html.ds[data-device-h="compact"] .cg-landing .cg-actions { gap: 6px; }
html.ds[data-device-h="compact"] #device > .screen.cg-play { gap: 8px; }
html.ds[data-device-h="compact"] .cg-host { flex-basis: 56px; min-height: 56px; }
html.ds[data-device-h="compact"] .cg-room .cg-token > :is(button, span) { height: 44px; }
html.ds[data-device-h="compact"] .cg-dock { gap: 8px; }
html.ds[data-device-h="compact"] .cg-play .cg-guess-button { min-height: 58px; }
html.ds[data-device-h="compact"] .cg-play .cg-guess-button .cg-btn-face { min-height: 52px; }
html.ds[data-device-h="tall"] #device > .screen.cg-landing { gap: 16px; }
html.ds[data-device-h="tall"] .cg-poster { height: min(72%, 220px); }
html.ds[data-device-h="tall"] .cg-spool-stage { height: min(78%, 220px); }
html.ds[data-device-h="tall"][data-device-w="wide"] .cg-poster { height: min(72%, 250px); }
html.ds[data-device-h="tall"][data-device-w="wide"] .cg-spool-stage { height: min(78%, 250px); }

/* ------------------------------------------------------------------ motion */
@keyframes cg-lean { 0% { transform: rotate(0deg); } 30%, 80% { transform: rotate(9deg) translateY(-2px); } 100% { transform: rotate(0deg); } }
@keyframes cg-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes cg-jump { from { transform: translateY(0) scaleY(.96); } to { transform: translateY(-13px) scaleY(1.03); } }
@keyframes cg-wobble { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes cg-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.025); } }
@keyframes cg-bulb { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
@keyframes cg-wiggle { 0%, 78%, 100% { transform: rotate(0deg); } 82% { transform: rotate(-4deg); } 87% { transform: rotate(3.5deg); } 92% { transform: rotate(-2deg); } 96% { transform: rotate(1deg); } }
@keyframes cg-twinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes cg-drift { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-9px) rotate(5deg); } }
@keyframes cg-await { 0%, 100% { opacity: .25; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes cg-sharpen { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes cg-live { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes cg-count-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes cg-beckon { 0%, 82%, 100% { transform: scale(1); } 88% { transform: scale(1.035); } 94% { transform: scale(.99); } }
@keyframes cg-penalty { 0% { opacity: 0; transform: translateY(6px) scale(.7); } 18% { opacity: 1; transform: translateY(0) scale(1.1); } 70% { opacity: 1; transform: translateY(-10px) scale(1); } 100% { opacity: 0; transform: translateY(-22px) scale(.9); } }
@keyframes cg-token-in { 0% { transform: scale(.6) rotate(-10deg); } 60% { transform: scale(1.14) rotate(3deg); } 100% { transform: scale(1) rotate(0deg); } }
@keyframes cg-bubble-pop { 0% { transform: scale(.92); } 55% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes cg-card-in { 0% { opacity: 0; transform: translateX(46px) rotate(5deg) scale(.9); } 62% { opacity: 1; transform: translateX(-5px) rotate(-1.2deg) scale(1.02); } 100% { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); } }
@keyframes cg-shake { 0%, 100% { transform: translateX(0); } 18% { transform: translateX(-9px) rotate(-1deg); } 38% { transform: translateX(8px) rotate(1deg); } 58% { transform: translateX(-6px); } 78% { transform: translateX(4px); } }
@keyframes cg-pop-off { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(1.6); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes cg-headline-in { 0% { opacity: 0; transform: scale(.7); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cg-rise { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes cg-fade-out { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cg-stamp { 0% { opacity: 0; transform: scale(2.2) rotate(-14deg); } 55% { opacity: 1; transform: scale(.9) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes cg-flip { 0% { opacity: 0; transform: rotateX(90deg) scale(.6); } 60% { opacity: 1; transform: rotateX(-14deg) scale(1.08); } 100% { opacity: 1; transform: rotateX(0deg) scale(1); } }
@keyframes cg-burst { 0% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0deg); } 8% { opacity: 1; } 42% { opacity: 1; transform: translate(calc(var(--x) * .82), var(--y)) scale(1) rotate(calc(var(--r) * .5)); } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 330px)) scale(.9) rotate(var(--r)); } }

/* hidden page: nothing runs */
html.ds.cg-paused :is(.cg-room, .cg-scope) *, html.ds.cg-paused :is(.cg-room, .cg-scope) *::before, html.ds.cg-paused :is(.cg-room, .cg-scope) *::after { animation-play-state: paused !important; }

/* Reduce Motion: still bright, nothing bounces, floats or bursts */
@media (prefers-reduced-motion: reduce) {
  html.ds :is(.cg-room, .cg-scope) *, html.ds :is(.cg-room, .cg-scope) *::before, html.ds :is(.cg-room, .cg-scope) *::after { animation: none !important; transition: none !important; }
  html.ds .cg-confetti { display: none; }
}
html.ds #device.manual-reduced-motion :is(.cg-room, .cg-scope) *, html.ds #device.manual-reduced-motion :is(.cg-room, .cg-scope) *::before, html.ds #device.manual-reduced-motion :is(.cg-room, .cg-scope) *::after { animation: none !important; transition: none !important; }
html.ds #device.manual-reduced-motion .cg-confetti { display: none; }

/* ===== prototype-src/ds-edge-back.css ===== */
/* TRIPTIC ds-edge-back (interactive edge-swipe Back). Scoped under html.ds (kill switch ?ds=0).
   Runtime: prototype-src/ds-edge-back.js. Motion here is transform and opacity only (set from the module).

   !IMPORTANT OVERRIDES (each beats an earlier !important):
   - #device.ds-edge-back-on > .screen { animation: none }       beats triptic-fluidity.css .screen arrival animations
     (animation: ... !important) while a finger is dragging the screen.
   - #device > .ds-eb-under z-index/animation                   beats .screen.fluid-departure / .ds-under rules that
     were written for departure clones; the snapshot is a plain inert copy. */

/* the whole app surface: no native sideways pan or rubber band, vertical scroll and pinch stay native.
   Children that scroll sideways (shelves, reels) are their own scrollers, so their own pan is unaffected. */
html.ds, html.ds body { overscroll-behavior-x: none; }
html.ds #device { overscroll-behavior-x: none; touch-action: pan-y pinch-zoom; }

html.ds #device.ds-edge-back-on > .screen { animation: none !important; }
html.ds #device > .screen.ds-eb-moving { will-change: transform; }

html.ds #device > .ds-eb-under { position: absolute; inset: 0; z-index: 1 !important; animation: none !important; pointer-events: none; will-change: transform; }
/* (walkthrough, 27 October 2026) a page swiped away stays out of sight from the commit until it is off the display (ds-edge-back.js
   handOver): never put back where it was, never shown again at an offset while the page returned to is made ready */
html.ds #device > .screen.ds-eb-gone, html.ds #device > .ds-eb-gone { visibility: hidden !important; pointer-events: none !important; }
/* while the page returned to comes in, the snapshot lies under every page (a page of z-index auto included): only where nothing
   is drawn yet does it show */
html.ds #device > .ds-eb-under.ds-eb-handing { z-index: -1 !important; }
html.ds #device > .ds-eb-dim { position: absolute; inset: 0; background: var(--c-stage); pointer-events: none; will-change: opacity; }
html.ds #device > .ds-eb-shadow {
  position: absolute; left: 0; top: 0; bottom: 0; width: 28px; z-index: 4; pointer-events: none; will-change: transform;
  background: linear-gradient(to left, rgb(0 0 0 / .38), rgb(0 0 0 / 0));
}

@media (prefers-reduced-motion: reduce) {
  html.ds #device > .ds-eb-shadow, html.ds #device > .ds-eb-dim { display: none; }
}

/* ===== prototype-src/ds-the-ten.css ===== */
/* TRIPTIC ds-the-ten: THE TEN (ranks 1-5 for everyone, 6-10 sealed for a free device). Runtime pair: ds-the-ten.js. Spec: hub/docs/THE-TEN-2026-10-01.md.
   1. Discover card (.ds-ten-card), first in Cinema (.ds-now-next): dark glass over the #1 film's backdrop, red LIVE pill (one pulse), ranks 1-5
      as a real 3D fan of posters on a reflective floor (its layers and its own motion are described at section 1), a full-width
      VIEW THE TEN button.
   2. The Ten stage (.ds-tt-screen): a fixed cinematic hero (muted trailer or a slow Ken Burns still) above a snapping list;
      the row at the focus line becomes the hero through a two-blade projector shutter, a split-flap rank and a film tint.
   Motion: transform/opacity only (blades translate, flaps rotateX inside .ds-tt-flap, stills/tints/copy fade); the one ambient
   loop is the Ken Burns still (paused while a trailer plays, off with reduced motion). Reduced motion = opacity crossfades
   (<=220ms). Reduced transparency = solid fills, no glow, no washes. No raw hex: tokens, rgba() and color-mix() only.
   !important: none. */

/* ================================================================== shared atoms */
html.ds .ds-ten-badge, html.ds .ds-tt-badge {
  display: inline-flex; align-items: center; gap: 2px; min-width: 22px; height: 18px; padding: 0 6px; border-radius: var(--r-pill);
  font: 700 calc(11 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-2); font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--c-label-1); background: rgba(10, 10, 14, .72); box-shadow: inset 0 0 0 1px var(--c-line-strong);
}
html.ds :is(.ds-ten-badge, .ds-tt-badge)[data-move="up"] { color: var(--c-ok); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ok) 42%, transparent); }
html.ds :is(.ds-ten-badge, .ds-tt-badge)[data-move="down"] { color: var(--c-danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-danger) 42%, transparent); }
html.ds :is(.ds-ten-badge, .ds-tt-badge)[data-move="new"] { color: var(--c-label-1); background: var(--c-seal-fill); box-shadow: none; letter-spacing: var(--tr-eyebrow); }
html.ds :is(.ds-ten-badge, .ds-tt-badge)[data-move="same"] { color: var(--c-label-2); }
/* "=" held its place: a quiet sign, never a ring (a "−" in a ring read as a delete button: pages polish, 28 October 2026) */
html.ds .ds-tt-badge[data-move="same"] { min-width: 0; padding: 0 2px; background: none; box-shadow: none; font-size: calc(13 * var(--type-unit)); }

html.ds .ds-ten-live {
  position: relative; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 7px; border-radius: var(--r-pill);
  font: 700 calc(11 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-eyebrow); color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-danger) 38%, transparent);
}
html.ds .ds-ten-live > i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--c-danger); }
html.ds .ds-ten-live > i::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--c-danger); opacity: 0; transform: scale(.4);
}
html.ds .ds-ten-live.is-pulsing > i::after { animation: ds-ten-pulse var(--motion-ceremony) var(--motion-curve) 2 forwards; }
@keyframes ds-ten-pulse { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.1); } }

/* outlined, glass-filled rank numerals */
html.ds .ds-ten-numeral { display: block; width: auto; overflow: visible; pointer-events: none; user-select: none; }
html.ds .ds-ten-numeral text {
  font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums;
  stroke: rgba(245, 244, 247, .86); stroke-width: 1.5px; vector-effect: non-scaling-stroke; paint-order: stroke;
}

/* ================================================================== 1. the card on Today
   Layers, back to front: .ds-ten-backdrop (the #1 film's picture over a gradient tinted from its poster, under a scrim that
   keeps the title readable on any picture), the head, the fan stage, VIEW THE TEN, the credit, and a hairline rim.
   The fan is real 3D: .ds-ten-card-stage holds the perspective (eye a little above the floor, left of centre),
   .ds-ten-fan is the shared 3D space (preserve-3d; the idle drift turns it as one), and each .ds-ten-fan-card has one
   transform: translate3d(x, 0, z) rotateY(ry) scale(s), in units of --pw (the poster width, a share of the card's own
   width), so the fan is the same picture on every phone and #5 always lands inside the card. (29 October 2026, "The Ten,
   evenly fanned": the owner, "a little bunched up") The fan stands on one floor line, facing the eye: a gentle scale step does the
   shrinking (1, .86, .74, .64, .56), every poster shows the same width past the one in front (.44 of #1's width, so #2 shows
   half of itself and #5 three quarters), and the whole fan, 2.76 poster widths, is centred in the card.
   --ten-rgb is the #1 poster's colour (ds-the-ten.js tintCard; violet until known): ground glow, edge light, card halo.
   Motion (all transform/opacity): ds-ten-deal + ds-ten-pop once (data-fan="deal"); ds-ten-drift, ds-ten-sweep and
   ds-ten-pan loop only under .is-live (on screen, tab visible) and never with reduced motion or the "reduced" tier. */
html.ds .ds-ten-card {
  --ten-rgb: 139, 92, 246;
  position: relative; isolation: isolate; container-type: inline-size; margin: 0; padding: 18px 18px 14px; border-radius: var(--r-sheet); overflow: hidden;
  color: var(--c-label-1); background: var(--c-stage-raised); -webkit-tap-highlight-color: transparent;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .5), 0 12px 44px rgba(var(--ten-rgb), .16);
}
html.ds .ds-ten-card::before { /* the press veil (ds-core sets .ds-pressed-row on a .ds-press this large) */
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  background: rgba(255, 255, 255, .05); opacity: 0; transition: opacity var(--motion-press) linear;
}
html.ds .ds-ten-card.ds-pressed-row::before { opacity: 1; }
html.ds .ds-ten-card::after { /* glass rim: a hairline all round, brighter along the top */
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 0 0 1px rgba(var(--ten-rgb), .18);
}

/* ---- backdrop */
html.ds .ds-ten-backdrop {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(120% 66% at 76% 6%, rgba(var(--ten-rgb), .7), rgba(var(--ten-rgb), 0) 72%),
    radial-gradient(90% 50% at 0% 8%, rgba(var(--ten-rgb), .26), rgba(var(--ten-rgb), 0) 70%),
    linear-gradient(180deg, rgba(26, 22, 38, 1), rgba(12, 11, 18, 1) 58%, rgba(9, 8, 14, 1));
}
html.ds .ds-ten-backdrop img {
  /* a close crop: the middle of the picture sits in the open window above the far posters, its lower part behind the fan */
  position: absolute; left: 0; top: -18%; width: 100%; height: 92%; object-fit: cover; object-position: 60% 50%;
  transform: scale(1.06); transform-origin: 70% 40%; filter: saturate(1.14) contrast(1.08) brightness(.84); /* graded once, never animated */
  -webkit-mask-image: linear-gradient(180deg, black 58%, transparent 96%); mask-image: linear-gradient(180deg, black 58%, transparent 96%);
}
html.ds .ds-ten-backdrop::after { /* scrim: the head always reads, the picture stays moody, the body is the card's own dark glass */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 7, 13, .7) 0%, rgba(8, 7, 13, .56) 17%, rgba(8, 7, 13, .16) 32%, rgba(8, 7, 13, 0) 46%),
    radial-gradient(104% 50% at 0% 0%, rgba(8, 7, 13, .74), rgba(8, 7, 13, .42) 62%, rgba(8, 7, 13, 0) 100%),
    radial-gradient(130% 70% at 62% 34%, rgba(8, 7, 13, 0) 42%, rgba(8, 7, 13, .5) 100%),
    linear-gradient(180deg, rgba(8, 7, 13, .14), rgba(8, 7, 13, .14));
}

/* ---- head */
html.ds .ds-ten-card-head { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 12px; }
html.ds .ds-ten-card-title { display: flex; align-items: center; gap: 10px; margin: 0; }
html.ds .ds-ten-card-title > span:first-child { font: 700 calc(28 * var(--type-unit))/calc(34 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caps); text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
html.ds .ds-ten-card-head p {
  grid-column: 1; margin: 0; font: 400 var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead);
  color: rgba(245, 244, 247, .92); text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}
html.ds .ds-ten-card .ds-ten-live { background: color-mix(in srgb, var(--c-danger) 20%, rgba(10, 10, 14, .74)); }
html.ds .ds-ten-card-chevron {
  grid-row: 1 / span 2; grid-column: 2; display: grid; place-items: center; width: var(--target); height: var(--target); margin: -2px -4px 0 0; padding: 0;
  border: 0; border-radius: 50%; color: var(--c-label-1); background: rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 18px rgba(0, 0, 0, .28);
}
html.ds .ds-ten-card-chevron svg { width: 18px; height: 18px; }

/* ---- the fan */
html.ds .ds-ten-card-stage {
  --pw: 112px; --floor: 30px;
  position: relative; z-index: 1; height: calc(var(--pw) * 1.5 + var(--floor) + 12px); margin: 0 -18px;
  perspective: calc(var(--pw) * 6.2); perspective-origin: 50% calc(100% - var(--floor) - var(--pw) * .36);
}
/* the fan's width is 2.76 poster widths: --pw is the most that fits the card with 4pt to spare each side, never more than 150 */
@supports (width: 1cqw) { html.ds .ds-ten-card-stage { --pw: min(150px, calc((100cqw - 8px) / 2.76)); } }
html.ds .ds-ten-floor { /* ground glow centred on the floor line: the #1 poster's colour under #1, a violet wash along the row */
  position: absolute; left: 0; right: 0; bottom: calc(var(--floor) - var(--pw) * .45); height: calc(var(--pw) * .9); pointer-events: none;
  background:
    radial-gradient(44% 50% at 24% 50%, rgba(var(--ten-rgb), .55), rgba(var(--ten-rgb), 0) 100%),
    radial-gradient(60% 34% at 62% 46%, color-mix(in srgb, var(--c-seal) 26%, transparent), color-mix(in srgb, var(--c-seal) 0%, transparent) 100%);
}
html.ds .ds-ten-fan {
  position: absolute; left: 0; right: 0; bottom: var(--floor); height: calc(var(--pw) * 1.5); margin: 0; padding: 0; list-style: none;
  transform-style: preserve-3d; transform-origin: 50% 100%;
  pointer-events: none; /* its own empty plane (z = 0) would be hit before the posters standing behind it; only posters take taps */
}
html.ds .ds-ten-fan-card {
  --x: 0; --z: 0; --ry: 0deg; --i: 0; --k: 1; --dim: 0;
  position: absolute; left: calc(50% - var(--pw) * 1.38); bottom: 0; width: var(--pw); height: calc(var(--pw) * 1.5); margin: 0; padding: 0; transform-origin: 50% 100%;
  transform: translate3d(calc(var(--pw) * var(--x)), 0, calc(var(--pw) * var(--z))) rotateY(var(--ry)) scale(var(--s, 1));
}
/* x and z in poster widths (x is the poster's centre; with scale s about its foot, each right edge lands .44 past the last);
   z a hair further back each (in a 3D space z-index is not used: depth alone keeps each poster behind the one in front, the
   planes parallel, ry 0, so the order is never split); --s the scale step; --k keeps each chip about the size of its poster's share (the chip
   is inside the scaled poster: it shows at s x k); --dim is distance haze */
html.ds .ds-ten-fan-card[data-r="1"] { --x: 0; --z: 0; --ry: 0deg; --s: 1; --i: 0; --k: 1.08; --dim: 0; }
html.ds .ds-ten-fan-card[data-r="2"] { --x: .51; --z: -.03; --ry: 0deg; --s: .86; --i: 1; --k: 1.14; --dim: .1; }
html.ds .ds-ten-fan-card[data-r="3"] { --x: 1.01; --z: -.06; --ry: 0deg; --s: .74; --i: 2; --k: 1.26; --dim: .18; }
html.ds .ds-ten-fan-card[data-r="4"] { --x: 1.5; --z: -.09; --ry: 0deg; --s: .64; --i: 3; --k: 1.38; --dim: .26; }
html.ds .ds-ten-fan-card[data-r="5"] { --x: 1.98; --z: -.12; --ry: 0deg; --s: .56; --i: 4; --k: 1.5; --dim: .32; }
/* behind #1 a poster shows only its right-hand share: its chip stands at that share's top right, never under the poster in front */
html.ds .ds-ten-fan-card:not([data-r="1"]) .ds-ten-chip { left: auto; right: 6px; transform-origin: 100% 0; }

html.ds .ds-ten-poster {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: var(--r-control);
  background: none; color: inherit; pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
html.ds .ds-ten-art {
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-control); background: var(--c-stage-raised);
  box-shadow: 10px 12px 26px rgba(0, 0, 0, .58), 0 18px 30px rgba(0, 0, 0, .45); /* lit from the upper left: each poster shades the one behind it */
}
html.ds .ds-ten-fan-card[data-r="1"] .ds-ten-art { box-shadow: 12px 14px 30px rgba(0, 0, 0, .62), 0 20px 34px rgba(0, 0, 0, .5), 4px 10px 32px rgba(var(--ten-rgb), .32); }
html.ds .ds-ten-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.ds .ds-ten-art .ds-poster-fallback { position: absolute; inset: 0; }
html.ds .ds-ten-art::after { /* lit from the upper left: a bright edge, a soft falloff to the right, and distance haze */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(98deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 20%),
    linear-gradient(90deg, rgba(5, 5, 7, 0) 52%, rgba(5, 5, 7, .3)),
    linear-gradient(rgba(5, 5, 7, var(--dim)), rgba(5, 5, 7, var(--dim)));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 2px 0 0 rgba(255, 255, 255, .3), inset 1px 1px 0 rgba(255, 255, 255, .55);
}
html.ds .ds-ten-poster.ds-pressed .ds-ten-art::after { background: linear-gradient(rgba(5, 5, 7, .3), rgba(5, 5, 7, .3)); }
html.ds .ds-ten-sheen { /* a band of light that crosses #1 every so often */
  position: absolute; top: -12%; bottom: -12%; left: 0; width: 44%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3) 46%, rgba(255, 255, 255, .08) 62%, rgba(255, 255, 255, 0));
  transform: translate3d(-150%, 0, 0) skewX(-16deg);
}
html.ds .ds-ten-chip, html.ds .ds-ten-fan-card .ds-ten-badge { position: absolute; z-index: 2; transform: scale(var(--k)); }
html.ds .ds-ten-chip {
  left: 6px; top: 6px; display: grid; place-items: center; min-width: 26px; height: 20px; padding: 0 6px; border-radius: var(--r-chip); transform-origin: 0 0;
  font: 700 calc(12 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-caption-1); font-variant-numeric: tabular-nums; color: var(--c-label-1);
  background: rgba(10, 10, 14, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), 0 2px 8px rgba(0, 0, 0, .3);
}
/* the movement chip: top right on every poster, across from the rank (the bottom of a poster is usually its title lettering) */
html.ds .ds-ten-fan-card .ds-ten-badge { right: 6px; top: 6px; border-radius: var(--r-chip); transform-origin: 100% 0; background: rgba(10, 10, 14, .78); }
html.ds .ds-ten-fan-card .ds-ten-badge[data-move="same"] { color: var(--c-label-2); background: rgba(10, 10, 14, .62); }
html.ds .ds-ten-fan-card .ds-ten-badge[data-move="up"] { background: color-mix(in srgb, var(--c-ok) 16%, rgba(10, 10, 14, .82)); }
html.ds .ds-ten-fan-card .ds-ten-badge[data-move="down"] { background: color-mix(in srgb, var(--c-danger) 16%, rgba(10, 10, 14, .82)); }
html.ds .ds-ten-fan-card .ds-ten-badge[data-move="new"] { background: var(--c-seal-fill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-seal-hi) 70%, transparent); }
/* the floor reflection: a flipped copy in the card's own plane, fading out (a mask on a leaf, so the fan stays 3D) */
html.ds .ds-ten-reflect {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); height: 28%; overflow: hidden; border-radius: var(--r-control) var(--r-control) 0 0; pointer-events: none; opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 90%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 90%);
}
html.ds .ds-ten-reflect img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: calc(100% / .28); object-fit: cover; transform: scaleY(-1); }

/* ---- VIEW THE TEN + credit */
html.ds .ds-ten-cta {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 52px; margin: 4px 0 0; padding: 0 44px; border: 0; border-radius: var(--r-pill);
  font: 700 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-eyebrow); color: var(--c-label-1);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c-seal-hi) 50%, transparent), color-mix(in srgb, var(--c-seal-fill) 58%, transparent) 62%, color-mix(in srgb, var(--c-seal-fill) 44%, transparent)),
    rgba(18, 15, 30, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 0 0 1px color-mix(in srgb, var(--c-seal-hi) 44%, transparent), 0 10px 28px color-mix(in srgb, var(--c-seal) 30%, transparent);
}
html.ds .ds-ten-cta svg { flex: none; width: 18px; height: 18px; }
html.ds .ds-ten-cta-bars { color: color-mix(in srgb, var(--c-seal-hi) 55%, var(--c-label-1)); }
html.ds .ds-ten-cta-go { position: absolute; right: 18px; top: 50%; margin-top: -9px; }
html.ds .ds-ten-cta:disabled { color: var(--c-label-3); background: var(--c-fill-2); box-shadow: inset 0 0 0 1px var(--c-line); }
html.ds .ds-ten-cta:disabled svg { color: inherit; }
html.ds .ds-ten-card-chevron:disabled { color: var(--c-label-3); }
html.ds .ds-ten-credit {
  position: relative; z-index: 2; display: block; margin: 10px 0 0; font: 400 var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1);
  font-variant-numeric: tabular-nums; color: var(--c-label-3); text-align: center;
}
html.ds .ds-ten-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- life */
@keyframes ds-ten-deal { /* each poster arrives from the right, further back and turned away, and settles into its place */
  0% { opacity: 0; transform: translate3d(calc(var(--pw) * (var(--x) + 1.7)), 0, calc(var(--pw) * (var(--z) - 1))) rotateY(calc(var(--ry) + 44deg)) scale(var(--s, 1)); }
  32% { opacity: 1; }
}
@keyframes ds-ten-pop { 0% { opacity: 0; transform: scale(calc(var(--k) * .4)); } 62% { opacity: 1; transform: scale(calc(var(--k) * 1.14)); } }
@keyframes ds-ten-drift { from { transform: rotateY(0deg) translate3d(0, 0, 0); } to { transform: rotateY(1.1deg) translate3d(0, -1px, 0); } }
@keyframes ds-ten-sweep {
  0% { opacity: 0; transform: translate3d(-150%, 0, 0) skewX(-16deg); } 2% { opacity: 1; }
  15% { opacity: 1; transform: translate3d(340%, 0, 0) skewX(-16deg); } 16%, 100% { opacity: 0; transform: translate3d(340%, 0, 0) skewX(-16deg); }
}
@keyframes ds-ten-pan { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.13) translate3d(-1.6%, -1%, 0); } }
@keyframes ds-ten-breathe { from { opacity: .5; } to { opacity: 1; } }
html.ds .ds-ten-card[data-fan="wait"] .ds-ten-fan-card { opacity: 0; }
html.ds .ds-ten-card[data-fan="deal"] .ds-ten-fan-card { animation: ds-ten-deal var(--motion-slow) var(--motion-spring) calc(var(--i) * 90ms) both; }
html.ds .ds-ten-card[data-fan="deal"] .ds-ten-badge { animation: ds-ten-pop var(--motion-normal) var(--motion-spring) calc(600ms + var(--i) * 90ms) both; }
html.ds .ds-ten-card[data-fan="rest"] .ds-ten-fan { animation: ds-ten-drift 7s var(--motion-breathe) infinite alternate paused; }
html.ds .ds-ten-card[data-fan="rest"] .ds-ten-sheen { animation: ds-ten-sweep 9s linear 1200ms infinite paused; }
html.ds .ds-ten-card[data-fan="rest"] .ds-ten-backdrop img { animation: ds-ten-pan 20s var(--motion-breathe) infinite alternate paused; }
html.ds .ds-ten-card.is-live[data-fan="rest"] :is(.ds-ten-fan, .ds-ten-sheen, .ds-ten-backdrop img) { animation-play-state: running; }
html.ds .ds-ten-card.is-live .ds-ten-fan { will-change: transform; }

/* ---- first load: a skeleton fan in the same places (never a fake list) */
html.ds .ds-ten-card.is-loading .ds-ten-art {
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); box-shadow: 0 16px 30px rgba(0, 0, 0, .4);
  animation: ds-ten-breathe var(--motion-slow) var(--motion-curve) calc(var(--i) * 120ms) 8 alternate both;
}
html.ds .ds-ten-card.is-loading .ds-ten-art::after { background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 1.5px 1px 0 rgba(255, 255, 255, .22); }
html.ds .ds-ten-card.is-loading .ds-ten-floor { opacity: .5; }
html.ds .ds-ten-card.is-loading .ds-ten-credit { display: flow-root; } /* same height as the line it stands in for */
html.ds .ds-ten-skel { display: block; height: 12px; width: 58%; margin: 2px auto; border-radius: var(--r-chip); background: var(--c-fill-2); }

/* ---- phone sizes (device-fit). The fan always spans the card (--pw follows the card's width), so a short screen only
   tightens the card around it, and a narrow one takes the smaller title. */
html.ds[data-device-h="compact"] .ds-ten-card { padding-top: 16px; padding-bottom: 12px; }
html.ds[data-device-h="compact"] .ds-ten-card-stage { --floor: 26px; }
html.ds[data-device-h="compact"] .ds-ten-cta { height: 50px; }
html.ds[data-device-h="compact"] .ds-ten-credit { margin-top: 8px; }
html.ds[data-device-w="narrow"] .ds-ten-card-title > span:first-child { font: 700 calc(22 * var(--type-unit))/calc(28 * var(--type-unit)) var(--font-ui); }

/* ---- preferences: no deal, no idle motion (a static fan); solid fills without transparency */
@media (prefers-reduced-motion: reduce) {
  html.ds .ds-ten-card[data-fan] :is(.ds-ten-fan, .ds-ten-fan-card, .ds-ten-sheen, .ds-ten-backdrop img, .ds-ten-badge) { animation: none; }
  html.ds .ds-ten-card[data-fan="wait"] .ds-ten-fan-card { opacity: 1; }
}
html.ds:is([data-motion-tier="reduced"], .reduce-motion) .ds-ten-card[data-fan] :is(.ds-ten-fan, .ds-ten-fan-card, .ds-ten-sheen, .ds-ten-backdrop img, .ds-ten-badge),
html.ds #device:is([data-motion-tier="reduced"], .manual-reduced-motion) .ds-ten-card[data-fan] :is(.ds-ten-fan, .ds-ten-fan-card, .ds-ten-sheen, .ds-ten-backdrop img, .ds-ten-badge) { animation: none; }
html.ds:is([data-motion-tier="reduced"], .reduce-motion) .ds-ten-card[data-fan="wait"] .ds-ten-fan-card,
html.ds #device:is([data-motion-tier="reduced"], .manual-reduced-motion) .ds-ten-card[data-fan="wait"] .ds-ten-fan-card { opacity: 1; }
html.ds #device.manual-reduced-motion .ds-ten-card.is-loading .ds-ten-art { animation: none; }
@media (prefers-reduced-transparency: reduce) {
  html.ds .ds-ten-floor, html.ds .ds-ten-reflect, html.ds .ds-ten-card::after { display: none; }
  html.ds .ds-ten-card-chevron { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--c-stage-raised); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
  html.ds .ds-ten-cta { background: var(--c-seal-fill); box-shadow: none; }
  html.ds .ds-ten-cta-bars { color: inherit; }
}
html.ds #device.manual-solid :is(.ds-ten-floor, .ds-ten-reflect), html.ds #device.manual-solid .ds-ten-card::after { display: none; }
html.ds #device.manual-solid .ds-ten-card-chevron { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--c-stage-raised); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
html.ds #device.manual-solid .ds-ten-cta { background: var(--c-seal-fill); box-shadow: none; }
html.ds #device.manual-solid .ds-ten-cta-bars { color: inherit; }

/* ================================================================== 2. The Ten stage */
html.ds #device .ds-tt-screen {
  --tt-hero-h: 380px; --tt-pitch: 80px; --tt-rgb: 139, 92, 246;
  position: absolute; inset: 0; overflow: hidden; padding: 0; background: var(--c-stage); color: var(--c-label-1);
}
html.ds .ds-tt-screen > .global-trio-atmosphere { display: none; }
html.ds .ds-tt-tint { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
html.ds .ds-tt-tint > i {
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(110% 55% at 50% calc(var(--tt-hero-h) - 10px), rgba(var(--tt-rgb), .30), transparent 72%),
    linear-gradient(180deg, rgba(var(--tt-rgb), .10), transparent 70%);
  transition: opacity var(--motion-slow) var(--motion-curve);
}
html.ds .ds-tt-tint > i.is-on { opacity: 1; }

html.ds .ds-tt-scroll {
  position: absolute; inset: 0; z-index: 2; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory; scroll-padding-top: var(--tt-list-top, var(--tt-hero-h)); scrollbar-width: none;
}
html.ds .ds-tt-scroll::-webkit-scrollbar { display: none; }
html.ds .ds-tt-list { list-style: none; margin: 0; padding: var(--tt-list-top, var(--tt-hero-h)) 0 0; }
html.ds .ds-tt-row { height: var(--tt-pitch); scroll-snap-align: start; padding: 4px 12px; }
html.ds .ds-tt-row-btn {
  position: relative; display: grid; grid-template-columns: 40px 48px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; height: 72px; margin: 0; padding: 0 12px 0 4px; border: 0; border-radius: var(--r-row); background: none; color: inherit; text-align: left;
}
/* the focus lamp: a fixed band at the focus line (just under the hero) that the rows scroll through */
html.ds .ds-tt-lamp {
  position: absolute; z-index: 1; left: 12px; right: 12px; top: calc(var(--tt-list-top, var(--tt-hero-h)) + 4px); height: 72px; border-radius: var(--r-row); pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--tt-rgb), .28), rgba(var(--tt-rgb), .07)); box-shadow: inset 0 0 0 1px rgba(var(--tt-rgb), .42);
}
html.ds .ds-tt-screen.is-loading .ds-tt-lamp, html.ds .ds-tt-screen.is-unavailable .ds-tt-lamp { display: none; }
html.ds .ds-tt-row-rank { justify-self: center; height: 44px; }
html.ds .ds-tt-row-poster { position: relative; width: 44px; height: 66px; overflow: hidden; border-radius: var(--r-chip); background: var(--c-stage-raised); box-shadow: 0 6px 14px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--c-line); }
html.ds .ds-tt-row-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.ds .ds-tt-row-copy { display: grid; gap: 2px; min-width: 0; }
html.ds .ds-tt-row-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); }
html.ds .ds-tt-row-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds .ds-tt-row-end { display: grid; justify-items: end; gap: 6px; }
html.ds .ds-tt-row-open { display: inline-flex; align-items: center; gap: 2px; font: 600 var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); color: var(--c-label-3); }
html.ds .ds-tt-row-open svg { width: 12px; height: 12px; }
html.ds .ds-tt-row-btn[aria-busy="true"] .ds-tt-row-open { color: var(--c-seal-hi); }
/* The room left under the last row (so #10 can come up to the first slot) is the footer's own height. It used to be
   padding on the list with the footer after it, which put "What people are watching today" below the screen where the
   row snap never let it rest: nobody could read it, and #10 sat over a blank half screen. */
html.ds .ds-tt-foot { box-sizing: border-box; min-height: var(--tt-tail, 240px); padding: 12px 24px 0; font: 400 var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); color: var(--c-label-3); text-align: center; }
html.ds .ds-tt-foot p { margin: 0 0 4px; }
html.ds .ds-tt-foot .is-stale { color: var(--c-caution); }

/* ---- hero */
html.ds .ds-tt-hero { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: var(--tt-hero-h); overflow: hidden; background: var(--c-stage); contain: layout paint; }
html.ds .ds-tt-media { position: absolute; inset: 0; overflow: hidden; }
html.ds .ds-tt-still { position: absolute; inset: 0; overflow: hidden; opacity: 0; }
html.ds .ds-tt-still.is-on { opacity: 1; }
html.ds .ds-tt-still img { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; object-position: center 30%; transform-origin: 60% 40%; }
html.ds .ds-tt-still.is-on img { animation: ds-tt-kenburns 24s var(--motion-breathe) infinite alternate; }
html.ds .ds-tt-hero.is-video .ds-tt-still.is-on img { animation-play-state: paused; }
@keyframes ds-tt-kenburns { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(-2.4%, -1.6%, 0); } }
html.ds .ds-tt-still .ds-poster-fallback { position: absolute; inset: 0; }
html.ds .ds-tt-video { position: absolute; inset: 0; pointer-events: none; }
html.ds .ds-tt-video iframe {
  position: absolute; left: 50%; top: 50%; border: 0; pointer-events: none; opacity: 0;
  transform: translate3d(-50%, -50%, 0); transition: opacity var(--motion-slow) var(--motion-curve);
}
html.ds .ds-tt-video iframe.is-playing { opacity: 1; }
html.ds .ds-tt-scrim { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 5, 7, .62) 0%, rgba(5, 5, 7, 0) 26%),
    linear-gradient(0deg, var(--c-stage) 0%, rgba(5, 5, 7, .86) 22%, rgba(5, 5, 7, .2) 52%, rgba(5, 5, 7, 0) 70%); }
html.ds .ds-tt-hero-tap {
  position: absolute; inset: 64px 0 132px; z-index: 2; display: grid; place-items: center; border: 0; padding: 0; background: none; color: var(--c-label-1);
  -webkit-tap-highlight-color: transparent;
}
html.ds .ds-tt-hero-tap.ds-pressed { scale: 1; } /* the picture itself never shrinks. No on-picture instruction (owner, 2 Oct): a tap there simply plays it */
html.ds .ds-tt-copy h1 { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* the expanded trailer. The picture never changes parent (an iframe moved in the DOM reloads): the hero's own video slot
   (.ds-tt-video) is restyled into a 16:9 box over a dark room (.ds-tt-room), and the hero's chrome steps back.
   .ds-tt-player is the layer above it: nothing of ours is drawn on the picture (no sound button in any path: owner,
   6 Oct 2026; only an invisible tap surface over the promoted preview, which pauses and plays it), and under the
   picture a caption row with the title, what YouTube reported, Close and Open film.
   --tt-w / --tt-h are the screen's size and --tt-px / --tt-py / --tt-pw / --tt-ph the picture's box, in px (layout()):
   the full width in portrait; in landscape fitted to the height, with the caption row beneath and room at both sides. */
html.ds .ds-tt-room {
  position: absolute; left: 0; top: 0; width: 100%; height: var(--tt-h, 100%); background: var(--c-stage);
  opacity: 0; visibility: hidden; transition: opacity var(--motion-normal) var(--motion-curve), visibility 0s linear 360ms;
}
html.ds .ds-tt-hero.is-expanded { z-index: 19; overflow: visible; contain: none; }
html.ds .ds-tt-hero.is-expanded .ds-tt-media { overflow: visible; }
html.ds .ds-tt-hero.is-expanded .ds-tt-room { opacity: 1; visibility: visible; transition-delay: 0s; }
html.ds .ds-tt-hero.is-expanded .ds-tt-video {
  left: var(--tt-px, 0px); right: auto; top: var(--tt-py, calc((var(--tt-h) - var(--tt-w) * 9 / 16) / 2)); bottom: auto;
  width: var(--tt-pw, var(--tt-w)); height: var(--tt-ph, calc(var(--tt-w) * 9 / 16)); overflow: hidden;
  background: var(--c-stage); border-radius: var(--r-card); clip-path: inset(0 0 round 14px); transform-origin: 50% 50%; will-change: transform, clip-path;
}
/* a tap on the dark room closes the player, and a swipe there is ours (never the browser's pan or pull-to-refresh) */
html.ds .ds-tt-hero.is-expanded .ds-tt-room { touch-action: none; }
html.ds .ds-tt-hero.is-expanded .ds-tt-video iframe { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
html.ds .ds-tt-hero.is-expanded .ds-tt-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
html.ds .ds-tt-hero.is-expanded.is-native :is(.ds-tt-video, .ds-tt-video iframe) { pointer-events: auto; } /* YouTube's own controls */
html.ds .ds-tt-hero :is(.ds-tt-scrim, .ds-tt-gate, .ds-tt-hero-tap, .ds-tt-top, .ds-tt-foot-hero) { transition: opacity var(--motion-fast) var(--motion-curve), visibility 0s linear 0s; }
html.ds .ds-tt-hero.is-expanded :is(.ds-tt-scrim, .ds-tt-gate, .ds-tt-hero-tap, .ds-tt-top, .ds-tt-foot-hero) {
  opacity: 0; visibility: hidden; transition: opacity var(--motion-fast) linear, visibility 0s linear 180ms;
}

html.ds .ds-tt-player { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
html.ds .ds-tt-player-box {
  position: absolute; left: var(--tt-px, 0px); top: var(--tt-py, calc((var(--tt-h) - var(--tt-w) * 9 / 16) / 2)); display: grid; place-items: center;
  width: var(--tt-pw, 100%); height: var(--tt-ph, calc(var(--tt-w) * 9 / 16)); overflow: hidden; border-radius: var(--r-card);
}
html.ds .ds-tt-player-tap { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: none; pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; }
html.ds .ds-tt-player-tap[hidden] { display: none; }
/* a hairline of progress for the promoted preview (YouTube draws its own when its controls are shown): just under the
   picture, at the top of the caption row, so it is never on the picture either */
html.ds .ds-tt-player-progress { position: absolute; left: 16px; right: 16px; top: 7px; height: 2px; background: rgba(245, 244, 247, .16); pointer-events: none; }
html.ds .ds-tt-player-progress > i { display: block; width: 100%; height: 100%; background: var(--c-label-1); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--motion-normal) linear; }
html.ds .ds-tt-player.is-native .ds-tt-player-progress { display: none; }
/* the caption row, directly under the picture */
html.ds .ds-tt-player-meta {
  position: absolute; left: var(--tt-px, 0px); top: calc(var(--tt-py, calc((var(--tt-h) - var(--tt-w) * 9 / 16) / 2)) + var(--tt-ph, calc(var(--tt-w) * 9 / 16)));
  width: var(--tt-pw, 100%); box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 16px 16px 0;
}
/* --tt-cy (layout()) is where the caption row starts. On every phone that is the foot of the picture, as the rule above
   says. On an iPhone Duo standing half open with the fold across the page, the picture is on the leaf above the fold
   and the caption row starts just under the fold, on the leaf that lies flat. */
html.ds .ds-tt-screen .ds-tt-player-meta { top: var(--tt-cy, calc(var(--tt-py, calc((var(--tt-h) - var(--tt-w) * 9 / 16) / 2)) + var(--tt-ph, calc(var(--tt-w) * 9 / 16)))); }
html.ds .ds-tt-player-meta p { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; margin: 0; }
/* The way out a person can see (readiness review TT1, 6 October 2026: the room had none; its Close was drawn only for a
   keyboard). The app's own round Back, in the dark room's top-left corner at exactly the place the page's own Back
   holds (.ds-tt-top), so it does not move as the room opens. Never on the picture (owner: nothing of ours over the
   trailer; "people can just pause it"): playerBox() keeps the picture below it or beside it on every screen. It is the
   dialog's first focus, so it is also the keyboard's and VoiceOver's Close. By touch there are still the dark room
   (a tap), a swipe down and the swipe from the left edge. */
html.ds .ds-tt-player-back {
  position: absolute; left: 12px; top: calc(var(--dv-safe-top, 0px) + 10px); z-index: 1; width: var(--target); height: var(--target); margin: 0; padding: 0;
  display: grid; place-items: center; pointer-events: auto;
}
html.ds .ds-tt-player-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--fs-headline)/var(--lh-headline) var(--font-ui); }
html.ds .ds-tt-player-meta small { font: 400 var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds .ds-tt-player[data-sound="on"] .ds-tt-player-status { color: var(--c-ok); }
html.ds .ds-tt-player-open {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: var(--target); padding: 0 12px 0 16px; border: 0; border-radius: var(--r-pill); pointer-events: auto;
  font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); color: var(--c-lamp-ink); background: var(--c-lamp);
}
html.ds .ds-tt-player-open svg { width: 14px; height: 14px; }
html.ds .ds-tt-player button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* the projector gate: two blades, a frame and one flicker */
html.ds .ds-tt-gate { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
html.ds .ds-tt-blade { position: absolute; left: -2%; right: -2%; height: 52%; background: var(--c-stage); will-change: transform; }
html.ds .ds-tt-blade.is-top { top: 0; transform: translate3d(0, -101%, 0); box-shadow: inset 0 -1px 0 rgba(var(--tt-rgb), .7), 0 2px 18px rgba(0, 0, 0, .6); }
html.ds .ds-tt-blade.is-bot { bottom: 0; transform: translate3d(0, 101%, 0); box-shadow: inset 0 1px 0 rgba(var(--tt-rgb), .7), 1px 2px 18px rgba(0, 0, 0, .6); }
html.ds .ds-tt-blade::after { /* sprocket rhythm along the blade edge */
  content: ""; position: absolute; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(90deg, rgba(245, 244, 247, .16) 0 10px, transparent 10px 22px);
}
html.ds .ds-tt-blade.is-top::after { bottom: 8px; }
html.ds .ds-tt-blade.is-bot::after { top: 8px; }
html.ds .ds-tt-frame { position: absolute; inset: 10px; border-radius: var(--r-card); box-shadow: inset 0 0 0 1.5px rgba(245, 244, 247, .5); opacity: 0; }
html.ds .ds-tt-flicker { position: absolute; inset: 0; background: rgba(var(--tt-rgb), .5); opacity: 0; mix-blend-mode: screen; }

/* chrome over the hero */
html.ds .ds-tt-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: grid; grid-template-columns: var(--target) 1fr var(--target); align-items: center;
  gap: 8px; padding: calc(var(--dv-safe-top, 0px) + 10px) 12px 0;
}
html.ds .ds-tt-top .back-chevron { background: rgba(10, 10, 14, .5); }
html.ds .ds-tt-brand { display: flex; align-items: center; justify-content: center; gap: 8px; }
html.ds .ds-tt-brand strong { font: 700 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-eyebrow); }
html.ds .ds-tt-foot-hero { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 6px 14px; padding: 0 16px 14px; }
html.ds .ds-tt-copy { min-width: 0; padding-bottom: 2px; }
html.ds .ds-tt-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 600 var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-label-2); }
html.ds .ds-tt-copy h1 {
  margin: 0; font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance;
}
html.ds .ds-tt-copy p { margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds .ds-tt-actions { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 8px; }
html.ds .ds-tt-actions button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--target); padding: 0 14px; border: 0; border-radius: var(--r-pill);
  font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-subhead); white-space: nowrap;
  min-width: 0;
}
/* Neither button can run off the row (readiness review TT2). "Watch with sound" was sized by its own words and could
   not shrink: at a larger text size on a 375pt phone it ran off the right edge. Both may now give way (min-width: 0
   above), and a label that cannot fit ends in an ellipsis inside its own button; the glyph beside it never shrinks.
   The review asked for two equal halves (flex: 1 1 0). That was tried and not kept: half of a 390pt row is 174pt, a
   few points less than "Watch with sound" needs at the ordinary text size, so the label was cut for everyone to guard
   against a size few people use. Sized by their words, as before, the row is unchanged at the ordinary size.
   At 375pt the two labels were still 3-4pt short at the ordinary size ("Open fi…", "Watch with sou…"): 14pt sides and
   a 6pt gap to the glyph give the row back 12pt, so both read whole on every phone (P-SYSTEM, 13 October 2026). */
html.ds .ds-tt-open { flex: 1 1 auto; color: var(--c-lamp-ink); background: var(--c-lamp); }
html.ds .ds-tt-sound { flex: 0 1 auto; color: var(--c-label-1); background: rgba(245, 244, 247, .14); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
html.ds .ds-tt-sound[hidden] { display: none; }
html.ds .ds-tt-actions button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ds .ds-tt-actions svg { flex: none; width: 16px; height: 16px; }

/* split-flap rank: 3D lives only inside each .ds-tt-flap */
html.ds .ds-tt-flaps { display: flex; gap: 4px; align-self: end; }
html.ds .ds-tt-flap {
  position: relative; width: 44px; height: 64px; border-radius: var(--r-control); perspective: 260px;
  font: 700 calc(34 * var(--type-unit))/calc(64 * var(--type-unit)) var(--font-ui); font-variant-numeric: tabular-nums; text-align: center; color: var(--c-label-1);
}
html.ds .ds-tt-flap > span { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: rgba(18, 17, 26, .86); box-shadow: inset 0 0 0 1px var(--c-line-strong); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
html.ds .ds-tt-flap > span > b { position: absolute; left: 0; right: 0; height: 64px; font-weight: 700; transform: scale(1.42); transform-origin: 50% 32px; }
html.ds .ds-tt-flap > .f-top, html.ds .ds-tt-flap > .f-leaf-top { top: 0; border-radius: 10px 10px 0 0; transform-origin: 50% 100%; }
html.ds .ds-tt-flap > .f-bot, html.ds .ds-tt-flap > .f-leaf-bot { bottom: 0; border-radius: 0 0 10px 10px; transform-origin: 50% 0; }
html.ds .ds-tt-flap > :is(.f-top, .f-leaf-top) > b { top: 0; }
html.ds .ds-tt-flap > :is(.f-bot, .f-leaf-bot) > b { bottom: 0; }
html.ds .ds-tt-flap > .f-top, html.ds .ds-tt-flap > .f-leaf-top { background: linear-gradient(180deg, rgba(30, 28, 42, .9), rgba(18, 17, 26, .9)); }
html.ds .ds-tt-flap > .f-leaf-top, html.ds .ds-tt-flap > .f-leaf-bot { z-index: 2; visibility: hidden; }
html.ds .ds-tt-flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; z-index: 3; height: 1px; background: rgba(0, 0, 0, .7); }

/* ---- sealed ranks (TRIPTIC+; owner, 6 October 2026). The server sends a free device nothing of these films, so there
   is nothing here to blur: the row keeps its numeral and its movement, its poster is the sealed slab (.tm-seal, shared
   with Coming Soon: membership.css) and it wears the TRIPTIC+ lock chip a locked Collection wears. The hero of a sealed
   rank is the sealed ranks standing as a row of slabs, the focused one lit; one line; one action.
   (#device in the selectors that place a .tm-seal: membership.css scopes the seal under #device, and the place wins.) */
html.ds .ds-tt-row.is-sealed .ds-tt-row-rank { opacity: .6; }
html.ds .ds-tt-row.is-sealed .ds-tt-row-poster { background: none; }
html.ds #device .ds-tt-row.is-sealed .ds-tt-row-poster .tm-seal { position: absolute; inset: 0; border-radius: inherit; }
html.ds #device .ds-tt-row.is-sealed .ds-tt-row-poster .tm-seal svg { width: 18px; height: 18px; }
html.ds .ds-tt-row.is-sealed .ds-tt-row-copy strong { color: var(--c-label-2); }
html.ds .ds-tt-row.is-sealed .ds-tt-row-copy small { color: var(--c-label-3); }
html.ds #device .ds-ten-fan-card.is-sealed .ds-ten-art .tm-seal { position: absolute; inset: 0; border-radius: inherit; }
html.ds .ds-tt-sealed {
  position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(86% 56% at 50% 40%, rgba(124, 77, 235, .34), rgba(124, 77, 235, 0) 72%), linear-gradient(180deg, rgba(22, 17, 38, 1), var(--c-stage) 92%);
}
html.ds #device .ds-tt-slab {
  position: absolute; left: 50%; top: calc(50% - 56px); width: 68px; height: 102px; margin: -51px 0 0 -34px; border-radius: var(--r-control);
  transform: translate3d(calc(var(--k) * 58px), calc(var(--a) * var(--a) * 5px), 0) rotate(calc(var(--k) * 4deg)); opacity: .5;
}
html.ds #device .ds-tt-slab > b { font: 700 var(--fs-title-3)/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-label-3); }
html.ds #device .ds-tt-slab.is-on {
  z-index: 2; opacity: 1; color: var(--c-lamp);
  transform: translate3d(calc(var(--k) * 58px), calc(var(--a) * var(--a) * 5px - 6px), 0) rotate(calc(var(--k) * 4deg)) scale(1.16);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .6), 0 18px 36px rgba(0, 0, 0, .55), 5px 13px 44px rgba(124, 77, 235, .45);
}
html.ds #device .ds-tt-slab.is-on svg { width: 26px; height: 26px; }
/* the sealed hero's one action: the lock, not the play triangle; and nothing to tap on a picture that is not there */
html.ds .ds-tt-open .is-lock, html.ds .ds-tt-hero.is-sealed .ds-tt-open .is-play { display: none; }
html.ds .ds-tt-hero.is-sealed .ds-tt-open .is-lock { display: block; }
html.ds .ds-tt-hero.is-sealed .ds-tt-copy h1 { color: var(--c-label-1); }
@media (prefers-reduced-transparency: reduce) { html.ds .ds-tt-sealed { background: var(--c-stage-raised); } html.ds #device .ds-tt-slab.is-on { box-shadow: inset 0 0 0 1px var(--c-line-strong); } }
html.ds #device.manual-solid .ds-tt-sealed { background: var(--c-stage-raised); }
html.ds #device.manual-solid .ds-tt-slab.is-on { box-shadow: inset 0 0 0 1px var(--c-line-strong); }

/* states */
html.ds .ds-tt-state { position: absolute; left: 24px; right: 24px; top: 50%; z-index: 7; transform: translateY(-40%); text-align: center; }
html.ds .ds-tt-state h2 { margin: 0 0 6px; font: 700 var(--fs-title-2)/var(--lh-title-2) var(--font-ui); }
html.ds .ds-tt-state p { margin: 0 0 18px; font: 400 var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
html.ds .ds-tt-state button { height: var(--target); padding: 0 20px; border: 0; border-radius: var(--r-pill); font: 600 calc(15 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-ui); color: var(--c-lamp-ink); background: var(--c-lamp); }
html.ds .ds-tt-screen.is-loading .ds-tt-row-poster, html.ds .ds-tt-screen.is-loading .ds-tt-skel { background: var(--c-fill-2); }
html.ds .ds-tt-skel { display: block; height: 12px; border-radius: var(--r-chip); }
html.ds .ds-tt-screen.is-loading .ds-tt-media { background: linear-gradient(180deg, var(--c-fill-1), var(--c-stage)); }

html.ds :is(.ds-ten-card, .ds-tt-screen) button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* ================================================================== preferences */
@media (prefers-reduced-motion: reduce) {
  html.ds .ds-tt-still.is-on img, html.ds .ds-ten-live.is-pulsing > i::after, html.ds .ds-ten-card.is-loading .ds-ten-art { animation: none; }
}
html.ds #device.manual-reduced-motion :is(.ds-tt-still.is-on img, .ds-ten-live.is-pulsing > i::after) { animation: none; }
@media (prefers-reduced-transparency: reduce) {
  html.ds .ds-ten-card { background: var(--c-stage-raised); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
  html.ds .ds-ten-card-glow, html.ds .ds-ten-card-stage::before, html.ds .ds-tt-tint, html.ds .ds-tt-flicker { display: none; }
}
html.ds #device.manual-solid .ds-ten-card { background: var(--c-stage-raised); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
html.ds #device.manual-solid :is(.ds-ten-card-glow, .ds-tt-tint, .ds-tt-flicker) { display: none; }
html.ds #device.manual-solid .ds-ten-card-stage::before { display: none; }

/* ================================================================== THE TEN, refined (20 October 2026, lane CINEMA-LOOK)
   The owner: "Make it look slightly better." Hierarchy, spacing, calm. hub/docs/CINEMA-TYPE-2026-10-20.md.
   - the name is the one marquee word on the card: the condensed cinema face (--font-marquee), cut out of the card with a
     short extruded side in the card's own deep violet (crisp steps, down and right, the light from the upper left; no blur
     on the letters, one soft cast shadow under them);
   - LIVE is a small quiet tag beside it, not a second headline; the line under the name steps back a little;
   - the round chevron is lighter glass (the whole card already opens The Ten);
   - the rank chips are the marquee face's numerals on a thinner chip; the far posters' chips no longer grow as large;
   - VIEW THE TEN keeps its violet but loses most of its glow; the TRIPTIC+ line and "Updated" sit closer, as one footer.
   Sizes, colours and spacing only: the markup, the fan's geometry and every motion are unchanged. */
html.ds .ds-ten-card { padding: 20px 20px 14px; }
html.ds .ds-ten-card-head { row-gap: 3px; }
html.ds .ds-ten-card-title { gap: 10px; align-items: center; }
html.ds .ds-ten-card-title > span:first-child {
  font-family: var(--font-marquee); font-weight: 600; letter-spacing: var(--tr-marquee-title); color: rgba(250, 248, 255, 1);
  text-shadow: 1px 1px 0 rgba(86, 60, 168, 1), 2px 2px 0 rgba(66, 44, 136, 1), 3px 3px 0 rgba(46, 30, 98, 1), 4px 7px 14px rgba(0, 0, 0, .6);
}
html.ds .ds-ten-card .ds-ten-live {
  height: 18px; padding: 0 7px 0 6px; gap: 5px; align-self: center; margin-top: 2px;
  font: 700 calc(10 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-marquee-tag);
  color: color-mix(in srgb, var(--c-danger) 74%, white); background: rgba(10, 10, 14, .52);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-danger) 34%, transparent);
}
html.ds .ds-ten-card .ds-ten-live > i { width: 5px; height: 5px; }
html.ds .ds-ten-card-head p { color: rgba(245, 244, 247, .8); font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
html.ds .ds-ten-card-chevron {
  background: rgba(255, 255, 255, .08); margin: -4px -8px 0 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .22);
}
html.ds .ds-ten-card-chevron svg { width: 16px; height: 16px; opacity: .86; }
/* rank chips: the numerals in the marquee face, a thinner chip; the far ones a touch smaller than before */
html.ds .ds-ten-chip {
  min-width: 24px; height: 20px; padding: 0 6px 0 5px; border-radius: 6px;
  font: 600 calc(14 * var(--type-unit))/calc(20 * var(--type-unit)) var(--font-marquee); letter-spacing: var(--tr-marquee-numeral);
  background: rgba(10, 10, 14, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 1px 2px 6px rgba(0, 0, 0, .28);
}
html.ds .ds-ten-fan-card[data-r="1"] .ds-ten-chip { background: rgba(10, 10, 14, .58); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 1px 2px 8px rgba(0, 0, 0, .32); }
/* VIEW THE TEN: the same violet, a quieter glow */
html.ds .ds-ten-cta {
  margin-top: 6px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c-seal-hi) 38%, transparent), color-mix(in srgb, var(--c-seal-fill) 52%, transparent) 64%, color-mix(in srgb, var(--c-seal-fill) 40%, transparent)),
    rgba(18, 15, 30, .92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 1px color-mix(in srgb, var(--c-seal-hi) 36%, transparent), 2px 8px 18px color-mix(in srgb, var(--c-seal) 18%, transparent);
}
html.ds .ds-ten-cta svg { width: 16px; height: 16px; }
html.ds .ds-ten-cta > span { min-width: 0; white-space: nowrap; } /* one line at every text size */
html.ds[data-text-size]:not([data-text-size="standard"]) .ds-ten-card .ds-ten-cta { padding: 0 34px; letter-spacing: var(--tr-caps); }
html.ds .ds-ten-card-title { flex-wrap: wrap; row-gap: 4px; }
html.ds .ds-ten-cta-go { margin-top: -8px; opacity: .8; }
/* the footer: the TRIPTIC+ line and "Updated", one quiet block */
html.ds .ds-ten-card .ds-ten-sealed-line {
  display: block; min-height: var(--target); margin: 2px 0 -6px; padding: 10px 4px 0; /* a 44pt target on one line too (the Duo's wide card) */ text-align: center; text-wrap: balance;
  font: 400 var(--fs-caption-1)/calc(20 * var(--type-unit)) var(--font-ui); color: var(--c-label-2);
}
html.ds .ds-ten-card .ds-ten-sealed-line > span { vertical-align: middle; }
html.ds #device .ds-ten-card .ds-ten-sealed-line .tm-lock-chip { display: inline-flex; vertical-align: middle; height: 20px; margin-left: 6px; padding: 0 7px; }
html.ds .ds-ten-card .ds-ten-credit { margin-top: 6px; font-size: var(--fs-caption-2); line-height: var(--lh-caption-2); color: var(--c-label-3); letter-spacing: var(--tr-caption-2); }
html.ds[data-device-w="narrow"] .ds-ten-card { padding: 18px 16px 12px; }
@media (forced-colors: active) { html.ds .ds-ten-card-title > span:first-child { text-shadow: none; } }


/* ================================================================== pages polish, 28 October 2026 (the owner's The Ten room)
   - the preview's own pause / play: a round button on a soft dark backing, legible over any frame. Shown 2s from the start of
     playback and after a touch, then faded; always shown while the preview is held, and when it has focus (VoiceOver, keyboard).
     It is never display:none, so VoiceOver always finds it. Only while a preview is playing or held. */
html.ds .ds-tt-pp {
  position: absolute; z-index: 4; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 64px; height: 64px; margin: 0; padding: 0;
  /* (10 November 2026, the owner: "2 pause buttons", then "make it look more beautiful as a pause button".) YouTube draws its own
     pause / play mark at the centre of its picture for a moment when the preview changes state, and nothing inside its frame can be
     styled: so ours sits on the picture's exact centre (the iframe is centred at 50% / 50%) and its face is SOLID, which covers
     YouTube's. The face is the room's own dark, lit a little from above like a lens; a fine gold ring (the ticket's gold); the two
     bars are solid cream with round ends, the play mark the same cream. It gives a little under the finger. */
  border: 0; border-radius: 50%; color: var(--c-lamp);
  background: radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--c-label-1) 16%, var(--c-stage)) 0%, var(--c-stage) 62%);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c-plus-gold) 70%, transparent), 0 0 0 5px color-mix(in srgb, var(--c-stage) 38%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--c-label-1) 26%, transparent), inset 0 -10px 18px rgba(0, 0, 0, .35), 0 12px 30px rgba(0, 0, 0, .55);
  opacity: 0; pointer-events: none; transition: opacity var(--motion-fast) var(--motion-curve), scale var(--motion-fast) var(--motion-curve);
}
html.ds .ds-tt-pp:active { scale: .94; }
html.ds .ds-tt-pp .is-pause path { stroke-width: 3.4; }
html.ds .ds-tt-pp .is-play { translate: 1px 0; }
html.ds .ds-tt-pp svg { width: 26px; height: 26px; }
html.ds .ds-tt-pp .is-play, html.ds .ds-tt-hero.is-held .ds-tt-pp .is-pause { display: none; }
html.ds .ds-tt-hero.is-held .ds-tt-pp .is-play { display: block; }
html.ds .ds-tt-hero:is(.is-video, .is-held):is(.is-controls, .is-held) .ds-tt-pp, html.ds .ds-tt-hero .ds-tt-pp:focus-visible { opacity: 1; pointer-events: auto; }
html.ds .ds-tt-hero:is(.is-expanded, .is-sealed) .ds-tt-pp { display: none; }
@media (prefers-reduced-motion: reduce) { html.ds .ds-tt-pp { transition: none; } }
/* - the sealed hero's slabs (the owner: the lit card hid most of the next and showed a lock instead of its number): every slab
     keeps its number, the lit one adds a small lock over it and stands only a little larger; the slabs are spaced by one even
     step that fits the width (SE 320 to iPad), so each overlaps the next by the same amount. No poster is drawn behind them:
     the server sends a free device nothing of a sealed film (no title, no poster, no address of one), so there is no real
     picture to blur without making one on the server; until then the slabs stay a drawing. */
html.ds .ds-tt-sealed { container-type: size; }
html.ds #device .ds-tt-slab { --step: min(62px, calc((100cqi - 88px) / 4)); display: grid; place-items: center; align-content: center; gap: 4px;
  transform: translate3d(calc(var(--k) * var(--step)), calc(var(--a) * var(--a) * 5px), 0) rotate(calc(var(--k) * 4deg)); }
html.ds #device .ds-tt-slab.is-on {
  transform: translate3d(calc(var(--k) * var(--step)), calc(var(--a) * var(--a) * 5px - 6px), 0) rotate(calc(var(--k) * 4deg)) scale(1.06);
}
html.ds #device .ds-tt-slab.is-on svg { width: 14px; height: 14px; }
html.ds #device .ds-tt-slab.is-on > b { color: var(--c-lamp); }

/* ================================================================== one movement look, card and room (pages polish, 28 October
   2026, 18:50; the owner: Release 1's two outlined chips per poster covered the art, the narrow back posters most of all)
   - one small chip per poster: "#3 ↓1", "#2 NEW", "#1" (nothing for a film that held its place); the back posters #4 and #5 the
     rank only. A soft dark backing, small type, no outline box.
   - the room's marks wear the same: no outline, the same backing, the same colours; "held its place" is not drawn (VoiceOver
     still hears "same as yesterday"). */
html.ds .ds-ten-card .ds-ten-chip, html.ds .ds-ten-card .ds-ten-fan-card[data-r="1"] .ds-ten-chip {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; width: auto; height: 18px; padding: 0 6px; border-radius: 6px;
  background: rgba(10, 10, 14, .58); box-shadow: 0 1px 6px rgba(0, 0, 0, .3);
  font: 600 calc(11 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--c-label-1);
}
html.ds .ds-ten-card .ds-ten-chip > b { font: inherit; }
/* (29 October 2026, the evenly stepped fan) a chip behind #1 is drawn in its poster's visible share (.44 of #1's width): the
   compact form (a tighter backing, the movement a size down beside the rank) at the size of its poster; on a narrow card a
   touch smaller, and on the narrowest (the Duo's inner card) the back chips keep the rank only (VoiceOver still hears the move) */
html.ds .ds-ten-card .ds-ten-fan-card:not([data-r="1"]) .ds-ten-chip { right: 4px; gap: 2px; padding: 0 4px; transform: scale(calc(var(--k) * var(--cs, 1))); }
html.ds .ds-ten-card .ds-ten-fan-card:not([data-r="1"]) .ds-ten-chip > i { font-size: .84em; }
@container (max-width: 300px) { html.ds .ds-ten-card .ds-ten-fan-card { --cs: .84; } }
@container (max-width: 230px) { html.ds .ds-ten-card .ds-ten-fan-card:not([data-r="1"]) .ds-ten-chip > i { display: none; } }
html.ds .ds-ten-card .ds-ten-chip > i { font-style: normal; font-weight: 700; }
html.ds :is(.ds-ten-chip, .ds-tt-badge)[data-move="up"] > i, html.ds .ds-tt-badge[data-move="up"] { color: var(--c-ok); }
html.ds :is(.ds-ten-chip, .ds-tt-badge)[data-move="down"] > i, html.ds .ds-tt-badge[data-move="down"] { color: var(--c-danger); }
html.ds :is(.ds-ten-chip, .ds-tt-badge)[data-move="new"] > i, html.ds .ds-tt-badge[data-move="new"] { color: var(--c-seal-hi); letter-spacing: var(--tr-eyebrow); }
html.ds .ds-tt-badge, html.ds .ds-tt-badge[data-move] {
  height: 18px; min-width: 0; padding: 0 6px; border-radius: 6px; background: rgba(10, 10, 14, .58); box-shadow: none;
  font: 700 calc(11 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui);
}
/* held its place: nothing to see, still said */
html.ds .ds-tt-badge[data-move="same"] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the line under the fan: a small lock and "Numbers 6 to 10 are unlocked with TRIPTIC+", plain words; the whole line opens membership */
html.ds .ds-ten-card .ds-ten-sealed-line { display: block; width: 100%; text-align: center; text-wrap: balance; }   /* the lock sits with the first word, also when the line wraps (SE 320) */
html.ds .ds-ten-card .ds-ten-sealed-line .ds-ten-sealed-lock { display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px; opacity: .8; }

/* ================================================================== one fan of all ten for TRIPTIC+ (5 November 2026; the owner, a
   member: "think of a better way to display on premium"; replaces 29 October's strip of #6 to #10 under the fan, and "All ten")
   A member's stage (.is-ten) holds one fan of all ten in a reel (.ds-ten-reel) that slides sideways with the finger's own
   momentum; the floor stays where it is and the posters pass over it. The fan is the free fan carried on: #1 to #5 in the same
   places (x, scale, depth), #6 to #10 stepping on down (.53 to .45 of #1) and each showing a little less past the one in front
   (.42 to .47 of #1's width: the two-digit #10 and its movement need the room), so it still reads as one descending fan. Measured in --pw, the poster width; the whole fan is 4.82
   poster widths from #1's left edge to #10's right. --pw is chosen so that at rest #1 to #5 stand where the free card has them
   and #6 peeks past the right edge, under a soft fade (the reel's own scroll timeline); at the end #10 stands
   inside the card with the same 22pt margin #1 has at the start. A card wide enough for all ten (iPad, the Duo held open)
   centres it and has nothing to slide. The stage keeps the free card's height: no second row, no extra line.
   The depth is the ten's own: the reel scrolls, so the perspective is on the fan itself (.ds-ten-fan), never on the scroller. */
html.ds #device .ds-ten-card-stage.is-ten {
  --pw: 104px;
  --lead: 22px;
  perspective: none;
}
@supports (width: 1cqw) {
  html.ds #device .ds-ten-card-stage.is-ten {
    --pw: min(120px, calc((100cqw + 14px) / 3));
    --lead: max(22px, calc((100cqw + 36px - var(--pw) * 4.82) / 2));
  }
}
html.ds .ds-ten-reel {
  position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y;
}
html.ds .ds-ten-reel::-webkit-scrollbar { display: none; }
/* the fades follow the reel's own scroll (bigscreen-layout.css's row fades, the same way): at rest only the right edge fades
   (#6 peeks under it), in between both, at the end only the left (#10 stands clear). A reel with nothing to scroll has an
   inactive timeline and no mask; a browser without scroll timelines draws no fade (nothing is ever faded that should show). */
@property --ten-fl { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ten-fr { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes ds-ten-reel-fade { 0% { --ten-fl: 0px; --ten-fr: 30px; } 8% { --ten-fl: 30px; } 92% { --ten-fr: 30px; } 100% { --ten-fl: 30px; --ten-fr: 0px; } }
@keyframes ds-ten-reel-mask {
  from, to {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black var(--ten-fl), black calc(100% - var(--ten-fr)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, black var(--ten-fl), black calc(100% - var(--ten-fr)), transparent 100%);
  }
}
@supports (animation-timeline: scroll(self inline)) {
  html.ds .ds-ten-reel { animation: ds-ten-reel-fade linear both, ds-ten-reel-mask linear both; animation-timeline: scroll(self inline), scroll(self inline); }
}
@media (prefers-reduced-transparency: reduce) { html.ds .ds-ten-reel { animation: none; } }
html.ds .is-ten .ds-ten-fan {
  right: auto; width: calc(var(--lead) * 2 + var(--pw) * 4.82);
  perspective: calc(var(--pw) * 6.2); perspective-origin: calc(50cqw + 18px) calc(100% - var(--pw) * .36);
}
html.ds .is-ten .ds-ten-fan-card { left: var(--lead); z-index: calc(10 - var(--i)); }
html.ds .is-ten .ds-ten-fan-card[data-r="6"] { --x: 2.415; --z: -.15; --ry: 0deg; --s: .53; --i: 5; --k: 1.58; --dim: .36; }
html.ds .is-ten .ds-ten-fan-card[data-r="7"] { --x: 2.825; --z: -.18; --ry: 0deg; --s: .51; --i: 6; --k: 1.65; --dim: .39; }
html.ds .is-ten .ds-ten-fan-card[data-r="8"] { --x: 3.225; --z: -.21; --ry: 0deg; --s: .49; --i: 7; --k: 1.71; --dim: .42; }
html.ds .is-ten .ds-ten-fan-card[data-r="9"] { --x: 3.655; --z: -.24; --ry: 0deg; --s: .47; --i: 8; --k: 1.79; --dim: .45; }
html.ds .is-ten .ds-ten-fan-card[data-r="10"] { --x: 4.095; --z: -.27; --ry: 0deg; --s: .45; --i: 9; --k: 1.87; --dim: .48; }
/* the last two show the least: their chips (a two-digit #10, "NEW") come down a little so they stand in the share that shows */
html.ds .ds-ten-card .is-ten .ds-ten-fan-card:is([data-r="9"], [data-r="10"]) { --cs: .86; }
@container (max-width: 300px) { html.ds .ds-ten-card .is-ten .ds-ten-fan-card:is([data-r="9"], [data-r="10"]) { --cs: .7; } }
/* the idle drift turns the fan itself (its perspective is its own: the scroller holds none) */
@keyframes ds-ten-drift-ten { from { transform: perspective(calc(var(--pw) * 6.2)) rotateY(0deg) translate3d(0, 0, 0); } to { transform: perspective(calc(var(--pw) * 6.2)) rotateY(.6deg) translate3d(0, -1px, 0); } }
html.ds .ds-ten-card[data-fan="rest"] .is-ten .ds-ten-fan { animation-name: ds-ten-drift-ten; }

/* (final review R1, 14 November 2026) A 320pt-wide phone (iPhone SE with Display Zoom) at the ordinary text size: the hero's
   two buttons read "Open fil…" and "Watch with sou…". The hero takes the answer the larger text sizes already use (ds-text-size.css): the sound button becomes
   its round speaker (its words kept for VoiceOver; the hero picture is its labelled twin) and "Open film" takes the row. */
@media (max-width: 350px) {
  html.ds .ds-tt-sound { flex: none; width: var(--target); padding: 0; }
  html.ds .ds-tt-sound > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ===== prototype-src/ds-coming-soon.css ===== */
/* TRIPTIC ds-coming-soon: CINEMA (owner, 14 October 2026; the split-flap date lines 15 October). Runtime pair: ds-coming-soon.js. Spec:
   hub/docs/NOWNEXT-2026-10-14.md (this row), hub/docs/COMING-SOON-2026-10-02.md (the Coming Soon it grew from). The out-now
   half's own looks (the Tickets action, its lock) are in cinemas-now.css. Lives in Today > the Cinema section (.ds-now-next,
   ds-today.css), after THE TEN.
   ONE row, in date order, left to right: the films that are out, a quiet "Today" marker, the films that are coming. Under
   the posters one rail: solid up to the marker (it has happened), dotted beyond it (it is yet to come), a node under each
   film. The row is a native scroll list that bleeds to the page's edges (the brand gutter); the script opens it with the
   marker in the middle of the screen. Sizes: --pw is a poster's width, --gap the space between films; one film plus a gap
   is a whole number of the rail's 6px pattern, so the dots run on from card to card without a seam (126 + 12, 102 + 12,
   132 + 12, 138 + 12; the marker 42 + 12).
   Motion: transform/opacity only, and only the first arrival (the cards nearest the marker open outward from it, once).
   Reduce Motion / the "reduced" tier ([data-flat]): the row is simply there. Nothing loops, nothing moves at rest.
   No CSS filter and no backdrop-filter anywhere in this layer. No raw hex: tokens, rgba() and color-mix() only.
   !important: none. */

html.ds .ds-cs {
  --pw: 126px; --gap: 12px; --pad: var(--triptic-brand-gutter, 22px); --mk: 42px; --rail: 28px;
  position: relative; display: block; margin: 0; padding: 0; color: var(--c-label-1); -webkit-tap-highlight-color: transparent;
}
html.ds .ds-ten-card + .ds-cs { margin-top: var(--section-gap); }

/* ---- head: the name, one word ("Cinema"), nothing under it */
html.ds .ds-cs-head { margin: 0 0 var(--sp-3); padding: 0; }
html.ds .ds-cs-title { margin: 0; font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2); color: var(--c-label-1); text-wrap: balance; }
/* (20 October 2026, lane CINEMA-LOOK; hub/docs/CINEMA-TYPE-2026-10-20.md) THE LETTERBOARD: the one word set as a cinema's backlit
   board (the owner's photograph of the Criterion): warm white, black condensed letters on their channel, a dark frame. Still,
   small, the section's name and nothing more; the heading is still the word "Cinema" (VoiceOver reads it as written). */
html.ds .ds-cs-head { display: flex; align-items: center; }
html.ds .ds-cs-title {
  display: inline-block; position: relative; margin: 0 0 0 2px; padding: calc(6 * var(--type-unit)) calc(9 * var(--type-unit)) calc(5 * var(--type-unit)) calc(12 * var(--type-unit));
  border-radius: var(--marquee-corner); font: 600 calc(20 * var(--type-unit))/calc(23 * var(--type-unit)) var(--font-marquee); letter-spacing: var(--tr-marquee); text-transform: uppercase;
  color: var(--marquee-letter);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 3px, rgba(0, 0, 0, .13) 3px 4px, rgba(0, 0, 0, 0) 4px calc(100% - 4px), rgba(0, 0, 0, .13) calc(100% - 4px) calc(100% - 3px), rgba(0, 0, 0, 0) calc(100% - 3px)),
    linear-gradient(180deg, var(--marquee-board), var(--marquee-board-lo));
  box-shadow: 0 0 0 2px var(--marquee-frame), 2px 10px 24px rgba(236, 229, 211, .1);
}
@media (forced-colors: active) { html.ds .ds-cs-title { background: Canvas; color: CanvasText; border: 1px solid CanvasText; } }

/* ---- the row: native momentum, a gentle snap, no bar. Both axes stay the browser's: a sideways drag moves the row, an
   up/down drag that starts on a poster scrolls the page. */
html.ds .ds-cs-stage { position: relative; margin: 0 calc(var(--pad) * -1); }
html.ds .ds-cs-reel {
  position: relative; display: flex; align-items: stretch; margin: 0; padding: 0 var(--pad) var(--sp-1); list-style: none;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: var(--pad); overscroll-behavior-x: contain; scrollbar-width: none;
  touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch;
}
html.ds .ds-cs-reel::-webkit-scrollbar { display: none; }
/* (every film stands as tall as the tallest: the action sits at the foot of its column, so the actions line up along the row
   whether a date takes one line or two) */
html.ds .ds-cs-item {
  position: relative; display: flex; flex-direction: column; flex: 0 0 var(--pw); width: var(--pw); min-width: 0; margin: 0 var(--gap) 0 0; padding: var(--rail) 0 0; scroll-snap-align: start;
  list-style: none;
}
html.ds .ds-cs-item:last-child { margin-right: 0; }

/* ---- the rail and its nodes (static: nothing here moves) */
html.ds .ds-cs-item::before, html.ds .ds-cs-today::before, html.ds .ds-cs-today::after {
  content: ""; position: absolute; top: 12px; height: 2px; pointer-events: none;
  left: calc(var(--gap) / -2); right: calc(var(--gap) / -2); background: var(--c-line-strong);
}
html.ds .ds-cs-item.is-next::before, html.ds .ds-cs-item-end::before, html.ds .ds-cs-today::after {
  background: repeating-linear-gradient(90deg, var(--c-line-strong) 0 3px, transparent 3px 6px);
}
html.ds .ds-cs-item:not(.ds-cs-today):first-child::before { left: 0; }
html.ds .ds-cs-item:not(.ds-cs-today):last-child::before { right: 0; }
html.ds .ds-cs-item:not(.ds-cs-today)::after {
  content: ""; position: absolute; top: 8px; left: calc(50% - 5px); width: 10px; height: 10px; border-radius: var(--r-pill); pointer-events: none;
  background: var(--c-label-3);
}
html.ds .ds-cs-item.is-next:not(.ds-cs-today)::after { background: var(--c-lamp); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-lamp) 18%, transparent); }
html.ds .ds-cs-item-end:not(.ds-cs-today)::after { background: var(--c-seal-hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-seal-hi) 20%, transparent); }

/* ---- the marker: "Today", a hairline down through the row, the rail's solid half behind it and dotted half ahead */
html.ds .ds-cs-today { flex: 0 0 var(--mk); width: var(--mk); align-self: stretch; margin: 0 var(--gap) 0 0; padding: 0; scroll-snap-align: center; }
html.ds .ds-cs-today::before { left: calc(var(--gap) / -2); right: 50%; }
html.ds .ds-cs-today::after { left: 50%; right: calc(var(--gap) / -2); }
html.ds .ds-cs-today-tag {
  position: absolute; z-index: 1; top: 0; left: 50%; display: grid; place-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  transform: translateX(-50%); background: var(--c-lamp); color: var(--c-lamp-ink); white-space: nowrap;
  font: var(--fw-caption-1-strong, 700) var(--fs-caption-1)/1 var(--font-ui); letter-spacing: var(--tr-caption-1);
}
html.ds .ds-cs-today-line {
  position: absolute; top: 24px; bottom: 0; left: calc(50% - .5px); width: 1px; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-lamp) 60%, transparent), color-mix(in srgb, var(--c-lamp) 0%, transparent));
}
html.ds .ds-cs-sr-text { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- a film: its poster (2:3), its title, its date in words */
html.ds .ds-cs-card {
  position: relative; display: block; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: var(--r-control);
  background: none; color: inherit; text-align: left; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
html.ds .ds-cs-art {
  position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--r-control);
  background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line), var(--e-2);
}
html.ds .ds-cs-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
html.ds .ds-cs-art .ds-poster-fallback { position: absolute; inset: 0; border-radius: inherit; padding: 10px; }
html.ds .ds-cs-art .ds-poster-fallback .ds-pf-year { display: none; }
html.ds .ds-cs-art::after { /* lit from above: a bright top edge and a hairline */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 18%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .3);
}
html.ds .ds-cs-card[aria-busy="true"] .ds-cs-art { opacity: .85; }
/* room for two lines of title and the date under it on every card, so the row's height is known before the films are */
/* (20 October 2026, lane CINEMA-LOOK) one column exactly the poster's width: the track was sized by its content, so on the
   iPhone a board could push it wider than the card. The title always keeps its whole room (--tl lines of --lh), so every
   board in the row stands at the same height and no line is cut through; a longer title ends in an ellipsis. */
html.ds .ds-cs-copy { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1px; width: 100%; min-width: 0; min-height: calc(50 * var(--type-unit)); margin: 8px 0 0; }
html.ds .ds-cs-copy strong {
  --tl: 2; --lh: calc(17 * var(--type-unit));
  display: -webkit-box; -webkit-line-clamp: var(--tl); line-clamp: var(--tl); -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word;
  font: 500 var(--fs-footnote)/var(--lh) var(--font-ui); color: var(--c-label-1); text-wrap: pretty;
}
html.ds .ds-cs-item:not(.ds-cs-item-end) .ds-cs-copy strong { height: calc(var(--lh) * var(--tl)); }
html.ds .ds-cs-copy small {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance;
  font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); font-variant-numeric: tabular-nums; color: var(--c-label-2);
}
/* ---- the date line, a small split-flap in digital-clock style (script: flapsHtml; it turns on arrival and at the day change only).
   One cell per letter, sized from the poster's width so "WEDNESDAY" and "180 DAYS" fit; 3D lives only inside each cell. */
/* (20 October 2026) Every size comes from the poster's width (--pw), never from the line's content or a container query, so
   the board is the card's width on every engine, from the first frame: --in is the room inside it for the letters. */
html.ds .ds-cs-copy small.ds-cs-when, html.ds[data-text-size]:not([data-text-size="standard"]) .ds-cs-copy small.ds-cs-when {
  --in: var(--pw); display: block; width: 100%; max-width: var(--pw); -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; margin-top: 3px;
}
html.ds .ds-cs-flaps {
  --cw: min(15px, calc((var(--in) - (var(--n, 8) - 1) * 2px) / var(--n, 8))); --fh: calc(var(--cw) * 1.5);
  display: flex; align-items: stretch; gap: 2px; height: var(--fh); color: rgba(245, 244, 247, .8);
}
html.ds .ds-cs-item.is-next .ds-cs-flaps { color: var(--c-lamp); }
html.ds .ds-cs-flaps > .f {
  position: relative; flex: none; width: var(--cw); height: var(--fh); border-radius: calc(var(--r-chip)/2); perspective: 160px;
  font: 700 calc(var(--cw) * 1.02)/var(--fh) var(--font-ui); font-variant-numeric: tabular-nums; text-align: center; letter-spacing: 0;
}
html.ds .ds-cs-flaps > .f-gap { flex: none; width: calc(var(--cw) * .55); }
html.ds .ds-cs-flaps > .f > u {
  position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; text-decoration: none; background: rgba(20, 19, 28, 1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
html.ds .ds-cs-flaps > .f > u > b { position: absolute; left: 0; right: 0; height: var(--fh); font-weight: 700; }
html.ds .ds-cs-flaps > .f > :is(.f-top, .f-leaf-top) { top: 0; border-radius: calc(var(--r-chip)/2) calc(var(--r-chip)/2) 0 0; transform-origin: 50% 100%; background: linear-gradient(180deg, rgba(38, 36, 50, 1), rgba(24, 23, 33, 1)); }
html.ds .ds-cs-flaps > .f > :is(.f-bot, .f-leaf-bot) { bottom: 0; border-radius: 0 0 calc(var(--r-chip)/2) calc(var(--r-chip)/2); transform-origin: 50% 0; }
html.ds .ds-cs-flaps > .f > :is(.f-top, .f-leaf-top) > b { top: 0; }
html.ds .ds-cs-flaps > .f > :is(.f-bot, .f-leaf-bot) > b { bottom: 0; }
html.ds .ds-cs-flaps > .f > :is(.f-leaf-top, .f-leaf-bot) { z-index: 2; }
/* the turn (script: flipCell): the old letter's top leaf falls, then the new letter's bottom leaf lands; transform only */
@keyframes ds-cs-fall { from { transform: rotateX(0deg); } to { transform: rotateX(-90deg); } }
@keyframes ds-cs-land { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } }
html.ds .ds-cs-flaps > .f > .f-leaf-top { animation: ds-cs-fall var(--motion-press) var(--motion-curve) var(--d, 0ms) both; }
html.ds .ds-cs-flaps > .f > .f-leaf-bot { animation: ds-cs-land var(--motion-fast) var(--motion-curve) calc(var(--d, 0ms) + var(--motion-press)) both; }
html.ds .ds-cs[data-flat] .ds-cs-flaps .f-leaf-top, html.ds .ds-cs[data-flat] .ds-cs-flaps .f-leaf-bot { display: none; }
@media (prefers-reduced-motion: reduce) { html.ds .ds-cs-flaps .f-leaf-top, html.ds .ds-cs-flaps .f-leaf-bot { display: none; } }
html.ds .ds-cs-flaps > .f::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; z-index: 3; height: 1px; margin-top: -.5px; background: rgba(0, 0, 0, .8); }
html.ds .ds-cs-card:focus-visible, html.ds .ds-cs-act:focus-visible { outline: 2px solid var(--c-lamp); outline-offset: 3px; }

/* ---- the one action under a film: Tickets (out; cinemas-now.css), or Remind me and Add to Calendar (coming) */
html.ds .ds-cs-act {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: var(--target); margin: 0; padding: 0 10px; border: 0; border-radius: var(--r-pill);
  background: var(--c-fill-2); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-label-1); white-space: nowrap; cursor: pointer;
  font: 600 var(--fs-footnote)/1 var(--font-ui); letter-spacing: var(--tr-footnote); -webkit-tap-highlight-color: transparent;
  transition: scale var(--motion-fast) var(--motion-curve);
}
html.ds .ds-cs-act:active { scale: .97; background: var(--c-fill-press, var(--c-fill-2)); }
html.ds .ds-cs-act svg { flex: none; width: 17px; height: 17px; }
html.ds .ds-cs-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 8px 0 0; }
/* (release polish, 28 October 2026; the owner: "unlabelled icon buttons") Remind me and Calendar each say what they do under their
   icon. At rest both are the same neutral button (the calendar used to wear the lamp's tint: a "selected" look with no reason).
   Done is clearly done: a check on the success colour's ground, and the word says it ("Reminder on", "Added"). */
html.ds .ds-cs-acts > .ds-cs-act { flex-direction: column; gap: 3px; height: auto; min-height: 52px; padding: 7px 2px 6px; border-radius: var(--r-control); }
html.ds .ds-cs-acts > .ds-cs-act svg { width: 18px; height: 18px; }
html.ds .ds-cs-act-word { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: 500 var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-caption-2); color: var(--c-label-2); }
html.ds .ds-cs-act-word.is-on, html.ds .ds-cs-act .is-check { display: none; }
@media (max-width: 340px) { html.ds .ds-cs-act-word { font-size: calc(10 * var(--type-unit)); letter-spacing: 0; text-overflow: clip; } }
html.ds .ds-cs-acts[data-saved="1"] .ds-cs-remind, html.ds .ds-cs-acts[data-cal="1"] .ds-cs-cal { background: color-mix(in srgb, var(--c-ok) 16%, var(--c-fill-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ok) 46%, transparent); }
html.ds .ds-cs-acts[data-saved="1"] .ds-cs-remind :is(.is-bell, .is-off), html.ds .ds-cs-acts[data-cal="1"] .ds-cs-cal :is(.is-cal, .is-off) { display: none; }
html.ds .ds-cs-acts[data-saved="1"] .ds-cs-remind .is-check, html.ds .ds-cs-acts[data-cal="1"] .ds-cs-cal .is-check { display: block; color: var(--c-ok); stroke-width: 2.6; }
html.ds .ds-cs-acts[data-saved="1"] .ds-cs-remind .is-on, html.ds .ds-cs-acts[data-cal="1"] .ds-cs-cal .is-on { display: block; color: var(--c-label-1); }
html.ds .ds-cs-item > .ds-cs-act, html.ds .ds-cs-item > .ds-cs-acts { margin-top: auto; }
html.ds .ds-cs-item > .ds-cs-act { flex: none; width: 100%; }
html.ds .ds-cs-item > .ds-cs-card { flex: none; margin-bottom: 8px; width: 100%; }
html.ds .ds-cs-sr { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- the last stop. A free device: ONE sealed poster (.tm-seal, the slab The Ten's sealed ranks use: membership.css) that
   opens membership. The whole window: the film leader, as the row's honest end. (#device where a .tm-seal is placed: the
   seal is scoped under #device.) */
html.ds #device .ds-cs-seal { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .34); }
html.ds #device .ds-cs-seal svg { width: 28px; height: 28px; color: var(--c-seal-hi); }
html.ds .ds-cs-end .ds-cs-art { background: none; }
html.ds .ds-cs-end .ds-cs-copy small { white-space: normal; }
html.ds .ds-cs-end .ds-cs-copy small b { font-weight: 600; color: var(--c-label-1); }
html.ds .ds-cs-stop[data-cs-end="done"] { cursor: default; outline: none; color: var(--c-label-2); }
html.ds .ds-cs-stop .ds-cs-art.ds-cs-done { display: grid; place-items: center; color: rgba(245, 244, 247, .4); background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); }
html.ds .ds-cs-done svg { display: block; width: 66%; height: auto; }

/* ---- first arrival: the cards nearest the marker open outward from it as the row is seen (script)
   (29 October 2026; the owner, rec-1328: "Really slow to load this cinema section all of a sudden") they were held at opacity 0
   until 40% of the row was on screen, then faded in over 280ms with a 70ms stagger: on his phone the row stood EMPTY for half a
   second after the Cinema label and the timeline had arrived, then faded up over another half. Now the cards are always drawn
   (their posters are fetched with the row, eagerly, while Today stands); the arrival is a short settle outward from the marker,
   transform only, the fast token (200ms) with a 25ms step: nothing is ever hidden, so no frame is empty. hub/docs/TEN-FAN-2026-10-29.md */
@keyframes ds-cs-open { from { transform: translate3d(calc(var(--dir, 1) * 10px), 0, 0); } to { transform: none; } }
@keyframes ds-cs-breathe { from { opacity: .5; } to { opacity: 1; } }
html.ds .ds-cs-item.is-out { --dir: 1; }
html.ds .ds-cs-item.is-next { --dir: -1; }
html.ds .ds-cs[data-reel="open"] .ds-cs-item.is-near > :is(.ds-cs-card, .ds-cs-act, .ds-cs-acts) { animation: ds-cs-open var(--motion-fast) var(--motion-curve) calc(var(--k, 0) * 25ms) both; }

/* ---- first load: a skeleton in the same places (never a made-up film) */
html.ds .ds-cs.is-loading .ds-cs-reel { overflow: hidden; }
html.ds .ds-cs.is-loading .ds-cs-art { animation: ds-cs-breathe var(--motion-slow) var(--motion-curve) 8 alternate both; box-shadow: none; }
html.ds .ds-cs.is-loading .ds-cs-art::after { display: none; }
html.ds .ds-cs.is-loading .ds-cs-card { cursor: default; }
html.ds .ds-cs.is-loading .ds-cs-copy { margin-bottom: var(--target); } /* (the action's room, so nothing below moves when the films arrive) */
html.ds .ds-cs-skel { display: block; height: calc(13 * var(--type-unit)); width: 78%; margin-top: calc(2 * var(--type-unit)); border-radius: var(--r-chip); background: var(--c-fill-2); }
html.ds .ds-cs-skel + .ds-cs-skel { width: 46%; height: calc(11 * var(--type-unit)); margin-top: calc(6 * var(--type-unit)); }

/* ---- flat row (Reduce Motion, the app's switch, the "reduced" motion tier): the row is simply there */
html.ds .ds-cs[data-flat] .ds-cs-item > * { animation: none; }
html.ds .ds-cs[data-flat].is-loading .ds-cs-art { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html.ds .ds-cs .ds-cs-item > *, html.ds .ds-cs.is-loading .ds-cs-art { animation: none; }
  html.ds .ds-cs .ds-cs-act { transition: none; }
}
html.ds.reduce-motion .ds-cs .ds-cs-act, html.ds #device.manual-reduced-motion .ds-cs .ds-cs-act { transition: none; }

/* ---- phone sizes (device-fit): a short screen takes a smaller poster, a tall one and the larger screens a larger one */
html.ds[data-device-h="compact"] .ds-cs { --pw: 102px; }
html.ds[data-device-h="tall"] .ds-cs { --pw: 132px; }
@media (min-width: 600px) { html.ds .ds-cs { --pw: 138px; } }
html.ds[data-device-h="compact"] .ds-cs-head { margin-bottom: var(--sp-2); }

/* ---- the largest text: the actions keep their words, the posters keep their width */
html.ds[data-text-size]:not([data-text-size="standard"]) .ds-cs-tix-icon { display: none; }
html.ds[data-text-size="larger"] .ds-cs { --pw: 132px; }
html.ds[data-text-size="largest"] .ds-cs { --pw: 138px; }
html.ds[data-text-size]:not([data-text-size="standard"]) .ds-cs-copy small { -webkit-line-clamp: 3; line-clamp: 3; }
html.ds[data-text-size]:not([data-text-size="standard"]) .ds-cs-end .ds-cs-copy small { -webkit-line-clamp: unset; line-clamp: unset; display: block; }

@media (forced-colors: active) {
  html.ds .ds-cs-item::before, html.ds .ds-cs-today::before, html.ds .ds-cs-today::after { background: CanvasText; }
  html.ds .ds-cs-item::after, html.ds .ds-cs-today-tag { background: CanvasText; color: Canvas; }
  html.ds .ds-cs-art { border: 1px solid CanvasText; }
  html.ds .ds-cs-act { border: 1px solid ButtonText; }
}

/* (17 October 2026, lane ART-C; hub/docs/SCENE-ART-2026-10-17.md) THE BOARD: each date line sits on the owner's lit letterboard, a
   still layer of its own (.ds-cs-board.art-layer; the picture is squared up and made long and low by scripts/build-scene-art.mjs).
   The line takes the board's shape and the app's own flaps, unchanged, sit centred on its dark middle (inside the bulbs).
   (20 October 2026, lane CINEMA-LOOK; hub/docs/CINEMA-TYPE-2026-10-20.md) The owner's phone showed the board wider than its card,
   over the next one and cut at the screen's edge, and arriving late (plain flaps first, then the bulbs). Now: the board is
   exactly the card's width and its height is the picture's own proportion of that width (no aspect-ratio, no intrinsic size,
   nothing can make it larger), it clips anything inside it, and a drawn plate in the same shape stands in until the picture
   (loaded eagerly, ds-coming-soon.js boardHtml) is there, so nothing changes size when it arrives. */
html.ds .ds-cs-copy small.ds-cs-when.has-board,
html.ds[data-text-size]:not([data-text-size="standard"]) .ds-cs-copy small.ds-cs-when.has-board {
  --in: calc(var(--pw) * .78 - 6px);
  --board-r: calc(var(--pw) * .09); /* the board's corner, the picture's own, in proportion to the card */
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: var(--pw); height: calc(var(--pw) * 61 / 160);
  padding: 0; margin-top: 6px; overflow: hidden; border-radius: var(--board-r);
  background: radial-gradient(70% 60% at 50% 50%, rgba(18, 14, 22, 1) 55%, rgba(18, 14, 22, 0) 100%), linear-gradient(180deg, rgba(120, 82, 36, .5), rgba(70, 44, 18, .55));
}
html.ds .ds-cs-when.has-board > .ds-cs-board { position: absolute; inset: 0; z-index: 0; }
html.ds .ds-cs-when.has-board .ds-cs-board-img { display: block; width: 100%; height: 100%; object-fit: fill; }
html.ds .ds-cs-when.has-board > .ds-cs-flaps { position: relative; z-index: 1; flex: none; justify-content: center; max-width: calc(var(--pw) * .78); padding: 2px 3px; border-radius: calc(var(--r-chip)/2); background: rgb(8 7 14 / .9); box-shadow: 0 0 0 1px rgb(0 0 0 / .5); }

/* the larger text sizes: the title keeps a line more of room (the posters are wider there too) */
html.ds[data-text-size]:not([data-text-size="standard"]) .ds-cs-copy strong { --tl: 3; }
html.ds[data-text-size="largest"] .ds-cs-copy strong { --tl: 4; }

/* ================================================================== pages polish, 28 October 2026, 18:50 (the owner: Release 1's
   Cinema row looked worse; the boards and the labelled buttons competed with the posters)
   1-2. The status: a slim strip, about half the old board's height (its row of small warm bulbs, top and foot, removed on 29
        October 2026, below); one letter size and one tile style for every status (ds-coming-soon.js flapsHtml sizes the
        letters for the longest, nine cells, on every card), so "OUT TODAY" is the size of "OUT NOW" and fits by its length. */
html.ds .ds-cs-copy small.ds-cs-when.is-strip,
html.ds[data-text-size]:not([data-text-size="standard"]) .ds-cs-copy small.ds-cs-when.is-strip {
  --in: var(--pw);
  position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; max-width: var(--pw);
  height: auto; margin-top: 6px; padding: 0; overflow: visible; border-radius: 0;
  background: none; box-shadow: none;   /* (2 November 2026, the owner: no box round the letters; below) */
}
/* (29 October 2026, the owner, of OUT NOW / TOMORROW / TODAY: "get rid of the surrounding lights ... looks better without") the strip
   is the dark plate and its flap letters only: no bulbs along its top and foot and no warm glow round it. Same padding, so the
   strip keeps its size and nothing in the row moves. hub/docs/TEN-FAN-2026-10-29.md */
/* ================================================================== the countdown and the two buttons, 2 November 2026, 23:06
   (the owner, of his phone's Cinema row: the boxes round the letters, "2 DAYS" spread with a big gap after the 2, and two large
   bell and calendar buttons per card competing with the poster)
   A. (corrected 3 November 2026, 10:10, the owner: "I still want the words on cinema to be those flip letters like we had
      before") The countdown keeps its split-flap tiles (each letter its own tile, hinge line and flip, as before); only the
      plate round the whole word is gone. The tiles are larger: their width comes from the poster's width alone (never the
      word's length), sized so the longest status, eight letters and a word space ("OUT TODAY", "TOMORROW"), fills the card,
      so every card's countdown is one matching set, set from the card's left edge under the title. Every tile is the same
      width with one even gap between tiles, and a word space is a narrow gap (under half a tile), so "2 DAYS" reads as
      "TOMORROW" does, with no wide hole after the 2.
   B. The bell and the calendar: one compact row of two small glass circles at the card's left, each still a 44pt target (the
      circle is drawn inside it). Same actions, same names; done is still a check on a lit ground. */
html.ds .ds-cs-when.is-strip > .ds-cs-flaps {
  --cw: min(calc(15 * var(--type-unit, 1px)), calc((var(--pw) - 8 * 1.5px) / 8.4)); --fh: calc(var(--cw) * 1.5);
  justify-content: flex-start; gap: 1.5px;
}
/* one colour for every status: the lamp's warm white, full strength */
html.ds .ds-cs-when.is-strip > .ds-cs-flaps, html.ds .ds-cs-item.is-next .ds-cs-when.is-strip > .ds-cs-flaps { color: var(--c-lamp); }
html.ds .ds-cs-when.is-strip > .ds-cs-flaps > .f-gap { width: calc(var(--cw) * .4); }
/* B. two small glass circles, 44pt targets */
html.ds .ds-cs-acts { display: flex; justify-content: flex-start; gap: 2px; margin: 4px 0 0 -5px; }
html.ds .ds-cs-acts > .ds-cs-act {
  position: relative; flex: none; flex-direction: row; gap: 0; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: var(--r-pill);
  background: none; box-shadow: none; color: var(--c-label-1);
}
html.ds .ds-cs-acts > .ds-cs-act::before {
  content: ""; position: absolute; inset: 6px; border-radius: var(--r-pill); pointer-events: none;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .1);
}
html.ds .ds-cs-acts > .ds-cs-act:active { background: none; }
html.ds .ds-cs-acts > .ds-cs-act:active::before { background: rgba(255, 255, 255, .14); }
html.ds .ds-cs-acts > .ds-cs-act svg { position: relative; width: 15px; height: 15px; }
html.ds .ds-cs-acts[data-saved="1"] .ds-cs-remind, html.ds .ds-cs-acts[data-cal="1"] .ds-cs-cal { background: none; box-shadow: none; }
html.ds .ds-cs-acts[data-saved="1"] .ds-cs-remind::before, html.ds .ds-cs-acts[data-cal="1"] .ds-cs-cal::before {
  background: color-mix(in srgb, var(--c-ok) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ok) 46%, transparent);
}
html.ds .ds-cs-acts .ds-cs-act-word, html.ds .ds-cs-acts[data-saved="1"] .ds-cs-remind .is-on, html.ds .ds-cs-acts[data-cal="1"] .ds-cs-cal .is-on {
  display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@media (forced-colors: active) { html.ds .ds-cs-acts > .ds-cs-act::before { border: 1px solid ButtonText; } html.ds .ds-cs-acts > .ds-cs-act { border: 0; } }
/* 5. "Today" whole at either end of the row: the marker's flag is centred on its line except where that would put it past the
   row's edge (the marker first or last in the row), where it stands inward from the line instead */
html.ds .ds-cs-today:first-child .ds-cs-today-tag { left: 0; transform: none; }
html.ds .ds-cs-today:last-child .ds-cs-today-tag { left: auto; right: 0; transform: none; }

/* ===== prototype-src/ds-today.css ===== */
/* TRIPTIC ds-today: TODAY, the fifth tab (owner, 2 October 2026). Scoped under html.ds (kill switch ?ds=0).
   Runtime: prototype-src/ds-today.js. Decision: hub/docs/DECISIONS.md ("Five tabs; Today holds what changes with time").

   The page reads like the front page of a cinema's programme for the day: a dated masthead, ONE hero chosen by time (the
   electric Friday 3, or this week's card in calm glass), the week's card as the one streak, then the same places every day
   (Commute Corner's ADMIT ONE ticket, the one way into the games room: drawn and styled by commute-corner.js/.css; Friday 3;
   this week's card), then Cinema (The Ten, then the Cinema row: each mounted by its own layer and styled by its own sheet)
   and a closing line. Only the electric Friday 3 glows (owner, 15 October 2026). (17 October 2026, the owner: the games are
   housed all in one; the Daily Cryptic's card, hero or row, and the corner's quiet row left Today for the ticket.)

   !IMPORTANT OVERRIDES (each beats an earlier !important):
   - .ds-today padding-bottom                           beats product-manager-polish.css .screen padding (the top and the
     sides are shared-brand.css's, as on every tab root: one header geometry for all five tabs).
   - .dt-fri.ds-pressed-row (and the other cards') scale   beat design-system.css .ds-pressed-row { scale: 1 !important }:
     the cards are large buttons, and give a little under the finger.

   Motion: transform / opacity only. One entrance (the ticket's lit bulbs come on in a run when the tab is opened:
   commute-corner.css, under .dt-arrive); the split-flap turn of Friday's countdown is ds-rituals' own. Reduce Motion: neither. */

/* ===== the page ===== */
/* The page scrolls. Every .screen is overflow: hidden until its own sheet says otherwise; the other four tab roots are
   .destination-screen (overflow-y: auto) and this one never was, so a finger could not move the page at all (owner, on
   his iPhone, 6 October 2026). Scripts could still set scrollTop on it, which is how every earlier check passed.
   tests/touch-scroll.test.mjs holds every tab root and pushed page to "taller than the screen means it scrolls". */
html.ds #device > .screen.ds-today { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
html.ds #device .ds-today { padding-bottom: 128px !important; }
html.ds #device .ds-today > :is(.app-header, .dt-masthead, .dt-section, .dt-end) { position: relative; }
/* the light over the page: a soft wash from the hero's own colours, so the bright card belongs to the room it sits in */
html.ds .ds-today > .dt-marquee-light {
  position: absolute; left: 0; right: 0; top: 0; height: 420px; pointer-events: none;
  background:
    radial-gradient(86% 62% at 84% 34%, rgb(127 26 142 / .22), rgb(127 26 142 / 0) 70%),
    radial-gradient(80% 60% at 8% 52%, rgb(90 31 180 / .20), rgb(90 31 180 / 0) 72%);
  /* it is the room's own wash (ds-look.css section 1), so it follows the light of the day as the other tabs' wash does
     (NIGHT, 10 October 2026: drawn with the evening's colours at every hour, Today was up to 11 levels off the others) */
  background: var(--ds-room-wash, none);
}
html.ds #device.manual-solid .ds-today > .dt-marquee-light, html.ds.reduce-transparency .ds-today > .dt-marquee-light { display: none; }
@media (prefers-reduced-transparency: reduce) { html.ds .ds-today > .dt-marquee-light { display: none; } }

/* ===== masthead: the date, once, over the title (the App Store's Today); no greeting (8 October 2026) ===== */
html.ds .dt-masthead { margin: 10px 0 20px; }
html.ds #device .dt-masthead .dt-title { margin: 0; color: var(--c-label-1); }
html.ds .dt-date { margin: 0 0 2px; font: 600 var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-seal-hi); }

/* ===== the column (owner, 15 October 2026; 17 October 2026): one hero, the week's card as the one streak, then the same order every
   day: Commute Corner's ticket, Friday 3, this week's card, Cinema. Each place is its own labelled section; one with nothing in it is
   [hidden] (the hero's duplicate steps aside; no cards, no streak and no row). One rhythm: 12pt between the list's cards, the
   section gap (32) before Cinema, 16 between its cards. ===== */
html.ds .dt-section { margin: 0; }
html.ds .dt-section[hidden] { display: none; }
html.ds .dt-top, html.ds .dt-streak-section, html.ds .dt-commute-section, html.ds .dt-dna-section, html.ds .dt-also, html.ds .dt-weekrow { display: grid; container-type: inline-size; }
html.ds .ds-today > .dt-section:not(.dt-top):not(.ds-now-next) { margin-top: 12px; }
html.ds .ds-today > .dt-streak-section { margin-top: 14px; }
html.ds .dt-slot { min-width: 0; }
html.ds .dt-settle { animation: dt-settle var(--motion-normal) var(--motion-curve) both; }
@keyframes dt-settle { from { opacity: 0; transform: scale(.97); } }

html.ds :is(.dt-fri, .dt-row, .dt-dna, .dt-wk-hero).ds-pressed-row { scale: .985 !important; transition: scale var(--motion-press) var(--motion-curve); }
html.ds :is(.dt-fri, .dt-row, .dt-dna, .dt-wk-hero).ds-pressed-row.ds-pressed-quiet { scale: 1 !important; }
html.ds :is(.dt-fri, .dt-row, .dt-dna, .dt-wk-hero, .dt-streak):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
/* ===== Friday 3: sealed, open, or this week's three ===== */
html.ds .dt-fri {
  position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr) 40px; align-items: center; gap: 12px;
  width: 100%; min-height: 104px; margin: 0; padding: 10px 14px 10px 10px;
  overflow: hidden; text-align: left; -webkit-tap-highlight-color: transparent;
  border: 1px solid var(--c-line); border-radius: var(--r-sheet);
  color: var(--c-label-1);
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: 0;
  background: radial-gradient(150px 110px at 58px 50%, rgb(139 92 246 / .22), rgb(139 92 246 / 0) 72%), var(--c-fill-1);
  box-shadow: var(--e-1);
}
html.ds .dt-fri:is([data-state="open"], [data-state="kept"]) { border-color: rgb(167 139 250 / .38); }
html.ds .dt-fri-art { position: relative; display: block; width: 88px; height: 84px; }
html.ds .dt-fan-card {
  position: absolute; left: 50%; top: 50%; display: block; width: 38px; height: 56px; margin: -28px 0 0 -19px; border-radius: 6px;
  border: 1px solid rgb(167 139 250 / .5);
  background: linear-gradient(160deg, rgb(34 24 62), rgb(14 12 24));
  box-shadow: 0 6px 14px rgb(0 0 0 / .4);
}
html.ds .dt-fan-card.is-l { translate: -22px 3px; rotate: -13deg; }
html.ds .dt-fan-card.is-r { translate: 22px 3px; rotate: 13deg; }
html.ds .dt-fan-card.is-c { translate: 0 -3px; z-index: 1; display: grid; place-items: center; background: linear-gradient(160deg, rgb(44 30 84), rgb(16 13 30)); }
html.ds .dt-fan-card.is-poster { border-color: rgb(255 255 255 / .24); background: var(--dt-poster) center / cover no-repeat, var(--c-stage-raised); }
html.ds .dt-fan-card.is-poster.is-c { display: block; }
/* the seal: a violet disc with the mark's three bars */
html.ds .dt-seal { display: flex; align-items: center; justify-content: center; gap: 2.5px; width: 22px; height: 22px; border-radius: 50%; background: var(--c-seal-fill); box-shadow: 0 0 0 1px rgb(255 255 255 / .3), 0 0 12px rgb(139 92 246 / .6); }
html.ds .dt-seal > b { display: block; width: 2px; height: 9px; border-radius: 999px; background: rgb(255 255 255); }
html.ds .dt-fri-copy { display: block; min-width: 0; }
html.ds .dt-fri-name { display: block; font: 600 var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-seal-hi); }
html.ds .dt-fri-head { display: block; margin-top: 1px; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1); text-wrap: pretty; }
html.ds .dt-fri-line { display: block; margin-top: 3px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds .dt-fri-line:empty { display: none; }
html.ds .dt-fri-count { display: inline-block; font-weight: 600; color: var(--c-label-1); }
/* (release polish, 28 October 2026; the owner) once the week's three are yours the countdown is a quiet footnote under the title */
html.ds .dt-fri-line.is-foot { margin-top: 5px; font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); color: var(--c-label-3); }
html.ds .dt-fri-line.is-foot .dt-fri-count { font-weight: 500; color: var(--c-label-2); }
/* the affordance on the right, a picture of a button (the whole card is the tap target; its words are in the card's
     spoken label): a lock while it is sealed, the violet seal when there is a three to open, quiet glass once it is kept */
html.ds .dt-fri-cta { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: rgb(255 255 255); background: var(--c-seal-fill); box-shadow: 0 0 0 1px rgb(255 255 255 / .18), 0 0 16px rgb(139 92 246 / .5); }
html.ds .dt-fri-cta > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.ds .dt-fri-cta > b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.ds .dt-fri[data-state="kept"] .dt-fri-cta, html.ds .dt-fri[data-state="spent"] .dt-fri-cta { color: var(--c-label-1); background: var(--c-fill-2); box-shadow: inset 0 0 0 1px var(--c-line); }
html.ds .dt-fri-cta.is-locked { color: var(--c-label-3); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); }

/* ===== the list's rows (owner, 15 October 2026): this week's card, Film DNA before there is a reading. One quiet glass row each, the shape Friday 3's calm card has: a picture, three lines, a round affordance
   (the whole row is the tap target; its words are in its spoken label). Nothing in a row moves or glows. ===== */
html.ds .dt-row {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 36px; align-items: center; gap: 12px;
  width: 100%; min-height: 76px; margin: 0; padding: 10px 12px 10px 12px;
  overflow: hidden; text-align: left; -webkit-tap-highlight-color: transparent;
  border: 1px solid var(--c-line); border-radius: var(--r-sheet); color: var(--c-label-1);
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: 0;
  background: var(--c-fill-1); box-shadow: var(--e-1);
}
html.ds .dt-row-art { display: grid; place-items: center; width: 52px; min-height: 48px; }
html.ds .dt-row-copy { display: block; min-width: 0; }
html.ds .dt-row-name { display: block; font: 600 var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-seal-hi); }
html.ds .dt-row-head { display: block; margin-top: 1px; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1); text-wrap: balance; overflow-wrap: anywhere; }
html.ds .dt-row-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 2px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); text-wrap: pretty; }
html.ds .dt-row-line:empty { display: none; }
html.ds .dt-row-line b { font-weight: 600; color: var(--c-label-1); }
html.ds .dt-row-cta { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--c-label-1); background: var(--c-fill-2); box-shadow: inset 0 0 0 1px var(--c-line); }
html.ds .dt-row-cta > svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
/* this week's card's face, small (film-cards.js draws it at the width it is given) */
html.ds .dt-wk-face { display: block; width: 100%; }
html.ds .dt-row .dt-wk-face { width: 40px; margin: 0 auto; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .5)); }

/* ===== the streak: the week's card, said once at the top of the list. A line, not a box: the three arches as they stand
   (no number), the sentence, a small chevron. The arches keep their gold and lose the little glow they carry on the
   card's own page: only the electric Friday 3 glows here. ===== */
html.ds .dt-streak {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--target); margin: 0; padding: 4px 4px 4px 2px;
  text-align: left; border: 0; background: none; color: var(--c-label-2); -webkit-tap-highlight-color: transparent;
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote);
}
html.ds .dt-streak .fc-emblem3 { flex: none; }
html.ds .dt-streak-words { flex: 1; min-width: 0; text-wrap: pretty; }
html.ds .dt-streak-go { display: grid; place-items: center; flex: none; width: 16px; height: 16px; color: var(--c-label-3); }
html.ds .dt-streak-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.ds .ds-today .fc-arch.is-lit { box-shadow: none; }
html.ds .ds-today .fc-arch > b { transition: none; }

/* ===== the week's card as the hero (when no Friday 3 is waiting): calm glass, the mystery card's
   face beside the words, a quiet key. It does not glow and nothing on it moves. ===== */
html.ds .dt-wk-hero {
  position: relative; display: block; width: 100%; margin: 0; padding: 20px 18px 18px; overflow: hidden; text-align: left; -webkit-tap-highlight-color: transparent;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sheet); color: var(--c-label-1);
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: 0;
  background: radial-gradient(120px 150px at calc(100% - 64px) 54%, rgb(150 140 255 / .14), rgb(150 140 255 / 0) 72%), var(--c-fill-1); box-shadow: var(--e-2, var(--e-1));
}
html.ds .dt-wk-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
html.ds .dt-wk-name { font: 700 var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--card-gold, var(--c-seal-hi)); }
html.ds .dt-wk-mark { font: 500 var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); white-space: nowrap; }
html.ds .dt-wk-body { display: grid; grid-template-columns: minmax(0, 1fr) 92px; align-items: center; gap: 16px; margin-top: 10px; min-height: 132px; }
html.ds .dt-wk-copy { display: block; min-width: 0; }
html.ds .dt-wk-head { display: block; font: 700 var(--fs-title-2)/calc(26 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-title-2); color: var(--c-label-1); text-wrap: balance; overflow-wrap: anywhere; }
html.ds .dt-wk-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin-top: 6px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); text-wrap: pretty; }
html.ds .dt-wk-hero .dt-wk-face { filter: drop-shadow(0 10px 18px rgb(0 0 0 / .6)); }
html.ds .dt-wk-foot { display: flex; margin-top: 12px; }
html.ds .dt-wk-key {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 20px; border-radius: var(--r-pill);
  color: var(--c-label-1); background: var(--c-fill-2); box-shadow: inset 0 0 0 1px var(--c-line-strong);
  font: 700 var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); white-space: nowrap;
}
html.ds .dt-wk-key > b { font-weight: inherit; }
html.ds .dt-wk-key > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===== a small live Film DNA card: the five lines in miniature, the latest movement highlighted (a longer track, the
   line's own colour, a faint ring where its bead was); before there is a reading it is a row that leads to the rating deck ===== */
html.ds .dt-dna {
  position: relative; display: block; width: 100%; margin: 0; padding: 12px 14px 12px; overflow: hidden; text-align: left; -webkit-tap-highlight-color: transparent;
  border: 1px solid var(--c-line); border-radius: var(--r-sheet); color: var(--c-label-1);
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); background: var(--c-fill-1); box-shadow: var(--e-1);
}
html.ds .dt-dna-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html.ds .dt-dna-go { display: grid; place-items: center; width: 16px; height: 16px; color: var(--c-label-3); }
html.ds .dt-dna-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.ds .dt-dna-lanes { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 7px 12px; margin-top: 8px; }
html.ds .dt-dna-lane { display: contents; --h: var(--c-label-3); }
html.ds .dt-dna-name { font: 500 var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); color: var(--c-label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ds .dt-dna-track { position: relative; display: block; height: 12px; }
html.ds .dt-dna-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: var(--r-pill); background: var(--c-fill-press); }
html.ds .dt-dna-lane.is-none .dt-dna-track::before { background: repeating-linear-gradient(90deg, var(--c-line-strong) 0 4px, transparent 4px 10px); }
html.ds .dt-dna-mid { position: absolute; left: 50%; top: 50%; width: 2px; height: 8px; margin: -4px 0 0 -1px; border-radius: calc(var(--r-chip)/6); background: var(--c-line-strong); }
html.ds .dt-dna-bead { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--h); opacity: .72; transform: translate(-50%, -50%); }
html.ds .dt-dna-ghost { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--h); opacity: .55; transform: translate(-50%, -50%); }
html.ds .dt-dna-lane.is-hit .dt-dna-name { color: var(--c-label-1); font-weight: 600; }
html.ds .dt-dna-lane.is-hit .dt-dna-track::before { height: 3px; margin-top: -1.5px; background: color-mix(in srgb, var(--h) 45%, var(--c-fill-press)); }
html.ds .dt-dna-lane.is-hit .dt-dna-bead { width: 12px; height: 12px; opacity: 1; box-shadow: 0 0 0 2px var(--c-stage); }
html.ds .dt-dna-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 10px; color: var(--c-label-2); text-wrap: pretty; }
html.ds .dt-dna-row .dt-dna-mark { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; margin: 0 auto; }
html.ds .dt-dna-mark > i { display: block; height: 3px; border-radius: calc(var(--r-chip)/3); background: var(--c-label-3); opacity: .7; }
html.ds .dt-dna-mark > i:nth-child(1) { margin-left: 22%; }
html.ds .dt-dna-mark > i:nth-child(2) { margin-right: 30%; }
html.ds .dt-dna-mark > i:nth-child(3) { margin-left: 12%; }
html.ds .dt-dna-mark > i:nth-child(4) { margin-right: 18%; }
html.ds .dt-dna-mark > i:nth-child(5) { margin-left: 34%; }


/* ===== Cinema: THE TEN (ds-the-ten) then CINEMA (ds-coming-soon: the films that are out, "Today", the
   films that are coming, in one row), each mounted by its own layer under this heading.
   With neither (all lists unavailable) the whole section, heading included, is absent. ===== */
html.ds .ds-now-next { margin: var(--section-gap) 0 0; }
html.ds .ds-now-next-title { margin: 0 0 12px; color: var(--c-label-1); }
html.ds .ds-now-next:not(:has(> .ds-ten-card, > .ds-cs)) { display: none; }

/* ===== the end of the programme ===== */
html.ds .dt-end { margin: var(--section-gap) 0 0; text-align: center; }
html.ds .dt-end-rule { display: flex; align-items: center; gap: 14px; }
html.ds .dt-end-rule > i { flex: 1; height: 1px; background: linear-gradient(90deg, rgb(255 255 255 / 0), var(--c-line-strong)); }
html.ds .dt-end-rule > i:last-child { background: linear-gradient(90deg, var(--c-line-strong), rgb(255 255 255 / 0)); }
html.ds .dt-end-flick { display: flex; align-items: flex-end; gap: 10px; margin: 26px auto 0; max-width: 340px; text-align: left; }
html.ds .dt-end-flick > .sps-art { flex: none; width: 64px; height: 64px; }
html.ds .dt-end-flick > .sps-art :is(img, svg, picture) { width: 100%; height: 100%; object-fit: contain; }
html.ds .dt-end-say {
  position: relative; margin: 0 0 18px; padding: 10px 14px; border-radius: var(--r-row) var(--r-row) var(--r-row) var(--r-chip); background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px var(--c-line);
  color: var(--c-label-2); font: var(--fw-footnote, 400) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote);
}
html.ds .dt-end-name { display: block; margin-bottom: 2px; color: var(--c-label-1); font: 600 var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; }
html.ds .dt-end-rule > img { display: block; width: 22px; height: 22px; opacity: .72; }
html.ds .dt-end-line { margin: 14px 0 0; font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); }

/* ===== Cinema, quieter (8 October 2026): on this page The Ten is one of the lighter daily things, not another hero.
   Its name takes the page's title-2 (the hero's headline size) instead of its own 28pt, its fan stands a little lower,
   and its key is a size down. Sizes only: the card's own sheet keeps its look, and it still opens exactly as before.
   (14 October 2026: the Cinema row is a flat row of its own, ds-coming-soon.css; it takes title-2 there.) ===== */
html.ds .ds-today .ds-now-next .ds-ten-card-title > span:first-child { font: 600 calc(30 * var(--type-unit))/1.08 var(--font-marquee); letter-spacing: var(--tr-marquee-title); white-space: nowrap; } /* (20 October 2026: the marquee face, ds-the-ten.css "THE TEN, refined") */
html.ds .ds-today .ds-now-next .ds-ten-card-stage { --pw: 96px; }
@supports (width: 1cqw) { html.ds .ds-today .ds-now-next .ds-ten-card-stage { --pw: min(120px, calc((100cqw - 8px) / 2.76)); } } /* (29 October 2026) the evenly stepped fan: 2.76 poster widths, centred (ds-the-ten.css) */
html.ds .ds-today .ds-now-next .ds-ten-cta { height: 46px; font: 600 var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-eyebrow); }

/* ===== THE ELECTRIC FRIDAY 3 (owner, 8 October 2026): drawn only while this week's three has opened for this person
   and they have not opened it (ds-today.js fridayModel `electric`), in Friday's own place under the Daily Cryptic. A lighter, luminous violet;
   a light running round its edge; arcs crackling between the three sealed cards; the key's glow breathing; now and
   then a brighter flicker. Every moving part is its own element and moves by transform or opacity only; nothing moves
   unless the card is on screen (.is-awake). Reduce Motion and the reduced tier: the same card, still, its edge lit. ===== */
html.ds .dt-fri.dt-fri-hero {
  display: block; min-height: 0; padding: 20px 18px 18px; isolation: isolate;
  border: 0; color: rgb(255 255 255); background: rgb(104 58 220);
  box-shadow: 0 18px 44px rgb(84 40 200 / .5), 4px 10px 34px rgb(167 139 250 / .28);
}
html.ds .dt-fri-hero > span { position: relative; z-index: 2; }
/* the aura: a violet light just outside the card (on its slot, as the card clips), breathing while the card is awake */
html.ds .dt-slot:has(> .dt-fri-hero) { position: relative; }
html.ds .dt-slot:has(> .dt-fri-hero)::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: var(--r-sheet); pointer-events: none; opacity: .5; box-shadow: 3px 7px 22px 4px rgb(167 139 250 / .6), 6px 16px 52px 8px rgb(139 92 246 / .35); }
html.ds .dt-slot:has(> .dt-fri-hero.is-awake)::before { animation: dt-zap-aura 2.4s var(--motion-breathe) infinite alternate; }
/* the edge: a ring 1.5pt wide that is the card's own rim (the face covers the rest), lit by a turning light */
html.ds .dt-zap-ring { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; background: rgb(196 170 255 / .5); }
html.ds .dt-zap-spin {
  position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0deg, rgb(255 255 255 / 0) 0deg, rgb(255 255 255 / 0) 120deg, rgb(214 196 255 / .55) 150deg, rgb(255 255 255 / 0) 176deg, rgb(255 255 255 / 0) 250deg, rgb(214 196 255 / .9) 322deg, rgb(255 255 255) 352deg, rgb(255 255 255 / 0) 360deg);
}
html.ds .dt-zap-face {
  --dt-face-r: calc(var(--r-sheet) - 2px);
  position: absolute; inset: 2px; z-index: 0; border-radius: var(--dt-face-r);
  background:
    radial-gradient(62% 78% at 80% 42%, rgb(205 184 255 / .55), rgb(205 184 255 / 0) 72%),
    radial-gradient(80% 70% at 0% 0%, rgb(255 255 255 / .14), rgb(255 255 255 / 0) 62%),
    linear-gradient(160deg, rgb(118 72 232), rgb(104 58 220) 55%, rgb(86 44 202));
}
html.ds .dt-zap-flash { position: absolute; inset: 0; z-index: 1; border-radius: inherit; opacity: 0; pointer-events: none; background: radial-gradient(58% 72% at 78% 42%, rgb(240 232 255 / .5), rgb(240 232 255 / 0) 72%); }

html.ds .dt-fri-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html.ds .dt-fri-hero .dt-fri-name { font: 700 var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: rgb(255 255 255); }
html.ds .dt-fri-new { padding: 3px 10px; border-radius: var(--r-pill); font: 600 var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); color: rgb(255 255 255); background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); white-space: nowrap; }
html.ds .dt-fri-hero-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 10px; }
html.ds .dt-fri-hero-head { display: block; font: 700 var(--fs-title-2)/calc(26 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-title-2); color: rgb(255 255 255); }
html.ds .dt-fri-hero-head > span { display: block; }
html.ds .dt-fri-hero-head > span:last-child { color: rgb(232 222 255); }
html.ds .dt-fri-art.is-hero { width: 132px; height: 112px; margin: -6px -6px -6px 0; }
html.ds .dt-fri-art.is-hero .dt-fan-card { width: 52px; height: 76px; margin: -38px 0 0 -26px; border-radius: 10px; border-color: rgb(236 228 255 / .75); background: linear-gradient(160deg, rgb(76 44 160), rgb(32 20 76)); box-shadow: 0 8px 18px rgb(30 10 90 / .45); }
html.ds .dt-fri-art.is-hero .dt-fan-card.is-l { translate: -30px 4px; rotate: -13deg; }
html.ds .dt-fri-art.is-hero .dt-fan-card.is-r { translate: 30px 4px; rotate: 13deg; }
html.ds .dt-fri-art.is-hero .dt-fan-card.is-c { translate: 0 -4px; background: linear-gradient(160deg, rgb(96 60 196), rgb(40 24 92)); }
html.ds .dt-fri-art.is-hero .dt-seal { width: 28px; height: 28px; gap: 3px; box-shadow: 0 0 0 1px rgb(255 255 255 / .45), 0 0 16px rgb(214 196 255 / .8); }
html.ds .dt-fri-art.is-hero .dt-seal > b { height: 11px; }
html.ds .dt-arcs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
html.ds .dt-arc { position: absolute; inset: 0; opacity: 0; filter: drop-shadow(0 0 3px rgb(214 196 255)) drop-shadow(0 0 1px rgb(255 255 255)); }
html.ds .dt-arc > svg { display: block; width: 100%; height: 100%; overflow: visible; }
html.ds .dt-arc path { fill: none; stroke: rgb(252 250 255); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

html.ds .dt-fri-hero-foot { display: flex; margin-top: 14px; }
html.ds .dt-fri-key {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px 0 20px;
  border-radius: var(--r-pill); color: rgb(76 36 190); background: rgb(255 255 255);
  font: 700 var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); white-space: nowrap;
  box-shadow: inset 0 2px 0 rgb(214 196 255 / .7), 0 4px 0 rgb(60 26 150 / .55);
}
html.ds .dt-fri-key > b { font-weight: inherit; }
html.ds .dt-fri-key > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.ds .dt-zap-glow { position: absolute; inset: -12px -14px; z-index: -1; border-radius: var(--r-pill); opacity: .55; background: radial-gradient(closest-side, rgb(236 228 255 / .8), rgb(236 228 255 / 0)); }

@keyframes dt-zap-turn { to { transform: rotate(1turn); } }
@keyframes dt-zap-arc { 0%, 100% { opacity: 0; } 3% { opacity: 1; } 6% { opacity: .15; } 9% { opacity: .9; } 12% { opacity: .3; } 15% { opacity: .75; } 19% { opacity: 0; } }
@keyframes dt-zap-breathe { from { opacity: .35; transform: scale(.94); } to { opacity: .95; transform: scale(1.06); } }
@keyframes dt-zap-aura { from { opacity: .35; } to { opacity: .85; } }
@keyframes dt-zap-flicker { 0%, 84%, 100% { opacity: 0; } 86% { opacity: .75; } 88% { opacity: .15; } 90% { opacity: .55; } 94% { opacity: 0; } }
html.ds .dt-fri-hero.is-awake .dt-zap-spin { animation: dt-zap-turn 4.2s linear infinite; }
html.ds .dt-fri-hero.is-awake .dt-arc.is-a1 { animation: dt-zap-arc 1.9s linear infinite; }
html.ds .dt-fri-hero.is-awake .dt-arc.is-a1.is-alt { animation-delay: 80ms; }
html.ds .dt-fri-hero.is-awake .dt-arc.is-a2 { animation: dt-zap-arc 2.3s linear .7s infinite; }
html.ds .dt-fri-hero.is-awake .dt-arc.is-a2.is-alt { animation-delay: .79s; }
html.ds .dt-fri-hero.is-awake .dt-arc.is-a3 { animation: dt-zap-arc 2.9s linear 1.3s infinite; }
html.ds .dt-fri-hero.is-awake .dt-arc.is-a3.is-alt { animation-delay: 1.39s; }
html.ds .dt-fri-hero.is-awake .dt-zap-glow { animation: dt-zap-breathe 1.6s var(--motion-breathe) infinite alternate; }
html.ds .dt-fri-hero.is-awake .dt-zap-flash { animation: dt-zap-flicker 5.2s linear 1.4s infinite; }

/* ===== sizes: the two cards follow the width they are given (335 at 375, 350 at 390, 390 at 430) ===== */
@container (max-width: 340px) {
  html.ds .dt-fri { grid-template-columns: 82px minmax(0, 1fr) 40px; gap: 10px; padding-right: 12px; }
  html.ds .dt-fri-art { width: 82px; }
}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  html.ds :is(.dt-fri, .dt-row, .dt-dna, .dt-wk-hero).ds-pressed-row { scale: 1 !important; transition: none; }
  html.ds .dt-settle { animation: none; }
  html.ds .dt-fri-hero :is(.dt-zap-spin, .dt-arcs, .dt-zap-flash) { display: none; }
  html.ds .dt-fri-hero .dt-zap-ring { background: rgb(222 208 255 / .9); }
  html.ds .dt-fri-hero.is-awake .dt-zap-glow { animation: none; opacity: .7; }
  html.ds .dt-slot:has(> .dt-fri-hero.is-awake)::before { animation: none; opacity: .7; }
}
/* the electric card, still: the app's own Reduce Motion switch and the reduced tier say what the system setting says */
html.ds #device.manual-reduced-motion .dt-fri-hero :is(.dt-zap-spin, .dt-arcs, .dt-zap-flash), html.ds[data-motion-tier="reduced"] .dt-fri-hero :is(.dt-zap-spin, .dt-arcs, .dt-zap-flash) { display: none; }
html.ds #device.manual-reduced-motion .dt-fri-hero .dt-zap-ring, html.ds[data-motion-tier="reduced"] .dt-fri-hero .dt-zap-ring { background: rgb(222 208 255 / .9); }
html.ds #device.manual-reduced-motion .dt-fri-hero.is-awake .dt-zap-glow, html.ds[data-motion-tier="reduced"] .dt-fri-hero.is-awake .dt-zap-glow { animation: none; opacity: .7; }
html.ds #device.manual-reduced-motion .dt-settle, html.ds[data-motion-tier="reduced"] .dt-settle { animation: none; }
html.ds #device.manual-reduced-motion .dt-slot:has(> .dt-fri-hero.is-awake)::before, html.ds[data-motion-tier="reduced"] .dt-slot:has(> .dt-fri-hero.is-awake)::before { animation: none; opacity: .7; }

/* ===== Commute Corner's ticket (owner, 17 October 2026): its section only; the ticket's paper, bulbs and tear are commute-corner.css's
   (the 16 October 2026 quiet row it replaced is gone) ===== */
html.ds .ds-today > .dt-commute-section { margin-top: 14px; }

/* (17 October 2026, lane ART-C; hub/docs/SCENE-ART-2026-10-17.md) The electric Friday 3's three cards are the owner's painting, a
   layer of its own (.dt-fri-cards.art-layer) over the drawn fan; once it is in (data-art="ready") the drawn cards step back and only
   their seal stays, on the painting's middle card. The arcs still crackle over both. Nothing here moves. */
html.ds .dt-fri-art.has-scene-art .dt-fri-cards { position: absolute; left: -6px; top: -9px; width: 144px; height: 128px; z-index: 1; opacity: 0; }
html.ds .dt-fri-art.has-scene-art .dt-fri-cards-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 16px rgb(30 10 90 / .5)); }
html.ds .dt-fri-art.has-scene-art[data-art="ready"] .dt-fri-cards { opacity: 1; }
html.ds .dt-fri-art.has-scene-art[data-art="ready"] .dt-fan-card { visibility: hidden; }
html.ds .dt-fri-art.has-scene-art[data-art="ready"] .dt-fan-card.is-c { z-index: 2; }
html.ds .dt-fri-art.has-scene-art[data-art="ready"] .dt-seal { visibility: visible; }

/* ===== prototype-src/ds-delights-2.css ===== */
/* TRIPTIC ds-delights-2: ten more small moments (2 October 2026). Runtime pair: ds-delights-2.js (read its header first).
   Every selector is under html.ds; every added node is prefixed dsd-. Tokens, rgba() and color-mix() only: no raw hex.
   Motion: transform, opacity, translate/rotate/scale and clip-path. No filter, no backdrop-filter, no box-shadow or size
   transitions, nothing that loops while it cannot be seen. Each moment ends with its Reduce Motion rules
   (prefers-reduced-motion, the app's own switch .manual-reduced-motion / .reduce-motion, and the "reduced" tier).
   !important: only where an older layer sizes every button with !important (named at the rule). */

/* a polite live region for the facts a moment states (never shown) */
html.ds .dsd-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ===== 1  Film: the running time answers back ============================================================== */
/* A text button inside the meta line. !important: interaction-targets.css and the legacy film layers give every button
   in a film page a minimum size, a fill and a radius with !important; this one is a word in a sentence. */
html.ds #device .film-title > p .dsd-rt {
  position: relative; display: inline-block; vertical-align: baseline; margin: 0 !important; padding: 0 !important;
  min-width: 0 !important; min-height: 0 !important; width: auto !important; height: auto !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  font: inherit !important; letter-spacing: inherit !important; color: inherit !important; text-align: left; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; cursor: pointer; appearance: none; -webkit-appearance: none;
  font-variant-numeric: tabular-nums;
}
/* the finger gets 44pt even though the eye gets a word */
html.ds #device .film-title > p .dsd-rt::after { content: ""; position: absolute; inset: -15px -10px; }
html.ds #device .film-title > p .dsd-rt > span { display: inline-block; will-change: transform, opacity; }
/* a dotted rule under the word: there is something behind it */
html.ds #device .film-title > p .dsd-rt-a { text-decoration: underline dotted; text-decoration-color: var(--c-label-4); text-underline-offset: 5px; text-decoration-thickness: 1px; }
html.ds #device .film-title > p .dsd-rt-b { position: absolute; left: 0; top: 0; opacity: 0; color: var(--c-lamp); pointer-events: none; }
html.ds #device .film-title > p .dsd-rt.is-ends .dsd-rt-a { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
html.ds #device .film-title > p .dsd-rt.is-ends .dsd-rt-b { position: static; opacity: 1; }
html.ds #device .film-title > p .dsd-rt-tail { display: inline-block; will-change: transform; }
html.ds #device .film-title > p .dsd-rt:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 4px; border-radius: var(--r-chip) !important; }

/* ===== 2  Film: marking a film watched lands a dated stamp ================================================= */
/* Lamp ink on the poster, a little off square. The mask leaves two dry streaks, as a rubber stamp does. */
html.ds #device .film-hero > .dsd-seen {
  position: absolute; z-index: 3; right: 26px; top: 31%; display: grid; justify-items: center; gap: 4px;
  padding: 10px 16px 9px; border: 2.5px solid currentColor; border-radius: 6px; outline: 1px solid currentColor; outline-offset: -6px;
  color: var(--c-lamp); background: rgba(8, 8, 12, .2); opacity: 0; transform: rotate(-8deg); pointer-events: none; will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(104deg, black 0, black 31%, rgba(0, 0, 0, .62) 34%, black 38%, black 68%, rgba(0, 0, 0, .7) 72%, black 75%, black 100%);
  mask-image: linear-gradient(104deg, black 0, black 31%, rgba(0, 0, 0, .62) 34%, black 38%, black 68%, rgba(0, 0, 0, .7) 72%, black 75%, black 100%);
}
html.ds #device .film-hero > .dsd-seen.is-set { opacity: .94; }
html.ds #device .film-hero > .dsd-seen > b { font-family: var(--font-ui); font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: .16em; margin-right: -.16em; }
html.ds #device .film-hero > .dsd-seen > i { font-family: var(--font-ui); font-size: 11px; font-weight: 600; font-style: normal; line-height: 1; letter-spacing: .14em; margin-right: -.14em; font-variant-numeric: tabular-nums; }

/* ===== 3  Film: "Loved it" lets a few stars go ============================================================== */
/* Six four-point stars cut from one square with clip-path, in the Film DNA gold. They sit above the reaction panel,
   never take a touch, and are removed by the runtime within about a second. */
html.ds #device .film-reaction { position: relative; }
html.ds #device .film-reaction > .dsd-stars { position: absolute; z-index: 2; width: 0; height: 0; pointer-events: none; }
html.ds #device .film-reaction > .dsd-stars > .dsd-star {
  position: absolute; left: 0; top: 0; margin: -6px 0 0 -6px; opacity: 0; background: var(--c-dna-tone); will-change: transform, opacity;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
html.ds #device .film-reaction > .dsd-stars > .dsd-star:nth-child(3n) { background: var(--c-lamp); }

/* ===== 4  Film: house lights ================================================================================ */
/* The fades are written by the runtime (opacity only). Here: a held finger must not start a text selection or the
   system's press-and-hold menu on the poster, and nothing under the dimmed page can be pressed by a stray finger. */
html.ds #device .film-v5 .film-hero { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html.ds #device .dsd-lights-down .film-content { pointer-events: none; }
/* ===== 4b Film: the whole poster while it is held ========================================================= */
/* (17 October 2026) the whole poster while it is held: uncropped, over the dark, never taking the finger */
html.ds #device > .dsd-whole { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: max(var(--sp-6), env(safe-area-inset-top, 0px)) var(--sp-5) max(var(--sp-6), env(safe-area-inset-bottom, 0px)); pointer-events: none; opacity: 0; }
html.ds #device > .dsd-whole > img { position: relative; display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-card); }
html.ds #device > .dsd-whole > .dsd-whole-ground { position: absolute; inset: 0; background: var(--c-stage); }
/* (20 October 2026) letting go: the poster settles back into the hero (ds-delights-2.js hideWholePoster). The copies are
   laid out on the hero's box and moved by transform from their top-left corners; the picture inside keeps its shape. */
html.ds #device > .dsd-whole-home { position: absolute; z-index: 61; overflow: hidden; pointer-events: none; transform-origin: 0 0; will-change: transform, opacity; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
html.ds #device > .dsd-whole-home > i { position: absolute; display: block; transform-origin: 0 0; background-size: 100% 100%; background-repeat: no-repeat; will-change: transform; }
/* while they travel, the hero's own poster, its blurred continuation and the room behind it wait unseen (one picture only) */
html.ds #device .dsd-whole-homing .film-hero::before,
html.ds #device .dsd-whole-homing .film-hero::after,
html.ds #device .dsd-whole-homing .film-hero > .film-artwork-atmosphere::before { opacity: 0 !important; transition: none !important; }


/* ===== 5  Discover: the request box thinks aloud ============================================================ */
/* An aria-hidden, inert copy laid exactly over the request box (its box, type and padding are copied from the real
   textarea by the runtime when a pass begins). The words are drawn by a second, read-only textarea, so the browser
   sets them precisely where it sets the real placeholder; a hidden mirror of the same words tells the caret where the
   line ends. While it shows, the real placeholder is painted transparent; its text is untouched.
   !important: older layers size, fill and colour every textarea in the composer (and its placeholder) with !important. */
html.ds #device .premium-composer > .dsd-think { position: absolute; z-index: 1; display: none; pointer-events: none; overflow: hidden; }
html.ds #device .premium-composer > .dsd-think.is-on { display: block; }
html.ds #device .premium-composer.dsd-thinking > textarea::placeholder { color: transparent !important; }
html.ds #device .premium-composer > .dsd-think > .dsd-think-text {
  display: block; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; outline: 0 !important; background: none !important; box-shadow: none !important;
  resize: none; overflow: hidden; pointer-events: none; appearance: none; -webkit-appearance: none; caret-color: transparent;
  color: var(--c-label-3) !important; -webkit-text-fill-color: var(--c-label-3); opacity: 1 !important;
}
html.ds #device .premium-composer > .dsd-think > .dsd-think-mirror { position: absolute; inset: 0; visibility: hidden; white-space: pre-wrap; overflow-wrap: break-word; }
html.ds #device .premium-composer > .dsd-think > .dsd-think-mirror > .dsd-think-end { display: inline-block; width: 0; height: 1em; vertical-align: top; }
/* the caret that does the typing: steady while it writes, blinking only while a finished line is being read */
html.ds #device .premium-composer > .dsd-think > .dsd-think-caret {
  position: absolute; left: 0; top: 0; width: 2px; height: 20px; margin: 1px 0 0 2px; border-radius: 999px; background: var(--c-beam); opacity: .9;
}
html.ds #device .premium-composer > .dsd-think.is-resting > .dsd-think-caret { animation: dsd-caret 1060ms steps(1, end) infinite; }
@keyframes dsd-caret { 0%, 55% { opacity: .9; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.ds #device .premium-composer > .dsd-think { display: none !important; }
  html.ds #device .premium-composer.dsd-thinking textarea::placeholder { color: var(--c-label-3) !important; }
}
html.ds #device.manual-reduced-motion .premium-composer > .dsd-think,
html.ds.reduce-motion #device .premium-composer > .dsd-think,
html.ds[data-motion-tier="reduced"] #device .premium-composer > .dsd-think { display: none !important; }
html.ds #device.manual-reduced-motion .premium-composer.dsd-thinking textarea::placeholder,
html.ds.reduce-motion #device .premium-composer.dsd-thinking textarea::placeholder,
html.ds[data-motion-tier="reduced"] #device .premium-composer.dsd-thinking textarea::placeholder { color: var(--c-label-3) !important; }

/* ===== 6  Discover: a "Try asking for" card hands its request to the box =================================== */
/* The sentence in flight: an aria-hidden, inert, read-only copy of the request box laid exactly over it (its box,
   type and padding are written by the runtime), moved with transform and opacity only, and removed when it lands.
   !important: older layers size and fill every textarea in the composer with !important. */
html.ds #device .premium-composer > .dsd-hand { position: absolute; z-index: 6; display: block; pointer-events: none; transform-origin: 0 0; opacity: 0; will-change: transform, opacity; }
html.ds #device .premium-composer > .dsd-hand > .dsd-hand-text {
  display: block; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; outline: 0 !important; background: none !important; box-shadow: none !important;
  resize: none; overflow: hidden; pointer-events: none; appearance: none; -webkit-appearance: none; caret-color: transparent; opacity: 1 !important;
}
@media (prefers-reduced-motion: reduce) { html.ds #device .premium-composer > .dsd-hand { display: none; } }
html.ds #device.manual-reduced-motion .premium-composer > .dsd-hand,
html.ds.reduce-motion #device .premium-composer > .dsd-hand,
html.ds[data-motion-tier="reduced"] #device .premium-composer > .dsd-hand { display: none; }

/* ===== 8  Collections: a Collection ends with a title card ================================================== */
/* THE END between two hairlines, then the count and the list's name. It opens from the middle, like curtains
   (clip-path), the first time it is seen; .is-still (seen already, or Reduce Motion) shows it open with no motion. */
html.ds #device .collections-api-detail > .dsd-end { display: grid; justify-items: center; gap: 10px; margin: 44px 0 8px; padding: 0 var(--gutter, 20px); text-align: center; pointer-events: none; }
html.ds #device .collections-api-detail > .dsd-end > .dsd-end-card {
  display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%;
  clip-path: inset(0 50% 0 50%); transition: clip-path var(--motion-slow) var(--motion-spring); will-change: clip-path;
}
html.ds #device .collections-api-detail > .dsd-end.is-in > .dsd-end-card { clip-path: inset(0 0 0 0); }
html.ds #device .collections-api-detail > .dsd-end .dsd-end-rule { flex: 0 1 56px; height: 1px; background: var(--c-line-strong); }
html.ds #device .collections-api-detail > .dsd-end .dsd-end-word {
  font-family: var(--font-ui); font-size: calc(13 * var(--type-unit)); font-weight: 600; line-height: calc(16 * var(--type-unit)); letter-spacing: .34em; margin-right: -.34em;
  text-transform: uppercase; color: var(--c-label-2); white-space: nowrap;
}
html.ds #device .collections-api-detail > .dsd-end > .dsd-end-line {
  font-family: var(--font-ui); font-size: calc(12 * var(--type-unit)); font-weight: 400; line-height: calc(16 * var(--type-unit)); color: var(--c-label-3); text-wrap: balance;
  opacity: 0; transform: translateY(4px); transition: opacity var(--motion-normal) var(--motion-curve) 480ms, transform var(--motion-normal) var(--motion-spring) 480ms;
}
html.ds #device .collections-api-detail > .dsd-end.is-in > .dsd-end-line { opacity: 1; transform: none; }
html.ds #device .collections-api-detail > .dsd-end.is-still > .dsd-end-card,
html.ds #device .collections-api-detail > .dsd-end.is-still > .dsd-end-line { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html.ds #device .collections-api-detail > .dsd-end > .dsd-end-card { clip-path: none; transition: none; }
  html.ds #device .collections-api-detail > .dsd-end > .dsd-end-line { opacity: 1; transform: none; transition: none; }
}
html.ds #device.manual-reduced-motion .collections-api-detail > .dsd-end > .dsd-end-card,
html.ds.reduce-motion #device .collections-api-detail > .dsd-end > .dsd-end-card,
html.ds[data-motion-tier="reduced"] #device .collections-api-detail > .dsd-end > .dsd-end-card { clip-path: none; transition: none; }
html.ds #device.manual-reduced-motion .collections-api-detail > .dsd-end > .dsd-end-line,
html.ds.reduce-motion #device .collections-api-detail > .dsd-end > .dsd-end-line,
html.ds[data-motion-tier="reduced"] #device .collections-api-detail > .dsd-end > .dsd-end-line { opacity: 1; transform: none; transition: none; }

/* ===== 9  Discover: the three canisters count themselves, and the projectionist asks about the hour ========= */
/* While the canisters hop, the app's own mark is drawn in place of its image (same box, written by the runtime) so
   its three groups can move separately; the image comes back the moment they land. The words sit beside the
   wordmark, out of the layout, and never take a touch. */
html.ds #device .app-header > .brand-home { position: relative; }
/* Where the mark is not a control (a div, on Discover) Safari only sends a tap to an element it considers pressable
   (!important: frontend-completion pins `.premium-discover .brand-home[role="img"]` to cursor: default !important) */
html.ds #device .app-header > div.brand-home { cursor: pointer !important; -webkit-tap-highlight-color: transparent; }
html.ds #device .app-header > .brand-home > .dsd-mark { position: absolute; z-index: 1; overflow: visible; pointer-events: none; }
html.ds #device .app-header > .brand-home.dsd-hopping > img.brand-mark { visibility: hidden; }
html.ds #device .app-header > .brand-home > .dsd-booth {
  position: absolute; left: 100%; top: 50%; margin: -8px 0 0 14px; white-space: nowrap; pointer-events: none;
  font-family: var(--font-ui); font-size: calc(13 * var(--type-unit)); font-weight: 400; line-height: calc(16 * var(--type-unit)); letter-spacing: .01em; color: var(--c-label-3);
}

/* ===== 10  Library: the Watchlist catches what was saved ==================================================== */
/* The deal is two short runtime animations (transform and opacity) on nodes the cover already has. Here: the count
   beats from its left edge so the words do not shift, and the card being dealt keeps its place in the fan (a moving
   card is its own layer, which would otherwise drop it behind the middle poster until it lands). */
html.ds #device .library-watchlist-cover .library-cover-copy > span { transform-origin: 0 60%; }
html.ds #device .library-watchlist-cover .library-cover-posters > span.dsd-dealt { z-index: 1; }

/* ===== prototype-src/delight-post-credits.css ===== */
/* TRIPTIC delight: the scene after the credits (8 October 2026). Runtime pair: delight-post-credits.js.
   Record: hub/docs/DELIGHT-POST-CREDITS-2026-10-08.md.
   One layer over the foot of a Collection, made only while the scene plays and taken away when it ends. Nothing in
   it can be touched and nothing on the page moves in the layout. The runtime gives two numbers: where THE END's
   card stands (--dpc-x, --dpc-y, in the device's own box); the floor is just above it and the title takes its place.
   Motion is Web Animations on transform, opacity and clip-path, written by the runtime; this sheet holds the
   picture. Colours are tokens (the stage, the lamp); the end title is set exactly as THE END is. */

html.ds #device > .dpc-sting {
  --dpc-floor: calc(var(--dpc-y) - 30px);
  --dpc-sx: var(--dpc-x); /* where Flick stands: THE END's middle, or the leaf beside a Duo's fold */
  position: absolute; z-index: 20; inset: 0; overflow: hidden; pointer-events: none; contain: layout paint;
}
html.ds #device > .dpc-sting > i, html.ds #device > .dpc-sting > span, html.ds #device > .dpc-sting > b { position: absolute; display: block; }

/* the house lights go down again, from the foot of the screen */
html.ds #device > .dpc-sting > .dpc-veil {
  left: 0; right: 0; bottom: 0; top: calc(var(--dpc-y) - 360px); opacity: 0;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--c-stage) 72%, transparent) 30%, color-mix(in srgb, var(--c-stage) 94%, transparent) 52%, var(--c-stage) 70%);
}
/* a faint cone of light from above, and the pool it makes on the floor */
html.ds #device > .dpc-sting > .dpc-cone {
  left: calc(var(--dpc-sx) - 110px); width: 220px; top: calc(var(--dpc-floor) - 260px); height: 262px; opacity: 0;
  background: conic-gradient(from 157deg at 50% 0%, transparent 0deg, color-mix(in srgb, var(--c-lamp) 8%, transparent) 12deg, color-mix(in srgb, var(--c-lamp) 8%, transparent) 34deg, transparent 46deg);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 78%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 78%);
}
html.ds #device > .dpc-sting > .dpc-pool {
  left: var(--dpc-sx); top: var(--dpc-floor); width: 210px; height: 38px; opacity: 0; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-lamp) 34%, transparent), color-mix(in srgb, var(--c-lamp) 10%, transparent) 62%, transparent);
}

/* Flick: 96 points square, standing on the floor (his pictures stand on their square's floor) */
html.ds #device > .dpc-sting > .dpc-actor { left: calc(var(--dpc-sx) - 48px); top: calc(var(--dpc-floor) - 93px); width: 96px; height: 96px; }
html.ds #device > .dpc-sting .dpc-hop { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; }
html.ds #device > .dpc-sting .dpc-spool { width: 100%; height: 100%; }

/* the clack: three short strokes off the end of the clapper */
html.ds #device > .dpc-sting .dpc-spark { position: absolute; left: 27px; top: 21px; width: 0; height: 0; opacity: 0; }
html.ds #device > .dpc-sting .dpc-spark > i {
  position: absolute; display: block; left: -9px; top: -1px; width: 9px; height: 2px; border-radius: var(--r-pill, 999px);
  background: var(--c-lamp); transform-origin: 100% 50%;
}
html.ds #device > .dpc-sting .dpc-spark > i:nth-child(1) { transform: rotate(-38deg) translateX(-4px); }
html.ds #device > .dpc-sting .dpc-spark > i:nth-child(2) { transform: rotate(-4deg) translateX(-5px); }
html.ds #device > .dpc-sting .dpc-spark > i:nth-child(3) { transform: rotate(30deg) translateX(-4px); }

/* the new end title, in THE END's own place and type */
html.ds #device > .dpc-sting > .dpc-title {
  left: 0; width: 100%; top: var(--dpc-y); translate: calc(var(--dpc-x) - 50%) -50%;
  display: flex; align-items: center; justify-content: center; gap: 16px; box-sizing: border-box; padding: 0 var(--gutter, 20px);
  clip-path: inset(0 50% 0 50%); font-weight: inherit;
}
html.ds #device > .dpc-sting .dpc-rule { flex: 0 1 56px; min-width: 12px; height: 1px; background: var(--c-line-strong); }
html.ds #device > .dpc-sting .dpc-word {
  font-family: var(--font-ui); font-size: calc(13 * var(--type-unit)); font-weight: 600; line-height: calc(16 * var(--type-unit)); letter-spacing: .34em; margin-right: -.34em;
  text-transform: uppercase; color: var(--c-label-1); white-space: nowrap;
}
/* at the largest text sizes the spacing closes a little, so the title and its two rules still fit a 375-point screen
   (set for SPOOLIE on 8 October 2026; FLICK, since 13 October, is shorter and keeps it) */
html.ds #device > .dpc-sting .dpc-word:is(:root[data-text-size="largest"] *) { letter-spacing: .2em; margin-right: -.2em; }

/* Reduce Motion: a still picture that fades in and out; nothing of Flick's own moves */
html.ds #device > .dpc-sting.is-calm > .dpc-title { clip-path: none; opacity: 0; }
html.ds #device > .dpc-sting.is-calm > :is(.dpc-cone, .dpc-pool, .dpc-actor) { opacity: 0; }
html.ds #device > .dpc-sting.is-calm .dpc-spool *, html.ds #device > .dpc-sting.is-calm .dpc-spool { animation: none !important; transition: none !important; }

/* ===== prototype-src/ds-hints.css ===== */
/* TRIPTIC ds-hints: hand-written hints. Runtime pair: ds-hints.js; record: hub/docs/HINTS-2026-10-02.md.
   The same white ink as the taste card's "no / swipe / yes" note (ds-first-run.css .ds-fr-doodle-side): round caps, 2px
   arrows, 1.9px letters, a soft shadow so it reads on any poster. One fixed, pointer-events-free SVG over the whole
   viewport; everything is positioned inside it from the control's live box (ds-hints.js layout()). Nothing here moves:
   the draw-on, the nudge and the fade are Web Animations in the runtime (stroke-dashoffset, transform, opacity). */
html.ds .ds-hint {
  position: fixed; left: 0; top: 0; z-index: 2147483000;
  pointer-events: none; overflow: visible;
  fill: none; stroke: var(--c-label-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  /* the taste card's shadow, and a wider, fainter one under it: a note may land on a pale poster */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7)) drop-shadow(0 0 7px rgba(0, 0, 0, .45));
}
html.ds .ds-hint .ds-hint-letters path { stroke-width: 1.9; }
html.ds .ds-hint .ds-hint-arrow path { stroke-width: 2; }
/* a note that floats over scrolling content (the folded tab bar's) sits on a soft dark cloud, feathered to nothing */
html.ds .ds-hint .ds-hint-plate { stroke: none; }
html.ds .ds-hint stop { stop-color: var(--c-stage); }
/* on a light surface (a cream ticket, a pale card) the same hand in dark ink, with a light halo instead of a shadow */
html.ds .ds-hint.ds-hint-dark { stroke: var(--c-lamp-ink); filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .55)); }

/* Settings > Flick & hints: the two hint rows and the small "hi" in the same hand beside "Show hints again" */
html.ds #device .ds-hints-about .settings-row { -webkit-user-select: none; user-select: none; }
html.ds #device .ds-hints-about .settings-row:disabled { opacity: .5; }
/* (pages polish, 28 October 2026) no longer drawn: the sample of the hand left Settings */
html.ds #device .ds-hints-about-ink { display: inline-flex; align-items: center; margin-left: auto; color: var(--c-label-2); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html.ds #device .ds-hints-about-ink svg { overflow: visible; rotate: -4deg; }

/* ===== prototype-src/ds-safe-area.css ===== */
/* TRIPTIC safe areas (readiness review, 6 October 2026). hub/docs/READINESS-REVIEW-2026-10-06.md, finding S1.

   The iPhone app runs edge to edge (viewport-fit=cover; the native shell pins the web view to the screen's edges), so
   the top of the page is under the status bar and the Dynamic Island. The five tab roots, the first-run flow, the Daily
   Cryptic, The Ten and the search ritual already pad for it. Every page that is PUSHED over a tab did not: Settings and
   every page under it, the Library's lists, Film DNA, Friday 3, Membership, the film page's two controls, a Collection.
   Their Back button and title sat at 20 to 24pt from the top edge, which on an iPhone with a Dynamic Island is behind the
   clock and the battery.

   One rule for all of them: the page's first row starts 8pt below the safe area, and never higher than it did before
   (so a browser tab, where the inset is 0, is pixel for pixel what it was). Bottom insets are untouched here except
   where a page's own rule was being lost to a later layer.

   This layer only adds space. It defines no colour, type or radius. */
html.ds {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* where a pushed page's header row starts */
  --page-top: max(20px, calc(var(--safe-top) + 8px));
  --page-top-24: max(24px, calc(var(--safe-top) + 8px));
}

/* ===== Settings and every page in its family (Privacy & data, Account, Membership, Sign in, platforms, About …) ===== */
html.ds #device > .screen:is(.dsy-page, .dsy-region, .dsy-spoiler) { padding-top: var(--page-top); }
html.ds #device > .screen.dsy-dna-page { padding-top: var(--page-top) !important; }
html.ds #device > .screen.dsy-interests { padding-top: max(16px, calc(var(--safe-top) + 8px)) !important; }

/* ===== the Library's lists, Saved Collections, Friday 3 ===== */
html.ds #device > .screen.dslc-screen.library-premium:not(.library-screen, .dsy-page) { padding-top: var(--page-top-24); }
/* Saved Collections' header carries 24pt of its own above the row, so the page gives the rest */
html.ds #device > .screen.dslc-saved.collections-api-saved { padding-top: max(12px, calc(var(--safe-top) - 16px)); }
/* a Collection: the header is the page's first child and holds the padding */
html.ds #device > .screen.collections-api-detail > .subpage-header { padding-top: var(--page-top-24); }
/* Friday 3's display (friday-page.js, .f3-page: the week's three on its own purple) is the same pushed page; it was
   missed here and its Back and title sat at 24pt, behind the clock (P-SYSTEM, 13 October 2026) */
html.ds #device > .screen:is(.ds-fri, .f3-page) { padding-top: var(--page-top-24); }

/* ===== the film page: its two controls over the poster, and the bar that takes their place once the page scrolls ===== */
html.ds #device .film-topbar { top: var(--page-top-24); }
html.ds #device .film-compact-header { top: max(8px, calc(var(--safe-top) + 4px)); }

/* ===== the share ticket (one film, three films, a Collection) ===== */
html.ds #device > .screen.share-screen { padding-top: max(14px, calc(var(--safe-top) + 8px)) !important; }

/* ===== a film someone sent you: the page a shared link opens ===== */
html.ds #device > .screen.collectible-receiver.receiver-screen { padding-top: max(22px, calc(var(--safe-top) + 8px)); }
/* The page was a column centred on its middle. Three films with their ticket are taller than the screen, and a centred
   column that overflows loses its top as well as its bottom: Close and the first 84pt of the ticket were above the top
   edge and could not be scrolled to. It starts at the top, like every other page. */
html.ds #device > .screen.collectible-receiver.receiver-screen { justify-content: flex-start; }

/* ===== the full-screen answers to a search that did not make three (one more detail, nothing found, busy, offline,
   today's limit, a search TRIPTIC will not run): their one round control sat at 24pt, behind the clock ===== */
html.ds #device > .screen:is(.clarify-screen, .system-state-screen) > .circle-control:is(.back-chevron, .close-control) { top: var(--page-top-24) !important; }
/* Moved down clear of the clock, Back on "One detail before your three", "Not quite a full three", the refused search
   and "Not three on your services" came to rest inside the box of the mark drawn above the heading (72 to 220pt tall,
   from the top of the page, and later in the page than Back). The mark took the touch: Back looked right and did
   nothing under a finger. The mark is decoration and takes no touches; Back sits above it. (Found 6 October 2026 with
   a real touch; a scripted click goes straight to the button and never showed it.) */
html.ds #device > .screen.clarify-screen > .clarify-mark { pointer-events: none; }
html.ds #device > .screen:is(.clarify-screen, .system-state-screen) > .circle-control:is(.back-chevron, .close-control) { z-index: 3; }
/* (iPhone QA, 5 November 2026) "Not quite a full three": Flick's bubble sat UNDER the round Back on every iPhone with a notch
   or an island (Back at 55 to 99pt on a 390 x 844, the bubble from 81pt; at 67 to 111pt on a Pro Max). The page's first row
   now starts 12pt below Back wherever Back stands lower than the old 24pt (recommendation-waiting.css still gives Flick his
   26pt and a short screen its 86pt); a browser tab, where the inset is 0, is unchanged. */
@media (min-height: 701px) {
  html.ds #device > .screen.clarify-screen { padding-top: max(55px, calc(var(--page-top-24) + 44px + 12px - 26px)) !important; }
}

/* ===== Daily Cryptic while typing a guess =====
   With the keyboard up the game tightens its padding to 8pt top and bottom to fit the clue above the keys. The keyboard
   takes the bottom of the screen, not the top: the status bar and the Dynamic Island are still there, and the score
   sat directly beneath them. The bottom needs no inset while the keyboard covers it. */
html.ds #device.keyboard-open > .screen.cg-play { padding-top: max(8px, calc(var(--safe-top) + 4px)) !important; }

/* "How it works" rises to 48pt from the top: its grabber sat in the status bar */
html.ds .ds-how.cg-scope .ds-how-panel { max-height: calc(100% - max(48px, calc(var(--safe-top) + 10px))); }

/* ===== sheets that rise almost to the top (Refine, a replacement) stop below the status bar ===== */
html.ds #device > .screen.ds-sheet-large { top: max(12px, calc(var(--safe-top) + 6px)); }
html.ds #device > .screen.ds-sheet-auto { height: min(610px, calc(100% - 56px - var(--safe-top))); }
html.ds #device dialog.film-platforms-sheet.ds-sheet-host { max-height: calc(100% - max(56px, calc(var(--safe-top) + 10px))); }

/* ===== Refine and the note after "Not right?" when they are a page, not a card =====
   They rise as a card only when there is a page to rise from. With Reduce Motion on, after a reload, or over a three
   reopened from the Library there is none, and they are drawn as a full page instead: its round Back sat at 24pt,
   behind the clock, with the first line of the page 80pt down. Both follow the status bar. A card (.ds-sheet-host)
   is untouched. */
html.ds #device > .screen:is(.refinement-screen, .replacement-screen):not(.ds-sheet-host) { padding-top: max(80px, calc(var(--safe-top) + 64px)) !important; }
html.ds #device > .screen:is(.refinement-screen, .replacement-screen):not(.ds-sheet-host) > .circle-control { top: var(--page-top-24); }

/* ===== the status bar stays readable over a scrolled page =====
   ds-navigation.css fades a scrim in from the top once a page has scrolled 24pt. It ran from 90% to nothing across the
   whole band, so under the clock it was already half gone. It now holds through the safe area and fades below it. */
html.ds #device > .ds-edge-top {
  background: linear-gradient(to bottom, rgb(5 5 7 / .94) 0, rgb(5 5 7 / .88) var(--safe-top), rgb(5 5 7 / 0) 100%);
}

/* ===== (SEND, 27 October 2026) the full-screen answers to a search scroll, all of them, with room above the home indicator.
   The owner, on "Not quite a full three": "you can't scroll to the bottom" (his screenshot: Flick's line, a long reason and
   his request in its box, with "Tweak my request" cut off at the bottom edge). The legacy rule `.screen { overflow: hidden }`
   (triptic-app.css) held every page that did not say otherwise, and only the short-screen rule (max-height 700px,
   recommendation-waiting.css) and the recovery pages (.recommendation-recovery) said so: on a 393x852 iPhone, a reason
   long enough, Flick's bubble or the largest text pushed the page's end out of reach. Every such page now scrolls, and
   ends at least 24pt above the home indicator. The complete three is not among them: its page is a fixed composition
   fitted to the screen (device-fit.js revealGeometry), and two films are their own page with a pinned footer
   (two-film-answer.css), already padded for the indicator. Nothing here changes what a page says. */
html.ds #device > .screen:is(.clarify-screen, .system-state-screen, .decision-screen, .subscription-screen) {
  overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
  padding-bottom: max(32px, calc(var(--safe-bottom) + 24px)) !important;
}

/* ===== the foot of a pushed page (pages polish, 28 October 2026) =====
   The owner: "About Friday 3" and a Collection's last row sat over "a big empty gap". A legacy sheet (triptic-expansion.css) gives
   every settings-family page, the Library's lists and the share page 142pt at the foot, room for the tab bar, with !important. A
   pushed page has no tab bar (it is put away while the page is up), so that room was empty. Where the display has no tab bar, the
   page ends as the design system's pages do: 40pt, or 24pt clear of the home indicator. A tab keeps its room; the film page and the
   Duo's book keep their own. */
html.ds:not([data-duo-book]) #device:not(:has(> .persistent-glass-nav)) > .screen:is(.destination-screen, .sublist-screen, .settings-screen, .share-screen):not(.ds-sheet-host) {
  padding-bottom: max(40px, calc(var(--safe-bottom, 0px) + 24px)) !important;
}

/* ===== prototype-src/ds-finish.css ===== */
/* TRIPTIC finishing layer (readiness review, 6 October 2026). hub/docs/READINESS-REVIEW-2026-10-06.md.

   Small, cross-cutting corrections found by walking every page side by side: places where an older layer's rule still
   showed through the design system, so that two pages that should be the same kind of thing were not. Nothing here
   invents a style: each rule points an outlier at the token its siblings already use.

   Contents
     1. one header for a pushed page: one title size, one Back glyph
     2. the You tab under the shared brand row
     3. empty states carry the mark, not its silhouette
     4. the reminder invitation inside the Daily Cryptic wears the game's own clothes
     5. touch targets that were under 44pt
     6. Daily Cryptic: a riddle is always in italics
     7. one disclosure chevron
     8. a row that is a link is still a row
     9. Friday 3: left-set lines, capsule buttons, three cards breathing while the three are found
    10. the last pushed pages on the one header */

/* ===== 1. one header for a pushed page =====
   Settings and its family drew their title at 22 (title 2), the Library's lists at 28 (title 1, where "Received
   TRIPTICs" wrapped on to a second line beside Back) and Friday 3 at 20. One size: title 2, one line. */
html.ds #device > .screen > :is(.library-page-header, .subpage-header) > h1,
html.ds #device > .screen.collections-api-saved > header > h1,
html.ds #device > .screen:is(.ds-fri, .f3-page) > header > h1 {
  font-size: var(--fs-title-2); line-height: var(--lh-title-2); font-weight: var(--fw-title-2); letter-spacing: var(--tr-title-2);
}
/* Friday 3 is a pushed page like Settings, but its header was a flex row with an empty spacer (the title sat 22pt right
   of centre), its gutter was 22 where every other pushed page has 20, and its week card was inset a further 20. The
   same row as Settings: Back, a centred title, a matching spacer; one gutter; the card on that gutter. */
html.ds #device > .screen.ds-fri { padding-inline: var(--gutter); }
/* Saved searches and Recent searches sat on a 22pt gutter beside the Watchlist's 20 */
html.ds #device > .screen.sublist-screen.dslc-screen { padding-inline: var(--gutter); }
html.ds #device > .screen.ds-fri > header { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 12px; }
html.ds #device > .screen.ds-fri > header > h1 { margin: 0; text-align: center; }
html.ds #device > .screen.ds-fri > .ds-fri-hero { margin-inline: 0; }
/* One Back glyph. The Library's lists and Search history still drew the first prototype's chevron (two 1px borders of a
   rotated 9px box); every other page draws the icon set's (24 grid, 1.7 stroke). The box becomes that same path. */
html.ds #device .circle-control.back-chevron > i:empty {
  position: static !important; width: 24px !important; height: 24px !important; border: 0 !important; rotate: none !important; transform: none !important; margin: 0 !important;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.5 5.5-6.5 6.5 6.5 6.5'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.5 5.5-6.5 6.5 6.5 6.5'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}

/* ===== 2. the You tab under the shared brand row ===== */
html.ds #device .dsy-you > .app-header + .dsy-you-head { margin-top: 12px; } /* 12, as Today, Collections and Library: see section 12 */

/* ===== 3. empty states carry the mark =====
   The glyph was the mark used as a mask, which fills its three canisters in: a grey lump. The mark itself, quietly. */
html.ds .dslc-glyph:not(.is-snapped) {
  background: url("/assets/trio-mark-compact.svg") center / contain no-repeat;
  -webkit-mask: none; mask: none; opacity: .42;
}

/* ===== 4. the reminder invitation inside the Daily Cryptic =====
   "Same time tomorrow?" arrived on the result page as the app's own dark card with the lamp/grey button pair: a black
   box in the one bright room. Inside the game it takes the room's panel (as the run card above it does), the room's
   paper button for yes and its glass button for not now. Everywhere else it is unchanged. */
html.ds #device .cg-room .tn-prime {
  background: var(--cg-panel); border: 0; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--cg-panel-line);
  color: var(--cg-cream);
}
html.ds #device .cg-room .tn-prime-icon { background: var(--cg-panel-strong); color: var(--cg-pop); }
html.ds #device .cg-room .tn-prime.is-settled .tn-prime-icon { background: var(--cg-panel-strong); color: var(--cg-mint); }
html.ds #device .cg-room .tn-prime-copy strong { color: var(--cg-cream); }
html.ds #device .cg-room .tn-prime-copy p { color: var(--cg-cream-dim); }
html.ds #device .cg-room .tn-prime-actions button { border-radius: var(--r-pill); }
html.ds #device .cg-room .tn-prime-yes { background: var(--cg-paper); color: var(--cg-ink); box-shadow: 1.1px 3px 0 var(--cg-paper-edge); }
html.ds #device .cg-room .tn-prime-no { background: var(--cg-panel-strong); color: var(--cg-cream); box-shadow: inset 0 0 0 1px var(--cg-panel-line); }


/* ===== 5. touch targets that were under 44pt =====
   Measured on every page with the extended hit areas counted (the request box's Save and Clear, the running time and the
   share message chips already reach 44 through an ::after). What was left: "More options" under Where to watch (40). */
html.ds #device .film-v5 .watch-options .watch-meta .watch-all-link { padding-block: 14px; }
html.ds #device .film-v5 .watch-options .watch-meta .watch-licence { margin-top: -8px; }
/* the line on your three that says where a You choose link stands ("Waiting for their pick", "They chose …") is a
   button 30pt high: its hit area reaches 44 */
html.ds #device .yc-pill::after { content: ""; position: absolute; inset: -7px -4px; }

/* ===== 6. Daily Cryptic: a riddle is always in italics =====
   The riddle's italic was set on the line, and the rules that size a longer line (and every line while the keyboard is
   up) used the `font` shorthand, which resets it: a riddle of more than seventy characters, or any riddle while typing a
   guess, came out upright. The same for a quoted tagline. */
html.ds .cg-ticket.cg-ticket-riddle .cg-ticket-line,
html.ds .cg-ticket .cg-ticket-line.cg-quote,
html.ds #device.keyboard-open > .cg-play .cg-ticket.cg-ticket-riddle .cg-ticket-line,
html.ds #device.keyboard-open > .cg-play .cg-ticket .cg-ticket-line.cg-quote { font-style: italic; }

/* ===== 7. one disclosure =====
   A row that opens in place drew the browser's own black triangle on Friday 3, Refine, a Collection and "How was it?",
   and nothing at all on Privacy & data and Film DNA (a row with a title and no sign that it opens). One chevron, the
   icon set's stroke, at the trailing edge; it turns over while the row is open. */
html.ds #device :is(.privacy-explanation, .membership-explainer, .friday-delivery, .refinement-original, .refinement-sent, .collection-membership-notes, .film-reaction details, .request-fit, .film-information-source, .friday-preference-editor, .friday-notes, .taste-hidden-threads, .taste-more-threads, .fd-small) > summary {
  display: flex; align-items: center; gap: 12px; min-height: 44px; list-style: none; cursor: pointer;
}
html.ds #device :is(.privacy-explanation, .membership-explainer, .friday-delivery, .refinement-original, .refinement-sent, .collection-membership-notes, .film-reaction details, .request-fit, .film-information-source, .friday-preference-editor, .friday-notes, .taste-hidden-threads, .taste-more-threads, .fd-small) > summary::-webkit-details-marker { display: none; }
html.ds #device :is(.privacy-explanation, .membership-explainer, .friday-delivery, .refinement-original, .refinement-sent, .collection-membership-notes, .film-reaction details, .request-fit, .film-information-source, .friday-preference-editor, .friday-notes, .taste-hidden-threads, .taste-more-threads, .fd-small) > summary::after {
  content: ""; flex: none; width: 20px; height: 20px; margin-left: auto; background: currentColor; opacity: .56;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  transition: rotate var(--motion-fast) var(--motion-curve);
}
html.ds #device :is(.privacy-explanation, .membership-explainer, .friday-delivery, .refinement-original, .refinement-sent, .collection-membership-notes, .film-reaction details, .request-fit, .film-information-source, .friday-preference-editor, .friday-notes, .taste-hidden-threads, .taste-more-threads, .fd-small)[open] > summary::after { rotate: 180deg; }
@media (prefers-reduced-motion: reduce) {
  html.ds #device details > summary::after { transition: none; }
}
html.ds #device.manual-reduced-motion details > summary::after { transition: none; }

/* ===== 8. a row that is a link is still a row =====
   Privacy Policy, Terms of Use and Contact support are links (they leave the app), and wore the browser's underline
   beside rows that did not. */
html.ds #device a:is(.settings-row, .ds-row), html.ds #device a:is(.settings-row, .ds-row) * { text-decoration: none; }

/* ===== 9. Friday 3 =====
   The line under a heading ("Take this Friday in a different direction…", "We'll wait for up to a minute…") kept the
   search ritual's centred measure (265pt wide, margins auto) on a page that is set left: it read as an indented quote.
   The reminder's two buttons were soft boxes beside the capsule every other button is. */
html.ds #device > .screen.ds-fri :is(.onboarding-copy, .critical-status) > p { max-width: none; margin-inline: 0; text-align: left; }
html.ds #device .tn-prime-actions button { border-radius: var(--r-pill); }

/* While the three are being found (up to a minute) the page was a heading and a sentence, perfectly still. Three sealed
   cards sit above the heading and a light passes across them, in the page's own violet: the three the reveal then deals. */
html.ds #device > .screen.ds-fri .friday-waiting .critical-status::before {
  content: ""; display: block; width: 76px; height: 34px; margin: 4px 0 18px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--c-seal-hi) 26%, transparent) 34%, var(--c-seal-hi) 50%, color-mix(in srgb, var(--c-seal-hi) 26%, transparent) 66%) 50% 0 / 320% 100% no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 34'%3E%3Crect x='0' y='3' width='20' height='28' rx='5'/%3E%3Crect x='28' y='3' width='20' height='28' rx='5'/%3E%3Crect x='56' y='3' width='20' height='28' rx='5'/%3E%3C/svg%3E") center / 76px 34px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 34'%3E%3Crect x='0' y='3' width='20' height='28' rx='5'/%3E%3Crect x='28' y='3' width='20' height='28' rx='5'/%3E%3Crect x='56' y='3' width='20' height='28' rx='5'/%3E%3C/svg%3E") center / 76px 34px no-repeat;
  animation: dsf-friday-seal 2.2s linear infinite;
}
/* 120 Hz (17 Oct 2026): the seal breathes by opacity over a still sheen; a moving background-position repainted every frame */
@keyframes dsf-friday-seal { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.ds #device > .screen.ds-fri .friday-waiting .critical-status::before { animation: none; background-position: 50% 0; }
}
html.ds #device.manual-reduced-motion > .screen.ds-fri .friday-waiting .critical-status::before,
html.ds[data-motion-tier="reduced"] #device > .screen.ds-fri .friday-waiting .critical-status::before { animation: none; background-position: 50% 0; }

/* ===== 10. the last pushed pages on the one header =====
   Film DNA, Your services and Spoiler protection still drew their title at 17 (headline) where Settings, the Library's
   lists and Friday 3 draw 22. Saved Collections' header carried 24pt of padding of its own, so its Back sat 24pt in
   from every other page's and its title ran left beside it. */
html.ds #device > .screen > header.dsy-nav > h1 {
  font-size: var(--fs-title-2); line-height: var(--lh-title-2); font-weight: var(--fw-title-2); letter-spacing: var(--tr-title-2);
}
html.ds #device > .screen.dslc-saved.collections-api-saved > header.subpage-header {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; min-height: 44px; padding: 0; margin: 0 0 12px;
}
html.ds #device > .screen.dslc-saved.collections-api-saved > header.subpage-header > h1 { margin: 0; text-align: center; }
html.ds #device > .screen.dslc-saved.collections-api-saved { padding-top: var(--page-top-24); }

/* ===== 11. the notes editor says its limit once =====
   "Up to 280 characters." sat directly above "31 / 280 characters". The count carries the limit; the first line stays for
   VoiceOver, which reads it as the field's description. */
html.ds #device #friday-preference-limit { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ===== 12. the five tabs share one left edge and one title line =====
   Discover drew its mark and title 20pt from the edge; Today, Collections, Library and You drew theirs at 5.64% of the
   width (22pt on a 390pt phone, 25 on the largest), so the mark stepped sideways on every change of tab. Their large titles
   began 6, 10, 12 and 12pt below the brand row, and Library set its title on a tighter line, so the title stepped up and
   down as well. One gutter (the system's 20) and one title line for all of them. */
html.ds #device > .screen:is(.premium-discover, .collections-api-screen, .library-screen.library-premium, .profile-screen.taste-intelligence-profile, .today-screen.ds-today) { --triptic-brand-gutter: var(--gutter); }
html.ds #device .ds-today > .dt-masthead { margin-top: 12px; }
html.ds #device .dslc-library .destination-heading h1 { line-height: var(--lh-large-title) !important; }

/* ===== 13. Friday archive rows run edge to edge of the gutter =====
   The list carried a 20pt margin from when the page had no padding of its own; inside a padded page the rows began 40pt
   in and ended 40pt short, narrower than the same rows in Previous TRIPTICs. */
html.ds #device > .screen.ds-fri :is(.sublist, .library-history-list) { margin-inline: 0; }

/* ===== 14. a page title that takes focus shows no ring =====
   ds-core.js moves focus to a new page's title so VoiceOver and a keyboard start there. The title is not a control. */
html.ds #device h1[tabindex="-1"]:is(:focus, :focus-visible) { outline: none !important; box-shadow: none !important; }

/* ===== 15. a kept search is a row like any other =====
   Recent searches and Saved searches drew each request as a tall purple card of their own (a gradient, a violet border, a
   16pt line) with its "more" button alone on a second line under 40pt of empty card. It is the system's row now: the same
   surface, hairline and type as a Settings row, with "more" at the end of the first line where the chevron was. */
html.ds #device .search-library-list { gap: 10px; margin: 16px 0 24px; }
html.ds #device .search-library-row { border: 0; border-radius: var(--r-card); background: none; box-shadow: none; }
html.ds #device .search-library-row > .search-library-card { border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); }
html.ds #device .search-library-card > .search-library-open {
  grid-template-columns: 24px minmax(0, 1fr); gap: 12px; min-height: 64px; padding: 20px 16px; align-items: start;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-label-1);
}
html.ds #device .search-library-card > .search-library-open > .trip-ui-icon { display: none; }
html.ds #device .search-library-row .search-library-symbol { color: var(--c-label-3); }
/* (5 November 2026) no ••• and no Edit link: the card is swiped left to delete, or held for Edit and Delete (ds-swipe-rows) */
html.ds #device .search-library-card > .search-library-feedback { margin: 0; padding: 0 16px 14px; }
html.ds #device .search-library-screen .subpage-intro { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--c-label-2); }
/* (pages polish, 28 October 2026; the owner, Recent searches) Every card is the same: the first looked lighter because the card's
   fill was a 5% white over the page, and the room's light sits behind the first card only. The card is the raised stage, opaque.
   A recent request has no clock icon (the day headings say when), shows the three films it found and when, keeps to three lines
   until "Show all" (Edit is in its touch-and-hold menu since 5 November 2026); Recent searches has Clear all in its header. */
html.ds #device .search-library-row > .search-library-card { background: var(--c-stage-raised); }
html.ds #device .search-library-screen .search-library-day { margin: 14px 4px 2px; font: var(--fw-footnote-strong, 600) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds #device .search-library-screen .search-library-day:first-child { margin-top: 0; }
html.ds #device .search-library-card > .search-library-open:not(:has(.search-library-symbol)) { grid-template-columns: minmax(0, 1fr); }
html.ds #device .search-library-row .search-library-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
html.ds #device .search-library-row.is-expanded .search-library-text { display: block; -webkit-line-clamp: unset; overflow: visible; }
html.ds #device .search-library-row .search-library-films { grid-column: -2 / -1; display: flex; gap: 6px; margin-top: 2px; }
html.ds #device .search-library-row .search-library-poster { width: 34px; aspect-ratio: 2 / 3; border-radius: var(--r-chip); overflow: hidden; background: var(--c-fill-2); box-shadow: inset 0 0 0 1px var(--c-line); }
html.ds #device .search-library-row .search-library-poster > img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.ds #device .search-library-row .search-library-when { grid-column: -2 / -1; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }
html.ds #device .search-library-card > .search-library-more { min-height: 44px; margin: -12px 0 6px 16px; padding: 0 4px; border: 0; background: none; box-shadow: none; color: var(--c-seal-hi); font: var(--fw-headline) var(--fs-footnote)/1 var(--font-ui); }
html.ds #device .search-library-screen .search-library-clear { justify-self: end; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--c-seal-hi); font: var(--fw-headline) var(--fs-subhead)/1 var(--font-ui); white-space: nowrap; }

/* ===== the app's one in-page link (pages polish, 28 October 2026) =====
   The accent and the rows' chevron, so it reads as something to tap and not as a line of text (Friday 3's "See your Film DNA" and
   "Add a note" looked like plain text; About's credits were a bright cyan used for no other link). Still a full-height target. A
   link that leaves the app keeps its own ↗ in place of the chevron. */
html.ds #device .ds-link { display: inline-flex; align-items: center; gap: 4px; min-height: var(--target, 44px); padding: 0; color: var(--c-seal-hi) !important; -webkit-text-fill-color: var(--c-seal-hi); font-weight: 600; text-align: left; }
html.ds #device .ds-link::after {
  content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
@media (forced-colors: active) { html.ds #device .ds-link { color: LinkText !important; -webkit-text-fill-color: LinkText; } }
html.ds #device .ds-link[target="_blank"]::after { content: none; }

/* ===== prototype-src/ds-swipe-rows.css ===== */
/* TRIPTIC ds-swipe-rows (pages polish, 28 October 2026; the iOS pattern, 5 November 2026): a row swiped left over a red action,
   resting open part way, deleted by a full swipe; touch and hold for its menu (ds-swipe-rows.js). Tokens only. */
html.ds #device .ds-swipe { position: relative; overflow: hidden; border-radius: var(--r-card); touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html.ds #device .ds-swipe > .ds-swipe-under {
  position: absolute; inset: 0; z-index: 0; display: flex; justify-content: flex-end; border-radius: inherit; overflow: hidden;
  background: color-mix(in srgb, var(--c-danger) 72%, var(--c-stage)); visibility: hidden; pointer-events: none;
}
html.ds #device .ds-swipe.is-revealing > .ds-swipe-under { visibility: visible; }
html.ds #device .ds-swipe > .ds-swipe-under > .ds-swipe-action {
  display: flex; align-items: center; justify-content: center; height: 100%; min-width: 88px; padding: 0 16px; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: var(--c-label-1); font: var(--fw-headline) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); white-space: nowrap;
}
/* past the full-swipe threshold the word rides the row's edge, as on iOS */
html.ds #device .ds-swipe.is-armed > .ds-swipe-under > .ds-swipe-action { justify-content: flex-start; padding-left: 22px; }
html.ds #device .ds-swipe.is-open > .ds-swipe-under { pointer-events: auto; }
html.ds #device .ds-swipe > .ds-swipe-face { position: relative; z-index: 1; }
html.ds #device .ds-swipe.is-gone { display: none; }
html.ds #device .ds-swipe.is-lifted > .ds-swipe-face { visibility: hidden; }
/* the same action for VoiceOver and the keyboard: unseen until focused, then a clear button over the row's end */
html.ds #device .ds-swipe > .ds-swipe-a11y {
  position: absolute; z-index: 2; right: 8px; top: 50%; translate: 0 -50%; width: auto; min-width: 44px; min-height: 44px; padding: 0 14px; border: 0;
  border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-danger) 72%, var(--c-stage)); color: var(--c-label-1);
  font: var(--fw-headline) var(--fs-footnote)/1 var(--font-ui); clip-path: inset(50%); opacity: 0;
}
html.ds #device .ds-swipe > .ds-swipe-a11y.is-quiet { background: var(--mat-chrome-solid, var(--c-fill-2)); color: var(--c-label-1); }
html.ds #device .ds-swipe > .ds-swipe-a11y:focus-visible { clip-path: none; opacity: 1; outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* touch and hold: the row lifts over a dimmed page with its menu */
html.ds :is(#device, .duo-stage) .ds-swipe-ctx { position: absolute; inset: 0; z-index: 90; }
html.ds :is(#device, .duo-stage) .ds-swipe-ctx-scrim {
  position: absolute; inset: 0; background: color-mix(in srgb, var(--c-stage) 55%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity var(--motion-fast) var(--motion-curve);
}
html.ds :is(#device, .duo-stage) .ds-swipe-ctx-lift {
  position: absolute; z-index: 1; margin: 0; translate: none; transition: scale var(--motion-normal) var(--motion-spring);
  box-shadow: var(--e-2); pointer-events: none; border-radius: var(--r-card); overflow: hidden;
}
html.ds :is(#device, .duo-stage) .ds-swipe-ctx-menu {
  position: absolute; z-index: 2; padding: 0; border-radius: var(--r-row); overflow: hidden;
  background: var(--mat-chrome-solid); border: 1px solid var(--c-line-strong); box-shadow: var(--e-2);
  opacity: 0; scale: .86; transition: opacity var(--motion-fast) var(--motion-curve), scale var(--motion-normal) var(--motion-spring);
}
html.ds :is(#device, .duo-stage) .ds-swipe-ctx.is-in .ds-swipe-ctx-scrim, html.ds :is(#device, .duo-stage) .ds-swipe-ctx.is-in .ds-swipe-ctx-menu { opacity: 1; }
html.ds :is(#device, .duo-stage) .ds-swipe-ctx.is-in .ds-swipe-ctx-menu { scale: 1; }
html.ds :is(#device, .duo-stage) .ds-swipe-ctx.is-in .ds-swipe-ctx-lift { scale: 1.03; }
html.ds :is(#device, .duo-stage) .ds-swipe-ctx.is-out .ds-swipe-ctx-scrim, html.ds :is(#device, .duo-stage) .ds-swipe-ctx.is-out .ds-swipe-ctx-menu { opacity: 0; }
html.ds :is(#device, .duo-stage) .ds-swipe-ctx.is-out .ds-swipe-ctx-lift { scale: 1; }
html.ds :is(#device, .duo-stage) .ds-swipe-ctx-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px; margin: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--c-label-1); text-align: left;
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui);
}
html.ds :is(#device, .duo-stage) .ds-swipe-ctx-item + .ds-swipe-ctx-item { border-top: 1px solid var(--c-line); }
html.ds :is(#device, .duo-stage) .ds-swipe-ctx-item:active { background: var(--c-fill-2); }
html.ds :is(#device, .duo-stage) .ds-swipe-ctx-item:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
html.ds :is(#device, .duo-stage) .ds-swipe-ctx-item.is-danger { color: var(--c-danger); }
html.ds :is(#device, .duo-stage) .ds-swipe-ctx-item svg { flex: 0 0 20px; width: 20px; height: 20px; }
/* Reduce Motion: no slide, no lift, no collapse; things simply arrive and go */
html.ds :is(#device, .duo-stage) .ds-swipe-ctx.is-still :is(.ds-swipe-ctx-scrim, .ds-swipe-ctx-lift, .ds-swipe-ctx-menu) { transition: none; scale: 1; }
@media (prefers-reduced-motion: reduce) { html.ds :is(#device, .duo-stage) .ds-swipe-ctx :is(.ds-swipe-ctx-scrim, .ds-swipe-ctx-lift, .ds-swipe-ctx-menu) { transition: none; scale: 1; } }
@media (forced-colors: active) { html.ds #device .ds-swipe > .ds-swipe-under, html.ds :is(#device, .duo-stage) .ds-swipe-ctx-menu { background: Canvas; border: 1px solid CanvasText; } html.ds #device .ds-swipe-action, html.ds :is(#device, .duo-stage) .ds-swipe-ctx-item { color: CanvasText; } }

/* ===== prototype-src/ds-service-tile.css ===== */
/* ONE SERVICE TILE, and Your services as a grid of them (pages polish, 28 October 2026; record hub/docs/PAGES-POLISH-2026-10-28.md).
   Markup: prototype-src/streaming-preferences.js serviceTile / tileInner, the one place a service's mark is drawn.

   The owner: the logos on Your services were every size and shape (a wide picture here, a small square on a grey slab
   there). Every service is now the same rounded square, the shape of an app icon, wherever it appears: Your services,
   the setup and film-page choices (.streaming-choice), Where to watch on a film (.watch-logo-icon) and, at badge size,
   Discover's On my services chips (.service-badge). Earlier rules sized the old 2:1 box per page and per service
   (first-run.css, interaction-targets.css, on-my-services.css, ds-you-settings.css); the size and shape here win over
   them with !important, so there is one answer. Each place sets only --svc-size. Tokens only. */
html.ds .svc-tile {
  --svc-size: 52px;
  position: relative !important; display: block !important; flex: none !important; box-sizing: border-box;
  width: var(--svc-size) !important; height: var(--svc-size) !important; min-width: 0; max-width: none !important;
  margin: 0; padding: 0 !important; overflow: hidden !important;
  border-radius: calc(var(--svc-size)*.225) !important;
  background: var(--c-fill-2) !important;
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--c-label-1) 16%, transparent);
}
/* the name tile in the service's own colours: what shows when there is no picture, or a picture fails to load */
html.ds .svc-tile > .svc-tile-name {
  position: absolute !important; inset: 0 !important; display: grid !important; place-items: center; border-radius: inherit;
  padding: 0 4px; font: 700 calc(var(--svc-size) * .26)/1 var(--font-ui); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: clip;
}
/* a name that knows its longest word (--len, from streamingMark) is set whole inside the tile: its words may take two lines,
   and the size comes down until the longest word fits ("BBC iPlayer" was cut at the tile's edge) */
html.ds :is(#device, body) .svc-tile > .svc-tile-name.streaming-wordmark[style*="--len"] {   /* over the older per-sheet wordmark sizes (on-my-services.css, 11px in the film sheet) */
  font-size: min(calc(var(--svc-size) * .26), calc((var(--svc-size) - 8px) / (var(--len) * .7)));
  line-height: 1.05; white-space: normal; text-align: center; text-wrap: balance; overflow-wrap: normal;
}
html.ds .svc-tile:has(> img) > .svc-tile-name { color: transparent !important; }
/* the film database's square icon: the service's own app icon, filling the tile */
html.ds .svc-tile > .svc-tile-icon {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; translate: none !important;
  aspect-ratio: auto !important; object-fit: cover !important; border-radius: inherit; display: block;
}
/* a bundled mark: inside the tile with an even margin (a full-bleed picture fills it) */
html.ds .svc-tile > .svc-tile-mark {
  position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; display: block;
  padding: calc(var(--svc-size) * .16); object-fit: contain;
}
html.ds .svc-tile > .svc-tile-mark.is-full { padding: 0; object-fit: cover; }

/* the sizes, place by place */
html.ds #device .media-watch-options .watch-logo-icon.svc-tile { --svc-size: 52px; }
html.ds #device .streaming-choice .svc-tile { --svc-size: 48px; }
/* the small badges (Discover's On my services chips, a three's "on" line): the same shape, scaled down */
html.ds #device .service-badge:not(.oms-more) { border-radius: 27% !important; }

/* ---- Your services: a grid of tiles, the name under each, a tick on the tile when it is yours ---- */
html.ds #device .streaming-preferences .svc-grid {
  /* three across on a phone (SE 320 and iPhone 15), four where there is room (Duo, iPad), never more: a column is at
     least 88px and at least a quarter of the row */
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(max(88px, calc((100% - 3 * var(--sp-2)) / 4)), 1fr));
  gap: var(--sp-4) var(--sp-2); margin: var(--sp-2) 0 var(--sp-5);
}
html.ds #device .streaming-preferences .svc-choice {
  appearance: none; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 44px;
  margin: 0; padding: 4px 2px 6px; border: 0; border-radius: var(--r-row); background: none; box-shadow: none; color: var(--c-label-1);
  text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.ds #device .streaming-preferences .svc-choice:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
html.ds #device .streaming-preferences .svc-choice-tile { position: relative; display: block; }
html.ds #device .streaming-preferences .svc-choice .svc-tile { --svc-size: 64px; transition: transform var(--motion-fast) var(--motion-curve), opacity var(--motion-fast) var(--motion-curve); }
html.ds #device .streaming-preferences .svc-choice:active .svc-tile { transform: scale(.94); }
/* not chosen: the tile a little quieter, so the chosen ones read at a glance (never by colour alone: the tick says it) */
html.ds #device .streaming-preferences .svc-choice[aria-pressed="false"] .svc-tile { opacity: .62; }
html.ds #device .streaming-preferences .svc-choice[aria-pressed="true"] .svc-tile { box-shadow: 0 0 0 2px var(--c-stage), 0 0 0 4px var(--c-lamp); }
html.ds #device .streaming-preferences .svc-tick {
  position: absolute; right: -6px; top: -6px; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-lamp); color: var(--c-lamp-ink); box-shadow: 0 0 0 2px var(--c-stage); opacity: 0; transform: scale(.6);
  transition: transform var(--motion-fast) var(--motion-curve), opacity var(--motion-fast) var(--motion-curve);
}
html.ds #device .streaming-preferences .svc-choice[aria-pressed="true"] .svc-tick { opacity: 1; transform: none; }
html.ds #device .streaming-preferences .svc-choice-name {
  max-width: 100%; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-1);
  overflow-wrap: anywhere; text-wrap: balance;
}
html.ds #device .streaming-preferences .svc-choice-note { margin-top: -4px; max-width: 100%; font: var(--fw-caption-1) var(--fs-caption-2, 11px)/var(--lh-caption-2, 13px) var(--font-ui); color: var(--c-label-3); text-wrap: balance; }
html.ds #device .streaming-preferences .svc-foot { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  html.ds #device .streaming-preferences :is(.svc-tile, .svc-tick) { transition: none; }
  html.ds #device .streaming-preferences .svc-choice:active .svc-tile { transform: none; }
}
/* larger text: three across still, the names wrap under their tiles; the largest: two across */
html.ds[data-text-size="largest"] #device .streaming-preferences .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ===== prototype-src/ds-sheets.css ===== */
/* TRIPTIC ds-sheets layer. Scoped under html.ds; tokens only (no colour, size or radius of its own).

   "Not right?", the report it can lead to, the note after it, and Refine were the last sheets drawn in the older
   style: four type scales, lilac links, boxes inside boxes, and three different ways to close three sheets in a row
   ("Cancel" as a line of text at the foot, a round X on the right, a Back on the left).

   They are now the app's one sheet (ds-navigation.css: the frosted material, a 28pt top, a grabber) with one inside:
     - one way out: a round Close in the top right corner, where the membership sheet and "Your services" have theirs.
       Pulling the sheet down and the edge swipe still work. No "Cancel" and no "Back to the film" at the foot.
       When one of them is drawn as a page (Reduce Motion, a reload, a three reopened from the Library: there is no
       page behind to rise from) the same control is the page's round Back, top left, like every pushed page.
     - one heading: a quiet line (the system's eyebrow), the title at Title 2 (Title 1 on the tall Refine sheet), one
       paragraph at Subhead.
     - choices are the grouped list Settings is made of: 52pt rows, hairlines, the list chevron.
     - a statement is the card Film DNA has on You; a row that opens in place has the one disclosure chevron.
     - text fields, the Lamp button and quiet buttons are the system's own.

   !important appears only where an older layer set the same property with !important (the screen's padding and
   display, the report's toolbar, the frame's top). */

/* ===== 1. the frame ===== */
html.ds #device > .screen:is(.reason-sheet, .refinement-live) {
  box-sizing: border-box; display: flex !important; flex-direction: column; align-items: stretch; text-align: left;
  padding: 60px var(--gutter) max(var(--sp-6), calc(var(--safe-bottom, 0px) + var(--sp-4))) !important;
  overflow-x: hidden !important; overflow-y: auto !important;
}
html.ds #device > .screen:is(.reason-sheet, .refinement-live) > * { flex: none; }
/* the older glow behind a screen is drawn larger than the screen: inside a sheet that was a hundred points of empty
   scroll under the last row */
html.ds #device > .screen:is(.reason-sheet, .refinement-live)::before { inset: 0; transform: none !important; animation: none !important; }
/* a sheet is as tall as what it says, up to the status bar; the tall one (Refine) keeps its full height */
html.ds #device > .screen.ds-sheet-host.ds-sheet-auto:is(.reason-sheet, .refinement-live) {
  height: auto; max-height: calc(100% - max(56px, calc(var(--safe-top, 0px) + 12px)));
}
/* drawn as a page: the whole screen, and the heading starts under the round Back, as on every pushed page. (The
   older styling drew "Not right?" and the report as a 610pt panel standing on a black screen.) */
html.ds #device > .screen:is(.reason-sheet, .refinement-live):not(.ds-sheet-host) {
  padding-top: calc(var(--page-top-24, 24px) + 44px + var(--sp-5)) !important;
  max-height: none !important;
}
html.ds #device > .screen.reason-sheet:not(.ds-sheet-host) {
  top: 0; height: 100%; border: 0; border-radius: 0; box-shadow: none; background: var(--c-stage);
}
html.ds #device > .screen.reason-sheet:not(.ds-sheet-host) > .sheet-handle,
html.ds #device > .screen.reason-sheet:not(.ds-sheet-host) .feedback-toolbar > .sheet-handle { display: none; }

/* ===== 2. one way out ===== */
html.ds #device > .screen:is(.reason-sheet, .refinement-live) .ds-sheet-close {
  position: absolute !important; z-index: 3; top: 10px; right: 12px; left: auto; bottom: auto; margin: 0 !important;
  width: var(--target); height: var(--target); display: grid; place-items: center; padding: 0;
}
html.ds #device > .screen:is(.reason-sheet, .refinement-live):not(.ds-sheet-host) .ds-sheet-close {
  top: var(--page-top-24, 24px); left: var(--gutter); right: auto;
}
html.ds #device .ds-sheet-close > :is(.ds-sheet-close-x, .ds-sheet-close-back) { display: grid; place-items: center; }
html.ds #device .ds-sheet-close > .ds-sheet-close-back,
html.ds #device > .screen:not(.ds-sheet-host) .ds-sheet-close > .ds-sheet-close-x { display: none; }
html.ds #device > .screen:not(.ds-sheet-host) .ds-sheet-close > .ds-sheet-close-back { display: grid; }
html.ds #device .ds-sheet-close svg { width: 20px; height: 20px; }
/* the report keeps its toolbar element (its Close is found there by the tests and by the sheet controller); it no
   longer takes a row of its own */
html.ds #device > .screen.reason-sheet > .feedback-toolbar { display: contents; }
html.ds #device > .screen.feedback-sheet { padding-top: 60px !important; }
html.ds #device > .screen.feedback-sheet.ds-sheet-host { max-height: calc(100% - max(56px, calc(var(--safe-top, 0px) + 12px))) !important; }

/* ===== 3. one heading ===== */
html.ds #device > .screen:is(.reason-sheet, .refinement-live) > .eyebrow {
  display: block; margin: 0 0 var(--sp-1); padding: 0;
  font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--c-label-3);
}
html.ds #device > .screen:is(.reason-sheet, .refinement-live) > h1 {
  margin: 0 0 var(--sp-2); padding: 0 44px 0 0; /* the first line never runs under the Close */
  font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2);
  color: var(--c-label-1); text-wrap: balance; overflow-wrap: anywhere;
}
html.ds #device > .screen.refinement-live:not(.correction-receipt) > h1 {
  font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1);
}
html.ds #device > .screen:is(.reason-sheet, .refinement-live):not(.ds-sheet-host) > h1 { padding-right: 0; }
html.ds #device > .screen:is(.reason-sheet, .refinement-live) > p {
  margin: 0 0 var(--sp-4);
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead);
  color: var(--c-label-2); text-wrap: pretty;
}
html.ds #device > .screen:is(.reason-sheet, .refinement-live) > p:is(.refinement-contract, .feedback-status, .refinement-limit) {
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-3);
}
html.ds #device > .screen:is(.reason-sheet, .refinement-live) > p.refinement-limit { margin: var(--sp-2) 0 0; color: var(--c-caution); }
html.ds #device > .screen:is(.reason-sheet, .refinement-live) > p:is(.refinement-limit, .feedback-status):empty { display: none; }
html.ds #device > .screen.reason-sheet > p.feedback-status { margin: var(--sp-3) 0 0; color: var(--c-label-2); text-align: center; }

/* ===== 4. choices: the grouped list ===== */
html.ds #device > .screen.reason-sheet .reason-options {
  display: block; margin: var(--sp-1) 0 0; padding: 0; overflow: hidden;
  border-radius: var(--r-row); background: var(--c-fill-1);
}
html.ds #device > .screen.reason-sheet .reason-options > button {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); box-sizing: border-box;
  width: 100%; min-height: var(--row-min); margin: 0; padding: 10px var(--sp-4);
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  font: var(--fw-body) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline);
  color: var(--c-label-1) !important; text-align: left;
}
html.ds #device > .screen.reason-sheet .reason-options > button + button::before {
  content: ""; position: absolute; top: 0; left: var(--sp-4); right: 0; height: 1px; background: var(--c-line);
}
html.ds #device > .screen.reason-sheet .reason-options > button > i {
  flex: none; width: 8px; height: 13px; margin-left: var(--sp-1); overflow: hidden; opacity: .5;
  font-size: 0; color: transparent; background: var(--c-label-1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M1.5 1.5 6.5 6.5 1.5 11.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M1.5 1.5 6.5 6.5 1.5 11.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate var(--motion-press) var(--motion-curve);
}
html.ds #device > .screen.reason-sheet .reason-options > button:is(:active, .ds-pressed, .ds-pressed-row) { background: var(--c-fill-2) !important; scale: 1 !important; }
html.ds #device > .screen.reason-sheet .reason-options > button:is(:active, .ds-pressed, .ds-pressed-row) > i { translate: 2px 0; }
html.ds #device > .screen.reason-sheet .reason-options > button:focus-visible { outline-offset: -3px !important; }
html.ds #device.manual-solid > .screen.reason-sheet .reason-options { background: var(--c-stage-raised); }

/* ===== 5. fields ===== */
html.ds #device > .screen:is(.reason-sheet, .refinement-live) > label,
html.ds #device > .screen.refinement-live .refinement-kept > label {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-2); padding: 0;
  font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); text-transform: none;
  color: var(--c-label-1);
}
html.ds #device > .screen.refinement-live > label > span {
  flex: none; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote);
  font-variant-numeric: tabular-nums; color: var(--c-label-3);
}
html.ds #device > .screen:is(.reason-sheet, .refinement-live) textarea {
  display: block; box-sizing: border-box; width: 100%; min-height: 112px; margin: 0; padding: var(--sp-3) var(--sp-4); resize: none;
  border: 1px solid var(--c-line); border-radius: var(--r-row); background: var(--c-fill-1); box-shadow: none;
  font: var(--fw-body) var(--fs-body)/var(--lh-prose) var(--font-ui); letter-spacing: var(--tr-body); color: var(--c-label-1);
}
html.ds #device > .screen:is(.reason-sheet, .refinement-live) textarea:focus-visible {
  outline: 2px solid var(--c-focus) !important; outline-offset: 0 !important; border-color: transparent; box-shadow: none !important;
}
html.ds #device > .screen:is(.reason-sheet, .refinement-live) textarea[aria-invalid="true"] { border-color: var(--c-caution); }
/* the report as it will be copied: read, not typed */
html.ds #device > .screen.reason-sheet textarea[readonly] {
  min-height: 148px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote);
  color: var(--c-label-2);
}
html.ds #device > .screen:is(.reason-sheet, .refinement-live) > .primary-button { margin: var(--sp-5) 0 0; }
html.ds #device > .screen:is(.reason-sheet, .refinement-live) > p:not(:empty) + .primary-button { margin-top: var(--sp-2); }
html.ds #device > .screen:is(.reason-sheet, .refinement-live) > .quiet-button {
  align-self: center; width: auto; min-height: var(--target); margin: var(--sp-2) 0 0; padding: 0 var(--sp-4);
  font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1);
}
html.ds #device > .screen.refinement-live > .primary-button.refinement-fresh { align-self: stretch; }

/* ===== 6. Refine: what stays, what changes, what is sent ===== */
/* what stays: the card */
html.ds #device > .screen.refinement-live > :is(.refinement-kept, div.refinement-original) {
  display: block; margin: 0 0 var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: var(--e-1);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.ds #device > .screen.refinement-live .refinement-kept > .eyebrow {
  display: block; font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--c-label-3);
}
html.ds #device > .screen.refinement-live :is(.refinement-kept, div.refinement-original) > strong {
  display: block; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1);
}
html.ds #device > .screen.refinement-live :is(.refinement-kept, div.refinement-original) > p {
  margin: var(--sp-2) 0 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font: var(--fw-body) var(--fs-body)/var(--lh-prose) var(--font-ui); letter-spacing: var(--tr-body); color: var(--c-label-1);
}
html.ds #device > .screen.refinement-live :is(.refinement-kept, div.refinement-original) > strong + p {
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); white-space: normal;
}
html.ds #device > .screen.refinement-live .refinement-kept > small {
  display: block; margin: var(--sp-2) 0 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-3);
}
html.ds #device > .screen.refinement-live .refinement-original-tools { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); margin: var(--sp-1) 0 calc(-1 * var(--sp-2)); }
html.ds #device > .screen.refinement-live :is(.refinement-original-tools > button, div.refinement-original > .quiet-button) {
  width: auto; min-height: var(--target); margin: 0; padding: 0; border: 0; background: none;
  font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); text-align: left;
}
html.ds #device > .screen.refinement-live div.refinement-original > .quiet-button { margin: var(--sp-1) 0 calc(-1 * var(--sp-2)); }
/* what changes: four ways to say it, as the app's chips */
html.ds #device > .screen.refinement-live .refine-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; }
html.ds #device > .screen.refinement-live .refine-chips > button {
  min-height: var(--target); margin: 0; padding: 0 var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-fill-2); box-shadow: var(--hl-edge);
  font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1);
}
html.ds #device > .screen.refinement-live .refine-chips > button:is(:active, .ds-pressed) { background: var(--c-fill-press); }
/* what is sent, and what you had: two rows that open in place, as one grouped list; the small print sits under it */
html.ds #device > .screen.refinement-live > details:is(.refinement-sent, .refinement-original) {
  order: 1; display: block; margin: var(--sp-6) 0 0; padding: 0 var(--sp-4); border: 0; border-radius: var(--r-row);
  background: var(--c-fill-1); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.ds #device > .screen.refinement-live > details.refinement-sent:has(~ details.refinement-original) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
html.ds #device > .screen.refinement-live > details.refinement-sent ~ details.refinement-original {
  position: relative; margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;
}
html.ds #device > .screen.refinement-live > details.refinement-sent ~ details.refinement-original::before {
  content: ""; position: absolute; top: 0; left: var(--sp-4); right: 0; height: 1px; background: var(--c-line);
}
html.ds #device > .screen.refinement-live > details:is(.refinement-sent, .refinement-original) > summary {
  min-height: var(--row-min); padding: 0; box-sizing: border-box;
  font: var(--fw-body) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1);
}
html.ds #device > .screen.refinement-live > details.refinement-sent > p {
  margin: 0; padding: 0 0 var(--sp-4); white-space: pre-wrap; overflow-wrap: anywhere;
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2);
}
html.ds #device > .screen.refinement-live > details.refinement-original > div { display: grid; gap: var(--sp-2); margin: 0; padding: 0 0 var(--sp-3); }
html.ds #device > .screen.refinement-live > details.refinement-original > div > span {
  display: flex; align-items: baseline; gap: var(--sp-3);
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1);
}
html.ds #device > .screen.refinement-live > details.refinement-original > div > span > b {
  flex: none; min-width: 1ch; font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-label-3);
}
html.ds #device > .screen.refinement-live > details.refinement-original > small {
  display: block; padding: 0 0 var(--sp-4); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-3);
}
html.ds #device > .screen.refinement-live > p.refinement-contract { order: 2; margin: var(--sp-3) var(--sp-4) 0; }
html.ds #device > .screen.refinement-live > .refinement-fresh,
html.ds #device > .screen.refinement-live > .refinement-fresh ~ .quiet-button,
html.ds #device > .screen.refinement-live > .refinement-return { order: 3; }
html.ds #device > .screen.refinement-live > .quiet-button.refinement-fresh { margin-top: var(--sp-4); }
html.ds #device > .screen.refinement-live > .primary-button.refinement-fresh { margin-top: var(--sp-5); }
/* the note after "Not right?" is short: its small print follows its button directly */
html.ds #device > .screen.correction-receipt > p.refinement-contract { order: 0; margin: var(--sp-3) 0 0; text-align: center; }
/* "Check the request details": the same row, and its answer in the list's own surface */
html.ds #device > .screen.refinement-live > .request-reading { margin: 0 0 var(--sp-2); }
html.ds #device > .screen.refinement-live > .request-reading > summary {
  min-height: var(--row-min); padding: 0 var(--sp-4); border-radius: var(--r-row); background: var(--c-fill-1);
  font: var(--fw-body) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1);
}
html.ds #device > .screen.refinement-live > .request-reading[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
html.ds #device > .screen.refinement-live > .request-reading > .request-reading-body {
  margin: 0; padding: var(--sp-1) var(--sp-4) var(--sp-4); border: 0; border-top: 1px solid var(--c-line); border-radius: 0 0 var(--r-row) var(--r-row); background: var(--c-fill-1);
}
html.ds #device.manual-solid > .screen.refinement-live :is(.refinement-kept, .refinement-original, .refinement-sent, .request-reading > summary, .request-reading-body) { background: var(--c-stage-raised); }

@media (forced-colors: active) {
  html.ds #device > .screen:is(.reason-sheet, .refinement-live) :is(textarea, .refine-chips > button, .reason-options) { border: 1px solid ButtonText; }
}
@media (prefers-reduced-motion: reduce) {
  html.ds #device > .screen.reason-sheet .reason-options > button > i { transition: none; }
}
html.ds #device.manual-reduced-motion > .screen.reason-sheet .reason-options > button > i,
html.ds[data-motion-tier="reduced"] #device > .screen.reason-sheet .reason-options > button > i { transition: none; }

/* ===== the microphone's first-use note (Phase E review, 13 October 2026) =====
   "Say it in your own words." is a modal dialog (voice-experience.js: aria-modal, the page behind made inert). It
   carries .content-material, and the design system's rule for that class (design-system.css: a 5% white fill, its own
   shadow, both !important) took away the panel's solid ground and the dimming round it: the note's words sat on the
   request box, the suggestion posters and the tab bar, with nothing to say the page behind was out of reach. It stands
   on the chrome's solid material (it lies over the tab bar, whose labels must not read through it), with a hairline,
   the deep shadow and the same dimming as the TRIPTIC+ sheet over everything else. */
html.ds #device > .voice-education.content-material {
  background: var(--mat-chrome-solid) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--c-line-strong);
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / .56), var(--e-4) !important;
}
/* its Continue button is the whole width of the note; at the larger text sizes on a 375pt phone "Continue to
   microphone" takes two lines, which the system's fixed 50pt button cannot hold: here the button grows with its words */
html.ds #device > .voice-education.content-material .primary-button { height: auto !important; min-height: 50px !important; padding-block: 10px !important; }

/* ===== prototype-src/ds-text-size.css ===== */
/* TRIPTIC ds-text-size layer. Scoped under html.ds; tokens only.

   What is REFITTED when the type is larger. The type itself grows without any help from here: every size in the
   design system is a multiple of one number (design-system.css, --type-unit) and text-size.js sets it. This file holds
   only the places where growing was not enough: a line that had to be allowed a second line, a row that had to stack,
   an object with words printed on it that must not grow at all.

   Three tools, in order of preference:
     1. let it wrap     a label that was held to one line takes two. Written without a condition wherever a second
                        line costs nothing at the standard size.
     2. rearrange       under html.ds[data-text-size="larger"] (x1.1 and up) or [data-text-size="largest"] (x1.3 and up),
                        which text-size.js writes on <html>.
     3. hold it back    --type-cap on a part that is fitted, not scrolled. The parts and the mechanism are in
                        design-system.css ("where the type stops growing early"); the numbers are here.

   Checked at x1.2 and x1.35 on 375x667 and 390x844 (hub/docs/READINESS-REVIEW-2026-10-06.md, third pass). */

/* ===== held back: fitted to the screen ===== */
/* the Daily Cryptic's room: the score, its bonus chip and the round button beside it share one line of a 375pt phone,
   and the answer field, the two buttons and the keyboard share its height. x1.1 is what that line has room for. */
html.ds :is(.cg-room, .cg-scope) { --type-cap: 1.1; }

/* ===== held back: objects with words printed on them ===== */
/* a film canister on the Library's reel shelf: a 100pt label on a drawn object */
html.ds .dslc-can { --type-cap: 1; }
/* a Collection's card on a shelf and a "Try asking for" card: fixed-height pictures with a title over them */
html.ds .dslc-card { --type-cap: 1.15; }
html.ds .prompt-card { --type-cap: 1.15; }
/* a poster on the two-film page, with its title and its match printed over it */
html.ds .two-film-card { --type-cap: 1.15; }
/* the ticket on the share page is a picture of what will be sent: it is drawn as the image is, at one size */
html.ds .ds-ticket { --type-cap: 1; }
/* a film card is a printed object, scaled as a whole to the room it has: its lettering is one size (film-cards.css) */
html.ds .fc-card { --type-cap: 1; }
/* the reveal and the 3D view are fitted to the screen: the card, two lines and a button share its height */
html.ds .fc-fitted { --type-cap: 1.15; }
/* the shelf: five cards across a phone, each with its number and its film's name under it in a column the width of a thumb.
   The name is said in full by the slot itself and shown at full size when it is opened. */
html.ds .fc-slots { --type-cap: 1.1; }
/* THE TEN's name on Today is one marquee word on one line beside its LIVE tag (20 October 2026, the cinema look): it
   grows to 34pt (x1.13 of its 30 units) and stops, so the word never pushes the tag or the chevron off the card. */
html.ds .ds-ten-card-title { --type-cap: 1.13; }

/* (13 November 2026, big text) Your three's caption (the film's name, its line, why it fits) is part of the fitted reveal and
   stopped at x1.15, so at the largest size it stayed small with room to spare under it on a tall phone. On a tall phone
   (800pt and up: every iPhone but the SE and the Duo's cover) it grows to x1.35 there; on a short one the reveal has no
   room and it stays as it was. */
html.ds[data-text-size="largest"][data-device-h="tall"] .trip-critical-layer .sp-caption { --type-cap: 1.35; }

/* ===== Discover ===== */
/* "On my services": the line under the title ran under the switch, or ended in an ellipsis. It takes a second line. */
html.ds #device .oms-row .oms-copy > small { white-space: normal; overflow: visible; text-overflow: clip; }
html.ds #device .oms-row { min-height: 56px; height: auto; }
html.ds #device .oms-row .oms-choose { height: auto; min-height: var(--target); }
/* the two labels in the request box were pinned at 12pt by an older layer's !important */
html.ds #device .premium-composer :is(.request-label, .request-count) { font-size: var(--fs-caption-1) !important; line-height: var(--lh-caption-1) !important; }
/* Recent searches | Saved searches: side by side until the words meet, then one above the other. They meet from x1.1
   (Phase E review, 13 October 2026: at x1.2 on a 390pt phone each label ran 10-13pt past its half, into the divider),
   so the stacked pair starts at "larger" rather than at "largest". */
html.ds[data-text-size]:not([data-text-size="standard"]) #device .discover-shortcuts { grid-template-columns: minmax(0, 1fr) !important; height: auto !important; row-gap: 0; justify-items: center; }
html.ds[data-text-size]:not([data-text-size="standard"]) #device .discover-shortcuts > button { justify-content: center; width: auto; min-height: var(--target); border: 0; }
html.ds[data-text-size]:not([data-text-size="standard"]) #device .discover-shortcuts > button::before,
html.ds[data-text-size]:not([data-text-size="standard"]) #device .discover-shortcuts > button::after { content: none; }

/* ===== Today ===== */
/* Coming Soon on a short phone sets its title and "In UK cinemas" on one line to save height; at a larger size the
   second ran out of room after two words. It goes back under the title. */
html.ds[data-text-size]:not([data-text-size="standard"])[data-device-h="compact"] .ds-cs-head { flex-wrap: wrap; row-gap: 2px; }
html.ds[data-text-size]:not([data-text-size="standard"])[data-device-h="compact"] .ds-cs-head p { flex: 1 0 100%; white-space: normal; overflow: visible; text-overflow: clip; }

/* (13 November 2026, big text) This week's card: its name and "Season 2 · Week 1 of 5" share the card's first line. At
   x1.35 the name was squeezed into a stack of three ("This / week's / card"). The name now keeps one line, and the
   season goes under it when the two do not fit side by side. */
html.ds[data-text-size]:not([data-text-size="standard"]) #device .dt-wk-top { flex-wrap: wrap; row-gap: 2px; }
html.ds[data-text-size]:not([data-text-size="standard"]) #device .dt-wk-name { white-space: nowrap; }
html.ds[data-text-ax] #device .dt-wk-mark { white-space: normal; }

/* (13 November 2026, big text) "Two that fit": "Tweak my request" waits at the foot of the screen over a fade. At the
   larger sizes on a short screen (the Duo's cover, an SE) it sat over both films' titles. There it follows the films,
   at the foot of the page, and the page scrolls to it; where everything fits it is in the same place as before. */
html.ds[data-text-size]:not([data-text-size="standard"]) #device .two-film-foot { position: static; margin-top: var(--sp-5); background: none; }

/* ===== Film page ===== */
/* Five small lines on the film page were pinned in fixed points by an older layer's !important and stayed as they
   were while everything round them grew: the two captions beside section titles, a cast member's role, the status
   line under Where to watch and, most of all, the synopsis itself. Each keeps the size it has at the standard
   setting (a caption 11 or 12, the synopsis 15 on 25.5) and now follows the text size from there. */
html.ds #device .film-v5 .cast-section > header > small { font-size: calc(11 * var(--type-unit)) !important; line-height: calc(18 * var(--type-unit)) !important; }
html.ds #device .film-v5 .watch-options > header small { font-size: calc(12 * var(--type-unit)) !important; line-height: calc(18 * var(--type-unit)) !important; }
html.ds #device .film-v5 .cast-track small { font-size: calc(12 * var(--type-unit)) !important; line-height: calc(16.8 * var(--type-unit)) !important; }
html.ds #device .film-v5 .watch-options > header + .provider-trust-note { font-size: calc(12 * var(--type-unit)) !important; line-height: calc(19.2 * var(--type-unit)) !important; }
html.ds #device .film-v5 .spoiler-safe > p { font-size: calc(15 * var(--type-unit)) !important; line-height: calc(25.5 * var(--type-unit)) !important; }
/* the cast shelf: a name that wraps at a larger size needs the column a little wider */
html.ds[data-text-size="largest"] #device .film-v5 .cast-track > article { width: 96px; }

/* ===== The Ten ===== */
/* the picture at the top is fitted: its title, its line and its two buttons share one row of a 375pt phone, and at
   x1.35 the buttons read "Open ..." and "Watch with s...". Held at x1.1, where both still say what they do. The
   list under it grows in full. */
html.ds .ds-tt-hero { --type-cap: 1.1; }

/* ===== Friday 3 ===== */
/* the page's heading and two smaller lines were pinned by an older layer's id rule: the heading stayed at 26pt while
   its line height grew, so its two lines drifted apart */
html.ds #device .ds-fri .onboarding-copy h2 { font-size: calc(26 * var(--type-unit)); line-height: calc(34 * var(--type-unit)); }
html.ds #device .friday-service-screen .friday-delivery > summary { font-size: calc(14 * var(--type-unit)); }

/* ===== Collections ===== */
/* (13 November 2026, big text) The picks stack at the larger sizes (ds-library-collections.js, .is-stacked): the poster
   stood first and the collection's name and its line under it, so the first screen showed a card of artwork with its
   words below the screen's edge. The words come first and the poster follows them. */
html.ds[data-text-size]:not([data-text-size="standard"]) #device .collections-picks.is-stacked .dslc-pick-copy { grid-row: 1; }
html.ds[data-text-size]:not([data-text-size="standard"]) #device .collections-picks.is-stacked .dslc-pick-art { grid-row: 2; }

/* ===== A Collection's page ===== */
/* three small lines pinned in fixed points by an older layer's id rule: the count under the description, the
   heading over the films and the row that opens "Why these films" */
html.ds #device .collections-api-detail .collection-detail-copy > small { font-size: calc(13 * var(--type-unit)); }
html.ds #device .collections-api-detail .collection-films-heading { font-size: calc(14 * var(--type-unit)); }
html.ds #device .collections-api-detail .collection-membership-notes > summary { font-size: calc(14 * var(--type-unit)); }

/* ===== rearranged: The Ten's rows at the larger sizes (P-SYSTEM, 13 October 2026) =====
   A row is a fixed height (the reel counts ranks by it), so its title cannot take a second line. At x1.1 and up the
   "Open" word at the row's end took the room the film's name needed ("Spirited A…"); the whole row is the button and
   says "Open film" to VoiceOver, so the chevron alone stays and the name gets the width. */
html.ds[data-text-size]:not([data-text-size="standard"]) .ds-tt-row-open { gap: 0; font-size: 0; }
/* The Ten's hero at x1.1 and up: "Open film" and "Watch with sound" both ended in an ellipsis. The sound button becomes
   its round speaker (its words stay for VoiceOver, clipped from sight; the hero picture is its labelled twin), and
   "Open film" takes the row. */
html.ds[data-text-size]:not([data-text-size="standard"]) .ds-tt-sound { flex: none; width: var(--target); padding: 0; }
html.ds[data-text-size]:not([data-text-size="standard"]) .ds-tt-sound > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* (13 November 2026, big text; the coverage audit's "2014 · A" and "lad Max") at x1.1 and up a row of 80pt held its
   title and its line of year and genres to one line each, cut mid-word. A row now grows with the type: room for two
   lines of title and two of year and genres, each broken between words. The reel still counts ranks by one height for
   every row (ds-the-ten.js reads it from the first row), so the room is the same for a short title as a long one. */
html.ds[data-text-size]:not([data-text-size="standard"]) #device .ds-tt-screen { --tt-pitch: calc(80 * var(--type-unit) + 10px); }
html.ds[data-text-size]:not([data-text-size="standard"]) #device :is(.ds-tt-row-btn, .ds-tt-lamp) { height: calc(var(--tt-pitch) - 8px); }
html.ds[data-text-size]:not([data-text-size="standard"]) #device .ds-tt-row-copy :is(strong, small) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: normal; text-overflow: clip; }
/* the picture's own line (its rating, year and genres, under the film's name) was held to one line and cut at the end ("2014 ·
   Adventure · Dram"): at the larger sizes it takes a second line when it needs one. */
html.ds[data-text-size]:not([data-text-size="standard"]) #device .ds-tt-copy > p:last-child { white-space: normal; text-overflow: clip; overflow: visible; }

/* (17 October 2026: the Daily Cryptic's card left Today for the Commute Corner's ticket, and its foot with it: the rearranging of
   its key and countdown at the larger sizes (.dt-hero-foot, .dt-next; Phase E review, 13 October 2026) went with it.) */

/* ===== rearranged: TRIPTIC+'s comparison table at the larger sizes (Phase E review, 13 October 2026) =====
   Three columns of a 375pt phone give the feature's name 80pt beside its icon: at x1.1 and up "Collections" ran into the
   Free column's words. Each feature's name takes its own line across the table, with Free and TRIPTIC+ side by side
   under it (the header keeps those two). The empty first header cell leaves the grid but stays for VoiceOver ("Feature"). */
html.ds[data-text-size]:not([data-text-size="standard"]) #device :is(.tm-compare-head, .tm-compare-row) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 6px; }
html.ds[data-text-size]:not([data-text-size="standard"]) #device .tm-compare-head > :first-child { position: absolute; }
html.ds[data-text-size]:not([data-text-size="standard"]) #device .tm-compare-row > [role="rowheader"] { grid-column: 1; grid-row: 1; }
html.ds[data-text-size]:not([data-text-size="standard"]) #device .tm-compare-row > .tm-free { grid-column: 1; grid-row: 2; }
html.ds[data-text-size]:not([data-text-size="standard"]) #device .tm-compare-row > .tm-plus { grid-column: 2; grid-row: 2; }
html.ds[data-text-size]:not([data-text-size="standard"]) #device .tm-compare-grid { --tm-plus-x: calc((100% - 8px) / 2 + 8px); }
html.ds[data-text-size]:not([data-text-size="standard"]) #device .tm-compare-row > :is(.tm-free, .tm-plus) { padding-top: 0; }

/* (13 November 2026, big text) TRIPTIC+: on a phone shorter than 800pt at the largest size (an SE, the Duo's cover) the
   button that waits at the foot of the screen sat over the Weekly plan, its words and its price. There it stays in its
   place under the three plans, and the page scrolls to it; at the Accessibility sizes on every phone. */
html.ds[data-text-size="largest"]:not([data-device-h="tall"]) #device .tm-membership.is-buying .primary-button.tm-cta,
html.ds[data-text-ax] #device .tm-membership.is-buying .primary-button.tm-cta { position: static; box-shadow: none; }

/* (13 November 2026, big text) the Daily Cryptic's films as you type: a long name ("Star Wars: Episode I - The Phantom
   Menace") was cut at the row's end mid-word. At x1.1 and up it takes a second line; the row grows, the list scrolls. */
html.ds[data-text-size]:not([data-text-size="standard"]) .cg-room .cg-suggest-item > span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; }
html.ds[data-text-size]:not([data-text-size="standard"]) .cg-room .cg-suggest-item { padding-block: 6px; }
/* ...and the list no longer rises over the whole clue (cryptic-premium.js roomUnderClue): while it is open Flick's row and
   the five clue numbers step aside, the clue's ticket takes their room with its words at the top, and the list stops
   under them. Closing the list (a film picked, the field left) brings everything back. */
html.ds[data-text-size]:not([data-text-size="standard"]) .cg-play:has(.cg-suggest:not([hidden])) :is(.cg-host, .cg-tokens) { display: none; }
html.ds[data-text-size]:not([data-text-size="standard"]) .cg-play:has(.cg-suggest:not([hidden])) .cg-clue-card.is-current .cg-clue-text { align-self: start; }
html.ds[data-text-size]:not([data-text-size="standard"]) .cg-play:has(.cg-suggest:not([hidden])) .cg-clue-card.is-current .cg-clue-stub { align-content: start; padding-top: 14px; }
html.ds[data-text-size]:not([data-text-size="standard"]) .cg-play:has(.cg-suggest:not([hidden])) .cg-clue-card.is-current .cg-ticket > :is(:first-child, .cg-ticket-mark + *, .cg-postmark + *, .cg-gift-bow + *) { margin-top: 0; }

/* ===== rearranged: a reminder's four times in Settings > Notifications at the larger sizes (Phase E review) =====
   Four times share one row of a 375pt phone; at x1.1 and up "12:30pm" was cut to "12:30p" inside its chip. Two rows
   of two. */
html.ds[data-text-size]:not([data-text-size="standard"]) #device .tn-settings .tn-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ===== rearranged: the services sheet at the larger sizes (14 October 2026) =====
   The first run no longer asks where someone watches; the same fifteen tiles are chosen from "On my services" and the film
   page's sheet. Three across a 375pt phone leave a name 101pt: from x1.1 it read "BBC iPl…". Two across, each name whole.
   (The mark on the tile is held at one size: on-my-services.css.) */
html.ds[data-text-size]:not([data-text-size="standard"]) #device .film-platforms-sheet .streaming-onboarding-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }


/* ===== the Accessibility tier (preview "ax-text", 13 November 2026) =====
   text-size.js writes data-text-ax ("1".."5") and --text-scale-title only above XXXL and only with the flag on. Body
   text, captions and controls grow with --text-scale (x1.6-x2.4); the four title steps follow Apple's table, where a
   Large Title grows far less than Body: they read --text-scale-title (x1.4-x1.6), and the two middle titles sit
   halfway between. The fitted parts keep their own capped copy of the ramp (design-system.css). */
html.ds[data-text-ax] {
  --type-unit-title: calc(1px * var(--text-scale-title, 1));
  --type-unit-mid: calc(.5px * (var(--text-scale, 1) + var(--text-scale-title, 1)));
  --fs-large-title: calc(34 * var(--type-unit-title)); --lh-large-title: calc(41 * var(--type-unit-title));
  --fs-title-1: calc(28 * var(--type-unit-title)); --lh-title-1: calc(34 * var(--type-unit-title));
  --fs-title-2: calc(22 * var(--type-unit-mid)); --lh-title-2: calc(28 * var(--type-unit-mid));
  --fs-title-3: calc(20 * var(--type-unit-mid)); --lh-title-3: calc(25 * var(--type-unit-mid));
}

/* the first screen: the welcome is fitted to the phone over its wall of posters, "Get started" at its foot. Above x1.35
   its line ran under the button: it grows to x1.35 and stops (at x1.35 and below this changes nothing). */
html.ds .welcome-screen { --type-cap: 1.35; }

/* Discover's "Describe it." is set by an older layer in 34 type units, not from the ramp: in the tier it follows the
   Large Title step (x1.5 at AX3), so it stays one line on a 375pt phone. */
html.ds[data-text-ax] #device .ds-fr-discover .discover-heading h1 { font-size: var(--fs-large-title) !important; line-height: var(--lh-large-title) !important; }

/* rows whose label and value sat side by side: the value goes under the label (iOS's own list cells do this at the
   Accessibility sizes). The film page's section heads ("Synopsis" / "Balanced spoilers", "Cast"), the why panel's head
   ("Why this matched" / its match), a TRIPTIC+ plan (its name and words, then its price). */
html.ds[data-text-ax] #device .film-v5 :is(.cast-section > header, .spoiler-safe > .ds-section-head, .why-panel > div:first-child) { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; }
html.ds[data-text-ax] #device .tm-plan { grid-template-columns: 24px minmax(0, 1fr); row-gap: 6px; }
html.ds[data-text-ax] #device .tm-plan > .tm-plan-price { grid-column: 2; justify-self: start; text-align: left; }

/* The Ten's rows: the thumbnail poster leaves (the same film is the picture above, at full size) and the name and its
   line take its width, so a one-word title such as "Interstellar" is never cut. */
html.ds[data-text-ax] #device .ds-tt-row-btn { grid-template-columns: 40px minmax(0, 1fr) auto; }
html.ds[data-text-ax] #device .ds-tt-row-poster { display: none; }

/* ===== the tier, tidied (13 November 2026, preview "ax-text"; every rule here is under data-text-ax, so with the flag off or at
   x1.35 and below nothing changes). From the AX3 and AX5 frames on a 390 and an SE: */
/* Collections: the Cinematic Universe's door. Its two lines of words sat over the cinema picture, and at these sizes the eyebrow
   ("A collection of film stills", two lines) ran into the title. The words leave the picture and stand under it, in the page. */
html.ds[data-text-ax] #device .cu-door-words { position: relative; left: auto; right: auto; bottom: auto; gap: 6px; padding: 12px var(--cc-inset, 20px) 0; }
html.ds[data-text-ax] #device .cu-door-words::before { content: none; }
/* the film page's line "2019 · 2h 13m · Comedy · 15": its tail after the running time wraps like the words it is (text-size.js keeps
   each dot with the item before it, so no line starts with "·") */
html.ds[data-text-ax] #device .film-title > p .dsd-rt-tail { display: inline; }
/* The Ten's rows: the score, the year and the genre take a third line rather than ending "2014 ·…" */
html.ds[data-text-ax][data-text-size]:not([data-text-size="standard"]) #device .ds-tt-row-copy small { -webkit-line-clamp: 3; line-clamp: 3; }
/* Today: this week's card's line ("Five films best not watched on an empty stomach.") is said whole */
html.ds[data-text-ax] #device .dt-wk-sub { -webkit-line-clamp: 8; line-clamp: 8; }
/* TRIPTIC+: the "Best value" flag grows with its words (it was 20pt tall, its words cut at top and foot) */
html.ds[data-text-ax] #device .tm-flag { height: auto; min-height: 20px; padding-block: 2px; }
/* a game's header (the four games and the Daily Cryptic's frame) is a bar like iOS's own: its title, number and clock stop at
   x1.35, as "Find a film" does; at AX sizes "No. 317" ran under "?" and the clock */
html.ds[data-text-ax] .gs-head { --type-unit: calc(1px * min(var(--text-scale, 1), 1.35)); }
/* Discover while typing (the keyboard up): at AX5 on a 390 "Describe it." slid half under the TRIPTIC wordmark. In the tier the
   heading steps aside with the keyboard up, as it already does on the tightest keyboard band (device-fit.css) */
html.ds[data-text-ax][data-fit][data-keyboard="open"] #device.keyboard-open>.premium-discover>.discover-heading{display:none!important}
html.ds[data-text-ax][data-fit][data-keyboard="open"] #device.keyboard-open>.premium-discover>.premium-composer{margin-top:4px!important}
/* the film page's title block sits at the foot of the poster (72% of the screen). At AX5 on an SE the block (eyebrow, title, its
   line, the score) is taller than the poster and its eyebrow rose under the back button ("…CEPTIONAL MATCH"): in the tier the
   poster grows to hold the block, which then starts under the top bar */
html.ds[data-text-ax] #device .film-v5.recon-film .film-hero { height: auto !important; display: flex; flex-direction: column; justify-content: flex-end; }
html.ds[data-text-ax] #device .film-v5.recon-film .film-hero > .film-title { position: relative; top: auto; }

/* ===== prototype-src/ds-tab-scroll.css ===== */
/* TRIPTIC ds-tab-scroll: what every page does as it scrolls (the five tabs 8 October 2026; every pushed page 9 October
   2026). Scoped under html.ds (kill switch ?ds=0). Runtime: prototype-src/ds-tab-scroll.js. Records:
   hub/docs/SCROLL-EFFECTS-2026-10-08.md and hub/docs/SURFACES-2026-10-09.md (pushed pages, the room's depth, a film's
   tilt; the room's light itself is drawn in ds-surfaces.css, after ds-look.css whose room it lifts off the page).

   The owner, of a video of the Apple TV app: "when we scroll down we can have some kind of effect like you see in
   Apple apps ... that kind of thing really makes it feel premium." On Discover, Today, Collections, Library and You:

   - the title hands over: the page's large title scrolls away and its name settles, small and centred, into a slim
     capsule of the tab bar's own glass at the top. At the top of the page the capsule is not there; it fades and
     sharpens in as the large title passes under it, in step with the finger (ds-tab-scroll.js writes its opacity).
   - soft scroll edges: what passes under the status bar and the top capsule, and under the tab bar, melts into a
     gentle blur and dim (a masked backdrop blur under a dimming wash). No line and no solid band.
   - a pull past the top: the large title grows a little from its leading edge, as iOS's large titles do, and settles
     back when let go.
   - Today only (its Daily Cryptic is the page's one bright picture, and the marquee light is that picture's colour
     washed over the top of the page): the light stretches from its top edge on a pull, moves up at half the page's
     speed and fades as the page scrolls, so the cards slide over it. The other four have no picture at the top, so
     nothing of theirs stretches and no hero is invented for them.

   The capsule and the edges are laid over the page (children of #device beside the tab bar), never in it: no page
   moves by a pixel when they appear. The material is the tab bar's (--dock-*), so the three situations that make the
   tab bar opaque make these opaque too (Reduce Transparency, the app's own switch, a browser with no backdrop
   filter, the reduced motion tier), and the edges then dim without blurring.

   Motion here is opacity / translate / scale / transform / filter on layers of their own, written once a frame by
   ds-tab-scroll.js only while the page moves. Reduce Motion: no parallax, no stretch, and the capsule simply fades
   in at a threshold (.is-on, a short opacity transition). */

/* ===== the slim top capsule ===== */
html.ds #device > .ds-tsx-bar {
  position: absolute; z-index: 13; left: 0; right: 0; top: max(8px, calc(var(--safe-top, 0px) + 4px));
  width: fit-content; max-width: calc(100% - 2 * var(--dock-inset, 12px)); margin: 0 auto; box-sizing: border-box;
  min-height: 38px; padding: 7px 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
/* The capsule itself is only a frame and is never faded: an ancestor with opacity (or will-change: opacity) becomes
   the glass's backdrop root, and the glass would then blur nothing (seen in the test browser: text under the top
   edge stayed sharp). The glass and the name are faded each on its own, as the tab bar's glass is. */
html.ds #device > .ds-tsx-bar.is-live { pointer-events: auto; cursor: pointer; }
/* the glass: the tab bar's material, layer for layer (the floor's shade, the rim light, the tint) and its shadow */
html.ds #device > .ds-tsx-bar > .ds-tsx-glass {
  position: absolute; inset: 0; z-index: 0; border-radius: var(--r-pill); overflow: hidden; pointer-events: none;
  background: var(--dock-specular), var(--dock-under);
  -webkit-backdrop-filter: var(--dock-backdrop); backdrop-filter: var(--dock-backdrop);
  box-shadow: var(--dock-shadow);
  opacity: 0; will-change: opacity;
}
html.ds #device > .ds-tsx-bar > .ds-tsx-glass::after {
  content: ""; position: absolute; inset: var(--dock-rim); border-radius: var(--r-pill);
  background: var(--dock-fill);
  box-shadow: inset 0 1px 0 var(--c-line);
}
html.ds #device > .ds-tsx-bar > .ds-tsx-name {
  position: relative; z-index: 1; display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline);
  color: var(--c-label-1);
  opacity: 0; will-change: opacity, translate, filter;
}
/* Reduce Motion: a fade at a threshold, nothing that travels or blurs */
html.ds #device > .ds-tsx-bar.is-calm > :is(.ds-tsx-glass, .ds-tsx-name) { transition: opacity var(--motion-fast) linear; translate: none !important; filter: none !important; }
html.ds #device > .ds-tsx-bar.is-calm.is-on > :is(.ds-tsx-glass, .ds-tsx-name) { opacity: 1; }

/* ===== soft scroll edges ===== */
/* the top: the status bar and the capsule's band. It holds dark through the status bar (the clock stays readable,
   as .ds-edge-top did: it is set aside on these five pages) and blurs and dims less and less below it. */
html.ds #device > .ds-tsx-top {
  position: absolute; z-index: 12; left: 0; right: 0; top: 0; pointer-events: none;
  height: calc(var(--safe-top, 0px) + 74px);
}
/* (faded child by child, for the reason given at the capsule) */
html.ds #device > .ds-tsx-top > i { opacity: 0; will-change: opacity; }
html.ds #device > .ds-tsx-bottom {
  position: absolute; z-index: 28; left: 0; right: 0; bottom: 0; pointer-events: none;
  height: calc(var(--dock-h, 62px) + var(--dock-bottom, 14px) + 44px);
}
html.ds #device > :is(.ds-tsx-top, .ds-tsx-bottom) > i {
  position: absolute; inset: 0; display: block;
}
/* the blur, strongest at the screen's edge and gone where the band ends */
/* (pages polish, 28 October 2026) no saturation boost at the top: it made a bright poster's blurred light glow under the header */
/* (Release 2, 29 October 2026) 4px, not 10px: with the hotfix's soft shade (no opaque band any more) a 10px blur spread a
   bright picture or a switch's white knob some 20pt beyond its own edge, the Collection's yellow-poster glow round Back and the
   Settings "blob" by the capsule. 4px keeps what passes under the status bar soft for the clock and keeps each shape its own
   size. The shade below is unchanged. Stills: hub/docs/RELEASE-2-2026-10-29.md. */
html.ds #device > .ds-tsx-top > .ds-tsx-blur {
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to bottom, black 0, black calc(var(--safe-top, 0px) + 22px), transparent 100%);
  mask-image: linear-gradient(to bottom, black 0, black calc(var(--safe-top, 0px) + 22px), transparent 100%);
}
html.ds #device > .ds-tsx-bottom > .ds-tsx-blur {
  -webkit-backdrop-filter: blur(8px) saturate(130%); backdrop-filter: blur(8px) saturate(130%);
  -webkit-mask-image: linear-gradient(to top, black 0, black 46%, transparent 100%);
  mask-image: linear-gradient(to top, black 0, black 46%, transparent 100%);
}
/* the dim: the app's stage colour, eased out (no step where it ends).
   (hotfix, 28 October 2026; the owner's rec-1850 and The Shining at 18:53, "a black line at the top of the page, the first
   6th of the page"; hub/docs/HOTFIX-PUSH-SCROLL-2026-10-28.md) ONE soft shade on every page, tab, pushed page and film alike:
   just enough behind the status bar for the clock, gone by the circles' middle, never a slab and never an edge. The capsule
   and the circles carry their own glass (the dock's material) for what passes under them; the band does not hold firm to
   their lower edge any more (release polish 68edcff4 and walkthrough 7c62a7d1 held it at 84-94% to there: an opaque strip
   ending in a step). A pinned test (tests/top-band-browser.test.mjs) reads the pixels. */
html.ds #device > .ds-tsx-top > .ds-tsx-dim,
html.ds #device:is([data-tsx-kind="page"], [data-tsx-kind="film"]) > .ds-tsx-top > .ds-tsx-dim {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--c-stage) 52%, transparent) 0,
    color-mix(in srgb, var(--c-stage) 38%, transparent) var(--safe-top, 0px),
    color-mix(in srgb, var(--c-stage) 20%, transparent) calc(var(--safe-top, 0px) + 22px),
    color-mix(in srgb, var(--c-stage) 7%, transparent) calc(var(--safe-top, 0px) + 44px),
    transparent calc(var(--safe-top, 0px) + 66px));
}
/* a pushed page's capsule sits level with its Back (lower than a tab's): its band is taller, so its blur eases out further
   down; the blur is strongest under the status bar and has no edge (masked out to nothing) */
html.ds #device:is([data-tsx-kind="page"], [data-tsx-kind="film"]) > .ds-tsx-top { height: calc(var(--safe-top, 0px) + 104px); }
/* (iPhone QA 2, 5 November 2026; the owner) a pushed page's capsule stands level with its Back, lower than a tab's, where the one soft
   shade had nearly gone: the page's rows read sharp beside it ("Projecto[Settings]"). On every pushed page the shade now holds soft
   behind the capsule and the Back circle and eases out below them, and the blur reaches the capsule's middle: still never a slab
   (never past half below the status bar, no step from row to row: tests/top-band-browser.test.mjs). Film pages keep their own. */
html.ds #device[data-tsx-kind="page"] > .ds-tsx-top > .ds-tsx-dim {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--c-stage) 52%, transparent) 0,
    color-mix(in srgb, var(--c-stage) 42%, transparent) var(--safe-top, 0px),
    color-mix(in srgb, var(--c-stage) 40%, transparent) calc(var(--safe-top, 0px) + 34px),
    color-mix(in srgb, var(--c-stage) 22%, transparent) calc(var(--safe-top, 0px) + 62px),
    color-mix(in srgb, var(--c-stage) 7%, transparent) calc(var(--safe-top, 0px) + 84px),
    transparent calc(var(--safe-top, 0px) + 104px));
}
html.ds #device[data-tsx-kind="page"] > .ds-tsx-top > .ds-tsx-blur {
  -webkit-mask-image: linear-gradient(to bottom, black 0, black calc(var(--safe-top, 0px) + 34px), transparent calc(var(--safe-top, 0px) + 96px));
  mask-image: linear-gradient(to bottom, black 0, black calc(var(--safe-top, 0px) + 34px), transparent calc(var(--safe-top, 0px) + 96px));
}
/* (owner, 22 October 2026: the film page "turning black") a film's band lies over its poster and then over its words: the
   shade is the hero's own under the status bar (.40 to nothing, hero-colour.css .film-gradient), never a dark slab. It comes
   in only once the words arrive (ds-tab-scroll.js edgeStart). Reduce Transparency keeps its firmer dim (below). */
html.ds #device[data-tsx-kind="film"] > .ds-tsx-top > .ds-tsx-dim {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--c-stage) 40%, transparent) 0,
    color-mix(in srgb, var(--c-stage) 30%, transparent) var(--safe-top, 0px),
    color-mix(in srgb, var(--c-stage) 14%, transparent) calc(var(--safe-top, 0px) + 28px),
    transparent calc(var(--safe-top, 0px) + 60px));
}
/* on these pages the top band replaces the older scrim */
html.ds #device[data-tsx] > .ds-edge-top { display: none; }

/* Reduce Transparency (the phone's setting or the app's own switch), the reduced motion tier and a browser with no
   backdrop filter: no blur anywhere. The capsule is the tab bar's solid graphite (its --dock-* tokens already say so);
   the top edge dims a little more firmly in place of the blur. */
html.ds #device.manual-solid > :is(.ds-tsx-top, .ds-tsx-bottom) > .ds-tsx-blur,
html.ds.reduce-transparency #device > :is(.ds-tsx-top, .ds-tsx-bottom) > .ds-tsx-blur,
html.ds[data-motion-tier="reduced"] #device > :is(.ds-tsx-top, .ds-tsx-bottom) > .ds-tsx-blur { display: none; }
html.ds #device.manual-solid > .ds-tsx-top > .ds-tsx-dim,
html.ds.reduce-transparency #device > .ds-tsx-top > .ds-tsx-dim {
  background: linear-gradient(to bottom, var(--c-stage) 0, var(--c-stage) var(--safe-top, 0px), color-mix(in srgb, var(--c-stage) 70%, transparent) calc(var(--safe-top, 0px) + 30px), transparent 100%);
}
@media (prefers-reduced-transparency: reduce) {
  html.ds #device > :is(.ds-tsx-top, .ds-tsx-bottom) > .ds-tsx-blur { display: none; }
  html.ds #device > .ds-tsx-top > .ds-tsx-dim,
  html.ds #device:is([data-tsx-kind="page"], [data-tsx-kind="film"]) > .ds-tsx-top > .ds-tsx-dim {
    background: linear-gradient(to bottom, var(--c-stage) 0, var(--c-stage) var(--safe-top, 0px), color-mix(in srgb, var(--c-stage) 70%, transparent) calc(var(--safe-top, 0px) + 30px), transparent 100%);
  }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.ds #device > :is(.ds-tsx-top, .ds-tsx-bottom) > .ds-tsx-blur { display: none; }
}

/* ===== a pushed page: its Back (a film's Share too) stands still while the page scrolls under it ===== */
/* A circle of the capsule's glass, laid by ds-tsx-tab-scroll.js exactly over the page's own control at the top of the
   page (left, top, width and height are the page control's). The page's own stays where it was, unseen and untouchable
   (VoiceOver still finds it in the page's reading order, where it was); a tap on the circle is a tap on it. */
html.ds #device > .ds-tsx-ctl {
  position: absolute; z-index: 13; left: 16px; top: max(8px, calc(var(--safe-top, 0px) + 4px)); width: 44px; height: 44px;
  margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--c-label-1);
  display: grid; place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.ds #device > .ds-tsx-ctl > .ds-tsx-glass {
  position: absolute; inset: 0; z-index: 0; border-radius: 50%; overflow: hidden; pointer-events: none;
  background: var(--dock-specular), var(--dock-under);
  -webkit-backdrop-filter: var(--dock-backdrop); backdrop-filter: var(--dock-backdrop);
  box-shadow: var(--dock-shadow);
}
html.ds #device > .ds-tsx-ctl > .ds-tsx-glass::after {
  content: ""; position: absolute; inset: var(--dock-rim); border-radius: 50%;
  background: var(--dock-fill);
  box-shadow: inset 0 1px 0 var(--c-line);
}
html.ds #device > .ds-tsx-ctl > .ds-tsx-icon { position: relative; z-index: 1; display: grid; place-items: center; pointer-events: none; }
html.ds #device > .ds-tsx-ctl > .ds-tsx-icon > :is(svg, .trip-ui-icon) { width: 24px; height: 24px; }
/* the page's chevron is an empty <i> drawn as the icon set's Back (ds-finish.css): the same path here */
html.ds #device > .ds-tsx-ctl.is-chevron > .ds-tsx-icon > i:empty {
  display: block; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.5 5.5-6.5 6.5 6.5 6.5'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.5 5.5-6.5 6.5 6.5 6.5'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
html.ds #device > .screen .ds-tsx-stood { opacity: 0 !important; pointer-events: none !important; }
/* (pages polish, 28 October 2026) a tab's in-page Back, stood in the header as the round chevron, leaves no empty line behind it;
   it stays in the page for VoiceOver (whose focus the circle, aria-hidden, never takes) */
html.ds #device > .screen [data-tab-back].ds-tsx-stood { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap; }
/* (pages polish, 28 October 2026) a pushed page's own action standing at the trailing edge keeps its state: Save, filled once saved */
html.ds #device > .ds-tsx-ctl[data-pressed="true"] .ds-tsx-icon [data-trip-icon="bookmark"] { fill: color-mix(in srgb, var(--c-seal-hi) 55%, transparent); }
/* a film's page: its compact bar stands down for the capsule and the two circles */
html.ds #device[data-tsx-kind="film"] > .screen.film-v5 > .film-compact-header { display: none !important; }
/* a pushed page has no tab bar: the capsule's name sits between the circles (max-width is written with the circles) */
html.ds #device > .ds-tsx-bar.is-page { min-height: 38px; }
/* a title in a pushed page's header row: it grows from its centre on a pull, and with Reduce Motion fades at the
   capsule's threshold */
html.ds #device > .screen .ds-tsx-title.ds-tsx-title-inline { transform-origin: 50% 60%; }
html.ds #device > .screen .ds-tsx-title.ds-tsx-calm { transition: opacity var(--motion-fast) linear; }

/* wherever the page is covered or the bar is put away, these go with it */
html.ds #device:is(.keyboard-open, .critical-journey-active:not([data-tsx-layer="film"]), .ds-sheet-open, .ds-presenting) > :is(.ds-tsx-bar, .ds-tsx-top, .ds-tsx-bottom, .ds-tsx-ctl) { display: none; }
/* (P-JOURNEY) a film opened from the three is a layer over the journey (z-index 170): its standing Back and Share, the
   capsule and the edge stand over it, under the sheets and Flick's capsule */
html.ds #device[data-tsx-layer="film"] > :is(.ds-tsx-top, .ds-tsx-bottom) { z-index: 171; }
html.ds #device[data-tsx-layer="film"] > :is(.ds-tsx-bar, .ds-tsx-ctl) { z-index: 172; }
html.ds[data-fit][data-keyboard="open"] #device > :is(.ds-tsx-bar, .ds-tsx-bottom) { display: none; }

/* ===== the large title on a pull: grows from its leading edge ===== */
html.ds #device > .screen .ds-tsx-title { transform-origin: 0 100%; }
html.ds #device > .screen .ds-tsx-title.ds-tsx-settle,
html.ds #device > .screen .ds-tsx-light.ds-tsx-settle { transition: scale var(--motion-slow) var(--motion-spring); }

/* ===== Today's light: stretches on a pull, half speed and fading as the page scrolls ===== */
html.ds #device > .screen.ds-today > .dt-marquee-light.ds-tsx-light { transform-origin: 50% 0; will-change: translate, scale, opacity; }
/* where the browser can run an animation on the scroll position itself, the parallax is that animation: it moves in
   the same frame as the page and costs the page nothing (ds-tab-scroll.js writes the same values where it cannot) */
@keyframes ds-tsx-recede { from { translate: 0 0; opacity: 1; } to { translate: 0 210px; opacity: .15; } }
@supports (animation-timeline: scroll()) {
  html.ds #device > .screen.ds-today.ds-tsx-css > .dt-marquee-light.ds-tsx-light {
    animation: ds-tsx-recede linear both; animation-timeline: scroll(nearest block); animation-range: 0px 420px;
  }
}
/* Reduce Motion: the light stays where it is */
@media (prefers-reduced-motion: reduce) {
  html.ds #device > .screen.ds-today > .dt-marquee-light.ds-tsx-light { animation: none !important; translate: none !important; scale: none !important; transform: none !important; opacity: 1 !important; }
  html.ds #device > .screen .ds-tsx-title { scale: none !important; }
}
html.ds #device.manual-reduced-motion > .screen.ds-today > .dt-marquee-light.ds-tsx-light,
html.ds.reduce-motion #device > .screen.ds-today > .dt-marquee-light.ds-tsx-light { animation: none !important; translate: none !important; scale: none !important; transform: none !important; opacity: 1 !important; }
html.ds #device.manual-reduced-motion > .screen .ds-tsx-title,
html.ds.reduce-motion #device > .screen .ds-tsx-title { scale: none !important; }

/* (lane C "less work", 21 October 2026) a page just drawn, not yet measured: the standing circles wait (the page's own
   Back shows where they will stand) until ds-tab-scroll.js has read where they go, once the page has been drawn */
html.ds #device[data-tsx-wait] > .ds-tsx-ctl:not(.is-tab-back) { visibility: hidden; }
/* (TAB FIRST FRAME, 2 November 2026) a tab's own round Back stands from the page's first frame, where ds-tab-scroll.js measures it:
   at the gutter, centred on the capsule's row (the capsule is 38pt, or its name's line and 14pt when the text is larger) */
html.ds #device > .ds-tsx-ctl.is-tab-back { left: var(--gutter, 16px); top: calc(max(8px, calc(var(--safe-top, 0px) + 4px)) + (max(38px, calc(14px + var(--lh-headline, 22px))) - 44px) / 2); }
html.ds #device > .ds-tsx-ctl.is-preview { pointer-events: none; }

/* ===== the capsule's own row: a stronger soft fade (29 October 2026; the owner chose both this and the settle in ds-tab-scroll.js;
   hub/docs/TITLE-SNAP-2026-10-29.md). Words that slide under the floating title used to stay sharp right to the capsule's edge
   and read as cut off ("Frida..."). A strip the width of the screen, 10pt above the capsule to 18pt below it, blurs and dims what
   passes under it, most in the capsule's own row and nothing at its edges (a mask, so it has no line anywhere). It is never a
   band: at most 30% of the stage colour over a 6px blur, and the rest of the top band is as light as before. It comes and goes
   with the capsule's glass (the same opacity, written by ds-tab-scroll.js), so at the top of a page there is nothing. */
html.ds #device > .ds-tsx-bar > .ds-tsx-row {
  position: absolute; z-index: -1; top: -10px; bottom: -18px; left: 50%; width: var(--tsx-dw, 100vw); translate: -50% 0; pointer-events: none;
  background: color-mix(in srgb, var(--c-stage) 30%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 34%, black 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black 34%, black 58%, transparent 100%);
  opacity: 0; will-change: opacity;
}
html.ds #device > .ds-tsx-bar.is-calm > .ds-tsx-row { transition: opacity var(--motion-fast) linear; }
html.ds #device > .ds-tsx-bar.is-calm.is-on > .ds-tsx-row { opacity: 1; }
html.ds #device.manual-solid > .ds-tsx-bar > .ds-tsx-row,
html.ds.reduce-transparency #device > .ds-tsx-bar > .ds-tsx-row,
html.ds[data-motion-tier="reduced"] #device > .ds-tsx-bar > .ds-tsx-row { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--c-stage) 40%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html.ds #device > .ds-tsx-bar > .ds-tsx-row { background: color-mix(in srgb, var(--c-stage) 40%, transparent); } }
/* (preview "edge-lite", 11 November 2026; the owner's "still janky" recording on Today) Today's soft scroll edges and the capsule's
   row keep their shade but lose their blur: three backdrop-filter layers the width of the screen (the top band, 4px; the bottom band
   over the tab bar, 8px with saturation, under the bar's own 18px glass; the capsule's row, 6px), each with a mask, are redrawn on
   every frame the page moves under them. The shade (the dim gradients) is unchanged, so the edges still fall away softly; what
   passes under them is no longer blurred. For the owner to compare on his iPhone; off, nothing here applies. */
html.ds:is(.pv-edge-lite, .pv-all) #device[data-tsx="today"] > :is(.ds-tsx-top, .ds-tsx-bottom) > .ds-tsx-blur { display: none; }
html.ds:is(.pv-edge-lite, .pv-all) #device[data-tsx="today"] > .ds-tsx-bar > .ds-tsx-row { -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; background: linear-gradient(to bottom, transparent 0, color-mix(in srgb, var(--c-stage) 30%, transparent) 34%, color-mix(in srgb, var(--c-stage) 30%, transparent) 58%, transparent 100%); }

/* ===== prototype-src/ds-look.css ===== */
/* TRIPTIC ds-look: the look of the app (8 October 2026). Runtime pair: prototype-src/ds-look.js.
   Record: hub/docs/LOOK-2026-10-08.md. Scoped under html.ds (kill switch ?ds=0).

   1. ONE ROOM. The owner: "The background colour differs on different pages, and on the Collections page it has a
      line. I like the colour shade on the Today tab the best so let's apply it to all pages and make it consistent."
      Today's shade was five layers deep: the page's own dark gradient (product-manager-polish.css), a blurred, drifting
      pair of violet pools (globals.css .screen::before, blur 24px on a box 36% larger than the screen), a 16% wash of
      the apple-integration atmosphere (.screen::after), and Today's own marquee light (ds-today.css), a magenta and
      violet wash over the top 420pt. The other pages had some of these, in other strengths, plus their own: Discover a
      different pool and a scrim, Collections a coloured aurora, Library and You a page "environment", Film DNA and
      Friday 3 their own tints. The room is now one set of tokens (--ds-room-*) painted by one rule on the page itself,
      unblurred, and the older layers stand down on every page that wears it.
        --ds-room-wash   Today's marquee light: the violet wash over the top 420pt of the page. It scrolls with the page.
                         On Today the light itself paints it (it stretches and recedes with the scroll, ds-tab-scroll.css).
        --ds-room-pools  the two violet pools (once the blurred ::before), as plain gradients that fade to nothing.
        --ds-room-air    the faint blue and violet air at the top and the left (once the ::after atmosphere).
        --ds-room-floor  the near-black under all of it, a touch lighter at the top.
      Pages that keep their own room because it carries meaning: the Daily Cryptic's bright room (.cg-room), a film's page
      (its poster is the room), the share page, the three and the wait (their own stage), the opening, Welcome and the
      first run, and sheets.
      Reduce Transparency (as Today did): the wash is left out; pools, air and floor stay.

      The line on Collections: the page's ::after atmosphere is absolutely placed at the top of every page (inset 0,
      apple-integration). On Collections an older rule for its bottom scrim (globals.css .explore-screen::after,
      height: 112px) still set its height, so the atmosphere stopped 112pt down the page; over Collections' brighter aurora
      its lower edge was a straight line across the page. Every page that wears the room now has no ::after atmosphere.

   2. THE LOGO'S LIGHT (the five tab headers and any page header with the brand: Film DNA). The owner's picture of You
      showed a box: the glow had a flat top and hard sides. The causes: the glow was two layers, one of them
      (.header-brand-aura) a 340 x 72pt box with filter: blur(11px). WebKit draws a filtered element in its own layer and
      clips the blurred result to that layer, so the blur ended in straight edges; and both gradients were still bright at
      their box's left edge (an ellipse 200pt wide centred 110pt in), so the light was cut by its own box. Now: one layer,
      no filter, two ellipses that reach zero well inside a box larger than they are, with a falloff shaped like light
      (bright core, long soft tail), and nothing up the chain clips it.

   3. FIND THREE. Empty request: a calm grey, aria-disabled (still focusable, the reason read out). Text: the violet with
      its sheen. Two seconds without typing or sending, while the request box has focus: one soft band of light crosses
      the whole button (0.9s), again every six seconds while it waits. ds-look.js runs the clock; this sheet draws the
      band. Reduce Motion: no band; a brighter edge instead. Motion: transform and opacity only.

   4. THE OPENING'S LIGHT (8 October 2026, afternoon; record hub/docs/WELCOME-2026-10-08.md). The owner's recording of
      the opening on his iPhone showed "a blue sort of square box" round the mark as it travelled from the splash to
      Welcome. The cause: every copy of the mark carried a drop-shadow filter (the launch cover's, the page's splash,
      the runtime splash, the Welcome lockup, which also had a second drop-shadow on its whole brand box), and while a
      filtered layer moves WebKit paints its shadow inside the layer's own box: a lighter square, cut at the box's
      edge. Welcome also had a blurred 280 x 220 pool (blur 18) and two blurred atmosphere pools (blur 46-58), which
      end in straight edges on an iPhone for the same reason. Now: no filter and no backdrop filter anywhere on the
      splash, the launch cover or Welcome's light. The light is gradients only, each reaching zero inside its own
      box: the halo (static-shell.html) and, on Welcome, the lockup's aura with the same small bright core. */

/* ============================================================================================ 1. one room */
html.ds {
  --ds-room-floor: linear-gradient(180deg, rgb(8 8 13) 0%, rgb(6 6 9) 46%, rgb(4 4 6) 100%);
  --ds-room-floor-colour: rgb(5 5 7);
  --ds-room-air:
    radial-gradient(70% 34% at 72% -4%, rgb(86 128 255 / .07), rgb(86 128 255 / .035) 45%, rgb(86 128 255 / 0) 100%),
    radial-gradient(52% 30% at -6% 40%, rgb(151 78 255 / .05), rgb(151 78 255 / .02) 50%, rgb(151 78 255 / 0) 100%);
  --ds-room-pools:
    radial-gradient(44% 32% at 92% 10%, rgb(151 110 255 / .11), rgb(151 110 255 / .075) 30%, rgb(151 110 255 / .03) 62%, rgb(151 110 255 / 0) 100%),
    radial-gradient(50% 30% at 4% 68%, rgb(82 52 178 / .10), rgb(82 52 178 / .065) 32%, rgb(82 52 178 / .025) 64%, rgb(82 52 178 / 0) 100%);
  --ds-room-wash:
    radial-gradient(86% 62% at 84% 34%, rgb(127 26 142 / .22), rgb(127 26 142 / 0) 70%),
    radial-gradient(80% 60% at 8% 52%, rgb(90 31 180 / .20), rgb(90 31 180 / 0) 72%);
  --ds-room-wash-height: 420px;
  --ds-room-height: 900px;
}

/* The pages that wear the room. Each is a page of the app itself, on the app's dark floor. */
html.ds #device > .screen:is(.premium-discover, .today-screen, .explore-screen, .library-screen, .profile-screen, .settings-screen, .sublist-screen, .watchlist-screen, .tm-screen, .ds-tt-screen, .accessibility-screen, .system-state-screen, .demo-screen, .interests-screen, .clarify-screen, .decision-screen, .receiver-screen):not(.cg-room):not(.film-screen):not(.ds-sheet-host):not(.first-run-screen):not(.trip-critical-layer) {
  background-color: var(--ds-room-floor-colour) !important;
  background-image: var(--ds-room-wash), var(--ds-room-pools), var(--ds-room-air), var(--ds-room-floor) !important;
  background-size: 100% var(--ds-room-wash-height), 100% var(--ds-room-wash-height), 100% var(--ds-room-height), 100% var(--ds-room-height), 100% var(--ds-room-height), 100% var(--ds-room-height), 100% 100% !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  /* the wash, the pools and the air belong to the top of the page and scroll away with it (as Today's light does); the floor stays */
  background-attachment: local, local, local, local, local, local, scroll !important;
}
/* Today: its marquee light is the wash (and moves with the scroll), so the page under it carries the rest. (NIGHT,
   10 October 2026: written as "#device > .screen.today-screen.ds-today", this lost to the rule above, whose :not()s
   outweigh it, so wherever the page paints the room itself (Reduce Motion, where SURF's room layer is not placed) Today
   wore the wash twice, the page's and its light's: 26 levels brighter than the other tabs at 375 x 667. It now outranks
   that rule, and steps aside for SURF's room layer (ds-surfaces.css), which carries the light there.) */
html.ds #device > .screen.today-screen.ds-today:not(.ds-tsx-roomed):not(.cg-room):not(.film-screen):not(.ds-sheet-host):not(.first-run-screen):not(.trip-critical-layer) {
  background-image: var(--ds-room-pools), var(--ds-room-air), var(--ds-room-floor) !important;
  background-size: 100% var(--ds-room-height), 100% var(--ds-room-height), 100% var(--ds-room-height), 100% var(--ds-room-height), 100% 100% !important;
  background-attachment: local, local, local, local, scroll !important;
}
/* the older layers stand down: the blurred pools, the atmosphere (the Collections line), the page environments */
html.ds #device > .screen:is(.premium-discover, .today-screen, .explore-screen, .library-screen, .profile-screen, .settings-screen, .sublist-screen, .watchlist-screen, .tm-screen, .ds-tt-screen, .accessibility-screen, .system-state-screen, .demo-screen, .interests-screen, .clarify-screen, .decision-screen, .receiver-screen):not(.cg-room):not(.film-screen):not(.ds-sheet-host):not(.first-run-screen):not(.trip-critical-layer)::before,
html.ds #device > .screen:is(.premium-discover, .today-screen, .explore-screen, .library-screen, .profile-screen, .settings-screen, .sublist-screen, .watchlist-screen, .tm-screen, .ds-tt-screen, .accessibility-screen, .system-state-screen, .demo-screen, .interests-screen, .clarify-screen, .decision-screen, .receiver-screen):not(.cg-room):not(.film-screen):not(.ds-sheet-host):not(.first-run-screen):not(.trip-critical-layer)::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}
html.ds #device > .screen:is(.premium-discover, .today-screen, .explore-screen, .library-screen, .profile-screen, .settings-screen, .sublist-screen, .watchlist-screen, .tm-screen, .ds-tt-screen, .accessibility-screen, .system-state-screen, .demo-screen, .interests-screen, .clarify-screen, .decision-screen, .receiver-screen):not(.cg-room):not(.film-screen):not(.ds-sheet-host):not(.first-run-screen):not(.trip-critical-layer) > .global-trio-atmosphere { display: none !important; }
/* Discover's own older room stands down too (NIGHT, 10 October 2026; record hub/docs/NIGHT-2026-10-10.md). The owner:
   "check why the background colour is different on the Discover page to the other tabs; I want it to match the
   others." The cause: Discover's page carries .premium-discover-ambient, a fixed, full-screen layer with an opaque
   gradient of its own (#06060c to #030307 under a blue pool top left, a violet one top right and one in the middle,
   frontend-completion.css; its blur was taken off on 9 October but the layer stayed). It sits over the room: the floor
   above and SURF's half-speed room light (.ds-tsx-room) were drawn underneath it, so Discover showed the ambient's
   shade at every hour, never the room's, and never the light of the day. Measured at 390 x 844: up to 35 levels per
   channel from the other tabs, the same at 8am, 1pm, 7pm and 2am. With it gone Discover is the very same room. The
   three and the wait keep it (the critical layer is not a room page). */
html.ds #device > .screen:is(.premium-discover, .today-screen, .explore-screen, .library-screen, .profile-screen, .settings-screen, .sublist-screen, .watchlist-screen, .tm-screen, .ds-tt-screen, .accessibility-screen, .system-state-screen, .demo-screen, .interests-screen, .clarify-screen, .decision-screen, .receiver-screen):not(.cg-room):not(.film-screen):not(.ds-sheet-host):not(.first-run-screen):not(.trip-critical-layer) > .premium-discover-ambient { display: none !important; }
/* Reduce Transparency (the phone's setting or the app's own switch): no wash, as Today's light already did */
html.ds.reduce-transparency #device > .screen:is(.premium-discover, .explore-screen, .library-screen, .profile-screen, .settings-screen, .sublist-screen, .watchlist-screen, .tm-screen, .ds-tt-screen, .accessibility-screen, .system-state-screen, .demo-screen, .interests-screen, .clarify-screen, .decision-screen, .receiver-screen):not(.cg-room):not(.film-screen):not(.ds-sheet-host):not(.first-run-screen):not(.trip-critical-layer),
html.ds #device.manual-solid > .screen:is(.premium-discover, .explore-screen, .library-screen, .profile-screen, .settings-screen, .sublist-screen, .watchlist-screen, .tm-screen, .ds-tt-screen, .accessibility-screen, .system-state-screen, .demo-screen, .interests-screen, .clarify-screen, .decision-screen, .receiver-screen):not(.cg-room):not(.film-screen):not(.ds-sheet-host):not(.first-run-screen):not(.trip-critical-layer) {
  background-image: var(--ds-room-pools), var(--ds-room-air), var(--ds-room-floor) !important;
  background-size: 100% var(--ds-room-height), 100% var(--ds-room-height), 100% var(--ds-room-height), 100% var(--ds-room-height), 100% 100% !important;
  background-attachment: local, local, local, local, scroll !important;
}
@media (prefers-reduced-transparency: reduce) {
  html.ds #device > .screen:is(.premium-discover, .explore-screen, .library-screen, .profile-screen, .settings-screen, .sublist-screen, .watchlist-screen, .tm-screen, .ds-tt-screen, .accessibility-screen, .system-state-screen, .demo-screen, .interests-screen, .clarify-screen, .decision-screen, .receiver-screen):not(.cg-room):not(.film-screen):not(.ds-sheet-host):not(.first-run-screen):not(.trip-critical-layer) {
    background-image: var(--ds-room-pools), var(--ds-room-air), var(--ds-room-floor) !important;
    background-size: 100% var(--ds-room-height), 100% var(--ds-room-height), 100% var(--ds-room-height), 100% var(--ds-room-height), 100% 100% !important;
    background-attachment: local, local, local, local, scroll !important;
  }
}
/* The device frame and the page behind it are the floor's colour, so nothing lighter or darker shows at an edge,
   under the tab bar or in a rubber band. */
html.ds #device { background-color: var(--ds-room-floor-colour); }

/* ==================================================================================== 2. the logo's light */
html.ds #device .app-header,
html.ds #device .app-header .brand-home { overflow: visible !important; }
html.ds #device .app-header .brand-home { position: relative; isolation: isolate; }
html.ds #device .app-header .brand-home > .header-brand-aura { display: none !important; }
html.ds #device .app-header .brand-home::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  left: -150px !important;
  top: 50% !important;
  width: 470px !important;
  height: 150px !important;
  transform: translateY(-50%) !important;
  border-radius: 0 !important;
  /* the mark's own light (round, bright, short), then a long, low band along the word; each reaches zero inside the box */
  background:
    radial-gradient(60px 44px at 167px 50%, rgb(110 205 255 / .46), rgb(104 201 255 / .37) 22%, rgb(81 148 255 / .21) 45%, rgb(81 148 255 / .08) 68%, rgb(81 148 255 / .02) 86%, rgb(81 148 255 / 0) 100%),
    radial-gradient(160px 38px at 226px 50%, rgb(96 170 255 / .18), rgb(96 170 255 / .145) 22%, rgb(120 110 250 / .08) 45%, rgb(140 95 245 / .03) 68%, rgb(147 87 239 / .008) 86%, rgb(147 87 239 / 0) 100%) !important;
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
  pointer-events: none !important;
}

/* ==================================================================================== 3. Find three */
/* Empty (or over the limit): a calm grey. aria-disabled keeps it in the reading order with its reason (ds-look.js). */
html.ds #device .premium-composer .query-submit.query-submit-plain[aria-disabled="true"] {
  color: var(--c-label-3) !important;
  -webkit-text-fill-color: var(--c-label-3) !important;
  background: var(--c-fill-2) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--c-line) !important;
  opacity: 1 !important;
  transform: none !important;
  cursor: default;
}
html.ds #device .premium-composer .query-submit.query-submit-plain[aria-disabled="true"] > span:not(.ds-look-sheen) { color: var(--c-label-3) !important; -webkit-text-fill-color: var(--c-label-3) !important; }
html.ds #device .premium-composer .query-submit.query-submit-plain[aria-disabled="true"]::before,
html.ds #device .premium-composer .query-submit.query-submit-plain[aria-disabled="true"]::after,
html.ds #device .premium-composer .query-submit.query-submit-plain[aria-disabled="true"] > .ds-look-sheen { opacity: 0 !important; animation: none !important; }
/* Text present: the violet, with its sheen (ds-first-run.css draws the sheen as the words arrive). The colour arrives softly. */
html.ds #device .premium-composer .query-submit.query-submit-plain { transition: scale var(--motion-fast) var(--motion-spring), opacity var(--motion-fast) var(--motion-curve), color var(--motion-fast) var(--motion-curve); }
/* The band of light: clipped to the pill (the button is overflow: hidden on Discover), over the sheen, under the label */
html.ds #device .premium-composer .query-submit.query-submit-plain { overflow: hidden !important; isolation: isolate; }
html.ds #device .premium-composer .query-submit.query-submit-plain > span:not(.ds-look-sheen) { position: relative; z-index: 2; }
html.ds #device .premium-composer .query-submit.query-submit-plain > .ds-look-sheen {
  display: block !important; position: absolute !important; z-index: 1; top: 0; bottom: 0; left: 0; width: 52%;
  pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .16) 24%, rgb(255 255 255 / .6) 50%, rgb(255 255 255 / .16) 76%, rgb(255 255 255 / 0) 100%);
  transform: translateX(-110%);
}
html.ds #device .premium-composer .query-submit.query-submit-plain.ds-look-sweeping > .ds-look-sheen {
  animation: ds-look-sweep var(--motion-slow) var(--motion-curve) 1 both;
}
@keyframes ds-look-sweep {
  0% { opacity: 0; transform: translateX(-110%); }
  14% { opacity: 1; }
  86% { opacity: 1; }
  100% { opacity: 0; transform: translateX(200%); }
}
/* Reduce Motion: the light does not travel; the button's edge brightens and stays while it waits */
html.ds #device .premium-composer .query-submit.query-submit-plain.ds-look-ready-still:not([aria-disabled="true"]) {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .34), inset 0 0 0 1px rgb(255 255 255 / .30), 0 0 0 1px rgb(167 139 250 / .45) !important;
}
@media (prefers-reduced-motion: reduce) {
  html.ds #device .premium-composer .query-submit.query-submit-plain.ds-look-sweeping > .ds-look-sheen { animation: none; opacity: 0; }
}
html.ds #device.manual-reduced-motion .premium-composer .query-submit.query-submit-plain.ds-look-sweeping > .ds-look-sheen { animation: none; opacity: 0; }

/* ==================================================================================== 4. the opening's light */
/* the mark, the word and their boxes: never a filter (a filtered layer is clipped to its box on an iPhone) */
html.ds #device :is(.splash-screen, .welcome-screen) :is(.splash-brand, .welcome-brand, .brand-mark, .wordmark) { filter: none !important; }
/* Welcome's blurred pool and its two filaments (each a filtered layer), and the blurred atmosphere pools, stand down */
html.ds #device .welcome-screen .premium-welcome-light,
html.ds #device :is(.splash-screen, .welcome-screen) > .global-trio-atmosphere { display: none !important; }
/* ...and the page's own blurred layers: the drifting violet pools (.screen::before, blur 24) and Welcome's blurred
   picture wash (::after, blur 18). Welcome's poster wall brings its own shade (ds-first-run.css), the splash its halo. */
html.ds #device > .screen:is(.splash-screen, .welcome-screen)::before,
html.ds #device > .screen.welcome-screen::after { content: none !important; display: none !important; animation: none !important; filter: none !important; }
html.ds #device > .screen.splash-screen::after { filter: none !important; }
/* the mark lands in the same light it left: the splash's halo, with its small bright core (static-shell.html) */
html.ds #device .welcome-screen .welcome-brand { isolation: isolate; }
/* 13 October 2026 (owner: "a bit more purple behind the TRIPTIC logo"; hub/docs/WELCOME-2026-10-13.md): a violet bloom
   in the brand's own violets (--c-seal-hi at its heart, --c-seal, --c-seal-fill at its rim) behind the mark AND the word,
   centred on the lockup (21pt below the mark's centre), over the calm pool of dark. The splash's blue light stays as a
   smaller, cooler heart round the mark (120 x 100, was 190 x 150), so the violet reads as the glow. Every light here
   falls off on a smooth curve ((1 - t^2)^3, eased stops: no straight segments to show as rings) and reaches nothing
   inside the box, which is larger now (440 x 380) so the bloom can be. The box is still centred on the mark. */
html.ds #device .welcome-screen .welcome-brand > .premium-brand-aura {
  z-index: -1;
  width: 440px; height: 380px;
  border-radius: 0;
  background:
    radial-gradient(64px 60px at 50% 50%, rgb(166 138 237 / .16), rgb(166 138 237 / .08) 45%, rgb(166 138 237 / .02) 80%, rgb(166 138 237 / 0) 100%),
    radial-gradient(120px 100px at 50% 50%, rgb(74 181 255 / .200) 0%, rgb(74 181 255 / .177) 20%, rgb(86 160 252 / .119) 40%, rgb(112 118 248 / .052) 60%, rgb(132 82 244 / .009) 80%, rgb(132 82 244 / .001) 90%, rgb(132 82 244 / 0) 100%),
    radial-gradient(210px 168px at 50% 55.5%, color-mix(in srgb, var(--c-seal-hi) 36.0%, transparent) 0%, color-mix(in srgb, var(--c-seal-hi) 33.6%, transparent) 15%, color-mix(in srgb, var(--c-seal) 27.1%, transparent) 30%, color-mix(in srgb, var(--c-seal) 18.3%, transparent) 45%, color-mix(in srgb, var(--c-seal) 9.4%, transparent) 60%, color-mix(in srgb, var(--c-seal-fill) 3.0%, transparent) 75%, color-mix(in srgb, var(--c-seal-fill) 0.2%, transparent) 90%, transparent 100%),
    /* under the light, a calm pool of the page's dark, so the mark and the word stand clear of the posters behind them */
    radial-gradient(186px 146px at 50% 53.2%, rgb(5 5 9 / .86), rgb(5 5 9 / .72) 40%, rgb(5 5 9 / .34) 72%, rgb(5 5 9 / 0) 100%) !important;
  filter: none !important;
  opacity: 1;
}
/* 3 November 2026 (round 11 of the cold open; hub/docs/opening/OPENING-2026-10-29.md): the owner's gold logo (round 10) now
   has the warm glow of ChatGPT's render (evidence/opening/owner-chatgpt-welcome-glow.png): one soft gold light centred on the
   brand, over a gentle pool of the page's dark that dims the posters right behind it, so the logo is the hero. It replaces the
   violet and blue bloom above; the opening's gold hero settles into it. No motion, no blur, no backdrop: the same in Reduce
   Motion and Reduce Transparency. */
html.ds #device .welcome-screen .welcome-brand > .premium-brand-aura {
  display: block !important;
  background:
    radial-gradient(80px 70px at 50% 47%, rgb(238 150 108 / .40), rgb(230 136 116 / .27) 40%, rgb(216 120 126 / .11) 75%, rgb(216 120 126 / 0) 100%),
    radial-gradient(172px 150px at 50% 52%, rgb(222 118 138 / .50), rgb(210 108 142 / .34) 30%, rgb(196 98 140 / .17) 55%, rgb(182 90 134 / .055) 80%, rgb(182 90 134 / 0) 100%),
    radial-gradient(200px 165px at 50% 50%, rgb(5 5 9 / .4), rgb(5 5 9 / .3) 45%, rgb(5 5 9 / .1) 75%, rgb(5 5 9 / 0) 100%) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* ==================================================================================== 5. no square round any light */
/* (LOOK, 9 October 2026, evening; record hub/docs/LOOK-2026-10-09b.md.) The owner: "get rid of the square boxes
   currently seen around the halos when a triptych is loading". The wait and the reveal are mended in showpiece.css;
   the rest of the app's halos are held to the same rule here: a glow is gradients that reach nothing inside their own
   box, never a filter (WebKit cuts a filtered layer to its box), never a glow cut by a box. scripts/lib/glow-audit.mjs
   walks the running page for anything that could draw one (tests/look-halo-browser.test.mjs). */
/* Discover's room: the older ambient's two blurred layers (blur 30 and 15); their gradients already fade to nothing */
html.ds #device .premium-discover-ambient::before,
html.ds #device .premium-discover-ambient > span { filter: none !important; }
/* the logo in a header: its light is the header's own (section 2), not a drop-shadow on the mark */
html.ds #device .app-header .brand-home :is(.brand-mark, .wordmark),
html.ds #device > .screen.screen > .app-header .brand-home :is(.brand-mark, .wordmark),
html.ds #device .daily-cryptic-home-entry .daily-cryptic-glyph .brand-mark,
html.ds #device .premium-cryptic-emblem .brand-mark,
html.ds #device .signin-brand img,
html.ds #device :is(.system-state-screen, .library-empty) .brand-mark,
html.ds #device .trip-critical-layer .critical-brand-lockup :is(.brand-mark, .wordmark) { filter: none !important; }

/* TRIPTIC+ in gold (owner, 3 November 2026, 13:37: "gold tins when you're on TRIPTIC+, white when on free"; variant (c),
   hub/docs/GOLD-MEMBERS-2026-11-03.md). ONE rule: html.is-plus (membership.js, from the server's own answer; the head gate
   from the last answer kept on this phone) swaps the small mark for the gold tins wherever the app shell shows it: every
   page's header (Discover, Today, Collections, Library, You, pushed pages, iPad, Duo) and the search's floating lockup. The
   white wordmark and the blue header haze are unchanged; the img, its box and its alt stay as they are (no layout shift).
   The art is opening/build-member-mark.mjs's, drawn on the white mark's own painted box. Welcome stays all gold for everyone. */
html.ds.is-plus #device .app-header .brand-home img.brand-mark,
html.ds.is-plus #device .trip-critical-layer .critical-brand-lockup img.brand-mark {
  content: url("/assets/member/mark@3x.png");
  content: image-set(url("/assets/member/mark@1x.png") 1x, url("/assets/member/mark@2x.png") 2x, url("/assets/member/mark@3x.png") 3x);
  content: image-set(url("/assets/member/mark@1x.webp") type("image/webp") 1x, url("/assets/member/mark@2x.webp") type("image/webp") 2x, url("/assets/member/mark@3x.webp") type("image/webp") 3x,
                     url("/assets/member/mark@1x.png") type("image/png") 1x, url("/assets/member/mark@2x.png") type("image/png") 2x, url("/assets/member/mark@3x.png") type("image/png") 3x);
  object-fit: contain;
}
/* the header logo's hop (ds-delights-2.js draws the white line art for a moment): in gold lines for a member */
html.ds.is-plus #device .app-header > .brand-home > .dsd-mark > g { color: var(--c-plus-gold); }
/* joining, lapsing, signing out: a gentle cross-dissolve through the stage (membership.js), opacity only; none in Reduce Motion */
html.ds.plus-swap #device :is(.app-header .brand-home, .trip-critical-layer .critical-brand-lockup) img.brand-mark { opacity: 0 !important; }
html.ds.plus-swapping #device :is(.app-header .brand-home, .trip-critical-layer .critical-brand-lockup) img.brand-mark { transition: opacity var(--motion-fast) var(--motion-curve) !important; }
@media (prefers-reduced-motion: reduce) {
  html.ds.plus-swapping #device :is(.app-header .brand-home, .trip-critical-layer .critical-brand-lockup) img.brand-mark { transition: none !important; }
}

/* ==================================================================================== 6. the title face */
/* The owner (9 October 2026): "a proper title typeface: one editorial display face for film titles and big headings,
   with the system font for everything else". Fraunces (Undercase Type; SIL Open Font License 1.1, no reserved name),
   self-hosted: public/assets/fonts/fraunces-latin.woff2 (34 KB) and -latin-ext.woff2 (33 KB, fetched only for a title
   that needs it), the licence beside them (Fraunces-OFL.txt) and credited in Settings > About. Cut for titles: its
   weight axis kept (300 to 800, for the settle in section 7), its optical size fixed at 48 (a display cut), its soft and
   wonky axes off; hinting dropped (scripts/build-display-font.py). static-shell.html preloads the Latin file. The
   two @font-face rules are in design-tokens.css (the face's whole weight range is declared there, outside the ramp's
   400 to 700 that every ds-* sheet keeps to; the settle animates the axis itself). */
/* What it sets: a film's title (its page, the three's caption, a two-film answer, the Duo's words) and the large
   headings of the five tabs, and the headword of the dictionary's "triptych" (lane VOICE, 13 October 2026). Sizes, line heights and wrapping are each layer's own; only the face, its weight and its
   tracking change (a serif at display size wants a little less air than SF's +0.011em). A title that is longer than
   its line still wraps, never clips. */
html.ds #device#device :is(.film-v5 .film-title h1, .two-film-heading > h1, .discover-heading h1, .dt-masthead h1, .dslc-title-block h1, .collections-api-header h1, .destination-heading h1, .dsy-you-head h1, .ds-large-title, .cu-focus-title, .cu-sheet h2, .cu-door-title, .collections-films-head h2, .eg-pick-copy > h2, .dsc-frontis-title, .dsc-pick-title),
html.ds #device#device .trip-critical-layer > .sp-caption > .sp-title,
html.ds .duo-stage .duo-words-title,
html.ds :is(#device#device, body > .dlm-define) .tw-word {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tr-display) !important;
  font-synthesis: none;
  font-optical-sizing: none;
  font-kerning: normal;
  overflow-wrap: break-word;
}

/* ==================================================================================== 7. the title settles */
/* On a film's page the title settles from a lighter weight to its own (300 to 600 on the face's weight axis) in the
   slow step (560 ms, --motion-slow, on --motion-curve), starting as the poster lands (HERO's hc-carry-land), or at once
   when the page arrives without the poster's flight. ds-look.js runs it with the Web Animations API on
   font-variation-settings. While it settles, each line is held as it will finally break (.ds-look-line), so a word
   never hops between lines as the letters fill out (a lighter Fraunces is narrower). Reduce Motion: the title is
   simply there, at its weight. */
html.ds #device .film-v5 .film-title h1 .ds-look-line { display: block; white-space: nowrap; }

/* ==================================================================================== 8. light that follows the day */
/* The rooms' light shifts with the phone's own clock (ds-look.js reads the hour; nothing else is asked): a warmer
   morning (5 to 11), a crisp midday (11 to 17), the evening the app was drawn in (17 to 21) and a deeper night. Very
   subtle: the same pools, air and wash, re-tinted a few points; every one is darker or no lighter than the evening's,
   so text over it keeps WCAG AA (measured in tests/look-browser.test.mjs). The hour is read when the app opens, comes
   back to the front or changes page, so the light changes between pages, never in front of anyone: nothing animates. */
html.ds[data-ds-daylight="morning"] {
  --ds-room-floor: linear-gradient(180deg, rgb(10 8 11) 0%, rgb(7 6 8) 46%, rgb(5 4 5) 100%);
  --ds-room-air:
    radial-gradient(70% 34% at 72% -4%, rgb(255 168 112 / .06), rgb(255 168 112 / .028) 45%, rgb(255 168 112 / 0) 100%),
    radial-gradient(52% 30% at -6% 40%, rgb(196 96 170 / .05), rgb(196 96 170 / .02) 50%, rgb(196 96 170 / 0) 100%);
  --ds-room-pools:
    radial-gradient(44% 32% at 92% 10%, rgb(206 132 196 / .10), rgb(206 132 196 / .068) 30%, rgb(206 132 196 / .027) 62%, rgb(206 132 196 / 0) 100%),
    radial-gradient(50% 30% at 4% 68%, rgb(112 56 150 / .10), rgb(112 56 150 / .065) 32%, rgb(112 56 150 / .025) 64%, rgb(112 56 150 / 0) 100%);
  --ds-room-wash:
    radial-gradient(86% 62% at 84% 34%, rgb(164 52 104 / .20), rgb(164 52 104 / 0) 70%),
    radial-gradient(80% 60% at 8% 52%, rgb(118 44 160 / .18), rgb(118 44 160 / 0) 72%);
}
html.ds[data-ds-daylight="midday"] {
  --ds-room-floor: linear-gradient(180deg, rgb(8 9 13) 0%, rgb(6 6 9) 46%, rgb(4 5 7) 100%);
  --ds-room-air:
    radial-gradient(70% 34% at 72% -4%, rgb(118 166 255 / .075), rgb(118 166 255 / .036) 45%, rgb(118 166 255 / 0) 100%),
    radial-gradient(52% 30% at -6% 40%, rgb(126 110 255 / .045), rgb(126 110 255 / .018) 50%, rgb(126 110 255 / 0) 100%);
  --ds-room-pools:
    radial-gradient(44% 32% at 92% 10%, rgb(140 140 255 / .10), rgb(140 140 255 / .068) 30%, rgb(140 140 255 / .027) 62%, rgb(140 140 255 / 0) 100%),
    radial-gradient(50% 30% at 4% 68%, rgb(64 72 186 / .09), rgb(64 72 186 / .058) 32%, rgb(64 72 186 / .022) 64%, rgb(64 72 186 / 0) 100%);
  --ds-room-wash:
    radial-gradient(86% 62% at 84% 34%, rgb(96 64 200 / .18), rgb(96 64 200 / 0) 70%),
    radial-gradient(80% 60% at 8% 52%, rgb(58 84 200 / .15), rgb(58 84 200 / 0) 72%);
}
html.ds[data-ds-daylight="night"] {
  --ds-room-floor: linear-gradient(180deg, rgb(6 6 10) 0%, rgb(4 4 7) 46%, rgb(2 2 4) 100%);
  --ds-room-air:
    radial-gradient(70% 34% at 72% -4%, rgb(72 96 210 / .05), rgb(72 96 210 / .024) 45%, rgb(72 96 210 / 0) 100%),
    radial-gradient(52% 30% at -6% 40%, rgb(120 60 220 / .04), rgb(120 60 220 / .016) 50%, rgb(120 60 220 / 0) 100%);
  --ds-room-pools:
    radial-gradient(44% 32% at 92% 10%, rgb(118 84 228 / .09), rgb(118 84 228 / .06) 30%, rgb(118 84 228 / .024) 62%, rgb(118 84 228 / 0) 100%),
    radial-gradient(50% 30% at 4% 68%, rgb(58 34 150 / .09), rgb(58 34 150 / .058) 32%, rgb(58 34 150 / .022) 64%, rgb(58 34 150 / 0) 100%);
  --ds-room-wash:
    radial-gradient(86% 62% at 84% 34%, rgb(92 22 120 / .18), rgb(92 22 120 / 0) 70%),
    radial-gradient(80% 60% at 8% 52%, rgb(56 26 150 / .17), rgb(56 26 150 / 0) 72%);
}

/* ==================================================================================== 9. the glass takes the film's colour */
/* On a film's page the glass bars take a faint wash of the poster's own colour (HERO's colour from the film, the
   same "r, g, b" as the room's --hc-film-a, clamped): the page's action bar, the round Back and Share that stand still
   over it, the capsule that carries its name, and the tab bar wherever it is shown over a film. ds-look.js copies the
   colour onto #device as --ds-film-wash while a film's page is the page. It is a wash over the glass's own tint, so the
   labels keep their contrast (measured in tests/look-browser.test.mjs). Reduce Transparency: the solid bars take it too,
   more faintly. */
html.ds #device.ds-look-filmlit > .persistent-glass-nav .ds-dock-tint,
html.ds #device.ds-look-filmlit > :is(.ds-tsx-bar, .ds-tsx-ctl) > .ds-tsx-glass::after,
html.ds #device.ds-look-filmlit .film-v5 .film-content > .decision-actions::after {
  background: linear-gradient(180deg, rgba(var(--ds-film-wash), .2), rgba(var(--ds-film-wash), .11)), var(--dock-fill) !important;
}
html.ds.reduce-transparency #device.ds-look-filmlit > .persistent-glass-nav .ds-dock-tint,
html.ds #device.manual-solid.ds-look-filmlit > .persistent-glass-nav .ds-dock-tint,
html.ds.reduce-transparency #device.ds-look-filmlit .film-v5 .film-content > .decision-actions::after,
html.ds #device.manual-solid.ds-look-filmlit .film-v5 .film-content > .decision-actions::after {
  background: linear-gradient(180deg, rgba(var(--ds-film-wash), .12), rgba(var(--ds-film-wash), .07)), var(--dock-fill) !important;
}

/* ==================================================================================== 10. living tab icons */
/* Today's leaf shows today's date (the phone's own clock; the spark it carried is the date now); Library carries how
   many films wait on the Watchlist, when there are any and Library is not the page in front; each glyph's small flourish
   on being chosen is ds-delights-2.js's (on the motion tokens; Reduce Motion: none). VoiceOver: Today is still "Today"
   (the date is drawn, not read: the phone says it); Library reads "Library, 4 films on your Watchlist". */
/* the numerals are strokes in the glyphs' own hand, a little finer than the leaf's edge; cut out of the filled leaf in
   the glass's own dark, as the spark was */
html.ds #device > .persistent-glass-nav button svg .ds-look-date { fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
html.ds #device > .persistent-glass-nav button svg .ds-o .ds-look-date { stroke: currentColor; }
html.ds #device > .persistent-glass-nav button svg .ds-s .ds-look-date { stroke: var(--dock-solid-lo); stroke-width: 1.45; }
html.ds #device > .persistent-glass-nav > button > .ds-look-count {
  position: absolute; left: calc(50% + 4px); top: calc(var(--dock-icon-y) - var(--dock-pad) - 16px); z-index: 3;
  box-sizing: border-box; min-width: 17px; height: 17px; padding: 0 4.5px; border-radius: var(--r-pill); pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font: 700 var(--fs-caption-2)/1 var(--font-ui); letter-spacing: 0; font-variant-numeric: tabular-nums;
  color: var(--dock-solid-lo); background: rgb(var(--dock-accent));
  box-shadow: 0 0 0 1.5px var(--dock-solid-lo);
}
html.ds #device > .persistent-glass-nav > button > .ds-look-count::before { content: attr(data-count); }
html.ds #device > .persistent-glass-nav.ds-min > button > .ds-look-count { translate: 0 var(--dock-drop); }
html.ds #device > .persistent-glass-nav.ds-min > button:not([aria-current="page"]):not(.active) > .ds-look-count { opacity: 0; }

/* ===== prototype-src/ds-flick.css ===== */
/* TRIPTIC ds-flick: Flick, the mascot (lane FLICK, 13 October 2026; record hub/docs/FLICK-2026-10-13.md). Runtime pair:
   ds-flick.js; his pictures: flick-art.js (public/assets/flick). Earlier records (Spoolie, whose places and rules he
   keeps): SPOOLIE-2026-10-08, SPOOLIE-2026-10-09b, NIGHT-2026-10-10, VOICE-2026-10-13.
   Motion: transform and opacity only. He pops in on the motion spring when he first arrives on a page, wiggles once the
   first time he meets someone, and where he is the screen's one living thing (.is-alive, set by ds-flick.js) he breathes
   slowly and blinks now and then. Paused off screen (.mo-off) and in the background; still under Reduce Motion (the
   system setting, the app's switch, the "reduced" tier) and Low Power. Type is the app's ramp, so it grows with the text
   size. Under ?ds=0 the layer draws nothing. */

/* ===== his picture (flick-art.js): a square, the picture and, over it, the same square with only his eyes shut */
html.ds .flk { position: relative; display: block; width: 100%; aspect-ratio: 1; flex: 0 0 auto; transform-origin: 50% 92%; }
html.ds .flk-body { position: absolute; inset: 0; display: block; transform-origin: 50% 94%; }
html.ds :is(.flk-img, .flk-lids) {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: contain;
  pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none;
}
html.ds .flk-lids { opacity: 0; }

/* ===== alive (only where he is the screen's one living thing): a slow breath, and a blink now and then (once, once,
   then twice in quick succession, over 9.4 s; each picture of him starts at its own moment, --flk-phase) */
html.ds .flk.is-alive > .flk-body { animation: flk-breathe 4.4s var(--motion-breathe) var(--flk-phase, 0s) infinite; }
html.ds .flk.is-alive > .flk-body > .flk-lids { animation: flk-blink 9.4s linear var(--flk-phase, 0s) infinite; }
@keyframes flk-breathe { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-1.4%) scale(1.006, 1.014); } }
@keyframes flk-blink {
  0%, 14%, 15.6%, 52%, 53.6%, 86%, 87.6%, 89.6%, 91.2%, 100% { opacity: 0; }
  14.3%, 15.3%, 52.3%, 53.3%, 86.3%, 87.3%, 89.9%, 90.9% { opacity: 1; }
}

/* ===== arriving: a pop onto the page on the motion spring; the first meeting: the pop and a little wiggle */
html.ds .is-arriving .flk:not(.is-hello), html.ds .flk.is-arriving { animation: flk-pop var(--motion-slow) var(--motion-spring) both; }
html.ds .flk.is-hello { animation: flk-hello var(--motion-ceremony) var(--motion-curve) both; }
html.ds .flk.is-swapping { animation: flk-swap var(--motion-normal) var(--motion-spring) both; }
@keyframes flk-pop { 0% { opacity: 0; transform: translateY(8%) scale(.84); } 100% { opacity: 1; transform: none; } }
@keyframes flk-hello {
  0% { opacity: 0; transform: translateY(8%) scale(.84); } 30% { opacity: 1; transform: none; }
  42% { transform: rotate(-7deg); } 54% { transform: rotate(6deg); } 66% { transform: rotate(-4deg); } 78% { transform: rotate(2deg); } 90%, 100% { opacity: 1; transform: none; }
}
@keyframes flk-swap { 0% { transform: scale(.93); } 100% { transform: none; } }

/* ===== still: Reduce Motion (system or the app's switch), the "reduced" tier and Low Power; paused in the background */
@media (prefers-reduced-motion: reduce) {
  html.ds .flk, html.ds .flk * { animation: none !important; transition: none !important; }
  html.ds .flk-lids { display: none; }
}
html.ds #device.manual-reduced-motion :is(.flk, .flk *), html.ds[data-motion-tier="reduced"] :is(.flk, .flk *), html.ds #device[data-motion-tier="reduced"] :is(.flk, .flk *),
html.ds.reduce-motion :is(.flk, .flk *), html.ds.mo-low-power :is(.flk, .flk *) { animation: none !important; transition: none !important; }
html.ds #device.manual-reduced-motion .flk-lids, html.ds[data-motion-tier="reduced"] .flk-lids, html.ds.reduce-motion .flk-lids, html.ds.mo-low-power .flk-lids { display: none; }
html.ds.cg-paused :is(.flk, .flk *) { animation-play-state: paused !important; }

/* ======================================================================================================================
   PART 1. IN COSTUME, IN A FEW QUIET PLACES (the foot of Settings, the foot of About, an empty Watchlist) */
html.ds #device .spc {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 36px auto 4px; padding: 0 var(--gutter, 20px); box-sizing: border-box; max-width: 100%;
  pointer-events: none; -webkit-user-select: none; user-select: none;
}
html.ds #device .spc-at-about { margin: 28px auto 20px; }
/* iPhone Duo, vertical fold: ds-flick.js sets --spc-dx so he stands on the leaf right of the hinge, never in it */
html.ds #device .spc > :is(.spc-art, .spc-caption) { translate: var(--spc-dx, 0) 0; }
html.ds #device .library-empty.spc-host > .spc { margin: 0 auto; padding: 0; }
html.ds .spc-art { position: relative; display: block; width: 112px; aspect-ratio: 1; flex: 0 0 auto; }
html.ds #device .spc-at-watchlist .spc-art { width: 120px; }
html.ds #device .spc-at-about .spc-art { width: 100px; }
html.ds .spc-art > .spc-pool {
  position: absolute; left: 50%; bottom: 0; width: 130%; height: 26%; translate: -50% 22%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--spc-pool), var(--spc-pool-edge));
}
html.ds .spc-caption {
  margin: 0; max-width: 30ch; text-align: center; text-wrap: balance;
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: 0; color: var(--c-label-3);
}
/* his line on an empty Watchlist and, after midnight, at the foot of Settings: a bubble above him (lane VOICE) */
html.ds #device .spc > .sps-badge { translate: var(--spc-dx, 0) 0; margin-top: -2px; }
html.ds #device .spc > .sps-bubble { margin-bottom: 6px; translate: var(--spc-dx, 0) 0; }

/* ======================================================================================================================
   PART 2. FLICK THE MASCOT: empty states, first-time notes, the tour, celebrations, the wait, his name */

/* ===== his picture: four sizes (the box is square; his pictures stand on its floor) */
html.ds .sps-art { position: relative; display: block; flex: 0 0 auto; aspect-ratio: 1; width: 100px; }
html.ds .sps-art.sps-md { width: 80px; }
html.ds .sps-art.sps-sm { width: 56px; }
html.ds .sps-art.sps-xs { width: 36px; }
html.ds .sps-art > .flk { width: 100%; }
/* (iPhone QA, 5 November 2026) a picture of him that could not be fetched (offline): he steps away, his words stay, with no tail
   pointing at an empty place (ds-flick.js marks .flk-missing) */
html.ds .sps-me:has(.flk-missing), html.ds .sps-art:has(.flk-missing) { display: none; }
html.ds :is(.sps, .spc, .sps-speech, .sps-tip):has(.flk-missing) > .sps-bubble::before { display: none; }

/* ===== HOW HE SPEAKS (owner, 11 October 2026; lane VOICE): speech bubbles with a tail pointing at him; no printed
   quote marks (the bubble already says he said it).
   - .sps-me: him, with his badge under him (none on the very first meeting, when he says his name instead).
   - .sps-badge: FLICK in the app's label style (the eyebrow: uppercase, tracked, semibold), a small pill.
   - .sps-bubble: a speech bubble, opaque, with a tail (a turned square that shares its fill and border) pointing at
     him: left where he stands beside it, down where he stands under it, up where he stands above it.
   - .sps-say: his words, in the app's type ramp, so they grow with the text size. Nothing here moves. */
html.ds .sps-me { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; min-width: 0; }
html.ds .sps-badge {
  display: inline-block; box-sizing: border-box; max-width: 100%; margin: 0; padding: 1px 7px 0; border-radius: var(--r-pill); white-space: nowrap;
  font: var(--fw-eyebrow) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--c-seal-hi); background: color-mix(in srgb, var(--c-seal) 16%, var(--c-stage-raised)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-seal) 34%, transparent);
}
html.ds .sps-bubble {
  --sps-bubble: color-mix(in srgb, var(--c-label-1) 9%, var(--c-stage-raised));
  position: relative; display: block; box-sizing: border-box; min-width: 0; max-width: 100%; margin: 0; padding: 9px 14px 10px;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-card); background: var(--sps-bubble); color: var(--c-label-1); text-align: left;
}
html.ds .sps-bubble::before {
  content: ""; position: absolute; width: 12px; height: 12px; box-sizing: border-box; pointer-events: none;
  background: var(--sps-bubble); border: 1px solid var(--c-line-strong); border-top-color: transparent; border-right-color: transparent;
  /* default: pointing left, at him beside it */
  left: -7px; top: 50%; margin-top: -6px; transform: rotate(45deg);
}
html.ds .sps-say {
  display: block; margin: 0; text-wrap: pretty; color: inherit;
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead);
}
/* his introduction (once ever, the owner's words): its own paragraph, the line he came to say under it */
html.ds .sps-hello { display: block; margin: 0 0 4px; font-weight: 600; color: var(--c-label-1); }

/* ===== an empty state: he stands where the glyph was, his bubble above him (its tail down at him); the page's own
   words and action stay under him */
html.ds #device .sps { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 auto 14px; padding: 0; max-width: 100%; box-sizing: border-box; pointer-events: none; -webkit-user-select: none; user-select: none; }
html.ds #device .sps > .sps-me, html.ds #device .sps > .sps-bubble { translate: var(--spc-dx, 0) 0; }
html.ds #device .sps > .sps-bubble, html.ds #device .spc > .sps-bubble { order: -1; max-width: min(100%, 30ch); text-align: center; }
html.ds #device .sps > .sps-bubble > .sps-say, html.ds #device .spc > .sps-bubble > .sps-say { text-wrap: balance; }
html.ds #device :is(.sps, .spc) > .sps-bubble::before { left: 50%; top: auto; bottom: -7px; margin: 0 0 0 -6px; transform: rotate(-45deg); }
html.ds #device .sps.sps-inline { margin: 4px auto 10px; }
html.ds #device .sps.sps-inline .sps-art { width: 68px; }
html.ds #device .sps.is-arriving > .sps-bubble { animation: sps-in var(--motion-normal) var(--motion-curve) 120ms both; }
/* a page that had the TRIPTIC mark at its head (offline, an error, no full three): he stands in the mark's place */
html.ds #device .system-state-screen > .sps { margin: max(56px, calc(env(safe-area-inset-top, 0px) + 44px)) auto 18px; }
html.ds #device .clarify-screen > .sps { margin: 0 auto 18px; }
/* (13 November 2026, small fixes follow-up) "Search isn't available just now." on a short phone (SE, 320x568), up to x1.35 text:
   "Try again" stands wholly on the screen, unscrolled. The words are fitted, the button is not touched: Flick stands BESIDE his
   line (his tail points at him, as everywhere else he stands beside it), smaller; the eyebrow "Your words are still here" is
   left out (the request itself is quoted just under, and the note under the button says the search waits for you); the quoted
   request keeps two lines. */
/* (final review fix round 2, item 9, 14 November 2026) the same fit for the other pages a failed search ends on: 502 ("We couldn't
   make your three just now.", data-recovery "unknown"), the timeout and the busy moment ("A BUSY MOMENT" says again what its heading
   says). Checked with today's limit and the 503 page in tests/recovery-pages-fit-browser.test.mjs. */
@media (max-height: 700px) {
  html.ds #device .recommendation-recovery:is([data-recovery="unavailable"], [data-recovery="unknown"], [data-recovery="timeout"], [data-recovery="busy"]) > .sps { flex-direction: row; align-items: center; gap: 10px; margin: max(52px, calc(env(safe-area-inset-top, 0px) + 44px)) auto 6px; }
  html.ds #device .recommendation-recovery:is([data-recovery="unavailable"], [data-recovery="unknown"], [data-recovery="timeout"], [data-recovery="busy"]) > .sps > .sps-bubble { order: 1; max-width: min(100%, 26ch); text-align: left; }
  html.ds #device .recommendation-recovery:is([data-recovery="unavailable"], [data-recovery="unknown"], [data-recovery="timeout"], [data-recovery="busy"]) > .sps > .sps-bubble::before { left: -7px; top: 50%; bottom: auto; margin: -6px 0 0; transform: rotate(45deg); }
  html.ds #device .recommendation-recovery:is([data-recovery="unavailable"], [data-recovery="unknown"], [data-recovery="timeout"], [data-recovery="busy"]) > .sps .sps-art { width: 56px; }
  html.ds #device .recommendation-recovery:is([data-recovery="unavailable"], [data-recovery="unknown"], [data-recovery="timeout"], [data-recovery="busy"]) > .eyebrow { display: none; }
  html.ds #device .recommendation-recovery:is([data-recovery="unavailable"], [data-recovery="unknown"], [data-recovery="timeout"], [data-recovery="busy"]) > h1 { margin: 8px 0 !important; }
  html.ds #device .recommendation-recovery:is([data-recovery="unavailable"], [data-recovery="unknown"], [data-recovery="timeout"], [data-recovery="busy"]) > .recommendation-preserved-query { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 12px 0 !important; padding: 10px 14px !important; }
}
/* ...and on the shortest phone (320 x 568) at x1.35, where the 502 and timeout pages carry a sentence of two lines (the 503 page's is
   one): Flick's line starts a little higher (still well clear of the round close control) and the quoted request is a little
   tighter, so "Try again" stays wholly on screen */
@media (max-height: 600px) {
  html.ds #device .recommendation-recovery:is([data-recovery="unavailable"], [data-recovery="unknown"], [data-recovery="timeout"], [data-recovery="busy"]) > .sps { margin-top: max(34px, calc(env(safe-area-inset-top, 0px) + 28px)); }
  html.ds #device .recommendation-recovery:is([data-recovery="unavailable"], [data-recovery="unknown"], [data-recovery="timeout"], [data-recovery="busy"]) > .recommendation-preserved-query { margin: 10px 0 !important; padding: 8px 14px !important; }
}

/* ===== a first-time note in his voice: him (badge under him) beside a bubble of his words, its tail pointing at him;
   dismissible from inside the bubble, once */
html.ds #device .sps-tip, html.ds .yc .sps-tip {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px;
  margin: 12px 0; padding: 0; box-sizing: border-box; max-width: 100%;
}
html.ds .yc .sps-tip { margin: 0 0 14px; }
html.ds #device .ds-tt-scroll > .sps-tip { margin: 16px var(--gutter, 20px) 4px; max-width: calc(100% - 2 * var(--gutter, 20px)); }
html.ds .sps-tip > .sps-bubble { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 2px; padding-right: 4px; }
html.ds .sps-x {
  appearance: none; align-self: start; display: grid; place-items: center; width: 36px; height: 36px; margin: -6px -2px -6px 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--c-label-3); cursor: pointer;
}
html.ds .sps-x svg { stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none; }
html.ds .sps-x:focus-visible { outline: 2px solid var(--c-label-1); outline-offset: -4px; }
html.ds :is(.sps-tip, .sps-intro, .sps-cheer).is-arriving > .sps-bubble { animation: sps-in var(--motion-normal) var(--motion-curve) 120ms both; }

/* ===== his introduction, on the first page of the tour: he stands at the demo's corner and says his name */
html.ds .ds-fr-win-wrap:has(> .sps-intro) { position: relative; }
html.ds .sps-intro {
  position: absolute; z-index: 3; left: 4px; bottom: -14px; display: flex; align-items: flex-end; gap: 10px; max-width: calc(100% - 8px);
  pointer-events: none;
}
html.ds .sps-intro > .sps-bubble { margin: 0 0 18px; max-width: 30ch; box-shadow: var(--e-2); }
html.ds .sps-intro > .sps-bubble::before { top: auto; bottom: 12px; margin: 0; }
html.ds .sps-intro-say { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }

/* ===== a celebration: one small capsule at the top, a few seconds, then gone (where the film cards' capsule shows) */
html.ds #device > .sps-cheer {
  position: absolute; z-index: 296; top: max(14px, calc(env(safe-area-inset-top, 0px) + 8px));
  left: calc(var(--sps-left, 0px) + (100% - var(--sps-left, 0px)) / 2); translate: -50% 0;
  display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: max-content; max-width: calc(100% - var(--sps-left, 0px) - 32px);
  margin: 0; padding: 0; pointer-events: none;
}
html.ds #device > .sps-cheer .sps-art { width: 44px; }
html.ds #device > .sps-cheer > .sps-bubble { box-shadow: var(--e-2); }

/* ===== PART 3, his asides (20 October 2026): now and then he peeks up above the tab bar beside a bubble of a joke. The
   whole note is one touch target (a touch or a swipe sends it away); its close button is a 44-point target. It takes the
   finger's drag (touch-action: none, so a swipe on it never scrolls the page under it); he arrives on the spring */
html.ds #device > .sps-aside {
  position: absolute; z-index: 296; left: calc(var(--sps-left, 0px) + 12px); right: 12px;
  bottom: var(--sps-aside-bottom, max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px)));
  display: flex; align-items: flex-end; gap: 4px; box-sizing: border-box; max-width: calc(100% - var(--sps-left, 0px) - 24px);
  margin: 0 auto; padding: 0; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
html.ds #device > .sps-aside > .sps-aside-live { display: flex; align-items: flex-end; gap: 10px; flex: 1 1 auto; min-width: 0; }
html.ds #device > .sps-aside .sps-art { width: 64px; }
html.ds #device > .sps-aside .sps-bubble { flex: 1 1 auto; margin: 0 0 22px; box-shadow: var(--e-2); }
html.ds #device > .sps-aside .sps-bubble::before { top: auto; bottom: 14px; margin: 0; }
html.ds #device > .sps-aside .sps-aside-say { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds #device > .sps-aside > .sps-aside-x {
  flex: none; align-self: flex-start; width: 44px; height: 44px; margin: -14px -8px 0 -6px; border-radius: 50%;
  background: color-mix(in srgb, var(--c-label-1) 9%, var(--c-stage-raised)); box-shadow: inset 0 0 0 1px var(--c-line-strong);
}
html.ds #device > .sps-aside.is-held .sps-bubble { scale: .985; }
html.ds #device > .sps-aside.is-pending { opacity: 0; }
html.ds #device > .sps-aside.is-arriving { animation: sps-peek var(--motion-slow) var(--motion-spring) both; }
html.ds #device > .sps-aside.is-arriving .sps-bubble { animation: sps-in var(--motion-normal) var(--motion-curve) 180ms both; }
@keyframes sps-peek { 0% { opacity: 0; transform: translateY(24px) scale(.96); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.ds #device > .sps-aside, html.ds #device > .sps-aside * { animation: none !important; transition: none !important; } }
html.ds #device.manual-reduced-motion > .sps-aside, html.ds #device.manual-reduced-motion > .sps-aside *,
html.ds[data-motion-tier="reduced"] #device > .sps-aside, html.ds[data-motion-tier="reduced"] #device > .sps-aside * { animation: none !important; transition: none !important; }

/* ===== the wait: a small, still Flick just above the "Did you know?" fact (he goes when the fact goes) */
html.ds #device .sp-fact > .sps-wait { position: absolute; left: 50%; top: 0; translate: -50% calc(-100% - 6px); display: block; opacity: .94; pointer-events: none; }
html.ds #device .sp-fact > .sps-wait > .sps-art { width: 34px; }

/* ===== the quick look and the widget and Siri tips: he points the way */
html.ds .first-use-body > .sps-guide, html.ds .ft-body > .sps-find { margin: 0 0 6px; }
html.ds .ft-page > .sps-find { display: flex; width: max-content; margin: 4px auto 0; }

/* ===== a solved Cryptic: one line from him under the result's headline (the game's own celebration comes first); the
   game's cheering Flick stands to the left of it, so his badge leads and the bubble's tail points back at him */
html.ds .cg-result .sps-line { display: grid; justify-items: start; gap: 6px; margin: 10px 0 0; }
html.ds .cg-result .sps-line > .sps-bubble { margin-left: 7px; }
html.ds .cg-result .sps-line > .sps-bubble::before { top: 14px; margin: 0; }
html.ds .cg-result .sps-line .sps-say { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds .cg-result .sps-line.is-late { animation: sps-in var(--motion-normal) var(--motion-curve) 1600ms both; }

/* his words arriving */
@keyframes sps-in { 0% { opacity: 0; transform: translateY(6px) scale(.98); } 100% { opacity: 1; transform: none; } }
/* ===== still: Reduce Motion (system or the app's switch) and the "reduced" tier */
@media (prefers-reduced-motion: reduce) {
  html.ds :is(.sps-art, .sps-tip, .sps-intro, .sps-cheer, .sps-line, .sps-bubble), html.ds .sps-art * { animation: none !important; transition: none !important; }
}
html.ds #device.manual-reduced-motion :is(.sps-art, .sps-tip, .sps-intro, .sps-cheer, .sps-line, .sps-bubble), html.ds #device.manual-reduced-motion .sps-art *,
html.ds[data-motion-tier="reduced"] :is(.sps-art, .sps-tip, .sps-intro, .sps-cheer, .sps-line, .sps-bubble), html.ds[data-motion-tier="reduced"] .sps-art * { animation: none !important; transition: none !important; }

/* Today: nothing of his while the electric Friday card is awake (it is Today's living thing then; ds-flick.js also
   leaves him still, but the card can wake while he is up) */
html.ds #device > .screen.ds-today:has(.dt-fri-hero.is-awake) :is(.flk, .flk *) { animation: none !important; }

/* ===== prototype-src/flick-tour.css ===== */
/* TRIPTIC flick-tour: the card that introduces Flick beside the first three and offers the tour, and the tour's three cards
   (lane ONBOARD, 15 October 2026; behaviour in flick-tour.js, record hub/docs/ONBOARD-2026-10-15.md).
   One material: the frosted glass of the app's sheets (solid under Reduce Transparency). One bright thing: the primary button.
   Motion: transform and opacity only, from the motion tokens; nothing moves of its own accord (arrival and the change between
   cards only). Reduce Motion: nothing moves, nothing fades. Largest text: the card scrolls inside its own height, the buttons
   stack. Duo inner display: the card stands on the right-hand leaf (--fto-left is the fold's right edge). Wide displays: centred. */

/* ===== the stage: over the device, below its status bar; the offer leaves the three above it in view, the tour dims the page */
html.ds .fto {
  position: absolute; inset: 0; z-index: 310; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 var(--gutter, 20px) max(16px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  padding-left: calc(var(--fto-left, 0px) + var(--gutter, 20px));
  pointer-events: none;
}
html.ds .fto.fto-fixed { position: fixed; }   /* on an opened iPhone Duo the three is on the page's own stage, above the device: the card is on the page too */
html.ds .fto::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* the offer: only a soft pool of dark at the foot, so the three stays in view above the card */
html.ds .fto-offer::before { background: linear-gradient(to top, rgb(5 5 9 / .78), rgb(5 5 9 / .5) 38%, rgb(5 5 9 / 0) 68%); }
html.ds .fto-offer { pointer-events: none; }
/* the tour: the page behind is dimmed and cannot be reached (it is inert) */
html.ds .fto-tour { pointer-events: auto; align-items: center; }
html.ds .fto-tour::before { background: rgb(5 5 9 / .72); }

/* ===== the card: glass */
html.ds .fto-card {
  position: relative; box-sizing: border-box; width: min(100%, 440px); max-height: calc(100% - max(24px, calc(env(safe-area-inset-top, 0px) + 16px)));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  display: grid; gap: 14px; padding: 18px 18px 14px; pointer-events: auto;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sheet);
  background: color-mix(in srgb, var(--c-stage-raised) 74%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(138%); backdrop-filter: blur(24px) saturate(138%);
  box-shadow: var(--e-2), inset 0 1px 0 rgb(255 255 255 / .1);
  color: var(--c-label-1); text-align: left;
}
html.ds .fto-card::-webkit-scrollbar { display: none; }
html.ds #device.manual-solid .fto-card, html.ds .fto.manual-solid .fto-card, html.ds.reduce-transparency .fto-card { background: var(--mat-chrome-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) { html.ds .fto-card { background: var(--mat-chrome-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }
html.ds .fto-card:focus { outline: none; }
html.ds .fto-card :is(button, .fto-title):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
@media (min-width: 600px) { html.ds .fto { align-items: center; } html.ds .fto-card { width: min(100%, 420px); } }

/* ===== Flick and his words: him (badge under him) beside a bubble, its tail pointing at him (ds-flick.css) */
html.ds .fto-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; min-width: 0; }
html.ds .fto-row > .sps-me { margin-top: 2px; }
html.ds .fto-row .sps-art { width: 52px; }
html.ds .fto-bubble { display: grid; gap: 7px; align-content: start; padding: 10px 14px 11px; }
html.ds .fto-bubble::before { top: 22px; margin-top: 0; }
html.ds .fto-say { font: var(--fw-footnote) calc(14 * var(--type-unit, 1))/calc(19.5 * var(--type-unit, 1)) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds .fto-say .sps-hello, html.ds .fto-say.sps-say > .sps-hello { margin: 0 0 6px; font-weight: 600; }
html.ds .fto-more { color: var(--c-label-2); }

/* ===== the buttons: one bright thing (the lamp), one quiet */
html.ds .fto-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; margin: 0; }
html.ds .fto-go, html.ds .fto-later { min-height: 44px; border: 0; cursor: pointer; touch-action: manipulation; font: 600 calc(15 * var(--type-unit, 1))/calc(20 * var(--type-unit, 1)) var(--font-ui); letter-spacing: var(--tr-subhead); -webkit-tap-highlight-color: transparent; }
html.ds .fto-go { flex: 1 1 128px; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); background: var(--c-lamp); color: var(--c-lamp-ink); }
html.ds .fto-later { flex: 0 1 auto; padding: 0 12px; background: none; color: var(--c-label-2); font-weight: 400; }
html.ds .fto-later[hidden] { display: none; }
html.ds .fto-back { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(255 255 255 / .08); color: var(--c-label-1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
html.ds .fto-back[hidden] { display: none; }
html.ds .fto-offer .fto-go { flex: 0 1 auto; }

/* ===== the tour: steps stacked in one cell, one showing. (iPhone QA 2, 5 November 2026; the owner) the card fits the step on show:
   the others lie over it without taking room (a short step left a band of empty glass when the card was as tall as the tallest);
   flick-tour.js eases the card's height from one step to the next (none under Reduce Motion) and clips while it does. */
html.ds .fto-steps { display: grid; position: relative; }
html.ds .fto-steps.is-sizing { overflow: hidden; }
html.ds .fto-step:not(.is-current) { position: absolute; left: 0; right: 0; top: 0; }
html.ds .fto-step {
  grid-area: 1 / 1; display: grid; gap: 14px; align-content: start; min-width: 0;
  opacity: 0; visibility: hidden; transform: translateX(16px);
  transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-curve), visibility 0s linear var(--motion-normal);
}
html.ds .fto-step.is-past { transform: translateX(-16px); }
html.ds .fto-step.is-current { opacity: 1; visibility: visible; transform: none; transition-delay: 0s, 0s, 0s; }
html.ds .fto-dots { display: flex; justify-content: center; gap: 6px; margin: -4px 0 -2px; }
html.ds .fto-dots > i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-fill-3, rgb(255 255 255 / .22)); }
html.ds .fto-dots > i.is-on { background: var(--c-lamp); }
html.ds .fto-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
html.ds .fto-title { margin: 0; font: 600 calc(17 * var(--type-unit, 1))/calc(22 * var(--type-unit, 1)) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1); }
html.ds .fto-count { font: var(--fw-eyebrow) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-label-3); white-space: nowrap; }

/* ===== the pictures: the app's own (no new photography) */
html.ds .fto-pic { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 34vh; border-radius: 18px; overflow: hidden; contain: paint; background: #0a0a10; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
html.ds .fto-pic img { display: block; -webkit-user-drag: none; user-select: none; }
html.ds .fto-poster { position: absolute; bottom: -6%; height: 88%; width: auto; aspect-ratio: 2 / 3; border-radius: 8px; box-shadow: 0 10px 26px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .12); object-fit: cover; }
/* Friday 3: three posters, the middle one forward, in a pool of violet light */
html.ds .fto-pic-friday3 { background: radial-gradient(90% 100% at 50% 100%, rgb(139 92 246 / .55), rgb(60 40 130 / .28) 52%, #0a0a10 86%); }
html.ds .fto-pic-friday3 .fto-poster { left: 50%; }
html.ds .fto-pic-friday3 .is-c { height: 96%; bottom: -2%; transform: translateX(-50%); z-index: 2; }
html.ds .fto-pic-friday3 .is-l { transform: translateX(-122%) rotate(-7deg); transform-origin: 50% 100%; opacity: .92; }
html.ds .fto-pic-friday3 .is-r { transform: translateX(22%) rotate(7deg); transform-origin: 50% 100%; opacity: .92; }
/* the Daily Cryptic and the week's card: the film card's own preview picture */
html.ds .fto-pic-cryptic .fto-card-img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }
/* Film DNA, Collections and the Universe: a row of posters under a colour field */
html.ds .fto-pic-dna { background: #0a0a10; }
html.ds .fto-field { position: absolute; inset: 0; background: radial-gradient(120% 90% at 22% 0%, rgb(84 106 255 / .62), rgb(88 52 200 / .34) 46%, transparent 78%), radial-gradient(80% 70% at 100% 100%, rgb(36 150 190 / .3), transparent 70%); }
html.ds .fto-pic-dna .fto-poster { height: 82%; bottom: -10%; }
html.ds .fto-pic-dna .is-1 { left: 3%; transform: rotate(-4deg); }
html.ds .fto-pic-dna .is-2 { left: 21%; }
html.ds .fto-pic-dna .is-3 { left: 39%; bottom: -4%; z-index: 2; height: 90%; }
html.ds .fto-pic-dna .is-4 { left: 57%; }
html.ds .fto-pic-dna .is-5 { left: 75%; transform: rotate(4deg); }

/* ===== arriving: up from below, once */
@keyframes fto-in { 0% { opacity: 0; transform: translateY(18px) scale(.985); } 100% { opacity: 1; transform: none; } }
@keyframes fto-fade { from { opacity: 0; } to { opacity: 1; } }
html.ds .fto.is-arriving > .fto-card { animation: fto-in var(--motion-slow) var(--motion-curve) both; }
html.ds .fto-tour.is-arriving::before { animation: fto-fade var(--motion-normal) var(--motion-curve) both; }

/* ===== Duo inner display: the card is on the right-hand leaf; a wide display centres it ===== */
html.ds .fto .fto-pic { max-height: calc(30vh / var(--type-unit, 1)); }

/* ===== largest text: the buttons stack, the picture gives way ===== */
html.ds[data-text-size]:not([data-text-size="standard"]) .fto-acts { flex-direction: column-reverse; align-items: stretch; }
html.ds[data-text-size]:not([data-text-size="standard"]) .fto-later { align-self: center; }
html.ds[data-text-size]:not([data-text-size="standard"]) .fto-go, html.ds[data-text-size]:not([data-text-size="standard"]) .fto-offer .fto-go { flex: 0 0 auto; width: 100%; }
html.ds .fto-pic { max-height: calc(34vh / var(--type-unit, 1)); }

/* ===== still: Reduce Motion (system or the app's switch) and the "reduced" tier: nothing moves, nothing fades ===== */
@media (prefers-reduced-motion: reduce) {
  html.ds .fto-step, html.ds .fto-step.is-current, html.ds .fto-step.is-past { transition: none !important; transform: none !important; }
  html.ds .fto.is-arriving > .fto-card, html.ds .fto-tour.is-arriving::before { animation: none !important; }
}
html.ds #device.manual-reduced-motion :is(.fto-step, .fto-step.is-current, .fto-step.is-past), html.ds .fto.manual-reduced-motion :is(.fto-step, .fto-step.is-current, .fto-step.is-past), html.ds[data-motion-tier="reduced"] :is(.fto-step, .fto-step.is-current, .fto-step.is-past) { transition: none !important; transform: none !important; }
html.ds #device.manual-reduced-motion :is(.fto.is-arriving > .fto-card, .fto-tour.is-arriving::before), html.ds .fto.manual-reduced-motion.is-arriving > .fto-card, html.ds .fto.manual-reduced-motion.fto-tour.is-arriving::before, html.ds[data-motion-tier="reduced"] :is(.fto.is-arriving > .fto-card, .fto-tour.is-arriving::before) { animation: none !important; }

/* ===================================================================================================================
   THE PICTURES ARE SHORT FILMS (16 October 2026, the owner: "in each box where the picture would have been we see an
   example video of someone using what Flick is talking about and what happens ... actual movement within the onboarding
   screens so it is really clear what everything is or does"). Five loops, each a few seconds, built from the app's own
   pieces, with a fingertip (.fto-touch) showing the touch. Each runs only on the card being shown (the animations are named
   under .is-current, so a card starts its film from the beginning when it arrives); a thin bar across the top fills with
   each loop, so it reads as a film. Transform and opacity only. Reduce Motion: no film; each picture stands at its last
   frame, which tells the same story. The tour's one living thing is the film on the card being shown. */
html.ds .fto-demo {
  --fto-loop: 7.2s;
  container-type: size; isolation: isolate; perspective: 900px;
  background:
    radial-gradient(70% 90% at 50% 120%, rgb(139 92 246 / .42), transparent 70%),
    radial-gradient(60% 70% at 0% 0%, rgb(84 106 255 / .22), transparent 70%),
    linear-gradient(180deg, #14121f, #0a0a10);
}
html.ds .fto-demo::after {   /* the film's progress, across the top */
  content: ""; position: absolute; left: 10px; right: 10px; top: 8px; height: 2px; border-radius: 2px; z-index: 9;
  background: linear-gradient(90deg, rgb(255 255 255 / .85), rgb(196 181 253 / .85)); transform-origin: 0 50%; transform: scaleX(1); opacity: .5;
}
html.ds .fto-demo::before {  /* the track the bar runs in */
  content: ""; position: absolute; left: 10px; right: 10px; top: 8px; height: 2px; border-radius: 2px; z-index: 8; background: rgb(255 255 255 / .14);
}
html.ds .fto-step.is-current .fto-demo::after { animation: fto-progress var(--fto-loop) linear infinite; }
@keyframes fto-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html.ds .fto-demo img { pointer-events: none; }
html.ds .fto-demo .is-flat { position: static; display: block; width: 100%; height: 100%; aspect-ratio: auto; border-radius: inherit; box-shadow: none; object-fit: cover; }
html.ds .fto-chip {
  position: absolute; left: 50%; top: 9cqh; z-index: 4; translate: -50% 0; padding: 4px 10px; border-radius: 999px;
  background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); color: #ede9fe;
  font: 700 calc(9.5 * var(--type-unit, 1px))/1.2 var(--font-ui); letter-spacing: .14em; white-space: nowrap;
}
/* the fingertip: a soft disc with a ring that presses */
html.ds .fto-touch {
  position: absolute; left: 0; top: 0; z-index: 7; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / .55), rgb(255 255 255 / .22) 60%, rgb(255 255 255 / .08));
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .75), 0 6px 14px -4px rgb(0 0 0 / .6); opacity: 0;
}

/* ---- 1. Friday 3: three sealed cards; a touch; they turn over one after another ---- */
html.ds .fto-demo-friday3 { --fto-loop: 6.6s; }
html.ds .fto-f3-row { position: absolute; left: 50%; bottom: 7cqh; translate: -50% 0; display: flex; gap: 3.2cqw; transform-style: preserve-3d; }
html.ds .fto-f3 { position: relative; width: 22cqw; aspect-ratio: 2 / 3; transform-style: preserve-3d; transform: rotateY(180deg); }
html.ds .fto-f3.is-2 { width: 25cqw; translate: 0 -3cqh; }
html.ds .fto-f3 > span { position: absolute; inset: 0; border-radius: 9px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 14px 24px -12px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(255 255 255 / .14); }
html.ds .fto-f3-back {
  display: flex; align-items: flex-end; justify-content: center; gap: 6%; padding-bottom: 32%;
  background: radial-gradient(80% 60% at 50% 30%, rgb(167 139 250 / .55), transparent 70%), linear-gradient(160deg, #3b2a7a, #171033);
}
html.ds .fto-f3-back > i { width: 16%; height: 30%; border-radius: 999px 999px 3px 3px; box-shadow: inset 0 0 0 1.5px rgb(237 233 254 / .8); }
html.ds .fto-f3-back > i:nth-child(2) { height: 40%; }
html.ds .fto-f3-front { transform: rotateY(180deg); }
html.ds .fto-step.is-current .fto-f3 { animation: fto-turn var(--fto-loop) var(--motion-curve) infinite; }
html.ds .fto-step.is-current .fto-f3.is-2 { animation-delay: .3s; }
html.ds .fto-step.is-current .fto-f3.is-3 { animation-delay: .6s; }
@keyframes fto-turn { 0%, 22% { transform: rotateY(0deg); } 34%, 86% { transform: rotateY(180deg); } 96%, 100% { transform: rotateY(0deg); } }
html.ds .fto-step.is-current .fto-demo-friday3 .fto-touch { animation: fto-touch-f3 var(--fto-loop) var(--motion-curve) infinite; }
@keyframes fto-touch-f3 {
  0% { opacity: 0; transform: translate(62cqw, 80cqh) scale(1); }
  10% { opacity: 1; transform: translate(52cqw, 58cqh) scale(1); }
  16% { opacity: 1; transform: translate(50cqw, 56cqh) scale(.72); }
  21% { opacity: 1; transform: translate(50cqw, 56cqh) scale(1); }
  30%, 100% { opacity: 0; transform: translate(56cqw, 70cqh) scale(1); }
}

/* ---- 2. the Commute Corner (17 October 2026: the games room behind one ticket on Today; commute-corner.css): the ADMIT ONE
   ticket is touched, its stub tears, the cinema doors part on the foyer, and the marquee's bulbs light a quarter at a time
   over the four screens, each screen's stub turning gold with its quarter. The still frame (Reduce Motion, Low Power) is the
   last one: the foyer with the marquee all lit and the four stubs gold. One rhythm: every part runs on the one loop. ---- */
html.ds .fto-demo-cryptic { --fto-loop: 9s; --cc-brass: #d9b46a; --cc-paper: #f4e8d6; }
/* the foyer: the marquee's warm light on a striped wine-dark wall */
html.ds .fto-cc-room {
  position: absolute; inset: 0; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 6cqh; padding: 12cqh 6cqw 0;
  background: radial-gradient(70% 40% at 50% 14%, rgb(255 196 110 / .22), rgb(255 196 110 / 0) 100%), repeating-linear-gradient(90deg, rgb(255 225 200 / .03) 0 8px, rgb(255 225 200 / 0) 8px 16px), linear-gradient(180deg, #1c0a10, #22090f 50%, #120507);
}
/* the marquee: the name on a lit board between two rows of bulbs (eight above, eight below: a quarter is four, going round) */
html.ds .fto-cc-sign { display: grid; gap: 3px; padding: 4px 6px; border-radius: 6px; background: linear-gradient(180deg, #33101a, #1c070c); box-shadow: 0 8px 14px -8px rgb(0 0 0 / .9), inset 0 0 0 1px rgb(217 180 106 / .55); }
html.ds .fto-cc-bulbs { display: flex; justify-content: space-between; gap: 3px; }
html.ds .fto-cc-q { display: flex; gap: 3px; }
html.ds .fto-cc-q > i { position: relative; width: 5px; height: 5px; border-radius: 50%; background: rgb(255 230 190 / .12); box-shadow: inset 0 0 0 1px rgb(255 230 190 / .2); }
html.ds .fto-cc-q > i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 36%, #fff 0 22%, #ffe08a 52%, #f0a830 100%); box-shadow: 0 0 5px 1px rgb(255 192 84 / .7); }
html.ds .fto-cc-board { padding: 3px 7px 2px; border-radius: 3px; background: linear-gradient(180deg, #fff6df, #f1dfb6); color: #1d0c10; font: 600 calc(11 * var(--type-unit, 1px))/1 "Credits TRIPTIC", var(--font-ui); letter-spacing: .08em; white-space: nowrap; }
/* the wall: four brass poster frames, a screen's number over each and today's stub under it */
html.ds .fto-cc-wall { display: grid; grid-template-columns: repeat(4, 15cqw); gap: 4cqw; }
html.ds .fto-cc-frame { display: grid; justify-items: center; gap: 3px; }
html.ds .fto-cc-frame > em { color: var(--cc-brass); font: 700 calc(5.5 * var(--type-unit, 1px))/1 var(--font-ui); letter-spacing: .16em; font-style: normal; white-space: nowrap; }
html.ds .fto-cc-case { position: relative; width: 100%; aspect-ratio: 2 / 3; border-radius: 3px; background: linear-gradient(145deg, #f3dca0, #a67c34 42%, #6b4a18); box-shadow: 0 10px 14px -8px rgb(0 0 0 / .95); }
html.ds .fto-cc-art { position: absolute; inset: 2px; overflow: hidden; display: grid; align-items: end; justify-items: center; padding-bottom: 4px; border-radius: 2px; }
html.ds .fto-cc-art::before { content: ""; position: absolute; left: 22%; right: 22%; top: 24%; height: 30%; }
html.ds .fto-cc-art > b { position: relative; color: rgb(255 255 255 / .9); font: 800 calc(4.6 * var(--type-unit, 1px))/1.1 var(--font-ui); letter-spacing: .04em; text-align: center; }
html.ds .fto-cc-art.is-cry { background: linear-gradient(160deg, #2a1178, #5a1fb4 52%, #7f1a8e); }
html.ds .fto-cc-art.is-cry::before { border-radius: 2px; background: #fff6e5; transform: rotate(-4deg); }
html.ds .fto-cc-art.is-end { background: linear-gradient(170deg, #1a2342, #0b0f22); }
html.ds .fto-cc-art.is-end::before { background: repeating-linear-gradient(180deg, rgb(244 232 214 / .55) 0 1px, transparent 1px 5px); }
html.ds .fto-cc-art.is-tri { background: linear-gradient(160deg, #3a2a1a, #14100a); }
html.ds .fto-cc-art.is-tri::before { left: 16%; right: 16%; background: linear-gradient(90deg, #d9b46a 0 28%, transparent 28% 36%, #d9b46a 36% 64%, transparent 64% 72%, #d9b46a 72%); opacity: .85; }
html.ds .fto-cc-art.is-cc { background: linear-gradient(160deg, #11262c, #0b161b); }
html.ds .fto-cc-art.is-cc::before { background: repeating-linear-gradient(90deg, rgb(244 232 214 / .5) 0 4px, transparent 4px 5px), repeating-linear-gradient(180deg, transparent 0 4px, #0b161b 4px 5px); }
html.ds .fto-cc-stub { position: relative; width: 70%; height: 5px; border-radius: 1px; background: var(--cc-paper); }
html.ds .fto-cc-stub::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #f7d98c, #e2b04e); }
/* the doors: two leather leaves with brass edges and handles, over the foyer, parting */
html.ds .fto-cc-doors { position: absolute; inset: 0; z-index: 2; display: flex; pointer-events: none; }
html.ds .fto-cc-doors > i { --d: -1; position: relative; flex: 1 1 50%; opacity: 0; background: radial-gradient(60% 40% at 50% 30%, rgb(255 255 255 / .06), transparent 70%), linear-gradient(180deg, #4a1420, #2a0a12); box-shadow: inset 0 0 0 2px rgb(217 180 106 / .6), inset 0 0 0 5px #2a0a12, inset 0 0 0 6px rgb(217 180 106 / .3); }
html.ds .fto-cc-doors > i.is-r { --d: 1; }
html.ds .fto-cc-doors > i::after { content: ""; position: absolute; top: 40%; width: 3px; height: 20%; border-radius: 2px; background: linear-gradient(180deg, #f3dca0, #8a6326); }
html.ds .fto-cc-doors > i.is-l::after { right: 8px; } html.ds .fto-cc-doors > i.is-r::after { left: 8px; }
/* the ticket on Today: cream paper, ADMIT ONE in red, a perforated stub with four bulbs and its serial */
html.ds .fto-cc-ticket { position: absolute; left: 50%; top: 52%; z-index: 3; display: flex; width: 64cqw; height: 34cqh; translate: -50% -50%; opacity: 0; filter: drop-shadow(0 10px 12px rgb(0 0 0 / .55)); }
html.ds .fto-cc-ticket > span { display: grid; align-content: center; }
html.ds .fto-cc-main { background: linear-gradient(176deg, #f6ead2, #e8d6b2); }
html.ds .fto-cc-main { flex: 1 1 auto; gap: 3px; padding: 0 10px; border-radius: 8px 0 0 8px; }
html.ds .fto-cc-main > em { color: #b3322d; font: 700 calc(6.5 * var(--type-unit, 1px))/1 var(--font-ui); letter-spacing: .26em; font-style: normal; }
html.ds .fto-cc-main > b { color: #2b1b10; font: 600 calc(14 * var(--type-unit, 1px))/1 "Credits TRIPTIC", var(--font-ui); letter-spacing: .05em; white-space: nowrap; }
html.ds .fto-cc-tstub { flex: 0 0 26%; justify-items: center; gap: 5px; border-radius: 0 8px 8px 0; transform-origin: 0 100%;
  background: radial-gradient(circle, rgb(43 27 16 / .4) 0 1px, transparent 1.4px) 0 0 / 3px 5px repeat-y, linear-gradient(176deg, #f6ead2, #e8d6b2); }
html.ds .fto-cc-tbulbs { display: flex; gap: 3px; }
html.ds .fto-cc-tbulbs > i { width: 5px; height: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(43 27 16 / .3); }
html.ds .fto-cc-tstub > em { color: #b3322d; font: 600 calc(5.5 * var(--type-unit, 1px))/1 var(--font-ui); letter-spacing: .06em; font-style: normal; white-space: nowrap; }
/* the film: the ticket is there (0-14%), touched on its stub, the stub tears (11-18%); the doors close over (15-21%) and part
   (28-38%); the foyer stands behind them from 22% to 89%; a quarter of the marquee lights at about 44, 52, 60 and 68% with its
   screen's stub; everything goes out at 89-96% and the ticket comes back (96-100%). */
html.ds .fto-step.is-current .fto-cc-ticket { animation: fto-ticket var(--fto-loop) var(--motion-curve) infinite; }
@keyframes fto-ticket { 0%, 14% { opacity: 1; transform: none; } 20%, 95% { opacity: 0; transform: scale(.96); } 100% { opacity: 1; transform: none; } }
html.ds .fto-step.is-current .fto-cc-tstub { animation: fto-stub var(--fto-loop) var(--motion-curve) infinite; }
@keyframes fto-stub { 0%, 11% { opacity: 1; transform: none; } 18%, 95% { opacity: 0; transform: translate(10%, 34%) rotate(18deg); } 100% { opacity: 1; transform: none; } }
html.ds .fto-step.is-current .fto-cc-doors > i { animation: fto-doors var(--fto-loop) var(--motion-curve) infinite; }
@keyframes fto-doors { 0%, 15% { opacity: 0; transform: none; } 21%, 28% { opacity: 1; transform: none; } 38% { opacity: 1; transform: translateX(calc(var(--d) * 102%)); } 40%, 100% { opacity: 0; transform: translateX(calc(var(--d) * 102%)); } }
html.ds .fto-step.is-current .fto-cc-room { animation: fto-foyer var(--fto-loop) var(--motion-curve) infinite; }
@keyframes fto-foyer { 0%, 21% { opacity: 0; } 24%, 89% { opacity: 1; } 95%, 100% { opacity: 0; } }
/* a quarter lights: one keyframe for all four, set 8% of the loop apart (quarter 0 at 44% ... quarter 3 at 68%); each goes out
   again while the foyer is dark (quarter 0 at 93%, quarter 3 at 17% of the next loop, before the foyer is back at 22%) */
html.ds .fto-step.is-current :is(.fto-cc-q > i, .fto-cc-stub)::after { animation: fto-quarter var(--fto-loop) var(--motion-curve) infinite; animation-delay: calc((var(--q) - 3) * var(--fto-loop) * .08); }
@keyframes fto-quarter { 0%, 14% { opacity: 1; } 17%, 66% { opacity: 0; } 70%, 100% { opacity: 1; } }
/* the card (72-88%): the week's film card rises over the lit foyer, turns a little in the light, and a sweep of foil crosses it */
html.ds .fto-cc-card { position: absolute; left: 50%; top: 50%; z-index: 4; display: grid; justify-items: center; gap: 6px; translate: -50% -46%; opacity: 0; pointer-events: none; }
html.ds .fto-cc-card-in { position: relative; display: block; width: 26cqw; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; background: #111;
  box-shadow: 0 0 0 2px rgb(255 236 190 / .85), 0 0 0 4px rgb(217 180 106 / .5), 0 18px 30px -10px rgb(0 0 0 / .9), 0 0 26px rgb(255 196 110 / .35); }
html.ds .fto-cc-card-in > img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.ds .fto-cc-foil { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .55) 45%, rgb(190 230 255 / .35) 50%, rgb(255 210 240 / .3) 55%, transparent 70%); transform: translateX(-120%); mix-blend-mode: screen; }
html.ds .fto-cc-card > em { color: var(--cc-brass); font: 700 calc(6 * var(--type-unit, 1px))/1 var(--font-ui); letter-spacing: .2em; font-style: normal; white-space: nowrap; }
html.ds .fto-step.is-current .fto-cc-card { animation: fto-cc-card var(--fto-loop) var(--motion-curve) infinite; }
@keyframes fto-cc-card { 0%, 71% { opacity: 0; transform: translateY(18%) scale(.86) rotate(-4deg); } 76% { opacity: 1; transform: translateY(0) scale(1.03) rotate(2deg); } 79%, 87% { opacity: 1; transform: none; } 91%, 100% { opacity: 0; transform: scale(.96); } }
html.ds .fto-step.is-current .fto-cc-foil { animation: fto-cc-foil var(--fto-loop) var(--motion-curve) infinite; }
@keyframes fto-cc-foil { 0%, 77% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
html.ds .fto-step.is-current .fto-demo-cryptic .fto-touch { animation: fto-touch-cc var(--fto-loop) var(--motion-curve) infinite; }
@keyframes fto-touch-cc {
  0% { opacity: 0; transform: translate(84cqw, 86cqh) scale(1); }
  5% { opacity: 1; transform: translate(74cqw, 47cqh) scale(1); }
  8% { opacity: 1; transform: translate(74cqw, 47cqh) scale(.72); }
  11% { opacity: 1; transform: translate(74cqw, 47cqh) scale(1); }
  17%, 100% { opacity: 0; transform: translate(80cqw, 70cqh) scale(1); }
}

/* ---- 3. Film DNA: a film loved; the beads of the lines find their places; a lean appears ---- */
html.ds .fto-demo-dna { --fto-loop: 7.4s; }
html.ds .fto-dna-film { position: absolute; left: 6cqw; top: 14cqh; width: 25cqw; display: grid; gap: 6px; }
html.ds .fto-dna-film > img { aspect-ratio: 2 / 3; height: auto; border-radius: 8px; box-shadow: 0 12px 22px -10px rgb(0 0 0 / .85), 0 0 0 1px rgb(255 255 255 / .14); }
html.ds .fto-love { justify-self: center; padding: 4px 9px; border-radius: 999px; background: linear-gradient(180deg, #f472b6, #db2777); color: #fff; font: 800 calc(8 * var(--type-unit, 1px))/1 var(--font-ui); letter-spacing: .1em; box-shadow: 0 6px 12px -4px rgb(219 39 119 / .7); }
html.ds .fto-dna-lanes { position: absolute; left: 37cqw; right: 5cqw; top: 15cqh; display: grid; gap: 4.6cqh; }
html.ds .fto-lane { display: grid; grid-template-columns: 15cqw minmax(0, 1fr) 15cqw; align-items: center; gap: 6px; }
html.ds .fto-lane > em { color: rgb(255 255 255 / .62); font: 700 calc(7 * var(--type-unit, 1px))/1 var(--font-ui); letter-spacing: .06em; font-style: normal; text-align: right; }
html.ds .fto-lane > em:last-child { text-align: left; color: #fff; }
html.ds .fto-track { position: relative; height: 10px; }
html.ds .fto-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: rgb(255 255 255 / .16); }
html.ds .fto-track > i { position: absolute; inset: 0; translate: calc(var(--x) - 50%) 0; }
html.ds .fto-track > i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: hsl(calc(250 + var(--i) * 40) 85% 70%); box-shadow: 0 0 0 2.5px #0a0a10, 0 3px 8px -2px hsl(calc(250 + var(--i) * 40) 85% 60%); }
html.ds .fto-stat { justify-self: start; margin-top: 2px; padding: 5px 10px; border-radius: 999px; background: rgb(167 139 250 / .18); box-shadow: inset 0 0 0 1px rgb(196 181 253 / .45); color: #ede9fe; font: 800 calc(7.5 * var(--type-unit, 1px))/1 var(--font-ui); letter-spacing: .1em; }
html.ds .fto-step.is-current .fto-love { animation: fto-love var(--fto-loop) var(--motion-curve) infinite; }
@keyframes fto-love { 0%, 12% { opacity: .45; transform: scale(.92); } 16% { opacity: 1; transform: scale(1.18); } 21%, 92% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: .45; transform: scale(.92); } }
html.ds .fto-step.is-current .fto-track > i { animation: fto-bead var(--fto-loop) var(--motion-curve) infinite; animation-delay: calc(var(--i) * 120ms); }
@keyframes fto-bead { 0%, 22% { translate: 0 0; opacity: .5; } 40%, 92% { translate: calc(var(--x) - 50%) 0; opacity: 1; } 99%, 100% { translate: 0 0; opacity: .5; } }
html.ds .fto-step.is-current .fto-stat { animation: fto-rise var(--fto-loop) var(--motion-curve) infinite; }
@keyframes fto-rise { 0%, 50% { opacity: 0; transform: translateY(6px); } 58%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
html.ds .fto-step.is-current .fto-demo-dna .fto-touch { animation: fto-touch-dna var(--fto-loop) var(--motion-curve) infinite; }
@keyframes fto-touch-dna {
  0% { opacity: 0; transform: translate(30cqw, 95cqh) scale(1); }
  9% { opacity: 1; transform: translate(18.5cqw, 79cqh) scale(1); }
  14% { opacity: 1; transform: translate(18.5cqw, 79cqh) scale(.72); }
  18% { opacity: 1; transform: translate(18.5cqw, 79cqh) scale(1); }
  26%, 100% { opacity: 0; transform: translate(24cqw, 90cqh) scale(1); }
}

/* ---- 4. Collections: a Collection opened, its shelf slides in, saved ---- */
html.ds .fto-demo-collections { --fto-loop: 7.6s; }
html.ds .fto-co-tiles { position: absolute; left: 7cqw; right: 7cqw; top: 18cqh; display: grid; gap: 3cqh; }
html.ds .fto-co-tile { display: grid; gap: 3px; padding: 3.4cqh 4cqw; border-radius: 12px; box-shadow: 0 10px 20px -12px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(255 255 255 / .12); }
html.ds .fto-co-tile.is-a { background: linear-gradient(120deg, #7f1d1d, #be185d 70%, #f472b6); }
html.ds .fto-co-tile.is-b { background: linear-gradient(120deg, #431407, #b45309 70%, #f59e0b); }
html.ds .fto-co-tile em { color: rgb(255 255 255 / .75); font: 800 calc(7 * var(--type-unit, 1px))/1 var(--font-ui); letter-spacing: .14em; font-style: normal; }
html.ds .fto-co-tile b { color: #fff; font: 700 calc(13 * var(--type-unit, 1px))/1.15 var(--font-display, var(--font-ui)); }
html.ds .fto-co-shelf { position: absolute; inset: 14cqh 5cqw 6cqh; display: grid; align-content: start; gap: 3.5cqh; opacity: 0; }
html.ds .fto-co-head { display: flex; align-items: center; justify-content: space-between; color: #fff; font: 700 calc(12 * var(--type-unit, 1px))/1.15 var(--font-ui); }
html.ds .fto-save { position: relative; width: 14px; height: 18px; }
html.ds .fto-save::before, html.ds .fto-save::after { content: ""; position: absolute; inset: 0; -webkit-mask: linear-gradient(#000 0 0) top / 100% 70% no-repeat, conic-gradient(from 135deg at 50% 70%, #000 0 90deg, transparent 0) bottom / 100% 30% no-repeat; mask: linear-gradient(#000 0 0) top / 100% 70% no-repeat, conic-gradient(from 135deg at 50% 70%, #000 0 90deg, transparent 0) bottom / 100% 30% no-repeat; }
html.ds .fto-save::before { background: rgb(255 255 255 / .35); }
html.ds .fto-save::after { background: #c4b5fd; opacity: 1; }
html.ds .fto-co-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4cqw; }
html.ds .fto-co-p { aspect-ratio: 2 / 3; border-radius: 7px; overflow: hidden; box-shadow: 0 12px 20px -10px rgb(0 0 0 / .85), inset 0 0 0 1px rgb(255 255 255 / .12); }
html.ds .fto-demo-collections .fto-co-tiles { opacity: 0; }
html.ds .fto-demo-collections .fto-co-shelf { opacity: 1; }
html.ds .fto-step.is-current .fto-co-tiles { animation: fto-co-tiles var(--fto-loop) var(--motion-curve) infinite; }
@keyframes fto-co-tiles { 0%, 16% { opacity: 1; transform: none; } 24%, 92% { opacity: 0; transform: scale(1.06); } 98%, 100% { opacity: 1; transform: none; } }
html.ds .fto-step.is-current .fto-co-shelf { animation: fto-co-shelf var(--fto-loop) var(--motion-curve) infinite; }
@keyframes fto-co-shelf { 0%, 20% { opacity: 0; transform: translateX(14%); } 30%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
html.ds .fto-step.is-current .fto-co-p { animation: fto-co-p var(--fto-loop) var(--motion-curve) infinite; animation-delay: calc(var(--i) * 90ms); }
@keyframes fto-co-p { 0%, 22% { opacity: 0; transform: translateX(30%) rotateY(-24deg); } 34%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
html.ds .fto-step.is-current .fto-save::after { animation: fto-save var(--fto-loop) var(--motion-curve) infinite; }
@keyframes fto-save { 0%, 58% { opacity: 0; transform: scale(.6); } 63% { opacity: 1; transform: scale(1.3); } 67%, 90% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: none; } }
html.ds .fto-step.is-current .fto-demo-collections .fto-touch { animation: fto-touch-co var(--fto-loop) var(--motion-curve) infinite; }
@keyframes fto-touch-co {
  0% { opacity: 0; transform: translate(50cqw, 70cqh) scale(1); }
  8% { opacity: 1; transform: translate(40cqw, 32cqh) scale(1); }
  13% { opacity: 1; transform: translate(40cqw, 32cqh) scale(.72); }
  17% { opacity: 1; transform: translate(40cqw, 32cqh) scale(1); }
  24% { opacity: 0; transform: translate(44cqw, 40cqh) scale(1); }
  48% { opacity: 0; transform: translate(86cqw, 32cqh) scale(1); }
  55% { opacity: 1; transform: translate(93cqw, 19cqh) scale(1); }
  60% { opacity: 1; transform: translate(93cqw, 19cqh) scale(.72); }
  64% { opacity: 1; transform: translate(93cqw, 19cqh) scale(1); }
  72%, 100% { opacity: 0; transform: translate(88cqw, 30cqh) scale(1); }
}

/* ---- 5. the Cinematic Universe: stills drift towards you by colour, a drag steers, a tap brings one forward ---- */
html.ds .fto-demo-universe { --fto-loop: 8.4s; background: radial-gradient(80% 80% at 50% 50%, #1b1640, #07060d 80%); }
html.ds .fto-sky { position: absolute; inset: 0; }
html.ds .fto-still { position: absolute; left: 50%; top: 50%; width: 18cqw; aspect-ratio: 16 / 9; margin: -5cqw 0 0 -9cqw; border-radius: 4px; overflow: hidden; box-shadow: 0 8px 16px -8px rgb(0 0 0 / .9), inset 0 0 0 1px rgb(255 255 255 / .1); transform: translate(var(--dx), var(--dy)) scale(var(--s, 1)); }
html.ds .fto-still > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
html.ds .fto-sky .is-1 { --dx: -34cqw; --dy: -26cqh; } html.ds .fto-sky .is-2 { --dx: 30cqw; --dy: -28cqh; } html.ds .fto-sky .is-3 { --dx: -38cqw; --dy: 22cqh; }
html.ds .fto-sky .is-4 { --dx: 34cqw; --dy: 26cqh; } html.ds .fto-sky .is-5 { --dx: -10cqw; --dy: -34cqh; } html.ds .fto-sky .is-6 { --dx: 12cqw; --dy: 34cqh; }
html.ds .fto-sky .is-7 { --dx: -22cqw; --dy: 2cqh; } html.ds .fto-sky .is-8 { --dx: 22cqw; --dy: -4cqh; } html.ds .fto-sky .is-9 { --dx: -2cqw; --dy: -14cqh; }
html.ds .fto-sky .is-10 { --dx: 4cqw; --dy: 16cqh; } html.ds .fto-sky .is-11 { --dx: -40cqw; --dy: -4cqh; } html.ds .fto-sky .is-12 { --dx: 40cqw; --dy: 6cqh; }
html.ds .fto-meet { position: absolute; left: 50%; top: 46%; z-index: 5; width: 54cqw; translate: -50% -50%; display: grid; gap: 6px; justify-items: center; }
html.ds .fto-meet > .fto-still { position: relative; left: auto; top: auto; width: 100%; margin: 0; transform: none; border-radius: 8px; box-shadow: 0 20px 34px -14px rgb(0 0 0 / .95), 0 0 0 1px rgb(255 255 255 / .2); }
html.ds .fto-meet > b { color: #fff; font: 700 calc(11 * var(--type-unit, 1px))/1 var(--font-ui); letter-spacing: .02em; text-shadow: 0 2px 8px rgb(0 0 0 / .8); }
html.ds .fto-step.is-current .fto-sky .fto-still { animation: fto-drift 4.2s linear infinite; }
html.ds .fto-step.is-current .fto-sky .fto-still:nth-child(3n+1) { animation-delay: calc(var(--fto-loop) / -6); }
html.ds .fto-step.is-current .fto-sky .fto-still:nth-child(3n+2) { animation-delay: calc(var(--fto-loop) / -3); }
@keyframes fto-drift {
  0% { opacity: 0; transform: translate(calc(var(--dx) * .25), calc(var(--dy) * .25)) scale(.35); }
  30% { opacity: .95; }
  85% { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.35), calc(var(--dy) * 1.35)) scale(1.35); }
}
html.ds .fto-step.is-current .fto-sky { animation: fto-steer var(--fto-loop) var(--motion-breathe) infinite; }
@keyframes fto-steer { 0%, 18% { transform: none; } 34%, 44% { transform: translateX(-9cqw) rotate(-1.5deg); } 56%, 100% { transform: none; } }
html.ds .fto-step.is-current .fto-meet { animation: fto-meet var(--fto-loop) var(--motion-curve) infinite; }
@keyframes fto-meet { 0%, 58% { opacity: 0; transform: scale(.3); } 68%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(1.04); } }
html.ds .fto-step.is-current .fto-demo-universe .fto-touch { animation: fto-touch-uv var(--fto-loop) var(--motion-curve) infinite; }
@keyframes fto-touch-uv {
  0%, 14% { opacity: 0; transform: translate(70cqw, 62cqh) scale(1); }
  18% { opacity: 1; transform: translate(70cqw, 62cqh) scale(.85); }
  36% { opacity: 1; transform: translate(40cqw, 60cqh) scale(.85); }
  42% { opacity: 0; transform: translate(36cqw, 60cqh) scale(1); }
  50% { opacity: 0; transform: translate(56cqw, 66cqh) scale(1); }
  55% { opacity: 1; transform: translate(50cqw, 52cqh) scale(1); }
  59% { opacity: 1; transform: translate(50cqw, 52cqh) scale(.72); }
  63% { opacity: 1; transform: translate(50cqw, 52cqh) scale(1); }
  70%, 100% { opacity: 0; transform: translate(56cqw, 64cqh) scale(1); }
}

/* the step's arrival: Flick's words rise a beat after the film starts */
html.ds .fto-step.is-current .fto-row { animation: fto-words var(--motion-slow) var(--motion-curve) both; animation-delay: 120ms; }
@keyframes fto-words { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Reduce Motion (system, the app's switch, the reduced tier): no film; each picture stands at its last frame */
/* (17 October 2026: and the parts' own ::after layers, where the Commute Corner's bulbs and stubs light) */
@media (prefers-reduced-motion: reduce) {
  html.ds .fto-demo *, html.ds .fto-demo *::after, html.ds .fto-demo::after, html.ds .fto-step.is-current .fto-row { animation: none !important; }
}
html.ds:is(.reduce-motion, .mo-low-power) .fto-demo *, html.ds:is(.reduce-motion, .mo-low-power) .fto-demo *::after, html.ds:is(.reduce-motion, .mo-low-power) .fto-demo::after,
html.ds[data-motion-tier="reduced"] .fto-demo *, html.ds[data-motion-tier="reduced"] .fto-demo *::after, html.ds[data-motion-tier="reduced"] .fto-demo::after,
html.ds #device.manual-reduced-motion .fto-demo *, html.ds #device.manual-reduced-motion .fto-demo *::after,
html.ds .fto.manual-reduced-motion .fto-demo *, html.ds .fto.manual-reduced-motion .fto-demo *::after { animation: none !important; }
/* (4 November 2026) still: the Commuters Corner's picture stands on its last story frame, the lit foyer with the week's card in front */
@media (prefers-reduced-motion: reduce) { html.ds .fto-cc-card { opacity: 1; } }
html.ds:is(.reduce-motion, .mo-low-power) .fto-cc-card, html.ds[data-motion-tier="reduced"] .fto-cc-card, html.ds #device.manual-reduced-motion .fto-cc-card, html.ds .fto.manual-reduced-motion .fto-cc-card { opacity: 1; }

/* ===== prototype-src/hero-colour.css ===== */
/* TRIPTIC hero colour (HERO lane, 9 October 2026): colour taken from the film. Script: hero-colour.js.
   Record: hub/docs/HERO-COLOUR-2026-10-09.md.
   Every colour here is a poster's own, worked out once on the server and clamped like every room tint (HSL L35-60,
   S<=70). Washes are capped so that the text standing over them stays WCAG AA (measured in tests/hero-browser.test.mjs).
   Reduce Transparency: the washes go, the room is plain (as the ambient layer does). */

/* --poster-tint on posters: a default, so a reader (SURF's shadows) can always use it */
html.ds #device { --poster-tint: 120, 110, 150; --poster-tint-2: 60, 56, 80; }

/* ---- the film page: the poster's own colour at the top of the room (as before), its second colour low on the page ---- */
html.ds #device .film-v5.recon-film.hc-two:not(.ft-clear) {
  background:
    radial-gradient(130% 62% at 50% 8%, rgba(var(--hc-film-a), .14), transparent 72%),
    radial-gradient(120% 44% at 50% 104%, rgba(var(--hc-film-b), .12), transparent 72%),
    var(--ds-film-ground) !important;
}
html.ds #device.manual-solid .film-v5.recon-film.hc-two:not(.ft-clear) { background: var(--c-stage) !important; }

/* ---- Your three: the three posters' colours, each from its own side, under everything the showpiece draws ---- */
html.ds #device .trip-critical-layer > .hc-trio-room {
  --hc-l: 120, 110, 150; --hc-c: 120, 110, 150; --hc-r: 120, 110, 150; --hc-floor: 60, 56, 80;
  position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none;
  background:
    radial-gradient(70% 46% at 0% 46%, rgba(var(--hc-l), .34), transparent 74%),
    radial-gradient(70% 46% at 100% 46%, rgba(var(--hc-r), .34), transparent 74%),
    radial-gradient(90% 40% at 50% 28%, rgba(var(--hc-c), .3), transparent 76%),
    radial-gradient(110% 30% at 50% 100%, rgba(var(--hc-floor), .16), transparent 78%);
  opacity: 0;
  transition: opacity var(--motion-slow) var(--motion-curve);
}
html.ds #device .trip-critical-layer > .hc-trio-room.is-on { opacity: 1; }
html.ds #device .trip-critical-layer.critical-behind-film > .hc-trio-room { opacity: 0; transition-duration: 0s; }
html.ds #device.manual-reduced-motion .trip-critical-layer > .hc-trio-room,
html.ds.reduce-motion #device .trip-critical-layer > .hc-trio-room { transition-duration: var(--motion-fast); }
html.ds #device.manual-solid .trip-critical-layer > .hc-trio-room { display: none; }

/* ---- a Collection: the hero box takes its list's palette ---- */
html.ds #device .dslc-detail .collection-hero.hc-list::after {
  background:
    radial-gradient(64% 70% at 14% 42%, rgba(var(--hc-list-2), .3), transparent 74%),
    radial-gradient(64% 70% at 86% 42%, rgba(var(--hc-list-3), .3), transparent 74%),
    radial-gradient(90% 80% at 50% 38%, rgba(var(--hc-list-1), .38), transparent 78%),
    linear-gradient(0deg, rgba(var(--hc-list-1), .16), transparent 55%);
}

/* ---- the share ticket: a three's ticket carries the other films' colours along its lower edge ---- */
html.ds #device .ds-ticket.hc-tk-trio .ds-tk-body {
  background:
    linear-gradient(160deg, rgba(var(--ds-tk-tint), .22), rgba(var(--ds-tk-tint), .03) 58%, transparent),
    radial-gradient(70% 34% at 0% 100%, rgba(var(--hc-tk-2), .16), transparent 76%),
    radial-gradient(70% 34% at 100% 100%, rgba(var(--hc-tk-3), .16), transparent 76%),
    var(--c-stage-raised);
}

/* ---- the film page's dissolve (owner, 13 October 2026; record hub/docs/HERO-2026-10-13.md; script: hero-colour.js) ----
   The line he circled under the score was every layer ending at the foot of the hero box at once: the poster, the
   hero's gradient and the title block's own scrim, over the blurred poster beneath at another brightness. Now the
   picture flows on down behind the title, the facts, the score and the action bar, as in his Echo Valley mockup:
     sharp         the poster (.film-hero::before, ds-film-share) fades out on a long eased mask from a little above
                   the title's words (--hb-a0) to a little under them (--hb-a1)
     continuation  the same picture, continued below the poster by its own reflection and blurred progressively: a
                   little under the title, a lot from the score down (.film-hero::after); it moves with the page as the
                   poster does, and fades into the page from just under the action bar (--hb-c0 to --hb-c1)
     room          the heavily blurred picture, faint, the light that falls behind at half speed as the page scrolls
                   (.film-artwork-atmosphere::before, moved by ds-tab-scroll.js as before; --hb-r0 to --hb-r3)
     scrim         one eased shade of the page's own dark (.film-gradient, which now runs on past the hero) from above
                   the title, through the facts and the score, under the action bar, and away again into the page: as
                   dark as the words over it need (--hb-s1 at the eyebrow and title, --hb-s2 at the score, --hb-s3 under
                   the action bar; hero-colour.js works them out from the poster's own pixels) and no darker.
   No layer stops at a line: each ends on a mask that eases to nothing, and every edge between them is shared. The
   blurred copies are small pictures made once per poster on a canvas (hero-colour.js), never a live filter; where a
   poster cannot be read the CSS blurs the poster itself (.hb-css). Positions are the hero's own points: where the
   title's words start (--hb-t), the hero's height (--hb-h) and how far the dissolve runs on under it (--hb-e), measured
   by hero-colour.js and followed as the title grows; the values here are only the first frame's. */
html.ds #device .film-v5.recon-film .film-hero {
  --hb-t: calc(var(--film-hero-height) - 250px);
  --hb-h: var(--film-hero-height);
  --hb-e: 440px;
  --hb-s1: .62; --hb-s2: .78; --hb-s3: .8;
  /* (owner, 22 October 2026: "the picture turns black as I scroll") the poster stays whole down to just above the title's
     words; only a short gradient under them (was 96px above, and the shade 150px above) */
  --hb-a0: max(calc(var(--hb-t) - 40px), calc(var(--hb-h) * .3));
  --hb-a1: min(calc(var(--hb-t) + 120px), calc(var(--hb-h) - 24px));
  --hb-c0: calc(var(--hb-h) + 30px);
  --hb-c1: calc(var(--hb-h) + var(--hb-e));
  --hb-r0: calc(var(--hb-h) - 80px);
  --hb-r1: calc(var(--hb-h) + 60px);
  --hb-r2: calc(var(--hb-h) + var(--hb-e) * .55);
  --hb-r3: calc(var(--hb-h) + var(--hb-e));
  --hb-p0: calc(var(--hb-t) - 80px);
  --hb-p1: calc(var(--hb-t) - 6px);
  --hb-p2: calc(var(--hb-h) - 20px);
  --hb-p3: calc(var(--hb-h) + 50px);
  --hb-p4: calc(var(--hb-h) + var(--hb-e) * .4);
  --hb-p5: calc(var(--hb-h) + var(--hb-e));
  /* the sharp poster's mask (ds-film-share.css draws the poster and the foil with it) */
  --ds-film-fade: linear-gradient(180deg, #000 0, #000 var(--hb-a0), rgb(0 0 0 / 0.962) calc(var(--hb-a0) + (var(--hb-a1) - var(--hb-a0)) * 0.125), rgb(0 0 0 / 0.854) calc(var(--hb-a0) + (var(--hb-a1) - var(--hb-a0)) * 0.25), rgb(0 0 0 / 0.691) calc(var(--hb-a0) + (var(--hb-a1) - var(--hb-a0)) * 0.375), rgb(0 0 0 / 0.5) calc(var(--hb-a0) + (var(--hb-a1) - var(--hb-a0)) * 0.5), rgb(0 0 0 / 0.309) calc(var(--hb-a0) + (var(--hb-a1) - var(--hb-a0)) * 0.625), rgb(0 0 0 / 0.146) calc(var(--hb-a0) + (var(--hb-a1) - var(--hb-a0)) * 0.75), rgb(0 0 0 / 0.038) calc(var(--hb-a0) + (var(--hb-a1) - var(--hb-a0)) * 0.875), transparent var(--hb-a1));
}
/* the continuation: the picture continued and blurred progressively (a little under the title, a lot from the score
   down; hero-colour.js makes it), under the sharp poster; it moves with the page as the poster does */
html.ds #device .film-v5.recon-film .film-hero[style*="--poster"]::after {
  content: ""; display: block; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: calc(var(--hb-h) + var(--hb-e));
  margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; filter: none; transform: none; pointer-events: none;
  background: var(--hb-cont, none) 0 0 / 100% 100% no-repeat;
  -webkit-mask: linear-gradient(180deg, #000 0, #000 var(--hb-c0), rgb(0 0 0 / 0.962) calc(var(--hb-c0) + (var(--hb-c1) - var(--hb-c0)) * 0.125), rgb(0 0 0 / 0.854) calc(var(--hb-c0) + (var(--hb-c1) - var(--hb-c0)) * 0.25), rgb(0 0 0 / 0.691) calc(var(--hb-c0) + (var(--hb-c1) - var(--hb-c0)) * 0.375), rgb(0 0 0 / 0.5) calc(var(--hb-c0) + (var(--hb-c1) - var(--hb-c0)) * 0.5), rgb(0 0 0 / 0.309) calc(var(--hb-c0) + (var(--hb-c1) - var(--hb-c0)) * 0.625), rgb(0 0 0 / 0.146) calc(var(--hb-c0) + (var(--hb-c1) - var(--hb-c0)) * 0.75), rgb(0 0 0 / 0.038) calc(var(--hb-c0) + (var(--hb-c1) - var(--hb-c0)) * 0.875), transparent var(--hb-c1));
  mask: linear-gradient(180deg, #000 0, #000 var(--hb-c0), rgb(0 0 0 / 0.962) calc(var(--hb-c0) + (var(--hb-c1) - var(--hb-c0)) * 0.125), rgb(0 0 0 / 0.854) calc(var(--hb-c0) + (var(--hb-c1) - var(--hb-c0)) * 0.25), rgb(0 0 0 / 0.691) calc(var(--hb-c0) + (var(--hb-c1) - var(--hb-c0)) * 0.375), rgb(0 0 0 / 0.5) calc(var(--hb-c0) + (var(--hb-c1) - var(--hb-c0)) * 0.5), rgb(0 0 0 / 0.309) calc(var(--hb-c0) + (var(--hb-c1) - var(--hb-c0)) * 0.625), rgb(0 0 0 / 0.146) calc(var(--hb-c0) + (var(--hb-c1) - var(--hb-c0)) * 0.75), rgb(0 0 0 / 0.038) calc(var(--hb-c0) + (var(--hb-c1) - var(--hb-c0)) * 0.875), transparent var(--hb-c1));
  opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve);
}
html.ds #device .film-v5.recon-film .film-hero:is(.hb-ready, .hb-css)[style*="--poster"]::after { opacity: 1; }
/* a poster the page may not read: the CSS blurs the poster itself (a little larger, so the blur's soft edge is off the screen) */
html.ds #device .film-v5.recon-film .film-hero.hb-css[style*="--poster"]::after {
  background: var(--poster) 50% 30% / cover no-repeat;
  filter: blur(30px) saturate(.9); transform: scale(1.22); transform-origin: 50% 40%;
}
/* the room: the heavily blurred picture, faint (as faint as the quietest words under it need, hero-colour.js: --hb-room),
   the light that falls behind at half speed as the page scrolls (ds-tab-scroll.js moves this layer) */
html.ds #device .film-v5.recon-film .film-hero > .film-artwork-atmosphere {
  z-index: -1; inset: 0 0 auto; height: calc(var(--hb-h) + var(--hb-e)); overflow: hidden;
}
html.ds #device .film-v5.recon-film .film-hero > .film-artwork-atmosphere::before {
  content: ""; display: block; position: absolute; inset: 0; margin: 0;
  background: var(--hb-room-art, none) 0 0 / 100% 100% no-repeat;
  filter: none; transform: none; opacity: 0;
  -webkit-mask: linear-gradient(180deg, transparent 0, transparent var(--hb-r0), rgb(0 0 0 / 0.067) calc(var(--hb-r0) + (var(--hb-r1) - var(--hb-r0)) * 0.167), rgb(0 0 0 / 0.25) calc(var(--hb-r0) + (var(--hb-r1) - var(--hb-r0)) * 0.333), rgb(0 0 0 / 0.5) calc(var(--hb-r0) + (var(--hb-r1) - var(--hb-r0)) * 0.5), rgb(0 0 0 / 0.75) calc(var(--hb-r0) + (var(--hb-r1) - var(--hb-r0)) * 0.667), rgb(0 0 0 / 0.933) calc(var(--hb-r0) + (var(--hb-r1) - var(--hb-r0)) * 0.833), #000 var(--hb-r1), #000 var(--hb-r2), rgb(0 0 0 / 0.962) calc(var(--hb-r2) + (var(--hb-r3) - var(--hb-r2)) * 0.125), rgb(0 0 0 / 0.854) calc(var(--hb-r2) + (var(--hb-r3) - var(--hb-r2)) * 0.25), rgb(0 0 0 / 0.691) calc(var(--hb-r2) + (var(--hb-r3) - var(--hb-r2)) * 0.375), rgb(0 0 0 / 0.5) calc(var(--hb-r2) + (var(--hb-r3) - var(--hb-r2)) * 0.5), rgb(0 0 0 / 0.309) calc(var(--hb-r2) + (var(--hb-r3) - var(--hb-r2)) * 0.625), rgb(0 0 0 / 0.146) calc(var(--hb-r2) + (var(--hb-r3) - var(--hb-r2)) * 0.75), rgb(0 0 0 / 0.038) calc(var(--hb-r2) + (var(--hb-r3) - var(--hb-r2)) * 0.875), transparent var(--hb-r3));
  mask: linear-gradient(180deg, transparent 0, transparent var(--hb-r0), rgb(0 0 0 / 0.067) calc(var(--hb-r0) + (var(--hb-r1) - var(--hb-r0)) * 0.167), rgb(0 0 0 / 0.25) calc(var(--hb-r0) + (var(--hb-r1) - var(--hb-r0)) * 0.333), rgb(0 0 0 / 0.5) calc(var(--hb-r0) + (var(--hb-r1) - var(--hb-r0)) * 0.5), rgb(0 0 0 / 0.75) calc(var(--hb-r0) + (var(--hb-r1) - var(--hb-r0)) * 0.667), rgb(0 0 0 / 0.933) calc(var(--hb-r0) + (var(--hb-r1) - var(--hb-r0)) * 0.833), #000 var(--hb-r1), #000 var(--hb-r2), rgb(0 0 0 / 0.962) calc(var(--hb-r2) + (var(--hb-r3) - var(--hb-r2)) * 0.125), rgb(0 0 0 / 0.854) calc(var(--hb-r2) + (var(--hb-r3) - var(--hb-r2)) * 0.25), rgb(0 0 0 / 0.691) calc(var(--hb-r2) + (var(--hb-r3) - var(--hb-r2)) * 0.375), rgb(0 0 0 / 0.5) calc(var(--hb-r2) + (var(--hb-r3) - var(--hb-r2)) * 0.5), rgb(0 0 0 / 0.309) calc(var(--hb-r2) + (var(--hb-r3) - var(--hb-r2)) * 0.625), rgb(0 0 0 / 0.146) calc(var(--hb-r2) + (var(--hb-r3) - var(--hb-r2)) * 0.75), rgb(0 0 0 / 0.038) calc(var(--hb-r2) + (var(--hb-r3) - var(--hb-r2)) * 0.875), transparent var(--hb-r3));
  transition: opacity var(--motion-normal) var(--motion-curve);
}
html.ds #device .film-v5.recon-film .film-hero.hb-ready > .film-artwork-atmosphere::before { opacity: var(--hb-room, 0); }
/* the old dark wash over the blurred poster: the scrim is one layer now */
html.ds #device .film-v5.recon-film .film-hero > .film-artwork-atmosphere::after { content: none; }
/* the scrim: one eased shade of the page's dark, from above the title to under the action bar and away into the page.
   It is drawn twice: first (::before) at values safe for any poster, then (::after) as dark as this poster needs
   (hero-colour.js: --hb-s1 to --hb-s3, once it has read the poster: .hb-shaded); the one fades into the other, so the
   page never jumps from one shade to the next. The gradient itself keeps the light shade under the status bar. */
html.ds #device .film-v5.recon-film .film-hero > .film-gradient {
  inset: 0 0 auto 0; height: calc(var(--hb-h) + var(--hb-e)); pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / .4) 0, rgb(0 0 0 / .2) 72px, rgb(0 0 0 / 0) 150px);
}
html.ds #device .film-v5.recon-film .film-hero > .film-gradient::before,
html.ds #device .film-v5.recon-film .film-hero > .film-gradient::after {
  content: ""; display: block; position: absolute; inset: 0; pointer-events: none;
  transition: opacity var(--motion-normal) var(--motion-curve);
}
html.ds #device .film-v5.recon-film .film-hero > .film-gradient::before {
  background: linear-gradient(180deg,
        rgb(5 5 7 / 0) 0,
        rgb(5 5 7 / 0) var(--hb-p0),
        rgb(5 5 7 / calc(.62 * 0.067)) calc(var(--hb-p0) + (var(--hb-p1) - var(--hb-p0)) * 0.167),
        rgb(5 5 7 / calc(.62 * 0.25)) calc(var(--hb-p0) + (var(--hb-p1) - var(--hb-p0)) * 0.333),
        rgb(5 5 7 / calc(.62 * 0.5)) calc(var(--hb-p0) + (var(--hb-p1) - var(--hb-p0)) * 0.5),
        rgb(5 5 7 / calc(.62 * 0.75)) calc(var(--hb-p0) + (var(--hb-p1) - var(--hb-p0)) * 0.667),
        rgb(5 5 7 / calc(.62 * 0.933)) calc(var(--hb-p0) + (var(--hb-p1) - var(--hb-p0)) * 0.833),
        rgb(5 5 7 / .62) var(--hb-p1),
        rgb(5 5 7 / calc(.62 + (.78 - .62) * 0.25)) calc(var(--hb-p1) + (var(--hb-p2) - var(--hb-p1)) * 0.333),
        rgb(5 5 7 / calc(.62 + (.78 - .62) * 0.75)) calc(var(--hb-p1) + (var(--hb-p2) - var(--hb-p1)) * 0.667),
        rgb(5 5 7 / .78) var(--hb-p2),
        rgb(5 5 7 / calc(.78 + (.8 - .78) * 0.25)) calc(var(--hb-p2) + (var(--hb-p3) - var(--hb-p2)) * 0.333),
        rgb(5 5 7 / calc(.78 + (.8 - .78) * 0.75)) calc(var(--hb-p2) + (var(--hb-p3) - var(--hb-p2)) * 0.667),
        rgb(5 5 7 / .8) var(--hb-p3),
        rgb(5 5 7 / .8) var(--hb-p4),
        rgb(5 5 7 / calc(.8 * 0.962)) calc(var(--hb-p4) + (var(--hb-p5) - var(--hb-p4)) * 0.125),
        rgb(5 5 7 / calc(.8 * 0.854)) calc(var(--hb-p4) + (var(--hb-p5) - var(--hb-p4)) * 0.25),
        rgb(5 5 7 / calc(.8 * 0.691)) calc(var(--hb-p4) + (var(--hb-p5) - var(--hb-p4)) * 0.375),
        rgb(5 5 7 / calc(.8 * 0.5)) calc(var(--hb-p4) + (var(--hb-p5) - var(--hb-p4)) * 0.5),
        rgb(5 5 7 / calc(.8 * 0.309)) calc(var(--hb-p4) + (var(--hb-p5) - var(--hb-p4)) * 0.625),
        rgb(5 5 7 / calc(.8 * 0.146)) calc(var(--hb-p4) + (var(--hb-p5) - var(--hb-p4)) * 0.75),
        rgb(5 5 7 / calc(.8 * 0.038)) calc(var(--hb-p4) + (var(--hb-p5) - var(--hb-p4)) * 0.875),
        rgb(5 5 7 / 0) var(--hb-p5));
}
html.ds #device .film-v5.recon-film .film-hero > .film-gradient::after {
  background: linear-gradient(180deg,
        rgb(5 5 7 / 0) 0,
        rgb(5 5 7 / 0) var(--hb-p0),
        rgb(5 5 7 / calc(var(--hb-s1) * 0.067)) calc(var(--hb-p0) + (var(--hb-p1) - var(--hb-p0)) * 0.167),
        rgb(5 5 7 / calc(var(--hb-s1) * 0.25)) calc(var(--hb-p0) + (var(--hb-p1) - var(--hb-p0)) * 0.333),
        rgb(5 5 7 / calc(var(--hb-s1) * 0.5)) calc(var(--hb-p0) + (var(--hb-p1) - var(--hb-p0)) * 0.5),
        rgb(5 5 7 / calc(var(--hb-s1) * 0.75)) calc(var(--hb-p0) + (var(--hb-p1) - var(--hb-p0)) * 0.667),
        rgb(5 5 7 / calc(var(--hb-s1) * 0.933)) calc(var(--hb-p0) + (var(--hb-p1) - var(--hb-p0)) * 0.833),
        rgb(5 5 7 / var(--hb-s1)) var(--hb-p1),
        rgb(5 5 7 / calc(var(--hb-s1) + (var(--hb-s2) - var(--hb-s1)) * 0.25)) calc(var(--hb-p1) + (var(--hb-p2) - var(--hb-p1)) * 0.333),
        rgb(5 5 7 / calc(var(--hb-s1) + (var(--hb-s2) - var(--hb-s1)) * 0.75)) calc(var(--hb-p1) + (var(--hb-p2) - var(--hb-p1)) * 0.667),
        rgb(5 5 7 / var(--hb-s2)) var(--hb-p2),
        rgb(5 5 7 / calc(var(--hb-s2) + (var(--hb-s3) - var(--hb-s2)) * 0.25)) calc(var(--hb-p2) + (var(--hb-p3) - var(--hb-p2)) * 0.333),
        rgb(5 5 7 / calc(var(--hb-s2) + (var(--hb-s3) - var(--hb-s2)) * 0.75)) calc(var(--hb-p2) + (var(--hb-p3) - var(--hb-p2)) * 0.667),
        rgb(5 5 7 / var(--hb-s3)) var(--hb-p3),
        rgb(5 5 7 / var(--hb-s3)) var(--hb-p4),
        rgb(5 5 7 / calc(var(--hb-s3) * 0.962)) calc(var(--hb-p4) + (var(--hb-p5) - var(--hb-p4)) * 0.125),
        rgb(5 5 7 / calc(var(--hb-s3) * 0.854)) calc(var(--hb-p4) + (var(--hb-p5) - var(--hb-p4)) * 0.25),
        rgb(5 5 7 / calc(var(--hb-s3) * 0.691)) calc(var(--hb-p4) + (var(--hb-p5) - var(--hb-p4)) * 0.375),
        rgb(5 5 7 / calc(var(--hb-s3) * 0.5)) calc(var(--hb-p4) + (var(--hb-p5) - var(--hb-p4)) * 0.5),
        rgb(5 5 7 / calc(var(--hb-s3) * 0.309)) calc(var(--hb-p4) + (var(--hb-p5) - var(--hb-p4)) * 0.625),
        rgb(5 5 7 / calc(var(--hb-s3) * 0.146)) calc(var(--hb-p4) + (var(--hb-p5) - var(--hb-p4)) * 0.75),
        rgb(5 5 7 / calc(var(--hb-s3) * 0.038)) calc(var(--hb-p4) + (var(--hb-p5) - var(--hb-p4)) * 0.875),
        rgb(5 5 7 / 0) var(--hb-p5));
  opacity: 0;
}
html.ds #device .film-v5.recon-film .film-hero.hb-shaded > .film-gradient::before { opacity: 0; }
html.ds #device .film-v5.recon-film .film-hero.hb-shaded > .film-gradient::after { opacity: 1; }
/* the title block draws no shade of its own any more (it ended at the foot of the hero: half of the line) */
html.ds #device .film-v5.recon-film .film-hero .film-title { background: none; }
/* Reduce Transparency, a slow screen, forced colours: no blurred layers; the poster fades through the same scrim into the page */
html.ds #device.manual-solid .film-v5.recon-film .film-hero[style*="--poster"]::after,
html.ds.reduce-transparency #device .film-v5.recon-film .film-hero[style*="--poster"]::after { display: none; }
@media (prefers-reduced-transparency: reduce), (forced-colors: active), (update: slow) {
  html.ds #device .film-v5.recon-film .film-hero[style*="--poster"]::after { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  html.ds #device .trip-critical-layer > .hc-trio-room { display: none; }
  html.ds #device .film-v5.recon-film.hc-two:not(.ft-clear) { background: var(--c-stage) !important; }
}

/* ===== prototype-src/hero-picture.css ===== */
/* TRIPTIC hero picture (FIRST OPEN 2, 4 November 2026; script hero-picture.js; record hub/docs/FIRST-OPEN-2-2026-11-04.md).
   The film page's poster is an <img class="fh-pic"> drawn exactly where, and exactly as, the hero's ::before drew it
   (ds-film-share.css: cover, 50% 24%, the fade into the page, --ds-film-fade); the ::before keeps every rule of its own but no
   longer draws a picture. Each rule below is one of the ::before's, carried over to the picture. */
html.ds #device .film-v5.recon-film .film-hero.fh-img[style*="--poster"]::before { background-image: none !important; }
html.ds #device .film-v5.recon-film .film-hero > .fh-pic {
  position: absolute; inset: 0; z-index: 0; display: block; box-sizing: border-box;
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  object-fit: cover; object-position: 50% 24%; pointer-events: none; user-select: none; -webkit-user-drag: none;
  opacity: 1; filter: none; transform: none; animation: none; transition: none; background: none;
  -webkit-mask: var(--ds-film-fade); mask: var(--ds-film-fade);
}
/* the sharp picture coming in over the page's own once the page has landed (hero-picture.js upgrade(): its own short fade) */
html.ds #device .film-v5.recon-film .film-hero > .fh-pic.fh-up { opacity: 1; }
/* the poster's focus (ds-loading.css) */
html.ds #device .film-v5.recon-film .film-hero.lp-crop > .fh-pic { object-position: var(--lp-hero-pos, 50% 24%); }
/* the Duo's book (duo-book.css) */
html.ds[data-duo-book] #device .film-v5.recon-film > .film-hero > .fh-pic { -webkit-mask: var(--dbk-poster-fade); mask: var(--dbk-poster-fade); object-position: 50% 20%; }
/* the Duo's film-page spread draws its poster its own way (duo-spread-pages.css): the ::before draws it there, never the <img> */
html.ds[data-duo-spread="book"] #device .film-v5.recon-film.dsp-film > .film-hero > .fh-pic { display: none !important; }
html.ds[data-duo-spread="book"] #device .film-v5.recon-film.dsp-film > .film-hero.fh-img[style*="--poster"]::before { background-image: var(--poster) !important; }
/* the tilt (feel-wire.css), and none of it under Reduce Motion or low power */
html.ds.feel-tilt-on #device .film-v5 .film-hero[data-tilt] > .fh-pic { translate: var(--feel-tx, 0px) var(--feel-ty, 0px); scale: 1.02; }
html.ds:is(.reduce-motion, .mo-low-power) #device .film-hero[data-tilt] > .fh-pic,
html.ds #device.manual-reduced-motion .film-hero[data-tilt] > .fh-pic { translate: none !important; }
/* the held poster's way home (ds-delights-2.css) */
html.ds #device .dsd-whole-homing .film-hero > .fh-pic { opacity: 0 !important; transition: none !important; }
/* while the copy carries the poster, the page's own waits; it comes in under the copy as the copy lands (hero-transition.css) */
html.ds #device .hc-carry .film-hero > .fh-pic { opacity: 0 !important; transition: none !important; }
html.ds #device .hc-carry.hc-carry-land .film-hero > .fh-pic { opacity: 1 !important; transition: opacity var(--motion-fast) var(--motion-curve) !important; }

/* ===== prototype-src/hero-transition.css ===== */
/* TRIPTIC hero transitions (HERO lane, 9 October 2026): the poster you touch becomes the film page.
   Script: hero-transition.js. Record: hub/docs/HERO-COLOUR-2026-10-09.md.
   Everything that moves here moves by transform and opacity. */

/* the copy of the poster: one layer above the page, inside the phone's frame, under toasts and sheets */
html.ds #device > .hc-flight {
  position: absolute; z-index: 290; display: block; overflow: hidden; pointer-events: none;
  transform-origin: 0 0; will-change: transform, opacity; contain: layout paint;
  box-shadow: none; background: none;
}
html.ds #device > .hc-flight > .hc-flight-img {
  position: absolute; display: block; transform-origin: 0 0; will-change: transform;
  background-repeat: no-repeat; background-size: 100% 100%; background-position: 50% 50%;
}

/* the page left behind while the film page arrives, and the film page left behind on the way back */
html.ds #device > .screen.hc-under,
html.ds #device > .screen.hc-leaving {
  position: absolute !important; inset: 0 !important; pointer-events: none !important; overflow: hidden !important;
  animation: none !important; transition: none !important;
}
/* a copy is a picture of the page as it stood: nothing in it starts its own arrival again */
html.ds #device > .screen.hc-under *, html.ds #device > .screen.hc-under *::before, html.ds #device > .screen.hc-under *::after,
html.ds #device > .screen.hc-leaving *, html.ds #device > .screen.hc-leaving *::before, html.ds #device > .screen.hc-leaving *::after { animation: none !important; transition: none !important; }
html.ds #device > .screen.hc-under { z-index: 1 !important; transform-origin: 50% 40%; }
html.ds #device > .screen.hc-arriving { z-index: 3; }
/* (SE back, 27 October 2026) the film page leaving stands over the chrome of the page returned to (its capsule and edges, z 12-29)
   until it fades, so no frame shows the film page wearing that page's title; under the tab bar (31), which slides in over it */
html.ds #device > .screen.hc-leaving { z-index: 30 !important; }
/* (SE back) the film page leaving recedes at the tap (hero-transition.js back(): lane 1's .rt-leaving), as a transition: the rule
   above stops a copy's own transitions, this one gives the recede back its own (ready-transition.css; none under Reduce Motion,
   where the film page's Back is the app's own cross-fade and this copy is never made) */
html.ds #device > .screen.hc-leaving.rt-leaving { transition: scale var(--motion-press) var(--motion-curve) -30ms, opacity var(--motion-press) var(--motion-curve) -30ms !important; }
html.ds #device > .hc-nav-leaving { pointer-events: none !important; }

/* while the copy carries the poster, the page's own poster waits; it comes in under the copy as the copy lands */
html.ds #device .hc-carry .film-hero,
html.ds #device .film-hero.hc-landed { animation: none !important; }
html.ds #device .hc-carry .film-hero::before { opacity: 0 !important; transition: none !important; }
html.ds #device .hc-carry.hc-carry-land .film-hero::before { opacity: 1 !important; transition: opacity var(--motion-fast) var(--motion-curve) !important; }
/* and so do its blurred continuations (the dissolve under the title, hero-colour.css): they come in with it */
html.ds #device .hc-carry .film-hero:is(.hb-ready, .hb-css)::after,
html.ds #device .hc-carry:not(.hc-carry-land) .film-hero > .film-artwork-atmosphere { opacity: 0 !important; transition: none !important; }
html.ds #device .hc-carry.hc-carry-land .film-hero:is(.hb-ready, .hb-css)::after { opacity: 1 !important; transition: opacity var(--motion-fast) var(--motion-curve) !important; }
/* (lane SMOOTH, 20 October 2026) faded in by hero-transition.js itself as the copy lands: its own move, not a transition */
html.ds #device .hc-carry.hc-carry-land .film-hero > .film-artwork-atmosphere { transition: none !important; }

/* a shelf card going home: the viewer's dark goes, the card itself stays solid until it is on the shelf */
html.ds #device .fc-overlay.hc-card-home .fc-reveal-card { opacity: 1 !important; }

/* (17 October 2026) a film card sinks a little under the finger, at once, before its page is built */
html.ds #device .hc-pressed { transform: scale(.965); transition: transform var(--motion-fast) var(--motion-curve); }

/* (FILM OPEN, 4 November 2026) what the page's colour layer (hero-colour.js) settles while the film page is still held out of sight
   (ready-transition.js .rt-hold: built, decorated, its poster decoding) is simply there when the page is shown: its shade, its
   continuation and its room do not fade in over the page's own entrance afterwards */
html.ds #device > .screen.rt-hold .film-hero::after,
html.ds #device > .screen.rt-hold .film-hero > .film-gradient::before,
html.ds #device > .screen.rt-hold .film-hero > .film-gradient::after,
html.ds #device > .screen.rt-hold .film-hero > .film-artwork-atmosphere::before { transition: none !important; }

/* (FILM OPEN, 4 November 2026) the poster lands within the move: it comes in under the copy `fast` before the flight ends
   (hero-transition.js: hc-carry-land at slow - fast) and is whole as the copy has gone, so nothing of the poster is still fading
   once the move is over.
   The film page's content has no entrance of its own (triptic-fluidity.css gave it a 180 ms fade, and the hero a 720 ms resolve):
   the page arrives in ONE entrance, the move's (hero-transition.js entrance(), the rise, the three's move, or Reduce Motion's
   cross-fade), never a second fade inside it starting a few frames later */
html.ds #device .film-v5 .film-content { animation: none; }
/* (FILM OPEN) Reduce Motion: the film page arrives in the app's cross-fade only; its poster does not also scale and sharpen in
   (triptic-fluidity.css fluid-film-hero, 720 ms), which moved the title inside it */
@media (prefers-reduced-motion: reduce) { html.ds #device .film-v5 .film-hero { animation: none !important; } }
html.ds.reduce-motion #device .film-v5 .film-hero, html.ds #device.manual-reduced-motion .film-v5 .film-hero { animation: none !important; }

/* (FILM OPEN, 4 November 2026) a film page arriving in one of this layer's moves has no screen entrance of its own: the design
   system's ds-screen-arrive (design-system.css: from opacity .18, 8pt lower) took hold over the page's hold for a frame (a film
   page opened from another showed at 18 % before its move); the move's entrance is the page's only one */
html.ds #device > .screen.hc-arriving, html.ds #device > .screen.hc-arrived { animation: none !important; }
/* (and once it has arrived, hc-arrived: the entrance is over, it is not played when the move's own classes go) */
/* (FIRST OPEN, 4 November 2026) the copy draws the poster touched as an element (its own decoded picture), filling its layer */
html.ds #device > .hc-flight > .hc-flight-img > .hc-flight-pic {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: fill;
  margin: 0; padding: 0; border: 0; border-radius: inherit; opacity: 1; filter: none; transform: none; animation: none; transition: none;
}

/* ===== prototype-src/ds-surfaces.css ===== */
/* TRIPTIC ds-surfaces: posters as objects, and the room's light in depth (9 October 2026). Scoped under html.ds (kill
   switch ?ds=0). Record: hub/docs/SURFACES-2026-10-09.md. Runtime: none of its own for the posters (CSS only); the
   room's light layer is placed and, where the browser cannot run it on the scroll position, moved by ds-tab-scroll.js.

   1. POSTERS AS OBJECTS (owner, 8 October 2026). Every poster is the same object wherever it appears: Discover's
      "Try asking for" cards, Today's The Ten fan and its Coming Soon reel, Collections (the fans on its cards and a
      Collection's cover and films), the Library (Your Watchlist, the Watched row, the grids of the Watchlist, Watched
      and Recently viewed, the light table), The Ten's rows, Film DNA, the Friday 3 page, the interests fans, a film's
      connections. One set of tokens and one rule:
        --poster-radius   one corner, in proportion to the poster (6% of its width; on a 2:3 poster a circular
                          corner): 10pt on a 168pt poster, 6pt on a 96pt one, 2pt on a 28pt thumbnail. A printed card's
                          corner, whatever size it is drawn at.
        --poster-rim      a hairline of light along the top edge (lit from above).
        --poster-shade    the contact shadow just under it.
        --poster-shadow   the rim, the contact shadow and a soft shadow that takes the film's own colour where HERO's
                          colour extraction has set --poster-tint on the poster or a page around it (HERO's neutral
                          default on #device otherwise). --poster-tint is HERO's "r,g,b" triple, so it is read as
                          rgb(var(--poster-tint)). Declared on the poster itself, so it reads the tint where the poster is.
        --poster-press    the press: under a finger a poster (or the tile it is part of) goes down to .97, through the
                          app's one press (ds-core.js .ds-pressed, its timing and its spring back). Reduce Motion keeps
                          the app's quiet press (no scale).
      Exceptions, on purpose: Your three's panels (the arches are their shape; showpiece.css already lights their top
      edge and stands them on the floor), a film page's hero (it is the room, full bleed), stills and backdrops (not
      posters), and the share tickets (the poster is part of the ticket's printed face).

   2. THE ROOM'S LIGHT, IN DEPTH (owner, 8 October 2026: "background light moves at half speed, posters 1:1, nothing
      else moves"). ds-look.css paints the app's one room on the page: a wash, two pools and the air over the floor,
      scrolling 1:1 with the page (background-attachment: local). On a bound page (ds-tab-scroll.js: the five tabs and
      every pushed page) the light is lifted off the page into one layer, .ds-tsx-room, the scroller's first child: a
      sticky frame of no height (it takes no room and moves nothing; it rests at the top of the scroller's content box,
      so its light is drawn from the screen's top edge, --tsx-pad) holding one <i> that rises at half the page's speed.
      A scroll-driven animation runs it where the browser has one (Safari 26, Chromium 115); ds-tab-scroll.js writes
      the same translate elsewhere. The page itself keeps only the floor. Today keeps its marquee light as the wash
      (ds-tab-scroll.css), so its layer carries the pools and the air. Reduce Motion: the layer is not placed and the
      room scrolls with the page as before. Reduce Transparency: no wash, as ds-look. */

/* ============================================================================================== 1. posters */
html.ds {
  --poster-radius: 6% / 4%;
  --poster-rim: rgb(255 255 255 / .22);
  --poster-shade: rgb(0 0 0 / .36);
  --poster-press: .97;
}
html.ds #device :is(
  .ds-poster,
  .prompt-card.prompt-poster-card,
  .ds-frs.ds-fr-discover .prompt-card.prompt-poster-card, /* (own-art.css styles Discover's cards one class deeper) */
  .ds-ten-fan-card,
  .ds-cs-card:not(.ds-cs-end) > .ds-cs-art,
  .dslc-fan-p,
  .collection-cover-object > span,
  .collection-film-poster,
  .library-cover-posters > span,
  .dslc-poster-box,
  .dslc-fan-card,
  .dslc-thumb,
  .dslc-pick-poster, /* (15 October 2026: the Collections front page's picks and rows) */
  .dslc-row-thumb,
  .library-grid-poster,
  .dslc-table-poster,
  .ds-tt-row-poster,
  .fd-poster,
  .fp-poster,
  .dsy-fan-card,
  .film-connection-poster
) {
  --poster-shadow:
    -.5px -.5px 0 0 var(--poster-rim),
    0.4px 1px 2px var(--poster-shade),
    3.6px 10px 24px -10px color-mix(in srgb, rgb(var(--poster-tint, 0, 0, 0)) 50%, rgb(0 0 0 / .66));
  border-radius: var(--poster-radius) !important;
  box-shadow: var(--poster-shadow) !important;
  overflow: hidden;
}
/* what is drawn inside a poster (its picture, its stand-in) takes its corner */
html.ds #device :is(.ds-poster, .ds-ten-fan-card, .dslc-fan-p, .collection-film-poster, .dslc-poster-box, .dslc-fan-card, .dslc-thumb, .dslc-pick-poster, .dslc-row-thumb, .library-grid-poster, .ds-tt-row-poster, .fd-poster, .fp-poster, .dsy-fan-card, .film-connection-poster) > :is(img, .ds-poster-fallback) { border-radius: inherit; }
/* a poster's reflection on Today's floor is the same object upside down */
html.ds #device .ds-ten-reflect > img { border-radius: var(--poster-radius); }
/* the press: the app's one press (ds-core.js), at the poster's depth. A poster that is its own control goes down to
   .97; a tile that carries a poster (a poster and its caption) goes down to .97 as one, rather than the .96 of a button */
html.ds #device :is(.ds-poster, .prompt-card.prompt-poster-card, .ds-cs-card, .dsy-fan-card).ds-pressed:not(.ds-pressed-quiet),
html.ds #device .ds-pressed:not(.ds-pressed-quiet):has(:is(.ds-poster, .ds-ten-fan-card, .ds-cs-art, .dslc-fan-p, .collection-cover-object, .collection-film-poster, .library-cover-posters, .dslc-poster-box, .dslc-thumb, .library-grid-poster, .dslc-table-poster, .ds-tt-row-poster, .fd-poster, .fp-poster, .film-connection-poster)) {
  scale: var(--poster-press) !important;
}

/* ===================================================================================== 2. the room's light */
/* the page keeps the floor; the light is the layer's (the selector is ds-look's own, with this class, so it wins by
   coming later; the Reduce Transparency forms have their own) */
html.ds #device > .screen.ds-tsx-roomed:not(.cg-room):not(.film-screen):not(.ds-sheet-host):not(.first-run-screen):not(.trip-critical-layer),
html.ds.reduce-transparency #device > .screen.ds-tsx-roomed:not(.cg-room):not(.film-screen):not(.ds-sheet-host):not(.first-run-screen):not(.trip-critical-layer),
html.ds #device.manual-solid > .screen.ds-tsx-roomed:not(.cg-room):not(.film-screen):not(.ds-sheet-host):not(.first-run-screen):not(.trip-critical-layer) {
  background-image: var(--ds-room-floor) !important;
  background-size: 100% 100% !important;
  background-attachment: scroll !important;
}
html.ds #device > .screen .ds-tsx-room {
  position: sticky; top: 0; z-index: -1; display: block; height: 0; margin: 0; padding: 0; border: 0;
  overflow: visible; pointer-events: none; flex: none; align-self: stretch;
  /* its light reaches 900pt down: layout containment keeps that from lengthening a short page (seen in the test
     browser: the Watchlist with two films became scrollable) */
  contain: layout;
}
html.ds #device > .screen .ds-tsx-room > i {
  position: absolute; display: block; pointer-events: none;
  top: calc(-1 * var(--tsx-pad, 0px)); left: calc(-1 * var(--tsx-pad-l, 0px)); right: calc(-1 * var(--tsx-pad-r, 0px));
  height: var(--ds-room-height);
  background-image: var(--ds-room-wash), var(--ds-room-pools), var(--ds-room-air);
  background-size: 100% var(--ds-room-wash-height), 100% var(--ds-room-wash-height), 100% var(--ds-room-height), 100% var(--ds-room-height), 100% var(--ds-room-height), 100% var(--ds-room-height);
  background-repeat: no-repeat;
  will-change: translate;
}
/* Today: the wash is its marquee light; Reduce Transparency: no wash */
html.ds #device > .screen .ds-tsx-room.is-today > i,
html.ds.reduce-transparency #device > .screen .ds-tsx-room > i,
html.ds #device.manual-solid > .screen .ds-tsx-room > i {
  background-image: var(--ds-room-pools), var(--ds-room-air);
  background-size: 100% var(--ds-room-height), 100% var(--ds-room-height), 100% var(--ds-room-height), 100% var(--ds-room-height);
}
@media (prefers-reduced-transparency: reduce) {
  html.ds #device > .screen .ds-tsx-room > i {
    background-image: var(--ds-room-pools), var(--ds-room-air);
    background-size: 100% var(--ds-room-height), 100% var(--ds-room-height), 100% var(--ds-room-height), 100% var(--ds-room-height);
  }
}
/* half the page's speed: the frame stands still at the top, the light rises 900pt over 1800pt of scroll (then it has
   left the screen). ds-tab-scroll.js writes the same where the browser cannot run this. */
@keyframes ds-tsx-room { from { translate: 0 0; } to { translate: 0 -900px; } }
@supports (animation-timeline: scroll()) {
  html.ds #device > .screen .ds-tsx-room.is-css > i { animation: ds-tsx-room linear both; animation-timeline: scroll(nearest block); animation-range: 0px 1800px; }
}
/* Reduce Motion: ds-tab-scroll.js places no layer; were one left, it holds still with the page */
@media (prefers-reduced-motion: reduce) {
  html.ds #device > .screen .ds-tsx-room { display: none; }
}
html.ds.reduce-motion #device > .screen .ds-tsx-room,
html.ds #device.manual-reduced-motion > .screen .ds-tsx-room { display: none; }

/* stray depth, stood down: the Library's and Collections' large title drifted up faster than the page as it scrolled
   (triptic-fluidity.css 8px, triptic-expansion.css 12px). It now moves with the page; its handover is the capsule's. */
html.ds #device > .screen:is(.library-screen, .explore-screen) .destination-heading { translate: none !important; transform: none !important; }

/* a film's room (the blurred poster's light) is moved by ds-tab-scroll.js: half the page's speed and the phone's tilt */
html.ds #device > .screen.film-v5 .film-artwork-atmosphere.ds-tsx-atmos { will-change: translate; }

/* (release polish, 28 October 2026; the owner: Triptics titles broke mid-word, "Mockumenta ry") ONE rule for the titles of every tile,
   card and row: a line breaks between words. Only a single word too long for its tile is hyphenated ("Mockumen-tary"); each
   style's own clamp (two lines) still ends a long title with an ellipsis. These styles said overflow-wrap: anywhere, which let the
   browser cut any word at any letter wherever a column was narrow. */
html.ds #device :is(.dslc-edition-req, .dslc-next-title,
  .also-liked .al-name, .fd-film-title, .fd-deep-name, .fd-deep-cell-title, .fd-fact-value, .film-next-copy > strong, .collection-detail-copy h1,
  .library-grid-poster + strong, .watchlist-grid strong, .collection-film-card strong) {
  overflow-wrap: break-word; word-break: normal; -webkit-hyphens: auto; hyphens: auto;
}
/* (2 November 2026; the owner's screenshot: "An old love has un-/finished business.") A Collection's card title is never hyphenated:
   it breaks between words only, wrapped evenly (a single word too long for its card still breaks rather than overflowing). */
html.ds #device :is(.dslc-card-title, .dslc-row-title, .dslc-pick-title, .api-collection-card .explore-card-copy strong, .saved-collection-title strong) {
  overflow-wrap: break-word; word-break: normal; -webkit-hyphens: manual; hyphens: manual; text-wrap: pretty;
}
html.ds #device .dslc-card .dslc-card-title { text-wrap: balance; }
/* the Triptics' KEPT / REVEALED / SEALED chip: on its own line under the title, a step clear of it, never squeezed */
html.ds #device .dslc-edition .dslc-can-chip { margin-top: 2px; white-space: nowrap; flex: none; }

/* ===== prototype-src/ds-loading.css ===== */
/* TRIPTIC ds-loading (LOADING lane, 9 October 2026 evening): how things arrive. Script: ds-loading.js.
   Record: hub/docs/LOADING-2026-10-09b.md.
   A poster still on its way is a soft wash of its own two colours (--lp-a, --lp-b: the server's palette, clamped like
   every room tint), never a grey box; it sharpens out of the wash when its pixels are decoded (the script runs that,
   transform / opacity / filter only). Placeholders in the content's own shapes carry one calm shimmer (a translate).
   Reduce Motion: the poster fades in (no blur, no scale) and the placeholders stand still. */

/* ---- the wash: the poster's own colour lit from the top, its second colour low, a soft light across ---- */
html.ds #device [data-lp-frame],
html.ds #device img[data-lp-own] {
  --lp-a: 120, 110, 150; --lp-b: 60, 56, 80;
}
html.ds #device [data-lp-frame],
html.ds #device img[data-lp-own] {
  background-color: rgb(var(--lp-b));
  background-image:
    radial-gradient(120% 70% at 30% 18%, rgba(var(--lp-a), .95), transparent 70%),
    radial-gradient(110% 60% at 75% 100%, rgba(var(--lp-b), .9), transparent 72%),
    linear-gradient(170deg, rgba(var(--lp-a), .7), rgba(var(--lp-b), .9));
}
/* in a frame, the picture waits unseen over its wash (the script brings it in) */
html.ds #device img[data-lp="framed"] { opacity: 0; }
/* while the poster is on its way, the words-only stand-in some layers keep behind it stays out of sight */
html.ds #device [data-lp-frame] > :is(.library-grid-placeholder, .collection-poster-fallback, .share-trio-poster-fallback, .yc-nopost, .ds-poster-fallback:not(.ds-poster-fallback-img)) { visibility: hidden; }
html.ds #device [data-lp-frame]:has(> img[data-lp]) > :is(.library-grid-placeholder, .collection-poster-fallback, .share-trio-poster-fallback, .yc-nopost) { visibility: hidden; }

/* ---- no layout shift: a poster image reserves its 2:3 before it arrives (only where its height was left to it) ---- */
html.ds #device img[data-lp-poster] { aspect-ratio: auto 2 / 3; }

/* ---- the film page's hero: the wash under the poster until it is ready, then it fades away over the poster ---- */
html.ds #device .verified-film-hero > .lp-hero-wash {
  --lp-a: 120, 110, 150; --lp-b: 60, 56, 80;
  position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none;
  background:
    radial-gradient(110% 60% at 50% 22%, rgba(var(--lp-a), .9), transparent 72%),
    radial-gradient(120% 50% at 50% 100%, rgba(var(--lp-b), .8), transparent 74%),
    linear-gradient(180deg, rgba(var(--lp-a), .55), rgba(var(--lp-b), .7));
  -webkit-mask: var(--ds-film-fade, none); mask: var(--ds-film-fade, none);
  transition: opacity var(--motion-slow) var(--motion-curve);
}
/* (JOIN, 10 October 2026: opacity only. The wash goes while lane HERO's poster flies onto the page, and everything in
   that flight moves by transform and opacity alone: tests/hero-browser.test.mjs) */
html.ds #device .verified-film-hero > .lp-hero-wash.is-out { opacity: 0; }
html.ds.reduce-motion #device .verified-film-hero > .lp-hero-wash.is-out,
html.ds #device.manual-reduced-motion .verified-film-hero > .lp-hero-wash.is-out { filter: none; transition-duration: var(--motion-normal); }
@media (prefers-reduced-motion: reduce) { html.ds #device .verified-film-hero > .lp-hero-wash.is-out { filter: none; transition-duration: var(--motion-normal); } }
/* the hero's crop follows the poster's focus (ds-film-share draws it at 50% 24%) */
html.ds #device .film-v5.recon-film .film-hero.lp-crop[style*="--poster"]::before { background-position: var(--lp-hero-pos, 50% 24%); }

/* ---- placeholders shaped like the content: one calm shimmer over each shape ---- */
html.ds #device .lp-boned { position: relative; overflow: hidden; isolation: isolate; }
html.ds #device .lp-boned > .lp-sheen {
  position: absolute; inset: 0; z-index: 1; display: block; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .075) 50%, transparent 70%);
  translate: -100% 0;
  animation: lp-shimmer 2400ms var(--motion-breathe) calc(var(--lp-i, 0) * 60ms) infinite both;
}
@keyframes lp-shimmer { 0% { translate: -100% 0; } 70% { translate: 100% 0; } 100% { translate: 100% 0; } }
/* the shimmer replaces the older breathing of these placeholders: one way of saying "on its way" everywhere */
html.ds #device .ds-ten-card.is-loading .ds-ten-art.lp-boned,
html.ds #device .ds-cs.is-loading .ds-cs-art.lp-boned { animation: none; }
html.ds #device .dslc-skel.lp-boned > .dslc-sweep { display: none; }
html.ds.mo-hidden #device .lp-sheen { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { html.ds #device .lp-boned > .lp-sheen { animation: none; opacity: 0; } }
html.ds.reduce-motion #device .lp-boned > .lp-sheen,
html.ds #device.manual-reduced-motion .lp-boned > .lp-sheen,
html.ds.mo-low-power #device .lp-boned > .lp-sheen { animation: none; opacity: 0; }

/* the shapes themselves (for a shape this layer draws) */
html.ds #device .lp-bone { display: block; background: var(--c-fill-2); }
html.ds #device .lp-line { height: 12px; border-radius: var(--r-chip); }
html.ds #device .lp-round { width: 44px; height: 44px; border-radius: 50%; background: var(--c-fill-1); }

/* ---- The Ten's page while its list comes: the hero keeps the shape of the film that lands there ---- */
html.ds #device .ds-tt-hero > .lp-tt-shape {
  position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 4; display: grid; pointer-events: none;
  grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 14px 12px; align-items: end;
}
html.ds #device .lp-tt-shape .lp-tt-rank { display: flex; gap: 4px; }
html.ds #device .lp-tt-shape .lp-tt-rank > b { width: 30px; height: 46px; border-radius: var(--r-row); background: var(--c-fill-1); }
html.ds #device .lp-tt-shape .lp-tt-lines { display: grid; gap: 8px; }
html.ds #device .lp-tt-shape .lp-line.is-eyebrow { width: 42%; height: 11px; }
html.ds #device .lp-tt-shape .lp-line.is-title { width: 72%; height: 22px; border-radius: var(--r-row); }
html.ds #device .lp-tt-shape .lp-line.is-meta { width: 52%; }
html.ds #device .lp-tt-shape .lp-tt-acts { grid-column: 1 / -1; display: flex; gap: 10px; }
html.ds #device .lp-tt-shape .lp-tt-acts > b { height: 44px; flex: 0 0 34%; border-radius: var(--r-pill); background: var(--c-fill-1); }
html.ds #device .lp-tt-shape .lp-tt-acts > b + b { flex-basis: 48%; }

/* ---- the film page's shape, while a film's details are still on their way ---- */
html.ds #device > .lp-film-shape {
  --lp-a: 120, 110, 150; --lp-b: 60, 56, 80;
  position: absolute; inset: 0; z-index: 280; overflow: hidden; pointer-events: none;
  background: var(--c-stage);
}
html.ds #device > .lp-film-shape .lp-film-hero { position: relative; height: clamp(420px, 72svh, 600px); overflow: hidden; }
html.ds #device > .lp-film-shape .lp-film-wash {
  position: absolute; inset: 0; display: block;
  background:
    radial-gradient(110% 60% at 50% 22%, rgba(var(--lp-a), .9), transparent 72%),
    radial-gradient(120% 50% at 50% 100%, rgba(var(--lp-b), .8), transparent 74%),
    linear-gradient(180deg, rgba(var(--lp-a), .5), rgba(var(--lp-b), .6));
}
/* the poster already on screen, held soft: the page is the same film, still arriving */
html.ds #device > .lp-film-shape .lp-film-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%;
  filter: blur(14px); opacity: .62; scale: 1.06;
}
html.ds #device > .lp-film-shape .lp-film-fade { position: absolute; inset: 0; display: block; background: linear-gradient(180deg, rgba(5, 5, 7, .2) 0, transparent 30%, rgba(5, 5, 7, .55) 70%, var(--c-stage) 100%); }
html.ds #device > .lp-film-shape .lp-film-top { position: absolute; left: 20px; right: 20px; top: calc(env(safe-area-inset-top, 0px) + 24px); display: flex; justify-content: space-between; }
html.ds #device > .lp-film-shape .lp-film-title { position: absolute; left: 20px; right: 20px; bottom: 24px; display: grid; gap: 10px; }
html.ds #device > .lp-film-shape .lp-line.is-eyebrow { width: 32%; height: 11px; }
html.ds #device > .lp-film-shape .lp-line.is-title { width: 70%; height: calc(var(--lh-title-1, 34px) - 6px); border-radius: var(--r-row); }
html.ds #device > .lp-film-shape .lp-line.is-meta { width: 56%; }
html.ds #device > .lp-film-shape .lp-film-body { display: grid; gap: 16px; padding: 4px 20px 0; }
html.ds #device > .lp-film-shape .lp-film-actions { height: 64px; border-radius: var(--r-pill); background: var(--c-fill-1); }
html.ds #device > .lp-film-shape .lp-film-card { height: 168px; border-radius: var(--r-card); background: var(--c-fill-1); }
html.ds #device > .lp-film-shape .lp-film-card.is-short { height: 96px; }
@media (prefers-reduced-transparency: reduce) { html.ds #device > .lp-film-shape .lp-film-poster { display: none; } }
/* (R2-B, 22 October 2026) the poster light drawn once (poster-light.js dress): the live blur is no longer needed */
html.ds #device > .lp-film-shape .lp-film-poster.pl-lit { filter: none; }

/* ===== prototype-src/ds-pull-leader.css ===== */
/* TRIPTIC ds-pull-leader (LOADING lane, 9 October 2026 evening): pull to refresh as a film's countdown leader.
   Script: ds-pull-leader.js. Record: hub/docs/LOADING-2026-10-09b.md.
   TRIPTIC's own drawing of the leader: the frame's circle and inner ring, the cross, a violet sweep that goes round
   once for each number, the numeral; while the page refreshes a hand turns (a rotate). Over the page, under the
   status bar, centred. Reduce Motion: a ring that fills and holds still. */
html.ds #device > .lp-leader {
  --ds-leader: 52px;
  position: absolute; z-index: 60; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 10px);
  width: var(--ds-leader); height: var(--ds-leader);
  display: grid; place-items: center; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18, 16, 26, .82) 0 62%, rgba(18, 16, 26, .55) 63% 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 0 0 .5px rgba(255, 255, 255, .14);
  opacity: 0; translate: -50% -10px; scale: .72;
  will-change: opacity, translate, scale;
}
html.ds #device > .lp-leader > .lp-ld-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html.ds #device > .lp-leader .lp-ld-ring { fill: none; stroke: var(--c-label-2); stroke-width: 1.5; }
html.ds #device > .lp-leader .lp-ld-inner { fill: none; stroke: var(--c-label-3); stroke-width: 1; }
html.ds #device > .lp-leader .lp-ld-cross { fill: none; stroke: var(--c-label-4); stroke-width: 1; }
html.ds #device > .lp-leader .lp-ld-sweep { fill: none; stroke: color-mix(in srgb, var(--c-seal) 55%, transparent); stroke-width: 22; }
html.ds #device > .lp-leader .lp-ld-fill { fill: none; stroke: var(--c-label-1); stroke-width: 2; opacity: 0; }
html.ds #device > .lp-leader .lp-ld-num {
  position: relative; z-index: 1;
  font: 700 calc(var(--ds-leader, 44px) * .45)/1 var(--font-ui);
  font-variant-numeric: tabular-nums; color: var(--c-label-1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
/* the hand that turns while the page refreshes (it shows only then) */
html.ds #device > .lp-leader .lp-ld-hand {
  position: absolute; left: calc(50% - .75px); top: 3px; width: 1.5px; height: calc(50% - 3px);
  transform-origin: 50% 100%; border-radius: var(--r-chip); background: var(--c-label-1); opacity: 0;
}
html.ds #device > .lp-leader.is-on .lp-ld-hand { opacity: .9; }
html.ds #device > .lp-leader.is-on .lp-ld-sweep { stroke-dasharray: 100 100; }
html.ds #device > .lp-leader .lp-ld-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Reduce Motion: a ring that fills as you pull; no sweep, no numbers, no hand */
html.ds #device > .lp-leader.is-calm .lp-ld-sweep,
html.ds #device > .lp-leader.is-calm .lp-ld-cross,
html.ds #device > .lp-leader.is-calm .lp-ld-num,
html.ds #device > .lp-leader.is-calm .lp-ld-hand { display: none; }
html.ds #device > .lp-leader.is-calm .lp-ld-fill { opacity: 1; }
html.ds #device > .lp-leader.is-calm .lp-ld-ring { stroke: var(--c-label-4); }

@media (prefers-reduced-transparency: reduce) { html.ds #device > .lp-leader { background: var(--c-stage-raised); } }

/* ===== prototype-src/ds-library-plus.css ===== */
/* TRIPTIC ds-library-plus: search your Library, the Watchlist's chips and "Pick one for me", film titles as you type in
   Discover, Watched as a film strip (owner, 9 October 2026). Script pair: ds-library-plus.js. Record:
   hub/docs/LIBRARY-2026-10-09b.md. Tokens only; sizes in type units so the largest text grows them; every movement
   on the motion tokens, with a Reduce Motion path at the end. */

/* ------------------------------------------------------------------------------------------------ search your Library */
html.ds #device .dslp-search { position: relative; display: block; margin: 14px 0 6px; }
html.ds #device .dslp-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
html.ds #device .dslp-searching :is(.dslc-hero, .library-watchlist-cover, .dslc-shelf, .dslc-list, .dslc-list-header, .dslc-footnote, .library-section, .library-stat-line, .library-local-note, [data-fc-shelf]) { display: none !important; }
html.ds #device .dslp-results { display: grid; gap: 22px; margin: 18px 0 28px; }
html.ds #device .dslp-results[hidden] { display: none; }
html.ds #device .dslp-group-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; padding: 0 4px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); text-transform: uppercase; color: var(--c-label-3); }
html.ds #device .dslp-group-head .ds-num { color: var(--c-label-4); }
html.ds #device .dslp-hits { margin: 0; overflow: hidden; border-radius: var(--r-row); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); }
html.ds #device .dslp-hit {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; margin: 0; padding: 10px 14px; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: var(--c-label-1); text-align: left; transition-property: scale, opacity;
}
html.ds #device .dslp-hit + .dslp-hit { box-shadow: inset 0 1px 0 var(--c-line); }
html.ds #device .dslp-hit:active { background: var(--c-fill-2); }
html.ds #device .dslp-hit:focus-visible { outline: 1px solid var(--c-focus); outline-offset: -2px; }
html.ds #device .dslp-hit-poster, html.ds #device .dslp-hit-mini { position: relative; flex: 0 0 auto; display: block; overflow: hidden; border-radius: var(--r-chip); background: var(--c-fill-2); box-shadow: inset 0 0 0 1px var(--c-line); }
html.ds #device .dslp-hit-poster { width: 40px; aspect-ratio: 2 / 3; }
html.ds #device .dslp-hit-trio-posters { display: flex; flex: 0 0 auto; gap: 3px; }
html.ds #device .dslp-hit-mini { width: 26px; aspect-ratio: 2 / 3; opacity: .55; }
html.ds #device .dslp-hit-mini.is-match { opacity: 1; box-shadow: inset 0 0 0 1px var(--c-line-strong), 0 0 0 1px var(--c-lamp); }
html.ds #device :is(.dslp-hit-poster, .dslp-hit-mini, .dslp-frame-poster, .dslp-pick-poster) > :is(img, .ds-poster-fallback) { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; object-fit: cover; border-radius: inherit; }
/* the drawn stand-in lies under the poster; the poster, once it loads, covers it entirely */
html.ds #device :is(.dslp-hit-poster, .dslp-hit-mini, .dslp-frame-poster, .dslp-pick-poster) > img { z-index: 1; }
html.ds #device :is(.dslp-hit-poster, .dslp-hit-mini) .ds-poster-fallback > * { display: none; }
html.ds #device .dslp-hit-copy { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; }
html.ds #device .dslp-hit-copy strong { overflow: hidden; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); color: var(--c-label-1); text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html.ds #device .dslp-hit-copy small { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); font-variant-numeric: tabular-nums; }
html.ds #device .dslp-hit .ds-row-chevron { flex: 0 0 auto; }

/* ------------------------------------------------------------------------------------------------ Flick in an empty state */
html.ds #device .dslp-empty { margin: 8px 0 24px; }
html.ds #device .dslp-spoolie { display: grid; place-items: center; margin: 0 auto 4px; }
html.ds #device .dslp-spoolie .spc { margin: 0; }
html.ds #device .dslp-spoolie .spc-art { width: 112px; }
html.ds #device .dslp-spoolie .sps-empty { margin: 0; }

/* ------------------------------------------------------------------------------------------------ the Watchlist's chips */
html.ds #device .dslp-bar { position: relative; z-index: 6; display: grid; gap: 12px; margin: 2px 0 22px; }
/* one calm rail: it scrolls sideways when the chips are wider than the page (and wraps at the largest text, below) */
html.ds #device .dslp-chips { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 -20px; padding: 2px 20px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding: 0 20px; }
html.ds #device .dslp-chips::-webkit-scrollbar { display: none; }
html.ds #device .dslp-chips .dslp-chip-holder { flex: 0 0 auto; }
html.ds #device .library-page-header .dslp-sort-holder { position: static; display: grid; place-items: center; justify-self: end; }
html.ds #device .library-page-header:has(.dslp-menu) { position: relative; z-index: 8; }
html.ds #device .dslp-sort-btn { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; color: var(--c-label-1); }
html.ds #device .dslp-sort-btn.is-on { box-shadow: inset 0 0 0 1px var(--c-lamp); }
html.ds #device .dslp-sort-btn:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 2px; }
html.ds #device .dslp-chip-holder { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
html.ds #device .dslp-chip {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; min-height: 40px; margin: 0; padding: 0 14px; border: 1px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-fill-1); box-shadow: none; color: var(--c-label-1); font: 500 var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: 0; white-space: nowrap;
  transition: background-color var(--motion-fast) var(--motion-curve), color var(--motion-fast) var(--motion-curve), border-color var(--motion-fast) var(--motion-curve), scale var(--motion-press) var(--motion-curve);
}
html.ds #device .dslp-chip > span { overflow: hidden; text-overflow: ellipsis; }
html.ds #device .dslp-chip svg { flex: 0 0 auto; opacity: .7; }
html.ds #device .dslp-chip:active { scale: .97; }
html.ds #device .dslp-chip.is-on { background: var(--c-lamp); border-color: transparent; color: var(--c-lamp-ink); }
html.ds #device .dslp-chip:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 2px; }
html.ds #device .dslp-check { display: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m3.5 9.5 3.6 3.5 7.4-8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m3.5 9.5 3.6 3.5 7.4-8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
html.ds #device .dslp-chip.is-on .dslp-check { display: block; }
html.ds #device .dslp-menu { left: 0; right: auto; transform-origin: 0 0; max-width: calc(100% - 0px); max-height: min(60vh, 420px); overflow-y: auto; }
html.ds #device .dslp-menu.is-end { transform-origin: 100% 0; }
/* the order's menu lies in the page header: none of the header's own lettering reaches it */
html.ds #device .dslp-menu .dslc-menu-item > span { margin: 0; font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--c-label-1); }
html.ds #device .dslp-bar-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
html.ds #device .dslp-summary { flex: 1 1 12ch; min-width: 0; margin: 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); font-variant-numeric: tabular-nums; }
html.ds #device .dslp-pick-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 18px 0 14px; border: 1px solid color-mix(in srgb, var(--c-seal-hi) 40%, var(--c-line)); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-seal) 18%, var(--c-fill-1)); box-shadow: var(--e-1); color: var(--c-label-1); font: 600 var(--fs-subhead)/var(--lh-subhead) var(--font-ui); white-space: nowrap;
  transition: scale var(--motion-press) var(--motion-curve), opacity var(--motion-fast) var(--motion-curve);
}
html.ds #device .dslp-pick-btn:active { scale: .97; }
html.ds #device .dslp-pick-btn:disabled { opacity: .4; }
html.ds #device .dslp-pick-btn:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 2px; }
html.ds #device .dslp-pick-btn svg { color: var(--c-seal-hi); }
html.ds #device .dslc-grid > .dslc-tile[hidden] { display: none; }

/* ------------------------------------------------------------------------------------------------ Pick one for me */
html.ds #device .dslp-pick { position: absolute; inset: 0; z-index: 90; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
html.ds #device .dslp-pick-dim { position: absolute; inset: 0; background: color-mix(in srgb, var(--c-stage) 78%, transparent); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); }
html.ds #device .dslp-pick-card {
  position: relative; display: grid; justify-items: center; gap: 18px; width: min(100%, 360px); max-height: 100%; overflow-y: auto; padding: 28px 22px 22px; border-radius: var(--r-sheet);
  background: var(--mat-chrome-solid); box-shadow: inset 0 0 0 1px var(--c-line-strong), var(--e-3); perspective: 900px; overscroll-behavior: contain;
}
html.ds #device .dslp-pick-stage { position: relative; display: grid; width: min(56%, 190px); aspect-ratio: 2 / 3; }
html.ds #device .dslp-pick-stage > * { grid-area: 1 / 1; }
html.ds #device .dslp-pick-leader { position: relative; display: block; border-radius: var(--r-control); background: var(--c-stage); box-shadow: inset 0 0 0 1px var(--c-line);
  background-image: radial-gradient(circle at 50% 50%, transparent 32%, var(--c-line) 33%, transparent 34%), linear-gradient(transparent 49.6%, var(--c-line) 50%, transparent 50.4%), linear-gradient(90deg, transparent 49.6%, var(--c-line) 50%, transparent 50.4%); }
html.ds #device .dslp-pick-poster { position: relative; display: block; overflow: hidden; border-radius: var(--r-control); box-shadow: inset 0 0 0 1px var(--c-line), var(--e-2); transform-origin: 50% 80%; backface-visibility: hidden; }
html.ds #device .dslp-pick-copy { display: grid; justify-items: center; gap: 6px; width: 100%; text-align: center; }
html.ds #device .dslp-pick-eyebrow { margin: 0; font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-seal-hi); }
html.ds #device .dslp-pick-copy h2 { margin: 0; font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2); color: var(--c-label-1); text-wrap: balance; outline: none; }
html.ds #device .dslp-pick-meta { margin: 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
html.ds #device .dslp-pick-where { margin: 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-ok); }
html.ds #device .dslp-pick-where[hidden] { display: none; }
html.ds #device .dslp-pick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 10px; }
html.ds #device .dslp-pick-actions > button { width: 100%; min-width: 0; min-height: 50px; margin: 0; white-space: normal; }
html.ds #device .dslp-pick-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; }
html.ds #device .dslp-pick-close i { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--c-fill-2);
  -webkit-mask: none; mask: none; position: relative; }
html.ds #device .dslp-pick-close i::before, html.ds #device .dslp-pick-close i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; border-radius: var(--r-pill); background: var(--c-label-2); rotate: 45deg; }
html.ds #device .dslp-pick-close i::after { rotate: -45deg; }
html.ds #device .dslp-pick-close:focus-visible { outline: 1px solid var(--c-focus); outline-offset: -4px; }
/* iPhone Duo, inner display: the poster on the left leaf, its words on the right; nothing in the fold */
html.ds #device .dslp-pick.is-spanned { place-items: stretch; padding: 0; }
html.ds #device .dslp-pick.is-spanned .dslp-pick-card {
  width: 100%; max-height: none; height: 100%; border-radius: 0; padding: 0; background: none; box-shadow: none;
  grid-template-columns: var(--dslp-leaf) var(--dslp-gap) minmax(0, 1fr); grid-template-rows: 1fr; align-items: center;
}
html.ds #device .dslp-pick.is-spanned .dslp-pick-stage { grid-column: 1; width: min(62%, 260px); }
html.ds #device .dslp-pick.is-spanned .dslp-pick-copy { grid-column: 3; width: min(100% - 48px, 360px); justify-self: center; }
html.ds #device .dslp-pick.is-spanned .dslp-pick-close { top: 16px; right: 16px; }

/* ------------------------------------------------------------------------------------------------ Watched as a film strip */
html.ds #device .dslp-view-btn { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; color: var(--c-label-1); }
html.ds #device .dslp-view-btn:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 2px; }
html.ds #device .dslp-strip { display: grid; gap: 16px; margin: 4px -20px 28px; }
html.ds #device .dslp-strip-month { position: relative; display: grid; height: calc(40 * var(--type-unit)); margin: 0; padding: 0 20px; overflow: hidden; }
html.ds #device .dslp-strip-month > span { grid-area: 1 / 1; align-self: end; font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); color: var(--c-label-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.ds #device .dslp-strip-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; min-height: calc(56 * var(--type-unit)); padding: 0 20px; }
html.ds #device .dslp-strip-words { display: grid; gap: 2px; flex: 1 1 14ch; min-width: 0; }
html.ds #device .dslp-strip-caption strong { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); color: var(--c-label-1); }
html.ds #device .dslp-strip-caption small { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds #device .dslp-strip-caption .secondary-button { flex: 0 0 auto; width: auto; min-width: 96px; min-height: 44px; margin: 0; padding: 0 20px; }
html.ds #device .dslp-strip-gate {
  position: relative; overflow: hidden; padding: 24px 0 44px; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none;
  background: color-mix(in srgb, var(--c-stage) 92%, var(--c-lamp));
  box-shadow: inset 0 1px 0 var(--c-line), inset 0 -1px 0 var(--c-line);
}
html.ds #device .dslp-strip-gate.is-dragging { cursor: grabbing; }
/* the perforations, top and bottom, fixed to the film itself (they travel with the reel below) */
html.ds #device .dslp-strip-reel { position: relative; display: flex; gap: 14px; width: max-content; will-change: transform; }
html.ds #device .dslp-strip-reel::before, html.ds #device .dslp-strip-reel::after {
  content: ""; position: absolute; left: -400px; right: -400px; height: 8px; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 6px, color-mix(in srgb, var(--c-lamp) 16%, transparent) 6px 16px, transparent 16px 22px);
  border-radius: var(--r-chip);
}
html.ds #device .dslp-strip-reel::before { top: -16px; }
html.ds #device .dslp-strip-reel::after { bottom: -16px; }
html.ds #device .dslp-frame-slot { position: relative; flex: 0 0 auto; width: clamp(128px, 44cqi, 210px); }
html.ds #device .dslp-strip { container-type: inline-size; }
html.ds #device .dslp-frame {
  display: block; width: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: var(--r-chip); background: none; box-shadow: none;
  opacity: .5; scale: .92; transition: opacity var(--motion-normal) var(--motion-curve), scale var(--motion-normal) var(--motion-spring);
}
html.ds #device .dslp-frame.is-centre { opacity: 1; scale: 1; }
html.ds #device .dslp-frame:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 3px; }
html.ds #device .dslp-frame-poster { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--r-chip); background: var(--c-fill-2); box-shadow: inset 0 0 0 1px var(--c-line); pointer-events: none; }
html.ds #device .dslp-edge-code { position: absolute; left: 2px; top: calc(100% + 20px); font: 600 var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-eyebrow); color: color-mix(in srgb, var(--c-caution) 80%, transparent); white-space: nowrap; pointer-events: none; }
html.ds #device .dslp-strip-gate-mark { position: absolute; top: 1px; left: 50%; z-index: 1; width: 2px; height: 6px; margin-left: -1px; border-radius: var(--r-pill); background: var(--c-lamp); opacity: .8; }
/* iPhone Duo, inner display: the strip keeps to the left leaf; the month and the film stand on the right */
html.ds #device .dslp-strip.is-spanned { grid-template-columns: var(--dslp-leaf) var(--dslp-gap) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; margin-right: 0; container-type: normal; }
html.ds #device .dslp-strip.is-spanned .dslp-strip-gate { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
html.ds #device .dslp-strip.is-spanned .dslp-strip-month { grid-column: 3; grid-row: 2; height: calc(44 * var(--type-unit)); padding: 0; }
html.ds #device .dslp-strip.is-spanned .dslp-strip-caption { grid-column: 3; grid-row: 3; padding: 0; align-items: flex-start; flex-direction: column; }
html.ds #device .dslp-strip.is-spanned .dslp-strip-words { flex: 0 0 auto; }
html.ds #device .dslp-strip.is-spanned .dslp-frame-slot { width: clamp(128px, calc(var(--dslp-leaf) * .42), 220px); }
html.ds #device .dslp-strip-on .dslc-controls { display: none; }
html.ds #device .watchlist-grid[hidden] { display: none; }

/* ------------------------------------------------------------------------------------------------ Discover: film titles as you type */
html.ds #device .dslp-titles { display: flex; flex-wrap: nowrap; gap: 8px; margin: 6px -4px 2px; padding: 2px 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
html.ds #device .dslp-titles::-webkit-scrollbar { display: none; }
html.ds #device .dslp-titles .dslp-title-chip { flex: 0 0 auto; max-width: 78%; }
html.ds #device .dslp-titles[hidden] { display: none; }
html.ds #device .dslp-title-chip {
  display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%; min-height: 36px; margin: 0; padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--c-beam) 30%, var(--c-line)); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-beam) 8%, var(--c-fill-1)); box-shadow: none; color: var(--c-label-1); font: 500 var(--fs-subhead)/var(--lh-subhead) var(--font-ui); text-align: left;
  transition: scale var(--motion-press) var(--motion-curve);
}
html.ds #device .dslp-title-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ds #device .dslp-title-chip small { flex: 0 0 auto; font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); color: var(--c-label-3); }
html.ds #device .dslp-title-chip:active { scale: .97; }
html.ds #device .dslp-title-chip:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 2px; }

/* ------------------------------------------------------------------------------------------------ the largest text */
html.ds[data-text-size="largest"] #device .dslp-chips { flex-wrap: wrap; margin: 0; padding: 2px 0; overflow: visible; }
html.ds[data-text-size="largest"] #device .dslp-titles { flex-wrap: wrap; overflow: visible; }
html.ds[data-text-size="largest"] #device .dslp-titles .dslp-title-chip { max-width: 100%; }
html.ds[data-text-size="largest"] #device .dslp-chip, html.ds[data-text-size="largest"] #device .dslp-pick-btn { white-space: normal; text-align: left; }
html.ds[data-text-size="largest"] #device .dslp-bar-foot { display: grid; justify-items: stretch; }
html.ds[data-text-size="largest"] #device .dslp-pick-btn { justify-content: center; }
html.ds[data-text-size="largest"] #device .dslp-pick-actions { grid-template-columns: minmax(0, 1fr); }
html.ds[data-text-size="largest"] #device .dslp-hit-trio-posters .dslp-hit-mini:not(.is-match) { display: none; }

/* ------------------------------------------------------------------------------------------------ Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  html.ds #device :is(.dslp-chip, .dslp-pick-btn, .dslp-frame, .dslp-title-chip) { transition: none; }
  html.ds #device .dslp-frame { scale: 1; }
}
html.ds #device.manual-reduced-motion :is(.dslp-chip, .dslp-pick-btn, .dslp-frame, .dslp-title-chip) { transition: none; }
html.ds #device.manual-reduced-motion .dslp-frame { scale: 1; }

/* ===== prototype-src/cinematic-universe.css ===== */
/* TRIPTIC cinematic-universe: THE CINEMATIC UNIVERSE (lane CU-WEB, 13 October 2026; hub/docs/CU-WEB-2026-10-13.md).
   Runtime pair: cinematic-universe.js; the sky itself is one canvas (cinematic-universe-gl.js or -2d.js).

   The look: space. Almost no chrome while it drifts: the one Back (POLISH's chrome circle) and a small information circle,
   both quiet. After a tap, the open still's words fade in under it (or beside it on a wide screen, on the other display
   of a Duo): the title in the title face, "year · director", Film page and Add to Watchlist, the credit.
   Motion: transform and opacity only, on the tokens (motion-system.css section 1). Reduce Motion: fades only.
   No downloading (owner's rule): no long-press callout, no drag, no selection, no context menu, a transparent shield over
   the one picture the calm list may show, and nothing of the universe is printed. */

html.ds #device .cu-screen {
  position: absolute; inset: 0; overflow: hidden !important; padding: 0 !important;
  background: #030305; color: var(--c-label-1);
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
html.ds #device .cu-screen > .global-trio-atmosphere { display: none; }
/* (14 Oct 2026, lane MOTION, item 11: one ambient motion per screen, hub/docs/MOTION-2026-10-14.md) The sky is this screen's one
   motion. The global .screen::before (violet pools, a 24px blur, drifting for ever) sat under it and ran the whole time: held still. */
html.ds #device .cu-screen::before { animation: none; inset: 0; }
html.ds #device .cu-screen img { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; pointer-events: none; }

/* ------------------------------------------------------------------ the sky */
html.ds #device .cu-sky { position: absolute; top: 0; bottom: 0; left: 0; width: var(--cu-room-w, 100%); overflow: hidden; touch-action: none; background: #030305; }
html.ds #device .cu-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity var(--motion-slow) linear; }
html.ds #device .cu-screen.is-hung.is-drawn .cu-canvas { opacity: 1; }
/* (R2-B, 22 October 2026) the calm first view, drifting gently forward while the live sky is built behind it
   (cinematic-universe.js whenCalm); it gives way, by opacity, once the sky has drawn (is-drawn).
   Transform and opacity only; a once-only drift on the ceremony token, none under Reduce Motion or Low Power.
   (3 November 2026, the owner's recording) It was the doorway's own picture of the sky, blown up to the screen: the journey's
   golden start as big flat blocks, whatever band of colour the sky then began in. Now it is neutral: the dark of space with a
   faint colourless light where the journey leads, so the way in never shows another band's colours or a block. */
html.ds #device .cu-calm {
  position: absolute; inset: 0; display: block; pointer-events: none;
  background: radial-gradient(ellipse 70% 42% at 50% 47%, rgba(150, 152, 165, .16), rgba(150, 152, 165, .04) 55%, transparent 80%), #030305; opacity: .58; transform-origin: 50% 47%;
  animation: cu-calm-drift 6s var(--motion-curve) both;
  transition: opacity var(--motion-slow) linear;
}
html.ds #device .cu-screen.is-drawn .cu-calm { opacity: 0; }
@keyframes cu-calm-drift { from { transform: scale(1); } to { transform: scale(1.08); } }
html.ds.reduce-motion #device .cu-calm, html.ds #device.manual-reduced-motion .cu-calm, html.ds.mo-low-power #device .cu-calm { animation: none; }
@media (prefers-reduced-motion: reduce) { html.ds #device .cu-calm { animation: none; } }
html.ds #device .cu-state:not(:empty) { position: absolute; z-index: 5; inset: 42% 24px auto; display: grid; justify-items: center; gap: 14px; margin: 0; text-align: center; color: var(--c-label-2); font: var(--fs-callout)/var(--lh-callout) var(--font-ui); }
html.ds #device .cu-note-slot { position: absolute; z-index: 7; left: 12px; right: 12px; bottom: calc(var(--dv-safe-bottom, 0px) + 28px); }
html.ds #device .cu-note-slot:empty { display: none; }
/* frames nearby: for VoiceOver over the canvas; on its own the page where no canvas can draw */
html.ds #device .cu-nearby.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
html.ds #device .cu-screen.is-static .cu-canvas { visibility: hidden; }
html.ds #device .cu-screen.is-static .cu-nearby { position: absolute; inset: calc(var(--dv-safe-top, 0px) + 72px) 0 0; overflow-y: auto; padding: 8px var(--cc-inset, 20px) calc(var(--dv-safe-bottom, 0px) + 40px); }
html.ds #device .cu-nearby-title { margin: 0 0 10px; color: var(--c-label-3); font: var(--fw-eyebrow, 600) var(--fs-eyebrow, 11px)/var(--lh-eyebrow, 14px) var(--font-ui); letter-spacing: var(--tr-eyebrow, .08em); text-transform: uppercase; }
html.ds #device .cu-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
html.ds #device .cu-list button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 6px 0; border: 0; background: none; color: inherit; text-align: left; }
html.ds #device .cu-swatch { flex: 0 0 auto; width: 88px; aspect-ratio: 16 / 9; border-radius: 3px; box-shadow: 0 0 0 3px #000; }
html.ds #device .cu-list-words { display: grid; min-width: 0; }
html.ds #device .cu-list-words b { font: 600 var(--fs-subhead)/var(--lh-subhead) var(--font-ui); }
html.ds #device .cu-list-words small { color: var(--c-label-2); font: var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }

/* ------------------------------------------------------------------ the bar: the one Back, the information */
html.ds #device .cu-top {
  position: absolute; z-index: 20; top: 0; left: 0; width: var(--cu-room-w, 100%);
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--dv-safe-top, 0px) + 8px) var(--cc-inset, 20px) 14px;
  background: linear-gradient(rgb(3 3 5 / .55), rgb(3 3 5 / 0)); pointer-events: none;
}
html.ds #device .cu-top > * { pointer-events: auto; }
html.ds #device .cu-info { display: grid; place-items: center; opacity: .72; transition: opacity var(--motion-fast) linear; }
html.ds #device .cu-info svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
html.ds #device .cu-screen.is-focus .cu-info { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------------ the open still's words (the still itself is drawn on the canvas) */
html.ds #device .cu-focus { position: absolute; z-index: 12; inset: 0; touch-action: none; }
html.ds #device .cu-focus[hidden] { display: none; }
html.ds #device .cu-shade { position: absolute; inset: 0; }
html.ds #device .cu-words {
  position: absolute; left: 0; top: 60%; width: 100%; box-sizing: border-box; padding: 0 var(--cc-inset, 20px);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--motion-normal) linear, transform var(--motion-slow) var(--motion-curve, cubic-bezier(.2,.8,.2,1));
}
html.ds #device .cu-words.is-shown { opacity: 1; transform: none; pointer-events: auto; }
html.ds #device .cu-words.is-quiet { transition: none; }
html.ds #device .cu-focus-title {
  margin: 0; outline: none; text-wrap: balance; color: var(--c-label-1);
  font: 600 var(--fs-title-2, 22px)/var(--lh-title-2, 28px) var(--font-ui); /* the title face: ds-look.css section 6 */
}
html.ds #device .cu-focus-title:focus { outline: none !important; box-shadow: none !important; }
html.ds #device .cu-byline { margin: 4px 0 0; color: var(--c-label-2); font: var(--fs-subhead, 15px)/var(--lh-subhead, 20px) var(--font-ui); font-variant-numeric: tabular-nums; }
html.ds #device .cu-byline:empty { display: none; }
html.ds #device .cu-seen { margin: 8px 0 0; color: var(--c-label-2); font: var(--fs-footnote, 13px)/var(--lh-footnote, 18px) var(--font-ui); }
html.ds #device .cu-seen[hidden] { display: none; }
html.ds #device .cu-acts { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; }
html.ds #device .cu-acts > .cu-pill { flex: 1 1 140px; min-width: 0; padding-left: 12px; padding-right: 12px; }
html.ds #device .cu-acts > .cu-pill[hidden] { display: none; }
html.ds #device .cu-credit { margin: 14px 0 0; color: var(--c-label-3); font: var(--fs-caption-1, 12px)/var(--lh-caption-1, 16px) var(--font-ui); }
html.ds #device .cu-words :is(h2, p) { -webkit-user-select: text; user-select: text; }
/* the calm list's one picture (no canvas at all): screen-sized, shielded, never saved */
html.ds #device .cu-static-pic { position: relative; margin: 0 calc(var(--cc-inset, 20px) * -1) 18px; aspect-ratio: 16 / 9; overflow: hidden; background: #111; border-top: 10px solid #000; border-bottom: 10px solid #000; }
html.ds #device .cu-static-pic[hidden] { display: none; }
html.ds #device .cu-static-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
html.ds #device .cu-shield { position: absolute; inset: 0; z-index: 3; background: transparent; -webkit-touch-callout: none; }
html.ds #device .cu-screen.is-static .cu-focus { background: #030305; overflow-y: auto; }
html.ds #device .cu-screen.is-static .cu-words { position: relative; left: auto !important; top: auto !important; width: auto !important; padding-top: calc(var(--dv-safe-top, 0px) + 72px); }
/* a Duo's inner display: the words on the other display */
html.ds #device .cu-screen.is-split .cu-focus { left: 0; }

/* ------------------------------------------------------------------ pills, the information sheet */
html.ds #device .cu-pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 20px; border: 0; border-radius: 24px;
  background: var(--c-lamp, #f3eee6); color: var(--c-lamp-ink, #0b0b10); font: 600 var(--fs-subhead, 15px)/var(--lh-subhead, 20px) var(--font-ui); text-align: center;
}
html.ds #device .cu-pill.is-quiet { background: rgb(255 255 255 / .1); color: var(--c-label-1); box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .2); }
html.ds #device .cu-pill.is-wide { width: 100%; }
html.ds #device .cu-pill[aria-busy="true"] { opacity: .6; }
html.ds #device .cu-sheet { position: absolute; z-index: 30; inset: 0; display: grid; align-items: end; background: rgb(3 3 5 / .76); animation: cu-in var(--motion-fast) linear both; }
html.ds #device .cu-sheet-card {
  justify-self: center; width: calc(100% - 16px); max-width: 560px; max-height: calc(100% - var(--dv-safe-top, 0px) - 24px); overflow-y: auto;
  margin: 0 8px calc(var(--dv-safe-bottom, 0px) + 8px); padding: 22px 16px 16px; border-radius: 28px; background: #121019;
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .16); animation: cu-rise var(--motion-normal) var(--motion-spring) both; -webkit-user-select: text; user-select: text;
}
html.ds #device .cu-sheet h2 { margin: 0 0 6px; outline: none; font: 600 var(--fs-title-2)/var(--lh-title-2) var(--font-ui); /* the title face: ds-look.css section 6 */ }
html.ds #device .cu-sheet p { margin: 0 0 14px; color: var(--c-label-2); font: var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }
html.ds #device .cu-sheet a { color: var(--c-label-1); }
html.ds #device .cu-sheet-acts { display: grid; gap: 8px; }
@keyframes cu-rise { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cu-in { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ the way in: the portal, first on Collections */
/* (15 Oct 2026, lane PORTAL; hub/docs/PORTAL-2026-10-15.md) A portal, not a card: full width, about 2:1, its edges cut soft into the
   page (a mask, no border, no rounded box), a faint nebula of the colour journey and the nearest frames large enough to read as
   stills. It starts as a baked picture of the sky (the <img>); the live canvas lies over it, invisible, and fades in only after it has
   drawn smoothly for a second (cinematic-universe.js section 3: data-door still, fading, live). Words inside, bottom left:
   the kind (small, capitals) over the name, and nothing else. Its slow drift is Collections' one ambient motion. Hidden, never torn
   down, while a search or a browsed list is on the page (ds-library-collections.css). Transform and opacity only. */
html.ds .cu-block { display: block; position: relative; margin: 4px calc(var(--cc-inset, 20px) * -1) 0; }
html.ds .cu-door { display: block; position: relative; overflow: hidden; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html.ds .cu-door-sky {
  position: relative; display: block; aspect-ratio: 2 / 1; overflow: hidden; background: none; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%), linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%), linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  transition: transform var(--motion-normal) var(--motion-spring, cubic-bezier(.2,.8,.2,1));
}
html.ds .cu-door:active .cu-door-sky { transform: scale(.99); }
/* (17 October 2026, lane ART-C; hub/docs/SCENE-ART-2026-10-17.md) THE BACK ROW. The doorway is a cinema seen from the back row (the
   owner's painting, a still layer of its own: .cu-door-cinema.art-layer) and the sky plays on its screen. The room takes the soft
   edges (the mask moves from the sky to the room) and the sky sits exactly on the painted screen (its place in the painting, in
   per cent: x 19.13 to 80.78, y 15.12 to 56.06 of the 1150 x 767 crop), with a little of its light spilling onto the frame.
   With no painting (data-art="failed") the room is the old 2:1 doorway and the sky fills it, mask and all. */
html.ds .cu-door-room { position: relative; display: block; aspect-ratio: 1150 / 767; max-width: 560px; margin: 0 auto; overflow: hidden; background: var(--c-stage);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 74%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 74%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
html.ds .cu-door-room { transition: transform var(--motion-normal) var(--motion-spring, cubic-bezier(.2,.8,.2,1)); }
html.ds .cu-door-cinema { position: absolute; inset: 0; display: block; pointer-events: none; }
html.ds .cu-door-cinema-img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
html.ds .cu-door-room:not([data-art="failed"]) > .cu-door-sky { position: absolute; left: 19.13%; top: 15.12%; width: 61.65%; height: 40.94%; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; border-radius: 1px; box-shadow: 0 0 22px 3px rgb(255 232 200 / .16); }
html.ds .cu-door-room:not([data-art="failed"]) > .cu-door-sky .cu-door-still { background: #040407; }
/* (20 October 2026, lane SMOOTH; hub/docs/SMOOTH-2026-10-20.md) ONE SCENE, AT ONCE: the doorway's first frame is a veil, the whole
   doorway composed into one tiny picture (cinematic-universe.js DOOR_FIRST, inline: no network), over the room (or inside the
   sky when there is no painting). The painting, the sky and the live canvas arrive under it unseen, and it fades away in one
   move once the painting and the sky are both decoded (data-first="sharp"). Opacity only; the painting itself stays still. */
html.ds .cu-door-first { position: absolute; inset: 0; display: block; pointer-events: none; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 1; transition: opacity var(--motion-normal) var(--motion-curve, cubic-bezier(.2,.8,.2,1)); }
html.ds .cu-door[data-first="sharp"] .cu-door-first { opacity: 0; }
html.ds.reduce-motion .cu-door-first, html.ds #device.manual-reduced-motion .cu-door-first { transition-duration: var(--motion-fast); }
html.ds .cu-door-room[data-art="failed"] { aspect-ratio: auto; max-width: none; -webkit-mask-image: none; mask-image: none; background: none; }
html.ds .cu-door-room[data-art="failed"] > .cu-door-cinema { display: none; }
html.ds .cu-door:active .cu-door-room:not([data-art="failed"]) { transform: scale(.99); }
html.ds .cu-door:active .cu-door-room:not([data-art="failed"]) > .cu-door-sky { transform: none; }
@media (prefers-reduced-motion: reduce) { html.ds .cu-door-room { transition: none; } }
html.ds.reduce-motion .cu-door-room, html.ds #device.manual-reduced-motion .cu-door-room { transition: none; }
html.ds .cu-door-still, html.ds .cu-door-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-user-drag: none; pointer-events: none; }
html.ds .cu-door-still { object-fit: cover; background: #040407; }
html.ds .cu-door-canvas { opacity: 0; transition: opacity var(--motion-slow) linear; }
html.ds .cu-door-sky:is([data-door="fading"], [data-door="live"]) .cu-door-canvas { opacity: 1; }
html.ds .cu-door-sky[data-door="live"] .cu-door-still { visibility: hidden; }
/* (16 October 2026) painted at once from the real stills when they are here: shown straight away, not after the gate */
html.ds .cu-door-sky[data-door="painted"] .cu-door-canvas { opacity: 1; transition-duration: var(--motion-fast); }
/* a finger brightens the portal: a soft light where it lands (opacity only) */
html.ds .cu-door-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--motion-normal) linear; background: radial-gradient(circle at var(--cu-x, 50%) var(--cu-y, 50%), rgb(255 238 216 / .3), rgb(255 238 216 / .08) 38%, rgb(255 238 216 / 0) 70%); }
html.ds .cu-door-sky.is-touched .cu-door-glow { opacity: 1; transition-duration: var(--motion-fast); }
/* the words: a quiet floor of shade under them so they read over the lightest colour, at the largest text */
html.ds .cu-door-words { isolation: isolate; position: absolute; left: var(--cc-inset, 20px); right: var(--cc-inset, 20px); bottom: 14px; display: grid; gap: 2px; pointer-events: none; text-align: left; }
html.ds .cu-door-words::before { content: ""; position: absolute; z-index: -1; left: -28px; right: -28px; bottom: -22px; top: -26px; background: radial-gradient(120% 130% at 8% 100%, rgb(4 4 7 / .78), rgb(4 4 7 / .5) 45%, rgb(4 4 7 / 0) 78%); }
html.ds .cu-door-kind { color: var(--c-label-2); font: var(--fw-eyebrow, 600) var(--fs-caption-2, 11px)/var(--lh-caption-2, 14px) var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
html.ds .cu-door-title { color: var(--c-label-1); font: 600 var(--fs-title-2, 22px)/var(--lh-title-2, 28px) var(--font-ui); /* the title face: ds-look.css section 6 */ text-wrap: balance; }
html.ds .cu-door:focus-visible { outline: none; }
html.ds .cu-door:focus-visible .cu-door-sky { outline: 3px solid var(--c-seal-hi, #a78bfa); outline-offset: -3px; }
/* a wide screen (an iPad, the Duo's inner display) keeps the portal a window, centred, not a wall */
@media (min-width: 700px) { html.ds .cu-block { max-width: 720px; margin-left: auto; margin-right: auto; } }

/* ------------------------------------------------------------------ preferences */
/* Reduce Motion: the words only fade (cinematic-universe.js moves nothing on its own) */
html.ds #device.manual-reduced-motion .cu-screen .cu-words, html.ds.reduce-motion #device .cu-screen .cu-words { transform: none; transition: opacity var(--motion-fast) linear; }
html.ds #device.manual-reduced-motion .cu-screen .cu-sheet-card, html.ds.reduce-motion #device .cu-screen .cu-sheet-card, html.ds.reduce-motion .cu-door-sky, html.ds.reduce-motion .cu-door-glow { animation: none !important; transition: none; } html.ds.reduce-motion .cu-door-canvas, html.ds #device.manual-reduced-motion .cu-door-canvas { transition: none; } /* (4 November 2026) shown: painted once, still, with the real stills */
@media (prefers-reduced-motion: reduce) { html.ds #device .cu-screen .cu-words { transform: none; transition: opacity var(--motion-fast) linear; } html.ds #device .cu-screen .cu-sheet-card { animation: none !important; } html.ds .cu-door-sky, html.ds .cu-door-glow { transition: none; } html.ds .cu-door-canvas { transition: none; } }
html.ds.reduce-transparency #device .cu-top, html.ds #device.manual-solid .cu-top { background: #030305; }
@media (prefers-reduced-transparency: reduce) { html.ds #device .cu-top { background: #030305; } }
/* no print: nothing of the universe goes onto paper */
@media print { html.ds #device .cu-screen, html.ds .cu-door { display: none !important; } }

/* (20 October 2026, lane SMOOTH; universe-flick.js) Once in a blue moon: Flick, in his space suit, lost among the stills. Placed
   at the sky's top left and moved by its own animation (transform and opacity only); his line in a small bubble beside him. */
html.ds #device .cu-screen > .cu-flick { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
html.ds #device .cu-flick-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
html.ds #device .cu-flick-body { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; gap: 6px; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; will-change: transform; }
html.ds #device .cu-flick-spin { display: block; width: 72px; height: 72px; flex: none; }
html.ds #device .cu-flick-spin .flk, html.ds #device .cu-flick-spin .flk-body, html.ds #device .cu-flick-spin img { display: block; width: 100%; height: 100%; }
html.ds #device .cu-flick-say { display: block; max-width: 190px; margin-top: 4px; transform-origin: 0 50%; }
html.ds #device .cu-flick-bubble { display: block; padding: 8px 11px; border-radius: 14px; background: rgb(250 247 242 / .94); color: #17141f; font: var(--fw-callout, 500) var(--fs-footnote, 13px)/var(--lh-footnote, 18px) var(--font-ui); text-align: left; box-shadow: 0 6px 18px rgb(0 0 0 / .35); }
/* Reduce Motion / Low Power: he never comes (universe-flick.js blocked: "reduced"); nothing here to still */

/* ===== prototype-src/find-film.css ===== */
/* TRIPTIC find-film: FIND A FILM (lane FINDFILM, 11 October 2026). Script pair: find-film.js. Record:
   hub/docs/FINDFILM-2026-10-13.md. Tokens only; sizes in type units so the largest text grows them; every movement on
   the motion tokens (and nothing moves under Reduce Motion). */

/* ------------------------------------------------------------------------------------------------ the way in: Discover's header only
   (owner, 13 October 2026). find-film.js marks only Discover's header .ff-has-entry, so every rule below, the iPad rule
   that lets the profile circle give way included, applies on Discover alone; the other tabs' headers are untouched. */
html.ds #device .app-header.ff-has-entry { display: flex; align-items: center; gap: 10px; }
html.ds #device .app-header.ff-has-entry > .brand-home { margin-right: auto; }
/* the control itself (owner, 13 October 2026; his reference workspace/work/hero-2026-10-13/owner/find-a-film-button.jpg;
   record hub/docs/HERO-2026-10-13.md): a capsule of frosted glass. A thin dark violet lets the page through, blurred;
   a hairline rim catches the light along its top edge (and faintly along its foot); a soft glow lies inside it; the
   magnifier and the words are white, medium weight. The fill and the rim are two backgrounds on one box (the rim is the
   border-box layer showing through a transparent 1pt border), so it costs one backdrop filter and no extra layers. */
html.ds #device .ff-entry {
  --ff-glass: rgb(176 168 226 / .15);
  --ff-glass-lo: rgb(124 116 184 / .12);
  --ff-rim: linear-gradient(172deg, rgb(255 255 255 / .5) 0, rgb(240 236 255 / .2) 30%, rgb(214 204 255 / .1) 58%, rgb(226 218 255 / .42) 100%);
  position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px;
  box-sizing: border-box; min-width: 44px; min-height: 44px; margin: 0; padding: 0 17px 0 14px;
  border: 1px solid transparent; border-radius: var(--r-pill, 999px);
  background:
    radial-gradient(130% 100% at 50% -36%, rgb(255 255 255 / .1), rgb(255 255 255 / 0) 64%) padding-box,
    linear-gradient(180deg, var(--ff-glass), var(--ff-glass-lo)) padding-box,
    var(--ff-rim) border-box;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .12),
    inset 0 0 12px rgb(206 196 255 / .14),
    0 8px 22px rgb(0 0 0 / .28), 0 1px 3px rgb(0 0 0 / .2);
  color: #fff;
  font: 500 calc(15 * var(--type-unit, 1px))/1 var(--font-ui); letter-spacing: -.01em; white-space: nowrap;
  -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25);
  transition: scale var(--motion-fast) var(--motion-curve);
}
html.ds #device .ff-entry svg { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
html.ds #device .ff-entry:active { scale: .96; filter: brightness(1.18); }
html.ds #device .ff-entry:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* the narrowest phones: the magnifier alone, a circle (still named "Find a film").
   (13 November 2026, big text) At the larger sizes the words stay. They used to go (and at x1.1 too, by a rule for a
   profile circle that Discover's header has kept off the display since 28 October), leaving the one control on
   Discover without its label. The capsule and the TRIPTIC mark share a 375pt header at x1.35 with room to spare; where
   they would not (a member's "+" tag beside the mark), the row wraps and Find a film takes a line of its own, at the
   trailing edge. Above x1.35 (the Accessibility sizes, preview "ax-text") its words stop at x1.35, as a navigation
   bar's buttons do on iOS, so the header keeps its shape and the words stay whole. */
html.ds[data-text-size]:not([data-text-size="standard"]):not([data-ipad]) #device .app-header.ff-has-entry { flex-wrap: wrap; row-gap: 8px; }
html.ds[data-text-size]:not([data-text-size="standard"]):not([data-ipad]) #device .app-header.ff-has-entry > .ff-entry { margin-left: auto; }
html.ds[data-text-size="largest"] #device .ff-entry { padding: 0 14px 0 12px; gap: 6px; }
html.ds[data-text-ax] #device .ff-entry { font-size: calc(15px * 1.35); }
@media (max-width: 359px) { html.ds #device .ff-entry { width: 44px; padding: 0; justify-content: center; } html.ds #device .ff-entry-name { display: none; } }
/* iPad: the tab bar sits in the header row, centred (ipad-layout.css). Where its edge comes near, the magnifier alone;
   on the narrowest iPads (portrait) Discover's profile circle gives way to it too: You is in the tab bar beside it. */
@media (max-width: 1099px) { html.ds[data-ipad="regular"] #device .ff-entry { width: 44px; padding: 0; justify-content: center; } html.ds[data-ipad="regular"] #device .ff-entry-name { display: none; } }
@media (max-width: 899px) { html.ds[data-ipad="regular"] #device .ff-has-entry > .profile-control { display: none !important; } }
/* Reduce Transparency: the same capsule, opaque (nothing shows through it), its rim and glow kept */
html.ds.reduce-transparency #device .ff-entry, html.ds #device.manual-solid .ff-entry { --ff-glass: rgb(44 36 76); --ff-glass-lo: rgb(30 25 54); --ff-rim: linear-gradient(180deg, rgb(150 140 190), rgb(84 76 120) 38%, rgb(66 60 98) 64%, rgb(98 90 138)); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) {
  html.ds #device .ff-entry { --ff-glass: rgb(44 36 76); --ff-glass-lo: rgb(30 25 54); --ff-rim: linear-gradient(180deg, rgb(150 140 190), rgb(84 76 120) 38%, rgb(66 60 98) 64%, rgb(98 90 138)); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) { html.ds #device .ff-entry { border-color: ButtonText; } }

/* ------------------------------------------------------------------------------------------------ the page */
html.ds #device .ff-screen {
  position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden !important; padding: 0 !important;
  background: var(--c-stage); color: var(--c-label-1);
}
html.ds #device .ff-screen > .global-trio-atmosphere { display: none; }
html.ds #device .ff-main { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-width: 0; min-height: 0; width: 100%; max-width: 640px; margin: 0 auto; }
html.ds #device .ff-top {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px;
  padding: max(12px, calc(var(--dv-safe-top, env(safe-area-inset-top, 0px)) + 8px)) var(--cc-inset, 20px) 6px;
}
html.ds #device .ff-title { margin: 0; min-width: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--fs-headline, 17px)/var(--lh-headline, 22px) var(--font-ui); color: var(--c-label-1); }
html.ds #device .ff-field { position: relative; margin: 6px var(--cc-inset, 20px) 10px; }
html.ds #device .ff-field > svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; z-index: 1; fill: none; stroke: var(--c-label-3); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
html.ds #device .ff-input {
  display: block; width: 100%; min-width: 0; height: calc(50 * var(--type-unit, 1px)); min-height: 48px; margin: 0; padding: 0 46px 0 42px;
  border: 1px solid var(--c-line); border-radius: var(--r-row, 14px); background: var(--c-fill-2); box-sizing: border-box;
  font: 400 calc(17 * var(--type-unit, 1px))/calc(24 * var(--type-unit, 1px)) var(--font-ui); color: var(--c-label-1);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--motion-fast) var(--motion-curve);
}
html.ds #device .ff-input::placeholder { color: var(--c-label-3); }
html.ds #device .ff-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* (pages polish, 28 October 2026; the owner: a bright cyan glow) the field in focus: its own edge in the app's accent, two points
   wide, and no glow or second ring round it */
html.ds #device .ff-input:focus { border-color: var(--c-focus); outline: none; box-shadow: inset 0 0 0 1px var(--c-focus); }
html.ds #device .ff-input:focus-visible { outline: none !important; }
html.ds #device .ff-field .ff-clear { top: 50%; translate: 0 -50%; }
html.ds #device .ff-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px var(--cc-inset, 20px) max(28px, calc(env(safe-area-inset-bottom, 0px) + 20px)); }
html.ds #device .ff-intro { margin: 2px 4px 22px; color: var(--c-label-2); font: var(--fs-subhead, 15px)/var(--lh-subhead, 20px) var(--font-ui); }
html.ds #device .ff-intro[hidden], html.ds #device .ff-list[hidden], html.ds #device .ff-note[hidden], html.ds #device .ff-none[hidden], html.ds #device .ff-recent[hidden], html.ds #device .ff-empty[hidden], html.ds #device .ff-aside[hidden] { display: none; }

/* the results: one calm list of rows (the Library's rows) */
html.ds #device :is(.ff-list, .ff-recent-list) { margin: 0; padding: 0; list-style: none; overflow: hidden; border-radius: var(--r-row, 14px); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); }
html.ds #device .ff-recent-list > li { margin: 0; padding: 0; }
html.ds #device .ff-row {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: calc(72 * var(--type-unit, 1px)); margin: 0; padding: 10px 14px; box-sizing: border-box;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--c-label-1); text-align: left; cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-curve), opacity var(--motion-fast) var(--motion-curve);
}
html.ds #device .ff-list > .ff-row + .ff-row, html.ds #device .ff-recent-list > li + li .ff-row { box-shadow: inset 0 1px 0 var(--c-line); }
html.ds #device .ff-row:active, html.ds #device .ff-row.is-active { background: var(--c-fill-2); }
html.ds #device .ff-row:focus-visible { outline: 1px solid var(--c-focus); outline-offset: -2px; }
/* (SEND, 27 October 2026) a result being opened answers with the lift (ready-transition.css), not a dimmer row: the dim, the
   press and the active shade took turns (dim, bright, dim, bright) while its record loaded (the owner's still-1936) */
html.ds #device .ff-row[aria-busy="true"] { opacity: 1; }
html.ds #device .ff-row.rt-lift { background: var(--c-fill-2); transition-property: none; }
html.ds #device .ff-poster { position: relative; flex: 0 0 auto; display: block; width: calc(40 * var(--type-unit, 1px)); max-width: 56px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--r-chip, 6px); background: var(--c-fill-2); box-shadow: inset 0 0 0 1px var(--c-line); }
html.ds #device :is(.ff-poster, .ff-aside-poster) > :is(img, .ds-poster-fallback) { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; object-fit: cover; border-radius: inherit; }
html.ds #device :is(.ff-poster, .ff-aside-poster) > img { z-index: 1; }
html.ds #device .ff-poster .ds-poster-fallback > * { display: none; }
html.ds #device .ff-copy { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; }
html.ds #device .ff-copy strong { overflow: hidden; font: var(--fw-headline, 600) var(--fs-headline, 17px)/var(--lh-headline, 22px) var(--font-ui); color: var(--c-label-1); text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html.ds #device .ff-copy small { font: var(--fw-footnote, 400) var(--fs-footnote, 13px)/var(--lh-footnote, 18px) var(--font-ui); color: var(--c-label-2); font-variant-numeric: tabular-nums; }
html.ds #device .ff-row .ds-row-chevron { flex: 0 0 auto; }
html.ds #device .ff-note { margin: 12px 4px 0; color: var(--c-label-3); font: var(--fs-footnote, 13px)/var(--lh-footnote, 18px) var(--font-ui); }

/* recent searches */
html.ds #device .ff-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; padding: 0 4px; }
html.ds #device .ff-recent-head h2 { margin: 0; font: var(--fw-footnote, 600) var(--fs-footnote, 13px)/var(--lh-footnote, 18px) var(--font-ui); letter-spacing: var(--tr-footnote, .02em); text-transform: uppercase; color: var(--c-label-3); }
html.ds #device .ff-recent-clear { min-width: 44px; min-height: 44px; margin: 0 -8px 0 0; padding: 0 8px; border: 0; background: none; box-shadow: none; color: var(--c-seal-hi); -webkit-text-fill-color: var(--c-seal-hi); font: 600 var(--fs-subhead, 15px)/1 var(--font-ui); } /* the one link look's colour and weight (ds-finish.css .ds-link; 28 October 2026) */
html.ds #device .ff-recent-clear:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-chip, 6px); }

/* Flick: before anything is typed, and when nothing has that name */
html.ds #device :is(.ff-empty, .ff-none, .ff-aside-idle) { display: grid; justify-items: center; gap: 8px; margin: 12px 0 0; padding: 4px 8px 12px; text-align: center; }
html.ds #device .ff-none h3 { margin: 4px 0 0; }
html.ds #device :is(.ff-none, .ff-aside-idle) p { max-width: 32ch; margin: 0; color: var(--c-label-2); font: var(--fs-subhead, 15px)/var(--lh-subhead, 20px) var(--font-ui); }
html.ds #device .ff-none .secondary-button { width: auto; min-width: 140px; min-height: 44px; margin: 10px 0 0; padding: 0 22px; }
html.ds #device .ff-spoolie { display: grid; justify-items: center; }

/* ------------------------------------------------------------------------------------------------ two columns: the Duo's inner display, iPad */
html.ds #device .ff-screen.is-split { grid-template-columns: var(--ff-leaf, minmax(320px, 46%)) var(--ff-gap, 0px) minmax(0, 1fr); }
html.ds #device .ff-screen.is-split .ff-main { grid-column: 1; max-width: none; }
html.ds #device .ff-screen.is-split .ff-aside { grid-column: 3; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 32px; overflow: hidden; }
html.ds #device .ff-screen.is-split:not(.is-folded) .ff-aside { box-shadow: inset 1px 0 0 var(--c-line); }
html.ds #device .ff-screen.is-split .ff-intro { margin-bottom: 18px; }
html.ds #device .ff-screen.is-split .ff-empty { display: none; }
html.ds #device .ff-aside-film { display: grid; justify-items: center; gap: 6px; width: min(100%, 340px); text-align: center; }
html.ds #device .ff-aside-poster { position: relative; display: block; width: min(62%, 220px); aspect-ratio: 2 / 3; margin: 0 0 12px; overflow: hidden; border-radius: var(--r-card, 12px); background: var(--c-fill-2); box-shadow: inset 0 0 0 1px var(--c-line), 0 24px 48px -18px rgb(0 0 0 / .7); }
html.ds #device .ff-aside-film h2 { margin: 0; font: 600 var(--fs-title-2, 22px)/var(--lh-title-2, 28px) var(--font-ui); color: var(--c-label-1); }
html.ds #device .ff-aside-film p { margin: 0; color: var(--c-label-2); font: var(--fs-subhead, 15px)/var(--lh-subhead, 20px) var(--font-ui); font-variant-numeric: tabular-nums; }
html.ds #device .ff-aside-film .secondary-button { width: auto; min-width: 150px; min-height: 44px; margin: 14px 0 0; padding: 0 24px; }

/* iPad: the page keeps its own columns (the reading-width padding every other page takes is not for it) */
html.ds[data-ipad="regular"] #device > .screen.ff-screen { padding-left: 0 !important; padding-right: 0 !important; }
html.ds[data-ipad="regular"] #device .ff-screen.is-split:not(.is-folded) { grid-template-columns: minmax(380px, 42%) 0 minmax(0, 1fr); }
html.ds[data-ipad="regular"] #device .ff-screen.is-split:not(.is-folded) .ff-main { padding-left: clamp(12px, 2vw, 28px); }

/* ------------------------------------------------------------------------------------------------ preferences */
@media (prefers-reduced-motion: reduce) { html.ds #device :is(.ff-entry, .ff-row, .ff-input) { transition: none; } }
html.ds.reduce-motion #device :is(.ff-entry, .ff-row, .ff-input), html.ds #device.manual-reduced-motion :is(.ff-entry, .ff-row, .ff-input) { transition: none; }
/* (release polish, 28 October 2026; the owner) Discover's header has one control, Find a film: the round profile button left it (the
   You tab is the way to the profile). It stays in the markup as the place other layers anchor to (find-film.js, membership.js's
   TRIPTIC+ badge), off the display and so out of VoiceOver's order */
html.ds #device .discover-screen header.app-header > .profile-control { display: none !important; }

/* ------------------------------------------------------------------------------------------------ the header row, fitted for both
   states (29 October 2026; the owner, of Discover just after his phone became TRIPTIC+: "Format on the top bar needs looking at").
   Why it crowded: the member's cream TRIPTIC+ pill (membership.js, .tm-header-badge) was added to a row fitted for two things,
   with its own margin-left: auto beside the brand's, so the free space was split two ways; and the brand (mark + wordmark) was
   allowed to shrink, so when the row ran short its box narrowed under its pictures and Find a film was laid over the "C".
   Now: the brand never shrinks; the member mark is a small lamp "+" tag joined to the wordmark (the same words for VoiceOver,
   "TRIPTIC+ member"), on the brand's side; Find a film stands at the trailing edge on the same centre line, and becomes the
   44pt round magnifier wherever the row is short (SE, the largest text, already so). The row keeps the page's own gutter, the
   same on both sides. The member's second mark below the composer ("TRIPTIC+ Search freely") keeps its words and loses the
   repeated pill. hub/docs/TEN-FAN-2026-10-29.md. */
html.ds #device .app-header.ff-has-entry > .brand-home { flex: none; }
html.ds #device .app-header.ff-has-entry > .ff-entry { order: 2; }
html.ds #device .app-header.ff-has-entry > .profile-control { order: 3; }
html.ds #device .app-header.ff-has-entry:has(> .tm-header-badge) > .brand-home { margin-right: 0; }
html.ds #device .app-header.ff-has-entry > .tm-header-badge { order: 1; flex: none; margin: 0 auto 0 -4px; }
/* (PLUS BADGE, 5 November 2026; the owner of the member's header on his iPhone: "Make the + look premium". The cream square
   with a black "+" read flat beside the gold tins. Of three options he chose C: no badge body, just a gold "+".) The member's
   "+" is a GOLD GLYPH in the tins' own gold (the TRIPTIC+ card's palette, living-depth.css .ld-mcard), set beside the
   wordmark like a superscript of it: arms as long as the wordmark's capitals are tall (11pt), its centre on theirs (the
   wordmark's caps are centred in its art, and the box is centred on it), square-ended like the wordmark's strokes, heavier
   than them so the metal reads. Metal: a gold body lit from above (a bright upper face, a darker lower face, a warm
   reflection at the foot), a fine dark contour that sits a hair low (its bevel and shadow against the haze). Vector only
   (SVG masks): crisp at 2x and 3x. Same 18pt box, same place as before (no layout shift). A slow sheen crosses the glyph with
   the living depth (living-depth-uses.js "token", --ld-sheen); still under Reduce Motion and Low Power. Every header that
   carries the member mark draws it (iPhone, iPad, the Duo's leaves). Options shown to the owner:
   /home/claude/evidence/plus-badge-options.png (A, a struck token, was shipped first and replaced by this). */
html.ds #device .app-header > .tm-header-badge > .tm-badge {
  --pt-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 3.5v11M3.5 9h11' stroke='%23000' stroke-width='1.9'/%3E%3C/svg%3E");
  --pt-contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 2.9v12.2M2.9 9h12.2' stroke='%23000' stroke-width='3.1'/%3E%3C/svg%3E");
  --pt-gold: linear-gradient(180deg, #fff3cc 0%, #fbedb8 22%, #e8c07e 44%, #c79b45 58%, #9b6d22 78%, #d9ae62 100%);
  --pt-edge: rgb(30 16 0 / .62);
  position: relative; justify-content: center; width: 18px; height: 18px; padding: 0; border-radius: 0; font-size: 0; letter-spacing: 0;
  color: transparent; background: none; box-shadow: none;
}
html.ds #device .app-header > .tm-header-badge > .tm-badge > b { margin: 0; font-size: 0 !important; }
/* ::before the contour (a hair low: the bevel's shade and the glyph's shadow), ::after the gold */
html.ds #device .app-header > .tm-header-badge > .tm-badge::before,
html.ds #device .app-header > .tm-header-badge > .tm-badge::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
html.ds #device .app-header > .tm-header-badge > .tm-badge::before {
  background: var(--pt-edge); translate: 0 .4px;
  -webkit-mask: var(--pt-contour) center / 100% 100% no-repeat; mask: var(--pt-contour) center / 100% 100% no-repeat;
}
html.ds #device .app-header > .tm-header-badge > .tm-badge::after {
  background: var(--pt-gold);
  -webkit-mask: var(--pt-glyph) center / 100% 100% no-repeat; mask: var(--pt-glyph) center / 100% 100% no-repeat;
}
/* the sheen: a soft band of light that crosses the gold with the tilt (and the slow drift), cut to the glyph; at rest (0) it lies off the "+", and the tilt carries it across (-1..1) */
html.ds #device .app-header > .tm-header-badge > .tm-badge > .ld-token-sheen {
  position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none;
  -webkit-mask: var(--pt-glyph) center / 100% 100% no-repeat; mask: var(--pt-glyph) center / 100% 100% no-repeat;
}
html.ds #device .app-header > .tm-header-badge > .tm-badge > .ld-token-sheen::before {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -30%; width: 50%; rotate: 22deg;
  background: linear-gradient(90deg, rgb(255 252 236 / 0), rgb(255 252 236 / .85), rgb(255 252 236 / 0));
  translate: calc(var(--ld-sheen, 0) * 200% - 30%) 0;
}
html.ds.ld-static #device .app-header > .tm-header-badge > .tm-badge > .ld-token-sheen,
html.ds #device .app-header > .tm-header-badge > .tm-badge.ld-lite > .ld-token-sheen { display: none; }
@media (prefers-reduced-motion: reduce) { html.ds #device .app-header > .tm-header-badge > .tm-badge > .ld-token-sheen { display: none; } }
/* Increase Contrast: a brighter, flatter gold with a full dark contour (the glyph is opaque already: nothing for Reduce
   Transparency to take) */
@media (prefers-contrast: more) {
  html.ds #device .app-header > .tm-header-badge > .tm-badge { --pt-gold: linear-gradient(180deg, #fff0c2, #f1cc7f); --pt-edge: rgb(0 0 0 / .95); }
  html.ds #device .app-header > .tm-header-badge > .tm-badge::before { translate: none; }
}
/* Windows/high-contrast forced colours: the "+" in the system's own ink */
@media (forced-colors: active) {
  html.ds #device .app-header > .tm-header-badge > .tm-badge { forced-color-adjust: none; }
  html.ds #device .app-header > .tm-header-badge > .tm-badge::before, html.ds #device .app-header > .tm-header-badge > .tm-badge > .ld-token-sheen { display: none; }
  html.ds #device .app-header > .tm-header-badge > .tm-badge::after { background: CanvasText; }
}
html.ds #device .tm-allowance.is-plus > .tm-badge { display: none; }
/* (FILM PAGE FIXES, 29 October 2026) a poster fades in over its stand-in once decoded (opacity only: nothing moves) */
html.ds #device :is(.ff-poster, .ff-aside-poster) > img.ff-poster-img { opacity: 0; transition: opacity var(--motion-fast) var(--motion-curve); }
html.ds #device :is(.ff-poster, .ff-aside-poster) > img.ff-poster-img.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.ds #device :is(.ff-poster, .ff-aside-poster) > img.ff-poster-img { transition: none; } }

/* ===== prototype-src/film-cinemas.css ===== */
/* TRIPTIC film-cinemas: IN CINEMAS NEAR YOU (lane FINDFILM, 13 October 2026). Script pair: film-cinemas.js. Record:
   hub/docs/FINDFILM-2026-10-13.md. Tokens only; sizes in type units so the largest text grows them; nothing moves under
   Reduce Motion. Sits with Where to watch (just before it, order 48 of the film page's column). */
html.ds #device .film-v5 .film-content > .film-cinemas { order: 48; display: grid; gap: 12px; margin: 0 0 var(--section-gap, 36px); padding: 0; }
html.ds #device .film-v5 .film-cinemas > header { display: block; margin: 0; padding: 0; }
html.ds #device .film-v5 .film-cinemas > header > span { display: block; margin: 0; font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: var(--tr-title-3); color: var(--c-label-1); }
html.ds #device .film-v5 .film-cinemas > header > small { display: block; margin-top: 2px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }
html.ds #device .film-v5 .film-cinemas svg { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* before: one button and one line about privacy */
html.ds #device .film-v5 .film-cinemas .fcin-optin {
  display: inline-flex; align-items: center; justify-self: start; gap: 10px; width: auto; min-height: 48px; margin: 0; padding: 0 20px 0 16px;
  border: 0; border-radius: var(--r-pill, 999px); background: var(--c-fill-2); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-label-1);
  font: 600 var(--fs-subhead, 15px)/1.2 var(--font-ui); cursor: pointer;
  transition: scale var(--motion-fast) var(--motion-curve), background-color var(--motion-fast) var(--motion-curve);
}
html.ds #device .film-v5 .film-cinemas .fcin-optin svg { color: var(--c-beam); }
html.ds #device .film-v5 .film-cinemas .fcin-optin:active { scale: .97; background: var(--c-fill-press, var(--c-fill-2)); }
html.ds #device .film-v5 .film-cinemas .fcin-privacy { margin: 0; max-width: 46ch; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }

/* after: two rows, the chains, and a quiet way to turn it off */
html.ds #device .film-v5 .film-cinemas .fcin-actions { display: grid; overflow: hidden; border-radius: var(--r-row, 14px); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); }
html.ds #device .film-v5 .film-cinemas .fcin-link {
  display: flex; align-items: center; gap: 14px; min-height: calc(60 * var(--type-unit, 1px)); padding: 10px 16px; box-sizing: border-box;
  color: var(--c-label-1); text-decoration: none; transition: background-color var(--motion-fast) var(--motion-curve);
}
html.ds #device .film-v5 .film-cinemas .fcin-link + .fcin-link { box-shadow: inset 0 1px 0 var(--c-line); }
html.ds #device .film-v5 .film-cinemas .fcin-link:active { background: var(--c-fill-2); }
html.ds #device .film-v5 .film-cinemas .fcin-link svg { color: var(--c-beam); }
html.ds #device .film-v5 .film-cinemas .fcin-link > span { display: grid; flex: 1 1 auto; min-width: 0; gap: 1px; }
html.ds #device .film-v5 .film-cinemas .fcin-link strong { font: var(--fw-headline, 600) var(--fs-headline, 17px)/var(--lh-headline, 22px) var(--font-ui); }
html.ds #device .film-v5 .film-cinemas .fcin-link small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds #device .film-v5 .film-cinemas .fcin-link > i { flex: 0 0 auto; font-style: normal; color: var(--c-label-3); }
html.ds #device .film-v5 .film-cinemas .fcin-book-label { margin: 4px 0 -4px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }
html.ds #device .film-v5 .film-cinemas .fcin-chains { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
html.ds #device .film-v5 .film-cinemas .fcin-chain {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill, 999px);
  background: var(--c-fill-2); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-label-1); text-decoration: none;
  font: 500 var(--fs-subhead, 15px)/1 var(--font-ui); transition: scale var(--motion-fast) var(--motion-curve);
}
html.ds #device .film-v5 .film-cinemas .fcin-chain:active { scale: .96; }
html.ds #device .film-v5 .film-cinemas .fcin-off { justify-self: start; min-height: 44px; margin: -4px 0 0 -8px; padding: 0 8px; border: 0; background: none; box-shadow: none; color: var(--c-label-2); font: 500 var(--fs-footnote, 13px)/1 var(--font-ui); cursor: pointer; }
html.ds #device .film-v5 .film-cinemas :is(.fcin-optin, .fcin-link, .fcin-chain, .fcin-off):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* booking, locked (a free device where membership is enforced; owner, 14 October 2026): the app's one locked line
   (membership.css .tm-locked-line, .tm-seal) in place of the actions. (#device: the lock treatment is scoped under #device.) */
html.ds #device .film-v5 .film-cinemas .fcin-plus { min-height: calc(60 * var(--type-unit, 1px)); }
html.ds #device .film-v5 .film-cinemas .fcin-seal { width: 38px; height: 38px; border-radius: 10px; }
html.ds #device .film-v5 .film-cinemas .fcin-seal svg { width: 18px; height: 18px; stroke-width: 1.8; }
html.ds #device .film-v5 .film-cinemas .fcin-plus > i svg { stroke-width: 2; }
html.ds #device .film-v5 .film-cinemas .fcin-plus:active { background: var(--c-fill-2); }
html.ds #device .film-v5 .film-cinemas .fcin-plus:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { html.ds #device .film-v5 .film-cinemas * { transition: none !important; } }
html.ds.reduce-motion #device .film-v5 .film-cinemas *, html.ds #device.manual-reduced-motion .film-v5 .film-cinemas * { transition: none !important; }
@media (forced-colors: active) { html.ds #device .film-v5 .film-cinemas :is(.fcin-optin, .fcin-chain, .fcin-actions) { border: 1px solid ButtonText; } }

/* ===== prototype-src/cinemas-now.css ===== */
/* TRIPTIC cinemas-now: IN CINEMAS NOW, the OUT NOW half of the "In cinemas" row on Today. Script pair: cinemas-now.js (the
   list and the way into a film). The row itself is drawn by ds-coming-soon.js and styled in ds-coming-soon.css; this sheet
   holds what is particular to a film that is out: its one action, Tickets, and the lock it wears for a device that is not
   TRIPTIC+ (owner, 14 October 2026: booking is TRIPTIC+; the films and their pages are free). Records:
   hub/docs/CINEMA-2026-10-13.md (the shelf this began as), hub/docs/NOWNEXT-2026-10-14.md (the row).
   The lock is the app's own mark (membership.js lockGlyph): the section says data-lock="on" when membership is enforced and
   this device is not a member, "off" when it is open, "unknown" until the plan has been read (nothing is locked until it is).
   Tokens only; nothing here moves; nothing here is a filter. !important: none. */

html.ds .ds-cs-tickets .ds-cs-lockmark { display: none; order: -1; width: 15px; height: 15px; color: var(--c-seal-hi); }
html.ds .ds-cs[data-lock="on"] .ds-cs-tickets { background: var(--c-fill-1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-seal-hi) 34%, transparent); }
html.ds .ds-cs[data-lock="on"] .ds-cs-tickets .ds-cs-lockmark { display: block; }
html.ds .ds-cs[data-lock="on"] .ds-cs-tickets .ds-cs-tix-icon { display: none; } /* the lock stands where the ticket would */
html.ds .ds-cs-tickets .ds-cs-tix-icon { color: var(--c-beam); }
/* (release polish, 28 October 2026; the owner: "label it honestly") the lock says what it is: "Tickets · TRIPTIC+" */
html.ds .ds-cs-tickets .ds-cs-plusmark { display: none; font: 700 calc(10 * var(--type-unit, 1px))/1 var(--font-ui); letter-spacing: var(--tr-eyebrow); color: var(--c-seal-hi); }
/* locked: the lock beside two lines, "Tickets" over a small "TRIPTIC+" (fits the narrowest card) */
html.ds .ds-cs[data-lock="on"] .ds-cs-tickets { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 7px; row-gap: 1px; justify-content: center; align-content: center; padding: 0 8px; }
html.ds .ds-cs[data-lock="on"] .ds-cs-tickets .ds-cs-lockmark { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
html.ds .ds-cs[data-lock="on"] .ds-cs-tickets > span { grid-column: 2; grid-row: 1; line-height: 1.1; }
html.ds .ds-cs[data-lock="on"] .ds-cs-tickets .ds-cs-plusmark { display: block; grid-column: 2; grid-row: 2; white-space: nowrap; line-height: 1.1; }
@media (forced-colors: active) { html.ds .ds-cs-tickets .ds-cs-lockmark { color: ButtonText; } }

/* ===== prototype-src/on-my-services.css ===== */
/* Your services and "On my services" (owner, 6 October 2026; hub/docs/AVAILABILITY-2026-10-06.md).
   1. Your platforms (Settings, and the sheet that hosts the same choices): two groups, name tiles for the services that
      have no bundled mark, and what a free service costs.
   2. The "On my services" switch in the Discover request box, its sheet, and the lines that say what was searched.
   Design-system rules hold here as in the ds-* layers: every rule that changes the app is scoped under html.ds, colours
   are tokens (a service's own two colours are data, set inline by streaming-preferences.js), type is on the ramp, and
   nothing moves under Reduce Motion. The few unscoped rules at the top only keep the new markup tidy under ?ds=0. */

/* ---------------------------------------------------------------- ?ds=0 fallbacks (structure only) */
.device .streaming-group { margin: 22px 0 8px; font-size: calc(12 * var(--type-unit)); font-weight: 600; text-transform: uppercase; }
.device .streaming-group-note { margin: 0 0 10px; font-size: calc(13 * var(--type-unit)); line-height: 1.4; }
.device .streaming-access { display: block; margin-top: 2px; font-size: calc(13 * var(--type-unit)); font-weight: 400; opacity: .72; }
.device .streaming-logo.is-wordmark { position: relative; }
.device .streaming-wordmark { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; font-size: calc(15 * var(--type-unit)); font-weight: 700; white-space: nowrap; }
.device .streaming-live-logo { position: absolute; top: 0; bottom: 0; left: 50%; width: auto; height: 100%; aspect-ratio: 1; translate: -50% 0; object-fit: cover; border-radius: inherit; }

/* ---------------------------------------------------------------- 1. Your platforms */
html.ds #device .dsy-region .streaming-group,
html.ds #device .film-platforms-sheet .streaming-group,
html.ds #device .oms-sheet .streaming-group {
  margin: 22px 4px 8px; font: 600 var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--c-label-3);
}
html.ds #device .dsy-region .subpage-intro + .streaming-group { margin-top: 18px; }
html.ds #device .dsy-region .streaming-group-note,
html.ds #device .film-platforms-sheet .streaming-group-note,
html.ds #device .oms-sheet .streaming-group-note {
  margin: -2px 4px 10px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3);
}
html.ds #device .dsy-region .choice-cards { margin-bottom: 0; }
html.ds #device .dsy-region .choice-cards:last-of-type { margin-bottom: 16px; }
html.ds #device .streaming-access { display: block; margin-top: 1px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); opacity: 1; }
html.ds #device .streaming-logo.is-wordmark { position: relative; overflow: hidden; }
html.ds #device .streaming-wordmark { font: 700 var(--fs-subhead)/1 var(--font-ui); letter-spacing: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
html.ds #device .dsy-platform .streaming-logo .streaming-live-logo { width: auto; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- 2. "On my services": the switch row in the request box
   One row above mic + Find three: the person's services as small overlapping badges (a button: change them), then the
   switch itself, which is the whole rest of the row (role="switch": one tap flips it). The state is said in words under
   the label as well as by the knob and the tint, so it never rests on colour alone. */
html.ds #device .premium-composer .oms-row {
  order: 0; flex: 0 0 100%; box-sizing: border-box; display: flex; align-items: center; gap: 4px; min-width: 0;
  min-height: 56px; margin: 2px 0 4px; padding: 6px 10px 6px 6px; border-radius: var(--r-row);
  background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line);
  transition: background-color var(--motion-fast) var(--motion-curve);
}
html.ds #device .premium-composer .oms-row.is-on { background: color-mix(in srgb, var(--c-seal) 16%, var(--c-fill-1)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-seal-hi) 42%, transparent); }
html.ds #device .premium-composer .oms-row :is(.oms-edit, .oms-switch, .oms-choose) {
  appearance: none; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; box-shadow: none; transform: none; scale: 1;
}
html.ds #device .premium-composer .oms-edit { flex: 0 0 auto; display: flex; align-items: center; min-width: 44px; min-height: 44px; padding: 0 6px 0 4px; border-radius: var(--r-control); }
html.ds #device .premium-composer .oms-switch { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 0 0 4px; border-radius: var(--r-control); }
html.ds #device .premium-composer .oms-choose { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 2px 0 6px; border-radius: var(--r-control); }
html.ds #device .premium-composer .oms-row :is(.oms-edit, .oms-switch, .oms-choose):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
html.ds #device .premium-composer .oms-row :is(.oms-edit, .oms-choose):is(.ds-pressed, :active) { opacity: .7; }
html.ds #device .oms-copy { display: grid; min-width: 0; }
html.ds #device .oms-copy > b { font: 600 var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1); white-space: nowrap; }
html.ds #device .oms-copy > small { overflow: hidden; font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--c-label-3); text-overflow: ellipsis; white-space: nowrap; }
html.ds #device .oms-row.is-on .oms-copy > small { color: var(--c-label-2); }
html.ds #device .oms-knob { flex: 0 0 auto; margin: 0; pointer-events: none; }
html.ds #device .oms-glyph { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-fill-2); color: var(--c-label-1); }
html.ds #device .oms-go { flex: 0 0 auto; margin-left: auto; display: grid; place-items: center; width: 24px; height: 24px; color: var(--c-label-3); }

/* the badges: each service as a small round mark (its real logo when the server has one, else its letters), overlapping */
html.ds #device .oms-badges { display: inline-flex; align-items: center; padding-left: 8px; }
html.ds #device .service-badge {
  position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; margin-left: -8px; overflow: hidden;
  border-radius: 50%; font-style: normal; box-shadow: 0 0 0 2px var(--c-stage-raised), 0 1px 3px rgba(0, 0, 0, .4);
}
html.ds #device .service-badge > b { font: 700 var(--fs-caption-2)/1 var(--font-ui); letter-spacing: 0; text-transform: none; }
html.ds #device .service-badge > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.ds #device .service-badge.oms-more { background: var(--c-fill-2); color: var(--c-label-2); }
html.ds #device .oms-row:not(.is-on) .oms-badges { filter: saturate(.35); opacity: .7; }

/* the sheet that hosts the same choices as Settings (it borrows the film page's platform sheet) */
html.ds #device .oms-sheet .film-platform-note { color: var(--c-label-3); }

/* ---------------------------------------------------------------- what was searched, said on the waiting and result screens
   Beside YOUR REQUEST in the request capsule: the services' badges and a few words ("Searching your services", then
   "On your services"; or "From anywhere"). It shares the label's row, so the capsule keeps the height every phone size
   is fitted to (device-fit.css) and nothing below it moves. Above "Your three.": "You can watch tonight". */
html.ds #device .trip-critical-layer.is-live.has-oms-journey .critical-request-capsule { grid-template-columns: auto minmax(0, 1fr) !important; column-gap: 10px !important; }
html.ds #device .trip-critical-layer.is-live.has-oms-journey .critical-request-capsule > span { grid-area: 1 / 1; }
html.ds #device .trip-critical-layer.is-live.has-oms-journey .critical-request-capsule > p { grid-area: 2 / 1 / auto / -1; }
html.ds #device .trip-critical-layer .critical-request-capsule > .oms-journey {
  grid-area: 1 / 2; align-self: center; justify-self: start; display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; height: 12px; margin: 0;
}
html.ds #device .trip-critical-layer:not(.is-live) .critical-request-capsule > .oms-journey { display: none; } /* not while the capsule is still flying up from the request box */
html.ds #device .trip-critical-layer .critical-request-capsule > .oms-journey > b {
  min-width: 0; overflow: hidden; font: 600 var(--fs-caption-2)/calc(12 * var(--type-unit)) var(--font-ui); letter-spacing: 0;
  color: var(--c-label-2); text-overflow: ellipsis; text-transform: none; white-space: nowrap;
}
html.ds #device .trip-critical-layer .oms-journey .oms-badges { flex: 0 0 auto; padding-left: 5px; letter-spacing: 0; }
html.ds #device .trip-critical-layer .oms-journey .service-badge { width: 16px; height: 16px; margin: -2px 0 -2px -5px; box-shadow: 0 0 0 1.5px var(--c-stage-raised); }
html.ds #device .trip-critical-layer .oms-journey .service-badge > b { scale: .62; }
/* the heading's own eyebrow steps aside for ours (same class, so the same type, colour and small-phone rule) */
html.ds #device .trip-critical-layer.has-oms-eyebrow .critical-results-heading > .eyebrow:not(.oms-eyebrow) { display: none !important; }

/* where a revealed film is: one small chip on the card ("ITVX · free with ads"), from the answer's own record */
html.ds #device .trip-critical-layer .critical-card-front > .oms-where {
  position: absolute; z-index: 3; top: 8px; left: 8px; max-width: calc(100% - 16px); box-sizing: border-box; display: flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 3px; border-radius: var(--r-pill); background: rgba(8, 8, 13, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); text-align: left;
}
html.ds #device .trip-critical-layer .critical-card-front > .oms-where > b { flex: 0 1 auto; min-width: 0; overflow: hidden; font: 600 var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: 0; color: var(--c-label-1); text-overflow: ellipsis; white-space: nowrap; }
html.ds #device .trip-critical-layer .critical-card-front > .oms-where > .oms-where-cost { flex: 0 0 auto; font: 400 var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: 0; color: var(--c-label-2); white-space: nowrap; }
html.ds #device .trip-critical-layer .critical-card-front > .oms-where > .oms-where-cost::before { content: "\00b7\00a0"; }
/* a card waiting at the side is narrow: it keeps the service, and says what it costs when it is the one in front */
html.ds #device .trip-critical-layer .critical-card:not(.is-active):not([data-slot="center"]) .oms-where > .oms-where-cost,
html.ds #device .trip-critical-layer .critical-card:is([data-slot="left"], [data-slot="right"]) .oms-where > .oms-where-cost { display: none; }
html.ds #device .trip-critical-layer .oms-where .service-badge { width: 18px; height: 18px; margin: 0; box-shadow: none; }
html.ds #device .trip-critical-layer .oms-where .service-badge > b { scale: .68; }

/* ---------------------------------------------------------------- the search came back short on the person's services */
html.ds #device .oms-shortfall > .primary-button { margin-top: 24px; }
html.ds #device .oms-shortfall > small { text-wrap: balance; }

@media (prefers-reduced-motion: reduce) { html.ds #device .premium-composer .oms-row { transition: none; } }
html.ds #device.manual-reduced-motion .premium-composer .oms-row { transition: none; }
@media (forced-colors: active) {
  html.ds #device .premium-composer .oms-row { border: 1px solid ButtonText; }
  html.ds #device .premium-composer .oms-row.is-on { border-color: Highlight; }
}

/* ---------------------------------------------------------------- the picker sheet (the film page's and the request box's)
   Fifteen services as compact tiles, three to a row, in the same two groups as Settings; what a free service costs is
   said once by its group's note, so the tiles carry the mark and the name only. */
html.ds #device .film-platforms-sheet .streaming-onboarding-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 4px; }
html.ds #device .film-platforms-sheet .streaming-choice {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 92px;
  padding: 10px 6px 8px; border: 2px solid var(--c-line); border-radius: var(--r-card); background: var(--c-fill-1); color: var(--c-label-1); text-align: center;
}
html.ds #device .film-platforms-sheet .streaming-choice.is-selected { border-color: var(--c-lamp); background: rgba(255, 255, 255, .1); }
html.ds #device .film-platforms-sheet .streaming-choice .streaming-logo {
  position: relative; display: block; width: 48px; height: 48px; max-width: none; margin: 0; padding: 0; overflow: hidden; border-radius: var(--r-control); background: var(--c-stage-raised);
}
html.ds #device .film-platforms-sheet .streaming-choice .streaming-logo > img:not(.streaming-live-logo) { display: block; width: 100%; height: 100%; object-fit: contain; }
html.ds #device .film-platforms-sheet .streaming-choice :is(.streaming-logo-apple, .streaming-logo-disney, .streaming-logo-paramount) > img { object-fit: cover; }
html.ds #device .film-platforms-sheet .streaming-choice :is(.streaming-logo-prime, .streaming-logo-mubi) { padding: 6px; background: var(--c-label-1); }
html.ds #device .film-platforms-sheet .streaming-choice :is(.streaming-logo-netflix, .streaming-logo-now) { padding: 6px; }
/* the mark is a picture, so it keeps its size at any text size (the name under it is the words that grow); 11 pt holds "iPlayer" whole inside the 48 pt tile
   (lane WELCOME, 14 October 2026: it was 3 pt too wide, so it was cut, when no live logo had loaded) */
html.ds #device .film-platforms-sheet .streaming-choice .streaming-wordmark { font: 700 11px/1 var(--font-ui); }
html.ds #device .film-platforms-sheet .streaming-choice > strong { max-width: 100%; overflow: hidden; font: 400 var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); text-overflow: ellipsis; white-space: nowrap; }
html.ds #device .film-platforms-sheet .streaming-choice .streaming-access { display: none; }
html.ds #device .film-platforms-sheet .streaming-choice .streaming-tick {
  position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-lamp); color: var(--c-lamp-ink); font: 700 var(--fs-caption-2)/1 var(--font-ui); opacity: 0;
}
html.ds #device .film-platforms-sheet .streaming-choice.is-selected .streaming-tick { opacity: 1; }
html.ds #device .film-platforms-sheet .streaming-choice:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* a live logo is a square app icon: it sits whole in the middle of a wide tile, and the name tile under it steps back */
html.ds #device .streaming-wordmark:has(+ .streaming-live-logo) { visibility: hidden; }
html.ds #device .streaming-logo.is-wordmark:has(> .streaming-live-logo) { background: var(--c-fill-2); }

/* ===== prototype-src/chrome-polish.css ===== */
/* TRIPTIC chrome polish (Lane POLISH, 9 October 2026, evening; record: hub/docs/POLISH-2026-10-09c.md).
   Runtime pair: chrome-polish.js. Loaded after every other stylesheet but ui-icons.css (manifest.mjs), so it is the last
   word on the three things it owns. Nothing here moves (no animation); every value is a token below.

   1. ONE BACK. The owner (9 October, from his phone): "Back arrows look strange ... maybe we need to fix that throughout
      the app." There were two circles: the page's own (product-manager-polish.css: a flat disc with a 1px border) and
      the circle that stands in for it while a pushed page scrolls (ds-tab-scroll.css .ds-tsx-ctl: the tab bar's glass,
      whose rim strips and 1px inset tint, made for a long capsule, drew a second ring inside the circle and a flat bright
      line across its top). Both now wear one material, the CHROME CIRCLE: one 44pt circle, one hairline ring, a soft
      light along the top, a soft shadow under it, the glass's blur. The page's own controls in a header (Back, Close,
      Share, Save, More) wear it too, so two circles on one page are the same object. Placement: 20pt from the edge
      (the page gutter), level with the page's title, on every page (The Ten's sat at 12pt, a Collection's at 24pt).
      While a page is still arriving, the circle that stands in is put away and the page's own shows (chrome-polish.js
      sets data-cp-moving on #device); while it is swiped away, the circle, the name's capsule and the top edge travel
      with it (chrome-polish.js: their `translate` follows the page's). The Back moves with its page, never ahead of it.
   2. THE SERVICES ROW (on-my-services.css owns the row; the badges' shape is here): see section 2.
   3. THE TEN, FREE: see section 3.

   !important: the chrome circle beats product-manager-polish.css's `.circle-control { ... !important }` (the one place
   that dressed every circle), by specificity; ds-tab-scroll.css's `.ds-tsx-stood { opacity: 0 !important }` is
   answered while the page moves by a more specific rule. */

html.ds #device {
  --cc-size: 44px;                                   /* one size, and the hit area */
  --cc-inset: var(--gutter, 20px);                    /* from the screen's edge: the page's own gutter */
  --cc-fill: linear-gradient(180deg, rgb(58 56 72 / .58), rgb(24 23 32 / .7));
  --cc-ring: inset 0 0 0 .5px rgb(255 255 255 / .16); /* the one ring */
  --cc-light: inset 0 1px 0 rgb(255 255 255 / .1);     /* light along the top edge, inside the ring */
  --cc-shadow: 0 6px 16px -6px rgb(0 0 0 / .6), 0 1px 2px rgb(0 0 0 / .32);
  --cc-blur: blur(18px) saturate(160%);
}
html.ds #device.manual-solid,
html.ds.reduce-transparency #device { --cc-fill: linear-gradient(180deg, rgb(44 42 54), rgb(27 26 34)); --cc-blur: none; }
@media (prefers-reduced-transparency: reduce) { html.ds #device { --cc-fill: linear-gradient(180deg, rgb(44 42 54), rgb(27 26 34)); --cc-blur: none; } }

/* ===== 1. one Back (and every circle in a header) ===== */
html.ds #device .circle-control {
  box-sizing: border-box !important;
  border: 0 !important; border-radius: 50% !important;
  background: var(--cc-fill) !important;
  box-shadow: var(--cc-ring), var(--cc-light), var(--cc-shadow) !important;
  -webkit-backdrop-filter: var(--cc-blur) !important; backdrop-filter: var(--cc-blur) !important;
  color: var(--c-label-1);
}
/* Back, Close and the header's other circles: exactly 44pt (a few layers drew 41-42pt); the three's own header keeps
   its fitted size on the smallest phones (frontend-completion.css: the three must fit 667pt) */
html.ds #device .screen :is(header, .tm-bar, .ds-tt-top, .film-topbar, .subpage-header) > .circle-control,
html.ds #device .circle-control:is(.back-chevron, .close-control) {
  width: var(--cc-size) !important; height: var(--cc-size) !important; min-width: var(--cc-size) !important; min-height: var(--cc-size) !important;
  flex: 0 0 var(--cc-size);
}
html.ds #device .trip-critical-layer .critical-header > .circle-control { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; }
html.ds #device .trip-critical-layer.critical-compact .critical-header > .circle-control { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; }
/* Your three's Back (and its sound circle): showpiece.css drew them flat with a 1px border and a heavier 20pt chevron;
   the same circle and the icon set's Back now (the same path, 24pt, 1.7 stroke). #device#device: showpiece.css comes
   later and pins its own with #sp#sp */
html.ds #device#device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-header :is(.back-chevron, .critical-sound-toggle) {
  border: 0 !important; background: var(--cc-fill) !important; box-shadow: var(--cc-ring), var(--cc-light), var(--cc-shadow) !important;
  -webkit-backdrop-filter: var(--cc-blur) !important; backdrop-filter: var(--cc-blur) !important;
}
html.ds #device#device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-header .critical-back-icon { width: 24px !important; height: 24px !important; stroke-width: 1.7 !important; }
/* pressed: the app's one press (ds-core) keeps its scale; the ring stays */
html.ds #device .circle-control.ds-pressed { box-shadow: var(--cc-ring), inset 0 1px 3px rgb(0 0 0 / .22), inset 0 0 0 999px rgb(0 0 0 / .05) !important; }

/* the circle that stands in for a pushed page's own Back (ds-tab-scroll.js): the same object */
html.ds #device > .ds-tsx-ctl { border-radius: 50%; box-shadow: var(--cc-shadow); }
html.ds #device > .ds-tsx-ctl > .ds-tsx-glass {
  background: none; box-shadow: none; clip-path: circle(50%);     /* the blur cut to the circle (WebKit draws a backdrop
                                                                      filter's corners square under some transforms) */
  -webkit-backdrop-filter: var(--cc-blur); backdrop-filter: var(--cc-blur);
}
html.ds #device > .ds-tsx-ctl > .ds-tsx-glass::after { inset: 0; background: var(--cc-fill); box-shadow: var(--cc-ring), var(--cc-light); }

/* places: 20pt from the edge, level with the title (The Ten's stage bar sat 12pt in and 2pt low; a Collection's 24pt in) */
html.ds .ds-tt-top { padding: calc(var(--dv-safe-top, 0px) + 8px) var(--cc-inset) 0; }
html.ds #device > .screen.collections-api-detail > .subpage-header { padding-inline: var(--cc-inset); }
html.ds #device > .screen.accessibility-screen > .subpage-header { margin-inline: 0; padding-inline: 0; }
/* (JOIN, 10 October 2026) Friday 3 in both its views (lane FRIDAY's display, and the page that explains it): the screen's
   own sides were 22pt (recommendation-waiting.css), so its Back stood 2pt in from the others */
html.ds #device > .screen.friday-service-screen { padding-inline: var(--cc-inset); }

/* while the page moves (arriving, a push or pop): the page's own Back shows and travels with it; the circle that stands
   in waits until the page is still (chrome-polish.js: data-cp-moving). A swipe Back is the exception: there the circle
   itself travels with the page (chrome-polish.js follows it), so the page's own stays unseen under it. */
html.ds #device[data-cp-moving] > .ds-tsx-ctl,
html.ds #device[data-ds-nav]:not([data-ds-nav="swipe"]) > .ds-tsx-ctl { visibility: hidden; }
html.ds #device[data-cp-moving] > .screen .ds-tsx-stood,
html.ds #device[data-ds-nav]:not([data-ds-nav="swipe"]) > .screen .ds-tsx-stood,
html.ds #device > .screen:is(.ds-under, .fluid-departure) .ds-tsx-stood { opacity: 1 !important; }

/* ===== 2. the services row: whole logos, evenly spaced, and the count as a calm pill =====
   The owner: the circles overlapped so much that logos were cut off and "+5" swallowed Disney+. Each service is now a
   small app-icon tile (a provider's logo is drawn for a rounded square: in a circle its corners and long wordmarks were
   cut), side by side 3pt apart with nothing over anything, a hairline so a dark logo holds its edge on a dark row, and
   how many more as a pill of the same height after them, never on a logo. A tile is a picture, not text: its letters
   (a service the server has no logo for yet) keep one size at every text size, so they are never cut. */
html.ds #device .oms-badges { display: inline-flex; align-items: center; gap: 3px; padding-left: 0; }
html.ds #device .oms-badges > .service-badge {
  width: 24px; height: 24px; margin: 0; border-radius: 6.5px;
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .18), 0 1px 2px rgb(0 0 0 / .35);
}
html.ds #device .oms-badges > .service-badge:not(.oms-more) > b { font-size: 11px; letter-spacing: -.02em; scale: .72; }   /* 11px drawn at .72: a picture, the type floor kept */
html.ds #device .oms-badges > .service-badge > img { border-radius: inherit; }
html.ds #device .oms-badges > .service-badge.oms-more {
  width: auto; min-width: 24px; height: 24px; margin-left: 0; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--c-fill-2); color: var(--c-label-1); box-shadow: inset 0 0 0 .5px var(--c-line-strong, rgb(255 255 255 / .2));
}
html.ds #device .oms-badges > .service-badge.oms-more > b { font: 600 var(--fs-caption-2)/1 var(--font-ui); font-variant-numeric: tabular-nums; }
/* off: the logos are quieter, but whole and the same size */
html.ds #device .oms-row:not(.is-on) .oms-badges { filter: saturate(.35); opacity: .75; }
/* on the waiting screen's capsule: the same tiles, smaller, side by side */
html.ds #device .trip-critical-layer .oms-journey .oms-badges { gap: 3px; padding-left: 0; }
html.ds #device .trip-critical-layer .oms-journey .oms-badges > .service-badge { width: 16px; height: 16px; margin: -2px 0; border-radius: 4.5px; box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .18); }
html.ds #device .trip-critical-layer .oms-journey .oms-badges > .service-badge.oms-more { width: auto; min-width: 16px; height: 16px; padding: 0 5px; margin: -2px 0; }
html.ds #device .trip-critical-layer .oms-journey .oms-badges > .service-badge:not(.oms-more) > b { scale: .6; }
html.ds #device .trip-critical-layer .oms-journey .oms-badges > .service-badge.oms-more > b { scale: 1; font-size: calc(10 * var(--type-unit, 1px)); }
html.ds #device .trip-critical-layer .oms-where .service-badge { border-radius: 4.5px; }
/* the label beside them never runs under the switch: at the largest text "On my services" takes a second line rather
   than ending in an ellipsis (a cut label read as broken) */
html.ds #device .premium-composer .oms-switch > .oms-copy { flex: 1 1 auto; }
html.ds #device .premium-composer .oms-switch { gap: 8px; }                 /* so it stays on one line on a 375pt phone */
html.ds #device .premium-composer .oms-edit { padding-right: 4px; }
html.ds #device .oms-copy > b { min-width: 0; white-space: normal; text-wrap: balance; }

/* ===== 3. The Ten for a free device: complete, and honest about 6 to 10 =====
   The owner: "only 5 come up and it looks like more are still loading at the other end". Today's card: the fan of five
   now reaches across the card (#5 stands at the card's far edge, not short of it, so the row ends where the card ends),
   and for a free device one calm line under VIEW THE TEN says where the other five are ("Nos. 6–10" and the TRIPTIC+
   lock chip; one tap tries the lock and opens membership: ds-the-ten.js sealedLine). The page: a sealed rank is drawn as
   a sealed card on purpose (full strength, its number, the lock), never as a faint slab that read as a poster still to
   arrive. Same places, depth and turn as before; only how far along the floor each stands. */
/* (29 October 2026) the fan's places, its centring in the card and its size on a narrow card are all ds-the-ten.css's now ("The
   Ten, evenly fanned"): one floor line, a gentle scale step, the same share of every poster showing, centred at every width */
html.ds .ds-ten-sealed-line {
  appearance: none; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin: 2px 0 -6px; padding: 0;
  border: 0; background: none; color: var(--c-label-2); cursor: pointer; -webkit-tap-highlight-color: transparent;
  font: var(--fw-footnote, 400) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote, 0);
}
html.ds .ds-ten-sealed-line:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-pill); }
html.ds .ds-ten-sealed-line .tm-lock-chip { flex: none; }
/* The Ten page: sealed ranks at full strength */
html.ds .ds-tt-row.is-sealed .ds-tt-row-rank { opacity: 1; }
html.ds .ds-tt-row.is-sealed .ds-tt-row-copy strong { color: var(--c-label-1); }
html.ds .ds-tt-row.is-sealed .ds-tt-row-copy small { color: var(--c-label-2); }
html.ds #device .ds-tt-row.is-sealed .ds-tt-row-poster .tm-seal { box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .42), 0 6px 14px rgba(0, 0, 0, .45); }
html.ds #device .ds-tt-slab { opacity: .92; }
html.ds #device .ds-tt-slab > b { color: var(--c-label-1); }

/* ===== prototype-src/you-choose.css ===== */
/* "You choose" (prototype-src/you-choose.js). Record: hub/docs/YOU-CHOOSE-2026-10-06.md.
   Three surfaces, all under html.ds and all drawn from the design tokens (no colour of their own):
     1. a fourth action in the settled reveal's toolbar, beside Share;
     2. one line above the main button while a link is out ("Waiting for their pick" / "They chose <film>"), in the
        slot of the "Swipe to compare" hint, whose words step aside for it;
     3. the sheet (TRIPTIC_DS.sheet.open): send, waiting, and the pick, where the chosen poster steps forward.
   !important here only answers the !important of the toolbar rules it sits beside (ds-film-share.css, device-fit.css). */

/* ---------------------------------------------------------------- 1. the toolbar: four across */
html.ds #device .trip-critical-layer .critical-result-toolbar.yc-four { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
html.ds #device .trip-critical-layer .critical-result-toolbar > button.yc-tool { position: relative !important; }
html.ds #device .trip-critical-layer .critical-result-toolbar > button > svg.critical-tool-choose { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html.ds #device .trip-critical-layer .critical-result-toolbar > button.yc-tool > span { white-space: nowrap; }
/* a link is out: a small lamp on the action */
html.ds #device .trip-critical-layer .critical-result-toolbar > button.yc-tool:is([data-state="waiting"], [data-state="picked"])::after {
  content: "" !important; position: absolute; left: calc(50% + 11px); top: 1px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-beam); box-shadow: 0 0 0 2px var(--c-stage);
}
html.ds #device .trip-critical-layer .critical-result-toolbar > button.yc-tool[data-state="picked"]::after { background: var(--c-ok); }
/* compact heights lay icon and label side by side: four fit when each column is only as wide as it needs */
html[data-fit][data-device-h="compact"] #device .trip-critical-layer.trip-phase-settled .critical-result-toolbar.yc-four {
  grid-template-columns: repeat(4, auto) !important; justify-content: space-between !important;
}
html[data-fit][data-device-h="compact"] #device .trip-critical-layer.trip-phase-settled .critical-result-toolbar.yc-four > button { gap: 5px !important; }
html[data-fit][data-device-h="compact"] #device .trip-critical-layer.trip-phase-settled .critical-result-toolbar.yc-four > button > svg { width: 32px !important; height: 32px !important; padding: 7px !important; }
html[data-fit][data-device-h="compact"] #device .trip-critical-layer.trip-phase-settled .critical-result-toolbar > button.yc-tool:is([data-state="waiting"], [data-state="picked"])::after { left: 23px; top: 4px; }

/* ---------------------------------------------------------------- 2. where things stand, above the main button */
html.ds #device .trip-critical-layer .critical-results > .yc-pill {
  position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 16px); min-height: 30px; margin: 0; padding: 0 14px 0 12px;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-stage-raised); box-shadow: var(--e-1);
  color: var(--c-label-1); -webkit-text-fill-color: var(--c-label-1);
  font: var(--fw-subhead-strong) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); white-space: nowrap;
  animation: yc-rise var(--motion-normal) var(--motion-curve) both;
}
html.ds #device .trip-critical-layer .critical-results > .yc-pill::before { content: ""; position: absolute; inset: -8px -6px; }   /* a 44pt target */
html.ds #device .trip-critical-layer .critical-results > .yc-pill:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
html.ds #device .trip-critical-layer .critical-results > .yc-pill[data-state="picked"] { border-color: var(--tint-edge); }
html.ds .yc-pill-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html.ds .yc-pill-tick { flex: none; position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--c-ok); }
html.ds .yc-pill-tick::after { content: ""; position: absolute; left: 5.5px; top: 3px; width: 4px; height: 7px; border: solid var(--c-lamp-ink); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
html.ds .yc-dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-beam); animation: yc-wait 1.8s var(--motion-breathe) infinite; }
/* the hint's words step aside for it (its rail of three stays) */
html.ds #device .trip-critical-layer.yc-has-status .critical-compare-hint { pointer-events: none !important; }   /* its rail keeps its own pointer-events: auto */
html.ds #device .trip-critical-layer.yc-has-status .critical-compare-hint > span { visibility: hidden; pointer-events: none; }
html[data-device-h="compact"].ds #device .trip-critical-layer .critical-results > .yc-pill { min-height: 28px; bottom: calc(100% + 5px); }
@keyframes yc-wait { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes yc-rise { from { opacity: 0; transform: translateX(-50%) translateY(6px); } to { opacity: 1; transform: translateX(-50%); } }

/* ---------------------------------------------------------------- 3. the sheet */
html.ds .ds-sheet-layer > .ds-sheet-host.yc-sheet { height: auto; max-height: 92%; }
html.ds .yc-sheet .ds-sheet-title { text-align: center; margin-bottom: 6px; }
html.ds .yc { display: flex; flex-direction: column; gap: 12px; padding: 0 0 4px; }
html.ds .yc-lede { margin: 0 auto; max-width: 32ch; text-align: center; text-wrap: pretty; color: var(--c-label-2); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); }
html.ds .yc-strip { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(100%, 312px); margin: 8px auto; padding: 0; list-style: none; }
html[data-device-h="compact"].ds .yc-strip { width: min(100%, 222px); margin: 4px auto; }
html.ds .yc-strip li {
  position: relative; aspect-ratio: 2 / 3; margin: 0; border-radius: var(--r-row); overflow: hidden; background: var(--c-stage-raised);
  box-shadow: var(--e-2), 0 0 0 1px var(--c-line-strong);
  transition: transform var(--motion-slow) var(--motion-spring), opacity var(--motion-slow) var(--motion-curve);
}
html.ds .yc-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
html.ds .yc-strip b {
  position: absolute; left: 6px; top: 6px; z-index: 1; min-width: 24px; padding: 2px 5px; border-radius: var(--r-chip); text-align: center;
  background: rgba(5, 5, 7, .72); color: var(--c-label-1); font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-caps);
}
html.ds .yc-nopost {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 8px; overflow-wrap: anywhere;
  background: linear-gradient(160deg, var(--tint-edge), var(--c-stage-raised) 70%); color: var(--c-label-1);
  font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui);
}
/* the pick: the chosen poster steps forward, the other two dim */
html.ds .yc-strip.has-pick li { opacity: .34; filter: saturate(.5); transform: scale(.94); }
html.ds .yc-strip.has-pick li.is-picked {
  opacity: 1; filter: none; transform: translateY(-6px) scale(1.08); z-index: 1;
  box-shadow: var(--e-3), 0 0 0 1px var(--c-seal-hi), 0 0 36px var(--tint-glow);
}
html.ds .yc-strip.has-pick li.is-picked b { background: var(--c-seal-fill); }
html.ds .yc[data-view="picked"] .yc-strip { margin-top: 18px; margin-bottom: 16px; }

html.ds .yc-switch {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--row-min); padding: 10px 14px;
  border: 1px solid var(--c-line); border-radius: var(--r-row); background: var(--c-fill-1);
}
html.ds .yc-switch > span { display: grid; gap: 2px; min-width: 0; }
html.ds .yc-switch strong { color: var(--c-label-1); font: var(--fw-headline) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); }
html.ds .yc-switch small { color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds .yc-switch input { flex: none; }
html.ds .yc-asked {
  margin: -4px 0 0; padding: 10px 14px 12px; max-height: 96px; overflow-y: auto; overflow-wrap: anywhere;
  border: 1px solid var(--c-line); border-radius: var(--r-row); background: var(--c-fill-1);
  color: var(--c-label-1); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead);
}
html.ds .yc-asked > span { display: block; margin-bottom: 2px; color: var(--c-beam); font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; }
html.ds #device .yc .primary-button { width: 100%; margin: 4px 0 0; }
html.ds #device .yc .quiet-button { width: 100%; margin: -6px 0 0; background: none !important; border: 0 !important; box-shadow: none !important; }
html.ds #device .yc .quiet-button:disabled { color: var(--c-label-3); }
html.ds .yc-status {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; outline: 0;
  color: var(--c-label-1); font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline);
}
html.ds .yc-eyebrow { margin: 0; text-align: center; color: var(--c-beam); font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; }
html.ds .yc-title { margin: -8px 0 0; text-align: center; text-wrap: balance; overflow-wrap: anywhere; outline: 0; color: var(--c-label-1); font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); }
html.ds .yc-foot { margin: 0; text-align: center; color: var(--c-label-3); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds .yc-link { display: grid; gap: 6px; color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }
html.ds .yc-link input {
  width: 100%; min-height: var(--target); padding: 0 12px; border: 1px solid var(--c-line-strong); border-radius: var(--r-control);
  background: var(--c-fill-1); color: var(--c-label-1); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui);
}
html.ds .yc-copy-field { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; }

/* ---------------------------------------------------------------- the sender's own quiet pick (lane DELIGHT, 9 October 2026)
   While the link is made, each poster is a button: choose one to pick it yourself (choose it again to take it back).
   It is marked "Yours" for the sender only; the other person never sees it. Same pick: "Great minds". */
html.ds .yc-mine-pick {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit;
  background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.ds .yc-mine-pick:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
html.ds .yc-strip li.is-mine { box-shadow: var(--e-2), 0 0 0 2px var(--c-seal-hi); }
html.ds .yc-mine-badge {
  position: absolute; left: 50%; bottom: 6px; z-index: 1; transform: translateX(-50%); padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--c-seal-fill); color: var(--c-label-1); font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); font-style: normal; letter-spacing: var(--tr-caps); white-space: nowrap;
}
html.ds .yc-mine-note { margin: -4px auto 0; max-width: 34ch; text-align: center; text-wrap: pretty; color: var(--c-label-3); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds .yc-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.ds .yc[data-match="true"] .yc-eyebrow { color: var(--c-caution); }
html.ds .yc-gm-line { margin-top: -6px; }
html.ds .yc-gm-still { display: flex; justify-content: center; margin: 0 0 -4px; }

/* ---------------------------------------------------------------- calm */
@media (prefers-reduced-motion: reduce) {
  html.ds .yc-strip li { transition: none; }
  html.ds .yc-strip.has-pick li, html.ds .yc-strip.has-pick li.is-picked { transform: none; }
  html.ds .yc-dot, html.ds #device .trip-critical-layer .critical-results > .yc-pill { animation: none; }
}
html.ds #device.manual-reduced-motion .yc-strip li, html.ds.reduce-motion .yc-strip li { transition: none; }
html.ds #device.manual-reduced-motion .yc-strip.has-pick li, html.ds.reduce-motion .yc-strip.has-pick li { transform: none; }
html.ds #device.manual-reduced-motion :is(.yc-dot, .yc-pill), html.ds.reduce-motion :is(.yc-dot, .yc-pill) { animation: none !important; }
@media (forced-colors: active) {
  html.ds .yc-strip.has-pick li.is-picked { outline: 3px solid Highlight; }
  html.ds .yc-dot, html.ds .yc-pill-tick { forced-color-adjust: none; }
}

/* ---------------------------------------------------------------- 4. on the share page: its own option (8 October)
   The page Share opens for a three holds You choose as an option of its own, after the ways of sharing the three:
   a heading, one sentence of what it does, where a sent link stands, and one button that opens the sheet above. */
html.ds #device .collectible-share > .yc-share {
  order: 7; box-sizing: border-box; width: 100%; margin: 22px 0 0; padding: 16px 16px 14px; border-radius: var(--r-card);
  background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); text-align: left;
}
html.ds #device .collectible-share > .yc-share > .yc-share-head { display: flex; align-items: center; gap: 10px; color: var(--c-seal-hi); }
html.ds #device .collectible-share > .yc-share > .yc-share-head > svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html.ds #device .collectible-share > .yc-share h2 { margin: 0; font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--fw-headline); letter-spacing: var(--tr-headline); color: var(--c-label-1); }
html.ds #device .collectible-share > .yc-share > .yc-share-what { margin: 6px 0 0; font-size: var(--fs-subhead); line-height: var(--lh-subhead); letter-spacing: var(--tr-subhead); color: var(--c-label-2); }
/* a Collection of more than three films: which three the link takes */
html.ds #device .collectible-share > .yc-share > .yc-share-which { margin: 6px 0 0; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--c-label-3); }
html.ds #device .collectible-share > .yc-share > .yc-share-status { margin: 8px 0 0; font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--fw-subhead-strong); color: var(--c-beam); }
html.ds #device .collectible-share > .yc-share > .yc-share-status[data-state="picked"] { color: var(--c-ok); }
html.ds #device .collectible-share > .yc-share > .yc-share-open { width: 100%; min-height: 48px; margin: 12px 0 0; }

/* ===== prototype-src/friend-three.css ===== */
/* "Which one?" inside the app (prototype-src/friend-three.js; lane WELCOME, 14 October 2026; hub/docs/WELCOME-2026-10-14.md).
   One sheet (TRIPTIC_DS.sheet.open), drawn from the design tokens only: no colour, size or radius of its own. Three views:
   the three films with a pick beside each (open), the pick that was made (picked), and a plain word when the link cannot be read.
   Largest text: every row wraps and nothing is clipped. Reduce Motion: the chosen poster is simply marked, nothing moves. */

html.ds .ds-sheet-layer > .ds-sheet-host.ft-sheet { height: auto; max-height: 92%; }
html.ds .ft-sheet .ds-sheet-title { text-align: center; margin-bottom: 6px; }
html.ds .ft { display: flex; flex-direction: column; gap: 12px; padding: 0 0 4px; }
html.ds .ft-lede { margin: 0 auto; max-width: 32ch; text-align: center; text-wrap: pretty; color: var(--c-label-2); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); }
html.ds .ft-eyebrow { margin: 0; text-align: center; color: var(--c-beam); font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; }
html.ds .ft[data-match="true"] .ft-eyebrow { color: var(--c-caution); }
html.ds .ft-title { margin: 0; text-align: center; text-wrap: balance; overflow-wrap: anywhere; outline: 0; color: var(--c-label-1); font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); }
html.ds .ft-eyebrow + .ft-title { margin-top: -8px; }
html.ds .ft-meta { margin: 0; color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); overflow-wrap: anywhere; }
html.ds .ft-meta.ft-centre { text-align: center; margin-top: -6px; }

/* what they asked for (only when the sender chose to include it) */
html.ds .ft-asked {
  margin: 0; padding: 10px 14px 12px; max-height: 96px; overflow-y: auto; overflow-wrap: anywhere;
  border: 1px solid var(--c-line); border-radius: var(--r-row); background: var(--c-fill-1);
  color: var(--c-label-1); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead);
}
html.ds .ft-asked > span { display: block; margin-bottom: 2px; color: var(--c-beam); font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; }
html.ds .ft-asked > p { margin: 0; }

/* the three, one row each */
html.ds .ft-films { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
html.ds .ft-film { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 12px; border: 1px solid var(--c-line); border-radius: var(--r-row); background: var(--c-fill-1); }
html.ds .ft-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
html.ds .ft-thumb { position: relative; flex: none; width: 60px; aspect-ratio: 2 / 3; border-radius: var(--r-chip); overflow: hidden; background: var(--c-stage-raised); box-shadow: var(--e-1), 0 0 0 1px var(--c-line-strong); }
html.ds .ft-thumb img, html.ds .ft-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
html.ds .ft-nopost {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 6px; overflow: hidden; overflow-wrap: anywhere;
  background: linear-gradient(160deg, var(--tint-edge), var(--c-stage-raised) 70%); color: var(--c-label-1);
  font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui);
}
html.ds .ft-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
html.ds .ft-no { color: var(--c-beam); font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-caps); }
html.ds .ft-text h3 { margin: 0; overflow-wrap: anywhere; text-wrap: balance; color: var(--c-label-1); font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); }
html.ds .ft-line { margin: 0; color: var(--c-label-2); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); text-wrap: pretty; }
html.ds .ft-actions { display: flex; flex-direction: column; gap: 4px; }
html.ds #device .ft .primary-button { width: 100%; margin: 0; }
html.ds #device .ft .quiet-button { width: 100%; margin: 0; background: none !important; border: 0 !important; box-shadow: none !important; }
html.ds #device .ft .quiet-button:disabled { color: var(--c-label-3); }
html.ds .ft-seen { margin: 0; padding: 10px 0; text-align: center; color: var(--c-label-3); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds .ft-status { min-height: 0; margin: 0; text-align: center; color: var(--c-caution); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds .ft-status:empty { display: none; }
html.ds .ft-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the pick: the chosen poster steps forward, the other two dim */
html.ds .ft-strip { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(100%, 312px); margin: 18px auto 16px; padding: 0; list-style: none; }
html[data-device-h="compact"].ds .ft-strip { width: min(100%, 222px); margin: 10px auto 8px; }
html.ds .ft-strip li {
  position: relative; aspect-ratio: 2 / 3; margin: 0; border-radius: var(--r-row); overflow: hidden; background: var(--c-stage-raised);
  box-shadow: var(--e-2), 0 0 0 1px var(--c-line-strong); opacity: .34; filter: saturate(.5); transform: scale(.94);
  transition: transform var(--motion-slow) var(--motion-spring), opacity var(--motion-slow) var(--motion-curve);
}
html.ds .ft-strip li.is-picked { opacity: 1; filter: none; transform: translateY(-6px) scale(1.08); z-index: 1; box-shadow: var(--e-3), 0 0 0 1px var(--c-seal-hi), 0 0 36px var(--tint-glow); }
html.ds .ft-strip b {
  position: absolute; left: 6px; top: 6px; z-index: 1; min-width: 24px; padding: 2px 5px; border-radius: var(--r-chip); text-align: center;
  background: rgba(5, 5, 7, .72); color: var(--c-label-1); font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-caps);
}
html.ds .ft-strip li.is-picked b { background: var(--c-seal-fill); }

/* largest text: the thumbnail keeps its width, the words take the rest and wrap */
html[data-text-size="largest"].ds .ft-thumb { width: 48px; }

/* calm */
@media (prefers-reduced-motion: reduce) {
  html.ds .ft-strip li { transition: none; }
  html.ds .ft-strip li, html.ds .ft-strip li.is-picked { transform: none; }
}
html.ds #device.manual-reduced-motion .ft-strip li, html.ds.reduce-motion .ft-strip li { transition: none; transform: none; }
@media (forced-colors: active) {
  html.ds .ft-strip li.is-picked { outline: 3px solid Highlight; }
}

/* ===== prototype-src/two-film-answer.css ===== */
/* TRIPTIC: the two-film answer (6 October 2026). Runtime pair: two-film-answer.js. Record: hub/docs/DECISIONS.md.

   The page for a request the service could stand behind twice, not three times. It is an answer, drawn with the same
   parts as the rest of the app (the round Back, the request capsule, the large title, the card surface, the lamp
   button), and it is deliberately not the three: no fan, no sealed cards, no dock. Two posters stand side by side like
   the two leaves of a diptych, each turned a few degrees towards the other.

   Motion: on arrival only (.is-arriving, set once by the page): the leaves open from the hinge, one pass of light
   crosses each poster, and the note and the button follow. Transform and opacity only. With Reduce Motion (the
   system's, the app's own switch, or the reduced motion tier) the page is simply there.

   Design-system tokens only. No colour, size or radius is invented here. */
html.ds #device > .screen.two-film-screen {
  display: flex; flex-direction: column;
  padding: var(--page-top-24) var(--gutter) 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  text-align: left;
}
/* Every screen carries a slow glow that overhangs it top and bottom. On a page that scrolls itself the overhang became
   190pt of empty page under the last line, and the button no longer stayed put. Here the glow keeps to the screen. */
html.ds #device > .screen.two-film-screen::before { inset: 0; animation: none; }

/* ===== header: the round Back, the mark ===== */
html.ds #device .two-film-bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: var(--sp-2); min-height: 44px; flex: none; }
html.ds #device .two-film-bar > .circle-control { position: static; width: 44px; height: 44px; margin: 0; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--c-label-1); }
html.ds #device .two-film-brand { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; opacity: .92; }
html.ds #device .two-film-brand > .brand-mark { width: auto; height: 28px; margin: 0; }
html.ds #device .two-film-brand > .wordmark { width: auto; height: 12px; margin: 0; }

/* ===== the request, as the three show it ===== */
html.ds #device .two-film-request {
  flex: none; margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line);
}
html.ds #device .two-film-request > .eyebrow { display: block; margin: 0; font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-beam); }
html.ds #device .two-film-request > p {
  margin: 2px 0 0; font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); letter-spacing: var(--tr-body); color: var(--c-label-1);
  white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ===== the headline: two, said plainly ===== */
html.ds #device .two-film-heading { flex: none; margin-top: var(--sp-4); text-align: center; }
html.ds #device .two-film-heading > .eyebrow { display: block; margin: 0; font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-beam); }
html.ds #device .two-film-heading > h1 { margin: 2px 0 0; font: var(--fw-large-title) var(--fs-large-title)/var(--lh-large-title) var(--font-ui); letter-spacing: var(--tr-large-title); color: var(--c-label-1); }
/* why not three: the service's own sentence, straight under the headline */
html.ds #device .two-film-heading > p { max-width: 34ch; margin: 6px auto 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); text-wrap: balance; }

/* ===== the two films ===== */
/* (3 November 2026, owner: "larger posters") the pair takes the width of the glass, not of the text column: it reaches
   out to 12pt from each edge and the leaves stand 8pt apart at the hinge (at 375pt each poster is 172pt wide, was 162) */
html.ds #device .two-film-pair {
  position: relative; flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2);
  margin: var(--sp-4) calc(var(--sp-3) - var(--gutter)) 0; padding: 0; list-style: none; perspective: 1100px;
}
html.ds #device .two-film-card { position: relative; min-width: 0; margin: 0; padding: 0; }
html.ds #device .two-film-poster {
  position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; margin: 0; padding: 0; overflow: hidden;
  border: 0; border-radius: var(--r-card); background: var(--c-stage-raised); color: var(--c-label-1);
  box-shadow: var(--e-2), inset 0 0 0 1px var(--c-line-strong);
  transform-origin: 100% 50%; transform: rotateY(5deg);
  -webkit-tap-highlight-color: transparent;
}
html.ds #device .two-film-card:nth-child(2) .two-film-poster { transform-origin: 0 50%; transform: rotateY(-5deg); }
html.ds #device .two-film-poster > img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
html.ds #device .two-film-poster > .ds-poster-fallback { position: absolute; inset: 0; border-radius: inherit; }
/* A film with no artwork gets the system's coloured card. That card prints the film's name itself, and so does this
   card's own plate: the name appeared twice, one over the other. Here the plate says it and the card stays quiet. */
html.ds #device .two-film-poster > .ds-poster-fallback > :is(.ds-pf-title, .ds-pf-year) { display: none; }
/* a shade at the foot so the match label reads on any poster, and the hairline every poster wears */
html.ds #device .two-film-poster::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--c-stage) 92%, transparent) 0, color-mix(in srgb, var(--c-stage) 62%, transparent) 26%, transparent 58%);
  box-shadow: inset 0 0 0 1px var(--c-line-strong);
}
/* the film's name and how well it fits, on the poster, as a card of the three carries them */
html.ds #device .two-film-plate { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; display: grid; justify-items: start; gap: var(--sp-2); text-align: left; }
html.ds #device .two-film-plate > strong {
  font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
html.ds #device .two-film-chip {
  max-width: 100%; padding: 5px 10px;
  border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-stage) 70%, transparent); box-shadow: inset 0 0 0 1px var(--c-line-strong);
  font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--c-label-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.ds #device .two-film-card:first-child .two-film-chip { background: var(--c-seal-fill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); color: #fff; }
/* Save, on the poster's corner: the round control, a bookmark that fills */
html.ds #device .two-film-save {
  position: absolute; z-index: 2; top: 8px; right: 8px; width: 44px; height: 44px; margin: 0; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-stage) 62%, transparent); box-shadow: inset 0 0 0 1px var(--c-line-strong);
  color: var(--c-label-1); -webkit-tap-highlight-color: transparent;
}
html.ds #device .two-film-save > :is(svg, .trip-ui-icon) { width: 22px; height: 22px; }
html.ds #device .two-film-save.saved { color: var(--c-lamp); }
html.ds #device .two-film-save.saved svg :is(path, polygon, rect) { fill: currentColor; }
html.ds #device .two-film-copy { margin-top: 10px; padding: 0 2px; display: grid; gap: 2px; }
html.ds #device .two-film-copy > .two-film-meta { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-2); }
/* where to watch: the line the three show under a film (showpiece.css .sp-where), the service's badge then its words;
   in a column this narrow it may take a second line rather than lose its words */
html.ds #device .two-film-copy > .two-film-where {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 2px; min-width: 0;
  font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); color: var(--c-label-2);
}
html.ds #device .two-film-copy > .two-film-where > span { min-width: 0; overflow-wrap: anywhere; }
html.ds #device .two-film-copy > .two-film-where > .service-badge { flex: none; width: 16px; height: 16px; margin: 0; border-radius: 4px; box-shadow: inset 0 0 0 .5px var(--c-line-strong); }
html.ds #device .two-film-copy > .two-film-where > .service-badge > b { scale: .62; }
html.ds #device .two-film-copy > .two-film-where > .service-badge > img { border-radius: inherit; }
/* why it fits, in full (3 November 2026, owner: never cut short with an ellipsis) */
html.ds #device .two-film-copy > p {
  margin: 2px 0 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-3);
  overflow-wrap: break-word; text-wrap: pretty;
}

/* ===== the principle, and the server's count ===== */
html.ds #device .two-film-note { flex: none; margin: var(--sp-4) 0 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-3); text-align: center; text-wrap: balance; }
html.ds #device .two-film-note > .two-film-count { display: block; }
html.ds #device .two-film-note > .two-film-count[hidden] { display: none; }

/* ===== one action, always in reach ===== */
html.ds #device .two-film-foot {
  position: sticky; bottom: 0; z-index: 3; flex: none; margin: auto calc(-1 * var(--gutter)) 0;
  padding: var(--sp-6) var(--gutter) max(var(--sp-4), calc(var(--safe-bottom, 0px) + var(--sp-2)));
  background: linear-gradient(to bottom, transparent 0, var(--c-stage) 44%);
  pointer-events: none;
}
html.ds #device .two-film-foot > .primary-button { pointer-events: auto; }
/* a refined request that came back as two keeps its way back to the three it started from */
html.ds #device .two-film-screen > .refinement-return { order: 9; flex: none; margin: 0 0 max(var(--sp-3), var(--safe-bottom, 0px)); text-align: center; }
html.ds #device .two-film-screen:has(> .refinement-return) > .two-film-foot { position: static; margin-top: var(--sp-5); padding-bottom: var(--sp-1); background: none; }

/* ===== arrival ===== */
@keyframes two-film-leaf-left { from { opacity: 0; transform: translate3d(0, 12px, 0) rotateY(38deg); } to { opacity: 1; transform: rotateY(5deg); } }
@keyframes two-film-leaf-right { from { opacity: 0; transform: translate3d(0, 12px, 0) rotateY(-38deg); } to { opacity: 1; transform: rotateY(-5deg); } }
@keyframes two-film-rise { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes two-film-light { from { transform: translate3d(-130%, 0, 0) skewX(-14deg); } to { transform: translate3d(230%, 0, 0) skewX(-14deg); } }
@keyframes two-film-mark { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
html.ds #device .two-film-sheen { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 46%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-lamp) 22%, transparent), transparent); transform: translate3d(-130%, 0, 0) skewX(-14deg); }
html.ds #device .two-film-screen.is-arriving .two-film-heading { animation: two-film-rise var(--motion-normal) var(--motion-curve) both; }
html.ds #device .two-film-screen.is-arriving .two-film-poster { animation: two-film-leaf-left var(--motion-slow) var(--motion-spring) 120ms both; }
html.ds #device .two-film-screen.is-arriving .two-film-card:nth-child(2) .two-film-poster { animation-name: two-film-leaf-right; animation-delay: 180ms; }
html.ds #device .two-film-screen.is-arriving :is(.two-film-save, .two-film-copy) { animation: two-film-rise var(--motion-normal) var(--motion-curve) 420ms both; }
html.ds #device .two-film-screen.is-arriving .two-film-sheen { opacity: 1; animation: two-film-light var(--motion-slow) var(--motion-curve) 640ms both; }
html.ds #device .two-film-screen.is-arriving .two-film-card:nth-child(2) .two-film-sheen { animation-delay: 760ms; }
html.ds #device .two-film-screen.is-arriving :is(.two-film-note, .two-film-foot) { animation: two-film-rise var(--motion-normal) var(--motion-curve) 520ms both; }
html.ds #device .two-film-save.is-marking > :is(svg, .trip-ui-icon) { animation: two-film-mark var(--motion-normal) var(--motion-spring); }

/* ===== from the wait: the arches' light carried into the posters (two-film-answer.js handOff, 3 November 2026) =====
   The light is drawn on a layer of its own over everything, in the arch's colours (the system's violet, beam and lamp),
   and moves from where each arch stood to where its poster stands. The poster and its Save come up as it lands. */
html.ds #device > .two-film-handoff { position: fixed; inset: 0; z-index: 120; pointer-events: none; overflow: hidden; contain: layout paint; }
/* the pair's own 3D room, copied: where the pair stands, with its perspective (set from the pair itself) */
html.ds #device > .two-film-handoff > .two-film-handoff-pair { position: absolute; display: block; }
html.ds #device > .two-film-handoff > .two-film-handoff-pair > .two-film-glow { position: absolute; display: block; box-sizing: border-box; transform-origin: 0 0; }
/* inside it, the poster's own tilt and hinge (set from the poster itself): landed, the light is the poster's shape */
html.ds #device > .two-film-handoff .two-film-glow-tilt { position: absolute; inset: 0; display: block; border-radius: var(--r-card); }
/* the hand-off is this screen's arrival: the screen's own entrance would move the poster under a light already on
   its way to it, so it does not play, and the page holds still until the light has gone */
html.ds #device > .screen.two-film-screen.is-handoff { animation: none !important; opacity: 1 !important; transform: none !important; }
html.ds #device > .screen.two-film-screen.is-handoff:not(.is-settled) { overflow-y: hidden; }
/* the same light in two shapes: the arch it was, and the poster's card it becomes (the one fades into the other) */
html.ds #device > .two-film-handoff .two-film-glow-tilt > b {
  position: absolute; inset: 0; display: block; border-radius: var(--r-card); overflow: hidden;
  background:
    radial-gradient(62% 34% at 50% 94%, color-mix(in srgb, var(--c-lamp) 96%, transparent), color-mix(in srgb, var(--c-lamp) 30%, transparent) 46%, transparent 74%),
    radial-gradient(70% 46% at 34% 46%, color-mix(in srgb, var(--c-beam) 46%, transparent), transparent 70%),
    radial-gradient(84% 58% at 64% 62%, color-mix(in srgb, var(--c-seal-fill) 78%, transparent), transparent 72%),
    linear-gradient(180deg, var(--c-stage) 0%, color-mix(in srgb, var(--c-seal-fill) 22%, var(--c-stage)) 36%, color-mix(in srgb, var(--c-seal-fill) 62%, var(--c-stage)) 100%);
  box-shadow: 0 0 28px 4px color-mix(in srgb, var(--c-seal-fill) 46%, transparent), 0 0 64px 10px color-mix(in srgb, var(--c-beam) 18%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--c-lamp) 26%, transparent);
}
html.ds #device .two-film-screen.is-handoff :is(.two-film-poster, .two-film-save) { animation: none !important; opacity: 0; }
html.ds #device .two-film-screen.is-handoff .two-film-sheen { animation: none; opacity: 0; }
html.ds #device .two-film-screen.is-handoff .two-film-card.is-landed :is(.two-film-poster, .two-film-save) { opacity: 1; transition: opacity var(--motion-normal) var(--motion-curve); }
html.ds #device .two-film-screen.is-handoff .two-film-card.is-landed .two-film-sheen { opacity: 1; animation: two-film-light var(--motion-slow) var(--motion-curve) 140ms both; }

@media (prefers-reduced-motion: reduce) {
  html.ds #device .two-film-screen.is-arriving :is(.two-film-heading, .two-film-poster, .two-film-save, .two-film-copy, .two-film-note, .two-film-foot, .two-film-sheen),
  html.ds #device .two-film-save.is-marking > :is(svg, .trip-ui-icon) { animation: none !important; }
  html.ds #device .two-film-sheen { opacity: 0 !important; }
}
html.ds #device.manual-reduced-motion .two-film-screen.is-arriving :is(.two-film-heading, .two-film-poster, .two-film-save, .two-film-copy, .two-film-note, .two-film-foot, .two-film-sheen),
html.ds[data-motion-tier="reduced"] #device .two-film-screen.is-arriving :is(.two-film-heading, .two-film-poster, .two-film-save, .two-film-copy, .two-film-note, .two-film-foot, .two-film-sheen),
html.ds #device.manual-reduced-motion .two-film-save.is-marking > :is(svg, .trip-ui-icon),
html.ds[data-motion-tier="reduced"] #device .two-film-save.is-marking > :is(svg, .trip-ui-icon) { animation: none !important; }
html.ds #device.manual-reduced-motion .two-film-sheen, html.ds[data-motion-tier="reduced"] #device .two-film-sheen { opacity: 0 !important; }

/* ===== the smallest phone: a little less air, the same page ===== */
@media (max-height: 700px) {
  html.ds #device .two-film-request { margin-top: var(--sp-3); }
  html.ds #device .two-film-heading, html.ds #device .two-film-pair, html.ds #device .two-film-note { margin-top: var(--sp-3); }
}

/* ===== prototype-src/showpiece.css ===== */
/* TRIPTIC showpiece: everything between the press on "Find my three" and the three films.
   Record: hub/docs/SHOWPIECE-2026-10-07.md (the first pass, and "Second pass"). Runtime: showpiece.js.

   THE IDEA. Three arches of light, and the object they become. You ask, the house goes dark; three arches of light
   (TRIPTIC's own mark) rise where your films will stand, already in the shape of a triptych: a large centre arch and
   two wings hinged to it, standing back in perspective. Your own words hang under them. When the films are found the
   wings fold shut behind the centre on one beat of light: the triptych is closed, sealed, at its full size. Then it
   opens: the left wing swings out with its film, the right wing with its film, the strongest match comes up in the
   centre last, and the wings ease open to where they rest. Your three: one object standing on a dark floor, lit by
   its own films.
   (In the code an arch is ".sp-arc" inside ".sp-door": the first drawing had square doors, and the name stayed.)

   HOW THIS SHEET IS BUILT.
   - It owns the look of .trip-critical-layer whenever showpiece.js has marked it data-showpiece="on". The state
     machine, the three card buttons, the request capsule, the primary button and the action row are still the
     app's own (public/assets/triptic-critical-experience.js); about twenty older sheets style those same nodes. The
     older decoration is switched off here in one list, and the nodes that stay are reset (all: unset) and laid out
     again from the numbers below, so no older rule reaches them.
   - Everything that MOVES is a node this layer made itself (.sp-*): no older sheet names them. Animated layers change
     transform and opacity only.
   - One geometry for every phone: the numbers at the top, from the layer's own width and height (showpiece.js writes
     --sp-vw and --sp-vh), the safe areas and the type unit. The centre panel is --sp-c of the page's width and a wing
     is --sp-wk of the centre; each wing hangs from the centre's edge and stands back by --sp-ang (showpiece.js
     flattens that angle when a page has room to spare, and never lets a wing leave the page). The arches, the sealed
     panel and the posters stand in the same places from the first line of light to the settled triptych, so nothing
     is ever re-laid out mid-performance.
   - Perspective: every panel carries its own (the same distance, aimed at the same point, --sp-vx / --sp-vy), so the
     three share one vanishing point while each card stays an ordinary, flat button for a finger, VoiceOver and the
     film page's opening flight.
   - Reduce Motion: nothing swings, turns or travels. The triptych stands open from the start; faces and light fade.

   !important: every declaration on an app-owned node carries it, because the sheets before this one do.
   :is([data-showpiece="on"], #sp#sp): the second argument matches nothing; it is there for its weight. A selector
   list inside :is() counts as its heaviest member, so every rule here outranks any older rule on the same node
   however many classes that rule strings together, without this sheet having to know them. */

html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) {
  /* ---- the one geometry ---- */
  --sp-u: var(--type-unit, 1px);
  --sp-top: max(20px, calc(var(--safe-top, 0px) + 6px));
  --sp-bot: max(16px, calc(var(--safe-bottom, 0px) + 10px));
  --sp-c: .57;                                   /* the centre panel's share of the page's width */
  --sp-wk: .66;                                  /* a wing, against the centre panel */
  --sp-ang: 48deg;                               /* how far back a wing stands at rest (showpiece.js: wingAngle) */
  --sp-gap: 2px;                                 /* the dark line at each hinge */
  --sp-turn: 0px;                                /* how far the whole object steps aside when a wing is chosen */
  --sp-fw: var(--sp-vw, 390px);                  /* the frame the triptych stands in: the whole page, or one leaf of a folding phone */
  --sp-fh: var(--sp-vh, 844px);
  --sp-ox: 0px;
  --sp-rise: .5;                                 /* how far down the spare height the triptych sits */
  --sp-req-h: calc(42 * var(--sp-u));            /* the request: two quiet lines under the top row */
  --sp-head-bot: calc(var(--sp-top) + 44px + 4px + var(--sp-req-h));
  --sp-dock-h: calc(52px + 4px + 46 * var(--sp-u));
  --sp-dock-top: calc(var(--sp-fh) - var(--sp-bot) - var(--sp-dock-h));
  --sp-cap-h: calc(160 * var(--sp-u));           /* the chosen film's name, its facts and why: two lines, one line, three lines (a long name: three, one, two) */
  --sp-floor-h: 40px;                            /* the floor between the panels' feet and the words: the reflection and the mark */
  --sp-fit-h: calc(var(--sp-dock-top) - var(--sp-head-bot) - var(--sp-cap-h) - var(--sp-floor-h) - 14px);
  --sp-cw: max(96px, min(calc(var(--sp-fw) * var(--sp-c)), calc(var(--sp-fit-h) / 1.5), 300px));
  --sp-ch: calc(var(--sp-cw) * 1.5);
  --sp-ww: calc(var(--sp-cw) * var(--sp-wk));
  --sp-wh: calc(var(--sp-ww) * 1.5);
  --sp-slack: max(0px, calc(var(--sp-fit-h) - var(--sp-ch)));
  --sp-tri-top: calc(var(--sp-head-bot) + 10px + var(--sp-slack) * var(--sp-rise));
  --sp-tri-bot: calc(var(--sp-tri-top) + var(--sp-ch));
  --sp-cx: calc(var(--sp-ox) + (var(--sp-fw) - var(--sp-cw)) / 2);
  --sp-lhx: calc(var(--sp-cx) - var(--sp-gap));                    /* the left hinge */
  --sp-rhx: calc(var(--sp-cx) + var(--sp-cw) + var(--sp-gap));     /* the right hinge */
  --sp-wy: calc(var(--sp-tri-bot) - var(--sp-wh));
  --sp-hit: min(calc(var(--sp-ww) * .74), calc(var(--sp-cx) - var(--sp-ox) - var(--sp-gap) - 2px));   /* how wide a wing is to a finger: its widest, when it is the one chosen, and never off the page */
  --sp-persp: calc(var(--sp-cw) * 4.1);          /* how far away the eye is */
  --sp-vx: calc(var(--sp-ox) + var(--sp-fw) / 2);                  /* the one vanishing point */
  --sp-vy: calc(var(--sp-tri-top) + var(--sp-ch) * .46);
  --sp-cap-top: calc(var(--sp-tri-bot) + var(--sp-floor-h));
  --sp-status-top: calc(var(--sp-cap-top) - 4px);
  --sp-mirror: .3;                               /* how much of an arch's height its reflection on the floor runs to */
  --sp-r: calc(var(--sp-cw) * .045);
  /* ---- light ---- */
  --sp-lamp: var(--c-lamp, #f3eee6);
  --sp-beam: var(--c-beam, #68c9ff);
  --sp-seal: var(--c-seal-hi, #a78bfa);
  --sp-tint: var(--mo-tint-rgb, 141, 102, 255);
  /* ---- time ---- */
  --sp-ease: var(--mo-ease-out, cubic-bezier(.2, .8, .2, 1));
  --sp-inout: var(--mo-ease-inout, cubic-bezier(.65, 0, .35, 1));
  --sp-spring: var(--mo-spring-smooth, cubic-bezier(.2, .8, .2, 1));
  --sp-snap: var(--mo-spring-snappy, cubic-bezier(.2, .9, .25, 1.18));
  --sp-swing: cubic-bezier(.3, .1, .2, 1.22);    /* a wing on its hinge: it has weight, and goes a little too far */

  background: var(--c-stage, #050507) !important;
  overflow: hidden !important;
  isolation: isolate;
  color: var(--c-label-1, #f5f4f7);
  font-family: var(--font-ui, system-ui, -apple-system, sans-serif);
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transform: none;
  filter: none;
  transition: opacity 260ms var(--sp-ease) !important;
}
/* a short page (an iPhone SE, or a page with the browser's own bars on it): the request keeps to one line and the words to two */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-size="short"] { --sp-req-h: calc(22 * var(--sp-u)); --sp-cap-h: calc(126 * var(--sp-u)); --sp-floor-h: 32px; }
/* a tall page (the largest iPhones): the spare height goes to the floor the object stands on and to the words under it */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-size="tall"]:not([data-sp-fold]) { --sp-cap-h: calc(178 * var(--sp-u)); --sp-floor-h: 50px; --sp-rise: .46; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).is-live { opacity: 1; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).is-returning { opacity: 0; transition-duration: 320ms !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).critical-leaving { opacity: 0; transition-duration: 220ms !important; }
/* behind an open film the three are out of sight, except while the film page's own opening or closing flight is running (film-transition.js fades and scales this layer itself) */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).critical-behind-film { visibility: hidden !important; transition: none !important; }
html.ds #device .trip-critical-host.ft-running > .trip-critical-layer:is([data-showpiece="on"], #sp#sp).critical-behind-film { visibility: visible !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-instant,
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-instant *,
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-instant *::before,
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-instant *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 1ms !important; animation-delay: 0s !important; }

/* ===== the older decoration, switched off in one place ===== */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > :is(.critical-atmosphere, .critical-engine-stage, .critical-energy-paths, .critical-final-bloom,
  .critical-compare-hint, .critical-status, .trip-waiting-copy, .mo-projector, .orb100-transfer, .mo-sig-shutter, .mo-sig-motes, .mo-sig-glow, .mo-tint, .mo-reveal-all, canvas, .ds-nothing-sealed-deco),
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) :is(.triptych-spine, .mo-film, .critical-card-energy, .critical-card-back, .mo-beam-clip, .mo-develop, .critical-artwork-fallback, .critical-brand-lockup, .critical-cta-spacer, .critical-cta-icon),
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-results-heading > .eyebrow,
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card-front > * { display: none !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)::before,
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)::after { content: none !important; display: none !important; }
/* the older sheets also hang glows, shadows and scrims on these nodes' ::before and ::after, which a reset of the node
   itself does not reach: none of them is drawn here */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > :is(.critical-header, .critical-request-capsule, .critical-results-heading, .critical-card-stage, .critical-results)::before,
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > :is(.critical-header, .critical-request-capsule, .critical-results-heading, .critical-card-stage, .critical-results)::after,
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) :is(.critical-card, .critical-card-inner, .critical-card-front, .triptych-plane, .critical-film-cta, .critical-friday-refresh, .critical-result-toolbar, .critical-result-toolbar > button, .back-chevron, .critical-sound-toggle, .critical-header-slot, .ds-req-toggle)::before,
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) :is(.critical-card, .critical-card-inner, .critical-card-front, .triptych-plane, .critical-film-cta, .critical-friday-refresh, .critical-result-toolbar, .critical-result-toolbar > button, .back-chevron, .critical-sound-toggle, .critical-header-slot, .ds-req-toggle)::after { content: none !important; display: none !important; }

/* ===== the room: what this layer draws itself, behind the panels ===== */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-over { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
/* Each film's own colours on the dark around it. A poster drawn once, a few dots wide, and shown very large: the
   phone smooths it into soft light, and nothing is blurred or sampled while the page is on show. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-room { position: absolute; opacity: 0; transition: opacity 900ms var(--sp-ease); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-room > canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%); mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-room[data-rank="1"] { left: calc(var(--sp-cx) - var(--sp-cw) * .55); top: calc(var(--sp-tri-top) - var(--sp-ch) * .26); width: calc(var(--sp-cw) * 2.1); height: calc(var(--sp-ch) * 1.42); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-room[data-rank="3"] { left: calc(var(--sp-cx) - var(--sp-cw) * .62); top: calc(var(--sp-tri-bot) - var(--sp-wh) * 1.3); width: calc(var(--sp-cw) * .95); height: calc(var(--sp-wh) * 1.46); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-room[data-rank="2"] { left: calc(var(--sp-cx) + var(--sp-cw) * .67); top: calc(var(--sp-tri-bot) - var(--sp-wh) * 1.3); width: calc(var(--sp-cw) * .95); height: calc(var(--sp-wh) * 1.46); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-lit~="1"] .sp-room[data-rank="1"] { opacity: .56; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-lit~="2"] .sp-room[data-rank="2"] { opacity: .44; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-lit~="3"] .sp-room[data-rank="3"] { opacity: .44; }
/* the floor the object stands on: a pool of light under it, and the dark it stands out of */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-pool {
  position: absolute; left: var(--sp-ox); width: var(--sp-fw); top: calc(var(--sp-tri-bot) - var(--sp-ch) * .2); height: calc(var(--sp-ch) * .4);
  background:
    radial-gradient(ellipse 42% 16% at 50% 50%, rgba(243, 238, 230, .15), rgba(243, 238, 230, 0) 100%),
    radial-gradient(ellipse 58% 50% at 50% 50%, rgba(var(--sp-tint), .14), rgba(var(--sp-tint), .04) 46%, rgba(var(--sp-tint), 0) 100%);
  opacity: 0; transition: opacity 700ms var(--sp-ease);
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):is([data-sp-beat="2"], [data-sp-beat="3"], [data-sp-beat="4"], [data-sp-beat="5"], [data-sp-act="sealed"], [data-sp-act="turning"], [data-sp-act="three"]) .sp-pool { opacity: 1; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-pool-film {
  position: absolute; left: var(--sp-ox); width: var(--sp-fw); top: calc(var(--sp-tri-bot) - var(--sp-ch) * .24); height: calc(var(--sp-ch) * .48);
  background: radial-gradient(ellipse 54% 50% at 50% 50%, rgba(var(--sp-f1, var(--sp-tint)), .34), rgba(var(--sp-f1, var(--sp-tint)), .1) 50%, rgba(var(--sp-f1, var(--sp-tint)), 0) 100%);
  opacity: 0; transition: opacity 700ms var(--sp-ease);
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-lit~="1"] .sp-pool-film { opacity: 1; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-air { position: absolute; inset: 0; background: radial-gradient(ellipse 92% 46% at var(--sp-vx) calc(var(--sp-tri-top) + var(--sp-ch) * .52), rgba(243, 238, 230, .05), rgba(243, 238, 230, 0) 70%); opacity: 0; transition: opacity 900ms var(--sp-ease); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):is([data-sp-act="turning"], [data-sp-act="three"]) .sp-air { opacity: 1; }

/* ---- an arch of light (the wait). Three of them, as in TRIPTIC's own mark, standing as the triptych will stand:
        the centre arch facing you, a wing arch hinged to each side of it and standing back. ---- */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door {
  --pw: var(--sp-ww); --ph: var(--sp-wh);
  position: absolute; top: var(--sp-wy); width: var(--sp-ww); height: var(--sp-wh); perspective: var(--sp-persp);
  opacity: 1; transition: opacity 420ms var(--sp-ease);
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door[data-rank="3"] { left: calc(var(--sp-lhx) - var(--sp-ww)); perspective-origin: calc(var(--sp-vx) - var(--sp-lhx) + var(--sp-ww)) calc(var(--sp-vy) - var(--sp-wy)); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door[data-rank="2"] { left: var(--sp-rhx); perspective-origin: calc(var(--sp-vx) - var(--sp-rhx)) calc(var(--sp-vy) - var(--sp-wy)); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door[data-rank="1"] { --pw: var(--sp-cw); --ph: var(--sp-ch); left: var(--sp-cx); top: var(--sp-tri-top); width: var(--sp-cw); height: var(--sp-ch); perspective: none; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door-hinge { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 500ms cubic-bezier(.5, 0, .8, .5); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door[data-rank="3"] > .sp-door-hinge { transform-origin: 100% 50%; transform: rotateY(calc(-1 * var(--sp-ang))); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door[data-rank="2"] > .sp-door-hinge { transform-origin: 0 50%; transform: rotateY(var(--sp-ang)); }
/* the arch itself: it stands exactly where the arch drawn on the sealed panel will be */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-arc {
  --w: calc(var(--pw) * .82); --h: calc(var(--ph) * .87);
  position: absolute; left: 9%; top: 7%; width: var(--w); height: var(--h); border-radius: calc(var(--w) / 2) calc(var(--w) / 2) calc(var(--sp-r) * .5) calc(var(--sp-r) * .5);
}
/* the seam: the first thing seen of each arch, a hairline of light */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door-seam {
  position: absolute; left: 50%; top: 5%; bottom: 3%; width: 2px; margin-left: -1px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--sp-lamp) 16%, #fff 50%, var(--sp-lamp) 84%, transparent);
  box-shadow: 0 0 14px 2px rgba(104, 201, 255, .6), 0 0 38px 9px rgba(139, 92, 246, .4);
  opacity: 0; transform: scaleY(.04); transition: opacity 360ms var(--sp-ease), transform 640ms var(--sp-spring);
}
/* the arch: opens out of its seam */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door-leaf {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  /* the arch's own shape cuts its light, as a clip-path (a mask on the iPhone's layers, which reaches the drifting
     light inside): a rounded overflow alone is not always applied to composited children under a 3D hinge */
  clip-path: inset(0 round calc(var(--w) / 2) calc(var(--w) / 2) calc(var(--sp-r) * .5) calc(var(--sp-r) * .5));
  transform: scaleX(.02); opacity: 0; transition: transform 980ms var(--sp-spring), opacity 320ms linear;
  background: linear-gradient(180deg, #070912 0%, #0d1030 34%, #2a1d66 72%, #4a2f8e 100%);
}
/* light inside it: a warm pool at its foot and two fields that drift, behind folds like a lit curtain. Compositor only. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door-light { position: absolute; inset: -34%; opacity: 0; transition: opacity 1600ms var(--sp-ease); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door-light > b { position: absolute; inset: 0; border-radius: 50%; will-change: transform; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door-light > b:nth-child(1) { background: radial-gradient(closest-side, rgba(96, 196, 255, .9), rgba(104, 201, 255, .3) 40%, rgba(104, 201, 255, 0) 68%); animation: sp-drift-a 7.2s var(--sp-inout) infinite alternate; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door-light > b:nth-child(2) { background: radial-gradient(closest-side, rgba(168, 110, 255, .95), rgba(139, 92, 246, .34) 42%, rgba(139, 92, 246, 0) 70%); animation: sp-drift-b 9.4s var(--sp-inout) infinite alternate; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door-light > b:nth-child(3) { background: radial-gradient(closest-side, rgba(255, 246, 230, 1), rgba(255, 226, 190, .5) 36%, rgba(243, 200, 160, 0) 66%); animation: sp-drift-c 5.6s var(--sp-inout) infinite alternate; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door[data-rank="2"] .sp-door-light > b { animation-delay: -2.6s; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door[data-rank="1"] .sp-door-light > b { animation-delay: -4.9s; }
@keyframes sp-drift-a { from { transform: translate3d(-26%, -4%, 0) scale(.62); } to { transform: translate3d(22%, -30%, 0) scale(.8); } }
@keyframes sp-drift-b { from { transform: translate3d(24%, 4%, 0) scale(.78); } to { transform: translate3d(-22%, 20%, 0) scale(.6); } }
@keyframes sp-drift-c { from { transform: translate3d(-5%, 47%, 0) scale(.6); } to { transform: translate3d(5%, 42%, 0) scale(.74); } }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door-folds {
  position: absolute; inset: 0; border-radius: inherit; opacity: .55; mix-blend-mode: soft-light;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .5) 0, rgba(255, 255, 255, .34) 9%, rgba(0, 0, 0, .42) 18%, rgba(255, 255, 255, .2) 26%, rgba(0, 0, 0, .5) 34%);
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door-shade { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(5, 5, 7, .62) 0%, rgba(5, 5, 7, .1) 42%, rgba(5, 5, 7, 0) 100%); }
/* a wing's arch is lit from the centre: brightest at its hinge, falling away as it stands back */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door[data-rank="3"] .sp-door-shade { background: linear-gradient(180deg, rgba(5, 5, 7, .62) 0%, rgba(5, 5, 7, .1) 42%, rgba(5, 5, 7, 0) 100%), linear-gradient(270deg, rgba(5, 5, 7, 0) 10%, rgba(5, 5, 7, .42) 100%); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door[data-rank="2"] .sp-door-shade { background: linear-gradient(180deg, rgba(5, 5, 7, .62) 0%, rgba(5, 5, 7, .1) 42%, rgba(5, 5, 7, 0) 100%), linear-gradient(90deg, rgba(5, 5, 7, 0) 10%, rgba(5, 5, 7, .42) 100%); }
/* its edge */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door-rim {
  position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity 900ms var(--sp-ease) 300ms;
  box-shadow: inset 0 0 0 1px rgba(255, 250, 240, .5), inset 0 -1px 0 1px rgba(255, 246, 232, .34), inset 0 0 26px rgba(120, 190, 255, .26), 0 0 34px rgba(139, 92, 246, .34), 0 0 90px rgba(104, 201, 255, .12);
}
/* the light it throws forward across the floor: a pool beyond its own reflection */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door-beam {
  position: absolute; left: -30%; right: -30%; top: calc(100% + 8px); height: calc(var(--h) * .5); opacity: 0; transform: scaleY(.6); transform-origin: 50% 0; transition: opacity 1400ms var(--sp-ease) 200ms, transform 4200ms var(--sp-ease) 200ms;
  background:
    radial-gradient(ellipse 34% 62% at 50% 0%, rgba(255, 240, 220, .3), rgba(168, 110, 255, .16) 44%, rgba(104, 201, 255, 0) 100%),
    radial-gradient(ellipse 50% 100% at 50% 0%, rgba(139, 92, 246, .16), rgba(104, 201, 255, .05) 56%, rgba(104, 201, 255, 0) 80%);
}
/* the floor is dark glass: each arch stands on its own reflection, which lengthens as the light inside it deepens */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door-mirror {
  position: absolute; left: 0; right: 0; top: calc(100% + 7px); height: calc(var(--h) * var(--sp-mirror)); border-radius: calc(var(--sp-r) * .5) calc(var(--sp-r) * .5) 44% 44% / calc(var(--sp-r) * .5) calc(var(--sp-r) * .5) 26% 26%;
  background:
    repeating-linear-gradient(90deg, rgba(5, 5, 7, .34) 0, rgba(255, 255, 255, .05) 9%, rgba(5, 5, 7, .3) 18%, rgba(255, 255, 255, .03) 26%, rgba(5, 5, 7, .34) 34%),
    linear-gradient(180deg, rgba(255, 240, 222, .3) 0%, rgba(150, 104, 240, .4) 9%, rgba(74, 47, 142, .3) 40%, rgba(42, 29, 102, .12) 72%, rgba(13, 16, 48, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 46%, transparent 96%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 46%, transparent 96%);
  opacity: 0; transform: scaleY(.5); transform-origin: 50% 0; transition: opacity 1400ms var(--sp-ease) 240ms, transform 3200ms var(--sp-ease) 240ms;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):is([data-sp-beat="2"], [data-sp-beat="3"], [data-sp-beat="4"], [data-sp-beat="5"]) .sp-door-mirror { opacity: .5; transform: scaleY(.62); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-beat="3"] .sp-door-mirror { opacity: .72; transform: scaleY(.8); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-beat="4"] .sp-door-mirror { opacity: 1; transform: scaleY(1); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-beat="5"] .sp-door-mirror { opacity: .86; transform: scaleY(.92); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-motion="reduced"] .sp-door-mirror { transform: none; transition: opacity 900ms linear; }
/* the count: one, two, three. Each arch swells in turn (left, right, then the centre), over and over. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door-pulse {
  position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: linear-gradient(180deg, rgba(243, 238, 230, 0) 0%, rgba(243, 238, 230, .16) 50%, rgba(255, 246, 232, .62) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 250, 240, .95), inset 0 0 26px rgba(255, 246, 232, .35);
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door-halo {
  position: absolute; left: -46%; right: -46%; top: -16%; bottom: -46%; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(243, 238, 230, .22), rgba(139, 92, 246, .2) 46%, rgba(104, 201, 255, 0) 74%);
}
@keyframes sp-count { 0%, 100% { opacity: 0; } 8% { opacity: 1; } 36% { opacity: 0; } }
@keyframes sp-count-halo { 0%, 100% { opacity: 0; transform: scale(.92); } 9% { opacity: 1; transform: scale(1); } 42% { opacity: 0; transform: scale(1.05); } }
/* the beat that seals them when the films are found */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door-flash {
  position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: linear-gradient(180deg, #fff, var(--sp-lamp)); box-shadow: 0 0 46px 10px rgba(243, 238, 230, .5), 0 0 110px 30px rgba(104, 201, 255, .32);
}
@keyframes sp-seal-flash { 0% { opacity: 0; transform: scale(1); } 24% { opacity: .96; transform: scale(1.03); } 100% { opacity: 0; transform: scale(1); } }
@keyframes sp-seal-wing { 0% { opacity: 0; } 30% { opacity: .5; } 100% { opacity: 0; } }

/* beat 1: three seams. beat 2: the arches open. beat 3: light inside them, and the count begins. beat 4: it deepens. beat 5: it steadies. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):is([data-sp-beat="1"], [data-sp-beat="2"], [data-sp-beat="3"], [data-sp-beat="4"], [data-sp-beat="5"]) .sp-door-seam { opacity: 1; transform: scaleY(1); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door[data-rank="2"] .sp-door-seam { transition-delay: 150ms; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door[data-rank="1"] .sp-door-seam { transition-delay: 300ms; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):is([data-sp-beat="2"], [data-sp-beat="3"], [data-sp-beat="4"], [data-sp-beat="5"]) .sp-door-leaf { transform: scaleX(1); opacity: 1; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):is([data-sp-beat="2"], [data-sp-beat="3"], [data-sp-beat="4"], [data-sp-beat="5"]) .sp-door-seam { opacity: 0; transition: opacity 700ms linear 260ms; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):is([data-sp-beat="2"], [data-sp-beat="3"], [data-sp-beat="4"], [data-sp-beat="5"]) .sp-door-rim { opacity: 1; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door[data-rank="2"] .sp-door-leaf { transition-delay: 120ms; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door[data-rank="1"] .sp-door-leaf { transition-delay: 240ms; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):is([data-sp-beat="2"], [data-sp-beat="3"], [data-sp-beat="4"], [data-sp-beat="5"]) .sp-door-light { opacity: .34; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):is([data-sp-beat="3"]) .sp-door-light { opacity: .62; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-beat="4"] .sp-door-light { opacity: .92; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-beat="5"] .sp-door-light { opacity: .74; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):is([data-sp-beat="3"], [data-sp-beat="4"], [data-sp-beat="5"]) .sp-door-beam { opacity: .6; transform: scaleY(.78); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-beat="4"] .sp-door-beam { opacity: 1; transform: scaleY(1); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-beat="5"] .sp-door-beam { opacity: .82; transform: scaleY(.94); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-motion="reduced"] .sp-door-beam { transform: none; transition: opacity 900ms linear; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="wait"]:is([data-sp-beat="3"], [data-sp-beat="4"], [data-sp-beat="5"]) .sp-door-pulse { animation: sp-count 3.6s linear infinite; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="wait"]:is([data-sp-beat="3"], [data-sp-beat="4"], [data-sp-beat="5"]) .sp-door-halo { animation: sp-count-halo 3.6s linear infinite; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door[data-rank="2"] :is(.sp-door-pulse, .sp-door-halo) { animation-delay: .52s !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-door[data-rank="1"] :is(.sp-door-pulse, .sp-door-halo) { animation-delay: 1.04s !important; }
/* Found. The wings fold shut behind the centre, the centre arch seals, and the arches are gone: the closed triptych
   stands in their place. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):is([data-sp-act="sealed"], [data-sp-act="turning"], [data-sp-act="three"]) .sp-door[data-rank="3"] > .sp-door-hinge { transform: rotateY(-97deg); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):is([data-sp-act="sealed"], [data-sp-act="turning"], [data-sp-act="three"]) .sp-door[data-rank="2"] > .sp-door-hinge { transform: rotateY(97deg); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):is([data-sp-act="sealed"], [data-sp-act="turning"], [data-sp-act="three"]) .sp-door { opacity: 0; visibility: hidden; transition: opacity 280ms linear 120ms, visibility 0s linear 400ms; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):is([data-sp-act="sealed"], [data-sp-act="turning"], [data-sp-act="three"]) .sp-door-light > b { animation-play-state: paused; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-arrive .sp-door-flash { animation: sp-seal-flash 400ms var(--sp-ease) both; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-arrive .sp-door:not([data-rank="1"]) .sp-door-flash { animation: sp-seal-wing 300ms var(--sp-ease) both; box-shadow: none; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-arrive .sp-door[data-rank="1"] .sp-door-flash { animation-delay: 60ms; }
/* an answer that is not three films: the arches go dark, and for two films the third goes first */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-leave .sp-door { opacity: 0; transition: opacity 420ms var(--sp-ease); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-leave-two .sp-door { transition-delay: 160ms; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-leave-two .sp-door[data-rank="3"] { transition: opacity 220ms var(--sp-ease); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):is(.sp-leave, .sp-leave-two) :is(.sp-door-pulse, .sp-door-halo) { animation: none; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-leave > :is(.sp-words, .sp-status) { opacity: 0 !important; transition: opacity 360ms var(--sp-ease) 120ms !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-leave .sp-pool { opacity: 0; }
/* and the house stays dark until the page that says so is there (the request page is not shown on the way) */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-leave:is(.is-returning, .critical-leaving) { opacity: 1; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-leave > .critical-header { opacity: 0 !important; transition: opacity 240ms linear !important; }
/* (3 November 2026) two films the page will show (showpiece.js leave, .sp-carry): the third arch dims slowly and goes,
   the other two keep their light until the two-film page takes it (.sp-handed: they go out in the frame its own light
   is drawn, and the dark fades off the page). Without the light to carry (.sp-cross: Reduce Motion, or arches never
   lit) the dark simply crossfades to the page. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-leave.sp-carry .sp-door:not([data-rank="3"]) { opacity: 1; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-leave.sp-carry .sp-door[data-rank="3"] { opacity: 0; transition: opacity 380ms var(--sp-ease); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-leave.sp-handed .sp-door { opacity: 0 !important; transition: none !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-leave:is(.sp-handed, .sp-cross) { opacity: 0 !important; pointer-events: none; transition: opacity 320ms var(--sp-ease) !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-leave.sp-cross[data-sp-motion="reduced"] { transition: opacity 240ms linear !important; }

/* the breath of light when all three stand */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-bloom {
  position: absolute; left: var(--sp-vx); top: calc(var(--sp-tri-top) + var(--sp-ch) * .5); width: calc(var(--sp-fw) * 1.6); height: calc(var(--sp-ch) * 1.9); margin: calc(var(--sp-ch) * -.95) 0 0 calc(var(--sp-fw) * -.8);
  background:
    radial-gradient(ellipse 34% 40% at 24% 62%, rgba(var(--sp-f3, var(--sp-tint)), .3), rgba(var(--sp-f3, var(--sp-tint)), 0) 100%),
    radial-gradient(ellipse 34% 40% at 76% 62%, rgba(var(--sp-f2, var(--sp-tint)), .3), rgba(var(--sp-f2, var(--sp-tint)), 0) 100%),
    radial-gradient(closest-side, rgba(243, 238, 230, .3), rgba(var(--sp-f1, var(--sp-tint)), .24) 42%, rgba(var(--sp-f1, var(--sp-tint)), 0) 72%);
  opacity: 0; transform: scale(.6);
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-bloom-on .sp-bloom { animation: sp-bloom 1400ms var(--sp-ease) both; }
@keyframes sp-bloom { 0% { opacity: 0; transform: scale(.55); } 26% { opacity: 1; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.2); } }

/* ===== under the arches: one true line, and the person's own words, for as long as the wait lasts ===== */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-status {
  position: absolute; z-index: 4; left: calc(var(--sp-ox) + 24px); width: calc(var(--sp-fw) - 48px); top: var(--sp-status-top); text-align: center; pointer-events: none;
  opacity: 0; transition: opacity 160ms linear;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-status > b { display: block; font: 600 var(--fs-footnote, 13px)/calc(20 * var(--sp-u)) var(--font-ui, system-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--c-label-2, rgba(245, 244, 247, .68)); }
/* (the second line, when a search runs long, rests under the person's words: "Your words are safe.") */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-status > span { position: absolute; left: 0; right: 0; top: calc(var(--sp-dock-top) - var(--sp-status-top) + 6px); display: block; font: 400 var(--fs-subhead, 15px)/var(--lh-subhead, 20px) var(--font-ui, system-ui); color: var(--c-label-2, rgba(245, 244, 247, .68)); text-wrap: balance; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-status > span:empty { display: none; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-status.is-on { opacity: 1; transition: opacity 420ms var(--sp-ease); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-status[data-kind="ready"] > b { font: 600 var(--fs-headline, 17px)/calc(22 * var(--sp-u)) var(--font-ui, system-ui); letter-spacing: var(--tr-headline, -.025em); text-transform: none; color: var(--c-label-1, #f5f4f7); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-status[data-kind="ready"] { top: calc(var(--sp-cap-top) + 10px); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-words {
  position: absolute; z-index: 4; left: calc(var(--sp-ox) + 24px); width: calc(var(--sp-fw) - 48px); top: calc(var(--sp-cap-top) + 24 * var(--sp-u)); height: calc(var(--sp-dock-top) - var(--sp-cap-top) - 24 * var(--sp-u));
  display: flex; align-items: flex-start; justify-content: center; pointer-events: none;
  opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 520ms var(--sp-ease) 120ms, transform 760ms var(--sp-spring) 120ms;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-words > p {
  margin: 0; max-width: 30ch; text-align: center; text-wrap: balance; color: var(--c-label-1, #f5f4f7);
  font: 600 var(--fs-title-2, 22px)/var(--lh-title-2, 28px) var(--font-ui, system-ui); letter-spacing: var(--tr-title-2, -.012em);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-words[data-length="long"] > p { font: 600 var(--fs-headline, 17px)/var(--lh-headline, 22px) var(--font-ui, system-ui); max-width: 34ch; -webkit-line-clamp: 4; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-words[data-length="longest"] > p { font: 500 var(--fs-subhead, 15px)/var(--lh-subhead, 20px) var(--font-ui, system-ui); max-width: 38ch; -webkit-line-clamp: 5; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="wait"].is-live > .sp-words { opacity: 1; transform: none; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):not([data-sp-act="wait"]) > .sp-words { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 260ms var(--sp-ease), transform 420ms var(--sp-ease); }

/* ===== the app's own nodes, laid out again ===== */
/* top row: Back, the title once the three stand, sound */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-header {
  all: unset !important; position: absolute !important; z-index: 24 !important; left: 16px !important; right: 16px !important; top: var(--sp-top) !important; height: 44px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important; pointer-events: none !important;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-header > * { pointer-events: auto !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-header > .critical-header-slot { width: 44px !important; height: 44px !important; display: grid !important; place-items: center !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-header :is(.back-chevron, .critical-sound-toggle) {
  width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 50% !important; margin: 0 !important; padding: 0 !important; display: grid !important; place-items: center !important;
  background: var(--c-fill-1, rgba(255, 255, 255, .05)) !important; border: 1px solid var(--c-line, rgba(255, 255, 255, .09)) !important; box-shadow: none !important; color: var(--c-label-1, #f5f4f7) !important;
  position: relative !important; inset: auto !important; transform: none; opacity: 1 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-header .back-chevron > i { display: none !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-header .critical-back-icon { width: 20px !important; height: 20px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; transform: none !important; position: static !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results-heading {
  all: unset !important; position: absolute !important; z-index: 23 !important; left: 68px !important; right: 68px !important; top: var(--sp-top) !important; height: 44px !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; pointer-events: none !important;
  opacity: 0 !important; transform: translate3d(0, 6px, 0) !important; transition: opacity 420ms var(--sp-ease), transform 560ms var(--sp-spring) !important;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results-heading > h1 {
  all: unset !important; display: block !important; font: 600 var(--fs-headline, 17px)/var(--lh-headline, 22px) var(--font-ui, system-ui) !important; letter-spacing: var(--tr-headline, -.025em) !important; color: var(--c-label-1, #f5f4f7) !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="three"] > .critical-results-heading { opacity: 1 !important; transform: none !important; transition-delay: 320ms !important; }

/* the request, present but quiet: two lines under the top row. One touch opens how it was read. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-request-capsule {
  all: unset !important; position: absolute !important; z-index: 18 !important; left: 28px !important; right: 28px !important; top: calc(var(--sp-top) + 44px + 4px) !important;
  height: var(--sp-req-h) !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; gap: 2px !important;
  text-align: center !important; box-sizing: border-box !important; padding: 0 22px !important; overflow: hidden !important;
  opacity: 0 !important; transform: translate3d(0, 6px, 0) !important; transition: opacity 420ms var(--sp-ease), transform 560ms var(--sp-spring) !important; pointer-events: none !important;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).has-oms-journey { --sp-req-h: calc(60 * var(--sp-u)); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-mode="friday"] { --sp-req-h: calc(58 * var(--sp-u)); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-size="short"] { --sp-req-lines: 1; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-size="short"].has-oms-journey { --sp-req-h: calc(40 * var(--sp-u)); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-size="short"][data-mode="friday"] { --sp-req-h: calc(38 * var(--sp-u)); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):is([data-sp-act="sealed"], [data-sp-act="turning"], [data-sp-act="three"]) > .critical-request-capsule { opacity: 1 !important; transform: none !important; transition-delay: 200ms !important; pointer-events: auto !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-request-capsule > span:first-child { display: none !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-request-capsule[data-why] { justify-content: flex-start !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-request-capsule[data-why] > span:first-child { all: unset !important; display: block !important; flex: none !important; font: 600 var(--fs-caption-2, 11px)/calc(14 * var(--sp-u)) var(--font-ui, system-ui) !important; letter-spacing: .06em !important; color: var(--c-label-3, rgba(245, 244, 247, .56)) !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-request-capsule > p {
  all: unset !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: var(--sp-req-lines, 2) !important; overflow: hidden !important; flex: none !important;
  font: 400 var(--fs-subhead, 15px)/var(--lh-subhead, 20px) var(--font-ui, system-ui) !important; letter-spacing: var(--tr-subhead, -.015em) !important; color: var(--c-label-2, rgba(245, 244, 247, .68)) !important;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-request-capsule > .oms-journey {
  all: unset !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; flex: none !important;
  font: 500 var(--fs-caption-1, 12px)/var(--lh-caption-1, 16px) var(--font-ui, system-ui) !important; color: var(--c-label-3, rgba(245, 244, 247, .56)) !important;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-request-capsule > .oms-journey b { font-weight: 500 !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-request-capsule > .ds-req-toggle {
  all: unset !important; position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; cursor: pointer !important;
  color: var(--c-label-3, rgba(245, 244, 247, .56)) !important; -webkit-tap-highlight-color: transparent !important; border-radius: 14px !important; min-height: 44px !important;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-request-capsule > .ds-req-toggle[hidden] { display: none !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-request-capsule > .ds-req-toggle > svg { width: 18px !important; height: 18px !important; transition: transform 240ms var(--sp-ease) !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).ds-req-open > .critical-request-capsule > .ds-req-toggle > svg { transform: rotate(180deg) !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-request-capsule > .ds-req-toggle:focus-visible { outline: 2px solid var(--sp-beam) !important; outline-offset: -2px !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):not([data-sp-act="three"]) > .critical-request-capsule > .ds-req-toggle { display: none !important; }
/* Open, the request and what was read from it are one card: the card starts at the request's own top and edges, and
   the request stays where it stood, on the card. For a Friday three the week's line is said once: the short copy in
   the request steps aside and the card sets the whole line where it stood, with each film's own line beneath. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).ds-req-open > .critical-request-capsule { z-index: 41 !important; height: max(var(--sp-req-h), var(--sp-req-open-h, 0px)) !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).ds-req-open > .critical-request-capsule:not([data-why]) > p { -webkit-line-clamp: 14 !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).ds-req-open > .critical-request-capsule > .ds-req-toggle { align-items: flex-start !important; padding-top: calc((var(--sp-req-h) - 18px) / 2) !important; box-sizing: border-box !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).ds-req-open > .critical-understood.ds-request-details {
  display: block !important; position: absolute !important; z-index: 40 !important; left: 28px !important; right: 28px !important; top: calc(var(--sp-top) + 44px + 4px) !important; width: auto !important; max-width: none !important; margin: 0 !important;
  max-height: calc(var(--sp-vh, 844px) - var(--sp-top) - 48px - var(--sp-bot) - 110px) !important; overflow: auto !important; box-sizing: border-box !important; padding: calc(max(var(--sp-req-h), var(--sp-req-open-h, 0px)) + 6px) 22px 16px !important;
  background: var(--mat-chrome-solid, #16161d) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: 0 0 0 1px var(--c-line-strong, rgba(255, 255, 255, .16)), 0 24px 60px rgba(0, 0, 0, .62) !important; border-radius: var(--r-card, 20px) !important;
  text-align: left !important; animation: sp-card-in 260ms var(--sp-ease) both !important; transform-origin: 50% 0 !important;
}
@keyframes sp-card-in { from { opacity: 0; transform: translate3d(0, -6px, 0) scale(.985); } to { opacity: 1; transform: none; } }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).ds-req-open > .critical-request-capsule[data-why] > p { visibility: hidden !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).ds-req-open > .critical-request-capsule[data-why] + .critical-understood.ds-request-details { padding-top: calc(16 * var(--sp-u)) !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-understood.ds-request-details .friday-why-reading .friday-why-week {
  margin: 0 0 12px !important; padding: 0 !important; text-align: center !important; font: 400 var(--fs-subhead, 15px)/var(--lh-subhead, 20px) var(--font-ui, system-ui) !important; letter-spacing: var(--tr-subhead, -.015em) !important; color: var(--c-label-1, #f5f4f7) !important;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-understood.ds-request-details .request-reading-body { padding-top: 0 !important; margin-top: 0 !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-motion="reduced"].ds-req-open > .critical-understood.ds-request-details { animation: none !important; }

/* ===== the triptych: the app's own three buttons, and the panel each one carries =====
   A card is a flat button where its panel is seen: the centre panel's own rectangle, and for a wing the strip beside
   it that the wing stands in. The whole object can step a little to one side (--sp-turn) when a wing is chosen. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-card-stage {
  all: unset !important; position: absolute !important; inset: 0 !important; z-index: 10 !important; display: block !important; pointer-events: none !important;
  transform: translate3d(var(--sp-turn), 0, 0) !important; transition: transform 620ms var(--sp-spring) !important;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card {
  all: unset !important; position: absolute !important; display: block !important; box-sizing: border-box !important; top: var(--sp-wy) !important; width: var(--sp-hit) !important; height: var(--sp-wh) !important;
  border-radius: var(--sp-r) !important; pointer-events: auto !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; touch-action: manipulation !important;
  opacity: 0 !important; visibility: hidden !important; transition: opacity 300ms linear, visibility 0s linear 300ms !important; z-index: 2 !important;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card.rank-3 { left: calc(var(--sp-lhx) - var(--sp-hit)) !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card.rank-2 { left: var(--sp-rhx) !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card.rank-1 { left: var(--sp-cx) !important; top: var(--sp-tri-top) !important; width: var(--sp-cw) !important; height: var(--sp-ch) !important; z-index: 3 !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):is([data-sp-act="sealed"], [data-sp-act="turning"], [data-sp-act="three"]) .critical-card { opacity: 1 !important; visibility: visible !important; transition: opacity 260ms linear 120ms, visibility 0s !important; }
/* While the arches stand, the panels are not drawn at all (LOOK, 9 October evening). They used to be drawn a hundredth
   part there, "ready": a hundredth of three dark panels with their hairlines and shadows is a square box over each
   halo, and on an iPhone an ancestor's opacity does not always reach a child that is backface-hidden, so the box
   could be drawn whole. Hidden (visibility, which every child inherits) is hidden on every engine. */
/* Until the three stand, the triptych is one thing: a touch anywhere on the page is the page's own (the app opens
   the triptych, or finishes opening it), so no single panel takes it. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):is([data-sp-act="sealed"], [data-sp-act="turning"]) .critical-card { pointer-events: none !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card:disabled { cursor: default !important; }
/* the app's own poster face stays in the page, unseen, where the panel is seen: the film page's opening flight
   measures it and takes its picture from it */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card :is(.triptych-plane, .critical-card-inner) { all: unset !important; position: absolute !important; inset: 0 !important; display: block !important; visibility: hidden !important; pointer-events: none !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card .critical-card-front {
  all: unset !important; position: absolute !important; inset: 0 !important; display: block !important; border-radius: var(--sp-r) !important; visibility: hidden !important; pointer-events: none !important;
  background-image: var(--critical-poster, none) !important; background-size: cover !important; background-position: 50% 50% !important;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card.rank-3 .critical-card-front { left: auto !important; width: calc(var(--sp-ww) * .56) !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card.rank-2 .critical-card-front { right: auto !important; width: calc(var(--sp-ww) * .56) !important; }

/* ---- a panel: what is seen of a card. Made by this layer. The panel is the card's own box and holds the eye's
        distance; the wing inside it is its true size (wider than the strip it is seen in) and turns on the edge it
        shares with the centre. ---- */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-panel { position: absolute; inset: 0; display: block; pointer-events: none; perspective: var(--sp-persp); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .rank-1 > .sp-panel { perspective: none; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .rank-3 > .sp-panel { perspective-origin: calc(var(--sp-vx) - var(--sp-lhx) + var(--sp-hit)) calc(var(--sp-vy) - var(--sp-wy)); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .rank-2 > .sp-panel { perspective-origin: calc(var(--sp-vx) - var(--sp-rhx)) calc(var(--sp-vy) - var(--sp-wy)); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-hinge { position: absolute; top: 0; width: var(--sp-ww); height: var(--sp-wh); display: block; border-radius: var(--sp-r); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 520ms var(--sp-swing); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .rank-1 .sp-hinge { left: 0; width: var(--sp-cw); height: var(--sp-ch); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .rank-3 .sp-hinge { right: 0; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .rank-2 .sp-hinge { left: 0; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-leaf { position: absolute; inset: 0; display: block; border-radius: inherit; transition: transform 420ms var(--sp-spring), opacity 120ms linear; }
/* a wing, sealed: folded shut behind the centre panel, out of sight */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .rank-3 .sp-hinge { transform-origin: 100% 50%; transform: rotateY(-97deg); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .rank-2 .sp-hinge { transform-origin: 0 50%; transform: rotateY(97deg); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card:not(.rank-1) .sp-leaf { opacity: 0; }
/* it swings out with its film, and stands a little short of where it will rest */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card.rank-3:is(.is-opening, .is-revealed) .sp-hinge { transform: rotateY(calc(-1 * (var(--sp-ang) + 7deg))); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card.rank-2:is(.is-opening, .is-revealed) .sp-hinge { transform: rotateY(calc(var(--sp-ang) + 7deg)); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card:not(.rank-1):is(.is-opening, .is-revealed) .sp-leaf { opacity: 1; }
/* all three stand: the last movement eases the wings open to where they rest */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="three"] .critical-card.rank-3 .sp-hinge { transform: rotateY(calc(-1 * var(--sp-ang))); transition: transform 760ms var(--sp-spring); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="three"] .critical-card.rank-2 .sp-hinge { transform: rotateY(var(--sp-ang)); transition: transform 760ms var(--sp-spring); }
/* a wing is chosen: the object turns a little towards you. That wing swings forward, the other stands further back,
   and the whole steps aside so that all three are still wholly on the page. Nothing is laid out again. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="three"][data-sp-selected="3"] { --sp-turn: calc(var(--sp-cw) * .07); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="three"][data-sp-selected="2"] { --sp-turn: calc(var(--sp-cw) * -.07); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="three"][data-sp-selected="3"] .critical-card.rank-3 .sp-hinge { transform: rotateY(calc(-1 * (var(--sp-ang) - 7deg))); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="three"][data-sp-selected="3"] .critical-card.rank-2 .sp-hinge { transform: rotateY(calc(var(--sp-ang) + 8deg)); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="three"][data-sp-selected="2"] .critical-card.rank-2 .sp-hinge { transform: rotateY(calc(var(--sp-ang) - 7deg)); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="three"][data-sp-selected="2"] .critical-card.rank-3 .sp-hinge { transform: rotateY(calc(-1 * (var(--sp-ang) + 8deg))); }

/* ---- what a panel is made of ---- */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-face { position: absolute; inset: 0; display: block; border-radius: inherit; overflow: hidden; clip-path: inset(0 round var(--sp-r)); }
/* its thickness, and the dark it throws behind it */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-depth { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .9), 0 22px 50px -16px rgba(0, 0, 0, .85); }
/* (no dark drawn all round the centre panel: around a rectangle it is a box of shade; the shadow falls below it) */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .rank-1 .sp-depth { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .9), 0 26px 60px -14px rgba(0, 0, 0, .9), 0 40px 44px -30px rgba(0, 0, 0, .6); }
/* Sealed, before its film comes: only the arch and its light. The panel's rectangle (its face, hairlines, shade and
   shadow) arrives with the poster, so no box stands round the halo while the three load (owner, 9 October). */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card:not(.is-opening):not(.is-flipping):not(.is-revealed) .sp-back { background: transparent; box-shadow: none; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card:not(.is-opening):not(.is-flipping):not(.is-revealed) :is(.sp-edge, .sp-shade, .sp-depth, .sp-contact) { opacity: 0; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) :is(.sp-depth, .sp-shade, .sp-contact) { transition: opacity 320ms var(--sp-ease); }
/* sealed: a dark panel with the arch drawn on it, closed, and light at its foot */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-back {
  background: linear-gradient(180deg, #171822, #0b0b11 58%, #0f0e18);
  box-shadow: inset 0 0 0 1px rgba(245, 244, 247, .14), inset 0 1px 0 rgba(255, 255, 255, .24);
  transition: opacity 360ms linear;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-arch {
  position: absolute; left: 9%; right: 9%; top: 7%; bottom: 6%; border-radius: 50% 50% 3px 3px / 31.4% 31.4% 2px 2px; overflow: hidden;
  background: linear-gradient(180deg, #0a0b16 0%, #17163c 42%, #33237a 100%);
  box-shadow: inset 0 0 0 1px rgba(245, 244, 247, .26), 0 0 0 1px rgba(0, 0, 0, .6);
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-arch::before { content: ""; position: absolute; left: -30%; right: -30%; bottom: -34%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 240, 220, .6), rgba(168, 110, 255, .4) 44%, rgba(139, 92, 246, 0) 72%); opacity: .8; }
/* the seam where it will open: a hairline of light */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-arch::after { content: ""; position: absolute; left: 50%; top: 12%; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(255, 250, 240, 0), rgba(255, 250, 240, .6) 30%, rgba(255, 250, 240, .95)); opacity: .5; }
/* it is ready: the arch brightens. Waiting for a touch (a Friday three), it breathes. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-ready {
  position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity 500ms var(--sp-ease);
}
/* its light is the arch's shape, never the panel's rectangle, and it fades out well inside the panel (the face clips
   whatever reaches its edge, and a glow cut there is a straight line) */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-ready::before {
  content: ""; position: absolute; left: 9%; right: 9%; top: 7%; bottom: 6%; border-radius: 50% 50% 3px 3px / 31.4% 31.4% 2px 2px;
  background: linear-gradient(180deg, rgba(104, 201, 255, .1) 0%, rgba(168, 110, 255, .32) 50%, rgba(255, 244, 226, .8) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 250, 240, .9), inset 0 0 18px rgba(255, 246, 232, .3), 0 0 18px rgba(255, 246, 232, .26), 0 0 14px 2px rgba(139, 92, 246, .28);
}
/* (REVEAL, 14 October 2026) as the strongest film comes, its arch lights in the film's own colour (its poster palette,
   showpiece.js paintColour), over the house-coloured one: a film with no palette lights it in the house colour as before */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-ready::after {
  content: ""; position: absolute; left: 9%; right: 9%; top: 7%; bottom: 6%; border-radius: 50% 50% 3px 3px / 31.4% 31.4% 2px 2px;
  background: linear-gradient(180deg, rgba(var(--sp-film, var(--sp-tint)), .12) 0%, rgba(var(--sp-film, var(--sp-tint)), .5) 50%, rgba(var(--sp-film-hi, 255, 244, 226), .9) 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--sp-film-hi, 255, 250, 240), .9), 0 0 20px rgba(var(--sp-film, var(--sp-tint)), .4);
  opacity: 0; transition: opacity 260ms var(--sp-ease);
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="turning"] .rank-1.is-opening .sp-ready::after { opacity: 1; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="sealed"] .rank-1 .sp-ready { opacity: .7; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="sealed"][data-sp-await="touch"] .rank-1 .sp-ready { animation: sp-ready 1.9s var(--sp-inout) infinite alternate; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="turning"] .rank-1:not(.is-revealed) .sp-ready { opacity: .5; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="turning"] .rank-1.is-opening .sp-ready { opacity: 1; transition-duration: 260ms; }
@keyframes sp-ready { from { opacity: .4; } to { opacity: 1; } }
/* the poster */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-front { background: #14141c; opacity: 0; transition: opacity 400ms linear 150ms; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card:is(.is-flipping, .is-revealed) .sp-front { opacity: 1; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card.is-revealed:not(.is-opening) .sp-front { transition: opacity 240ms linear; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-front > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 240ms linear; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-front > img.is-in { opacity: 1; }
/* no artwork: the film's name on the panel, plainly */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-noart { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 10px; box-sizing: border-box; background: linear-gradient(160deg, #23263a, #14141c 70%); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-noart > span { font: 600 var(--fs-footnote, 13px)/var(--lh-footnote, 18px) var(--font-ui, system-ui); color: var(--c-label-1, #f5f4f7); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; overflow-wrap: anywhere; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-front[data-art="loaded"] > .sp-noart { display: none; }
/* light across the face as a wing comes round */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-sheen {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 60%; opacity: 0; transform: translate3d(-140%, 0, 0) skewX(-14deg);
  background: linear-gradient(90deg, rgba(var(--sp-film-hi, 255, 255, 255), 0), rgba(var(--sp-film-hi, 255, 255, 255), .42) 46%, rgba(var(--sp-film-hi, 255, 255, 255), .8) 52%, rgba(var(--sp-film-hi, 255, 255, 255), 0));
  mix-blend-mode: screen; pointer-events: none;
}
/* Lit from the centre. A wing is in shadow where it meets the centre panel, brightest just beyond, and falls away as
   it stands back; the centre panel is lit from above. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-shade { position: absolute; inset: 0; border-radius: inherit; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .rank-3 .sp-shade { background: linear-gradient(270deg, rgba(5, 5, 7, .46) 0, rgba(255, 250, 240, .08) 5%, rgba(255, 250, 240, .03) 20%, rgba(5, 5, 7, .2) 100%); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .rank-2 .sp-shade { background: linear-gradient(90deg, rgba(5, 5, 7, .46) 0, rgba(255, 250, 240, .08) 5%, rgba(255, 250, 240, .03) 20%, rgba(5, 5, 7, .2) 100%); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .rank-1 .sp-shade { background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0, rgba(255, 255, 255, 0) 18%, rgba(5, 5, 7, 0) 70%, rgba(5, 5, 7, .2) 100%); }
/* the two not chosen rest a shade darker; while the last film arrives the two already seen step back */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-dim { position: absolute; inset: 0; border-radius: inherit; background: #050507; opacity: 0; transition: opacity 420ms var(--sp-ease); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="three"] .critical-card:not(.is-selected) .sp-dim { opacity: .1; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).critical-final-reveal[data-sp-act="turning"] .critical-card:not(.rank-1) .sp-dim { opacity: .34; }
/* the edge of a panel: a hairline that catches the light, brightest on a wing where it turns towards the centre */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-edge { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), inset 0 1px 0 0 rgba(255, 255, 255, .36); transition: opacity 320ms var(--sp-ease); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .rank-3 .sp-edge { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset -1.5px 0 0 0 rgba(var(--sp-film-hi, 255, 250, 240), .5); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .rank-2 .sp-edge { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 1.5px 0 0 0 rgba(var(--sp-film-hi, 255, 250, 240), .5); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-lit { position: absolute; inset: 0; border-radius: inherit; opacity: 0; box-shadow: inset 0 0 0 1px rgba(var(--sp-film-hi, 255, 250, 240), .6), inset 0 1px 0 0 rgba(255, 255, 255, .5); transition: opacity 320ms var(--sp-ease); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="three"] .critical-card.is-selected .sp-lit { opacity: 1; }
/* what it stands on: its own reflection in the floor (a small soft copy of the poster, upside down, fading out), and
   the line of dark where it touches */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-mirror {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); height: 26%; border-radius: calc(var(--sp-r) * .6) calc(var(--sp-r) * .6) 0 0; overflow: hidden; opacity: 0; transition: opacity 700ms var(--sp-ease);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .3) 40%, transparent 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .3) 40%, transparent 100%);
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-mirror > canvas { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% / .26); display: block; transform: scaleY(-1); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card.is-revealed .sp-mirror { opacity: .38; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card.rank-1.is-revealed .sp-mirror { opacity: .44; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-contact { position: absolute; left: 3%; right: 3%; top: calc(100% - 3px); height: 9px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0)); }
/* the strongest match arrives last, in the centre: light gathers in the arch, the film comes up through it, and the
   panel settles with weight */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-flash { position: absolute; left: 9%; right: 9%; top: 7%; bottom: 6%; border-radius: 50% 50% 3px 3px / 31.4% 31.4% 2px 2px; opacity: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(var(--sp-film-hi, 255, 250, 240), .9)); box-shadow: 0 0 50px 14px rgba(var(--sp-film-hi, 243, 238, 230), .34), 0 0 130px 40px rgba(var(--sp-film, var(--sp-tint)), .34); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card.rank-1.is-opening .sp-flash { animation: sp-come-light 680ms var(--sp-ease) both; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card.rank-1.is-opening .sp-leaf { animation: sp-come 680ms var(--sp-ease) both; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card:not(.rank-1).is-opening .sp-sheen { animation: sp-sheen 400ms linear both; }
@keyframes sp-come-light { 0% { opacity: 0; } 24% { opacity: .9; } 46% { opacity: .5; } 100% { opacity: 0; } }
@keyframes sp-come {
  0% { transform: scale(1); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  30% { transform: scale(1.035); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  72% { transform: scale(.992); animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
  100% { transform: scale(1); }
}
@keyframes sp-sheen {
  0%, 34% { opacity: 0; transform: translate3d(-140%, 0, 0) skewX(-14deg); }
  46% { opacity: 1; }
  78% { opacity: .8; }
  96%, 100% { opacity: 0; transform: translate3d(260%, 0, 0) skewX(-14deg); }
}
/* the centre's lean (showpiece.js, TILT): while a finger is held on it, one transform that follows the finger closely; on release the
   leaf's own transition takes it home with a little overshoot */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-leaf.sp-tilting { transition: transform 90ms linear; will-change: transform; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-leaf.sp-tilt-back { transition: transform 600ms var(--sp-snap); }
/* pressed, and the keyboard's own ring */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="three"] .critical-card:active .sp-leaf { transform: scale(.985); transition-duration: 120ms; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-ring { position: absolute; inset: 0; border-radius: inherit; opacity: 0; box-shadow: 0 0 0 2px var(--sp-beam), 0 0 0 5px rgba(104, 201, 255, .3); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .critical-card:focus-visible .sp-ring { opacity: 1; }
/* (a wing still folded away has nowhere to show a ring: the closed triptych shows it) */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-card-stage:has(.critical-card:not(.rank-1):not(.is-revealed):focus-visible) .rank-1 .sp-ring { opacity: 1; }

/* ===== the words: the chosen film's name, its facts, and why this film ===== */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-caption {
  position: absolute; z-index: 13; left: calc(var(--sp-ox) + 20px); width: calc(var(--sp-fw) - 40px); top: var(--sp-cap-top); height: var(--sp-cap-h); overflow: hidden; text-align: center; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  opacity: 0; visibility: hidden; transform: translate3d(0, 10px, 0); transition: opacity 150ms linear, transform 0s linear 150ms, visibility 0s linear 150ms;
}
/* (one film's words leave, then the next film's arrive: they are changed while nothing of them is drawn, so no word is ever seen to jump) */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-caption.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 240ms var(--sp-ease), transform 460ms var(--sp-spring), visibility 0s; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-caption.is-changing { visibility: hidden !important; transition: none !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-caption > .sp-title {
  margin: 0; max-width: 100%; flex: none; color: #fff; text-wrap: balance; overflow-wrap: anywhere;
  font: 700 var(--fs-title-1, 28px)/var(--lh-title-1, 34px) var(--font-ui, system-ui); letter-spacing: var(--tr-title-1, .013em);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-caption[data-title="short"] > .sp-title { font: 700 var(--fs-large-title, 34px)/calc(40 * var(--sp-u)) var(--font-ui, system-ui); letter-spacing: var(--tr-large-title, .011em); -webkit-line-clamp: 1; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-caption[data-title="long"] > .sp-title { font: 700 var(--fs-title-2, 22px)/var(--lh-title-2, 28px) var(--font-ui, system-ui); letter-spacing: var(--tr-title-2, -.012em); -webkit-line-clamp: 3; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-caption[data-title="long"] > .sp-why { -webkit-line-clamp: var(--sp-why-lines, 2); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-caption > .sp-meta { margin: calc(4 * var(--sp-u)) 0 0; max-width: 100%; flex: none; font: 400 var(--fs-footnote, 13px)/var(--lh-footnote, 18px) var(--font-ui, system-ui); letter-spacing: .01em; color: var(--c-label-3, rgba(245, 244, 247, .56)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-caption > .sp-why { margin: calc(8 * var(--sp-u)) auto 0; max-width: 34ch; flex: none; font: 400 var(--fs-subhead, 15px)/var(--lh-subhead, 20px) var(--font-ui, system-ui); letter-spacing: var(--tr-subhead, -.015em); color: var(--c-label-1, #f5f4f7); opacity: .86; text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--sp-why-lines, 3); overflow: hidden; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-size="tall"] > .sp-caption > .sp-title { font: 700 var(--fs-large-title, 34px)/calc(40 * var(--sp-u)) var(--font-ui, system-ui); letter-spacing: var(--tr-large-title, .011em); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-size="tall"] > .sp-caption[data-title="long"] > .sp-title { font: 700 var(--fs-title-1, 28px)/var(--lh-title-1, 34px) var(--font-ui, system-ui); letter-spacing: var(--tr-title-1, .013em); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-size="tall"] > .sp-caption > .sp-why { font: 400 var(--fs-body, 17px)/var(--lh-body, 22px) var(--font-ui, system-ui); letter-spacing: var(--tr-body, -.02em); max-width: 32ch; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-size="short"] > .sp-caption > .sp-title { font: 700 var(--fs-title-2, 22px)/var(--lh-title-2, 28px) var(--font-ui, system-ui); letter-spacing: var(--tr-title-2, -.012em); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-size="short"] > .sp-caption[data-title="short"] > .sp-title { font: 700 var(--fs-title-1, 28px)/var(--lh-title-1, 34px) var(--font-ui, system-ui); letter-spacing: var(--tr-title-1, .013em); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-size="short"] > .sp-caption[data-title="long"] > .sp-title { font: 700 var(--fs-title-3, 20px)/var(--lh-title-3, 25px) var(--font-ui, system-ui); letter-spacing: var(--tr-title-3, -.023em); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-size="short"] > .sp-caption > .sp-why { margin-top: calc(6 * var(--sp-u)); -webkit-line-clamp: var(--sp-why-lines, 2); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-size="short"] > .sp-caption[data-title="long"] > .sp-why { -webkit-line-clamp: var(--sp-why-lines, 1); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-caption > :is(.sp-title, .sp-meta, .sp-why, .sp-where):empty { display: none; }
/* (P-JOURNEY) where an "On my services" film is, and when that was checked: one quiet line under the note */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-caption > .sp-where {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: calc(8 * var(--sp-u)) auto 0; max-width: 100%; flex: none;
  font: 500 var(--fs-footnote, 13px)/var(--lh-footnote, 18px) var(--font-ui, system-ui); letter-spacing: .01em; color: var(--c-label-2, rgba(245, 244, 247, .72));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-caption > .sp-where > span { overflow: hidden; text-overflow: ellipsis; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-caption > .sp-where > .service-badge { flex: none; width: 18px; height: 18px; margin: 0; border-radius: 4.5px; box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .18); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-caption > .sp-where > .service-badge > b { scale: .68; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-caption > .sp-where > .service-badge > img { border-radius: inherit; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-size="short"] > .sp-caption > .sp-where { margin-top: calc(4 * var(--sp-u)); }

/* ===== the one mark of the strongest match: the purple label, at the foot of that film's panel =====
   The owner's own word for it (8 October): "the purple label of strongest match". It is the pill the carousel wore
   on its strongest film before the showpiece (prototype-src/card-100.css and premium-20.css, until 7 October): violet
   into magenta, white words, a pale pink hairline and a soft glow of its own colour. Here it is larger and in sentence
   case so it reads on every phone, and it says the service's own word ("Exceptional match", "Strongest match"; else
   "Closest of the three"). It belongs to the panel, not to the words under it: when the triptych is turned it rides
   on the strongest film wherever that film stands (showpiece.js turnMark), facing you, on two lines on a wing. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-strongest {
  position: absolute; left: var(--sp-vx); top: calc(var(--sp-tri-bot) - 1 * var(--sp-u)); transform: translate3d(calc(-50% + var(--sp-turn)), calc(-50% + 6px), 0); z-index: 3; box-sizing: border-box;
  padding: calc(5 * var(--sp-u)) calc(13 * var(--sp-u)); border-radius: 999px; white-space: nowrap; text-align: center;
  background: linear-gradient(120deg, rgba(91, 70, 199, .95), rgba(166, 58, 186, .93));
  color: #fff; font: 600 calc(12.5 * var(--sp-u))/calc(16 * var(--sp-u)) var(--font-ui, system-ui); letter-spacing: .005em; text-transform: none;
  box-shadow: inset 0 0 0 1px rgba(255, 201, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 22px rgba(196, 67, 205, .3), 0 8px 18px rgba(0, 0, 0, .55);
  text-shadow: 0 1px 1px rgba(40, 10, 60, .35);
  opacity: 0; transition: opacity 360ms var(--sp-ease), transform 620ms var(--sp-spring);
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="three"] .sp-strongest { opacity: 1; transform: translate3d(calc(-50% + var(--sp-turn)), -50%, 0); transition-delay: 260ms, 0s; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-strongest:is([data-at="left"], [data-at="right"]) { white-space: normal; width: min-content; min-width: calc(74 * var(--sp-u)); border-radius: calc(14 * var(--sp-u)); padding: calc(5 * var(--sp-u)) calc(10 * var(--sp-u)); }

/* ===== the dock: one thing to do, and one quiet row of the rest =====
   The primary button takes the full width. Under it, in one row: Share, You choose, Save, Refine (only on a three just
   searched for) and, on a Friday three, Another three. Each is a real button, at least 44pt each way. The row wraps
   rather than clip if a larger text size or a longer word ever makes it too wide, and the dock grows upwards. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results {
  all: unset !important; position: absolute !important; z-index: 14 !important; left: 20px !important; right: 20px !important; bottom: var(--sp-bot) !important; min-height: var(--sp-dock-h) !important;
  display: flex !important; flex-flow: row wrap !important; align-content: flex-end !important; align-items: stretch !important; justify-content: center !important; gap: 4px 0 !important; box-sizing: border-box !important;
  opacity: 0 !important; visibility: hidden !important; transform: translate3d(0, 14px, 0) !important; transition: opacity 320ms var(--sp-ease), transform 560ms var(--sp-spring), visibility 0s linear 320ms !important;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="three"] > .critical-results { opacity: 1 !important; visibility: visible !important; transform: none !important; transition-delay: 420ms, 420ms, 0s !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results > .critical-film-cta {
  all: unset !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 52px !important; flex: 0 0 100% !important; border-radius: 999px !important;
  background: var(--sp-lamp) !important; color: var(--c-lamp-ink, #0b0b10) !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; padding: 0 20px !important;
  font: 600 min(var(--fs-headline, 17px), calc((var(--sp-vw, 390px) - 72px) / 16.6))/var(--lh-headline, 22px) var(--font-ui, system-ui) !important; letter-spacing: var(--tr-headline, -.025em) !important; text-align: center !important;
  transition: transform 160ms var(--sp-ease) !important;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results > .critical-film-cta:active { transform: scale(.975) !important; background: #e4dfd6 !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results > .critical-film-cta:focus-visible { outline: 2px solid var(--sp-beam) !important; outline-offset: 3px !important; }
/* (the label has the button's whole width, so when its words change for another film nothing on the page changes place) */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results > .critical-film-cta > .critical-cta-label { all: unset !important; display: block !important; flex: 1 1 100% !important; min-width: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
/* The row is a real box of its own (8 October 2026). It used to be display: contents, and on an iPhone a tap on Share or
   Refine was then given to Save, the button between them (the owner's report): WebKit's touch targeting needs each
   button inside a laid-out box. Same look: one full-width row, the buttons sharing it. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results > .critical-result-toolbar { all: unset !important; box-sizing: border-box !important; display: flex !important; flex: 0 0 100% !important; width: 100% !important; align-items: center !important; justify-content: space-between !important; gap: 0 !important; order: 3 !important; position: relative !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results :is(.critical-result-toolbar > button, .critical-friday-refresh) {
  all: unset !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .4em !important; min-width: 44px !important; min-height: calc(46 * var(--sp-u)) !important; padding: 0 6px !important; flex: 1 1 auto !important;
  border-radius: 12px !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; white-space: nowrap !important; touch-action: manipulation !important; position: relative !important;
  font: 500 min(var(--fs-subhead, 15px), calc((var(--sp-vw, 390px) - 88px) / 20.7))/var(--lh-subhead, 20px) var(--font-ui, system-ui) !important; letter-spacing: var(--tr-subhead, -.015em) !important; color: var(--c-label-2, rgba(245, 244, 247, .68)) !important;
  transition: none !important;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results :is(.critical-result-toolbar > button, .critical-friday-refresh)[hidden] { display: none !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results :is(.critical-result-toolbar > button, .critical-friday-refresh):active { color: var(--c-label-1, #f5f4f7) !important; background: var(--c-fill-2, rgba(255, 255, 255, .08)) !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results :is(.critical-result-toolbar > button, .critical-friday-refresh):focus-visible { outline: 2px solid var(--sp-beam) !important; outline-offset: -2px !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results > .critical-friday-refresh { order: 2 !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-mode="friday"] > .critical-results :is(.critical-result-toolbar > button, .critical-friday-refresh) { font-size: min(var(--fs-footnote, 13px), calc((var(--sp-vw, 390px) - 88px) / 23.4)) !important; padding: 0 4px !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results > .critical-result-toolbar > button > span { all: unset !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results > .critical-result-toolbar > button > svg {
  all: unset !important; display: block !important; width: 1.15em !important; height: 1.15em !important; flex: none !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; overflow: visible !important;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results > .critical-result-toolbar > button.critical-save-trio:is(.saved, .is-saved) { color: var(--c-label-1, #f5f4f7) !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results > .critical-result-toolbar > button.critical-save-trio:is(.saved, .is-saved) > svg { fill: currentColor !important; }
/* "You choose": where the pick stands, a quiet line resting on the dock */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results > .yc-pill {
  all: unset !important; position: absolute !important; left: 50% !important; bottom: calc(100% + 6px) !important; transform: translate3d(-50%, 0, 0) !important; box-sizing: border-box !important; max-width: 100% !important; min-height: 32px !important; padding: 0 14px !important;
  display: inline-flex !important; align-items: center !important; gap: 8px !important; border-radius: 999px !important; background: rgba(20, 20, 28, .92) !important; box-shadow: inset 0 0 0 1px var(--c-line, rgba(255, 255, 255, .09)) !important; cursor: pointer !important;
  font: 500 var(--fs-footnote, 13px)/var(--lh-footnote, 18px) var(--font-ui, system-ui) !important; color: var(--c-label-1, #f5f4f7) !important; white-space: nowrap !important;
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results > .yc-pill > .yc-pill-text { overflow: hidden !important; text-overflow: ellipsis !important; }
/* (on the smallest iPhone that line needs the room of one line of the reason: the reason gives it up, and is whole on the film's own page.
   These line counts are the fallback, var(--sp-why-lines, n): showpiece.js fitWhy gives the reason the lines that are really there above the button, up to four) */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-size="short"] > .critical-results > .yc-pill { min-height: 28px !important; bottom: calc(100% + 4px) !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-size="short"].yc-has-status > .sp-caption > .sp-why { -webkit-line-clamp: var(--sp-why-lines, 1); }

/* ===== without the swing: Reduce Motion, and the app's own "quick reveals" setting =====
   The triptych stands open from the moment it is sealed: three dark panels, each with its arch. Each film comes up
   on its own panel, a wing, the other wing, then the centre, by a cross-fade. Nothing swings, turns or travels. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-turns="turn"] .critical-card:not(.rank-1) .sp-back { display: none; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-turns="turn"] .critical-card:not(.rank-1) .sp-front { opacity: 1; transition: none; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-turns="fade"] :is(.sp-hinge, .sp-leaf, .sp-sheen, .sp-flash, .sp-door-hinge) { animation: none !important; transition: none !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-turns="fade"] > .critical-card-stage { transition: none !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-turns="fade"] .critical-card.rank-3 .sp-hinge { transform: rotateY(calc(-1 * var(--sp-ang))) !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-turns="fade"] .critical-card.rank-2 .sp-hinge { transform: rotateY(var(--sp-ang)) !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-turns="fade"] .critical-card .sp-leaf { opacity: 1; transform: none !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-turns="fade"] .sp-front { transition: opacity 320ms linear; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-turns="fade"] .sp-door[data-rank="3"] > .sp-door-hinge { transform: rotateY(calc(-1 * var(--sp-ang))) !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-turns="fade"] .sp-door[data-rank="2"] > .sp-door-hinge { transform: rotateY(var(--sp-ang)) !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-turns="fade"][data-sp-act="three"] { --sp-turn: 0px; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-turns="fade"] .sp-strongest { transition: opacity 240ms linear; }
/* Reduce Motion: a calm, complete version of the wait as well. Light fades; nothing loops. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-motion="reduced"] :is(.sp-door-light > b, .sp-door-pulse, .sp-door-halo, .sp-ready, .sp-door-flash, .sp-bloom) { animation: none !important; }
/* (the light inside an arch rests where its drift would begin: still, and the same picture as the moving one) */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-motion="reduced"] .sp-door-light > b:nth-child(1) { transform: translate3d(-26%, -4%, 0) scale(.62); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-motion="reduced"] .sp-door-light > b:nth-child(2) { transform: translate3d(24%, 4%, 0) scale(.78); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-motion="reduced"] .sp-door-light > b:nth-child(3) { transform: translate3d(-5%, 47%, 0) scale(.6); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-motion="reduced"] .sp-door-seam { transform: none; transition: opacity 400ms linear; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-motion="reduced"] .sp-door-leaf { transform: none; transition: opacity 500ms linear; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-motion="reduced"]:is([data-sp-beat="3"], [data-sp-beat="4"], [data-sp-beat="5"]) .sp-door-pulse { opacity: .2; transition: opacity 900ms linear; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-motion="reduced"] :is(.sp-words, .sp-caption, .critical-results, .critical-results-heading, .critical-request-capsule) { transform: none !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-motion="reduced"] .sp-strongest[data-at="centre"] { transform: translate3d(-50%, -50%, 0) !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-motion="reduced"]:not([data-sp-spin]) .sp-strongest:not([data-at="centre"]) { transform: translate3d(0, -50%, 0) !important; }

/* the arches are taken out of the page once the triptych stands in their place: nothing is left running */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-doors="off"] .sp-door { display: none; }

/* the app's older press ripple is drawn over the whole phone; it has no place over the panels */
html.ds #device.critical-journey-active > .sensory-wave { display: none !important; }

/* ===== a phone that folds, open, while a search runs (iPhone Duo; hub/docs/IPHONE-DUO-EXPERIENCE-2026-10-06.md) =====
   Not the phone's page made wider. The two leaves mean two things: one holds what was asked, the other what is coming.
   Held like a book: the three arches on the left leaf, where the phone's own sealed triptych will stand when the
   films are found, the person's words on the leaf facing them, and nothing on the fold. Standing on a table: the
   arches on the leaf that stands, the words on the leaf that lies flat.
   showpiece.js sets data-sp-fold only for a search's wait on the inner display, with where the fold is (--sp-fold-at)
   and how far to keep clear of it (--sp-fold-half). When the three are found the Duo's own triptych takes the page
   (prototype-src/duo-triptych.js): it is revealed by opening the phone. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-fold] { position: fixed !important; inset: auto !important; left: var(--sp-fold-dx, 0px) !important; top: var(--sp-fold-dy, 0px) !important; width: var(--sp-fold-w, 100vw) !important; height: var(--sp-fold-h, 100dvh) !important; z-index: 55 !important; --sp-req-h: 0px; --sp-dock-h: 0px; --sp-cap-h: calc(34 * var(--sp-u)); --sp-floor-h: 34px; --sp-rise: .5; }
/* (the app's column clips what is in it; for as long as the wait has both leaves, it does not) */
html.ds #device.sp-fold-device, html.ds #device.sp-fold-device .sp-fold-host { overflow: visible !important; }
/* the arches seal, and the phone's own triptych takes the page: for that one beat this page stays in sight under it,
   with none of its own cards, words or buttons */
html.ds[data-duo-stage] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp).sp-arrive[data-sp-handover="duo"] { visibility: visible; }
/* (and at every other time under that phone's own page, nothing of this one shows through it: the panels and buttons
   that are told to be visible above are told otherwise here) */
html.ds[data-duo-stage] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):not(.sp-arrive[data-sp-handover="duo"]) :is(.critical-card, .critical-results) { visibility: hidden !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-handover="duo"]:not([data-sp-act="wait"]) > :is(.critical-card-stage, .sp-status, .sp-over, .sp-caption, .critical-request-capsule, .critical-results, .critical-results-heading, .critical-header) { display: none !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-fold="book"] { --sp-ox: 16px; --sp-fw: calc(var(--sp-fold-at) - var(--sp-fold-half) - 16px); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-fold="book"] > .sp-words { left: calc(var(--sp-fold-at) + var(--sp-fold-half)); right: auto; width: calc(var(--sp-vw) - var(--sp-fold-at) - var(--sp-fold-half) - 16px); top: 0; height: 100%; align-items: center; padding: 0 28px; box-sizing: border-box; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-fold="stack"] { --sp-fh: calc(var(--sp-fold-at) - var(--sp-fold-half) + var(--sp-bot)); --sp-mirror: .2; --sp-rise: .3; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-fold="stack"] > .sp-words { left: 16px; right: 16px; width: auto; top: calc(var(--sp-fold-at) + var(--sp-fold-half)); height: calc(var(--sp-vh) - var(--sp-fold-at) - var(--sp-fold-half)); align-items: center; padding: 0 28px; box-sizing: border-box; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-fold] > .sp-words > p { font: 700 var(--fs-title-1, 28px)/var(--lh-title-1, 34px) var(--font-ui, system-ui); letter-spacing: var(--tr-title-1, .013em); max-width: 22ch; -webkit-line-clamp: 6; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-fold] > .sp-words[data-length="long"] > p { font: 600 var(--fs-title-2, 22px)/var(--lh-title-2, 28px) var(--font-ui, system-ui); max-width: 26ch; -webkit-line-clamp: 8; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-fold] > .sp-words[data-length="longest"] > p { font: 600 var(--fs-headline, 17px)/var(--lh-headline, 22px) var(--font-ui, system-ui); max-width: 32ch; -webkit-line-clamp: 12; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-fold] > .sp-status > span { position: static; margin-top: 4px; }
/* a line of light where the fold is, as the closed phone has at its spine: the two leaves belong to one thing */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-fold="book"] > .sp-stage::after { content: ""; position: absolute; left: calc(var(--sp-fold-at) - .5px); top: 12%; bottom: 12%; width: 1px; background: linear-gradient(180deg, transparent, rgba(243, 238, 230, .34) 30%, rgba(243, 238, 230, .34) 70%, transparent); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-fold="stack"] > .sp-stage::after { content: ""; position: absolute; top: calc(var(--sp-fold-at) - .5px); left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(243, 238, 230, .34) 30%, rgba(243, 238, 230, .34) 70%, transparent); }

/* a Friday three says which three it is (this week's, or a welcome three) in small capitals over its name */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-mode="friday"] > .critical-results-heading > .eyebrow:first-child {
  all: unset !important; display: block !important; font: 600 var(--fs-caption-2, 11px)/calc(13 * var(--sp-u)) var(--font-ui, system-ui) !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--c-label-3, rgba(245, 244, 247, .56)) !important; white-space: nowrap !important;
}

/* ===== a film fact while you wait (third pass, 8 October) =====
   The foot of the page, where the buttons will be: one fact at a time, small and quiet under the arches and the
   person's own words, so it never competes with them and never covers where the films arrive. It comes in after a
   few seconds and changes every five; it is out of sight before its words change, and gone the moment the three are
   found. Never announced (aria-hidden), never focused. showpiece.js: FACT, factLoop. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-fact {
  position: absolute; z-index: 4; left: calc(var(--sp-ox) + 30px); width: calc(var(--sp-fw) - 60px); top: calc(var(--sp-dock-top) + 2px); height: calc(var(--sp-fh) - var(--sp-dock-top) - var(--sp-bot) - 2px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; pointer-events: none; box-sizing: border-box;
  opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 380ms var(--sp-ease), transform 380ms var(--sp-ease);
}
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="wait"]:not(.sp-leave) > .sp-fact.is-on { opacity: 1; transform: none; transition: opacity 760ms var(--sp-ease), transform 900ms var(--sp-spring); }
/* (gone the moment the three are found: not faded, so it is never seen over their arrival on a slow phone) */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):not([data-sp-act="wait"]) > .sp-fact { opacity: 0 !important; visibility: hidden; transition: none !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-fact > .sp-fact-eyebrow { flex: none; display: block; margin: 0 0 calc(4 * var(--sp-u)); font: 600 var(--fs-caption-2, 11px)/var(--lh-caption-2, 13px) var(--font-ui, system-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--c-seal-hi, #a78bfa); opacity: .85; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-fact > .sp-fact-eyebrow:empty { display: none; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-fact > p {
  flex: none; margin: 0; max-width: 36ch; color: var(--c-label-2, rgba(245, 244, 247, .68)); text-wrap: pretty;
  font: 400 var(--fs-footnote, 13px)/var(--lh-footnote, 18px) var(--font-ui, system-ui); letter-spacing: var(--tr-footnote, -.006em);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
/* (the line that says the search is taking longer, when it has the foot: the person's own size of words) */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-fact[data-kind="line"] > p { font: 400 var(--fs-subhead, 15px)/var(--lh-subhead, 20px) var(--font-ui, system-ui); letter-spacing: var(--tr-subhead, -.015em); text-wrap: balance; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-motion="reduced"] > .sp-fact { transform: none !important; }
/* a phone that folds, open: under the person's words on their own leaf */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-fold="book"] > .sp-fact { left: calc(var(--sp-fold-at) + var(--sp-fold-half) + 28px); width: calc(var(--sp-vw) - var(--sp-fold-at) - var(--sp-fold-half) - 72px); top: auto; bottom: calc(var(--sp-bot) + 18px); height: calc(110 * var(--sp-u)); justify-content: flex-end; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-fold="stack"] > .sp-fact { top: auto; bottom: calc(var(--sp-bot) + 10px); height: calc(96 * var(--sp-u)); justify-content: flex-end; }

/* ===== turning the triptych (third pass, 8 October) =====
   Once the three stand, showpiece.js marks the layer data-sp-spin="on" and from then on draws each film's pose as one
   transform on its own button (the same hinge as above, written as numbers: see poseOf). Here every button is given
   the centre panel's box, the stage holds the one perspective all three share, and the hinges inside stand flat.
   At rest the picture is the same as the hinged triptych above; between rests it is one continuous turn.
   Specificity: each rule names .critical-card[data-rank] so that it outranks the per-film rules above. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"] { touch-action: none; --sp-turn: 0px; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"] > .critical-card-stage { perspective: var(--sp-persp) !important; perspective-origin: var(--sp-vx) var(--sp-vy) !important; transform: none !important; transition: opacity 140ms linear !important; overflow: hidden !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"] .critical-card[data-rank] { left: var(--sp-cx) !important; top: var(--sp-tri-top) !important; width: var(--sp-cw) !important; height: var(--sp-ch) !important; transform-origin: 0 0 !important; will-change: transform; touch-action: none !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"] .critical-card[data-rank] .critical-card-front { left: 0 !important; right: 0 !important; width: auto !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"] .critical-card[data-rank] > .sp-panel { perspective: none; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"] .critical-card[data-rank] .sp-hinge { left: 0 !important; right: auto !important; width: var(--sp-cw) !important; height: var(--sp-ch) !important; transform: none !important; transition: none !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"] .critical-card[data-rank] .sp-leaf { opacity: 1; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"] .critical-card[data-rank] .sp-back { display: none; }
/* lit from the centre: the wing's own shade (darkest where it meets the centre panel, and the shade a film not chosen
   rests in) comes and goes with the turn. It is one layer of its own whose opacity showpiece.js writes (.sp-wing), so a
   turn redraws no poster: the phone only composes. The ring of the film chosen is the centre's (the app's own
   is-selected), and changes only when a turn ends. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-wing { display: none; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"] .critical-card[data-rank] .sp-shade { background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0, rgba(255, 255, 255, 0) 18%, rgba(5, 5, 7, 0) 70%, rgba(5, 5, 7, .2) 100%); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"] .critical-card[data-rank] .sp-wing { display: block; position: absolute; inset: 0; border-radius: inherit; opacity: 0; will-change: opacity;
  background: linear-gradient(90deg, rgba(5, 5, 7, .46) 0, rgba(255, 250, 240, .08) 5%, rgba(255, 250, 240, .03) 20%, rgba(5, 5, 7, .2) 100%), rgba(5, 5, 7, .1); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"] .critical-card[data-rank] .sp-wing[data-side="left"] { background: linear-gradient(270deg, rgba(5, 5, 7, .46) 0, rgba(255, 250, 240, .08) 5%, rgba(255, 250, 240, .03) 20%, rgba(5, 5, 7, .2) 100%), rgba(5, 5, 7, .1); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"] .critical-card[data-rank] .sp-edge { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 0 rgba(255, 255, 255, .3); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"] .critical-card[data-rank] .sp-dim { opacity: 0; transition: none; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"] .critical-card[data-rank] > .sp-panel { will-change: opacity; }
/* each film's light travels with it: every room is the centre's, moved and scaled by showpiece.js */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"] .sp-room[data-rank] { left: calc(var(--sp-cx) - var(--sp-cw) * .55); top: calc(var(--sp-tri-top) - var(--sp-ch) * .26); width: calc(var(--sp-cw) * 2.1); height: calc(var(--sp-ch) * 1.42); transition: none; will-change: transform; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"] .sp-strongest { left: 0; top: 0; transition: opacity 360ms var(--sp-ease); will-change: transform; }
/* Reduce Motion: no turn. The three fade out, stand in their new places, and fade back. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"].sp-swap > :is(.critical-card-stage, .sp-over),
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"].sp-swap .sp-room { opacity: 0 !important; transition: opacity 140ms linear !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-spin="on"] > .sp-over { transition: opacity 140ms linear; }

/* ===== a Friday three: its own purple room (third pass, 8 October) =====
   The owner: a Friday 3 "should have a purple background to distinguish this behaviour from a normal search". When the
   three on the page are a Friday three (this week's, the welcome three, or one reopened from history: the layer's
   data-mode is "friday") the dark the triptych stands in is a deep field of the design system's own purples
   (--c-seal-fill, --c-seal, --c-seal-hi over --c-stage), lit most behind the films, and its eyebrow says which three it
   is in the same violet. It never looks like an ordinary search. */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-mode="friday"] {
  --sp-tint: 167, 139, 250;
  background:
    radial-gradient(ellipse 78% 40% at 50% 40%, rgba(139, 92, 246, .5) 0%, rgba(124, 77, 235, .26) 44%, rgba(124, 77, 235, 0) 80%),
    radial-gradient(ellipse 130% 50% at 50% 100%, rgba(124, 77, 235, .3), rgba(124, 77, 235, 0) 72%),
    linear-gradient(180deg, rgba(124, 77, 235, .3) 0%, rgba(124, 77, 235, .18) 50%, rgba(124, 77, 235, .3) 100%),
    var(--c-stage, #050507) !important;
}
/* (the edges of the room fall away to dark, so the violet is a light the films stand in, not a flat colour) */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-mode="friday"] > .sp-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 120% 90% at 50% 46%, rgba(5, 5, 7, 0) 52%, rgba(5, 5, 7, .5) 100%); }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-mode="friday"] > .critical-results-heading > .eyebrow:first-child { color: var(--c-seal-hi, #a78bfa) !important; letter-spacing: .1em !important; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-mode="friday"] .sp-strongest { box-shadow: inset 0 0 0 1px rgba(255, 220, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .24), 0 0 22px rgba(196, 67, 205, .3), 0 8px 18px rgba(5, 5, 7, .6); }

/* (P-JOURNEY, 13 October 2026) Flick's "first full three" capsule stands under the row of round controls (Back, sound),
   not over them: they stay seen and in reach for the few seconds he is there, on the three and on a film opened from it */
html.ds #device.critical-journey-active > .sps-cheer { top: max(66px, calc(env(safe-area-inset-top, 0px) + 60px)); }
/* (SEND, 27 October 2026) the strongest match's mark, while its film stands on a wing (a turn, Reduce Motion's fade, a three
   reopened): smaller and quieter, with no glow, so it never reads against the centre film's own word (showpiece.js QUIET_MARK;
   while turning, the script sets the same values frame by frame) */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="three"]:not([data-sp-spin="on"]) .sp-strongest:is([data-at="left"], [data-at="right"]) { opacity: .55; }
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-strongest:is([data-at="left"], [data-at="right"]) { box-shadow: none; }

/* ===== prototype-src/reveal-fit.css ===== */
/* Reveal fit (owner, 11 November 2026): nothing on the reveal is cut mid-sentence. PREVIEW FLAG "reveal-fit" (off by default).
   reveal-fit.js writes the shortened words; these rules only seat them. A shortened paragraph is drawn for the eye (.rf-eye) and
   kept whole for VoiceOver (.rf-sr); the request's original paragraph stays (VoiceOver, and the opened card) while its twin
   (.rf-short) draws the shortened words. */
html:is(.pv-reveal-fit, .pv-all) #device .trip-critical-layer .rf-sr {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important;
}
html:is(.pv-reveal-fit, .pv-all) #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-request-capsule:not(.rf-cut) > p.rf-short { display: none !important; }
html:is(.pv-reveal-fit, .pv-all) #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-request-capsule.rf-cut > p:not(.rf-short) {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important;
}
html:is(.pv-reveal-fit, .pv-all) .rf-sr { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
html:is(.pv-reveal-fit, .pv-all) .rf-drop { display: none !important; }

/* ===== prototype-src/duo-triptych.css ===== */
/* TRIPTIC on iPhone Duo: the triptych (prototype-src/duo-triptych.js). Record: hub/docs/IPHONE-DUO-EXPERIENCE-2026-10-06.md.

   Nothing here applies on an ordinary iPhone: every rule hangs from .duo-stage, an element the script adds to the page
   only while the device environment reports a fold, or from html[data-duo-stage], an attribute it sets only then.

   Geometry comes from the script as custom properties on .duo-stage (the two leaves --duo-a* / --duo-b*, the spine
   --duo-spine), worked out from the fold's reserved region and the safe areas, never from a device name:
     data-duo-layout="book"    two leaves side by side, the fold down the middle (the inner display, held like a book)
     data-duo-layout="stack"   two leaves one over the other, the fold across the middle (the inner display on its side,
                               or standing on a table): the upper leaf is a screen, the lower leaf is for hands
     data-duo-layout="single"  one leaf, the spine at an edge (the cover display)
   The scrubbed path (everything that follows the hinge angle) moves transform and opacity only; the script sets the
   time of paused animations. --duo-seal (0..1, the seal breaking) restyles this small tree only. */

html.ds[data-duo-stage] #device .trip-critical-layer { visibility: hidden; }
/* the review simulator's frame is the phone's own display: no drawn status bar or Home indicator (duo-simulator.js) */
html.ds.duo-simulated #device .ios-status,
html.ds.duo-simulated #device .home-indicator { display: none !important; }

html.ds .duo-stage {
  --duo-lamp: 243, 238, 230;
  --duo-warm: 240, 199, 134;
  --duo-beam: 104, 201, 255;
  --duo-violet: 139, 92, 246;
  --duo-lilac: 206, 186, 255;
  --duo-seal: 0;
  --type-cap: 1.15;
  position: fixed; inset: 0; z-index: 60; overflow: hidden; box-sizing: border-box;
  background:
    radial-gradient(90% 70% at 50% 24%, rgba(var(--duo-beam), .07), transparent 62%),
    radial-gradient(90% 60% at 50% 104%, rgba(var(--duo-violet), .12), transparent 70%),
    var(--c-stage);
  color: var(--c-label-1); font-family: var(--font-ui);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  contain: layout paint style;
}
/* a three just found: this page comes up over the wait's arches as their beat of light fades (showpiece.css) */
html.ds .duo-stage.is-arriving { animation: duo-arrive 420ms cubic-bezier(.2, .8, .2, 1) 280ms both; }
html.ds .duo-stage.is-arriving[data-duo-still] { animation: duo-arrive 160ms linear both; }
/* (20 October 2026, lane SMOOTH follow-up) while it is arriving it is not yet seen (opacity 0 through the 280 ms beat), so it takes
   no taps: they reach what the person can see. duo-triptych.js lifts this the moment the arrival ends. */
html.ds .duo-stage.is-arriving { pointer-events: none; }
@keyframes duo-arrive { from { opacity: 0; } to { opacity: 1; } }
html.ds .duo-stage[hidden],
html.ds .duo-stage [hidden] { display: none !important; }
html.ds .duo-stage *,
html.ds .duo-stage *::before,
html.ds .duo-stage *::after { box-sizing: border-box; }
html.ds .duo-stage :focus-visible { outline: 2px solid rgba(var(--duo-beam), .9); outline-offset: 2px; }
html.ds .duo-stage button { font-family: inherit; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html.ds .duo-stage .duo-eyebrow {
  display: block; font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: rgba(var(--duo-beam), .92);
}

/* ------------------------------------------------------------------ light from the fold */
html.ds .duo-stage .duo-ground { position: absolute; inset: 0; pointer-events: none; }
html.ds .duo-stage .duo-vignette { position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .5)); }
html.ds .duo-stage .duo-seam {
  position: absolute; left: calc(var(--duo-spine) - 1.5px); top: 0; width: 3px; height: 100%; opacity: 0; will-change: transform, opacity;
  background: linear-gradient(to bottom, transparent, rgba(var(--duo-lamp), 1) 16%, rgba(var(--duo-lamp), 1) 84%, transparent);
}
html.ds .duo-stage .duo-seam > i {
  position: absolute; left: -120px; right: -120px; top: 0; bottom: 0; will-change: transform;
  background: linear-gradient(to right, transparent, rgba(var(--duo-warm), .1) 22%, rgba(var(--duo-warm), .34) 40%, rgba(var(--duo-lamp), .86) 50%, rgba(var(--duo-warm), .34) 60%, rgba(var(--duo-warm), .1) 78%, transparent);
  -webkit-mask: linear-gradient(to bottom, transparent, rgb(0, 0, 0) 22%, rgb(0, 0, 0) 78%, transparent); mask: linear-gradient(to bottom, transparent, rgb(0, 0, 0) 22%, rgb(0, 0, 0) 78%, transparent);
}
html.ds .duo-stage .duo-spill { position: absolute; top: 0; height: 100%; width: 50%; opacity: 0; will-change: transform, opacity; }
html.ds .duo-stage .duo-spill-a { right: calc(100% - var(--duo-spine)); transform-origin: 100% 50%; background: radial-gradient(100% 66% at 100% 50%, rgba(var(--duo-lamp), .5), rgba(var(--duo-warm), .28) 20%, rgba(var(--duo-warm), .09) 54%, transparent 80%); }
html.ds .duo-stage .duo-spill-b { left: var(--duo-spine); transform-origin: 0 50%; background: radial-gradient(100% 66% at 0 50%, rgba(var(--duo-lamp), .5), rgba(var(--duo-warm), .28) 20%, rgba(var(--duo-warm), .09) 54%, transparent 80%); }
html.ds .duo-stage .duo-rays { position: absolute; top: 0; height: 100%; width: 50%; opacity: 0; will-change: opacity; }
html.ds .duo-stage .duo-rays-a {
  right: calc(100% - var(--duo-spine));
  background: repeating-conic-gradient(from 232deg at 100% 50%, transparent 0deg, rgba(var(--duo-lamp), .11) 3deg, transparent 7deg, transparent 11deg);
  -webkit-mask: radial-gradient(farthest-side at 100% 50%, rgb(0, 0, 0) 6%, transparent 86%); mask: radial-gradient(farthest-side at 100% 50%, rgb(0, 0, 0) 6%, transparent 86%);
}
html.ds .duo-stage .duo-rays-b {
  left: var(--duo-spine);
  background: repeating-conic-gradient(from 52deg at 0 50%, transparent 0deg, rgba(var(--duo-lamp), .11) 3deg, transparent 7deg, transparent 11deg);
  -webkit-mask: radial-gradient(farthest-side at 0 50%, rgb(0, 0, 0) 6%, transparent 86%); mask: radial-gradient(farthest-side at 0 50%, rgb(0, 0, 0) 6%, transparent 86%);
}
html.ds .duo-stage:is([data-duo-layout="stack"], [data-duo-layout="single"]) .duo-rays-a { display: none; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-rays-b {
  left: 0; top: var(--duo-spine); width: 100%; height: 50%;
  background: repeating-conic-gradient(from 142deg at 50% 0, transparent 0deg, rgba(var(--duo-lamp), .11) 3deg, transparent 7deg, transparent 11deg);
  -webkit-mask: radial-gradient(farthest-side at 50% 0, rgb(0, 0, 0) 6%, transparent 86%); mask: radial-gradient(farthest-side at 50% 0, rgb(0, 0, 0) 6%, transparent 86%);
}
html.ds .duo-stage[data-duo-layout="single"][data-duo-spine="right"] .duo-rays-b { display: none; }
/* all three have landed: one breath of light over both leaves */
html.ds .duo-stage .duo-bloom { position: absolute; inset: 0; opacity: 0; background: radial-gradient(70% 60% at 50% 46%, rgba(var(--duo-lamp), .3), rgba(var(--duo-warm), .1) 50%, transparent 78%); }
html.ds .duo-stage[data-duo-layout="stack"] .duo-seam { left: 0; top: calc(var(--duo-spine) - 1.5px); width: 100%; height: 3px; background: linear-gradient(to right, transparent, rgba(var(--duo-lamp), 1) 16%, rgba(var(--duo-lamp), 1) 84%, transparent); }
html.ds .duo-stage[data-duo-layout="stack"] .duo-seam > i {
  left: 0; right: 0; top: -120px; bottom: -120px;
  background: linear-gradient(to bottom, transparent, rgba(var(--duo-warm), .1) 22%, rgba(var(--duo-warm), .34) 40%, rgba(var(--duo-lamp), .86) 50%, rgba(var(--duo-warm), .34) 60%, rgba(var(--duo-warm), .1) 78%, transparent);
  -webkit-mask: linear-gradient(to right, transparent, rgb(0, 0, 0) 22%, rgb(0, 0, 0) 78%, transparent); mask: linear-gradient(to right, transparent, rgb(0, 0, 0) 22%, rgb(0, 0, 0) 78%, transparent);
}
html.ds .duo-stage[data-duo-layout="stack"] .duo-spill { left: 0; width: 100%; height: 46%; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-spill-a { top: auto; right: auto; bottom: calc(100% - var(--duo-spine)); transform-origin: 50% 100%; background: radial-gradient(66% 100% at 50% 100%, rgba(var(--duo-lamp), .5), rgba(var(--duo-warm), .28) 20%, rgba(var(--duo-warm), .09) 54%, transparent 80%); }
html.ds .duo-stage[data-duo-layout="stack"] .duo-spill-b { top: var(--duo-spine); transform-origin: 50% 0; background: radial-gradient(66% 100% at 50% 0, rgba(var(--duo-lamp), .5), rgba(var(--duo-warm), .28) 20%, rgba(var(--duo-warm), .09) 54%, transparent 80%); }
html.ds .duo-stage[data-duo-layout="single"] .duo-spill-a { display: none; }
html.ds .duo-stage[data-duo-layout="single"] .duo-spill-b { width: 70%; }
html.ds .duo-stage[data-duo-layout="single"][data-duo-spine="right"] .duo-spill-b { left: auto; right: calc(100% - var(--duo-spine)); transform-origin: 100% 50%; background: radial-gradient(100% 66% at 100% 50%, rgba(var(--duo-lamp), .5), rgba(var(--duo-warm), .28) 20%, rgba(var(--duo-warm), .09) 54%, transparent 80%); }

/* ------------------------------------------------------------------ sealed: the closed triptych, and the light at the spine */
html.ds .duo-stage .duo-sealed { position: absolute; inset: 0; pointer-events: none; will-change: transform, opacity; }
/* the line of light at the spine edge of the cover display: there while the three are sealed, wider as the seal breaks */
/* (5 November 2026, owner: the glow at the edge was yellow; it is the arches' own violet now, as on an iPhone) */
html.ds .duo-stage[data-duo-layout="single"] .duo-sealed::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 132px; transform-origin: 0 50%;
  background:
    linear-gradient(to right, rgba(var(--duo-lilac), 1) 0, rgba(var(--duo-lilac), 1) 2px, transparent 3.5px),
    linear-gradient(to right, rgba(var(--duo-lilac), .6), rgba(var(--duo-violet), .36) 9%, rgba(var(--duo-violet), .12) 40%, transparent);
  -webkit-mask: linear-gradient(to bottom, transparent, rgb(0, 0, 0) 12%, rgb(0, 0, 0) 88%, transparent); mask: linear-gradient(to bottom, transparent, rgb(0, 0, 0) 12%, rgb(0, 0, 0) 88%, transparent);
  opacity: calc(.7 + var(--duo-seal) * .3); transform: scale3d(calc(1 + var(--duo-seal) * 2.1), 1, 1);
}
html.ds .duo-stage[data-duo-layout="single"][data-duo-spine="right"] .duo-sealed::before {
  left: auto; right: 0; transform-origin: 100% 50%;
  background:
    linear-gradient(to left, rgba(var(--duo-lilac), 1) 0, rgba(var(--duo-lilac), 1) 2px, transparent 3.5px),
    linear-gradient(to left, rgba(var(--duo-lilac), .6), rgba(var(--duo-violet), .36) 9%, rgba(var(--duo-violet), .12) 40%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  html.ds .duo-stage[data-duo-layout="single"]:not([data-duo-still]) .duo-sealed::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 64px;
    background: linear-gradient(to right, rgba(var(--duo-violet), .42), transparent);
    -webkit-mask: linear-gradient(to bottom, transparent, rgb(0, 0, 0) 20%, rgb(0, 0, 0) 80%, transparent); mask: linear-gradient(to bottom, transparent, rgb(0, 0, 0) 20%, rgb(0, 0, 0) 80%, transparent);
    animation: duo-breathe 4.2s ease-in-out infinite;
  }
  html.ds .duo-stage[data-duo-layout="single"][data-duo-spine="right"]:not([data-duo-still]) .duo-sealed::after { left: auto; right: 0; background: linear-gradient(to left, rgba(var(--duo-violet), .42), transparent); }
}
@keyframes duo-breathe { 0%, 100% { opacity: .1; } 50% { opacity: 1; } }

/* The triptych, closed: the same sealed panel the wait's arches become on an iPhone that does not fold (showpiece.css),
   so the arches hand over to one image and not to a different one. A three just found stands exactly where the centre
   arch stood (--duo-seal-x/y/w/h, from showpiece.js through duo-triptych.js); otherwise where this sheet puts it.
   --duo-seal (0..1) parts the seam down the arch and lets the light behind it out: as the phone starts to open, or
   under a held finger. (Until 7 October 2026 this was three film cans whose lids lifted.) */
html.ds .duo-stage { --duo-seal-dw: min(calc(var(--duo-aw) * .5), calc((var(--duo-ah) - 150px) / 1.5), 240px); }
html.ds .duo-stage[data-duo-layout="single"] { --duo-seal-dw: min(calc(var(--duo-aw) * .46), calc((var(--duo-ah) - 76px) / 1.5), 220px); }
html.ds .duo-stage .duo-seal {
  position: absolute; left: var(--duo-seal-x, calc(var(--duo-ax) + (var(--duo-aw) - var(--duo-seal-dw)) / 2)); top: var(--duo-seal-y, calc(var(--duo-ay) + 76px + (var(--duo-ah) - 150px - var(--duo-seal-dw) * 1.5) / 2));
  width: var(--duo-seal-w, var(--duo-seal-dw)); height: var(--duo-seal-h, calc(var(--duo-seal-dw) * 1.5)); padding: 0; border: 0; background: none; color: inherit;
  pointer-events: auto; touch-action: none; border-radius: var(--r-row);
}
html.ds .duo-stage[data-duo-layout="single"] .duo-seal { top: var(--duo-seal-y, calc(var(--duo-ay) + 64px)); }
/* what it stands on */
html.ds .duo-stage .duo-seal::after {
  content: ""; position: absolute; left: -22%; right: -22%; top: calc(100% - 5px); height: 30%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 0, rgba(var(--duo-lamp), .14), rgba(var(--duo-violet), .16) 34%, transparent 100%);
}
/* Its light is the arch's, round and soft, never a box (LOOK, 9 October evening: the owner's "square boxes around the
   halos when a triptych is loading"). Once a drop-shadow glow on the whole picture, cut square to its layer on WebKit
   and box-shaped anywhere (it followed the panel's rectangle); the panel's slab is not drawn while it is sealed, as on
   the iPhone (showpiece.css). The light is one gradient that reaches nothing inside its own box. */
html.ds .duo-stage .duo-seal-art { display: block; width: 100%; height: 100%; overflow: visible; filter: none; }
html.ds .duo-stage .duo-seal :is(.duo-seal-slab, .duo-seal-top) { display: none; }
html.ds .duo-stage .duo-seal { isolation: isolate; }
html.ds .duo-stage .duo-seal::before {
  content: ""; position: absolute; z-index: -1; left: -34%; right: -34%; top: -10%; bottom: -16%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--duo-violet), .2), rgba(var(--duo-violet), .09) 48%, rgba(var(--duo-violet), .025) 76%, rgba(var(--duo-violet), 0) 100%);
}
html.ds .duo-stage .duo-seal-slab { stroke: rgba(var(--duo-lamp), .16); stroke-width: 1; }
html.ds .duo-stage .duo-seal-top { stroke: rgba(var(--duo-lamp), .3); stroke-width: 1; stroke-linecap: round; }
html.ds .duo-stage .duo-seal-rim { stroke: rgba(var(--duo-lamp), .32); stroke-width: 1; }
/* light at its foot, as the arches had */
html.ds .duo-stage .duo-seal-pool { opacity: calc(.78 + var(--duo-seal) * .22); }
/* the seam: a hairline of light, and the light behind it, which shows as the seam parts */
html.ds .duo-stage :is(.duo-seal-seam, .duo-seal-glow) { transform-box: fill-box; transform-origin: 50% 50%; transition: opacity 320ms ease, transform 420ms cubic-bezier(.2, .8, .2, 1); }
html.ds .duo-stage .duo-seal-seam { opacity: calc(.55 + var(--duo-seal) * .45); transform: scale3d(calc(1 + var(--duo-seal) * 5), 1, 1); }
html.ds .duo-stage .duo-seal-glow { opacity: calc(var(--duo-seal) * 1.1); transform: scale3d(calc(.14 + var(--duo-seal) * .9), 1, 1); }
/* a touch is answered with light: the seam flares for a moment */
html.ds .duo-stage.is-nudged .duo-seal-seam { opacity: 1; transform: scale3d(3, 1, 1); }
html.ds .duo-stage.is-nudged .duo-seal-glow { opacity: .5; transform: scale3d(.36, 1, 1); }
html.ds .duo-stage.is-holding :is(.duo-seal-seam, .duo-seal-glow),
html.ds .duo-stage[data-duo-still] :is(.duo-seal-seam, .duo-seal-glow) { transition: none; }
/* "Your three are inside": opened once, the triptych rests with its seam ajar */
html.ds .duo-stage .duo-sealed.is-open .duo-seal-seam { opacity: 1; transform: scale3d(calc(3 + var(--duo-seal) * 4), 1, 1); }
html.ds .duo-stage .duo-sealed.is-open .duo-seal-glow { opacity: calc(.42 + var(--duo-seal) * .6); transform: scale3d(calc(.3 + var(--duo-seal) * .8), 1, 1); }

html.ds .duo-stage .duo-words {
  position: absolute; left: var(--duo-bx); top: var(--duo-by); width: var(--duo-bw); height: var(--duo-bh);
  display: grid; align-content: center; justify-items: center; gap: 10px; padding: 0 20px; text-align: center;
}
html.ds .duo-stage[data-duo-layout="single"] .duo-words { align-content: end; padding-bottom: 28px; }
html.ds .duo-stage .duo-words-title { margin: 0; font: var(--fw-large-title) var(--fs-large-title)/var(--lh-large-title) var(--font-ui); letter-spacing: var(--tr-large-title); color: var(--c-lamp); }
html.ds .duo-stage .duo-words-sub { margin: 0; max-width: 30ch; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); }
html.ds .duo-stage .duo-here {
  position: absolute; left: calc(var(--duo-bx) + var(--duo-bw) / 2); top: calc(var(--duo-by) + var(--duo-bh) - 60px); translate: -50% 0; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pill);
  background: var(--c-fill-2); color: var(--c-label-1); font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui);
  pointer-events: auto; opacity: 0; clip-path: inset(50%);
}
html.ds .duo-stage .duo-here:focus-visible { opacity: 1; clip-path: none; }

/* ------------------------------------------------------------------ the three films, hinged on the phone's own spine */
html.ds .duo-stage .duo-pages { position: absolute; inset: 0; pointer-events: none; perspective: 1200px; }
html.ds .duo-stage .duo-page { position: absolute; }
html.ds .duo-stage .duo-page-swing { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity; }
/* The film's own colours on the leaf it has landed on: its poster, drawn a few dots across and shown large (soft
   light, with nothing blurred), over a wash of its one sampled colour. */
html.ds .duo-stage .duo-page-glow {
  position: absolute; inset: -20% -34% -10%; border-radius: 50%; opacity: 0; will-change: opacity; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--duo-tint, 139, 92, 246), .26), rgba(var(--duo-tint, 139, 92, 246), .08) 58%, transparent);
}
html.ds .duo-stage .duo-page-glow > canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 50%; opacity: .5;
  -webkit-mask: radial-gradient(closest-side, rgb(0, 0, 0) 0%, rgba(0, 0, 0, .5) 46%, transparent 100%); mask: radial-gradient(closest-side, rgb(0, 0, 0) 0%, rgba(0, 0, 0, .5) 46%, transparent 100%);
}
/* what it lies on: its reflection (a small soft copy of the poster, upside down, fading out) and the line of dark under it */
html.ds .duo-stage .duo-page-mirror {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); height: 22%; border-radius: var(--r-row) var(--r-row) 0 0; overflow: hidden; opacity: 0; will-change: opacity; pointer-events: none;
  -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .12) 42%, transparent 100%); mask: linear-gradient(to bottom, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .12) 42%, transparent 100%);
}
html.ds .duo-stage .duo-page-mirror > canvas { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% / .22); display: block; transform: scaleY(-1); }
html.ds .duo-stage .duo-page-contact { position: absolute; left: 3%; right: 3%; top: calc(100% - 3px); height: 9px; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 0, 0, .9), transparent); }
html.ds .duo-stage:not([data-duo-layout="book"]) :is(.duo-page-mirror, .duo-page-contact) { display: none; }
html.ds .duo-stage .duo-page-face {
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-row); background: var(--c-stage-raised);
  box-shadow: var(--e-2), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
html.ds .duo-stage .duo-page-face > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the edge of a panel: a hairline that catches the light */
html.ds .duo-stage .duo-page-edge { position: absolute; inset: 0; border-radius: var(--r-row); pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), inset 0 1px 0 0 rgba(255, 255, 255, .36); }
html.ds .duo-stage .duo-page-face > .ds-poster-fallback { position: absolute; inset: 0; }
html.ds .duo-stage .duo-page-shade { position: absolute; inset: 0; border-radius: var(--r-row); background: rgba(5, 5, 7, .96); opacity: 0; will-change: opacity; }
html.ds .duo-stage .duo-page-glint { position: absolute; inset: 0; border-radius: var(--r-row); background: linear-gradient(105deg, transparent 26%, rgba(255, 255, 255, .38) 46%, transparent 64%); opacity: 0; will-change: opacity; }
html.ds .duo-stage .duo-page-flash { position: absolute; inset: 0; border-radius: var(--r-row); box-shadow: 0 0 0 2px rgba(var(--duo-lamp), .85), 0 0 44px rgba(var(--duo-warm), .6); opacity: 0; }
html.ds .duo-stage .duo-page.is-chosen .duo-page-face { box-shadow: var(--e-2), 0 0 0 2px rgba(var(--duo-warm), .95); }
/* THE DOORS (held like a book; duo-triptych.js doorsDrawn(), Duo spreads 4-5 November 2026). Each panel is closed by its own arch,
   standing at the panel's own place and full size from the wait onward (the wait's three arches ARE these doors): a wing by
   one door hinged on its outer edge, the centre panel by two meeting on the phone's spine, the arch split down their
   seam. Opening the phone swings them out about those hinges, toward you; nothing moves but the doors. */
html.ds .duo-stage .duo-doors { display: none; }
html.ds .duo-stage[data-duo-altar] .duo-doors { display: block; position: absolute; inset: 0; pointer-events: none; perspective: 1100px; }
html.ds .duo-stage .duo-door { position: absolute; top: 0; bottom: 0; overflow: hidden; background: rgb(11, 11, 17); will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
html.ds .duo-stage .duo-door-whole { left: 0; right: 0; border-radius: var(--r-row); }
html.ds .duo-stage .duo-door-l { left: 0; right: 50%; border-radius: var(--r-row) 0 0 var(--r-row); transform-origin: 0 50%; }
html.ds .duo-stage .duo-door-r { left: 50%; right: 0; border-radius: 0 var(--r-row) var(--r-row) 0; transform-origin: 100% 50%; }
html.ds .duo-stage .duo-door-whole[data-hinge="left"] { transform-origin: 0 50%; }
html.ds .duo-stage .duo-door-whole[data-hinge="right"] { transform-origin: 100% 50%; }
html.ds .duo-stage .duo-door > svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
html.ds .duo-stage .duo-door-l > svg { width: 200%; }
html.ds .duo-stage .duo-door-r > svg { width: 200%; left: -100%; }
/* the light catching a door as it swings */
html.ds .duo-stage .duo-door-sheen { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
html.ds .duo-stage .duo-door[data-hinge="left"] > .duo-door-sheen { background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(255, 244, 226, .18) 70%, rgba(255, 244, 226, .34)); }
html.ds .duo-stage .duo-door[data-hinge="right"] > .duo-door-sheen { background: linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(255, 244, 226, .18) 70%, rgba(255, 244, 226, .34)); }
html.ds .duo-stage .duo-door::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(196, 170, 255, .2), inset 0 1px 0 rgba(255, 250, 240, .1); }
/* the sealed triptych is these doors: the small seal of the other layouts is not drawn held like a book; its button stays,
   over the centre panel, for the touch (and the press and hold) that opens it here */
html.ds .duo-stage[data-duo-altar] .duo-seal { left: var(--duo-pa-x) !important; top: var(--duo-pa-y) !important; width: var(--duo-pa-w) !important; height: var(--duo-pa-h) !important; opacity: 0; }
html.ds .duo-stage[data-duo-altar] .duo-seal > .duo-seal-art { visibility: hidden; }

/* ------------------------------------------------------------------ the two leaves: what is read and pressed.
   Every size is worked out from the leaf (never measured per frame); a poster's box is --duo-as (the film on the leaf of
   its own) or --duo-bs (each of the pair), its height, and two thirds of that across. */
html.ds .duo-stage .duo-leaf { position: absolute; display: grid; column-gap: 14px; row-gap: 12px; padding-top: 56px; }
html.ds .duo-stage .duo-leaf-a { left: var(--duo-ax); top: var(--duo-ay); width: var(--duo-aw); height: var(--duo-ah); }
html.ds .duo-stage .duo-leaf-b { left: var(--duo-bx); top: var(--duo-by); width: var(--duo-bw); height: var(--duo-bh); }
html.ds .duo-stage .duo-others,
html.ds .duo-stage .duo-other,
html.ds .duo-stage .duo-side { display: contents; }
html.ds .duo-stage .duo-slot-wrap { display: grid; place-items: end center; min-width: 0; min-height: 0; }
html.ds .duo-stage .duo-slot { display: block; padding: 0; border: 0; background: none; border-radius: var(--r-row); }
html.ds .duo-stage .duo-leaf-a .duo-slot { height: var(--duo-as); width: calc(var(--duo-as) * 2 / 3); }
html.ds .duo-stage .duo-leaf-b .duo-slot { height: var(--duo-bs); width: calc(var(--duo-bs) * 2 / 3); }
html.ds .duo-stage .duo-facts { min-width: 0; display: grid; gap: 4px; align-content: start; overflow: hidden; will-change: transform, opacity; }
html.ds .duo-stage .duo-title { margin: 2px 0 0; font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2); color: var(--c-label-1); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
html.ds .duo-stage .duo-meta { margin: 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-2); }
html.ds .duo-stage .duo-why { margin: 4px 0 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-3); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
html.ds .duo-stage .duo-act { display: grid; gap: 6px; min-height: 50px; align-content: end; will-change: transform, opacity; }
html.ds .duo-stage .duo-seat { display: grid; gap: 6px; }
html.ds .duo-stage .duo-seat-line { margin: 0; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: rgb(var(--duo-warm)); }
/* the instruction to close the phone carries the small closing-phone cue of "Close to find your three" (duo-ask.css): the
   same gold line, the right half folding over (still) */
html.ds .duo-stage .duo-seat-line { display: inline-flex; align-items: center; gap: 8px; }
html.ds .duo-stage .duo-seat-cue { display: none; flex: none; width: 22px; height: 15px; }
html.ds .duo-stage .duo-seat-line.is-close .duo-seat-cue { display: block; }
html.ds .duo-stage .duo-seat-cue > svg { display: block; width: 100%; height: 100%; overflow: visible; fill: rgba(240, 199, 134, .12); stroke: rgba(240, 199, 134, .92); stroke-width: 1.4; stroke-linejoin: round; }
html.ds .duo-stage .duo-seat-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

html.ds .duo-stage .duo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border: 0; border-radius: var(--r-pill);
  font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); text-decoration: none; white-space: nowrap;
}
html.ds .duo-stage .duo-btn-lamp { background: var(--c-lamp); color: var(--c-lamp-ink); }
html.ds .duo-stage .duo-btn-glass { background: var(--c-fill-2); color: var(--c-label-1); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
html.ds .duo-stage .duo-btn-quiet {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: none; color: var(--c-label-2);
  font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead);
}

html.ds .duo-stage .duo-cap { display: grid; gap: 2px; min-width: 0; align-content: start; justify-items: center; text-align: center; will-change: transform, opacity; }
html.ds .duo-stage .duo-cap > strong { max-width: 100%; font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ds .duo-stage .duo-cap > small { font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); color: var(--c-label-3); }
html.ds .duo-stage .duo-other.is-chosen .duo-eyebrow { color: rgb(var(--duo-warm)); }
html.ds .duo-stage .duo-rationale { min-width: 0; overflow: hidden; will-change: transform, opacity; }
html.ds .duo-stage .duo-rationale > p { margin: 4px 0 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
html.ds .duo-stage .duo-tools { display: flex; gap: 6px; will-change: transform, opacity; }
html.ds .duo-stage .duo-tool {
  display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 64px; min-height: 48px; padding: 4px 8px; border: 0; border-radius: var(--r-row);
  background: none; color: var(--c-label-2); font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui);
}
html.ds .duo-stage .duo-tool > svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html.ds .duo-stage .duo-tool[aria-pressed="true"] { color: var(--c-lamp); }
html.ds .duo-stage .duo-tool[aria-pressed="true"] > svg { fill: currentColor; }

/* book: a triptych across the fold (7 October 2026; hub/docs/SHOWPIECE-2026-10-07.md).
   Three panels standing on one line: a wing on each leaf and the centre panel, the film brought forward, lying across
   the spine it was hinged on. Each film still comes out of the fold: the left wing falls left, the right wing falls
   right, and the centre turns flat on the spine itself, last. Closing the phone folds the two wings over it.
   Nothing that is read or pressed is on the fold: the centre panel is a picture there, pressed on either side of it;
   its name is on the left leaf, hard against the fold, and its facts on the right; the one button is under the left
   leaf and the tools under the right. Every place is worked out from the two leaves (--duo-a*, --duo-b*) and the spine.
   (Before this the strongest match had one leaf to itself and the other two shared the facing leaf, at half its size.) */
html.ds .duo-stage[data-duo-layout="book"] {
  --duo-half: calc(var(--duo-bx) - var(--duo-spine));
  --duo-wcap: calc(22 * var(--type-unit));
  --duo-capt: calc(68 * var(--type-unit));
  --duo-floor: 22px;
  --duo-ch: min(calc(var(--duo-ah) - 56px - var(--duo-floor) - var(--duo-wcap) - 6px - var(--duo-capt) - 10px - 50px), calc(var(--duo-aw) * .92));
  --duo-cw: calc(var(--duo-ch) * 2 / 3);
  --duo-wh: calc(var(--duo-ch) * .88);
  --duo-ww: calc(var(--duo-wh) * 2 / 3);
  --duo-join: 16px;
  --duo-lwx: calc(var(--duo-spine) - var(--duo-cw) / 2 - var(--duo-join) - var(--duo-ww));
  --duo-rwx: calc(var(--duo-spine) + var(--duo-cw) / 2 + var(--duo-join));
  --duo-as: var(--duo-ch);
  --duo-bs: var(--duo-wh);
}
html.ds .duo-stage[data-duo-layout="book"] .duo-leaf { display: block; padding: 0; }
html.ds .duo-stage[data-duo-layout="book"] :is(.duo-slot-wrap, .duo-facts, .duo-act, .duo-cap, .duo-tools) { position: absolute; }
/* the centre panel: a picture across the spine, with a place to press on each side of it */
html.ds .duo-stage[data-duo-layout="book"] .duo-leaf-a > .duo-slot-wrap { display: block; left: calc(var(--duo-spine) - var(--duo-cw) / 2 - var(--duo-ax)); top: 56px; width: var(--duo-cw); height: var(--duo-ch); }
html.ds .duo-stage[data-duo-layout="book"] .duo-leaf-a .duo-slot { position: absolute; top: 0; left: 0; height: 100%; width: calc(var(--duo-cw) / 2 - var(--duo-half) - 1px); border-radius: var(--r-row) 0 0 var(--r-row); }
html.ds .duo-stage[data-duo-layout="book"] .duo-leaf-a .duo-slot.duo-slot-far { left: auto; right: 0; border-radius: 0 var(--r-row) var(--r-row) 0; }
html.ds .duo-stage:not([data-duo-layout="book"]) .duo-slot-far { display: none; }
/* its words: the name on the left leaf against the fold, the facts and the reason on the right */
html.ds .duo-stage[data-duo-layout="book"] .duo-leaf-a > .duo-facts {
  left: 0; top: calc(56px + var(--duo-ch) + var(--duo-floor) + var(--duo-wcap) + 6px); width: calc(var(--duo-bx) + var(--duo-bw) - var(--duo-ax)); height: var(--duo-capt);
  display: grid; grid-template-columns: calc(var(--duo-aw) - 6px) calc(var(--duo-half) * 2 + 12px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 2px 0; align-content: start; justify-items: stretch; text-align: left; overflow: visible;
}
/* the one mark of the strongest match: the plate an iPhone sets at the foot of its centre panel (showpiece.css). Here
   that foot is on the fold, so the plate stands beside the fold, over the film's name. */
html.ds .duo-stage[data-duo-layout="book"] .duo-a-eyebrow {
  grid-area: 1 / 1; justify-self: end; align-self: start; width: max-content; max-width: 100%; box-sizing: border-box; padding: calc(3 * var(--type-unit)) calc(10 * var(--type-unit)); border-radius: var(--r-pill);
  background: rgba(12, 12, 17, .82); color: var(--c-lamp); box-shadow: inset 0 0 0 1px rgba(var(--duo-lamp), .44);
  font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-eyebrow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.ds .duo-stage[data-duo-layout="book"] .duo-a-eyebrow:empty { display: none; }
html.ds .duo-stage[data-duo-layout="book"] .duo-title { grid-area: 2 / 1; margin: calc(4 * var(--type-unit)) 0 0; text-align: right; justify-self: end; max-width: 100%; }
html.ds .duo-stage[data-duo-layout="book"] .duo-meta { grid-area: 1 / 3; align-self: end; }
html.ds .duo-stage[data-duo-layout="book"] .duo-why { grid-area: 2 / 3; margin: 0; -webkit-line-clamp: 3; max-width: 44ch; color: var(--c-label-1); }
html.ds .duo-stage[data-duo-layout="book"] .duo-leaf-a > .duo-act { left: 0; bottom: 0; width: var(--duo-aw); height: 50px; justify-items: center; align-content: end; }
html.ds .duo-stage[data-duo-layout="book"] .duo-seat { position: relative; justify-items: center; }
html.ds .duo-stage[data-duo-layout="book"] .duo-seat-line { position: absolute; left: calc(50% + var(--duo-seat-dx, 0px)); bottom: calc(100% + 6px); translate: -50% 0; white-space: nowrap; }   /* in the line duo-triptych.js fitFacts reserves for it (--duo-seat-h; E1), centred on the fold (--duo-seat-dx) */
/* (pass 5) once the three stand at rest, the light at the spine stops at the foot of the centre panel: never drawn through
   the words under it (the reveal's own light is untouched) */
html.ds .duo-stage[data-duo-layout="book"]:is(.is-settled, .has-choice) .duo-seam { height: calc(56px + var(--duo-ch)); }
html.ds .duo-stage[data-duo-layout="stack"]:is(.is-settled, .has-choice) .duo-seam { opacity: 0 !important; }
/* the chosen film's line of light at the spine (the stub) stands beside the centre panel only: it ends at the panel's foot,
   above its name, so no words ever have it drawn through them */
html.ds .duo-stage[data-duo-layout="book"] .duo-stub { top: 48px; bottom: auto; height: calc(var(--duo-ch) + 16px); }
html.ds .duo-stage[data-duo-layout="book"].is-front-chosen .duo-a-eyebrow { color: rgb(var(--duo-warm)); box-shadow: inset 0 0 0 1px rgba(var(--duo-warm), .5); }
html.ds .duo-stage[data-duo-layout="book"] .duo-choose { min-width: 240px; }
/* the wings: the film that lands first on the left leaf, the next on the right */
html.ds .duo-stage[data-duo-layout="book"] .duo-other > .duo-slot-wrap { display: block; top: calc(56px + var(--duo-ch) - var(--duo-wh)); width: var(--duo-ww); height: var(--duo-wh); }
html.ds .duo-stage[data-duo-layout="book"] .duo-other > .duo-slot-wrap > .duo-slot { width: 100%; height: 100%; }
html.ds .duo-stage[data-duo-layout="book"] .duo-other[data-slot="b2"] > .duo-slot-wrap { left: calc(var(--duo-lwx) - var(--duo-bx)); }
html.ds .duo-stage[data-duo-layout="book"] .duo-other[data-slot="b1"] > .duo-slot-wrap { left: calc(var(--duo-rwx) - var(--duo-bx)); }
html.ds .duo-stage[data-duo-layout="book"] .duo-other > .duo-cap { top: calc(56px + var(--duo-ch) + var(--duo-floor)); width: calc(var(--duo-ww) + 28px); height: var(--duo-wcap); overflow: hidden; }
html.ds .duo-stage[data-duo-layout="book"] .duo-cap > small { display: none; }
html.ds .duo-stage[data-duo-layout="book"] .duo-cap > strong { color: var(--c-label-2); }
html.ds .duo-stage[data-duo-layout="book"] .duo-other[data-slot="b2"] > .duo-cap { left: calc(var(--duo-lwx) - var(--duo-bx) - 14px); }
html.ds .duo-stage[data-duo-layout="book"] .duo-other[data-slot="b1"] > .duo-cap { left: calc(var(--duo-rwx) - var(--duo-bx) - 14px); }
html.ds .duo-stage[data-duo-layout="book"] .duo-cap > .duo-eyebrow { display: none; }
html.ds .duo-stage[data-duo-layout="book"] .duo-other.is-chosen .duo-cap > .duo-eyebrow { display: block; }
html.ds .duo-stage[data-duo-layout="book"] .duo-rationale { display: none; }
html.ds .duo-stage[data-duo-layout="book"] .duo-tools { left: 0; bottom: 0; width: var(--duo-bw); height: 50px; justify-content: center; align-items: end; }

/* single (and, as a base, stack): a film and its facts side by side above, the other two and what goes with them below */
html.ds .duo-stage[data-duo-layout="single"] {
  --duo-as: min(calc(var(--duo-ah) - 56px), calc(var(--duo-aw) * .63));
  --duo-bs: min(calc(var(--duo-bh) - 72px - 64 * var(--type-unit)), calc(var(--duo-bw) * .4));
}
html.ds .duo-stage:is([data-duo-layout="stack"], [data-duo-layout="single"]) .duo-leaf-a { grid-template: "slot facts" minmax(0, 1fr) "slot act" auto / auto minmax(0, 1fr); column-gap: 16px; }
html.ds .duo-stage:is([data-duo-layout="stack"], [data-duo-layout="single"]) .duo-leaf-a > .duo-slot-wrap { grid-area: slot; place-items: start; }
html.ds .duo-stage:is([data-duo-layout="stack"], [data-duo-layout="single"]) .duo-leaf-a > .duo-facts { grid-area: facts; padding-top: 4px; }
html.ds .duo-stage:is([data-duo-layout="stack"], [data-duo-layout="single"]) .duo-leaf-a > .duo-act { grid-area: act; justify-items: start; }
html.ds .duo-stage:is([data-duo-layout="stack"], [data-duo-layout="single"]) .duo-title { -webkit-line-clamp: 3; }
html.ds .duo-stage:is([data-duo-layout="stack"], [data-duo-layout="single"]) .duo-leaf-b { grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto calc(64 * var(--type-unit)) minmax(0, 1fr); padding-top: 0; row-gap: 8px; }
html.ds .duo-stage:is([data-duo-layout="stack"], [data-duo-layout="single"]) .duo-other[data-slot="b1"] > .duo-slot-wrap { grid-area: 1 / 1; }
html.ds .duo-stage:is([data-duo-layout="stack"], [data-duo-layout="single"]) .duo-other[data-slot="b2"] > .duo-slot-wrap { grid-area: 1 / 2; }
html.ds .duo-stage:is([data-duo-layout="stack"], [data-duo-layout="single"]) .duo-other[data-slot="b1"] > .duo-cap { grid-area: 2 / 1; width: calc(var(--duo-bs) * 2 / 3); }
html.ds .duo-stage:is([data-duo-layout="stack"], [data-duo-layout="single"]) .duo-other[data-slot="b2"] > .duo-cap { grid-area: 2 / 2; width: calc(var(--duo-bs) * 2 / 3); }
html.ds .duo-stage:is([data-duo-layout="stack"], [data-duo-layout="single"]) .duo-rationale { grid-area: 1 / 3 / 3 / 4; align-self: start; padding-top: 4px; }
html.ds .duo-stage:is([data-duo-layout="stack"], [data-duo-layout="single"]) .duo-rationale > p { -webkit-line-clamp: 5; }
html.ds .duo-stage:is([data-duo-layout="stack"], [data-duo-layout="single"]) .duo-tools { grid-area: 3 / 1 / 4 / 4; align-self: end; justify-content: flex-start; }
html.ds .duo-stage[data-duo-layout="single"] .duo-btn { padding: 0 16px; }
html.ds .duo-stage[data-duo-layout="single"] .duo-tools { gap: 0; }
html.ds .duo-stage[data-duo-layout="single"] .duo-tool { min-width: 50px; padding: 4px 2px; }

/* stack: the fold lies across. The leaf that stands is a screen (--duo-s*); the leaf that lies flat is for hands. */
html.ds .duo-stage .duo-screen { display: none; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-screen { display: block; position: absolute; left: var(--duo-sx); top: var(--duo-sy); width: var(--duo-sw); height: var(--duo-sh); overflow: hidden; opacity: 0; will-change: opacity; }
html.ds .duo-stage[data-duo-layout="stack"][data-duo-view="ticket"] .duo-screen { opacity: 1 !important; }
html.ds .duo-stage .duo-screen-pic { position: absolute; inset: 0; -webkit-mask: linear-gradient(to bottom, rgb(0, 0, 0) 0, rgb(0, 0, 0) 80%, transparent); mask: linear-gradient(to bottom, rgb(0, 0, 0) 0, rgb(0, 0, 0) 80%, transparent); }
html.ds .duo-stage .duo-screen-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5, 5, 7, .5), transparent 20%, transparent 66%, rgba(5, 5, 7, .6)); }
html.ds .duo-stage .duo-screen-back { position: absolute; left: -8%; top: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(30px) saturate(1.25) brightness(.5); }
html.ds .duo-stage .duo-screen-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
html.ds .duo-stage .duo-screen-still.is-poster { object-fit: contain; padding: 22px 0 34px; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .6)); }
html.ds .duo-stage .duo-screen-lamp { position: absolute; inset: 0; opacity: 0; background: radial-gradient(90% 100% at 50% 100%, rgba(var(--duo-lamp), .85), rgba(var(--duo-warm), .3) 46%, transparent 78%); }
html.ds .duo-stage .duo-screen-host { display: none; position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: min(100%, calc(var(--duo-sw) * 9 / 16)); aspect-ratio: 16 / 9; background: rgb(0, 0, 0); box-shadow: var(--e-3); }
html.ds .duo-stage.is-playing .duo-screen-host { display: block; }
html.ds .duo-stage.is-playing .duo-screen-still { opacity: 0; }
html.ds .duo-stage .duo-screen-host > iframe { display: block; width: 100%; height: 100%; border: 0; }
html.ds .duo-stage .duo-trailer { display: none; }
html.ds .duo-stage .duo-trailer > svg { width: 18px; height: 18px; fill: currentColor; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-trailer { display: inline-flex; order: 2; }
html.ds .duo-stage .duo-trailer.is-on { background: var(--c-lamp); color: var(--c-lamp-ink); }
html.ds .duo-stage[data-duo-layout="stack"] {
  --duo-as: min(calc(var(--duo-ah) - 56px - 96px), calc(var(--duo-aw) * .68));
  --duo-bs: min(calc(var(--duo-bh) - 56px - 62px - 16px - 58 * var(--type-unit)), calc((var(--duo-bw) - 10px) * .75));
}
html.ds .duo-stage[data-duo-layout="stack"] .duo-leaf-a { grid-template: "slot facts" minmax(0, 1fr) "act act" auto / auto minmax(0, 1fr); }
html.ds .duo-stage[data-duo-layout="stack"] .duo-leaf-a > .duo-act { grid-area: act; display: flex; flex-wrap: wrap; align-items: center; align-content: end; gap: 6px 8px; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-seat,
html.ds .duo-stage[data-duo-layout="stack"] .duo-seat-acts { display: contents; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-seat-line { flex: 1 0 100%; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-seat .duo-btn-quiet { order: 3; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-btn { padding: 0 16px; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-leaf-b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); padding-top: 56px; column-gap: 10px; row-gap: 8px; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-other[data-slot="b1"] > .duo-cap,
html.ds .duo-stage[data-duo-layout="stack"] .duo-other[data-slot="b2"] > .duo-cap { width: auto; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-cap > strong { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-cap > small { display: none; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-rationale { display: none; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-tools { grid-area: 3 / 1 / 4 / 3; align-self: end; justify-content: space-between; gap: 0; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-tool { min-width: 50px; padding: 4px 2px; }
/* (sealed while standing: the triptych is pressed and held, so it is on the leaf that lies flat, and the screen is dark) */
html.ds .duo-stage[data-duo-layout="stack"] { --duo-seal-dw: min(calc(var(--duo-aw) * .4), calc((var(--duo-ah) - 76px) / 1.5), 200px); }
html.ds .duo-stage[data-duo-layout="stack"] .duo-seal { top: var(--duo-seal-y, calc(var(--duo-ay) + 62px)); }
html.ds .duo-stage[data-duo-layout="stack"] .duo-words { align-content: center; padding: 56px 0 0; justify-items: start; text-align: left; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-words-title { font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); }

/* once a film is chosen the spine shows a line of light again, as the closed phone did: folding here does something */
html.ds .duo-stage .duo-stub {
  position: absolute; top: 9%; bottom: 9%; right: calc(var(--duo-ax) + var(--duo-aw) - var(--duo-spine) - 1px); width: 2px; border-radius: var(--r-pill); opacity: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(var(--duo-lamp), .95) 18%, rgba(var(--duo-lamp), .95) 82%, transparent);
  box-shadow: 0 0 16px 1px rgba(var(--duo-warm), .7), 0 0 60px 8px rgba(var(--duo-warm), .22);
}
html.ds .duo-stage[data-duo-layout="stack"] .duo-stub {
  top: calc(var(--duo-spine) - var(--duo-ay) - 1px); bottom: auto; right: auto; left: 4%; width: calc((var(--duo-bx) + var(--duo-bw) - var(--duo-ax)) * .92); height: 2px;
  background: linear-gradient(to right, transparent, rgba(var(--duo-lamp), .95) 18%, rgba(var(--duo-lamp), .95) 82%, transparent);
}
html.ds .duo-stage.is-settled .duo-stub.is-in { opacity: 1; }
html.ds .duo-stage[data-duo-layout="single"] .duo-stub { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.ds .duo-stage.is-settled:not([data-duo-still]) .duo-stub.is-in { animation: duo-stub 2.6s ease-in-out infinite; }
}
@keyframes duo-stub { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }

/* ------------------------------------------------------------------ the bar: the way out, the request, sound */
html.ds .duo-stage .duo-round {
  position: absolute; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--c-line-strong); background: var(--c-fill-1); color: var(--c-label-1);
}
html.ds .duo-stage .duo-round svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.ds .duo-stage .duo-back { left: var(--duo-ax); top: var(--duo-ay); }
html.ds .duo-stage .duo-sound { left: calc(var(--duo-ax) + var(--duo-aw) - 44px); top: var(--duo-ay); }
html.ds .duo-stage .duo-request { position: absolute; left: calc(var(--duo-ax) + 56px); top: var(--duo-ay); width: calc(var(--duo-aw) - 112px); height: 44px; display: grid; align-content: center; gap: 1px; min-width: 0; }
html.ds .duo-stage .duo-request > p { margin: 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ds .duo-stage:is([data-duo-layout="book"], [data-duo-layout="stack"]) .duo-sound { left: calc(var(--duo-bx) + var(--duo-bw) - 44px); top: var(--duo-by); }
html.ds .duo-stage[data-duo-layout="stack"] .duo-request { width: calc(var(--duo-bx) + var(--duo-bw) - var(--duo-ax) - 112px); }
html.ds .duo-stage[data-duo-layout="book"] .duo-request { left: var(--duo-bx); top: var(--duo-by); width: calc(var(--duo-bw) - 56px); }

/* ------------------------------------------------------------------ tonight's ticket */
html.ds .duo-stage .duo-ticket-view { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 12px; padding: calc(var(--duo-ay) + 56px) 20px 20px; }
html.ds .duo-stage .duo-ticket-poster { display: none; }
html.ds .duo-stage .duo-ticket {
  position: relative; width: min(100%, 404px); border-radius: var(--r-card); border: 1px solid var(--c-line-strong);
  background: linear-gradient(160deg, rgba(var(--duo-tint, var(--duo-warm)), .26), rgba(var(--duo-tint, var(--duo-warm)), .05) 56%, transparent), var(--c-stage-raised);
  box-shadow: var(--e-3); will-change: transform;
}
html.ds .duo-stage .duo-tk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 0; }
html.ds .duo-stage .duo-tk-head > .duo-eyebrow { color: rgb(var(--duo-warm)); }
html.ds .duo-stage .duo-tk-date { font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-label-2); }
html.ds .duo-stage .duo-tk-body { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px 16px 16px; }
html.ds .duo-stage .duo-tk-tail { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 14px; }
html.ds .duo-stage .duo-tk-brand { display: inline-flex; align-items: center; gap: 8px; font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-eyebrow); color: var(--c-label-3); }
html.ds .duo-stage .duo-tk-brand > img.brand-mark { width: 16px; height: 18px; opacity: .8; }
html.ds .duo-stage .duo-tk-brand > img.wordmark { width: auto; height: 9px; opacity: .8; }
html.ds .duo-stage .duo-tk-code { width: 112px; height: 18px; opacity: .5; background: repeating-linear-gradient(to right, var(--c-label-1) 0 2px, transparent 2px 3px, var(--c-label-1) 3px 4px, transparent 4px 7px, var(--c-label-1) 7px 10px, transparent 10px 12px); }
html.ds .duo-stage .duo-tk-thumb { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--r-control); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
html.ds .duo-stage .duo-tk-thumb > img,
html.ds .duo-stage .duo-ticket-poster > img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.ds .duo-stage .duo-tk-thumb > .ds-poster-fallback,
html.ds .duo-stage .duo-ticket-poster > .ds-poster-fallback { position: absolute; inset: 0; }
html.ds .duo-stage .duo-tk-text { display: grid; align-content: center; gap: 4px; min-width: 0; }
html.ds .duo-stage .duo-tk-kind { color: rgb(var(--duo-warm)); }
html.ds .duo-stage .duo-tk-title { margin: 0; font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
html.ds .duo-stage .duo-tk-meta { margin: 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds .duo-stage .duo-tk-ends { margin: 2px 0 0; font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1); }
html.ds .duo-stage .duo-tk-foot { position: relative; display: grid; gap: 10px; padding: 16px 16px 14px; border-top: 2px dashed var(--c-line-strong); }
/* the perforation: a half circle bitten out of each side */
html.ds .duo-stage .duo-tk-foot::before,
html.ds .duo-stage .duo-tk-foot::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--c-stage); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
html.ds .duo-stage .duo-tk-foot::before { left: -12px; clip-path: inset(0 0 0 50%); }
html.ds .duo-stage .duo-tk-foot::after { right: -12px; clip-path: inset(0 50% 0 0); }
html.ds .duo-stage .duo-tk-watch { display: flex; flex-wrap: wrap; gap: 8px; }
html.ds .duo-stage .duo-tk-watch:empty { display: none; }
html.ds .duo-stage .duo-tk-service { flex: 1 1 auto; gap: 8px; }
html.ds .duo-stage .duo-tk-service > small { font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); opacity: .7; }
html.ds .duo-stage .duo-tk-note { margin: 0; font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); color: var(--c-label-3); }
html.ds .duo-stage .duo-tk-acts { display: flex; gap: 8px; }
html.ds .duo-stage .duo-tk-acts > .duo-btn { flex: 1 1 0; min-width: 0; }
html.ds .duo-stage .duo-ticket-quiet { display: flex; gap: 4px; }
/* inside, the film stands on one leaf and its ticket on the other */
html.ds .duo-stage[data-duo-layout="book"] .duo-ticket-view { display: block; padding: 0; }
html.ds .duo-stage[data-duo-layout="book"] .duo-ticket-poster {
  display: block; position: absolute; overflow: hidden; border-radius: var(--r-row); box-shadow: var(--e-2), inset 0 0 0 1px rgba(255, 255, 255, .1);
  height: calc(var(--duo-ah) - 80px); aspect-ratio: 2 / 3; left: calc(var(--duo-ax) + var(--duo-aw) / 2); top: calc(var(--duo-ay) + 60px); translate: -50% 0;
}
html.ds .duo-stage[data-duo-layout="book"] .duo-ticket { position: absolute; left: calc(var(--duo-bx) + var(--duo-bw) / 2); top: calc(var(--duo-by) + var(--duo-bh) / 2 - 12px); translate: -50% -50%; width: min(var(--duo-bw), 404px); }
html.ds .duo-stage[data-duo-layout="book"] .duo-ticket-quiet { position: absolute; left: var(--duo-bx); width: var(--duo-bw); bottom: calc(100% - var(--duo-by) - var(--duo-bh)); justify-content: center; }
/* standing on a table: the film on the screen, and its ticket lying in front of it, torn down the middle */
html.ds .duo-stage[data-duo-layout="stack"] .duo-ticket-view { display: block; padding: 0; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-ticket {
  position: absolute; left: var(--duo-ax); top: calc(var(--duo-ay) + 56px); width: calc(var(--duo-bx) + var(--duo-bw) - var(--duo-ax));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
}
html.ds .duo-stage[data-duo-layout="stack"] .duo-tk-head { grid-area: 1 / 1; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-tk-body { grid-area: 2 / 1; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-tk-tail { grid-area: 3 / 1; }
html.ds .duo-stage[data-duo-layout="stack"] .duo-tk-foot { grid-area: 1 / 2 / 4 / 3; align-content: center; border-top: 0; border-left: 2px dashed var(--c-line-strong); }
html.ds .duo-stage[data-duo-layout="stack"] .duo-tk-foot::before { left: -12px; top: -12px; clip-path: inset(50% 0 0 0); }
html.ds .duo-stage[data-duo-layout="stack"] .duo-tk-foot::after { left: -12px; right: auto; top: auto; bottom: -12px; clip-path: inset(0 0 50% 0); }
html.ds .duo-stage[data-duo-layout="stack"] .duo-ticket-quiet { position: absolute; left: var(--duo-ax); width: calc(var(--duo-bx) + var(--duo-bw) - var(--duo-ax)); bottom: calc(100% - var(--duo-ay) - var(--duo-ah)); justify-content: center; }

/* ------------------------------------------------------------------ stopped part-way, and what VoiceOver hears
   Stopped part-way through opening, nothing is printed (it used to say "Open flat to reveal. Or press and hold."): after
   a moment the light at the fold begins to breathe. There is more to come, and that is where it comes from. */
@media (prefers-reduced-motion: no-preference) {
  html.ds .duo-stage.is-waiting:not([data-duo-still]) .duo-ground { animation: duo-waiting 2.8s ease-in-out infinite; }
}
@keyframes duo-waiting { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
html.ds .duo-stage .duo-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* a finger drawn sideways turns the open triptych (duo-triptych.js bindSwipe, 8 October 2026): held like a book, the
   page itself never scrolls, so the finger's sideways travel is the triptych's and nothing else's (only once the three
   stand open: before that the stage is left as it was) */
html.ds .duo-stage[data-duo-layout="book"][data-duo-phase="revealed"].is-settled, html.ds .duo-stage[data-duo-layout="book"][data-duo-phase="revealed"].is-settled button { touch-action: none; }

/* the strongest of the three, wherever it stands: the purple label (8 October 2026; showpiece.css .sp-strongest) */
/* (on a wing it sits on the film's own foot, as on an iPhone: drawn with the film, so it turns with it) */
html.ds .duo-stage .duo-page-mark { display: none; }
html.ds .duo-stage[data-duo-layout="book"] .duo-page.is-strongest .duo-page-mark {
  display: block; position: absolute; left: 50%; bottom: 0; translate: -50% 50%; z-index: 2; width: max-content; max-width: 120%; box-sizing: border-box;
  padding: calc(3 * var(--type-unit)) calc(10 * var(--type-unit)); border-radius: var(--r-pill); text-align: center;
  font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-eyebrow);
  color: var(--c-label-1); background: linear-gradient(120deg, rgba(91, 70, 199, .95), rgba(166, 58, 186, .93));
  box-shadow: inset 0 0 0 1px rgba(255, 201, 255, .4), 0 0 18px rgba(196, 67, 205, .28);
}
html.ds .duo-stage[data-duo-layout="book"] .duo-a-eyebrow.is-strongest {
  color: var(--c-label-1); background: linear-gradient(120deg, rgba(91, 70, 199, .95), rgba(166, 58, 186, .93));
  box-shadow: inset 0 0 0 1px rgba(255, 201, 255, .4), 0 0 18px rgba(196, 67, 205, .28);
}
/* (R2-B, 22 October 2026) the poster light drawn once (poster-light.js dress): the live blur is no longer needed */
html.ds .duo-stage .duo-screen-back.pl-lit { filter: none; }

/* THE WAIT, held like a book (duo-triptych.js mountWait): the search is running and the triptych already stands, closed, at
   its full size: three arches, lit one by one as the wait's own arches are on an iPhone (data-duo-beat, from showpiece.js).
   The request is across the top of the spread; the wait's line under the centre panel. Nothing else of the leaves shows. */
html.ds .duo-stage[data-duo-view="wait"] :is(.duo-leaf, .duo-sealed, .duo-tools, .duo-page-mirror, .duo-page-contact, .duo-page-glow) { visibility: hidden; }
html.ds .duo-stage[data-duo-view="wait"] .duo-page-swing { opacity: 0 !important; }
html.ds .duo-stage .duo-door::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgb(6, 6, 10); opacity: 0; transition: opacity var(--motion-slow) var(--motion-curve); }
html.ds .duo-stage[data-duo-view="wait"] .duo-door::before { opacity: .62; }
html.ds .duo-stage[data-duo-view="wait"][data-duo-beat="1"] .duo-page[data-slot="b2"] .duo-door::before,
html.ds .duo-stage[data-duo-view="wait"][data-duo-beat="2"] .duo-page:is([data-slot="b2"], [data-slot="b1"]) .duo-door::before,
html.ds .duo-stage[data-duo-view="wait"][data-duo-beat="3"] .duo-door::before { opacity: 0; }
html.ds .duo-stage .duo-wait-line {
  position: absolute; left: calc(var(--duo-spine) - 220px); width: 440px; top: calc(var(--duo-pa-y) + var(--duo-pa-h) + 22px); margin: 0; text-align: center;
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2);
}
html.ds .duo-stage:not([data-duo-view="wait"]) .duo-wait-line { display: none; }

/* THE OPEN SPREAD AS ONE WIDE SCREEN (held like a book; owner, 5 November 2026: "imagine it as one screen; it doesn't matter
   if text goes across the hinge" when that keeps related things together). The request is centred across the top of the
   spread; under the centre film, stacked and centred on it: its match badge, its name (and its year, length and
   certificate), the reason, then "Choose this film" and Share / Save / Swap / Refine side by side. The two films on the
   wings keep their names under their own posters. The panels make room for that stack (--duo-stack). */
html.ds .duo-stage[data-duo-layout="book"] {
  --duo-stack: calc(22 * var(--type-unit) + 30 * var(--type-unit) + 18 * var(--type-unit) + 54 * var(--type-unit) + 50px + 26px);
  --duo-ch: min(calc(var(--duo-ah) - 56px - var(--duo-floor) - var(--duo-stack)), calc(var(--duo-aw) * .92));
}
html.ds .duo-stage[data-duo-layout="book"] .duo-request {
  left: calc(var(--duo-spine) - var(--duo-reqw) / 2); top: var(--duo-ay); width: var(--duo-reqw); --duo-reqw: min(560px, calc(100vw - 2 * var(--duo-ax) - 120px));
  text-align: center; justify-items: center;
}
html.ds .duo-stage[data-duo-layout="book"] .duo-request > p { max-width: 100%; }
html.ds .duo-stage[data-duo-layout="book"] .duo-leaf-a > .duo-facts {
  --duo-fw: calc(var(--duo-cw) + 2 * var(--duo-join) + 40px);
  left: calc(var(--duo-spine) - var(--duo-fw) / 2 - var(--duo-ax)); width: var(--duo-fw);
  top: calc(56px + var(--duo-ch) + var(--duo-floor) - 4px); height: auto; max-height: calc(var(--duo-stack) - 50px - 16px);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; justify-items: center; text-align: center; gap: 3px; overflow: hidden;
}
html.ds .duo-stage[data-duo-layout="book"] .duo-a-eyebrow { grid-area: auto; justify-self: center; }
html.ds .duo-stage[data-duo-layout="book"] .duo-title { grid-area: auto; justify-self: center; text-align: center; margin: 2px 0 0; -webkit-line-clamp: 1; }
html.ds .duo-stage[data-duo-layout="book"] .duo-meta { grid-area: auto; align-self: auto; }
html.ds .duo-stage[data-duo-layout="book"] .duo-why { grid-area: auto; margin: 3px 0 0; max-width: 40ch; -webkit-line-clamp: 3; text-wrap: balance; }
/* the one row of what to do with it: Choose on the left of the spine, the four tools on the right, meeting at it */
html.ds .duo-stage[data-duo-layout="book"] .duo-leaf-a > .duo-act { left: auto; right: calc(var(--duo-ax) + var(--duo-aw) - var(--duo-spine) + var(--duo-half) + 8px); top: var(--duo-act-y, auto); bottom: auto; width: auto; height: 50px; justify-items: end; }
html.ds .duo-stage[data-duo-layout="book"] .duo-tools { left: calc(var(--duo-spine) - var(--duo-bx) + var(--duo-half) + 8px); top: var(--duo-act-y, auto); bottom: auto; width: auto; height: 50px; justify-content: flex-start; }
/* the sealed triptych's words, under the centre panel and centred across the spine */
html.ds .duo-stage[data-duo-altar] .duo-words { left: calc(var(--duo-spine) - 260px); width: 520px; top: calc(var(--duo-pa-y) + var(--duo-pa-h) + 18px); height: auto; align-content: start; padding: 0; }
html.ds .duo-stage[data-duo-altar] .duo-words-title { font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); }

/* the phone layout's own arches are never shown under the open spread: from the wait's first frame the triptych stands here */
html.ds #device .trip-critical-layer[data-sp-fold="book"]:not([data-mode="friday"]) :is(.critical-card, .sp-door) { visibility: hidden; }

/* ------------------------------------------------------------------ the unfurl (duo-triptych.js buildUnfurl; 10 November 2026)
   Held like a book and opened from shut: the centre panel is the closed arch (its own two doors, born from the light at the
   spine), the wings come out from behind its edges, the doors part last. The wings carry no doors of their own here. The
   request stands larger over the three while they arrive (one element, scaled on the compositor), and settles into the
   header with the three. */
html.ds .duo-stage[data-duo-unfurl] .duo-page[data-slot="a"] .duo-doors { display: block; position: absolute; inset: 0; pointer-events: none; perspective: 1100px; will-change: transform, opacity; }
html.ds .duo-stage[data-duo-unfurl] .duo-page:not([data-slot="a"]) .duo-doors { display: none; }
html.ds .duo-stage[data-duo-layout="book"] .duo-request { transform-origin: 50% 0; transition: transform 760ms var(--motion-spring, cubic-bezier(.2, .8, .2, 1)); }
html.ds .duo-stage[data-duo-layout="book"][data-duo-unfurl] .duo-request { transform: translate3d(0, 6px, 0) scale(1.3); }
html.ds .duo-stage[data-duo-layout="book"][data-duo-still] .duo-request { transition: none; }


/* (13 November 2026, coverage audit item 8: words on the hinge) HELD LIKE A BOOK the three still stand across the spine (the
   centre panel over the fold is the design), but the chosen film's words no longer do: its plate, name, facts and reason are
   set on the right-hand page, from just past the fold, under the right wing, left-aligned; the row of what to do keeps Choose
   on the left page and the tools on the right, meeting at the fold (unchanged), and a chosen film's line ("Close the phone to
   take your seat") stands over its own button on the left page instead of across the fold. The request over the three (the
   altar's heading, which unfurls) is unchanged. */
html.ds .duo-stage[data-duo-layout="book"] .duo-leaf-a > .duo-facts {
  --duo-fw: min(400px, calc(var(--duo-bw) - 24px));
  left: calc(var(--duo-bx) + 8px - var(--duo-ax)); width: var(--duo-fw);
  top: calc(56px + var(--duo-ch) + var(--duo-floor) + var(--duo-wcap) + 2px);    /* under the right wing's own name */
  justify-items: start; text-align: left;
}
html.ds .duo-stage[data-duo-layout="book"] .duo-a-eyebrow { justify-self: start; }
html.ds .duo-stage[data-duo-layout="book"] .duo-title { justify-self: start; text-align: left; }
html.ds .duo-stage[data-duo-layout="book"] .duo-why { text-wrap: pretty; }
/* (and it ends where its own two buttons end, short of the fold: centred over them it reached the hinge) */
html.ds .duo-stage[data-duo-layout="book"] .duo-seat-line { left: auto; right: 0; translate: none; }

/* ===== prototype-src/duo-ask.css ===== */
/* TRIPTIC on iPhone Duo: "Close to find your three" and the wait on the cover (prototype-src/duo-ask.js). Record:
   hub/PROJECT-STATUS.md, 10 November 2026.

   Nothing here applies on an ordinary iPhone: every rule hangs from .duo-ask (the cover's wait) or .duo-sign (the opened
   phone's sign), elements the script adds only while the device environment reports a fold and a search is running.

   The cover's own composition (466 x 678 in the simulator; every place comes from the script as custom properties worked
   out from the display's size): the centre arch, the two wings tucked behind it, the person's words beneath. The light is
   opacity and transform only, changed by what really happens (data-light): sent, then the answer read out arch by arch,
   then sealing. Nothing loops. */
html.ds .duo-ask {
  --da-lamp: 243, 238, 230;
  --da-warm: 240, 199, 134;
  --da-beam: 104, 201, 255;
  --da-violet: 139, 92, 246;
  /* over the sealed triptych while it is being handed the cover (duo-triptych.css .duo-stage is 60) */
  position: fixed; inset: 0; z-index: 61; overflow: hidden; box-sizing: border-box;
  background:
    radial-gradient(80% 50% at 50% 34%, rgba(var(--da-violet), .14), transparent 72%),
    radial-gradient(70% 22% at 50% var(--da-floor, 60%), rgba(var(--da-warm), .07), transparent 70%),
    var(--c-stage);
  color: var(--c-label-1); font-family: var(--font-ui);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
  contain: layout paint style;
}
html.ds .duo-ask[hidden], html.ds .duo-ask [hidden] { display: none !important; }
html.ds .duo-ask *, html.ds .duo-ask *::before, html.ds .duo-ask *::after { box-sizing: border-box; }
html.ds .duo-ask :focus-visible { outline: 2px solid rgba(var(--da-beam), .9); outline-offset: 3px; }
html.ds .duo-ask .duo-ask-field { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55)); }

/* ---------------------------------------------------------------- the projector's beam: down onto the arches once the
   request is on its way (one change of light, then still) */
html.ds .duo-ask .duo-ask-beam {
  position: absolute; left: 50%; top: 0; width: calc(var(--da-cw) * 2.2); height: calc(var(--da-floor) + 20px); translate: -50% 0; pointer-events: none;
  background: radial-gradient(46% 100% at 50% 0, rgba(var(--da-lamp), .10), rgba(var(--da-warm), .07) 45%, transparent 78%);
  opacity: 0; transition: opacity var(--motion-ceremony) var(--motion-curve); will-change: opacity;
}
html.ds .duo-ask:is([data-light="sent"], [data-light^="found"]) .duo-ask-beam { opacity: 1; }

/* ---------------------------------------------------------------- the arches (the cover's wait, and the same drawing under the
   opened phone's sign, so that closing the phone continues one picture) */
html.ds :is(.duo-ask, .duo-sign) .duo-ask-arches { position: absolute; inset: 0; pointer-events: none; }
html.ds :is(.duo-ask, .duo-sign) .duo-ask-arch { position: absolute; display: block; will-change: transform, opacity; }
html.ds :is(.duo-ask, .duo-sign) .duo-ask-arch > svg { display: block; width: 100%; height: 100%; overflow: visible; }
html.ds :is(.duo-ask, .duo-sign) .duo-ask-centre { left: var(--da-cx); top: var(--da-cy); width: var(--da-cw); height: var(--da-ch); }
html.ds :is(.duo-ask, .duo-sign) .duo-ask-wing { top: var(--da-wy); width: var(--da-ww); height: var(--da-wh); }
html.ds :is(.duo-ask, .duo-sign) .duo-ask-wing[data-side="left"] { left: var(--da-wl); }
html.ds :is(.duo-ask, .duo-sign) .duo-ask-wing[data-side="right"] { left: var(--da-wr); }
/* the wings stand a little back from the centre: darker, as the iPhone's wait's wings do */
html.ds :is(.duo-ask, .duo-sign) .duo-ask-wing > svg { filter: brightness(.82); }
/* the floor they stand on: a line of warm light that grows as they fill */
html.ds :is(.duo-ask, .duo-sign) .duo-ask-floor {
  position: absolute; left: 6%; right: 6%; top: calc(var(--da-floor) - 6px); height: 18px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--da-warm), .5), rgba(var(--da-warm), .12) 60%, transparent);
  opacity: .25; transition: opacity var(--motion-ceremony) var(--motion-curve); will-change: opacity;
}
html.ds :is(.duo-ask, .duo-sign)[data-light="sent"] .duo-ask-floor { opacity: .45; }
html.ds :is(.duo-ask, .duo-sign)[data-light^="found"] .duo-ask-floor { opacity: 1; }
html.ds :is(.duo-ask, .duo-sign) .da-rim { stroke: rgba(var(--da-lamp), .32); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* the light inside: a pool at the foot, the seam, and the gold that fills an arch from its floor when its film is found */
html.ds :is(.duo-ask, .duo-sign) :is(.da-seam, .da-pool, .da-fill) { transform-box: fill-box; transition: opacity var(--motion-slow) var(--motion-curve), transform var(--motion-ceremony) var(--motion-curve); }
html.ds :is(.duo-ask, .duo-sign) .da-seam { opacity: .2; }
html.ds :is(.duo-ask, .duo-sign) .da-pool { opacity: .4; }
html.ds :is(.duo-ask, .duo-sign) .da-fill { opacity: 0; transform-origin: 50% 100%; transform: scale3d(1, .02, 1); }
html.ds :is(.duo-ask, .duo-sign)[data-light="dark"] .duo-ask-centre .da-seam { opacity: .75; }
html.ds :is(.duo-ask, .duo-sign):is([data-light="sent"], [data-light^="found"]) .da-seam { opacity: .9; }
html.ds :is(.duo-ask, .duo-sign):is([data-light="sent"], [data-light^="found"]) .da-pool { opacity: .8; }
html.ds :is(.duo-ask, .duo-sign)[data-light="sent"] .da-fill { opacity: .55; transform: scale3d(1, .16, 1); }
html.ds :is(.duo-ask, .duo-sign)[data-light^="found"] .da-fill { opacity: .55; transform: scale3d(1, .16, 1); }
html.ds :is(.duo-ask, .duo-sign)[data-light="found-1"] .duo-ask-wing[data-side="left"] .da-fill,
html.ds :is(.duo-ask, .duo-sign)[data-light="found-2"] .duo-ask-wing .da-fill,
html.ds :is(.duo-ask, .duo-sign)[data-light="found-3"] .da-fill { opacity: 1; transform: scale3d(1, 1, 1); }
/* sealing: the centre's light gathers into its seam, as the sealed triptych holds it */
html.ds :is(.duo-ask, .duo-sign)[data-light="sealing"] .duo-ask-centre .da-fill { opacity: 0; transform: scale3d(.02, 1, 1); transform-origin: 50% 50%; transition: opacity var(--motion-slow) var(--motion-curve), transform var(--motion-slow) var(--motion-curve); }
html.ds :is(.duo-ask, .duo-sign)[data-light="sealing"] .duo-ask-centre .da-seam { opacity: .55; }   /* as the sealed triptych draws it (duo-triptych.css .duo-seal-seam at rest) */
html.ds :is(.duo-ask, .duo-sign)[data-light="sealing"] .duo-ask-centre .da-pool { opacity: .78; }
html.ds :is(.duo-ask, .duo-sign)[data-light="sealing"] .duo-ask-beam { opacity: 0; }
/* not three: the light goes out */
html.ds :is(.duo-ask, .duo-sign)[data-light="out"] .duo-ask-arch { opacity: .45; transition: opacity var(--motion-slow) var(--motion-curve); }
html.ds :is(.duo-ask, .duo-sign)[data-light="out"] :is(.da-seam, .da-fill) { opacity: 0; }
/* Reduce Motion: the light changes by opacity alone */
html.ds :is(.duo-ask, .duo-sign).is-still :is(.da-fill, .da-seam, .da-pool) { transform: none !important; }

/* ---------------------------------------------------------------- the words: the request, large, beneath its arches */
html.ds .duo-ask .duo-ask-words, html.ds .duo-ask .duo-ask-out {
  position: absolute; left: 24px; right: 24px; top: var(--da-text); display: grid; justify-items: center; gap: 8px; text-align: center;
}
html.ds .duo-ask .duo-ask-eyebrow {
  font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: rgba(var(--da-warm), .9);
}
html.ds .duo-ask .duo-ask-request {
  margin: 0; max-width: 24ch; font: 600 var(--fs-title-2)/var(--lh-title-2) var(--font-display, var(--font-ui)); letter-spacing: var(--tr-display, normal);
  color: var(--c-lamp); text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
html.ds .duo-ask .duo-ask-line { margin: 2px 0 0; min-height: var(--lh-footnote); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds .duo-ask .duo-ask-line:empty { visibility: hidden; }
html.ds .duo-ask:is([data-phase="abstained"], [data-phase="failed"]) .duo-ask-words { display: none; }
html.ds .duo-ask .duo-ask-out-title { margin: 0; font: 600 var(--fs-title-2)/var(--lh-title-2) var(--font-display, var(--font-ui)); letter-spacing: var(--tr-display, normal); color: var(--c-lamp); }
html.ds .duo-ask .duo-ask-out-sub { margin: 0 0 10px; max-width: 30ch; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }

/* ---------------------------------------------------------------- See why */
html.ds .duo-ask .duo-ask-btn {
  min-height: 44px; min-width: 132px; padding: 0 22px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08); color: var(--c-label-1); font: var(--fw-headline) var(--fs-body)/1 var(--font-ui);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html.ds .duo-ask .duo-ask-btn:active { transform: scale(.97); }
html.ds .duo-ask .duo-ask-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ================================================================ THE SIGN (the opened phone, after Find three)
   "Close to find your three", composed for the whole opened display beside the rail (owner, 11 November 2026: "make it
   look better"; the most beautiful screen in the app). Top to bottom, centred on the spine (--sg-x, from duo-ask.js):
   the lit MARQUEE (a bronze band of lamps round a plum glass panel, the words in the display face, lit); its warm light
   spilling down; the gesture (a gold-line drawing of the opened phone folding shut, and its arrow) with its one line
   ("Finding your three…", then "Sealed inside"); the three arches of the cover's wait, sealed and softly glowing; the
   request beneath them. "Or reveal them here" stands quietly at the right-hand page's foot. Nothing to press is on the fold.
   Motion: the lamps chase round once and rest lit; the phone folds twice and rests; nothing loops. Closing the phone moves
   the wings, the spill and the dusk by transform and opacity, from the hinge (duo-ask.js signHinge). */
html.ds .duo-sign {
  --sg-gold: 240, 199, 134;
  --sg-cream: 255, 244, 226;
  --sg-lamp: 243, 238, 230;
  --sg-plum: 46, 22, 56;
  --sg-violet: 139, 92, 246;
  position: fixed; inset: 0; z-index: 62; overflow: hidden; box-sizing: border-box;
  background: rgb(9, 6, 13);
  color: var(--c-label-1); font-family: var(--font-ui); text-align: center;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
  contain: layout paint style;
}
html.ds .duo-sign[hidden] { display: none !important; }
html.ds .duo-sign *, html.ds .duo-sign *::before, html.ds .duo-sign *::after { box-sizing: border-box; }
/* the ground: plum-black, a violet glow low behind the arches, the edges falling to night */
html.ds .duo-sign .duo-sign-ground {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 40% at var(--sg-x) 78%, rgba(var(--sg-violet), .20), transparent 72%),
    radial-gradient(70% 60% at var(--sg-x) 46%, rgba(var(--sg-plum), .85), transparent 78%),
    radial-gradient(130% 110% at var(--sg-x) 40%, transparent 52%, rgba(0, 0, 0, .7));
}
/* the closing phone's dusk: the edges darken toward the spine as the hinge closes (opacity from duo-ask.js) */
html.ds .duo-sign .duo-sign-dusk {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; will-change: opacity;
  background: radial-gradient(34% 80% at var(--sg-x) 50%, transparent 40%, rgba(4, 2, 7, .92));
}
/* ---------------------------------------------------------------- the marquee */
html.ds .duo-sign .duo-sign-marquee {
  position: absolute; left: calc(var(--sg-x) - var(--sg-mw) / 2); top: var(--sg-mt); width: var(--sg-mw); height: var(--sg-mh);
  border-radius: 22px; display: grid; place-items: center; padding: 22px 30px;
  /* the bronze band the lamps sit in */
  background: linear-gradient(180deg, rgb(92, 64, 34), rgb(58, 38, 22) 48%, rgb(78, 52, 28));
  box-shadow:
    inset 0 0 0 1px rgba(var(--sg-gold), .75), inset 0 1px 0 1px rgba(255, 236, 200, .25),
    0 18px 40px rgba(0, 0, 0, .55), 0 0 70px rgba(var(--sg-gold), .16);
}
/* its glass: a plum panel inside the band, a gold rule round it */
html.ds .duo-sign .duo-sign-marquee::before {
  content: ""; position: absolute; inset: 18px; border-radius: 10px; pointer-events: none;
  background:
    radial-gradient(90% 120% at 50% 0, rgba(var(--sg-gold), .16), transparent 62%),
    linear-gradient(180deg, rgb(40, 18, 46), rgb(22, 10, 28));
  box-shadow: inset 0 0 0 1.5px rgba(var(--sg-gold), .78), inset 0 0 0 4px rgba(20, 8, 24, .9), inset 0 0 0 5px rgba(var(--sg-gold), .3), inset 0 10px 30px rgba(0, 0, 0, .45);
}
html.ds .duo-sign .duo-sign-lamps { position: absolute; inset: 0; pointer-events: none; }
html.ds .duo-sign .duo-sign-lamp {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, rgb(255, 252, 244) 0 28%, rgb(255, 226, 168) 46%, rgba(var(--sg-gold), .9) 64%, rgba(var(--sg-gold), 0) 100%);
  box-shadow: 0 0 7px 2px rgba(255, 214, 150, .5);
  opacity: .92;
}
/* the chase: round the sign once as it comes up, each lamp brightening in turn, then all resting lit */
html.ds .duo-sign.is-lit .duo-sign-lamp {
  animation: duo-sign-lamp var(--motion-ceremony) var(--motion-curve) 1 both;
  animation-delay: calc(var(--i) * var(--motion-ceremony) / var(--sg-lamps, 60));
}
@keyframes duo-sign-lamp {
  0% { opacity: .28; transform: scale(.8); }
  22% { opacity: 1; transform: scale(1.55); }
  100% { opacity: .92; transform: scale(1); }
}
html.ds .duo-sign .duo-sign-title {
  position: relative; margin: 0; white-space: nowrap;
  font: 600 var(--sg-title, 50px)/1.05 var(--font-display, var(--font-ui)); letter-spacing: -.005em;
  color: rgb(255, 241, 214);
  text-shadow: 0 0 2px rgba(255, 236, 196, .9), 0 0 16px rgba(255, 196, 112, .55), 0 0 42px rgba(255, 170, 80, .3), 0 2px 0 rgba(40, 14, 8, .6);
}
/* the light the sign throws down onto the scene (narrowed toward the spine as the phone closes) */
html.ds .duo-sign .duo-sign-spill {
  position: absolute; left: var(--sg-x); top: calc(var(--sg-mt) + var(--sg-mh) - 18px); width: calc(var(--sg-mw) * 1.08); height: calc(var(--da-floor) - var(--sg-mt) - var(--sg-mh) + 60px);
  transform: translateX(-50%); transform-origin: 50% 0; pointer-events: none; will-change: transform;
  background:
    radial-gradient(50% 70% at 50% 0, rgba(255, 214, 150, .20), rgba(var(--sg-gold), .07) 52%, transparent 78%),
    radial-gradient(30% 100% at 50% 0, rgba(255, 230, 190, .07), transparent 80%);
}
/* ---------------------------------------------------------------- the gesture: the opened phone folding shut */
html.ds .duo-sign .duo-sign-cue { position: absolute; left: calc(var(--sg-x) - 62px); top: var(--sg-cue); width: 124px; height: 66px; pointer-events: none; }
html.ds .duo-sign .duo-sign-phone { position: absolute; left: 14px; top: 0; width: 96px; height: 66px; perspective: 320px; transform-style: preserve-3d; }
html.ds .duo-sign .duo-sign-leaf { position: absolute; top: 0; width: 46px; height: 66px; display: block; backface-visibility: visible; }
html.ds .duo-sign .duo-sign-leaf > svg { display: block; width: 100%; height: 100%; overflow: visible; }
html.ds .duo-sign .duo-sign-leaf-l { left: 0; }
html.ds .duo-sign .duo-sign-leaf-r { left: 50px; transform-origin: -2px 50%; transform: rotateY(-24deg); }
html.ds .duo-sign .duo-sign-hinge { position: absolute; left: 46.5px; top: 7px; width: 3px; height: 52px; border-radius: 2px; background: rgba(var(--sg-gold), .55); }
html.ds .duo-sign .duo-sign-arrow { position: absolute; left: 2px; top: -30px; width: 120px; height: 34px; overflow: visible; opacity: .9; }
html.ds .duo-sign.is-cueing .duo-sign-leaf-r { animation: duo-sign-fold var(--motion-ceremony) var(--motion-breathe) 2 both; animation-delay: var(--motion-slow); }
@keyframes duo-sign-fold {
  0%, 10% { transform: rotateY(-24deg); }
  48%, 64% { transform: rotateY(-174deg); }
  100% { transform: rotateY(-24deg); }
}
/* Reduce Motion: the phone drawn half closed, with its arrow */
html.ds .duo-sign.is-still .duo-sign-leaf-r { transform: rotateY(-118deg); }
html.ds .duo-sign .duo-sign-status {
  position: absolute; left: var(--sg-x); top: var(--sg-status); translate: -50% 0; margin: 0; white-space: nowrap;
  font: var(--fw-caption-1-strong, 600) var(--fs-caption-1, 12px)/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(var(--sg-gold), .9);
}
/* ---------------------------------------------------------------- the promise: the arches, sealed and softly glowing */
/* the halo: a warm light behind the three that rises when they are sealed */
html.ds .duo-sign .duo-sign-halo {
  position: absolute; left: calc(var(--sg-x) - var(--da-cw) * 2.1); top: calc(var(--da-cy) - 30px); width: calc(var(--da-cw) * 4.2); height: calc(var(--da-ch) + 70px);
  pointer-events: none; opacity: 0; transition: opacity var(--motion-ceremony) var(--motion-curve); will-change: opacity;
  background: radial-gradient(50% 50% at 50% 62%, rgba(255, 206, 140, .26), rgba(var(--sg-gold), .08) 55%, transparent 75%);
}
html.ds .duo-sign[data-light="sent"] .duo-sign-halo { opacity: .35; }
html.ds .duo-sign:is([data-light^="found"], [data-light="sealed"]) .duo-sign-halo { opacity: 1; }
html.ds .duo-sign .duo-ask-floor { left: calc(var(--sg-x) - var(--da-cw) * 2); right: auto; width: calc(var(--da-cw) * 4); }
html.ds .duo-sign .duo-ask-wing { will-change: transform; }
html.ds .duo-sign[data-light="sent"] .da-fill { opacity: .5; transform: scale3d(1, .2, 1); }
/* sealed: all three holding a low gold light, the seams bright, as the sealed triptych holds it */
html.ds .duo-sign[data-light="sealed"] .da-fill { opacity: .9; transform: scale3d(1, .58, 1); }
html.ds .duo-sign[data-light="sealed"] .da-seam { opacity: 1; }
html.ds .duo-sign[data-light="sealed"] .da-pool { opacity: .95; }
html.ds .duo-sign[data-light="sealed"] .duo-ask-floor { opacity: 1; }
html.ds .duo-sign[data-light="sealed"] .da-rim { stroke: rgba(var(--sg-gold), .7); }
html.ds .duo-sign .duo-sign-request {
  position: absolute; left: var(--sg-x); top: var(--sg-request); translate: -50% 0; margin: 0;
  width: min(560px, calc(100% - 80px));
  font: 500 italic calc(22 * var(--type-unit, 1px))/1.3 var(--font-display, var(--font-ui)); color: rgba(var(--sg-cream), .88);
  text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* ---------------------------------------------------------------- the quiet way: reveal them here, at the right page's foot */
html.ds .duo-sign .duo-sign-here {
  position: absolute; right: 28px; bottom: 22px;
  min-height: 44px; padding: 0 18px; border-radius: var(--r-pill);
  border: 1px solid rgba(var(--sg-gold), .22); background: rgba(255, 255, 255, .03); color: rgba(var(--sg-cream), .72);
  font: var(--fw-footnote, 500) var(--fs-footnote, 13px)/1 var(--font-ui); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.ds .duo-sign .duo-sign-here:active { transform: scale(.97); }
html.ds .duo-sign .duo-sign-here:focus-visible { outline: 2px solid rgba(var(--sg-gold), .9); outline-offset: 3px; }
html.ds .duo-sign .duo-sign-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.ds .duo-sign.is-still .duo-sign-lamp { animation-name: none; }

/* ===== prototype-src/duo-depth.css ===== */
/* TRIPTIC on iPhone Duo: the triptych's three films in depth (5 November 2026). Script: duo-depth.js (a use of living-depth.js:
   --ld-x / --ld-y / --ld-sheen / --ld-r, -1..1, on .duo-pages, only while it is on screen and may move: .ld-live). Friday 3's
   treatment (friday-depth.css) on the Duo's panels: each face turns a little about its own centre and the strongest match
   (slot a) stands nearer as it tilts; a sheen crosses the three as one sheet of light; a gloss on each edge. Only once the
   three are revealed and lying open. The hinge's own turn is the swing's `transform` and is never touched: everything here is
   the face's individual `rotate` / `translate`, or an opacity. The artwork is never recoloured, blurred or scaled.
   html.ld-static (Reduce Motion, Low Power): no variables are written; every face exactly as it was (an identity transform). */

html.ds .duo-stage:is([data-duo-phase="revealed"], [data-duo-phase="ticket"])[data-duo-view="three"] > .duo-pages.ld-on .duo-page-swing { perspective: 900px; }
html.ds .duo-stage:is([data-duo-phase="revealed"], [data-duo-phase="ticket"])[data-duo-view="three"] > .duo-pages.ld-on .duo-page-face {
  translate: calc(var(--ld-x, 0) * 2.4px) calc(var(--ld-y, 0) * 1.8px) 0;
  backface-visibility: hidden;
}
html.ds .duo-stage:is([data-duo-phase="revealed"], [data-duo-phase="ticket"])[data-duo-view="three"] > .duo-pages.ld-on .duo-page[data-slot="a"] .duo-page-face {
  /* the strongest match stands nearer as it tilts; at rest exactly where and as it was (a constant z would magnify it) */
  translate: calc(var(--ld-x, 0) * 4px) calc(var(--ld-y, 0) * 3px) calc(var(--ld-r, 0) * 8px);
}
html.ds .duo-stage:is([data-duo-phase="revealed"], [data-duo-phase="ticket"])[data-duo-view="three"] > .duo-pages.ld-live .duo-page-face {
  rotate: calc(var(--ld-y, 0) * -1) calc(var(--ld-x, 0) + .0001) 0 calc(var(--ld-r, 0) * 7deg); will-change: transform;
}

/* the sheen: a band of light across the faces; it stays put as they turn, so it crosses the three as one sheet (--dd-i) */
html.ds .duo-stage > .duo-pages .dd-sheen, html.ds .duo-stage > .duo-pages .dd-gloss { display: none; }
html.ds .duo-stage:is([data-duo-phase="revealed"], [data-duo-phase="ticket"])[data-duo-view="three"] > .duo-pages.ld-on .dd-sheen {
  display: block; position: absolute; left: -70%; top: -20%; width: 240%; height: 140%; pointer-events: none;
  background: linear-gradient(112deg, transparent 34%, rgb(255 255 255 / .05) 41%, rgb(255 255 255 / .3) 47%, rgb(255 246 230 / .09) 52%, transparent 60%);
  translate: calc(var(--ld-sheen, 0) * -24% + var(--dd-i, 0) * -8% - 3%) calc(var(--ld-y, 0) * -8%);
  opacity: calc(.55 + var(--ld-r, 0) * .45);
}
html.ds .duo-stage > .duo-pages.ld-live .dd-sheen { will-change: transform, opacity; }
/* the gloss: the face's edge catching the light */
html.ds .duo-stage:is([data-duo-phase="revealed"], [data-duo-phase="ticket"])[data-duo-view="three"] > .duo-pages.ld-on .dd-gloss {
  display: block; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgb(255 255 255 / .14), rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0) 72%, rgb(222 200 255 / .08));
  opacity: calc(.75 + var(--ld-sheen, 0) * .25);
}
html.ds .duo-stage > .duo-pages.ld-lite .dd-sheen { display: none !important; }
@media (forced-colors: active) { html.ds .duo-stage > .duo-pages :is(.dd-sheen, .dd-gloss) { display: none !important; } }

/* ===== prototype-src/duo-book.css ===== */
/* TRIPTIC on iPhone Duo, inner display held like a book (prototype-src/duo-book.js). Record: hub/docs/DUO-BOOK-2026-10-16.md.

   Every rule hangs from html[data-duo-book], an attribute the script sets only on the inner display, held flat or like a
   book (890 x 626 wide, its fold vertical). The cover display, an iPhone, an iPad and a desktop browser never meet one.

   The script's numbers (CSS px from the window's left edge; the window is the whole page here, no phone column):
     --dbk-fx / --dbk-fw     the fold's left edge and its width
     --dbk-lw                the left leaf's width      --dbk-rx / --dbk-rw   the right leaf's left edge and width
     --dbk-gut               a leaf's own margin: at the window's edges and each side of the fold
   and the ones worked out here from them:
     --dbk-cw                the width of a column of reading inside a leaf (a leaf less its margins)
     --dbk-lx / --dbk-rcx    where the left leaf's column starts (the gutter) and where the right leaf's does

   1. The canvas and the chrome   2. Two leaves, one rule   3. Discover   4. Today   5. You
   6. The film page               7. Collections, Library and the pages of cards
   8. The Cinematic Universe and the overlays

   Tokens only (colours, radii, type from design-tokens.css); no transition: all; nothing here moves.
   !important only where an earlier layer's rule is itself !important. */

/* ================================================================== 1. the canvas and the chrome */
html[data-duo-book] {
  --wide-touch-column: 100vw;                          /* the window is the app: no column down the middle of the fold */
  --dbk-cw: calc(var(--dbk-lw) - 2 * var(--dbk-gut));
  --dbk-lx: var(--dbk-gut);
  --dbk-rcx: calc(var(--dbk-rx) + var(--dbk-gut));
}
/* The tab bar stands on the left leaf, at its foot: five tabs, nothing pressed on the fold. */
html.ds[data-duo-book] #device { --dock-inset: var(--dbk-gut); }
html.ds[data-duo-book] #device > .persistent-glass-nav {
  left: var(--dbk-gut) !important;
  right: auto !important;
  width: var(--dbk-cw) !important;
  max-width: var(--dbk-cw) !important;
}
/* the page's name, when a page has scrolled its own away: a capsule on the left leaf, not across the fold */
html.ds[data-duo-book] #device > .ds-tsx-bar {
  right: calc(var(--dbk-rw) + var(--dbk-fw));
  max-width: calc(var(--dbk-lw) - 2 * var(--dbk-gut));
}
/* the dark bands under the dock and over the top run the width of the window; the dock's own band stays on its leaf */
html.ds[data-duo-book] #device > :is(.ds-edge-fade, .ds-tsx-bottom) { right: var(--dbk-rw); left: 0; width: auto; }

/* ================================================================== 2. two leaves, one rule
   duo-book.js marks a page .dbk-two (data-dbk-aside="start" | "end": the leaf its standing part is on), its header rows
   .dbk-head, ONE section .dbk-aside and every other section that is in the flow .dbk-main. The header rows stand on the
   left leaf; the aside stands in its own leaf from the first row under the header (--dbk-aside-y, measured); every
   .dbk-main section runs down the other leaf in order. A section another lane adds later is in the main leaf at the leaf's
   width: nothing new ever crosses the fold, and nothing about the page's own flow (its order, its scroll) changes.
   The aside is out of the flow (absolute in the page, which is its own scroller), so neither leaf can space out the other;
   the page still scrolls to the end of whichever leaf is longer (data-dbk-end, below: the room under a longer aside). */
html.ds[data-duo-book] #device > .screen.dbk-two {
  padding-left: 0 !important;
  padding-right: 0 !important;
  scroll-padding-top: 64px;                            /* nothing a focus or a scroll brings to the top lies under the page's name */
}
/* the header rows (the brand, the page's title, its buttons) stand on the left leaf, a leaf wide: a centred title or a button
   at the row's end never lands on the fold (the page's name capsule and the tab bar are on the left leaf too) */
html.ds[data-duo-book] #device > .screen:is(.dbk-two, .dbk-split) > .dbk-head {
  margin-left: var(--dbk-lx) !important;
  margin-right: 0 !important;
  width: var(--dbk-cw) !important; max-width: var(--dbk-cw) !important; box-sizing: border-box;
}
html.ds[data-duo-book] #device > .screen.dbk-two[data-dbk-aside="end"] > .dbk-main {
  margin-left: var(--dbk-lx) !important; margin-right: 0 !important;
  width: var(--dbk-cw) !important; max-width: var(--dbk-cw) !important; box-sizing: border-box;
}
html.ds[data-duo-book] #device > .screen.dbk-two[data-dbk-aside="start"] > .dbk-main {
  margin-left: var(--dbk-rcx) !important; margin-right: 0 !important;
  width: var(--dbk-cw) !important; max-width: var(--dbk-cw) !important; box-sizing: border-box;
}
html.ds[data-duo-book] #device > .screen.dbk-two > .dbk-aside {
  position: absolute !important;
  top: var(--dbk-aside-y, auto) !important;
  width: var(--dbk-cw) !important; max-width: none !important;
  margin: 0 0 96px !important;
  box-sizing: border-box;
}
/* where the aside is the longer leaf, duo-book.js gives the page the room under it that the page keeps for the tab bar */
html.ds[data-duo-book] #device > .screen.dbk-two[data-dbk-end] { padding-bottom: var(--dbk-end) !important; }
html.ds[data-duo-book] #device > .screen.dbk-two[data-dbk-aside="end"] > .dbk-aside { left: var(--dbk-rcx) !important; right: auto !important; }
html.ds[data-duo-book] #device > .screen.dbk-two[data-dbk-aside="start"] > .dbk-aside { left: var(--dbk-lx) !important; right: auto !important; }
/* ... and a page of sections only (Settings, Account, Privacy; duo-book.js balances them): each section in the left leaf or the
   right, the first of the right leaf drawn up beside the first of the left (--dbk-pull) */
html.ds[data-duo-book] #device > .screen.dbk-split { padding-left: 0 !important; padding-right: 0 !important; scroll-padding-top: 64px; }
html.ds[data-duo-book] #device > .screen.dbk-split > .dbk-head :is(h1, .ds-tsx-title) { text-align: left; }
html.ds[data-duo-book] #device > .screen.dbk-split > .dbk-l {
  margin-left: var(--dbk-lx) !important; margin-right: 0 !important;
  width: var(--dbk-cw) !important; max-width: var(--dbk-cw) !important; box-sizing: border-box;
}
html.ds[data-duo-book] #device > .screen.dbk-split > .dbk-r {
  margin-left: var(--dbk-rcx) !important; margin-right: 0 !important;
  width: var(--dbk-cw) !important; max-width: var(--dbk-cw) !important; box-sizing: border-box;
}
html.ds[data-duo-book] #device > .screen.dbk-split > .dbk-pull { margin-top: var(--dbk-pull) !important; }

/* a shelf that runs to the page's edge on a phone keeps to its leaf: the leaf's width is the shelf's */
html.ds[data-duo-book] #device > .screen.dbk-two :is(.ds-carousel, .dslc-track:not(.is-compact), .dslc-watched-row) {
  margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; scroll-padding-inline: 0 !important;
}

/* ================================================================== 3. Discover
   Left leaf: the request (its heading, the field, Find three, the services row, your searches). Right leaf: what to ask for,
   as a grid of cards, all of them in sight at once. The brand and the two small buttons run across the top. */
html.ds[data-duo-book] #device > .discover-screen.dbk-two > .discover-inspiration { margin-top: 0 !important; }
html.ds[data-duo-book] #device > .discover-screen.dbk-two > .discover-inspiration .ds-carousel {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
  margin: 0 !important; padding: 0 !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}
html.ds[data-duo-book] #device > .discover-screen.dbk-two > .discover-inspiration .ds-carousel > * {
  width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important;
}

/* ================================================================== 6. the film page
   The poster stands on the left leaf the whole height of the display, still while you read; the film's room (why it
   matched, where to watch, the trailer, the synopsis, the cast) scrolls on the right leaf. The poster is never stretched:
   it covers its leaf, faded toward the fold, and nothing is read or pressed on the crease. */
html.ds[data-duo-book] #device .film-v5.recon-film {
  display: grid !important;
  grid-template-columns: var(--dbk-rx) minmax(0, 1fr);
  align-items: start;
  padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important;
}
html.ds[data-duo-book] #device .film-v5.recon-film > * { grid-column: 2; min-width: 0; }
html.ds[data-duo-book] #device .film-v5.recon-film > .global-trio-atmosphere { grid-column: 1 / -1; grid-row: 1; }
html.ds[data-duo-book] #device .film-v5.recon-film > .film-hero {
  --film-hero-height: var(--dv-h, 100vh);
  grid-column: 1; grid-row: 1 / span 40;
  position: sticky !important; top: 0;
  width: var(--dbk-rx) !important; max-width: none !important;
  translate: none !important; scale: none !important;
  --dbk-poster-fade: linear-gradient(90deg, black 0, black 78%, rgb(0 0 0 / .55) 91%, transparent 100%);
}
html.ds[data-duo-book] #device .film-v5.recon-film > .film-hero[style*="--poster"]::before {
  -webkit-mask: var(--dbk-poster-fade); mask: var(--dbk-poster-fade);
  background-position: 50% 20%;
}
html.ds[data-duo-book] #device .film-v5.recon-film > .film-content {
  grid-row: 1;
  margin-top: 0 !important;
  /* (11 November 2026) the page's Back and Share stand on the poster's leaf, so the room starts near the top of its own leaf:
     no band of nothing over the actions */
  padding: calc(var(--safe-top, 0px) + 28px) var(--dbk-gut) 96px !important;
  max-width: none !important;
  box-sizing: border-box;
}
html.ds[data-duo-book] #device .film-v5.recon-film .film-title { padding: 96px var(--dbk-gut) 28px !important; margin-top: 0 !important; transform: none !important; }
html.ds[data-duo-book] #device .film-v5.recon-film .film-topbar { left: var(--dbk-gut) !important; right: var(--dbk-gut) !important; }
html.ds[data-duo-book] #device .film-v5.recon-film > .film-compact-header { grid-column: 2; }

/* ================================================================== 7. Collections, Library and the pages of cards
   (Duo spreads, 4 November 2026) laid out as spreads by duo-spread-browse.css: the door across both pages, the frontispiece and
   the list; a Collection's frontispiece and its films; the Library as an album. */

/* ================================================================== 8. the Cinematic Universe and the overlays
   Flick's welcome card: low on the right leaf, under the films (duo-triptych.js lifts the films clear of it while it is up),
   never over one. The tour's cards stand on the right leaf too, centred in it. */
html.ds[data-duo-book] .fto { padding-left: var(--dbk-rcx); padding-right: var(--dbk-gut); }
html.ds[data-duo-book] .fto-offer { align-items: flex-end; padding-bottom: 12px; }
html.ds[data-duo-book] .fto-offer .fto-card { width: min(100%, var(--dbk-cw)); gap: 6px; padding: 10px 12px 8px; }
html.ds[data-duo-book] .fto-offer .fto-row { gap: 10px; }
html.ds[data-duo-book] .fto-offer .fto-row .sps-art { width: 40px; }
html.ds[data-duo-book] .fto-offer .fto-bubble { gap: 3px; padding: 6px 10px 7px; }
html.ds[data-duo-book] .fto-offer .fto-say { font-size: 12px; line-height: 16px; }
html.ds[data-duo-book] .fto-offer .fto-go { min-height: 44px; padding: 0 18px; }
html.ds[data-duo-book] .fto-tour .fto-card { width: min(100%, var(--dbk-cw)); }

/* the page's name capsule: the band behind it is opaque where it stands, so a row never half shows beside or under it */
html.ds[data-duo-book] #device > .ds-tsx-top > .ds-tsx-dim {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--c-stage) 96%, transparent) 0,
    color-mix(in srgb, var(--c-stage) 96%, transparent) calc(var(--safe-top, 0px) + 50px),
    color-mix(in srgb, var(--c-stage) 40%, transparent) calc(var(--safe-top, 0px) + 62px),
    transparent 100%);
}

/* ================================================================== 9. pushed pages: a Collection, The Ten, and the quiet single-column pages */
/* The Ten: the stage stays whole (a picture), its words and the open button stay on the left leaf, and the ten rows run
   down the right leaf, where the fold crosses nothing. */
/* (11 November 2026) the picture is the left leaf, the whole height (ds-the-ten.js layout(): --tt-hero-h is the display's
   height, --tt-list-top where the first row starts on the right leaf); the title, the words and the buttons on it */
html.ds[data-duo-book] .ds-tt-screen .ds-tt-hero { right: calc(var(--dbk-rw) + var(--dbk-fw)); }
html.ds[data-duo-book] .ds-tt-screen .ds-tt-list { padding-left: var(--dbk-rx); padding-right: var(--dbk-gut); }
/* the rows that have passed the focus line go out over the right leaf's head (on the phone the picture covers them).
   (12 November 2026, the owner's frame: rank 2 stood cut and ghosted at the top edge) the row just above the focus stands whole,
   its card 12pt under the top (ds-the-ten.js LIST_TOP_BOOK); only what is further up is taken by the top 12pt */
html.ds[data-duo-book] .ds-tt-screen .ds-tt-scroll {
  -webkit-mask: linear-gradient(180deg, transparent 0, transparent 5px, rgb(0 0 0) 12px);
  mask: linear-gradient(180deg, transparent 0, transparent 5px, rgb(0 0 0) 12px);
}
/* the numeral, the title and the two buttons keep the leaf's own margins (the book's gutter), each side and at its foot */
html.ds[data-duo-book] .ds-tt-screen .ds-tt-hero:not(.is-expanded) > .ds-tt-foot-hero { padding: 0 var(--dbk-gut) var(--dbk-gut); }
/* the footnotes and Flick's tip at the list's foot stand on the right leaf with the rows, never under the picture */
html.ds[data-duo-book] .ds-tt-screen .ds-tt-scroll > :is(.ds-tt-foot, .sps-tip) { margin-left: var(--dbk-rx) !important; margin-right: var(--dbk-gut) !important; width: auto !important; max-width: none !important; }
html.ds[data-duo-book] .ds-tt-screen .ds-tt-lamp { left: calc(var(--dbk-rx) + 12px); right: calc(var(--dbk-gut) + 12px); }

/* An empty or a signed-out page, one centred column: centred on the left leaf, not on the fold. */
html.ds[data-duo-book] #device > :is(.tm-signin, .sublist-screen:has(> .library-empty)) {
  padding-right: calc(var(--dbk-rw) + var(--dbk-fw)) !important;
}

/* ================================================================== 9. the gutter (lane H, 20 October 2026)
   An open book has a gutter: the paper darkens a little as it curves into the spine. The inner display gets the same, a
   still shade a few points either side of the fold, so every page reads as two facing pages of one book. Nothing is
   pressed or read there (rule 2), so nothing is shaded that matters; it never moves, never takes a touch, and steps aside
   while the triptych stands open (duo-triptych.css draws its own spine of light) and under Reduce Transparency. */
html[data-duo-book]::after {
  content: ""; position: fixed; top: 0; bottom: 0; z-index: 2147480000; pointer-events: none;
  left: calc(var(--dbk-fx) - 30px); width: calc(var(--dbk-fw) + 60px);
  background: linear-gradient(90deg, rgb(0 0 0 / 0), rgb(0 0 0 / .16) 38%, rgb(0 0 0 / .26) 50%, rgb(0 0 0 / .16) 62%, rgb(0 0 0 / 0));
}
html[data-duo-book]:has(#device.critical-journey-active, #device .duo-stage:not([hidden]), #device.manual-solid)::after { display: none; }
@media (prefers-reduced-transparency: reduce) { html[data-duo-book]::after { display: none; } }

/* ================================================================== 10. Welcome (lane H, 20 October 2026)
   The first page anyone sees was one phone page stretched over the fold: the heading and Get started ran across the hinge.
   Now it is a book's opening spread: the wall of posters is the left leaf, the mark, the words and Get started stand on
   the right leaf, centred on it. */
html.ds[data-duo-book] #device > .welcome-screen.ds-fr-welcome > :is(.ds-fr-wallclip, .poster-wall-shade) {
  right: calc(var(--dbk-rw) + var(--dbk-fw)) !important; width: auto !important;
}
html.ds[data-duo-book] #device > .welcome-screen.ds-fr-welcome > :is(.welcome-brand, .ds-fr-foot) {
  left: var(--dbk-rx) !important; right: 0 !important; width: auto !important;
}
html.ds[data-duo-book] #device > .welcome-screen.ds-fr-welcome > :is(.welcome-message, .welcome-actions) {
  left: var(--dbk-rcx) !important; right: var(--dbk-gut) !important; width: auto !important;
}

/* ================================================================== 11. the rating deck (lane H, 20 October 2026)
   The swipe deck (swipe-deck.js) drew its card 186 x 279 across the fold with everything stacked in a phone column. As a
   book: the question, the count and the answer buttons on the left leaf; the film's card, at full size, alone on the right
   leaf, where the thumb throws it. */
html.ds[data-duo-book] #device > .first-run-screen.ds-fr-taste.sw-deck:has(> .taste-deck) {
  display: grid !important;
  grid-template-columns: var(--dbk-lw) var(--dbk-fw) var(--dbk-rw);
  grid-template-rows: auto 1fr auto auto auto 1fr;
  padding: max(12px, env(safe-area-inset-top, 0px)) 0 max(18px, env(safe-area-inset-bottom, 0px)) !important;
}
html.ds[data-duo-book] #device > .first-run-screen.ds-fr-taste.sw-deck:has(> .taste-deck) > :is(header, .onboarding-copy, .ds-fr-actions, .taste-more) {
  grid-column: 1; margin-left: var(--dbk-gut) !important; margin-right: var(--dbk-gut) !important; width: auto !important; min-width: 0;
}
html.ds[data-duo-book] #device > .first-run-screen.ds-fr-taste.sw-deck:has(> .taste-deck) > header { grid-row: 1; }
html.ds[data-duo-book] #device > .first-run-screen.ds-fr-taste.sw-deck:has(> .taste-deck) > .onboarding-copy { grid-row: 3; margin-bottom: 24px !important; }
html.ds[data-duo-book] #device > .first-run-screen.ds-fr-taste.sw-deck:has(> .taste-deck) > .ds-fr-actions { grid-row: 4; }
html.ds[data-duo-book] #device > .first-run-screen.ds-fr-taste.sw-deck:has(> .taste-deck) > .taste-more { grid-row: 5; margin-top: 12px !important; }
html.ds[data-duo-book] #device > .first-run-screen.ds-fr-taste.sw-deck:has(> .taste-deck) > .taste-deck {
  grid-column: 3; grid-row: 1 / -1; margin: 8px var(--dbk-gut) !important; width: auto !important;
}

/* ================================================================== 9. (13 November 2026, coverage audit item 9) one page used, the other empty
   Find a film, no match: the list's page keeps the field and the search; Flick's "no film by that name" stands on the other
   page, where a film's preview would be (the aside is empty while nothing matches). The empty state is already split. */
html.ds[data-duo-book] #device .ff-screen.is-split.is-folded .ff-none:not([hidden]) {
  position: absolute; left: calc(100% + var(--dbk-fw, 8px)); top: 0; bottom: 0; width: calc(100vw - 100% - var(--dbk-fw, 8px)); box-sizing: border-box;
  margin: 0; padding: 32px; align-content: center;
}
/* TRIPTIC+ (the code, the plans further down): the velvet rope and the card stay on the left page while the right page
   scrolls, instead of scrolling away and leaving that page bare but for the page's name. In the flow at no height, so the
   right page's sections keep their places. */
html.ds[data-duo-book] #device > .tm-membership.dbk-two > .tm-hero.dbk-aside {
  position: sticky !important; top: var(--dbk-aside-y, 86px) !important; height: 0 !important; overflow: visible !important;
  margin: 14px 0 0 var(--dbk-lx) !important; z-index: 1;
}

/* ===== prototype-src/duo-spreads.css ===== */
/* TRIPTIC on iPhone Duo: THE SHARED SPREAD SYSTEM (prototype-src/duo-spreads.js). Record: hub/docs/DUO-SPREADS-2026-11-04.md.

   USAGE
     (a .dsp-page is a flex column: the stage is drawn first (order: -1) wherever it sits in the page's DOM, so no layer that
      anchors on the page's order is disturbed)
     html[data-duo-spread="book" | "half"]   the inner display as a spread (never on an iPhone, an iPad or the cover)
     .dsp-page            a scrolling page dressed by TRIPTIC_DUO_SPREADS.page(): its .dsp-stage child stands still on
                          the stage page; every other in-flow child is on the action page; .dsp-spine children span the fold
     .dsp-on-stage | .dsp-on-action | .dsp-on-spine | .dsp-on-spread
                          a fixed/absolute layer placed exactly on a page (TRIPTIC_DUO_SPREADS.layer())
     .dsp-span            a deliberate spine element: centred on the spine, across both pages (a title over a book's spine)
     .dsp-free            a child of a .dsp-page that keeps its own place (a light, a layer)
     tokens: --dsp-st{x,y,w,h} --dsp-ac{x,y,w,h} --dsp-sp{x,y,w,h} --dsp-spc --dsp-gut --dsp-colx --dsp-colw --dsp-scolx --dsp-scolw

   Tokens only; nothing here transitions (the moves are WAAPI in duo-spreads.js, transform and opacity only). */

/* ================================================================== a scrolling page: stage still, action scrolls */
html.ds[data-duo-spread] #device > .screen.dsp-page {
  display: flex !important; flex-direction: column; align-items: flex-start;   /* the stage leads (order) wherever it is in the page's own order */
  padding-left: 0 !important;
  padding-right: 0 !important;
  scroll-padding-top: 64px;
}
html.ds[data-duo-spread] #device > .screen.dsp-page > * { flex: none; }
/* the stage rises to the display's top edge and stays there while the action page scrolls; it takes no room in the flow */
html.ds[data-duo-spread] #device > .screen.dsp-page > .dsp-stage {
  order: -1;
  position: sticky !important; top: 0; left: 0; z-index: 0;
  display: block;
  box-sizing: border-box;
  width: var(--dsp-stw) !important; max-width: none !important; height: var(--dsp-sth) !important;
  margin: calc(-1 * var(--dsp-pt, 0px)) 0 calc(var(--dsp-pt, 0px) - var(--dsp-sth)) var(--dsp-stx, 0px) !important;   /* (book: after the rail) */
  overflow: hidden;
  contain: layout paint;
}
html.ds[data-duo-spread] #device > .screen.dsp-page > :not(.dsp-stage, .dsp-spine, .dsp-free, .trip-critical-layer) {
  margin-left: var(--dsp-colx) !important; margin-right: 0 !important;
  width: var(--dsp-colw) !important; max-width: var(--dsp-colw) !important;
  box-sizing: border-box;
}
html.ds[data-duo-spread] #device > .screen.dsp-page > .dsp-spine {
  position: relative; z-index: 2;
  margin-left: var(--dsp-gut) !important; margin-right: var(--dsp-gut) !important;
  width: auto !important; max-width: none !important;
  text-align: center;
}
/* half-open: the stage is the top half; the action page starts under the fold */
html.ds[data-duo-spread="half"] #device > .screen.dsp-page > .dsp-stage {
  z-index: 3;
  height: calc(var(--dsp-sth) - 12px) !important;                 /* the stage ends a little short of the fold: nothing it shows is cut by the hinge */
  margin-bottom: calc(var(--dsp-pt, 0px) + var(--dsp-sph) + 12px) !important;
  box-shadow: 0 12px 0 0 var(--c-stage, rgb(7 7 11));              /* (the strip under it is the stage's own colour, over the scrolling action page) */
}
html.ds[data-duo-spread="half"] #device > .screen.dsp-page > :not(.dsp-stage, .dsp-spine, .dsp-free, .trip-critical-layer) {
  margin-left: var(--dsp-gut) !important; width: calc(100% - 2 * var(--dsp-gut)) !important; max-width: none !important;
}

/* ================================================================== a layer on one page */
html[data-duo-spread] .dsp-on-stage { position: absolute; left: var(--dsp-stx); top: var(--dsp-sty); width: var(--dsp-stw); height: var(--dsp-sth); box-sizing: border-box; }
html[data-duo-spread] .dsp-on-action { position: absolute; left: var(--dsp-acx); top: var(--dsp-acy); width: var(--dsp-acw); height: var(--dsp-ach); box-sizing: border-box; }
html[data-duo-spread] .dsp-on-spine { position: absolute; left: var(--dsp-spx); top: var(--dsp-spy); width: var(--dsp-spw); height: var(--dsp-sph); box-sizing: border-box; }
html[data-duo-spread] .dsp-on-spread { position: absolute; inset: 0; box-sizing: border-box; }
/* a deliberate spine element, centred on the spine across both pages */
html[data-duo-spread="book"] .dsp-span { position: absolute; left: calc(var(--dsp-spc) - var(--dsp-span-w, 560px) / 2); width: var(--dsp-span-w, 560px); text-align: center; box-sizing: border-box; }

/* ================================================================== the moves: the fly layer, a print, a leaf, a light */
.dsp-fly {
  position: fixed; inset: 0; z-index: 2147481000; pointer-events: none;
  perspective: 1600px; perspective-origin: var(--dsp-spc, 50%) 50%;
}
html[data-duo-spread="half"] .dsp-fly { perspective-origin: 50% var(--dsp-spc, 50%); }
.dsp-fly > .dsp-print { will-change: transform, opacity; border-radius: var(--radius-card, 14px); overflow: hidden; backface-visibility: hidden; box-shadow: 0 22px 54px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 255 255 / .08); }
.dsp-fly > .dsp-turn-old { overflow: hidden; }
.dsp-fly > .dsp-turn-dim { background: rgb(0 0 0); opacity: 0; }
.dsp-fly > .dsp-veil { background: radial-gradient(80% 60% at 30% 30%, rgba(var(--dsp-veil-tint, 60, 44, 96), .28), transparent 70%), var(--c-stage, rgb(7 7 11)); opacity: 0; }
/* a poster as a leaf's face: the whole poster at full height on its own colour */
.dsp-fly .dsp-face-poster { background-color: var(--c-stage, rgb(7 7 11)); background-repeat: no-repeat; background-position: 50% 0; background-size: auto 100%; overflow: hidden; }
.dsp-fly .dsp-face-poster > img { position: absolute; left: 50%; top: 0; height: 100%; width: auto; translate: -50% 0; -webkit-mask: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%); mask: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%); }
/* a card's ghost: its picture and its words, nothing it borrowed from its page */
.dsp-fly .dsp-ghost-card { position: relative; background: rgb(22 22 30); border-radius: 14px; overflow: hidden; }
.dsp-fly .dsp-ghost-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dsp-fly .dsp-ghost-card > span { position: absolute; left: 10px; right: 10px; bottom: 10px; color: rgb(255 255 255); font: 600 13px/17px var(--font-ui, system-ui); text-shadow: 0 1px 6px rgb(0 0 0 / .6); }
.dsp-fly > .dsp-leaf { transform-style: preserve-3d; will-change: transform; }
.dsp-fly > .dsp-leaf > :is(.dsp-leaf-front, .dsp-leaf-back) { backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.dsp-fly > .dsp-leaf > .dsp-leaf-back {
  transform: rotateY(180deg);
  background: linear-gradient(90deg, rgb(12 12 18), rgb(24 22 34) 60%, rgb(36 32 52));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06);
}
html[data-duo-spread="half"] .dsp-fly > .dsp-leaf > .dsp-leaf-back { transform: rotateX(180deg); }
.dsp-fly > .dsp-leaf > .dsp-leaf-back.dsp-face-poster { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.dsp-fly > .dsp-leaf > .dsp-leaf-back.dsp-face-poster > img { opacity: .38; }
.dsp-fly > .dsp-leaf > .dsp-leaf-back.dsp-face-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 255 255 / .1), rgb(255 255 255 / 0) 40%, rgb(0 0 0 / .35)); }
.dsp-fly > .dsp-leaf > .dsp-leaf-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / 0), rgb(0 0 0 / .5));
}
.dsp-fly > .dsp-light {
  position: absolute; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 250 238) 0, rgb(255 226 170 / .85) 22%, rgb(196 150 255 / .35) 55%, rgb(139 92 246 / 0) 72%);
  mix-blend-mode: screen; will-change: transform, opacity;
}

/* ================================================================== the gutter steps aside where a spread draws its own spine */
html[data-duo-book]:has(#device > .screen.dsp-page:not(.fluid-departure))::after { opacity: .55; }
@media (prefers-reduced-transparency: reduce) {
  .dsp-fly > .dsp-light { mix-blend-mode: normal; }
}

/* (final duofix, 14 November 2026) the phone's own Your three is never seen on the open phone while the app is away from it
   (Share, a film's page): duo-triptych.js deckAway(); here, not in duo-triptych.css, whose rules all hang from the stage */
html.ds.duo-deck-away[data-duo-spread] #device .trip-critical-layer:is(#duo-away#duo-away#duo-away, *) *,
html.ds.duo-deck-away[data-duo-spread] #device .trip-critical-layer { visibility: hidden !important; }

/* ===== prototype-src/duo-spread-pages.css ===== */
/* TRIPTIC on iPhone Duo: Discover, the two-film answer and the film page as spreads (prototype-src/duo-spread-pages.js).
   Every rule hangs from html[data-duo-spread] (the shared system, duo-spreads.css, places the pages; this file dresses
   what stands on them). Tokens only. Moves: transform and opacity; Reduce Motion: still. */

/* ================================================================== Discover
   stage: "Try asking for", a wall of its posters drifting slowly (two columns, the second set half a poster lower and
   drifting the other way); its heading and "Explore collections" on glass at the top. action: everything else. */
html.ds[data-duo-spread] #device > .discover-screen.dsp-page > .discover-inspiration.dsp-wall {
  padding: 0 !important;
  background: radial-gradient(120% 70% at 30% 0%, rgb(48 30 92 / .55), transparent 70%), var(--c-stage, #07070b);
  box-shadow: inset -1px 0 0 rgb(255 255 255 / .05);
}
html.ds[data-duo-spread] #device > .discover-screen.dsp-page > .discover-inspiration.dsp-wall > header {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 !important;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--dsp-gut) 26px !important;
  background: linear-gradient(to bottom, rgb(7 7 11 / .94) 0, rgb(7 7 11 / .78) 58%, rgb(7 7 11 / 0) 100%);
}
html.ds[data-duo-spread] #device > .discover-screen.dsp-page > .discover-inspiration.dsp-wall::after {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 132px; pointer-events: none;
  background: linear-gradient(to top, rgb(7 7 11 / .92), rgb(7 7 11 / 0));
}
html.ds[data-duo-spread] #device > .discover-screen.dsp-page > .discover-inspiration.dsp-wall > .prompt-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px !important;
  margin: 0 !important;
  padding: 92px var(--dsp-gut) 140px !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  animation: dsp-wall-drift 46s var(--motion-breathe) infinite alternate;
  will-change: transform;
}
html.ds[data-duo-spread] #device > .discover-screen.dsp-page > .discover-inspiration.dsp-wall > .prompt-grid > .prompt-card {
  width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important;
  height: auto !important; min-height: 0 !important; aspect-ratio: 2 / 3;
  margin: 0 !important;
  box-shadow: 0 18px 40px rgb(0 0 0 / .42);
}
/* the second column stands half a poster lower and drifts against the first: a wall, not a grid */
html.ds[data-duo-spread] #device > .discover-screen.dsp-page > .discover-inspiration.dsp-wall > .prompt-grid > .prompt-card:nth-child(even) {
  translate: 0 52%;
  animation: dsp-wall-counter 46s var(--motion-breathe) infinite alternate;
}
html.ds[data-duo-spread] #device > .discover-screen.dsp-page > .discover-inspiration.dsp-wall > .prompt-grid > .prompt-card.dsp-sent { opacity: .35; }
@keyframes dsp-wall-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(-1 * var(--dsp-wall-travel, 0px)), 0); } }
@keyframes dsp-wall-counter { from { transform: translate3d(0, -36px, 0); } to { transform: translate3d(0, 36px, 0); } }
/* a finger on the wall holds it still (so what is under the finger stays under it) */
html.ds[data-duo-spread] #device > .discover-screen.dsp-page > .discover-inspiration.dsp-wall:is(:hover, :active, :focus-within) > .prompt-grid,
html.ds[data-duo-spread] #device > .discover-screen.dsp-page > .discover-inspiration.dsp-wall:is(:hover, :active, :focus-within) > .prompt-grid > .prompt-card { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html.ds[data-duo-spread] #device > .discover-screen.dsp-page > .discover-inspiration.dsp-wall > .prompt-grid,
  html.ds[data-duo-spread] #device > .discover-screen.dsp-page > .discover-inspiration.dsp-wall > .prompt-grid > .prompt-card { animation: none !important; }
}
html.ds[data-duo-spread] #device.manual-reduced-motion > .discover-screen.dsp-page > .discover-inspiration.dsp-wall > .prompt-grid,
html.ds[data-duo-spread] #device.manual-reduced-motion > .discover-screen.dsp-page > .discover-inspiration.dsp-wall > .prompt-grid > .prompt-card { animation: none !important; }
/* one living thing per screen (owner, 8 October): on the spread the wall is Discover's; the glass box keeps still */
html.ds[data-duo-spread] #device > .discover-screen.dsp-page.dg2 > .premium-composer.dg2-hover,
html.ds[data-duo-spread] #device > .discover-screen.dsp-page.dg2 > .premium-composer > .dg2-glow.dg2-hover::before { animation: none !important; }
/* the action page: the request leads, under the brand; nothing is set against the fold */
html.ds[data-duo-spread] #device > .discover-screen.dsp-page > .discover-heading { margin-top: 28px !important; }
html.ds[data-duo-spread] #device > .discover-screen.dsp-page > .search-glass.dsp-received::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1.5px rgb(255 236 200 / .7), 0 0 36px rgb(196 150 255 / .45);
  animation: dsp-received var(--motion-slow) var(--motion-curve) both;
}
@keyframes dsp-received { from { opacity: 1; } to { opacity: 0; } }
/* half-open: the wall is the top half (its posters in three columns, drifting), the request below the fold */
html.ds[data-duo-spread="half"] #device > .discover-screen.dsp-page > .discover-inspiration.dsp-wall > .prompt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 84px !important; }
/* (final duofix R2-02, 14 November 2026) half-open the request page is the bottom half alone (about 440pt, the dock over its
   foot): its brand row keeps no status-bar room (it is under the fold, not at the display's top edge) and the request is
   set closer, so the services line and Find three stand above the dock without scrolling, as on the iPhone. */
html.ds[data-duo-spread="half"] #device > .discover-screen.dsp-page > .app-header { height: auto !important; min-height: 0 !important; padding-top: 8px !important; }
html.ds[data-duo-spread="half"] #device > .discover-screen.dsp-page > .discover-heading { margin-top: 4px !important; margin-bottom: 0 !important; }
html.ds[data-duo-spread="half"] #device > .discover-screen.dsp-page > .search-glass { margin-top: 12px !important; }

/* ================================================================== the film page (and results)
   stage: the poster at its full height, whole, in the film's own colour (hero-colour.js --hc-film-a/b) where it does not
   reach the page's edges. action: the room (duo-book.css section 6), led on a three by "Your three". */
html.ds[data-duo-spread="book"] #device .film-v5.recon-film.dsp-film > .film-hero {
  background:
    radial-gradient(130% 70% at 50% 28%, rgba(var(--hc-film-a, 70, 52, 110), .62), transparent 72%),
    radial-gradient(120% 60% at 50% 100%, rgba(var(--hc-film-b, 40, 30, 60), .55), transparent 70%),
    var(--c-stage, rgb(7, 7, 11)) !important;
  background-size: auto !important;
}
html.ds[data-duo-spread="book"] #device .film-v5.recon-film.dsp-film > .film-hero[style*="--poster"]::before {
  background-size: auto 100% !important;
  background-position: 50% 0 !important;
  -webkit-mask: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%); mask: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%);
}
/* the room takes a little of the same colour, so the two pages read as one spread */
html.ds[data-duo-spread="book"] #device .film-v5.recon-film.dsp-film {
  background:
    radial-gradient(60% 55% at 22% 30%, rgba(var(--hc-film-a, 70, 52, 110), .22), transparent 75%),
    var(--c-stage, rgb(7, 7, 11));
}
html.ds[data-duo-spread] #device .film-v5.dsp-film .film-content > .dsp-three { order: -100; display: grid; gap: 10px; margin: 0 0 22px; }
html.ds[data-duo-spread] #device .dsp-three-eyebrow { font: var(--fw-caption-2-strong, 600) var(--fs-caption-2, 11px)/var(--lh-caption-2, 13px) var(--font-ui); letter-spacing: var(--tr-eyebrow, .08em); color: var(--c-label-3, rgba(235, 235, 245, .6)); }
html.ds[data-duo-spread] #device .dsp-three-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
html.ds[data-duo-spread] #device .dsp-three-film {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 66px; padding: 0; border: 0; background: none; color: var(--c-label-2, rgba(235, 235, 245, .7)); text-align: left; cursor: pointer;
}
html.ds[data-duo-spread] #device .dsp-three-poster { display: block; width: 44px; height: 66px; border-radius: 6px; overflow: hidden; background: var(--c-fill-2, rgba(120, 120, 128, .24)); box-shadow: 0 6px 16px rgb(0 0 0 / .35), inset 0 0 0 1px rgb(255 255 255 / .1); }
html.ds[data-duo-spread] #device .dsp-three-poster > img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.ds[data-duo-spread] #device .dsp-three-title { font: var(--fw-footnote, 400) var(--fs-footnote, 13px)/var(--lh-footnote, 18px) var(--font-ui); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-width: 0; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
html.ds[data-duo-spread] #device .dsp-three-film[aria-current] { color: var(--c-label-1, #fff); }
html.ds[data-duo-spread] #device .dsp-three-film[aria-current] .dsp-three-poster { box-shadow: 0 0 0 2px var(--c-lamp, #f3eee6), 0 8px 22px rgb(0 0 0 / .45); }
html.ds[data-duo-spread] #device .dsp-three-film:not([aria-current]) .dsp-three-poster { opacity: .82; }

/* ================================================================== the two-film answer
   A diptych across the fold: one film on each page, the hinge between the pair, each poster standing against the spine
   and facing the other (the pair's own lean, about its outer edge). The headline bridges the spine: "Two" ends on the
   stage page, "that fit." begins on the action page, a hairline of light across the fold between them. The way back and
   the brand stand on the stage page; the request heads the action page; the note is under the first film, the one
   button under the second. Pure layout: the hand-off light (two-film-answer.js) measures the posters where they stand,
   so it flies into each page. */
html.ds[data-duo-spread="book"] #device > .screen.two-film-screen {
  --tf-gap: calc(2 * var(--dsp-gut) + var(--dsp-spw));
  --tf-ph: clamp(220px, calc(var(--dsp-sth) - 330px), 320px);
  --tf-pw: calc(var(--tf-ph) * 2 / 3);
  display: grid !important;
  grid-template-columns: var(--dsp-gut) minmax(0, 1fr) var(--tf-gap) minmax(0, 1fr) var(--dsp-gut);
  grid-template-rows: auto auto auto auto 1fr;
  align-items: start; column-gap: 0;
  padding: calc(var(--safe-top, 0px) + 14px) 0 0 !important;
}
html.ds[data-duo-spread="book"] #device > .two-film-screen > .two-film-bar { grid-column: 2; grid-row: 1; align-self: start; }
html.ds[data-duo-spread="book"] #device > .two-film-screen > .two-film-request { grid-column: 4; grid-row: 1; margin: 0; }
html.ds[data-duo-spread="book"] #device > .two-film-screen > .two-film-heading {
  grid-column: 1 / -1; grid-row: 2; margin: 18px 0 0;
  display: grid; grid-template-columns: var(--dsp-gut) minmax(0, 1fr) var(--tf-gap) minmax(0, 1fr) var(--dsp-gut); text-align: left;
}
html.ds[data-duo-spread="book"] #device > .two-film-screen > .two-film-heading > .eyebrow { grid-column: 2; grid-row: 1; text-align: right; }
html.ds[data-duo-spread="book"] #device > .two-film-screen > .two-film-heading > h1 {
  grid-column: 1 / -1; grid-row: 2; position: relative;
  display: grid; grid-template-columns: var(--dsp-gut) minmax(0, 1fr) var(--tf-gap) minmax(0, 1fr) var(--dsp-gut); align-items: baseline;
}
html.ds[data-duo-spread="book"] #device > .two-film-screen > .two-film-heading > h1 > .dsp-bridge-l { grid-column: 2; text-align: right; }
html.ds[data-duo-spread="book"] #device > .two-film-screen > .two-film-heading > h1 > .dsp-bridge-r { grid-column: 4; text-align: left; }
html.ds[data-duo-spread="book"] #device > .two-film-screen > .two-film-heading > h1 > .dsp-bridge-gap { display: none; }
/* the hairline of light across the fold, between the headline's two halves */
html.ds[data-duo-spread="book"] #device > .two-film-screen > .two-film-heading > h1::after {
  content: ""; position: absolute; top: 56%; left: calc(var(--dsp-spc) - var(--tf-gap) / 2 + 8px); width: calc(var(--tf-gap) - 16px); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 200, .75) 30%, rgba(196, 150, 255, .9) 50%, rgba(255, 236, 200, .75) 70%, transparent);
  box-shadow: 0 0 10px rgba(196, 150, 255, .55);
}
html.ds[data-duo-spread="book"] #device > .two-film-screen > .two-film-heading > .two-film-why { grid-column: 4; grid-row: 3; max-width: 36ch; margin: 6px 0 0; text-align: left; }
html.ds[data-duo-spread="book"] #device > .two-film-screen > .two-film-pair {
  grid-column: 1 / -1; grid-row: 3; margin: 20px 0 0;
  grid-template-columns: var(--dsp-gut) minmax(0, 1fr) var(--tf-gap) minmax(0, 1fr) var(--dsp-gut); gap: 0;
  perspective-origin: var(--dsp-spc) 50%;
}
html.ds[data-duo-spread="book"] #device > .two-film-screen .two-film-card {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--tf-pw); column-gap: 18px; align-items: end;
}
html.ds[data-duo-spread="book"] #device > .two-film-screen .two-film-card:nth-child(1) { grid-column: 2; }
html.ds[data-duo-spread="book"] #device > .two-film-screen .two-film-card:nth-child(2) { grid-column: 4; grid-template-columns: var(--tf-pw) minmax(0, 1fr); }
html.ds[data-duo-spread="book"] #device > .two-film-screen .two-film-card > .two-film-poster { grid-row: 1; width: var(--tf-pw); height: var(--tf-ph); aspect-ratio: auto; }
html.ds[data-duo-spread="book"] #device > .two-film-screen .two-film-card:nth-child(1) > .two-film-poster { grid-column: 2; }
html.ds[data-duo-spread="book"] #device > .two-film-screen .two-film-card:nth-child(2) > .two-film-poster { grid-column: 1; }
html.ds[data-duo-spread="book"] #device > .two-film-screen .two-film-card > .two-film-copy { grid-row: 1; margin: 0; padding: 0 0 6px; align-self: end; }
html.ds[data-duo-spread="book"] #device > .two-film-screen .two-film-card:nth-child(1) > .two-film-copy { grid-column: 1; text-align: right; justify-items: end; }
html.ds[data-duo-spread="book"] #device > .two-film-screen .two-film-card:nth-child(2) > .two-film-copy { grid-column: 2; }
/* each film's Save stays on its own poster's corner */
html.ds[data-duo-spread="book"] #device > .two-film-screen .two-film-card:nth-child(1) > .two-film-save { left: auto; right: 10px; }
html.ds[data-duo-spread="book"] #device > .two-film-screen .two-film-card:nth-child(2) > .two-film-save { right: auto; left: calc(var(--tf-pw) - 54px); }
html.ds[data-duo-spread="book"] #device > .two-film-screen > .two-film-note { grid-column: 2; grid-row: 4; margin: 18px 0 0; text-align: right; }
html.ds[data-duo-spread="book"] #device > .two-film-screen > .two-film-foot {
  grid-column: 4; grid-row: 4; position: static; margin: 14px 0 0; padding: 0 0 max(var(--sp-4, 16px), calc(var(--safe-bottom, 0px) + 8px)); background: none;
}
html.ds[data-duo-spread="book"] #device > .two-film-screen > .two-film-foot > .primary-button { width: 100%; }
html.ds[data-duo-spread="book"] #device > .two-film-screen > .refinement-return { grid-column: 2 / 5; grid-row: 5; }

/* ================================================================== the reader: Your three as a book you turn (duo-spread-reader.js)
   The leaf is two strips hinged together (it bends); each strip has a front (this page) and a back (the next film's page);
   a gleam runs along the curl, the strips darken as they stand up, and the leaf's shadow crosses the page under it. */
html[data-duo-spread] #device > .dsp-reader { overflow: hidden; perspective: 2400px; pointer-events: none; }
html[data-duo-spread] .dsp-reader-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
html[data-duo-spread].dsp-turning, html[data-duo-spread].dsp-turning * { -webkit-user-select: none !important; user-select: none !important; }
html[data-duo-spread] .dsp-reader .dsp-turn-leaf,
html[data-duo-spread] .dsp-reader .dsp-strip { transform-style: preserve-3d; will-change: transform; }
html[data-duo-spread] .dsp-reader .dsp-face { position: absolute; top: 0; left: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--c-stage, rgb(7, 7, 11)); }
html[data-duo-spread] .dsp-reader .dsp-face-back { transform: rotateY(180deg); }
html[data-duo-spread] .dsp-reader .dsp-face-shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgb(0 0 0 / .55), rgb(0 0 0 / .15)); }
html[data-duo-spread] .dsp-reader .dsp-face-gleam { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgb(255 255 255 / 0) 30%, rgb(255 250 240 / .16) 62%, rgb(255 255 255 / .03) 78%, rgb(0 0 0 / .18)); mix-blend-mode: screen; }
html[data-duo-spread] .dsp-reader .dsp-cast { position: absolute; top: 0; left: 0; width: 110px; height: 100%; opacity: 0; pointer-events: none; transform-origin: 0 50%; will-change: transform, opacity; background: linear-gradient(90deg, rgb(0 0 0 / .5), rgb(0 0 0 / .18) 40%, rgb(0 0 0 / 0)); }
html[data-duo-spread] .dsp-reader .dsp-slice > .film-v5 { overflow: hidden !important; }
html[data-duo-spread] .dsp-pre-shelf { position: absolute; inset: 0; visibility: hidden; pointer-events: none; overflow: hidden; }
html[data-duo-spread] .dsp-pre-shelf > .film-v5 { position: absolute; left: 0; top: 0; overflow: hidden !important; }
/* the chrome: the next poster's edge at the outer edge of the action page, the previous one's at the stage's; the corner with
   the next film's name; three dots over the spine */
html[data-duo-spread] .dsp-reader-chrome { pointer-events: none; }
html[data-duo-spread] .dsp-reader-chrome.is-turning > :not(.dsp-pre-shelf) { opacity: 0; pointer-events: none; }
html[data-duo-spread] .dsp-reader-chrome > * { pointer-events: auto; }
html[data-duo-spread] .dsp-reader-chrome > .dsp-pre-shelf { pointer-events: none; }
html[data-duo-spread] .dsp-edge {
  position: absolute; top: 14%; bottom: 14%; width: 12px; padding: 0; border: 0; cursor: pointer;
  background-color: var(--c-stage-raised, rgb(22 22 30)); background-size: cover; background-position: 0 50%;
  box-shadow: 0 10px 30px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(255 255 255 / .12);
}
html[data-duo-spread] .dsp-edge-next { right: 0; border-radius: 6px 0 0 6px; background-position: 0 50%; }
html[data-duo-spread] .dsp-edge-prev { left: 0; border-radius: 0 6px 6px 0; background-position: 100% 50%; }
html[data-duo-spread] .dsp-edge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgb(0 0 0 / .45), rgb(0 0 0 / 0) 60%); }
html[data-duo-spread] .dsp-edge-prev::after { background: linear-gradient(270deg, rgb(0 0 0 / .45), rgb(0 0 0 / 0) 60%); }
html[data-duo-spread] .dsp-corner {
  position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; max-width: 46%; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgb(20 20 28 / .72); color: var(--c-label-1, #fff); box-shadow: 0 10px 28px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .12);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  font: var(--fw-subhead-strong, 600) var(--fs-subhead, 15px)/var(--lh-subhead, 20px) var(--font-ui);
}
html[data-duo-spread] .dsp-corner-next { right: 26px; }
html[data-duo-spread] .dsp-corner-prev { left: 26px; }
html[data-duo-spread] .dsp-corner-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a page's corner, turned up a little: the next page under it */
html[data-duo-spread] .dsp-corner-fold { flex: none; width: 14px; height: 14px; background: linear-gradient(225deg, transparent 50%, rgb(243 238 230 / .85) 50%); border-radius: 0 0 0 3px; box-shadow: -1px 1px 3px rgb(0 0 0 / .4); }
html[data-duo-spread] .dsp-corner-prev .dsp-corner-fold { background: linear-gradient(135deg, transparent 50%, rgb(243 238 230 / .85) 50%); border-radius: 0 0 3px 0; }
html[data-duo-spread] .dsp-dots { position: absolute; left: calc(var(--dsp-spc) - 48px); width: 96px; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); display: flex; justify-content: center; gap: 2px; }
html[data-duo-spread] .dsp-dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
html[data-duo-spread] .dsp-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(255 255 255 / .34); box-shadow: 0 1px 4px rgb(0 0 0 / .5); }
html[data-duo-spread] .dsp-dot[aria-current]::before { width: 9px; height: 9px; background: var(--c-lamp, rgb(243 238 230)); box-shadow: 0 0 10px rgb(243 238 230 / .55); }
/* the action page scrolls under a finger that moves up and down; across, it is a page being turned */
html.ds[data-duo-spread="book"] #device .critical-film-layer.film-v5.dsp-film { touch-action: pan-y; }

/* ================================================================== Discover, held like a book: v3 (owner, 11 November 2026: "this
   layout", from his reference, in TRIPTIC's own look, words and parts). One screen, no scroll, between the rail and a 24pt
   right margin:
     1  the heading top-left, left-aligned ("Describe it." large, "What do you feel like watching?" under it); Find a film
        quietly on its line at the right; the top-right is open atmosphere (a static film strip in light, CSS only)
     2  THE REQUEST BAR the whole width, across the fold: the search glyph, the words (from its left end), the microphone,
        a hairline, Find three (the app's own button and its own empty state) at the right end
     3  one caption line under it: the guidance on the left, this week's searches on the right
     4  two zones split by a hairline at about 62/38: "Try asking for" as a 2 x 2 of landscape cards (running across the
        fold; a guard on the fold takes the touches there), and a column of Recent searches over Break Glass; the two zones'
        bottoms on one line
   Nothing that is pressed stands on the fold. Half-open, the page is a spread (above). */
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 {
  --dw-l: calc(var(--dsp-stx, 88px) + var(--dsp-gut, 24px));
  --dw-rule: 28px;
  display: grid !important; align-content: start !important; overflow: hidden !important;
  grid-template-columns: var(--dw-l) minmax(0, 62fr) var(--dw-rule) minmax(0, 38fr) 24px !important;
  grid-template-rows: auto auto auto minmax(0, auto) minmax(0, 1fr) !important; row-gap: 0 !important; padding: 0 0 20px !important; height: 100% !important; box-sizing: border-box;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > :is(.app-header, .discover-heading, .search-glass, .discover-inspiration, .voice-error, .tm-allowance, .eg, .dsp-recent) {
  position: relative !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important;
  margin: 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .dg2-field { height: 100% !important; bottom: auto !important; }
/* 1 */
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .discover-heading {
  grid-row: 1 !important; grid-column: 2 / 4 !important; z-index: 1; margin-top: 36px !important; padding: 0 !important; text-align: left !important;
  display: flex !important; flex-direction: column-reverse; align-items: flex-start; gap: 6px;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .discover-heading > h1 { font-size: calc(46 * var(--type-unit, 1px)) !important; line-height: 1.02 !important; margin: 0 !important; text-align: left !important; }
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .discover-heading > p {
  margin: 0 !important; text-align: left !important; text-transform: none !important; letter-spacing: 0 !important;
  font: var(--fw-body, 400) calc(17 * var(--type-unit, 1px))/1.3 var(--font-ui) !important; color: var(--c-label-2) !important;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .app-header {
  grid-row: 1 !important; grid-column: 4 !important; z-index: 2; align-self: start; justify-self: end; height: auto !important; min-height: 0 !important; padding: 0 !important; margin-top: 26px !important;
  display: flex !important; justify-content: flex-end !important; align-items: center !important; pointer-events: none; background: none !important; margin-top: 38px !important;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .app-header > * { pointer-events: auto; }
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .app-header > .brand-home { position: absolute !important; }
/* Find a film, quiet: a pill of solid dark glass with its hairline, so the strip of film behind it never shows through
   its words (pass 6) */
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .app-header > .ff-entry {
  margin: 0 !important; min-height: 40px !important; background: rgb(22 16 32 / .9) !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 6px 18px rgb(0 0 0 / .35) !important;
  -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; color: var(--c-label-2) !important;
}
/* the atmosphere: a strip of film catching the light, top right, still. Shown only on the opened Duo's Discover and Today (v3):
   everywhere else the box is not drawn, so nothing of it is ever fetched or painted. Absolute, behind everything (no layout
   shift), never animated. */
html.ds .dsp-atmos { display: none; }
/* DISCOVER: the owner's painted strip A (12 November 2026: the drawn strip "doesn't look good enough"), a gold-lit ribbon in an
   S-curve. WebP with alpha at the size drawn, 1x and 2x (scripts/build-duo-filmstrip.mjs, which also takes out the master's pale
   halo); a background of this box only, so only the opened Duo's Discover downloads it. The right page only, as in his
   reference: the ribbon's top loop leaves the screen at the top right, its lower run at the right edge behind Find a film
   (solid glass, pass 6); its foot fades as it goes under the request bar. (Spanning the fold, it crowded "Describe it.".) */
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .dsp-atmos {
  display: block; position: absolute; pointer-events: none; z-index: 0; overflow: hidden; contain: strict;
  right: 0; top: 0; width: 386px; height: 186px;
  background: image-set(url("/assets/duo/filmstrip-discover-386.webp") 1x, url("/assets/duo/filmstrip-discover-772.webp") 2x) no-repeat 0 0 / 100% 100%;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, #000 0, #000 112px, transparent 172px); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, #000 0, #000 112px, transparent 172px); mask-composite: intersect;
}
/* TODAY: the drawn strip, exactly as before 12 November (owner, 12 November 2026, 17:11: on Today he prefers it to the painted
   strip B, which is no longer used; Discover and Today need not match). CSS only: a strip of film in light, top right. */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dsp-atmos {
  display: block; position: absolute; right: 0; top: 0; width: 52%; height: 230px; pointer-events: none; z-index: 0; overflow: hidden;
  background: radial-gradient(55% 75% at 72% 26%, rgb(240 199 134 / .13), transparent 72%), radial-gradient(70% 90% at 90% 10%, rgb(139 92 246 / .16), transparent 70%);
  /* (pass 6) it fades out on its left and its foot alike: no edge of its box is ever seen */
  -webkit-mask: linear-gradient(180deg, #000 45%, transparent), linear-gradient(90deg, transparent, #000 38%); -webkit-mask-composite: source-in;
  mask: linear-gradient(180deg, #000 45%, transparent), linear-gradient(90deg, transparent, #000 38%); mask-composite: intersect;
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dsp-atmos > i {
  position: absolute; left: 14%; top: 72px; width: 120%; height: 64px; transform: rotate(-17deg); transform-origin: 0 50%;
  background:
    repeating-linear-gradient(90deg, rgb(255 231 196 / .34) 0 8px, transparent 8px 19px) 0 7px / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, rgb(255 231 196 / .34) 0 8px, transparent 8px 19px) 0 calc(100% - 7px) / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 66px, rgb(255 231 196 / .10) 66px 67px),
    linear-gradient(180deg, rgb(74 50 62 / .72), rgb(34 22 36 / .72));
  box-shadow: inset 0 1px 0 rgb(240 199 134 / .35), inset 0 -1px 0 rgb(240 199 134 / .25), 0 0 46px rgb(240 199 134 / .12);
  -webkit-mask: linear-gradient(90deg, transparent, #000 26%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 26%, #000 70%, transparent);
}
/* Reduce Transparency, forced colours and a slow screen: no atmosphere (as the app's other atmosphere); Increase Contrast:
   dimmed well back */
html.ds.reduce-transparency #device > .screen > .dsp-atmos, html.ds #device.manual-solid > .screen > .dsp-atmos { display: none !important; }
@media (prefers-reduced-transparency: reduce), (forced-colors: active), (update: slow) { html.ds #device > .screen > .dsp-atmos { display: none !important; } }
@media (prefers-contrast: more) { html.ds #device > .screen > .dsp-atmos { opacity: .4; } }
/* 2  the bar */
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .search-glass {
  grid-row: 2 !important; grid-column: 2 / 5 !important; z-index: 1; margin-top: 16px !important; min-height: 72px !important; padding: 0 12px 0 0 !important;
  display: grid !important; grid-template-columns: 58px minmax(0, 1fr) auto auto !important; grid-template-rows: minmax(72px, auto) !important; align-items: center !important; column-gap: 6px;
  border-radius: 36px !important; overflow: visible !important;
}
html.ds .dsp-bar-glyph { display: none; }
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .search-glass > .dsp-bar-glyph {
  display: block; grid-row: 1; grid-column: 1; justify-self: end; width: 22px; height: 22px; position: relative; z-index: 2; pointer-events: none; color: var(--c-label-2);
}
html.ds .dsp-bar-glyph > svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .search-glass > .composer-meta {
  grid-row: 1 !important; grid-column: 3 !important; align-self: center !important; padding: 0 !important; margin: 0 !important; width: auto !important; display: flex !important; align-items: center; gap: 4px;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .search-glass > .composer-meta > .composer-meta-actions {
  position: static !important; inset: auto !important; transform: none !important; display: flex !important; align-items: center; gap: 6px; margin: 0 !important;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .search-glass > .composer-meta > .request-label {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .search-glass > textarea#query {
  grid-row: 1 !important; grid-column: 2 !important; align-self: stretch !important; width: auto !important; margin: 0 !important;
  padding: 23px 8px 21px 6px !important; min-height: 72px !important; max-height: calc(3 * 1.3em + 44px) !important; height: auto !important; field-sizing: content; resize: none !important;
  font-size: calc(20 * var(--type-unit, 1px)) !important; line-height: 1.3 !important;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .search-glass > .composer-footer { display: contents !important; }
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .search-glass .oms-row.oms-row {
  grid-row: 2 !important; grid-column: 2 / -1 !important; justify-self: start !important; width: calc(var(--dsp-spx) - var(--dw-l) - 64px - 16px) !important; max-width: none !important;   /* (on the left page only) */
  margin: -6px 0 12px 0 !important; position: relative !important; left: auto !important; right: auto !important; top: auto !important;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .search-glass > .composer-footer > .composer-actions {
  grid-row: 1 !important; grid-column: 4 !important; display: flex !important; align-items: center !important; gap: 0; padding: 0 !important; margin: 0 !important; width: auto !important;
  background: linear-gradient(rgb(255 255 255 / .2), rgb(255 255 255 / .2)) no-repeat calc(100% - 150px - 15px) 50% / 1px 30px;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .search-glass > .composer-footer > .composer-actions > * { margin: 0 !important; }
/* the microphone, then a hairline, then Find three */
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .search-glass > .composer-footer > .composer-actions > .voice-control { margin-right: 14px !important; }
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .search-glass > .composer-footer > .composer-actions > .query-submit { flex: 0 0 auto !important; width: auto !important; min-width: 150px !important; max-width: 200px !important; margin-left: 14px !important; width: 150px !important; }
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .search-glass > .dg2-glow { display: none !important; }
/* 3  the caption line */
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .search-glass > .composer-footer > .composer-guidance {
  position: absolute !important; left: 26px; top: calc(100% + 9px); padding: 0 !important; margin: 0 !important; width: calc(var(--dsp-spx) - var(--dw-l) - 26px - 8px) !important; max-width: none !important;
  display: block !important; visibility: visible !important; opacity: 1 !important; text-align: left; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis;
  font: var(--fw-footnote) var(--fs-footnote)/20px var(--font-ui) !important; color: var(--c-label-2) !important;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .tm-allowance {
  grid-row: 3 !important; grid-column: 4 !important; justify-self: end !important; margin: 0 4px 0 0 !important; height: 38px !important; min-height: 0 !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; gap: 4px;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .voice-error { grid-row: 3 !important; grid-column: 2 / 3 !important; align-self: center; }
/* 4  the two zones and the hairline between them */
html.ds .dsp-rule, html.ds .dsp-fold-guard { display: none; }
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .dsp-rule {
  display: block; grid-row: 4 / 6; grid-column: 3; justify-self: center; width: 1px; margin-top: 12px; background: linear-gradient(180deg, transparent, rgb(255 255 255 / .12) 12%, rgb(255 255 255 / .12) 88%, transparent);
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .discover-inspiration {
  grid-row: 4 / 6 !important; grid-column: 2 !important; margin-top: 12px !important; padding: 0 !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr); min-height: 0;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .discover-inspiration > header { padding: 0 !important; margin: 0 0 10px !important; width: auto !important; min-height: 24px; display: flex; align-items: center; }
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .discover-inspiration > .prompt-grid.ds-carousel {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 0 !important;
  gap: 12px !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; width: auto !important; height: 100% !important; scroll-snap-type: none !important; transform: none !important;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .discover-inspiration > .prompt-grid.ds-carousel > .prompt-card {
  width: 100% !important; max-width: none !important; min-width: 0 !important; height: 100% !important; margin: 0 !important; flex: none !important; border-radius: 18px !important;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .discover-inspiration > .prompt-grid.ds-carousel > .prompt-card:nth-child(n+5) { display: none !important; }
/* a poster set in a landscape card: cropped where its picture is (never stretched) */
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .discover-inspiration .prompt-card .prompt-art img { object-fit: cover !important; object-position: 50% 28% !important; }
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .discover-inspiration .prompt-card .prompt-title {
  font-size: calc(17 * var(--type-unit, 1px)) !important; line-height: 1.22 !important; overflow-wrap: normal !important; word-break: normal !important; max-width: 80%;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .dsp-fold-guard {
  display: block; position: absolute; grid-row: 4 / 6; grid-column: 1 / -1; left: var(--dsp-spx); width: var(--dsp-spw); top: 0; bottom: 0; z-index: 5; pointer-events: auto; background: transparent;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .dsp-recent { grid-row: 4 !important; grid-column: 4 !important; margin-top: 12px !important; }
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .eg {
  grid-row: 5 !important; grid-column: 4 !important; align-self: end; margin-top: 14px !important; display: grid !important; align-content: start; gap: 10px; padding: 14px 16px !important; position: relative !important;
}
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .eg > .eg-call { width: 100% !important; zoom: .82; }
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .eg > .eg-foot { width: 100% !important; display: flex !important; align-items: center; justify-content: space-between; gap: 8px; }
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .eg > .eg-foot::after { content: "›"; color: var(--c-label-3, rgb(255 255 255 / .45)); font: 400 20px/1 var(--font-ui); }
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .eg .eg-note { text-align: left !important; margin: 0 !important; }
html.ds .dsp-recent,
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 > .eg {
  border-radius: 22px; background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .03)) !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09) !important;
}
html.ds .dsp-recent { display: grid; align-content: start; gap: 2px; padding: 12px 14px 8px 16px; min-width: 0; overflow: hidden; }
html.ds .dsp-recent-list > li { min-width: 0; }
html.ds .dsp-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
html.ds .dsp-recent-all { border: 0; background: none; padding: 0 0 0 8px; min-height: 36px; color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/1 var(--font-ui); cursor: pointer; }
html.ds .dsp-recent-all > i { font-style: normal; }
html.ds .dsp-recent-title { margin: 0 0 2px; font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-label-2); }
html.ds .dsp-recent-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
html.ds .dsp-recent-row {
  width: 100%; min-height: 36px; padding: 0 2px; border: 0; background: none; color: var(--c-label-1); display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  font: var(--fw-subhead) var(--fs-subhead)/1.25 var(--font-ui); -webkit-tap-highlight-color: transparent;
}
html.ds .dsp-recent-list > li + li > .dsp-recent-row { box-shadow: inset 0 1px 0 rgb(255 255 255 / .07); }
html.ds .dsp-recent-row > svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--c-label-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html.ds .dsp-recent-row > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* (pass 6) on the opened page a search reads whole: up to two lines, then the ellipsis */
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 .dsp-recent-row { min-height: 44px; padding: 6px 2px; }
html.ds[data-duo-spread="book"] #device > .discover-screen.dsp-discover-wide.dg2 .dsp-recent-row > span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
html.ds .dsp-recent-row > i { flex: none; font-style: normal; color: var(--c-label-3, rgb(255 255 255 / .4)); }
html.ds .dsp-recent-row:active { opacity: .6; }
html.ds .dsp-recent-none { margin: 6px 0 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }

/* (final duofix R2-09, 14 November 2026) held like a book, typing: the keyboard leaves a band about 300pt tall and the page's
   grid closes up, so Break Glass was drawn over the request box. While the keyboard is up it stands aside (on the iPhone the
   keyboard covers it too); Recent searches stay. */
html.ds[data-duo-spread="book"][data-keyboard="open"] #device > .discover-screen.dsp-discover-wide.dg2 > .eg { visibility: hidden !important; }

/* ===== prototype-src/duo-spread-browse.css ===== */
/* TRIPTIC on iPhone Duo: the browsing tabs as spreads (Builder C, 4 November 2026). Script: duo-spread-browse.js.
   Built on the shared system (duo-spreads.css: html[data-duo-spread], .dsp-page/.dsp-stage, the --dsp-* tokens). Every rule
   here hangs from html[data-duo-spread]: an iPhone, an iPad and the Duo's cover display never meet one.
   Tokens only. Nothing here transitions (the moves are the system's: across, turn, light). The tab bar stands at the foot of
   the stage page (duo-book.css), so a stage keeps --dsc-foot clear under its last line.

   1. common   2. Today   3. Collections and a Collection   4. the Universe   5. the Library album
   6. You and Film DNA   7. Settings   8. sheets */

/* ================================================================== 1. common */
html[data-duo-spread] { --dsc-foot: 84px; --dsc-top: calc(var(--safe-top, 0px) + 24px); }
.ds-ten-board, .dsc-frontis, .dsc-pick, .dsc-lines-page, .dsc-index-page, .dsc-window { display: none; }
/* a stage this layer fills scrolls on its own if Larger Text makes it longer than the page */
html.ds[data-duo-spread] #device > .screen.dsc-spread > .dsp-stage {
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
html.ds[data-duo-spread] #device > .screen.dsc-spread > .dsp-stage::-webkit-scrollbar { display: none; }
/* the page's name capsule stands over the page that scrolls: the action page */
html.ds[data-duo-spread="book"] #device:has(> .screen.dsp-page.dsc-spread:not(.fluid-departure)) > .ds-tsx-bar {
  left: var(--dsp-acx) !important; right: 0 !important; max-width: var(--dsp-acw) !important; margin: 0 auto;
}
/* a stage page's paper: a little lighter at the fold, so the two pages read as one open book */
html.ds[data-duo-spread="book"] #device > .screen.dsc-spread > .dsp-stage::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 28px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .025));
}

/* ================================================================== 2. Today
   Stage: The Ten as a tall ranked leaderboard. Action: the masthead, the week's things, Cinema as a listings booklet. */
html.ds[data-duo-spread] #device > .today-screen.dsc-spread > .ds-ten-board {
  display: flex !important; flex-direction: column;
  padding: var(--dsc-top) var(--dsp-gut) var(--dsc-foot) !important;
  background: color-mix(in srgb, rgb(var(--ten-rgb, 62 52 120)) 14%, var(--c-stage));
  isolation: isolate;
}
html.ds[data-duo-spread] .ds-ten-board > .ds-ten-board-wash {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 70% at 20% 0%, rgb(var(--ten-rgb, 98 70 180) / .42), transparent 70%);
}
html.ds[data-duo-spread] .ds-ten-board > .ds-ten-board-wash > img {
  position: absolute; inset: 0 0 auto; width: 100%; height: 52%; object-fit: cover; opacity: .34;
  -webkit-mask: linear-gradient(180deg, black 30%, transparent); mask: linear-gradient(180deg, black 30%, transparent);
}
html.ds[data-duo-spread] .ds-ten-board-head { margin: 0 0 10px; }
html.ds[data-duo-spread] .ds-ten-board-title {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font: 700 calc(26 * var(--type-unit, 1px))/1.05 var(--font-ui); letter-spacing: var(--tr-caps); color: var(--c-label-1);
}
html.ds[data-duo-spread] .ds-ten-board-head > p { margin: 4px 0 0; font: var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
html.ds[data-duo-spread] .ds-ten-board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: none; }
html.ds[data-duo-spread] .ds-ten-brow-btn {
  display: grid; grid-template-columns: 26px 22px minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  width: 100%; min-height: 34px; padding: 2px 10px 2px 4px; box-sizing: border-box;
  border: 0; border-radius: var(--r-row, 12px); background: transparent; color: var(--c-label-1); text-align: left; cursor: pointer;
  font: inherit;
}
html.ds[data-duo-spread] .ds-ten-brow:nth-child(odd) .ds-ten-brow-btn { background: rgb(255 255 255 / .035); }
html.ds[data-duo-spread] .ds-ten-brow.is-first .ds-ten-brow-btn { background: rgb(var(--ten-rgb, 120 90 220) / .22); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
html.ds[data-duo-spread] .ds-ten-brow-btn:active { background: var(--c-fill-2); }
html.ds[data-duo-spread] .ds-ten-brow-rank {
  font: 700 calc(19 * var(--type-unit, 1px))/1 var(--font-ui); text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: var(--c-label-3);
}
html.ds[data-duo-spread] .ds-ten-brow:nth-child(-n+3) .ds-ten-brow-rank { color: var(--c-label-1); }
html.ds[data-duo-spread] .ds-ten-brow-poster {
  width: 22px; height: 32px; border-radius: 4px; overflow: hidden; background: var(--c-fill-2); display: grid; place-items: center;
}
html.ds[data-duo-spread] .ds-ten-brow-poster > img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.ds[data-duo-spread] .ds-ten-brow-poster .ds-pf-title, html.ds[data-duo-spread] .ds-ten-brow-poster .ds-pf-year { display: none; }
html.ds[data-duo-spread] .ds-ten-brow-poster .tm-seal svg { width: 14px; height: 14px; }
html.ds[data-duo-spread] .ds-ten-brow-copy { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
html.ds[data-duo-spread] .ds-ten-brow-copy > strong { font: 600 var(--fs-subhead)/1.2 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html.ds[data-duo-spread] .ds-ten-brow-copy > small { font: var(--fs-caption-1)/1.2 var(--font-ui); color: var(--c-label-3); white-space: nowrap; flex: none; }
html.ds[data-duo-spread] .ds-ten-brow-move { font: 700 var(--fs-caption-2)/1 var(--font-ui); padding: 3px 6px; border-radius: var(--r-pill, 99px); background: rgb(0 0 0 / .35); }
html.ds[data-duo-spread] .ds-ten-brow-move[data-move="up"] { color: #7ee2a8; }
html.ds[data-duo-spread] .ds-ten-brow-move[data-move="down"] { color: #ff8f8f; }
html.ds[data-duo-spread] .ds-ten-brow-move[data-move="new"] { color: #c6b2ff; }
html.ds[data-duo-spread] .ds-ten-brow.is-sealed .ds-ten-brow-copy > strong { color: var(--c-label-2); }
html.ds[data-duo-spread] .ds-ten-brow.is-ghost .ds-ten-brow-btn { opacity: .5; }
html.ds[data-duo-spread] .ds-ten-board-foot { margin-top: 10px; display: grid; gap: 4px; justify-items: center; }
html.ds[data-duo-spread] .ds-ten-board-foot > .ds-ten-cta { height: 44px; min-height: 44px; }
html.ds[data-duo-spread] .ds-ten-board-foot > .ds-ten-cta { width: 100%; }
html.ds[data-duo-spread] .ds-ten-board-foot > .ds-ten-sealed-line {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; border: 0; background: none; padding: 0 6px;
  font: var(--fs-footnote)/1.3 var(--font-ui); color: var(--c-label-2); cursor: pointer;
}
html.ds[data-duo-spread] .ds-ten-board-foot > .ds-ten-sealed-line svg { width: 14px; height: 14px; }
html.ds[data-duo-spread] .ds-ten-board-foot > .ds-ten-credit { font: var(--fs-caption-2)/1.3 var(--font-ui); color: var(--c-label-3); }
/* half-open: the stage is the top half, so the ten stand in two columns of five */
html.ds[data-duo-spread="half"] #device > .today-screen.dsc-spread > .ds-ten-board { padding: calc(var(--safe-top, 0px) + 14px) var(--dsp-gut) 12px !important; }
html.ds[data-duo-spread="half"] .ds-ten-board-head > p { display: none; }
html.ds[data-duo-spread="half"] .ds-ten-board-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(5, auto); column-gap: 16px; }
html.ds[data-duo-spread="half"] .ds-ten-board-foot { grid-template-columns: auto auto auto; align-items: center; justify-content: space-between; }
html.ds[data-duo-spread="half"] .ds-ten-board-foot > .ds-ten-cta { width: auto; padding: 0 22px; }
/* the card stays in the Cinema section for every other display; on the spread its place is the stage */
html.ds[data-duo-spread] #device > .today-screen.dsc-spread:has(> .ds-ten-board) .ds-now-next > .ds-ten-card { display: none !important; }
/* the masthead on the action page starts where the page does */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread > .app-header { margin-top: 0 !important; }

/* Cinema as a listings booklet: one entry a line (the poster, the title, its split-flap tiles; Tickets, or the bell and the
   calendar), out now above the Today marker and what is coming under it, ruled like a programme. */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs {
  margin-top: 8px; padding: 16px 0 6px; border-radius: var(--r-card, 20px);
  background: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / .02));
  box-shadow: inset 0 0 0 1px var(--c-line);
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-head { padding: 0 16px 8px; margin: 0; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-stage { overflow: visible !important; height: auto !important; -webkit-mask: none !important; mask: none !important; padding: 0 !important; margin: 0 !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-reel {
  display: flex !important; flex-direction: column !important; gap: 0 !important;
  overflow: visible !important; height: auto !important; width: auto !important;
  padding: 0 !important; margin: 0 !important; scroll-snap-type: none !important; transform: none !important;
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 10px; flex: none !important;
  width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important;
  padding: 10px 16px 10px 40px !important; box-sizing: border-box; transform: none !important; opacity: 1 !important;
}
/* the programme's rail runs down the booklet: solid for what is out, dotted for what is coming, a node at each film */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item:not(.ds-cs-today)::before {
  top: 0 !important; bottom: 0 !important; left: 19px !important; right: auto !important; width: 2px !important; height: auto !important;
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item.is-next:not(.ds-cs-today)::before,
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item-end:not(.ds-cs-today)::before {
  background: repeating-linear-gradient(180deg, var(--c-line-strong) 0 3px, transparent 3px 6px) !important;
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item:not(.ds-cs-today)::after { top: calc(50% - 5px) !important; left: 15px !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item:not(.ds-cs-today) + .ds-cs-item:not(.ds-cs-today) > .ds-cs-card { box-shadow: 0 -11px 0 -10px var(--c-line); }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item:first-child::before { top: 50% !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item:last-child::before { bottom: 50% !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item > .ds-cs-card {
  display: flex !important; flex-direction: row !important; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0;
  width: auto !important; height: auto !important; padding: 0 !important; text-align: left;
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item .ds-cs-art {
  flex: none; width: 46px !important; height: 69px !important; aspect-ratio: auto !important; border-radius: 6px; margin: 0 !important;
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item .ds-cs-art img { width: 100%; height: 100%; object-fit: cover; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item .ds-cs-copy {
  display: grid !important; gap: 6px; min-width: 0; padding: 0 !important; text-align: left !important; justify-items: start;
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item .ds-cs-copy > strong {
  font: 600 var(--fs-subhead)/1.25 var(--font-ui); -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; min-height: 0 !important;
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item .ds-cs-when { margin: 0 !important; justify-content: flex-start !important; }
/* (5 November 2026, the owner: the Tickets pill covered the film titles) the phone's row stacks the action under the card at the
   card's full width (ds-coming-soon.css: .ds-cs-item > .ds-cs-act { width: 100% }); in the booklet the action stands BESIDE the
   card, so it takes its own width only and the card keeps the rest of the row: never a pill as wide as the row laid over the title. */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item > :is(.ds-cs-act, .ds-cs-acts) { flex: none; width: auto !important; max-width: 50%; margin: 0 !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item > .ds-cs-acts { display: flex !important; gap: 8px; }
/* the Today marker: a rule across the booklet with the day on it */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item.ds-cs-today {
  position: relative; justify-content: flex-start; min-height: 40px !important; padding: 0 16px 0 8px !important;
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item.ds-cs-today::before,
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-item.ds-cs-today::after { display: none !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-today > .ds-cs-today-line {
  position: absolute !important; left: 8px !important; right: 16px !important; top: 50% !important; bottom: auto !important;
  width: auto !important; height: 1px !important; transform: none !important; background: var(--c-line-strong) !important;
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-spread .ds-cs-today > .ds-cs-today-tag { position: relative !important; inset: auto !important; transform: none !important; margin: 0 !important; z-index: 1; }

/* ================================================================== 3. Collections (home) and a Collection */
/* (10 November 2026) the stage page starts after the rail (--dsp-stx): the whole Collections spread is set in by it */
html.ds[data-duo-spread="book"] #device > .collections-api-screen.dsc-spread { padding-left: var(--dsp-stx, 0px) !important; padding-right: 0 !important; }
html.ds[data-duo-spread="book"] #device > .collections-api-screen.dsc-spread > .app-header { margin: 0 var(--dsp-gut) !important; width: var(--dsp-scolw); }
html.ds[data-duo-spread="book"] #device > .collections-api-screen.dsc-spread > .collections-api-content {
  display: grid !important; grid-template-columns: var(--dsp-stw) var(--dsp-spw) minmax(0, 1fr); align-items: start;
  max-width: none !important; padding: 0 !important; margin: 0 !important;
}
/* the door: both pages wide, the hinge its window's mullion */
html.ds[data-duo-spread="book"] #device > .collections-api-screen.dsc-spread > .collections-api-content > .cu-block {
  grid-column: 1 / -1; grid-row: 1; position: relative;
  width: auto !important; max-width: none !important; margin: 16px var(--dsp-gut) 28px !important;
  border-radius: var(--r-card, 20px); overflow: hidden;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 0 0 7px rgb(14 12 20), 0 0 0 8px rgb(255 255 255 / .08), 0 22px 60px rgb(0 0 0 / .5);
}
html.ds[data-duo-spread="book"] #device > .collections-api-screen.dsc-spread .cu-block .cu-door { width: 100% !important; max-width: none !important; height: 240px !important; aspect-ratio: auto !important; }
html.ds[data-duo-spread="book"] #device > .collections-api-screen.dsc-spread .cu-block .cu-door-room { height: 100% !important; aspect-ratio: auto !important; }
html.ds[data-duo-spread="book"] #device > .collections-api-screen.dsc-spread .cu-block :is(.cu-door-cinema-img, .cu-door-cinema img) { width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 62%; }
/* the door's words keep to the stage page */
html.ds[data-duo-spread="book"] #device > .collections-api-screen.dsc-spread .cu-block :is(.cu-door-copy, .cu-door-words, .cu-door-label, .cu-door-text) { max-width: calc(var(--dsp-scolw) - 24px) !important; }
html.ds[data-duo-spread="book"] #device > .collections-api-screen.dsc-spread > .collections-api-content > .cu-block::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 6; pointer-events: none;
  left: calc(var(--dsp-spx) - var(--dsp-stx, 0px) - var(--dsp-gut) - 6px); width: calc(var(--dsp-spw) + 12px);
  background: linear-gradient(90deg, rgb(0 0 0 / .55), rgb(26 22 34) 22%, rgb(46 40 58) 50%, rgb(26 22 34) 78%, rgb(0 0 0 / .55));
  box-shadow: -6px 0 14px rgb(0 0 0 / .45), 6px 0 14px rgb(0 0 0 / .45);
}
/* (10 November 2026) the mullion takes the touches that land on the fold, so the door is pressed on either side of it, never on it */
html.ds[data-duo-spread="book"] #device > .collections-api-screen.dsc-spread > .collections-api-content > .cu-block::after { pointer-events: auto; }
html.ds[data-duo-spread="book"] #device > .collections-api-screen.dsc-spread > .collections-api-content > .collections-api-header {
  grid-column: 3; grid-row: 2; padding: 0 var(--dsp-gut) !important; margin: 0 0 4px !important;
}
html.ds[data-duo-spread="book"] #device > .collections-api-screen.dsc-spread > .collections-api-content > .collections-films {
  grid-column: 3; grid-row: 3; min-width: 0; margin: 0 !important; padding: 0 var(--dsp-gut) 120px !important; box-sizing: border-box;
}
/* the frontispiece: the cover and the curator's note of the Collection in view on the action page */
html.ds[data-duo-spread="book"] #device > .collections-api-screen.dsc-spread .dsc-frontis {
  display: flex; flex-direction: column; grid-column: 1; grid-row: 2 / span 2; align-self: start;
  position: sticky; top: calc(var(--safe-top, 0px) + 16px);
  margin: 0 var(--dsp-gut); height: calc(var(--dsp-sth) - var(--safe-top, 0px) - 16px - var(--dsc-foot)); min-height: 280px;
  box-sizing: border-box; border-radius: var(--r-card, 20px); overflow: hidden;
  background: color-mix(in srgb, var(--dsc-tint, rgb(120 90 200)) 22%, rgb(16 14 22));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
}
.dsc-frontis-plate { position: relative; flex: 1 1 52%; min-height: 0; overflow: hidden; }
.dsc-frontis-plate > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dsc-frontis-plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgb(16 14 22 / .9)); }
.dsc-frontis-blank { position: absolute; inset: 0; background: radial-gradient(80% 80% at 50% 30%, rgb(255 255 255 / .12), transparent); }
.dsc-frontis-words { flex: none; padding: 14px 18px 16px; display: grid; gap: 6px; }
.dsc-frontis-kicker { margin: 0; font: 600 var(--fs-caption-2)/1.2 var(--font-ui); letter-spacing: var(--tr-caps, .08em); text-transform: uppercase; color: var(--c-label-2); }
.dsc-frontis-title { margin: 0; font: 600 var(--fs-title-2)/1.15 var(--font-ui); color: var(--c-label-1); }
.dsc-frontis-note { margin: 0; font: var(--fs-footnote)/1.4 var(--font-ui); color: var(--c-label-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.dsc-frontis-foot { margin: 4px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: var(--fs-caption-1)/1.2 var(--font-ui); color: var(--c-label-3); }
.dsc-frontis-open {
  min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--r-pill, 99px);
  background: var(--c-lamp); color: var(--c-lamp-ink); font: 600 var(--fs-subhead)/1 var(--font-ui); cursor: pointer;
}
/* a Collection: its frontispiece is the stage, its films the action page; the header's buttons stand over the two pages' tops */
html.ds[data-duo-spread] #device > .collections-api-detail.dsc-spread > .dsc-frontis-page {
  display: flex !important; flex-direction: column; gap: 14px;
  padding: calc(var(--safe-top, 0px) + 76px) var(--dsp-gut) var(--dsc-foot) !important;
  background: radial-gradient(90% 60% at 30% 10%, color-mix(in srgb, var(--hero-rgb, rgb(150 110 40)) 30%, transparent), transparent 80%);
}
html.ds[data-duo-spread] #device > .collections-api-detail.dsc-spread > .dsc-frontis-page > .collection-hero { width: auto !important; margin: 0 !important; float: none !important; flex: none; }
html.ds[data-duo-spread] #device > .collections-api-detail.dsc-spread > .dsc-frontis-page > .collection-detail-copy { width: auto !important; margin: 0 !important; float: none !important; padding: 0 !important; }
html.ds[data-duo-spread] #device > .collections-api-detail.dsc-spread > .dsc-head-free {
  position: absolute !important; top: 0; left: 0; right: 0; z-index: 4; margin: 0 !important; width: auto !important; max-width: none !important; pointer-events: none;
}
html.ds[data-duo-spread] #device > .collections-api-detail.dsc-spread > .dsc-head-free > * { pointer-events: auto; }
html.ds[data-duo-spread="book"] #device > .collections-api-detail.dsc-spread > .dsc-head-free > .eyebrow { max-width: calc(var(--dsp-scolw) - 60px); text-align: left; }
html.ds[data-duo-spread] #device > .collections-api-detail.dsc-spread > .collection-films-heading { margin-top: calc(var(--safe-top, 0px) + 84px) !important; }
html.ds[data-duo-spread] #device > .collections-api-detail.dsc-spread > .collection-film-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html.ds[data-duo-spread] #device > .collections-api-detail.dsc-spread > .dsd-end .dsd-end-card { max-width: 100%; }

/* ================================================================== 4. the Universe: the sky keeps the whole display; the hinge is its window's frame */
html.ds[data-duo-spread="book"] #device > .cu-screen.dsc-spread > .dsc-window {
  display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 6px rgb(12 10 18 / .85), inset 0 0 0 7px rgb(255 255 255 / .07), inset 0 0 40px rgb(0 0 0 / .45);
}
html.ds[data-duo-spread="book"] #device > .cu-screen.dsc-spread > .dsc-window > .dsc-window-mullion {
  position: absolute; top: 0; bottom: 0; left: calc(var(--dsp-spx) - 8px); width: calc(var(--dsp-spw) + 16px);
  background: linear-gradient(90deg, rgb(0 0 0 / .5), rgb(22 19 30) 25%, rgb(42 37 54) 50%, rgb(22 19 30) 75%, rgb(0 0 0 / .5));
  box-shadow: -8px 0 18px rgb(0 0 0 / .4), 8px 0 18px rgb(0 0 0 / .4);
}

/* ================================================================== 5. the Library: an album
   Stage: your shelf (the title, the search, the rooms, the room's films). Action: the film you chose, standing still while the
   shelf scrolls (.dsc-pick, a sticky anchor of no height whose page is placed on the action page). */
html.ds[data-duo-spread="book"] #device > .library-screen { padding-left: 0 !important; padding-right: 0 !important; }
html.ds[data-duo-spread="book"] #device > .library-screen > :not(.dsc-pick, .dslc-rooms, .global-trio-atmosphere, .ds-tsx-room) {
  margin-left: var(--dsp-scolx) !important; margin-right: 0 !important;
  width: var(--dsp-scolw) !important; max-width: var(--dsp-scolw) !important; box-sizing: border-box;
}
html.ds[data-duo-spread="book"] #device > .library-screen > .dslc-rooms { margin: 0 !important; max-width: none !important; width: auto !important; }
html.ds[data-duo-spread="book"] #device > .library-screen .dslc-room { padding: 0 !important; display: block !important; position: relative; }
html.ds[data-duo-spread="book"] #device > .library-screen .dslc-room > * {
  margin-left: var(--dsp-scolx) !important; margin-right: 0 !important;
  width: var(--dsp-scolw) !important; max-width: var(--dsp-scolw) !important; box-sizing: border-box;
}
/* the shelf: the newest film a wide plate, the rest three to a row */
html.ds[data-duo-spread="book"] #device > .library-screen .dslc-room > .dslc-next { height: 200px !important; position: relative !important; top: auto !important; margin-bottom: 16px !important; }
html.ds[data-duo-spread="book"] #device > .library-screen .dslc-room > .dslc-next .dslc-next-poster { height: 100% !important; }
html.ds[data-duo-spread="book"] #device > .library-screen .dslc-room > .watchlist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px 10px !important; padding: 0 !important; }
html.ds[data-duo-spread="book"] #device > .library-screen .dslc-room > .watchlist-grid.is-small { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
html.ds[data-duo-spread="book"] #device > .library-screen .watchlist-grid > .dsc-chosen .library-grid-poster,
html.ds[data-duo-spread="book"] #device > .library-screen .dslc-next.dsc-chosen .dslc-next-poster {
  box-shadow: 0 0 0 2px var(--c-lamp), 0 10px 26px rgb(0 0 0 / .45);
}
html.ds[data-duo-spread="book"] #device > .library-screen > .dsc-pick {
  display: block; position: sticky; top: 0; z-index: 3; height: 0;
  margin: calc(-1 * var(--dsc-pt, 0px)) 0 var(--dsc-pt, 0px) 0 !important; width: 0 !important; max-width: none !important;
}
html.ds[data-duo-spread="book"] #device > .library-screen > .dsc-pick:not([data-has]) { visibility: hidden; }
html.ds[data-duo-spread="book"] .dsc-pick > .dsc-pick-page {
  position: absolute; top: 0; left: var(--dsp-acx); width: var(--dsp-acw); height: var(--dsp-ach);
  box-sizing: border-box; padding: var(--dsc-top) calc(var(--dsp-gut) + 8px) 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
}
.dsc-pick-kicker { margin: 0; font: 600 var(--fs-caption-2)/1.2 var(--font-ui); letter-spacing: var(--tr-caps, .08em); text-transform: uppercase; color: var(--c-label-3); }
.dsc-pick-print {
  position: relative; height: min(56vh, 360px); aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden;
  background: var(--c-fill-2); box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 24px 60px rgb(0 0 0 / .55);
}
.dsc-pick-print > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dsc-pick-print > .frt-chip { position: absolute; top: 10px; right: 10px; }
.dsc-pick-title { margin: 6px 0 0; font: 600 var(--fs-title-2)/1.15 var(--font-ui); color: var(--c-label-1); }
.dsc-pick-meta { margin: 0; font: var(--fs-subhead)/1.3 var(--font-ui); color: var(--c-label-2); }
.dsc-pick-open {
  margin-top: 6px; min-height: 44px; padding: 0 26px; border: 0; border-radius: var(--r-pill, 99px);
  background: var(--c-lamp); color: var(--c-lamp-ink); font: 600 var(--fs-headline, 17px)/1 var(--font-ui); cursor: pointer;
}
/* the Cards room's shelf stands on one page of the album: its seasons one under the other, each row of five the size it is on a
   phone (film-cards-week.css lays a season to a leaf when the shelf ran across both) */
html.ds[data-duo-spread="book"] #device > .library-screen .fc-shelf { grid-template-columns: minmax(0, 1fr) !important; }
html.ds[data-duo-spread="book"] #device > .library-screen .fc-shelf > * { grid-column: 1 / -1 !important; }
/* a room that is not a shelf of films: what it holds that is not its shelf stands on the action page */
html.ds[data-duo-spread="book"] #device > .library-screen .dslc-room > :is(.dslc-cards-week, .dsc-right) {
  position: absolute !important; top: var(--dsc-right-y, 0px); left: 0;
  margin-left: var(--dsp-colx) !important; width: var(--dsp-colw) !important; max-width: var(--dsp-colw) !important;
}
/* an empty room: Flick on the stage page; what the room is for and what to do, on the action page, level with him */
html.ds[data-duo-spread="book"] #device > .library-screen .dslc-room > .dslc-shelf-empty {
  display: grid !important; grid-template-columns: var(--dsp-scolw) calc(var(--dsp-colx) - var(--dsp-scolx) - var(--dsp-scolw)) var(--dsp-colw);
  grid-template-rows: auto auto auto 1fr; align-items: start; justify-items: center; text-align: center;
  width: auto !important; max-width: none !important; padding: 0 !important;
}
html.ds[data-duo-spread="book"] #device > .library-screen .dslc-shelf-empty > .sps { grid-column: 1; grid-row: 1 / span 4; margin: 0 !important; width: 100% !important; }
html.ds[data-duo-spread="book"] #device > .library-screen .dslc-shelf-empty > :not(.sps) { grid-column: 3; margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; }
html.ds[data-duo-spread="book"] #device > .library-screen .dslc-shelf-empty > h3 { margin-top: 28px !important; }
html.ds[data-duo-spread="book"] #device > .library-screen[data-dsc-empty] .dslc-room > :is(.dslc-room-foot, .stg-reel) {
  margin-left: var(--dsp-colx) !important; width: var(--dsp-colw) !important; max-width: var(--dsp-colw) !important;
}

/* ================================================================== 6. You and Film DNA: the print, and its five lines */
html.ds[data-duo-spread] #device > .screen.dsc-spread > .dsc-print.dsp-stage {
  display: flex !important; flex-direction: column; justify-content: flex-start;
  padding: var(--dsc-top) var(--dsp-gut) var(--dsc-foot) !important;
}
html.ds[data-duo-spread] #device > .profile-screen.dsc-spread > .dsc-print > .dsy-dna-card { margin: 0 !important; width: 100% !important; }
html.ds[data-duo-spread] #device > .fd-page.dsc-spread > .dsc-print { padding-top: calc(var(--safe-top, 0px) + 76px) !important; }
html.ds[data-duo-spread] #device > .fd-page.dsc-spread > .dsc-print > .fd-hero { margin: 0 !important; }
/* the lit line: its lane glows in its own colour, the others fall back */
html.ds[data-duo-spread] .dsc-print[data-dsc-lit] .fd-lane { opacity: .32; transition: opacity var(--motion-normal) var(--motion-curve); }
html.ds[data-duo-spread] .dsc-print[data-dsc-lit] .fd-lane.dsc-lit { opacity: 1; filter: drop-shadow(0 0 10px var(--h)); }
html.ds[data-duo-spread] .dsc-print[data-dsc-lit] .fd-lane.dsc-lit .fd-bead { box-shadow: 0 0 0 4px color-mix(in srgb, var(--h) 35%, transparent), 0 0 22px var(--h); }
html.ds[data-duo-spread] .dsc-print[data-dsc-lit] .fd-thread { opacity: .35; }
@media (prefers-reduced-motion: reduce) { html.ds[data-duo-spread] .dsc-print[data-dsc-lit] .fd-lane { transition: none; } }
html.ds[data-duo-spread] #device > .screen.dsc-spread > .dsc-lines-page { display: block; margin-bottom: 20px !important; }
html.ds[data-duo-spread] .dsc-lines-head { margin-top: 4px; }
html.ds[data-duo-spread] .dsc-lines > .dsc-line { width: 100%; text-align: left; align-items: center; }
html.ds[data-duo-spread] .dsc-line-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; margin: 0 12px 0 4px; background: var(--h); box-shadow: 0 0 0 3px color-mix(in srgb, var(--h) 22%, transparent); }
html.ds[data-duo-spread] .dsc-line-ends { font-weight: 400; color: var(--c-label-3); font-size: var(--fs-footnote); margin-left: 4px; }
html.ds[data-duo-spread] .dsc-line[aria-pressed="true"] { background: color-mix(in srgb, var(--h) 14%, transparent); }
html.ds[data-duo-spread] .dsc-line[aria-pressed="true"] .dsc-line-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--h) 40%, transparent), 0 0 16px var(--h); }
/* You: the brand and the title open the action page */
html.ds[data-duo-spread] #device > .profile-screen.dsc-spread > .app-header { margin-top: 0 !important; }
/* Film DNA and Settings: the page's nav (Back and the title) stands at the top of the stage page */
html.ds[data-duo-spread] #device > .screen.dsc-spread:is(.fd-page, .dsy-page-settings, [data-dsc="settingsChild"]) > .dsy-nav {
  position: absolute !important; top: calc(var(--safe-top, 0px) + 20px); left: var(--dsp-scolx); z-index: 4;
  width: var(--dsp-scolw) !important; max-width: var(--dsp-scolw) !important; margin: 0 !important;
}
html.ds[data-duo-spread="half"] #device > .screen.dsc-spread:is(.fd-page, .dsy-page-settings, [data-dsc="settingsChild"]) > .dsy-nav { left: var(--dsp-gut); width: calc(100% - 2 * var(--dsp-gut)) !important; max-width: none !important; }
html.ds[data-duo-spread] #device > .screen.dsc-spread:is(.fd-page, .dsy-page-settings, [data-dsc="settingsChild"]) > :not(.dsp-stage, .dsy-nav, .dsp-free):first-of-type,
html.ds[data-duo-spread] #device > .screen.dsc-spread:is(.fd-page, .dsy-page-settings, [data-dsc="settingsChild"]) > .dsy-nav + :not(.dsp-stage) { margin-top: 0 !important; }
html.ds[data-duo-spread] #device > .fd-page.dsc-spread[data-dsc-sub] > .dsc-lines-page { display: none; }

/* ================================================================== 7. Settings: split view */
html.ds[data-duo-spread] #device > .screen.dsc-spread > .dsc-index-page.dsp-stage {
  display: block !important; padding: calc(var(--safe-top, 0px) + 80px) var(--dsp-gut) var(--dsc-foot) !important;
}
.dsc-index { display: grid; gap: 4px; }
.dsc-index-head { margin: 0 0 6px 12px; font: 600 var(--fs-footnote)/1.3 var(--font-ui); color: var(--c-label-3); }
.dsc-index-row {
  display: grid; gap: 2px; width: 100%; min-height: 52px; padding: 9px 14px; box-sizing: border-box; text-align: left;
  border: 0; border-radius: var(--r-row, 12px); background: transparent; color: var(--c-label-1); cursor: pointer; font: inherit;
}
.dsc-index-row:active { background: var(--c-fill-2); }
.dsc-index-row.is-on { background: var(--c-fill-2); box-shadow: inset 3px 0 0 var(--c-lamp); }
.dsc-index-name { font: 600 var(--fs-body)/1.25 var(--font-ui); }
.dsc-index-sub { font: var(--fs-footnote)/1.3 var(--font-ui); color: var(--c-label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ds[data-duo-spread] #device > .dsy-page-settings.dsc-spread > .settings-section.dsc-hidden { display: none !important; }
html.ds[data-duo-spread] #device > .dsy-page-settings.dsc-spread > .settings-section.dsc-shown { margin-top: calc(var(--safe-top, 0px) + 72px) !important; }
html.ds[data-duo-spread] #device > .dsy-page-settings.dsc-spread > .settings-section.dsc-shown > .ds-list-header { font: 600 var(--fs-title-3)/1.2 var(--font-ui); color: var(--c-label-1); text-transform: none; letter-spacing: 0; margin-bottom: 12px; }
html.ds[data-duo-spread] #device > .screen.dsc-spread[data-dsc="settingsChild"] > :not(.dsp-stage, .dsy-nav, .dsp-free, .ds-tsx-room, .global-trio-atmosphere):nth-child(1 of :not(.dsp-stage, .dsy-nav, .dsp-free, .ds-tsx-room, .global-trio-atmosphere)) { margin-top: calc(var(--safe-top, 0px) + 72px) !important; }

/* ================================================================== 8. sheets: a page laid over the action leaf
   Every kind of sheet (the app's one sheet and its pages, Your services, membership, the account's, share) lies over the action
   page, a page on a page, with the stage dimmed under it but still in sight; none is a phone sheet across the hinge. */
html.ds[data-duo-spread="book"] #device > .ds-sheet-layer > .ds-sheet-host,
html.ds[data-duo-spread="book"] #device > .screen.ds-sheet-host,
html.ds[data-duo-spread="book"] #device > .tm-sheet-layer .tm-sheet,
html.ds[data-duo-spread="book"] #device > .ta-sheet-layer .ta-sheet,
html.ds[data-duo-spread="book"] #device dialog.film-platforms-sheet.ds-sheet-host,
html.ds[data-duo-spread="book"] #device dialog.film-platforms-sheet {
  left: calc(var(--dsp-acx) + 6px) !important; right: 6px !important; top: calc(var(--safe-top, 0px) + 8px) !important; bottom: 8px !important;
  width: auto !important; max-width: none !important; height: auto !important; max-height: none !important;
  margin: 0 !important; border-radius: var(--r-sheet, 28px) !important;
  border: 1px solid var(--c-line-strong) !important; box-sizing: border-box;
  box-shadow: -18px 0 50px rgb(0 0 0 / .5), var(--e-sheet, 0 0 0 transparent);
}
html.ds[data-duo-spread="book"] #device dialog.film-platforms-sheet { position: fixed; inset: calc(var(--safe-top, 0px) + 8px) 6px 8px calc(var(--dsp-acx) + 6px) !important; }
/* a sheet of a few lines (membership's, the account's) is a page as tall as what it says, standing in the middle of the leaf */
html.ds[data-duo-spread="book"] #device > :is(.tm-sheet-layer .tm-sheet, .ta-sheet-layer .ta-sheet) {
  height: fit-content !important; max-height: calc(100% - var(--safe-top, 0px) - 16px) !important; margin-block: auto !important;
}
/* the page under it steps back without shrinking: dimmed, both its pages still in sight */
html.ds[data-duo-spread="book"] #device.ds-presenting > .screen:not(.ds-sheet-host):not(.fluid-departure) { transform: none !important; border-radius: 0 !important; opacity: .5; }
html.ds[data-duo-spread="book"] #device > :is(.ds-sheet-layer > .ds-sheet-scrim, .tm-sheet-layer .tm-sheet-scrim, .ta-sheet-layer .ta-sheet-scrim) {
  background: linear-gradient(90deg, rgb(0 0 0 / .5) 0, rgb(0 0 0 / .5) var(--dsp-acx), rgb(0 0 0 / .62) var(--dsp-acx));
}
/* the sheet's grabber means nothing on a page that does not slide down off a phone: it stays, quietly */
html.ds[data-duo-spread="book"] #device :is(.ds-sheet-host, .tm-sheet, .ta-sheet) > :is(.ds-sheet-grabber, .ta-grabber, .tm-grabber) { opacity: .5; }

/* ================================================================== 2b. Today held like a book: ONE page, "tonight's programme"
   (owner, 11 November 2026: "redesign these to look better across the open screen ... brilliant at using the space"). Not a
   spread (duo-spread-browse.js SYNC.today marks .dsc-today-wide): two equal columns either side of the spine with a 24pt
   gutter on the fold, the left margin Library's (the rail's page column). Row by row:
     1  the masthead (the date and "Today") on the left; this week's card, compact, at the right end of its line
     2  two heroes of one height: the Friday 3 card on the left leaf, the Commuters Corner ticket whole on the right
     3  THE TEN as a lobby strip: ten posters with their outline numerals, 1-5 on the left leaf, 6-10 on the right, the
        gutter on the fold; "View the Ten" at the end of its heading line; while it loads, the ten numbered frames breathe
     4  below, by scrolling: everything else, full width
   Nothing that is pressed stands on the fold. */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide {
  --tw-gap: 12px;
  --tw-l: calc(var(--dsp-stx, 88px) + var(--dsp-gut, 24px));
  --tw-half: calc(var(--dsp-spc) - var(--tw-gap) - var(--tw-l));
  display: grid !important; align-content: start !important; padding: 0 0 48px !important;
  /* (v3) the right leaf runs to a 24pt margin, as Discover's does: the strip and Cinema use the whole width */
  grid-template-columns: var(--tw-l) var(--tw-half) calc(2 * var(--tw-gap)) minmax(0, 1fr) 24px !important;
  grid-auto-rows: auto !important;
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > :not(.ds-tsx-room, .dt-marquee-light, i, .ds-ten-board) {
  grid-column: 2 / 5 !important; position: relative !important; left: auto !important; right: auto !important; transform: none !important;
  margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box;
}
/* 1 */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .app-header { grid-row: 1 !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-masthead { grid-row: 1 !important; grid-column: 2 / 4 !important; margin: 20px 0 0 !important; padding: 0 !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-streak-section {
  grid-row: 1 !important; grid-column: 4 !important; align-self: end !important; justify-self: stretch !important; margin: 0 0 4px !important; padding: 0 !important; width: auto !important; display: flex !important; justify-content: flex-end;
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-streak-section > .dt-slot { width: max-content !important; margin: 0 0 0 auto !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-streak-section .dt-streak { width: max-content !important; min-height: 44px; padding: 0 0 0 8px !important; gap: 10px; }
/* 2  one height for the two (the ticket's, at the leaf's width) */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > :is(.dt-top, .dt-commute-section) { grid-row: 2 !important; margin: 18px 0 0 !important; padding: 0 !important; align-self: stretch; height: auto !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-top { grid-column: 2 !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-commute-section { grid-column: 4 !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > :is(.dt-top, .dt-commute-section) > .dt-slot { height: 100% !important; margin: 0 !important; padding: 0 !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-top > .dt-slot > * { height: 100% !important; width: 100% !important; margin: 0 !important; box-sizing: border-box; }
/* the ticket shown whole, in a case of the Friday card's own height and corners (the two heroes share one top and bottom) */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-commute-section > .dt-slot {
  display: grid !important; align-content: center; padding: 0 14px !important; border-radius: 28px; box-sizing: border-box;
  background: radial-gradient(90% 70% at 50% 55%, rgb(240 199 134 / .10), transparent 70%), linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / .02));
  box-shadow: inset 0 0 0 1px rgb(240 199 134 / .16);
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-commute-section .ccn-ticket { width: 100% !important; margin: 0 !important; }
/* 3  the strip */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .ds-ten-board {
  grid-row: 3 !important; grid-column: 2 / 5 !important; position: relative !important; top: auto !important; left: auto !important; width: auto !important; height: auto !important;
  margin: 22px 0 0 !important; padding: 18px 0 0 !important; background: none !important; display: grid !important; border-top: 1px solid rgb(255 255 255 / .1);
  grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; align-items: end; row-gap: 0;
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .ds-ten-board > .ds-ten-board-wash { display: none; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .ds-ten-board > .ds-ten-board-head { grid-row: 1 / 3; grid-column: 1; align-self: start; margin: 0; display: grid; gap: 2px; max-width: var(--tw-half); }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-ten-board-title { font-size: calc(20 * var(--type-unit, 1px)); }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-ten-board-head > p { margin: 0; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .ds-ten-board > .ds-ten-board-foot { display: contents; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .ds-ten-board > .ds-ten-cta,
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .ds-ten-board > .ds-ten-board-foot > .ds-ten-cta {
  grid-row: 1; grid-column: 2; justify-self: end; align-self: start; width: auto !important; height: 36px; min-height: 36px; padding: 0 0 0 12px !important; margin: 0 !important;
  background: none !important; box-shadow: none !important; border: 0 !important; color: var(--c-label-1); display: inline-flex; align-items: center; gap: 6px;
  font: var(--fw-subhead) var(--fs-subhead)/1 var(--font-ui) !important; letter-spacing: 0 !important; text-transform: none;
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .ds-ten-board .ds-ten-cta .ds-ten-cta-bars { display: none; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .ds-ten-board .ds-ten-cta > span { font: var(--fw-caption-1-strong, 600) var(--fs-caption-1, 12px)/1 var(--font-ui); letter-spacing: .12em; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .ds-ten-board .ds-ten-cta > .ds-ten-cta-go { position: static !important; inset: auto !important; transform: none !important; margin: 0 !important; width: 14px; height: 14px; flex: none; }
/* the sealed line (a free plan) under View the Ten, on the right leaf; the list's time under the subtitle: both in The Ten's
   heading, nothing orphaned under the posters, nothing pressed on the fold */
/* under the strip: the list's time on the left, small; the sealed line (a free plan) on the right leaf */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .ds-ten-board .ds-ten-sealed-line { grid-row: 4; grid-column: 2; justify-self: end; align-self: center; min-height: 32px; padding: 0 !important; margin-top: 6px; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .ds-ten-board .ds-ten-credit { grid-row: 4; grid-column: 1; justify-self: start; align-self: center; margin-top: 8px; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-ten-board-list {
  grid-row: 3; grid-column: 1 / -1; margin-top: 16px; display: grid; gap: 0 var(--tw-gap);
  grid-template-columns: repeat(10, minmax(0, 1fr)); grid-auto-flow: row; column-gap: 8px !important;
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-ten-brow:nth-child(n+6) { grid-column: auto; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-ten-brow-btn {
  position: relative; display: block; width: 100%; min-height: 0; padding: 0 !important; border-radius: 10px; background: none !important; box-shadow: none !important; aspect-ratio: 2 / 3; overflow: visible;
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-ten-brow-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 10px; box-shadow: 0 6px 16px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .08);
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-ten-brow-poster .tm-seal svg { width: 18px; height: 18px; }
/* the lobby's numerals: large, in outline, standing in the poster's lower corner */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-ten-brow-rank {
  position: absolute; left: -4px; bottom: -8px; z-index: 1; text-align: left;
  font: 800 calc(50 * var(--type-unit, 1px))/1 var(--font-ui); letter-spacing: -.06em; color: rgb(10 8 16 / .55) !important;
  -webkit-text-stroke: 1.5px rgb(255 255 255 / .92); paint-order: stroke fill; text-shadow: 0 2px 10px rgb(0 0 0 / .6);
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-ten-brow:nth-child(n+10) .ds-ten-brow-rank { letter-spacing: -.1em; font-size: calc(42 * var(--type-unit, 1px)); }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-ten-brow-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-ten-brow-move { position: absolute; top: 4px; right: 4px; z-index: 1; padding: 2px 5px; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-ten-brow.is-ghost .ds-ten-brow-btn { opacity: 1; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-ten-brow.is-ghost .ds-ten-brow-poster {
  background: var(--c-fill-2); animation: ds-ten-breathe var(--motion-slow) var(--motion-curve) calc(var(--i, 0) * 120ms) 8 alternate both;
}
html.ds[data-duo-spread="book"] #device.manual-reduced-motion > .today-screen.dsc-today-wide .ds-ten-brow.is-ghost .ds-ten-brow-poster { animation: none; }
/* 4  the rest of the programme, the whole width */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > :is(.dt-end, .dt-section:not(.dt-top, .dt-commute-section, .dt-streak-section)) { margin-top: 26px !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-section.dt-weekrow.dt-weekrow { margin-top: 26px !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .ds-now-next { grid-row: 4 !important; }
/* this week's card row and the programme's end, side by side, one to a leaf */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-section.dt-weekrow.dt-weekrow { grid-row: 5 !important; grid-column: 2 !important; align-self: start; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-end { grid-row: 5 !important; grid-column: 4 !important; margin-top: 26px !important; }
/* Cinema: the booklet in two columns, one to a leaf, the gutter on the fold; the Today marker across both */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-cs-reel { display: grid !important; grid-template-columns: var(--tw-half) minmax(0, 1fr) !important; column-gap: calc(2 * var(--tw-gap)) !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-cs { padding-left: 0 !important; padding-right: 0 !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-cs-head { padding: 0 16px 8px !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-cs-item { padding: 10px 14px !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-cs-item:not(.ds-cs-today)::before,
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-cs-item:not(.ds-cs-today)::after { display: none !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-cs-item.ds-cs-today { grid-column: 1 / -1 !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-cs-item:not(.ds-cs-today) + .ds-cs-item:not(.ds-cs-today) > .ds-cs-card { box-shadow: none; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > :not(.ds-tsx-room, .dt-marquee-light, i, .ds-ten-board, .app-header, .dt-masthead, .dt-streak-section, .dt-top, .dt-commute-section, .dt-weekrow, .ds-now-next) { grid-row: auto !important; }
/* the gutter takes the touches that land on the fold, the whole page down (the rows below the strip run the whole width):
   a row is pressed either side of the fold, never on it (as the Collections door's mullion, section 3) */
.dsc-fold-guard { display: none; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > i.dsc-fold-guard {
  display: block !important; position: relative !important; grid-column: 3 !important; grid-row: 1 / span 12 !important; z-index: 6; pointer-events: auto; background: transparent; margin: 0 !important; width: auto !important;
}

/* (pass 5) the hero stands on the page, not on a mirror: no reflection under it here (nice-to-haves.css section 5) */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide [data-dt-slot="hero"] > * { -webkit-box-reflect: below 0 linear-gradient(transparent, transparent) !important; }
/* Cinema comes up to meet the first screen: a closer booklet, its first lines on the first screen (cleanFoot ends that
   screen on a whole line of it) */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .ds-now-next { margin-top: 14px !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-cs { margin-top: 0 !important; padding-top: 10px !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-cs-head { padding-bottom: 4px !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-cs-item { padding: 8px 14px !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .ds-cs-item .ds-cs-art { width: 40px !important; height: 60px !important; }
/* (pass 6) the heroes take the first screen's spare room when Cinema cannot start on it (cleanFoot: --dsc-hero-h) */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide:has(> .dt-top .dt-fri-hero) > .dt-top,
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide:not(:has(> .dt-top .dt-fri-hero)) > .dt-also { min-height: var(--dsc-hero-h, 0px) !important; }
/* the Friday card on the page: its own content, a little closer (the two heroes share its height) */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide .dt-fri.dt-fri-hero { padding-top: 14px !important; padding-bottom: 14px !important; }
/* the atmosphere's strip runs above this week's card here, never through its words */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dsp-atmos > i { top: 6px; left: 4%; }
/* (pass 6) FRIDAY 3 IN EVERY STATE ON THE LEFT HERO. Held like a book the left hero is always Friday 3, as it truly is on the
   iPhone: the electric card while a three waits unopened (ds-today.js puts it in the hero slot), and otherwise the iPhone's
   own Friday row (ds-today.js fridayHtml(), the same words, posters and countdown) set at the hero's size in its place:
   kept ("This week's three", the three posters fanned, "Next Friday 3 in …"), sealed ("Opens Friday at 6pm", the sealed fan,
   the split-flap count), welcome and spent. This week's card, when it is the iPhone's hero, takes a full-width row below. */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide:not(:has(> .dt-top .dt-fri-hero)) > .dt-also {
  grid-row: 2 !important; grid-column: 2 !important; margin: 18px 0 0 !important; padding: 0 !important; align-self: stretch; height: auto !important;
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide:not(:has(> .dt-top .dt-fri-hero)) > .dt-top { grid-row: auto !important; grid-column: 2 / 5 !important; margin-top: 26px !important; }
/* (13 November 2026, coverage audit item 9) ... on the left page, beside the page's end ("That's today's programme") on the
   right, not across the fold (where the small week row is drawn instead, that row keeps the left page and this stays full) */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide:not(:has(> .dt-top .dt-fri-hero)):not(:has(> .dt-weekrow:not([hidden]))) > .dt-top { grid-row: 5 !important; grid-column: 2 !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-also > .dt-slot { height: 100% !important; margin: 0 !important; padding: 0 !important; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-also .dt-fri {
  height: 100%; min-height: 200px; box-sizing: border-box; padding: 20px 14px 20px 22px; border-radius: 28px;
  grid-template-columns: minmax(0, 1fr) 142px; grid-template-rows: minmax(0, 1fr); gap: 8px;
  background: radial-gradient(70% 90% at 78% 50%, rgb(139 92 246 / .3), rgb(139 92 246 / 0) 72%), linear-gradient(160deg, rgb(52 34 98), rgb(26 18 48));
  box-shadow: inset 0 0 0 1px rgb(167 139 250 / .3), 0 18px 40px rgb(0 0 0 / .35);
}
/* the words on the left, the fan on the right (the row's own order is art, words) */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-also .dt-fri-art { grid-column: 2; grid-row: 1; width: 100%; height: 100%; min-height: 150px; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-also .dt-fri-copy { grid-column: 1; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-also .dt-fri-name { font: 700 var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-seal-hi); }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-also .dt-fri-head {
  font: 700 var(--fs-title-2)/calc(28 * var(--type-unit, 1px)) var(--font-ui); letter-spacing: var(--tr-title-2); color: var(--c-label-1);
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-also .dt-fri-line,
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-also .dt-fri-line.is-foot { margin-top: 2px; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-also .dt-fri-line .dt-fri-count { font-weight: 600; color: var(--c-label-1); }
/* the sealed card's clock sits at the words' foot, as the electric card's key does */
/* (the iPhone's clock disc says "Sealed" to VoiceOver only; at the hero's size the word stands beside the clock) */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-also .dt-fri-cta.is-locked {
  position: absolute; left: 22px; bottom: 20px; width: auto; height: 36px; padding: 0 14px 0 11px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 7px;
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-also .dt-fri-cta.is-locked > b { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font: var(--fw-caption-1-strong, 600) var(--fs-caption-1)/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-also .dt-fri:has(.dt-fri-cta.is-locked) .dt-fri-copy { padding-bottom: 48px; }
/* the fan at the hero's size: three posters (or the three sealed cards) as large as the electric card's */
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-also .dt-fan-card {
  width: 64px; height: 96px; margin: -48px 0 0 -32px; border-radius: 9px; box-shadow: 0 14px 28px rgb(0 0 0 / .5);
}
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-also .dt-fan-card.is-l { translate: -38px 6px; rotate: -11deg; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-also .dt-fan-card.is-r { translate: 38px 6px; rotate: 11deg; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-also .dt-fan-card.is-c { translate: 0 -6px; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-also .dt-seal { width: 30px; height: 30px; gap: 3px; }
html.ds[data-duo-spread="book"] #device > .today-screen.dsc-today-wide > .dt-also .dt-seal > b { height: 12px; }

/* (final duofix R2-11, 14 November 2026) a can of the Triptics room on the action page: its window of three posters, large */
.dsc-pick-print.dsc-pick-can { height: auto; width: min(100%, 420px); aspect-ratio: 2 / 1; background: none; }
html.ds #device .dsc-pick-print.dsc-pick-can > .dslc-can-win { height: 100%; border-radius: 14px; gap: 4px; }
html.ds #device .dsc-pick-print.dsc-pick-can > .dslc-can-win.is-sealed::after { width: 44px; height: 44px; }
.dsc-pick-req { max-width: 30ch; text-wrap: balance; }

/* ===== prototype-src/duo-half.css ===== */
/* TRIPTIC on iPhone Duo, HALF-OPEN LIKE A LAPTOP (13 November 2026, the owner's approved mock-ups; behind his preview flag
   "duo-half"). Script pair: duo-half.js. Every rule hangs from html.dh, which duo-spreads.js sets only while the spread is
   "half" (the inner display, 626 x 890, the fold across: --dsp-sth is the top half's height, --dsp-acy where the bottom
   half starts) AND the flag is on. An iPhone, an iPad, the Duo's cover and the Duo held as a book never meet one.
   THE RULE: what you look at on the top half, what you press and read through on the bottom half, nothing on the fold band,
   the keyboard always on the bottom half. Tokens for colour and type where the app has them; nothing here transitions. */

/* ================================================================== the room: the top half's light, the crease, the bottom half's */
html.dh #device .dh-room {
  position: absolute !important; inset: 0 !important; display: block !important; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(12 8 22) 0, rgb(8 6 13) 35%, rgb(5 4 8) 50%, rgb(8 6 13) 65%, rgb(16 10 27) 100%) 0 var(--dsp-spy) / 100% var(--dsp-sph) no-repeat,
    radial-gradient(120% 90% at 85% 0%, rgb(124 77 235 / .38), transparent 60%) 0 0 / 100% var(--dsp-sth) no-repeat,
    radial-gradient(90% 80% at 0% 100%, rgb(80 40 140 / .32), transparent 65%) 0 0 / 100% var(--dsp-sth) no-repeat,
    linear-gradient(180deg, rgb(18 12 31) 0%, rgb(11 8 20) 100%) 0 0 / 100% var(--dsp-sth) no-repeat,
    radial-gradient(110% 70% at 50% 0%, rgb(110 70 200 / .30), transparent 60%) 0 var(--dsp-acy) / 100% var(--dsp-ach) no-repeat,
    radial-gradient(80% 60% at 100% 100%, rgb(70 35 120 / .30), transparent 70%) 0 var(--dsp-acy) / 100% var(--dsp-ach) no-repeat,
    linear-gradient(180deg, rgb(16 10 27) 0%, rgb(8 6 13) 100%) 0 var(--dsp-acy) / 100% var(--dsp-ach) no-repeat;
}
html.dh #device .dh-room::before, html.dh #device .dh-room::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; }
html.dh #device .dh-room::before { top: calc(var(--dsp-spy) + 3px); background: linear-gradient(90deg, transparent, rgb(255 255 255 / .07) 20%, rgb(255 255 255 / .08) 50%, rgb(255 255 255 / .06) 80%, transparent); }
html.dh #device .dh-room::after { top: calc(var(--dsp-acy) - 4px); background: linear-gradient(90deg, transparent, rgb(167 139 250 / .10) 20%, rgb(167 139 250 / .14) 50%, rgb(167 139 250 / .10) 80%, transparent); }

html.dh .dh-eyebrow { margin: 0; font: 600 calc(12 * var(--type-unit, 1px))/1.2 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--c-label-2); }
html.dh :is(.dh-lamp, .dh-pill, .dh-circle, .dh-tile, .dh-row, .dh-recent-row, .dh-ten-it, .dh-p) { -webkit-tap-highlight-color: transparent; cursor: pointer; font-family: var(--font-ui); }
html.dh :is(.dh-lamp, .dh-pill, .dh-circle, .dh-tile, .dh-row, .dh-recent-row, .dh-ten-it, .dh-p):active { transform: scale(.98); }
html.dh :is(.dh-lamp, .dh-pill, .dh-circle, .dh-tile, .dh-row, .dh-recent-row, .dh-ten-it, .dh-p):focus-visible { outline: 2px solid var(--c-seal-hi); outline-offset: 3px; }
html.dh .dh-lamp {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 6px 24px; border: 0; border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgb(247 242 234), rgb(233 225 212)); color: var(--c-lamp-ink);
  box-shadow: 0 8px 22px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255);
  font: 600 calc(17 * var(--type-unit, 1px))/1.15 var(--font-ui); text-align: center;
}
html.dh .dh-pill {
  display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 6px 20px 6px 14px; border-radius: var(--r-pill);
  border: 1px solid rgb(255 255 255 / .16); background: rgb(255 255 255 / .07); color: var(--c-label-1); font: 600 calc(16 * var(--type-unit, 1px))/1.15 var(--font-ui);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
html.dh :is(.dh-lamp, .dh-pill, .dh-circle) svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.dh .dh-circle {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; flex: none;
  border: 1px solid rgb(255 255 255 / .14); background: rgb(20 16 30 / .72); color: var(--c-label-1);
}
html.dh .dh-circle > svg { width: 20px; height: 20px; }

/* ================================================================== the dock: the bottom half's foot, on the tab pages only */
html.dh[data-dh="three"] #device > :is(.persistent-glass-nav, .ds-tab-capsule),
html.dh[data-dh="film"] #device > :is(.persistent-glass-nav, .ds-tab-capsule),
html.dh[data-dh="ritual"] #device > :is(.persistent-glass-nav, .ds-tab-capsule),
html.dh[data-dh="two"] #device > :is(.persistent-glass-nav, .ds-tab-capsule) { visibility: hidden !important; pointer-events: none !important; }
/* typing: the keyboard covers the bottom of the bottom half, and the dock with it (as on an iPhone) */
html.dh[data-keyboard="open"] #device > :is(.persistent-glass-nav, .ds-tab-capsule) { visibility: hidden !important; pointer-events: none !important; }
/* the iPhone's scroll fades at the top and the foot belong to one tall page: half-open each half is its own */
html.dh[data-dh] #device > :is(.ds-tsx-top, .ds-tsx-bar) { display: none !important; }

/* ================================================================== DISCOVER (mock-up 1A; typing 2) */
html.ds.dh #device > .screen.dh-discover {
  overflow: hidden !important; padding: 0 !important; scroll-padding: 0;
}
html.ds.dh #device > .screen.dh-discover.dh-discover > :is(.dg2-field, .ds-tsx-room, .discover-shortcuts, .friday-ribbon, .daily-discover-entry) { display: none !important; }
html.ds.dh #device > .screen.dh-discover.dh-discover > .dh-strip {
  position: absolute !important; display: block !important; right: -70px; top: -40px; width: 420px; height: 202px; z-index: 3 !important; pointer-events: none;
  background: url("/assets/duo/filmstrip-discover-772.webp") center / contain no-repeat; opacity: .85; transform: rotate(-4deg);
}
/* the brand (gold, as on the rail), top left; Find a film beside the metering line on the bottom half */
html.ds.dh #device > .screen.dh-discover.dh-discover > .app-header { position: static !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
html.ds.dh #device > .screen.dh-discover.dh-discover > .app-header > .brand-home { position: absolute !important; left: 24px; top: 22px; z-index: 4; display: flex; align-items: center; gap: 10px; margin: 0 !important; }
html.ds.dh #device > .screen.dh-discover.dh-discover > .app-header > .brand-home > .header-brand-aura { display: none; }
html.ds.dh #device > .screen.dh-discover.dh-discover > .app-header > .brand-home > .brand-mark { content: url("/assets/opening/gold-mark.webp"); width: 34px !important; height: 34px !important; filter: drop-shadow(0 2px 6px rgb(232 192 126 / .25)); }
html.ds.dh #device > .screen.dh-discover.dh-discover > .app-header > .brand-home > .wordmark { content: url("/assets/opening/gold-word.webp"); width: 74px !important; height: 13px !important; object-fit: contain; }
html.ds.dh #device > .screen.dh-discover.dh-discover > .app-header > .profile-control { display: none !important; }
html.ds.dh #device > .screen.dh-discover.dh-discover > .app-header > .ff-entry {
  position: absolute !important; right: 16px; top: calc(var(--dsp-acy) + 264px); z-index: 4; margin: 0 !important; min-height: 44px; height: auto !important;
}
/* "Describe it." and its question */
html.ds.dh #device > .screen.dh-discover.dh-discover > .discover-heading {
  position: absolute !important; left: 24px; right: 200px; top: 80px; z-index: 3; margin: 0 !important; padding: 0 !important; width: auto !important;
  display: flex; flex-direction: column-reverse; gap: 8px;
}
html.ds.dh #device > .screen.dh-discover.dh-discover > .discover-heading > h1 {
  margin: 0 !important; font: 600 min(calc(58 * var(--type-unit, 1px)), 70px)/1.02 var(--font-display, var(--font-ui)) !important; letter-spacing: -.01em; color: var(--c-label-1); white-space: nowrap;
}
html.ds.dh #device > .screen.dh-discover.dh-discover > .discover-heading > p {
  margin: 0 !important; font: 400 calc(17 * var(--type-unit, 1px))/1.3 var(--font-ui) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--c-label-2) !important;
}
/* Try asking for: three cards, big art that is also the thing you press */
html.ds.dh #device > .screen.dh-discover.dh-discover > .discover-inspiration {
  position: absolute !important; left: 24px; right: 24px; top: 222px; bottom: auto; z-index: 2; margin: 0 !important; padding: 0 !important;
  width: auto !important; max-width: none !important; height: auto !important; background: none !important; border: 0 !important; box-shadow: none !important; overflow: visible !important;
}
html.ds.dh #device > .screen.dh-discover.dh-discover > .discover-inspiration > header { position: static !important; display: block !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; }
html.ds.dh #device > .screen.dh-discover.dh-discover > .discover-inspiration > header > div > span,
html.ds.dh #device > .screen.dh-discover.dh-discover > .discover-inspiration > header > button { display: none !important; }
html.ds.dh #device > .screen.dh-discover.dh-discover > .discover-inspiration > header h2 {
  margin: 0 !important; font: 600 calc(12 * var(--type-unit, 1px))/1.2 var(--font-ui) !important; letter-spacing: .16em !important; text-transform: uppercase; color: var(--c-label-2) !important;
}
html.ds.dh #device > .screen.dh-discover.dh-discover > .discover-inspiration > .prompt-grid {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-flow: row !important; gap: 12px !important;
  margin: 12px 0 0 !important; padding: 0 !important; width: auto !important; height: auto !important; overflow: visible !important; transform: none !important; animation: none !important;
  scroll-snap-type: none !important;
}
html.ds.dh #device > .screen.dh-discover.dh-discover > .discover-inspiration > .prompt-grid > .prompt-card {
  position: relative !important; flex: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 172px !important; margin: 0 !important; transform: none !important; translate: none !important;
  border-radius: 18px !important; overflow: hidden !important; box-shadow: 0 14px 30px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .10) !important;
}
html.ds.dh #device > .screen.dh-discover.dh-discover > .discover-inspiration > .prompt-grid > .prompt-card:nth-child(n+4) { display: none !important; }
html.ds.dh #device > .screen.dh-discover.dh-discover > .discover-inspiration .prompt-card :is(.prompt-art, .prompt-art img) { inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; }
html.ds.dh #device > .screen.dh-discover.dh-discover > .discover-inspiration .prompt-card .prompt-copy {
  position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; padding: 34px 10px 11px 12px !important;
  background: linear-gradient(180deg, transparent, rgb(8 5 14 / .88)) !important; border-radius: 0 !important;
}
html.ds.dh #device > .screen.dh-discover.dh-discover > .discover-inspiration .prompt-card .prompt-copy > b { display: none !important; }
html.ds.dh #device > .screen.dh-discover.dh-discover > .discover-inspiration .prompt-card.prompt-card .prompt-copy .prompt-title {
  position: static !important; display: block; width: auto !important; font: 600 calc(15 * var(--type-unit, 1px))/1.22 var(--font-ui) !important; color: var(--c-label-1) !important;
  text-shadow: 0 1px 8px rgb(0 0 0 / .6); text-wrap: balance; -webkit-line-clamp: 3;
}
/* the request box: the bottom half's head */
html.ds.dh #device > .screen.dh-discover.dh-discover > .search-glass {
  position: absolute !important; left: 16px !important; right: 16px !important; top: calc(var(--dsp-acy) + 18px) !important; z-index: 5;
  width: auto !important; max-width: none !important; height: 128px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  display: block !important; overflow: visible !important; border-radius: 28px !important;
}
html.ds.dh #device > .screen.dh-discover.dh-discover > .search-glass > :is(.dg2-glow) { display: none !important; }
html.ds.dh #device > .screen.dh-discover.dh-discover > .search-glass > .dg2-sheen { border-radius: inherit; overflow: hidden; }
html.ds.dh #device > .screen.dh-discover.dh-discover > .search-glass > .dh-glyph {
  position: absolute; left: 20px; top: 19px; width: 24px; height: 24px; z-index: 2; pointer-events: none; color: var(--c-label-2);
}
html.ds.dh #device > .screen.dh-discover.dh-discover > .search-glass > .dh-glyph svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
html.ds.dh #device > .screen.dh-discover.dh-discover > .search-glass > textarea#query {
  position: absolute !important; inset: 0 0 64px 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important;
  padding: 16px 64px 4px 54px !important; box-sizing: border-box; font: 400 calc(21 * var(--type-unit, 1px))/1.3 var(--font-ui) !important; background: none !important; resize: none;
}
html.ds.dh #device > .screen.dh-discover.dh-discover > .search-glass > .composer-meta { position: absolute !important; right: 12px; top: 10px; z-index: 3; margin: 0 !important; }
html.ds.dh #device > .screen.dg2.dh-discover.dh-discover > .search-glass .voice-control {
  position: absolute !important; top: auto !important; left: auto !important; right: calc(12px + var(--dh-find-w, calc(52px + 82 * var(--type-unit, 1px))) + 6px) !important; bottom: 15px !important; margin: 0 !important; z-index: 4 !important;
}
html.ds.dh #device > .screen.dg2.dh-discover.dh-discover > .search-glass .query-submit.query-submit-plain {
  position: absolute !important; top: auto !important; left: auto !important; right: 12px !important; bottom: 12px !important; z-index: 4 !important; width: auto !important; min-width: 0 !important; height: 50px !important; min-height: 50px !important;
  margin: 0 !important; padding: 0 26px !important;
  background: linear-gradient(180deg, rgb(247 242 234), rgb(233 225 212)) !important; color: var(--c-lamp-ink) !important; -webkit-text-fill-color: var(--c-lamp-ink) !important;
  box-shadow: 0 8px 22px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255) !important; border: 0 !important; border-radius: var(--r-pill) !important;
}
html.ds.dh #device > .screen.dg2.dh-discover.dh-discover > .search-glass .query-submit.query-submit-plain * { color: inherit !important; -webkit-text-fill-color: inherit !important; }
/* the hint, under the box */
html.ds.dh #device > .screen.dg2.dh-discover.dh-discover > .search-glass .composer-guidance {
  display: block !important; position: absolute !important; left: 8px; right: 8px; top: calc(100% + 8px); margin: 0 !important;
  font: 400 calc(13 * var(--type-unit, 1px))/1.3 var(--font-ui) !important; color: var(--c-label-3) !important; text-align: left !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the services, a tile of its own beside Break Glass */
html.ds.dh #device > .screen.dg2.dh-discover.dh-discover > .search-glass :is(.oms-row, .ds-fr-oms) {
  position: absolute !important; left: 0; top: calc(100% + 38px); width: calc((100% - 10px) * 1.15 / 2.15) !important; height: 66px; min-height: 0 !important; margin: 0 !important; padding: 0 12px 0 10px !important; box-sizing: border-box;
  display: flex !important; align-items: center; border: 1px solid rgb(255 255 255 / .14) !important; border-radius: 20px !important;
  background: linear-gradient(180deg, rgb(255 255 255 / .10), rgb(255 255 255 / .04)) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 10px 30px rgb(0 0 0 / .35) !important;
}
html.ds.dh #device > .screen.dg2.dh-discover.dh-discover > .search-glass .oms-row > button { flex: 1 1 auto; min-height: 44px; }
html.ds.dh #device > .screen.dg2.dh-discover.dh-discover > .search-glass .oms-row .oms-copy { flex-direction: column; flex-wrap: nowrap !important; align-items: flex-start !important; min-width: 0; overflow: hidden; }
/* each of its two lines stays one line (at the largest text they wrapped out of the tile): the rest is an ellipsis, the whole
   label is still the button's name */
html.ds.dh #device > .screen.dg2.dh-discover.dh-discover > .search-glass .oms-row .oms-copy > * { max-width: 100%; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
html.ds.dh #device > .screen.dh-discover.dh-discover > .eg {
  position: absolute !important; right: 16px; top: calc(var(--dsp-acy) + 184px); z-index: 4; width: calc((100% - 42px) / 2.15) !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
}
html.ds.dh #device > .screen.dh-discover.dh-discover > .eg > .eg-call { height: 66px !important; min-height: 66px !important; margin: 0 !important; }
html.ds.dh #device > .screen.dh-discover.dh-discover > .eg > .eg-foot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.ds.dh #device > .screen.dh-discover.dh-discover > .tm-allowance {
  position: absolute !important; left: 16px; top: calc(var(--dsp-acy) + 264px); z-index: 4; width: auto !important; max-width: 60%; min-height: 44px; margin: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 6px !important;
}
html.ds.dh #device > .screen.dh-discover.dh-discover > .dh-recent { display: none; }

/* typing: the top half shows the recent searches and smaller cards; the box sits right above the keyboard */
html.ds.dh[data-keyboard="open"] #device > .screen.dh-discover.dh-discover > :is(.dh-strip, .eg, .tm-allowance) { display: none !important; }
html.ds.dh[data-keyboard="open"] #device > .screen.dh-discover.dh-discover > .app-header > .ff-entry { display: none !important; }
html.ds.dh[data-keyboard="open"] #device > .screen.dh-discover.dh-discover > .app-header > .brand-home { top: 18px; }
html.ds.dh[data-keyboard="open"] #device > .screen.dh-discover.dh-discover > .discover-heading { left: auto; right: 24px; top: 20px; }
html.ds.dh[data-keyboard="open"] #device > .screen.dh-discover.dh-discover > .discover-heading > p { display: none !important; }
html.ds.dh[data-keyboard="open"] #device > .screen.dh-discover.dh-discover > .discover-heading > h1 { font-size: min(calc(26 * var(--type-unit, 1px)), 32px) !important; }
html.ds.dh[data-keyboard="open"] #device > .screen.dh-discover.dh-discover > .dh-recent { display: block; position: absolute; left: 16px; right: 16px; top: 70px; z-index: 3; }
html.dh .dh-recent > .dh-eyebrow { margin: 0 8px 8px; }
html.dh .dh-recent-list { list-style: none; margin: 0; padding: 0; border-radius: 20px; overflow: hidden; border: 1px solid rgb(255 255 255 / .12); background: linear-gradient(180deg, rgb(255 255 255 / .08), rgb(255 255 255 / .03)); }
html.dh .dh-recent-list > li + li { border-top: 1px solid rgb(255 255 255 / .07); }
html.dh .dh-recent-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 4px 14px; border: 0; background: none; color: var(--c-label-1);
  font: 400 calc(15.5 * var(--type-unit, 1px))/1.25 var(--font-ui); text-align: left;
}
html.dh .dh-recent-row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.dh .dh-recent-row > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--c-label-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html.dh .dh-recent-row > svg:last-child { width: 16px; height: 16px; stroke: var(--c-label-3); }
html.dh .dh-recent-none { margin: 0 8px; font: 400 calc(14 * var(--type-unit, 1px))/1.3 var(--font-ui); color: var(--c-label-3); }
html.ds.dh[data-keyboard="open"] #device > .screen.dh-discover.dh-discover > .discover-inspiration { left: 16px; right: 16px; top: 262px; }
html.ds.dh[data-keyboard="open"] #device > .screen.dh-discover.dh-discover > .discover-inspiration > header h2 { margin-left: 8px !important; }
html.ds.dh[data-keyboard="open"] #device > .screen.dh-discover.dh-discover > .discover-inspiration > .prompt-grid { gap: 10px !important; margin-top: 8px !important; }
html.ds.dh[data-keyboard="open"] #device > .screen.dh-discover.dh-discover > .discover-inspiration > .prompt-grid > .prompt-card { height: min(126px, calc(var(--dsp-sth) - 300px)) !important; border-radius: 16px !important; }
html.ds.dh[data-keyboard="open"] #device > .screen.dh-discover.dh-discover > .discover-inspiration .prompt-card .prompt-title { font-size: calc(13.5 * var(--type-unit, 1px)) !important; }
html.ds.dh[data-keyboard="open"] #device > .screen.dh-discover.dh-discover > .search-glass {
  top: max(calc(var(--dsp-acy) + 10px), calc(var(--vv-h, 890px) - 152px)) !important; left: 12px !important; right: 12px !important; height: 142px !important;
  border-color: rgb(200 180 255 / .5) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 0 0 4px rgb(139 92 246 / .18), 0 16px 40px rgb(40 10 90 / .45) !important;
}
html.ds.dh[data-keyboard="open"] #device > .screen.dh-discover.dh-discover > .search-glass > .dh-glyph { display: none; }
html.ds.dh[data-keyboard="open"] #device > .screen.dh-discover.dh-discover > .search-glass > textarea#query { padding: 14px 64px 4px 18px !important; font-size: calc(19 * var(--type-unit, 1px)) !important; }
html.ds.dh[data-keyboard="open"] #device > .screen.dg2.dh-discover.dh-discover > .search-glass .composer-guidance { display: none !important; }
html.ds.dh[data-keyboard="open"] #device > .screen.dg2.dh-discover.dh-discover > .search-glass :is(.oms-row, .ds-fr-oms) {
  top: auto; bottom: 10px; left: 12px; width: auto !important; max-width: calc(100% - 230px); height: 44px; border-radius: 22px !important; padding: 0 10px !important;
  background: rgb(255 255 255 / .07) !important; box-shadow: none !important; border-color: rgb(255 255 255 / .12) !important;
}
html.ds.dh[data-keyboard="open"] #device > .screen.dg2.dh-discover.dh-discover > .search-glass .oms-row .oms-copy > small { display: none; }
html.ds.dh[data-keyboard="open"] #device > .screen.dg2.dh-discover.dh-discover > .search-glass .oms-row :is(.oms-glyph svg) { width: 18px; height: 18px; }

/* ================================================================== THE WAIT (duo-ask.js lays its sign out for half-open) */
html.dh .duo-sign .duo-sign-here { right: 50%; translate: 50% 0; bottom: 28px; }
/* (owner, 13 November 2026: "wouldn't it be up to down?") the cue of the phone closing follows the real hinge: turned 90
   degrees the fold runs across, so the phone is drawn with its leaves one above the other (each wider than tall, as each half
   is) and the TOP leaf folds down onto the bottom one, like a laptop's lid; the arrow comes round the side from the top leaf
   down onto the bottom one. The same drawing and fold as the book's, turned a quarter (its right leaf, which folds, becomes
   the top), at 0.8 so the arches keep their height; duo-ask.js gives it 100pt. Reduce Motion: drawn half closed, as before. */
html.dh .duo-sign .duo-sign-cue { transform: translateY(17px) rotate(-90deg) scale(.8); }
/* the triptych's small "close the phone" glyph, turned the same way */
html.dh .duo-stage .duo-seat-cue > svg { transform: rotate(-90deg); }

/* ================================================================== THE REVEAL: the app's own triptych opens on the top half
   (its geometry is worked out from --sp-fh, the frame it stands in: here the top half; its dock has no place until the three
   settle, when duo-half.js draws Your three) */
html.dh[data-dh="ritual"] #device .trip-critical-layer { --sp-fh: var(--dsp-sth) !important; --sp-dock-h: 0px !important; --sp-cap-h: 60px !important; }
html.dh[data-dh="ritual"] #device .trip-critical-layer > :is(.critical-results, .sp-fact) { visibility: hidden !important; }
/* (owner, 13 November 2026: "Too small") the triptych is drawn as large as Your three's posters that follow it and where they
   will stand: the centre 184 x 276 (smaller only when the request's two lines leave less), its foot 44 above the fold
   (--dh-foot, which .dh-trio keeps too), the wings the side posters' size (234 / 276 of the centre). Its reflection stays
   short of the fold. The bottom half is already Your three's: Back, "Your three" and Sound where its bar will be, and
   "Your three are ready." where its rows will come; the request on the top half as Your three draws it. */
html.dh #device { --dh-foot: calc(var(--dsp-sth) - 44px); --dh-req-bot: calc(24px + 67.2 * var(--type-unit, 1px)); }
html.dh[data-dh="ritual"] #device .trip-critical-layer {
  --sp-cw: max(96px, min(184px, calc((var(--dh-foot) - var(--dh-req-bot) - 10px) / 1.5))) !important;
  --sp-wk: calc(234 / 276) !important;
  --sp-tri-bot: var(--dh-foot) !important;
  --sp-tri-top: calc(var(--dh-foot) - var(--sp-ch)) !important;
  --sp-mirror: .12 !important;
}
html.dh[data-dh="ritual"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) {
  background:
    linear-gradient(180deg, rgb(12 8 22) 0, rgb(5 4 8) 50%, rgb(16 10 27) 100%) 0 var(--dsp-spy) / 100% var(--dsp-sph) no-repeat,
    radial-gradient(110% 70% at 50% 0%, rgb(110 70 200 / .30), transparent 60%) 0 var(--dsp-acy) / 100% var(--dsp-ach) no-repeat,
    linear-gradient(180deg, rgb(16 10 27), rgb(8 6 13)) 0 var(--dsp-acy) / 100% var(--dsp-ach) no-repeat,
    var(--c-stage, #050507) !important;
}
html.dh[data-dh="ritual"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-stage { clip-path: inset(0 0 calc(100% - var(--dsp-sth)) 0); }
/* the request, as Your three draws it: "Your request" over the words */
html.dh[data-dh="ritual"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-request-capsule {
  top: 18px !important; left: 24px !important; right: 24px !important; height: auto !important; padding: 0 !important; gap: 6px !important; justify-content: flex-start !important;
}
html.dh[data-dh="ritual"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-request-capsule::before {
  content: "Your request" !important; display: block !important; position: static !important; flex: none;
  /* (Your three's label is a line of its page's body text, 1.41 of --fs-body tall: so is this one, and the words under it
     do not move at the hand-off) */
  font: 600 calc(12 * var(--type-unit, 1px))/calc(var(--fs-body, 17px) * 1.41) var(--font-ui) !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: rgb(127 200 255) !important;
}
html.dh[data-dh="ritual"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-request-capsule > p {
  font: 500 calc(22 * var(--type-unit, 1px))/1.2 var(--font-display, var(--font-ui)) !important; color: var(--c-label-1) !important; text-wrap: balance !important; -webkit-line-clamp: 2 !important;
}
html.dh[data-dh="ritual"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-request-capsule > :not(p) { display: none !important; }
/* Back and Sound on the bottom half, where Your three's bar puts them, with its name between */
html.dh[data-dh="ritual"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-header { top: calc(var(--dsp-acy) + 12px) !important; left: 12px !important; right: 12px !important; }
html.dh[data-dh="ritual"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-header::after {
  content: "Your three" !important; display: block !important; position: absolute; left: 60px; right: 60px; top: 0; height: 44px; line-height: 44px; text-align: center; pointer-events: none;
  font: 600 calc(13 * var(--type-unit, 1px))/44px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--c-label-2);
}
html.dh[data-dh="ritual"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results-heading { display: none !important; }
/* "Your three are ready." (and the wait's line) where the rows will come; the person's own words under it */
html.dh[data-dh="ritual"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-status,
html.dh[data-dh="ritual"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-status[data-kind="ready"] { top: calc(var(--dsp-acy) + 96px) !important; left: 24px !important; width: auto !important; right: 24px !important; }
html.dh[data-dh="ritual"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-status[data-kind="ready"] > b { font: 600 calc(22 * var(--type-unit, 1px))/1.25 var(--font-ui) !important; letter-spacing: -.012em !important; }
html.dh[data-dh="ritual"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-status > span { position: static !important; margin-top: 10px; }
html.dh[data-dh="ritual"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-words { top: calc(var(--dsp-acy) + 140px) !important; height: auto !important; bottom: 24px; }

/* ================================================================== YOUR THREE (mock-up 3A), inside the app's own three */
html.dh .trip-critical-layer.dh-three-host > :not(.dh-three) { visibility: hidden !important; pointer-events: none !important; }
html.dh .dh-three { position: absolute; inset: 0; z-index: 60; color: var(--c-label-1); font-family: var(--font-ui);
  background:
    linear-gradient(180deg, rgb(12 8 22) 0, rgb(5 4 8) 50%, rgb(16 10 27) 100%) 0 var(--dsp-spy) / 100% var(--dsp-sph) no-repeat,
    radial-gradient(70% 60% at 50% 55%, rgb(124 77 235 / .28), transparent 70%) 0 0 / 100% var(--dsp-sth) no-repeat,
    linear-gradient(180deg, rgb(13 9 24), rgb(8 6 14)) 0 0 / 100% var(--dsp-sth) no-repeat,
    radial-gradient(110% 70% at 50% 0%, rgb(110 70 200 / .30), transparent 60%) 0 var(--dsp-acy) / 100% var(--dsp-ach) no-repeat,
    linear-gradient(180deg, rgb(16 10 27), rgb(8 6 13)) 0 var(--dsp-acy) / 100% var(--dsp-ach) no-repeat;
}
html.dh .dh-three-stage { position: absolute; left: 0; right: 0; top: 0; height: var(--dsp-sth); overflow: hidden; display: flex; flex-direction: column; align-items: center; }
html.dh .dh-req { margin: 18px 24px 0; text-align: center; flex: none; }
html.dh .dh-req-k { color: rgb(127 200 255); }
html.dh .dh-req-q {
  margin: 6px 0 0; font: 500 calc(22 * var(--type-unit, 1px))/1.2 var(--font-display, var(--font-ui)); text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* (owner, 13 November 2026: the bottom half sat empty while the centre door opened) Your three's bottom half, drawn early
   by duo-half.js as the centre starts to open: its rows come in one by one, then Explore and the tools, where Your three
   keeps them. Only seen: Back and Sound there are still the reveal's own (the early bar keeps its room, unseen). */
html.dh .dh-three.dh-early { background: none; pointer-events: none; z-index: 59; }
html.dh .dh-three.dh-early .dh-bar { visibility: hidden; }
/* (after "Your three are ready." has gone, --motion-fast: the two are never read over each other) */
/* (and when the reveal hands over before they are all in, Your three goes on with the same steps from where they had got
   to: --dh-since, set by duo-half.js, is how long ago they began) */
html.dh .dh-three:is(.dh-early, .dh-after-early) :is(.dh-rows, .dh-rows > li, .dh-explore) { animation: dh-early-in var(--motion-slow) var(--motion-curve) both; animation-delay: calc(200ms + var(--dh-since, 0ms)); }
html.dh .dh-three:is(.dh-early, .dh-after-early) .dh-rows { animation-duration: var(--motion-fast); }
html.dh .dh-three:is(.dh-early, .dh-after-early) .dh-rows > li:nth-child(2) { animation-delay: calc(310ms + var(--dh-since, 0ms)); }
html.dh .dh-three:is(.dh-early, .dh-after-early) .dh-rows > li:nth-child(3) { animation-delay: calc(420ms + var(--dh-since, 0ms)); }
html.dh .dh-three:is(.dh-early, .dh-after-early) .dh-explore { animation-delay: calc(530ms + var(--dh-since, 0ms)); }
@keyframes dh-early-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { html.dh .dh-three.dh-early * { animation: none !important; } }
html.dh[data-motion-tier="reduced"] .dh-three.dh-early * { animation: none !important; }
/* (owner, 13 November 2026) Flick's line for a first full three stood over the request: here it takes the bar's title on the
   bottom half, between Back and Sound, for its few seconds ("Your three" steps aside meanwhile), clear of the request and the fold */
html.dh #device > .sps-cheer[data-spoolie-cheer="firstThree"] {
  top: calc(var(--dsp-acy) + 12px) !important; left: 50% !important; translate: -50% 0 !important; min-height: 44px;
  max-width: calc(100% - 128px) !important;
}
html.dh #device > .sps-cheer[data-spoolie-cheer="firstThree"] .sps-art { width: 34px; }
html.dh #device > .sps-cheer[data-spoolie-cheer="firstThree"] > .sps-bubble { padding: 5px 12px !important; }
html.dh #device > .sps-cheer[data-spoolie-cheer="firstThree"] .sps-cheer-say { font-size: calc(13 * var(--type-unit, 1px)) !important; line-height: 1.3 !important; }
html.dh #device:has(> .sps-cheer[data-spoolie-cheer="firstThree"]) .dh-three .dh-bar-k { opacity: 0; }
/* (as the rows come in, the reveal's "Your three are ready." has had its moment: it steps aside for them) */
html.dh[data-dh="ritual"] #device .trip-critical-layer:has(> .dh-early) > .sp-status { opacity: 0 !important; transition: opacity var(--motion-fast) var(--motion-curve); }
/* (the tools are the reveal's own until the three settle, a different set: they come in as Your three takes over) */
html.dh .dh-three.dh-early .dh-tools { visibility: hidden; }
html.dh .dh-three.dh-after-early .dh-tools { animation: dh-early-in var(--motion-normal) var(--motion-curve) both; }
@media (prefers-reduced-motion: reduce) { html.dh .dh-three.dh-after-early * { animation: none !important; } }
html.dh[data-motion-tier="reduced"] .dh-three.dh-after-early * { animation: none !important; }
/* (the posters' feet at --dh-foot, where the reveal's triptych stood: the hand-off does not jump) */
html.dh .dh-trio { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; justify-content: center; align-items: flex-end; gap: 16px; padding: 10px 0 calc(var(--dsp-sth) - var(--dh-foot)); box-sizing: border-box; }
html.dh .dh-p { position: relative; flex: none; height: min(234px, 80%); aspect-ratio: 2 / 3; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: rgb(22 22 30); margin-bottom: 7px;
  box-shadow: 0 18px 40px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .10); opacity: .92; }
html.dh .dh-p1 { height: min(276px, 100%); margin-bottom: 0; opacity: 1; box-shadow: 0 24px 50px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .14), 0 0 60px rgb(139 92 246 / .35); }
html.dh .dh-p > img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.dh .dh-p-none { display: grid; place-items: center; height: 100%; padding: 10px; font: 600 14px/1.2 var(--font-ui); }
html.dh .dh-p > b { position: absolute; left: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 700 13px/1 var(--font-ui); background: rgb(10 8 16 / .78); border: 1px solid rgb(255 255 255 / .22); color: var(--c-label-1); }
html.dh .dh-p1 > b { background: var(--c-seal-fill); border-color: rgb(200 180 255 / .6); }
html.dh .dh-chip { position: absolute; left: 50%; bottom: 24px; translate: -50% 0; white-space: nowrap; padding: 6px 12px; border-radius: var(--r-pill);
  font: 700 calc(12 * var(--type-unit, 1px))/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--c-label-1);
  background: linear-gradient(180deg, rgb(143 99 247), rgb(106 63 224)); border: 1px solid rgb(220 205 255 / .55); box-shadow: 0 6px 18px rgb(80 30 180 / .5); }
html.dh .dh-three-act { position: absolute; left: 0; right: 0; top: var(--dsp-acy); bottom: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 16px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px; scrollbar-width: none; }
html.dh .dh-bar { display: flex; align-items: center; justify-content: space-between; margin: 0 -4px; }
html.dh .dh-bar-k { font-size: calc(13 * var(--type-unit, 1px)); letter-spacing: .14em; }
html.dh .dh-circle-gap { width: 44px; }
html.dh .dh-rows { list-style: none; margin: 0; padding: 0; border-radius: 20px; overflow: hidden; border: 1px solid rgb(255 255 255 / .12); background: linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / .03)); flex: none; }
html.dh .dh-rows > li + li { border-top: 1px solid rgb(255 255 255 / .07); }
html.dh .dh-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 70px; padding: 8px 12px 8px 10px; border: 0; background: none; color: var(--c-label-1); text-align: left; }
html.dh .dh-row.is-first { background: linear-gradient(90deg, rgb(139 92 246 / .20), rgb(139 92 246 / .04)); }
html.dh .dh-thumb { width: 36px; height: 54px; border-radius: 6px; overflow: hidden; flex: none; background: rgb(22 22 30); box-shadow: 0 0 0 1px rgb(255 255 255 / .12); }
html.dh .dh-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* (under a poster and a row's thumbnail, the same poster as its background: the reveal's panels paint it as a background
   already, so it is there at once as Your three takes over, where a new <img> of it can stay dark for half a second: duo-half.js) */
html.dh :is(.dh-p, .dh-thumb) { background-size: cover; background-position: center; background-repeat: no-repeat; }
html.dh .dh-row-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html.dh .dh-row-t { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; }
html.dh .dh-row-t > b { font: 600 calc(15.5 * var(--type-unit, 1px))/1.25 var(--font-ui); }
html.dh .dh-row-t > small { font: 500 calc(12.5 * var(--type-unit, 1px))/1.25 var(--font-ui); color: var(--c-label-3); }
html.dh .dh-row-w { font: 400 calc(13.5 * var(--type-unit, 1px))/1.3 var(--font-ui); color: var(--c-label-2); }
html.dh .dh-explore { flex: none; width: 100%; }
html.dh .dh-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; flex: none; }
html.dh .dh-tools > .dh-tool {
  position: relative !important; display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 8px; width: auto !important; min-width: 0 !important;
  min-height: 58px !important; height: auto !important; margin: 0 !important; padding: 6px 8px !important; border-radius: 18px !important; inset: auto !important;
  border: 1px solid rgb(255 255 255 / .14) !important; background: linear-gradient(180deg, rgb(255 255 255 / .10), rgb(255 255 255 / .04)) !important; color: var(--c-label-1) !important;
  font: 500 calc(15 * var(--type-unit, 1px))/1.15 var(--font-ui) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .16) !important;
}
html.dh .dh-tools > .dh-tool > * { position: static !important; transform: none !important; margin: 0 !important; }
html.dh .dh-tools > .dh-tool svg { width: 20px !important; height: 20px !important; }

/* ================================================================== TODAY (mock-up 4) */
html.dh #device > .screen.dh-today { padding-bottom: 104px !important; }
html.dh #device > .screen.dh-today > :is(.app-header, .dt-masthead, .dt-also, .dt-top, .dt-streak-section, .ds-tsx-room) { display: none !important; }
html.dh .dh-today-rows > .dt-streak.dh-tile { width: auto !important; margin: 0 !important; }
html.dh #device > .screen.dh-today > .dh-today-stage { background: none; }
html.dh .dh-today-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 60% at 20% 30%, rgb(124 77 235 / .30), transparent 65%), linear-gradient(180deg, rgb(15 10 26), rgb(7 5 12)); z-index: -1; }
html.dh .dh-today-hd { position: absolute; left: 24px; right: 24px; top: 16px; display: flex; justify-content: space-between; align-items: flex-start; }
html.dh .dh-today-hd > .dh-mast { margin: 0 !important; padding: 0 !important; width: auto !important; }
html.dh .dh-today-hd > .dh-mast > .dt-date { margin: 0; font: 600 calc(12.5 * var(--type-unit, 1px))/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--c-seal-hi); }
html.dh .dh-today-hd > .dh-mast > h1 { margin: 2px 0 0 !important; font-size: min(calc(42 * var(--type-unit, 1px)), 50px) !important; line-height: 1.05 !important; }
html.dh .dh-brand { flex: none; display: block; width: 116px; height: 34px; margin-top: 6px;
  background: url("/assets/opening/gold-mark.webp") left center / 34px 34px no-repeat, url("/assets/opening/gold-word.webp") right center / 74px 13px no-repeat; }
html.dh .dh-today-stage > .dh-fri { position: absolute !important; left: 16px; right: 16px; top: 94px; height: 142px !important; min-height: 0 !important; width: auto !important; margin: 0 !important; overflow: hidden; }
html.dh .dh-ten { position: absolute; left: 0; right: 0; top: 248px; bottom: 8px; }
html.dh .dh-ten-h { display: flex; align-items: baseline; gap: 12px; margin: 0 24px; }
html.dh .dh-ten-h > h2 { margin: 0; font: 700 calc(20 * var(--type-unit, 1px))/1.1 var(--font-ui); letter-spacing: .08em; color: var(--c-label-1); }
html.dh .dh-live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 7px; border-radius: var(--r-pill); border: 1px solid rgb(255 138 148 / .55);
  font: 700 11px/1 var(--font-ui); letter-spacing: .1em; color: rgb(255 138 148); translate: 0 -2px; }
html.dh .dh-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(255 92 108); }
html.dh .dh-ten-s { margin-left: auto; font: 400 calc(14 * var(--type-unit, 1px))/1.2 var(--font-ui); color: var(--c-label-2); white-space: nowrap; }
html.dh .dh-ten-strip { list-style: none; margin: 10px 0 0; padding: 4px 24px 18px 44px; display: flex; gap: 30px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, rgb(0 0 0) 85%, transparent); mask: linear-gradient(90deg, rgb(0 0 0) 85%, transparent); }
html.dh .dh-ten-strip::-webkit-scrollbar { display: none; }
html.dh .dh-ten-strip > li { flex: none; }
html.dh .dh-ten-it { position: relative; display: block; width: 72px; height: 108px; padding: 0; border: 0; border-radius: 9px; background: rgb(22 22 30); overflow: visible; }
html.dh .dh-ten-it > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 9px; box-shadow: 0 18px 40px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .10); }
html.dh .dh-ten-n { position: absolute; left: -30px; bottom: -12px; z-index: 1; font: 800 64px/1 var(--font-ui); letter-spacing: -.04em; color: rgb(11 8 18); -webkit-text-stroke: 1.6px rgb(235 230 245 / .8); pointer-events: none; }
/* the bottom half: the ticket, then This week's card and View The Ten, then the rest of Today */
html.dh #device > .screen.dh-today > .dh-today-rows { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; margin-top: 12px !important; margin-bottom: 18px !important; }
html.dh .dh-tile {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 12px 6px 14px; border-radius: 18px; text-align: left; color: var(--c-label-1);
  border: 1px solid rgb(255 255 255 / .14); background: linear-gradient(180deg, rgb(255 255 255 / .10), rgb(255 255 255 / .04)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 10px 30px rgb(0 0 0 / .35);
  font: 500 calc(15 * var(--type-unit, 1px))/1.2 var(--font-ui);
}
html.dh .dh-tile > svg:last-child { margin-left: auto; width: 16px; height: 16px; flex: none; fill: none; stroke: var(--c-label-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.dh .dh-tile > .dh-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--c-label-2); stroke-width: 1.7; }
html.dh .dh-tile-t { min-width: 0; }
html.dh .dh-tile-t > small { font-size: inherit; color: var(--c-label-2); }
html.dh .dh-tins { display: flex; gap: 2px; align-items: flex-end; flex: none; }
html.dh .dh-tins > i { width: 9px; height: 16px; border: 1.6px solid rgb(232 192 126); border-radius: 5px 5px 2px 2px; }
html.dh .dh-tins > i:nth-child(2) { height: 20px; }

/* ================================================================== A FILM PAGE (mock-up 5) */
html.dh #device :is(.critical-film-layer.film-v5, .film-v5.screen) > .film-hero {
  position: sticky !important; top: 0 !important; z-index: 6 !important; height: var(--dsp-sth) !important; min-height: 0 !important; max-height: none !important;
  box-shadow: 0 var(--dsp-sph) 0 0 rgb(5 4 8) !important; transform: none !important;
}
html.dh #device :is(.critical-film-layer.film-v5, .film-v5.screen) > .film-hero > .film-topbar { display: none !important; }
html.dh #device :is(.critical-film-layer.film-v5, .film-v5.screen) > .film-hero .film-title { top: auto !important; bottom: 22px !important; height: auto !important; }
html.dh #device :is(.critical-film-layer.film-v5, .film-v5.screen) > .film-content { padding-top: calc(var(--dsp-sph) + 12px) !important; padding-bottom: 104px !important; }
html.dh #device :is(.critical-film-layer.film-v5, .film-v5.screen) > .film-content > .decision-actions { width: auto !important; max-width: none !important; margin-left: 16px !important; margin-right: 16px !important; }
html.dh #device :is(.critical-film-layer.film-v5, .film-v5.screen) > .film-content > .decision-actions > button { flex: 1 1 0 !important; width: auto !important; }
html.dh #device > .dh-foot {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2147480000; display: flex; gap: 10px; align-items: center;
}
html.dh #device > .dh-foot::before { content: ""; position: absolute; left: -16px; right: -16px; bottom: -16px; height: 104px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(8 6 13 / 0), rgb(8 6 13 / .92) 45%, rgb(8 6 13)); }
html.dh #device > .dh-foot > .dh-foot-main { flex: 1; min-height: 56px; }
html.dh #device > .dh-foot > .dh-foot-back { min-height: 56px; }
html.dh:not([data-dh="film"]) #device > .dh-foot { display: none; }
html.dh[data-dh="film"] #device > .ds-tsx-ctl { display: none !important; }

/* ================================================================== THE TWO-FILM ANSWER: the pair on the top half, what each is and why below */
html.dh #device > .screen.dh-two { overflow: hidden !important; padding: 0 !important; }
html.dh #device > .screen.dh-two > .two-film-bar { position: absolute !important; left: 16px; bottom: 16px; top: auto !important; width: 44px !important; height: 52px; margin: 0 !important; z-index: 6; }
html.dh #device > .screen.dh-two > .two-film-bar > :not(.back-chevron) { display: none !important; }
html.dh #device > .screen.dh-two > .two-film-bar > .back-chevron { width: 52px !important; height: 52px !important; }
html.dh #device > .screen.dh-two > .two-film-request { position: absolute !important; left: 24px; right: 24px; top: 12px; margin: 0 !important; padding: 0 !important; width: auto !important; background: none !important; border: 0 !important; box-shadow: none !important; text-align: center; }
html.dh #device > .screen.dh-two > .two-film-request > p { margin: 4px 0 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dh #device > .screen.dh-two > .two-film-heading { position: static !important; margin: 0 !important; }
html.dh #device > .screen.dh-two > .two-film-heading > .eyebrow { display: none !important; }
html.dh #device > .screen.dh-two > .two-film-heading > h1 { position: absolute !important; left: 24px; right: 24px; top: 64px; margin: 0 !important; text-align: center; }
html.dh #device > .screen.dh-two > .two-film-heading > .two-film-why { position: absolute !important; left: 32px; right: 32px; top: calc(var(--dsp-acy) + 14px); margin: 0 !important; width: auto !important; max-width: none !important; text-align: center; }
html.dh #device > .screen.dh-two > .two-film-pair { position: static !important; margin: 0 !important; padding: 0 !important; }
html.dh #device > .screen.dh-two > .two-film-pair > .two-film-card { position: static !important; transform: none !important; }
html.dh #device > .screen.dh-two { --dh-ph: calc(var(--dsp-sth) - 132px); --dh-pw: calc(var(--dh-ph) * 2 / 3); }
html.dh #device > .screen.dh-two > .two-film-pair > .two-film-card > .two-film-poster { position: absolute !important; top: 116px; height: var(--dh-ph) !important; width: var(--dh-pw) !important; margin: 0 !important; }
html.dh #device > .screen.dh-two > .two-film-pair > .two-film-card:nth-child(1) > .two-film-poster { left: calc(50% - 8px - var(--dh-pw)); }
html.dh #device > .screen.dh-two > .two-film-pair > .two-film-card:nth-child(2) > .two-film-poster { left: calc(50% + 8px); }
html.dh #device > .screen.dh-two > .two-film-pair > .two-film-card > .two-film-save { position: absolute !important; top: 124px !important; right: auto !important; }
html.dh #device > .screen.dh-two > .two-film-pair > .two-film-card:nth-child(1) > .two-film-save { left: calc(50% - 8px - 52px) !important; }
html.dh #device > .screen.dh-two > .two-film-pair > .two-film-card:nth-child(2) > .two-film-save { left: calc(50% + 8px + var(--dh-pw) - 52px) !important; }
html.dh #device > .screen.dh-two > .two-film-pair > .two-film-card > .two-film-copy { position: absolute !important; top: calc(var(--dsp-acy) + 74px); width: calc(50% - 36px) !important; margin: 0 !important; }
html.dh #device > .screen.dh-two > .two-film-pair > .two-film-card:nth-child(1) > .two-film-copy { left: 24px; }
html.dh #device > .screen.dh-two > .two-film-pair > .two-film-card:nth-child(2) > .two-film-copy { left: calc(50% + 12px); }
html.dh #device > .screen.dh-two > .two-film-note { position: absolute !important; left: 24px; right: 24px; top: calc(var(--dsp-acy) + 200px); margin: 0 !important; text-align: center; }
html.dh #device > .screen.dh-two > .two-film-foot { position: absolute !important; left: 80px; right: 16px; bottom: 16px; top: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; }
html.dh #device > .screen.dh-two > .two-film-foot > * { width: 100% !important; margin: 0 !important; min-height: 52px; }

/* ================================================================== THE TEN, the list: the film on show on the top half, the ten below */
html.dh #device > .screen.ds-tt-screen { --tt-hero-h: var(--dsp-sth) !important; --tt-list-top: 4px !important; }
html.dh #device > .screen.ds-tt-screen > .ds-tt-scroll { top: calc(var(--dsp-acy) + 6px) !important; bottom: 0 !important; height: auto !important; }
html.dh #device > .screen.ds-tt-screen > .ds-tt-lamp { top: calc(var(--dsp-acy) + 14px) !important; }

/* ================================================================== A WAY FORWARD (no three): Flick and the headline on top, the request and what to do below */
html.dh #device > .screen.dh-wayf { padding: calc(var(--dsp-acy) + 14px) 24px 96px !important; overflow-y: auto !important; }
/* a pushed page: its own Back and main button at the bottom half's foot (as the two-film answer); the safe-area rule pins
   every clarify screen's Back to the top, so this one is said more strongly */
html.ds.dh #device > .screen.dh-wayf.dh-wayf > .circle-control.back-chevron { position: absolute !important; top: auto !important; bottom: 16px !important; left: 16px !important; width: 52px !important; height: 52px !important; z-index: 5; }
html.ds.dh #device > .screen.dh-wayf.dh-wayf:not(.has-offer) > .way-forward-actions { position: absolute !important; left: 80px; right: 16px; bottom: 16px; width: auto !important; margin: 0 !important; z-index: 5; }
html.ds.dh #device > .screen.dh-wayf.dh-wayf:not(.has-offer) > .way-forward-actions > * { min-height: 52px; }
html.dh #device > .screen.dh-wayf > figure.sps { position: absolute !important; left: 24px; right: 24px; top: 28px; margin: 0 !important; }
html.dh #device > .screen.dh-wayf > span.eyebrow { position: absolute !important; left: 0; right: 0; top: 268px; margin: 0 !important; text-align: center; }
html.dh #device > .screen.dh-wayf > h1 { position: absolute !important; left: 24px; right: 24px; top: 292px; margin: 0 !important; }
html.dh #device > .screen.dh-wayf > small { margin-bottom: 64px; }

/* ================================================================== TRIPTIC+: the card and its name on top (held there), the plans below */
html.dh #device > .screen.dh-plus > .tm-hero {
  position: sticky !important; top: 0; z-index: 4; box-sizing: border-box; height: var(--dsp-sth) !important; margin: -28px -20px 0 !important; padding: 28px 20px 18px !important;
  display: flex !important; flex-direction: column; justify-content: center; align-items: center;
  background: radial-gradient(70% 60% at 50% 40%, rgb(124 77 235 / .26), transparent 70%), linear-gradient(180deg, rgb(13 9 24), rgb(8 6 14)) !important;
  box-shadow: 0 var(--dsp-sph) 0 0 rgb(5 4 8) !important;
}
html.dh #device > .screen.dh-plus > .tm-bar { position: relative; z-index: 6; }
html.dh #device > .screen.dh-plus > .tm-plans-wrap { margin-top: calc(var(--dsp-sph) + 14px) !important; }
html.dh #device > .screen.dh-plus > .tm-ambient { display: none !important; }
html.dh #device > .screen.dh-plus { padding-bottom: 32px !important; }

/* ================================================================== LIBRARY: its name and the room's art on top, the rooms and the shelf below */
html.dh #device > .screen.dh-library { padding-bottom: 104px !important; }
html.dh #device > .screen.dh-library > :is(.app-header, .destination-heading, .ds-tsx-room) { display: none !important; }
html.dh #device > .screen.dh-library .dslc-room .dslc-empty figure.sps { display: none !important; }
html.dh .dh-lib-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 60% at 50% 60%, rgb(124 77 235 / .26), transparent 70%), linear-gradient(180deg, rgb(15 10 26), rgb(7 5 12)); }
html.dh .dh-lib-stage > .dh-lib-flick { position: absolute !important; left: 24px; right: 24px; top: 96px; bottom: 16px; margin: 0 !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; }
html.dh .dh-lib-stage > .dh-lib-title { margin: 0 !important; }
html.dh .dh-lib-fan { position: absolute; left: 24px; right: 24px; top: 100px; bottom: 28px; display: flex; justify-content: center; align-items: center; gap: 14px; }
html.dh .dh-lib-fan > img { height: 100%; max-height: 260px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; box-shadow: 0 18px 40px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .10); min-width: 0; }

/* ================================================================== COLLECTIONS: the door ends at the fold, the list starts under it */
html.ds.dh #device > .collections-api-screen.dh-collections .cu-block .cu-door { height: max(160px, calc(var(--dsp-sth) - var(--dh-cu-top, 150px) - 10px)) !important; max-height: none !important; aspect-ratio: auto !important; width: 100% !important; max-width: none !important; }
html.ds.dh #device > .collections-api-screen.dh-collections .cu-block .cu-door-room { height: 100% !important; aspect-ratio: auto !important; }
html.ds.dh #device > .collections-api-screen.dh-collections .cu-block :is(.cu-door-cinema-img, .cu-door-cinema img) { width: 100% !important; height: 100% !important; object-fit: cover !important; }
html.ds.dh #device > .collections-api-screen.dh-collections .cu-block { margin-bottom: calc(var(--dsp-sph) + 24px) !important; }
/* Save and Clear stand at the box's top right while it holds words: the words wrap before them */
html.ds.dh #device > .screen.dh-discover.dh-discover > .search-glass.has-query > textarea#query { padding-right: 104px !important; }
/* the film's picture as the top half's backdrop: its shade drawn for this height (the phone's is worked out for a hero 600pt
   tall, and on the top half it darkened most of the picture) */
html.ds.dh #device :is(.critical-film-layer.film-v5, .film-v5.screen) > .film-hero.film-hero > .film-gradient { height: 100% !important; }
html.ds.dh #device :is(.critical-film-layer.film-v5, .film-v5.screen) > .film-hero.film-hero > .film-gradient::before { opacity: 0 !important; }
html.ds.dh #device :is(.critical-film-layer.film-v5, .film-v5.screen) > .film-hero.film-hero > .film-gradient::after {
  opacity: 1 !important; inset: 0 !important; height: auto !important;
  background: linear-gradient(90deg, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / .3) 45%, transparent 70%), linear-gradient(180deg, rgb(0 0 0 / .4) 0%, transparent 22%, transparent 48%, rgb(5 3 9 / .92) 100%) !important;
}
html.dh #device > .dh-foot > .dh-foot-back { background: rgb(26 22 36 / .94); }
/* You: the Film DNA card is taller than the top half; it keeps its own height and the top half scrolls it (the phone's card
   squeezed into 425pt spilt its lines out of its frame and down to the fold) */
html.ds.dh #device > .profile-screen.dsc-spread > .dsc-print.dsp-stage { overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: none; }
html.ds.dh #device > .profile-screen.dsc-spread > .dsc-print.dsp-stage::-webkit-scrollbar { display: none; }
html.ds.dh #device > .profile-screen.dsc-spread > .dsc-print > .dsy-dna-card { flex: none !important; }

/* ===== prototype-src/duo-rail.css ===== */
/* TRIPTIC on iPhone Duo: THE RAIL (10 November 2026, the owner: "navigation on the left in the opened layout"). Runtime:
   ds-navigation.js (rail(): the lens, its press, its bloom and the scrub travel down the strip). Record: hub/PROJECT-STATUS.md.

   On the opened display held like a book (html[data-duo-spread="book"], duo-spreads.js), the app's one tab bar stands as a
   vertical strip of the same glass down the left edge, on every tab: Discover, Today, Collections, Library, You, top to
   bottom (the bar's own order, so VoiceOver reads them as before). The strip runs the display's whole height (owner,
   11 November 2026), the five tabs centred in it. The selected tab keeps the real lens and its violet bloom; the unread
   dot, the labels, the filled glyphs and the press are the bar's own. Every tab is a 72 x 72pt target.
   The spread's stage page begins to the right of it (duo-spreads.js geometry: --dsp-stx). Nothing here is on the fold.
   The cover display, an iPhone and an iPad keep the bottom dock: every rule hangs from [data-duo-spread="book"].
   Nothing moves here: the lens and its bloom are driven by ds-navigation.js (transform only). */
html.ds[data-duo-spread="book"] {
  --duo-rail-x: 10px;          /* the strip's left edge */
  --duo-rail-w: 72px;          /* its width: "Collections" in Caption 2 (53pt) with room either side */
  --duo-rail-cell: 72px;       /* one tab: a 72pt square target */
  --duo-rail-end: calc(var(--duo-rail-x) + var(--duo-rail-w));
  --duo-rail-head: 104px;      /* the brand's place at the rail's head (the tabs are centred in what is left) */
}
html.ds[data-duo-spread="book"] #device > .persistent-glass-nav.persistent-glass-nav {
  left: var(--duo-rail-x) !important; right: auto !important;
  top: 10px !important; bottom: 10px !important; translate: none; padding-top: var(--duo-rail-head) !important;
  width: var(--duo-rail-w) !important; max-width: none !important; height: auto !important;
  grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: repeat(5, var(--duo-rail-cell)) !important; align-content: center !important;
  transform: none !important;
}
html.ds[data-duo-spread="book"] #device > .persistent-glass-nav.persistent-glass-nav > button {
  font-size: calc(10.5px * min(var(--text-scale, 1), 1.1)) !important; line-height: 1.2 !important; padding: 0 !important; gap: 4px !important;
}
/* the lens and its bloom: one cell tall, the strip's width, carried down by their index */
html.ds[data-duo-spread="book"] #device > .persistent-glass-nav.persistent-glass-nav :is(.tab-lens, .ds-dock-ghost) {
  top: calc(50% + var(--duo-rail-head) / 2 - 2.5 * var(--duo-rail-cell)); width: calc(100% - 2 * var(--dock-pad)); height: var(--duo-rail-cell);
  border-radius: 22px;
  transform: translate3d(0, calc(var(--to-index) * 100%), 0);
}
html.ds[data-duo-spread="book"] #device > .persistent-glass-nav.persistent-glass-nav .ds-dock-glow {
  top: calc(50% + var(--duo-rail-head) / 2 - 2.5 * var(--duo-rail-cell)); width: calc(100% - 2 * var(--dock-pad)); height: var(--duo-rail-cell);
  --dock-bloom-y: calc(100% - 4px);
  transform: translate3d(0, calc(var(--dock-i, 0) * 100%), 0);
}
html.ds[data-duo-spread="book"] #device > .persistent-glass-nav.persistent-glass-nav :is(.ds-dock-glass, .ds-dock-tint, .ds-dock-shadow) { border-radius: 30px; }
/* the unread dot on the glyph's shoulder, in a cell */
html.ds[data-duo-spread="book"] #device > .persistent-glass-nav.persistent-glass-nav > button > .ds-dock-dot { left: calc(50% + 7px); top: 9px; }
/* the circle the bar draws in to, the scroll fades and the bands under a bottom dock have no place beside a rail */
html.ds[data-duo-spread="book"] #device > :is(.ds-tab-capsule, .ds-edge-fade, .ds-tsx-bottom) { display: none !important; }
html.ds[data-duo-spread="book"] #device > .persistent-glass-nav.ds-min { pointer-events: auto; }
/* the page header's mark is not drawn on the opened display (owner, 10 November 2026): the rail and the page's own title
   say where you are */
html.ds[data-duo-spread="book"] #device > .screen > .app-header .brand-home { visibility: hidden !important; }
/* the app's brand at the rail's head (owner, 11 November 2026: "our verified logo back in the rail"): the opening's gold
   cylinders (/assets/opening/gold-mark.webp) over the gold wordmark with the corrected C (/assets/opening/gold-word.webp, the
   same art Welcome lands on), and a short gold rule under them. Decorative and never pressed. Painted as backgrounds of the
   rail's head only, so an iPhone, an iPad or the cover never fetches them. Off the rail, none. */
.ds-rail-mark { display: none; }
html.ds[data-duo-spread="book"] #device > .persistent-glass-nav.persistent-glass-nav > .ds-rail-mark {
  display: grid; justify-items: center; gap: 8px; position: absolute; left: 0; right: 0; top: 22px; z-index: 2; pointer-events: none;
}
html.ds[data-duo-spread="book"] #device > .persistent-glass-nav > .ds-rail-mark > .ds-rail-logo {
  display: block; width: 40px; height: 40px; background: url("/assets/opening/gold-mark.webp") center / contain no-repeat;
}
html.ds[data-duo-spread="book"] #device > .persistent-glass-nav > .ds-rail-mark > .ds-rail-word {
  display: block; width: 58px; height: 11px; background: url("/assets/opening/gold-word.webp") center / contain no-repeat;
}
html.ds[data-duo-spread="book"] #device > .persistent-glass-nav > .ds-rail-mark > b { display: block; width: 18px; height: 1.5px; margin-top: 2px; border-radius: 1px; background: rgb(240 199 134 / .8); }
/* (12 November 2026) a film opened from a page with the rail: the rail's copy leaves to the left before the film page shows
   (hero-transition.js railLeave); the film page's own Back and Share wait until it has gone (as they wait out a pushed page's move,
   chrome-polish.css), never drawn over it */
html.ds[data-duo-spread="book"] #device:has(> .persistent-glass-nav.hc-nav-leaving:not(.hc-rail-gone)) > .ds-tsx-ctl { visibility: hidden; }

/* ===== prototype-src/film-cards.css ===== */
/* TRIPTIC film cards: the card itself, in three finishes (prototype-src/film-cards-card.js, film-cards-scene.js).
   Record: hub/docs/FILM-CARDS-SEASONS-APP-2026-10-07.md. The surfaces a card appears on (Today, the capsule, the
   reveal, the shelf, the sheets, "How cards work", demo mode) are in film-cards-week.css.
   The look is the prototype the owner approved (workspace/work/film-cards-rarity-2026-10-07/film-card-finishes.html):
   the same card as matte print (Standard), with a holographic sheen and a line (Foil), and in black and gold with a
   scene in depth (Rare).

   Scoped under html.ds; tokens only. The card's own colours are the --card-* feature tokens (design-system.css,
   "Film card palette"); a drawing's colours, a scene's colours and the flat colour behind a drawing are data and
   arrive as markup and as --fc-field.

   THE CARD IS DRAWN AT ONE SIZE AND SCALED AS A WHOLE. .fc-rot is always 300 x 420 CSS pixels; .fc-fit scales it to
   the width its place gives it (--fc-k, set by the component). So the lettering on a card is laid out once, never
   reflows, and is the same on the 3D card, in the reveal and in the shared picture. Its type is held (a printed object:
   ds-text-size.css gives .fc-card a type cap of 1) and nothing on it is under 11pt at the size it is drawn, except the
   First Print stamp, which is a mark, not a line to be read (its words are in the card's spoken name).

   WHAT MOVES PER FRAME (film-cards-card.js, one loop for every live card): `transform` on .fc-rot and .fc-floor, five
   custom properties on the face that is towards you (--mx --my: where the light is; --bx --by: where the foil has
   slid to; --fc-shade: how far it is turned from the light), and on a Rare one transform per scene layer and a small
   canvas of dust. Nothing is laid out again. The foil, halo, sparkle and glare are plain children of the face with no
   transform and no will-change: the whole face is one painted surface, so `mix-blend-mode` blends against the card
   inside the face's own `isolation: isolate`, which is the arrangement WebKit handles. TO CHECK ON AN iPHONE (not
   verifiable here): color-dodge inside a preserve-3d, backface-hidden face; the rounded clip while the card turns; a
   Rare's layer standing out over its frame (.r-out) while the card is in 3D; and the frame rate.

   Motion: `transition` names only transform and opacity. A small card is a still picture: no animation at all.
   Reduce Motion: the card stands still and lit, a flip is a cut, a Rare's scene is its first frame. */

/* ------------------------------------------------------------------ the card in 3D */
html.ds .fc-card { position: relative; display: block; width: 100%; max-width: 310px; margin: 0 auto; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  aspect-ratio: 5 / 7; perspective: 1000px; touch-action: none; cursor: grab; outline: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; --fc-k: 1; --fc-lift: 1; --fc-z: 3.6px; }
html.ds .fc-card:active { cursor: grabbing; }
html.ds .fc-card[data-still="1"] { touch-action: auto; cursor: default; }
html.ds .fc-card:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 10px; border-radius: var(--r-card); }
html.ds .fc-floor { position: absolute; left: 50%; bottom: -9%; width: 78%; height: 6%; margin-left: -39%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--card-floor), transparent); }
html.ds .fc-fit { position: absolute; left: 0; top: 0; width: 300px; height: 420px; transform-origin: 0 0; transform: scale(var(--fc-k)); transform-style: preserve-3d; }
html.ds .fc-lift { position: absolute; inset: 0; transform-style: preserve-3d; transform: scale(var(--fc-lift)); }
html.ds .fc-press { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform var(--motion-fast) var(--motion-curve); }
html.ds .fc-press.is-down { transform: scale(.962); }
html.ds .fc-rot { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(6deg) rotateY(-16deg); }
/* the thickness: gold slices between the two faces (z = -3 to 3; the faces sit at +/- --fc-z) */
html.ds .fc-slab { position: absolute; inset: 0; border-radius: var(--card-radius); pointer-events: none;
  background: linear-gradient(160deg, var(--card-gold-hi), var(--card-gold-deep) 55%, var(--card-gold-mid)); }
html.ds .fc-face { position: absolute; inset: 0; border-radius: var(--card-radius); overflow: hidden; isolation: isolate; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: var(--card-ink); border: 1px solid var(--card-gold-line); box-sizing: border-box;
  --mx: 65%; --my: 34%; --bx: 23%; --by: 63%; --fc-foil: .55; --fc-halo: .3; --fc-spark: .9; --fc-glare: .45; --fc-shade: 0; }
html.ds .fc-front { transform: translateZ(var(--fc-z)); padding: 16px; display: flex; flex-direction: column; gap: 9px; text-align: left; }
html.ds .fc-back { transform: rotateY(180deg) translateZ(var(--fc-z)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: repeating-linear-gradient(135deg, var(--card-ink) 0 9px, var(--card-ink-2) 9px 18px); }
html.ds .fc-inset { position: absolute; inset: 7px; border: 1px solid var(--card-gold-faint); border-radius: var(--r-control); pointer-events: none; }
html.ds .fc-face p { margin: 0; }

html.ds .fc-toprow { display: flex; justify-content: space-between; align-items: baseline; color: var(--card-gold);
  font: 600 calc(11 * var(--type-unit))/calc(13 * var(--type-unit)) var(--font-ui); letter-spacing: .22em; }
html.ds .fc-toprow > span:last-child { letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--card-number); }
html.ds .fc-art { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: var(--card-art-radius); border: 1px solid var(--card-gold-faint); background: var(--fc-field, var(--card-ink-2)); }
html.ds .fc-layer { position: absolute; left: -16%; top: -16%; width: 132%; height: 132%; display: block; pointer-events: none; color: var(--card-cream); }
html.ds .fc-card .fc-title { margin: 2px 0 0; color: var(--card-cream); font: italic 400 calc(31 * var(--type-unit))/1 var(--card-title-font); letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a long title takes a smaller size rather than two lines (the component chooses the step) */
html.ds .fc-card .fc-title[data-fit="1"] { font: italic 400 calc(26 * var(--type-unit))/1.06 var(--card-title-font); }
html.ds .fc-card .fc-title[data-fit="2"] { font: italic 400 calc(22 * var(--type-unit))/1.1 var(--card-title-font); }
html.ds .fc-card .fc-title[data-fit="3"] { font: italic 400 calc(19 * var(--type-unit))/1.12 var(--card-title-font); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html.ds .fc-meta { color: var(--card-meta); font: 400 calc(12 * var(--type-unit))/calc(15 * var(--type-unit)) var(--font-ui); font-variant-numeric: tabular-nums; }
/* the set mark: the card's place in its season */
html.ds .fc-date { color: var(--card-gold); font: 600 calc(11 * var(--type-unit))/calc(13 * var(--type-unit)) var(--font-ui); letter-spacing: .2em; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* FIRST PRINT: a stamp, a little off square, at the foot of the front on the right. Every finish. */
html.ds .fc-stamp { position: absolute; right: 17px; bottom: 36px; z-index: 2; transform: rotate(-4deg); padding: 5px 7px 4px 9px; border: 1px solid var(--card-gold-line); border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--card-ink), inset 0 0 0 2.5px var(--card-gold-faint); background: var(--card-ink);
  color: var(--card-gold); font: 600 calc(8.5 * var(--type-unit))/1 var(--font-ui); letter-spacing: .24em; white-space: nowrap; }
/* THE LINE (services/cards/words; Foil and Rare): one sentence of ours, stamped in gold on a plate that closes the
   drawing's own frame, the way a framed picture carries a small engraved plate. It is live text in the card's serif
   (never a film's own lettering). The gold is a gradient clipped to the letters and slid by --mx, the light the
   component already moves each frame: as the card turns, a brighter band crosses the lettering. */
html.ds .fc-front.has-line .fc-art { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
html.ds .fc-card .fc-line { font: italic 400 calc(15 * var(--type-unit))/calc(19 * var(--type-unit)) var(--card-title-font); letter-spacing: .01em; text-align: center; text-wrap: balance; color: var(--card-gold);
  margin: -9px 0 0; padding: 8px 12px 9px; border: 1px solid var(--card-gold-faint); border-top: 0; border-radius: 0 0 var(--card-art-radius) var(--card-art-radius); background: var(--card-ink-2); }
html.ds .fc-line > span { display: block; }
/* only where a background can be clipped to letters; anywhere else the lettering is the plain gold above, never invisible */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html.ds .fc-line > span, html.ds .fc-card .gold-ink { background-image: var(--card-gold-foil); background-size: 300% 100%; background-position: var(--mx) 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}

html.ds :is(.fc-foil, .fc-halo, .fc-sparkle, .fc-glare, .fc-matte, .fc-shade) { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
html.ds .fc-foil { opacity: var(--fc-foil); mix-blend-mode: color-dodge; filter: brightness(.72) contrast(1.3);
  background-image: var(--card-rainbow); background-size: 260% 260%; background-position: var(--bx) var(--by); }
html.ds .fc-halo { opacity: var(--fc-halo); mix-blend-mode: screen; background-image: var(--card-rainbow); background-size: 260% 260%; background-position: var(--bx) var(--by);
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, transparent 68%); mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, transparent 68%); }
html.ds .fc-sparkle { opacity: var(--fc-spark); mix-blend-mode: color-dodge;
  background-image: radial-gradient(circle, #fff 0 .7px, transparent 1.2px), radial-gradient(circle, #fff 0 .6px, transparent 1.1px), radial-gradient(circle, #fff 0 .9px, transparent 1.4px);
  background-size: 17px 17px, 29px 29px, 41px 41px; background-position: 0 0, 7px 11px, 19px 5px;
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, transparent 42%); mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, transparent 42%); }
html.ds .fc-glare { opacity: var(--fc-glare); mix-blend-mode: screen; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 52%); }
/* a face turned from the light is a little darker: all three finishes */
html.ds .fc-shade { z-index: 6; background: #000; opacity: var(--fc-shade); }
/* frames are running long on this phone: the two masked layers go, the foil and the glare stay */
html.ds .fc-card.fc-lite :is(.fc-halo, .fc-sparkle) { display: none; }

html.ds .fc-emblem { display: flex; align-items: flex-end; gap: 9px; }
html.ds .fc-emblem > i { display: block; width: 36px; height: 88px; border: 1.5px solid var(--card-gold); border-radius: 18px 18px 4px 4px; background: var(--card-gold-wash); box-sizing: border-box; }
html.ds .fc-emblem > i:nth-child(2) { height: 116px; }
html.ds .fc-wordmark { padding-left: .42em; color: var(--card-gold); font: 600 calc(15 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: .42em; }
html.ds .fc-backnote { color: var(--card-meta); font: 400 calc(11 * var(--type-unit))/calc(13 * var(--type-unit)) var(--font-ui); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
/* THE WELCOME CARD's back (given once, on a first visit): its one true thing under "A WELCOME GIFT", set like a Rare's
   stub note but centred on the Foil stock. */
html.ds .fc-welcome-note { position: relative; z-index: 1; max-width: 228px; margin: -6px 24px 0; color: var(--card-number); font: 400 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: .005em; text-align: center; text-wrap: balance; }
/* THE ONE TRUE THING (services/cards/words; Rare): the small print on a ticket stub across the foot of the back. A row
   of perforations, then the film's title in the card's serif, the fact in the interface face, and the card's number
   where a ticket has its serial. The stub is plain stock (the stripes stop at the perforations) so the print is read
   against one colour. */
html.ds .fc-back.has-note { justify-content: flex-start; gap: 0; }
html.ds .fc-crest { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding-top: 6px; }
html.ds .fc-stub { position: relative; align-self: stretch; display: flex; flex-direction: column; min-height: 160px; box-sizing: border-box; padding: 15px 24px 21px; background: var(--card-ink); text-align: left; }
html.ds .fc-stub::before { content: ""; position: absolute; left: 8px; right: 8px; top: -1px; height: 2px; background-image: radial-gradient(circle, var(--card-gold-line) 0 .9px, transparent 1.3px); background-size: 7px 2px; }
html.ds .fc-card .fc-stub-title { font: italic 400 calc(17 * var(--type-unit))/calc(20 * var(--type-unit)) var(--card-title-font); letter-spacing: 0; margin: 0 0 6px; color: var(--card-cream);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.ds .fc-note { color: var(--card-number); font: 400 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: .005em; text-wrap: balance; }
html.ds .fc-face .fc-stub-foot { display: flex; justify-content: space-between; align-items: baseline; margin: auto 0 0; padding-top: 11px; color: var(--card-meta); font: 400 calc(11 * var(--type-unit))/calc(13 * var(--type-unit)) var(--font-ui); letter-spacing: .14em; }
html.ds .fc-stub-foot > span:first-child { color: var(--card-gold); font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; }

/* light that belongs to a reveal, behind the card */
html.ds :is(.fx-bloom, .fx-ring, .fx-aura) { position: absolute; pointer-events: none; opacity: 0; }
html.ds .fx-bloom { left: 50%; top: 50%; width: 290%; aspect-ratio: 1; margin: -145% 0 0 -145%; border-radius: 50%; background: radial-gradient(closest-side, var(--fc-bloom-1) 18%, var(--fc-bloom-2) 46%, transparent 100%); }
html.ds .fx-ring { inset: -2px; border-radius: calc(18px * var(--fc-k)); border: 1px solid var(--fc-bloom-1); box-shadow: 0 0 24px var(--fc-bloom-2), inset 0 0 24px var(--fc-bloom-2); }
html.ds .fx-aura { inset: 1px; border-radius: calc(16px * var(--fc-k)); box-shadow: 0 0 0 1px var(--card-rare-glow), 0 0 22px 3px var(--card-rare-glow), 0 0 70px 14px var(--card-rare-glow-soft); }
html.ds .fc-card { --fc-bloom-1: var(--card-foil-bloom); --fc-bloom-2: var(--card-foil-bloom-2); }
html.ds .fc-card.fin-rare { --fc-bloom-1: var(--card-rare-bloom); --fc-bloom-2: var(--card-rare-bloom-2); }

/* ------------------------------------------------------------------ Standard: matte. Printed light only; nothing follows the tilt.
   A well-printed card on uncoated stock: a fine tooth over both faces (.m-grain, drawn once by the component), the
   drawing's inks sunk a little into the paper, and the inner rule pressed in, lit from the top left like the rest. */
html.ds .fin-standard .fc-matte { background: linear-gradient(140deg, var(--card-matte-hi), transparent 42%, var(--card-matte-lo)); }
html.ds .m-grain { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
html.ds .fin-standard .fc-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--card-stock-ink); }
html.ds .fin-standard :is(.fc-inset, .fc-emblem > i) { box-shadow: -1px -1px 0 var(--card-press-lo), 1px 1px 0 var(--card-press-hi), inset 1px 1px 0 var(--card-press-hi), inset -1px -1px 0 var(--card-press-lo); }
html.ds .fin-standard .fc-back { background: linear-gradient(140deg, var(--card-matte-blue), transparent 48%, var(--card-matte-violet)), repeating-linear-gradient(135deg, var(--card-ink) 0 9px, var(--card-ink-2) 9px 18px); }

/* ------------------------------------------------------------------ Rare: black stock, gold, a scene with depth */
html.ds .fc-card.fin-rare { --fc-z: 4.6px; }
html.ds .fin-rare .fc-slab { background: linear-gradient(160deg, var(--card-rg-hi), var(--card-rg-3) 38%, var(--card-rg-deep) 58%, var(--card-rg-1) 82%, var(--card-rg-2)); }
html.ds .fin-rare .fc-face { background: radial-gradient(130% 80% at 24% 0%, var(--card-rare-stock-2), var(--card-rare-stock) 62%); border: 1.5px solid var(--card-rare-line); }
html.ds .fin-rare .fc-front { padding: 15.5px; }
/* the gold edge of the face is foil too: a brighter band runs along it as the card turns */
html.ds .r-rim { display: none; }
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  html.ds .fin-rare .fc-face { border-width: 0; }
  html.ds .fin-rare .fc-front { padding: 17px; }
  html.ds .fin-rare .fc-inset { inset: 8px; }
  html.ds .fin-rare .fc-stamp { right: 18.5px; bottom: 37.5px; }
  html.ds .fin-rare .r-rim { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: var(--card-radius); padding: 1.5px; background-image: var(--card-rare-foil); background-size: 300% 100%; background-position: var(--mx) 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
}
html.ds .fin-rare .fc-back { background: radial-gradient(90% 60% at 50% 34%, var(--card-rare-stock-2), transparent 70%), repeating-linear-gradient(135deg, var(--card-rare-stock) 0 9px, var(--card-rare-stripe) 9px 18px); }
html.ds .fin-rare .fc-inset { border-color: var(--card-rare-faint); inset: 6.5px; }
html.ds .fc-card.fin-rare .gold-ink, html.ds .fin-rare .fc-line > span { background-image: var(--card-rare-foil); }
html.ds .fin-rare .fc-toprow { color: var(--card-rg-2); }
html.ds .fin-rare .fc-toprow > span:last-child { color: var(--card-rg-1); }
html.ds .fin-rare .fc-art { border-color: var(--card-rare-line); background: var(--fc-field, var(--card-rare-art)); }
html.ds .fin-rare .fc-art.has-scene { background: var(--card-rare-art); }
html.ds .fc-card.fin-rare .fc-line { color: var(--card-rg-2); background: var(--card-rare-plate); border-color: var(--card-rare-line); }
html.ds .fc-card.fin-rare .fc-title { color: var(--card-rg-1); }
html.ds .fin-rare .fc-meta { color: var(--card-rare-meta); }
html.ds .fin-rare .fc-date { color: var(--card-rg-2); }
html.ds .fin-rare .fc-stamp { border-color: var(--card-rare-line); background: var(--card-rare-stock); box-shadow: inset 0 0 0 2px var(--card-rare-stock), inset 0 0 0 2.5px var(--card-rare-faint); color: var(--card-rg-1); }
/* the scene's planes: each half as large again as the picture, so it can slide without showing an edge */
html.ds .r-layer { position: absolute; left: -25%; top: -25%; width: 150%; height: 150%; pointer-events: none; }
html.ds .r-layer > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
html.ds .r-motes { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
html.ds .r-glass { position: absolute; inset: 0; pointer-events: none; opacity: .5; background: linear-gradient(105deg, transparent 40%, var(--card-rare-glare) 50%, transparent 60%); background-size: 300% 100%; background-position: var(--mx) 0; }
html.ds .r-frame { position: absolute; inset: 0; pointer-events: none; border-radius: var(--card-art-radius) var(--card-art-radius) 0 0;
  box-shadow: inset 0 0 0 1px var(--card-frame-2), inset 0 14px 22px -12px var(--card-frame-1), inset 14px 0 22px -14px var(--card-frame-1), inset -14px 0 22px -14px var(--card-frame-1), inset 0 -10px 18px -12px var(--card-frame-2); }
/* a Rare with no scene: the drawing under glass, with a lighter frame so its flat colour still reads */
html.ds .fc-art.has-glass .r-frame { box-shadow: inset 0 0 0 1px var(--card-frame-2), inset 0 12px 22px -14px var(--card-frame-2), inset 0 -10px 18px -12px var(--card-frame-2); }
html.ds .fin-rare .fc-front:not(.has-line) .r-frame, html.ds .fin-rare .fc-front:not(.has-line) .r-clip { border-radius: calc(var(--card-art-radius) - 1px); }
/* The picture is cut to its frame by .r-clip, not by the frame itself, so that one thing can stand in front of it:
   .r-out holds a second copy of a breakFrame layer, drawn exactly over the first and shown only at the top edge of the
   picture and above it. It lies over the gold line and out of the frame's own shadow, and fades back into the first a
   little way in. */
html.ds .fin-rare .fc-art { overflow: visible; }
html.ds .r-clip { position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--card-art-radius) - 1px) calc(var(--card-art-radius) - 1px) 0 0; }
html.ds .r-out { position: absolute; left: 0; right: 0; top: -26px; bottom: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 0, #000 27px, transparent 42px); mask-image: linear-gradient(#000 0, #000 27px, transparent 42px); }
html.ds .r-out > div { position: absolute; left: 0; right: 0; top: 26px; bottom: 0; }
/* gloss on black: a pattern of the three arches that shows only where the light falls (the back) */
html.ds .r-varnish { position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: .2;
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, transparent 58%); mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, transparent 58%); }
html.ds .r-varnish > i { position: absolute; inset: 0; background: var(--card-rg-2);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30' viewBox='0 0 26 30'%3E%3Cg fill='none' stroke='%23000' stroke-width='.7'%3E%3Cpath d='M5 21v-7a2 2 0 0 1 4 0v7z'/%3E%3Cpath d='M11 21V11a2 2 0 0 1 4 0v10z'/%3E%3Cpath d='M17 21v-7a2 2 0 0 1 4 0v7z'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30' viewBox='0 0 26 30'%3E%3Cg fill='none' stroke='%23000' stroke-width='.7'%3E%3Cpath d='M5 21v-7a2 2 0 0 1 4 0v7z'/%3E%3Cpath d='M11 21V11a2 2 0 0 1 4 0v10z'/%3E%3Cpath d='M17 21v-7a2 2 0 0 1 4 0v7z'/%3E%3C/g%3E%3C/svg%3E"); }
html.ds .fin-rare .fc-front .r-varnish { display: none; }
html.ds .fin-rare .fc-glare { mix-blend-mode: normal; opacity: .55; background: radial-gradient(circle at var(--mx) var(--my), var(--card-rare-glare), transparent 46%); }
html.ds .r-flash { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 42%, var(--card-rg-hi), var(--card-rare-flash) 38%, var(--card-rare-glow-soft) 100%); }
/* the Rare back: gold on black, so it is known before it is turned */
html.ds .fin-rare .fc-emblem { gap: 10px; }
html.ds .fin-rare .fc-emblem > i { width: 38px; height: 92px; border: 0; border-radius: 19px 19px 4px 4px; background-color: transparent; background-image: var(--card-rare-foil); background-size: 320% 100%; background-position: var(--mx) 0;
  box-shadow: inset 0 0 0 1px var(--card-rg-hi), inset 0 -10px 16px -6px var(--card-rg-deep), inset 0 0 0 4px var(--card-rare-faint), 0 0 26px var(--card-rare-wash); }
html.ds .fin-rare .fc-emblem > i:nth-child(2) { height: 122px; }
html.ds .fin-rare .fc-wordmark { color: var(--card-rg-2); }
html.ds .fin-rare .fc-backnote { color: var(--card-rare-meta); }
html.ds .fin-rare .fc-stub { background: var(--card-rare-stock); }
html.ds .fin-rare .fc-stub::before { background-image: radial-gradient(circle, var(--card-rare-line) 0 .9px, transparent 1.3px); }
html.ds .fc-card.fin-rare .fc-stub-title { color: var(--card-rg-1); }
html.ds .fin-rare .fc-note { color: var(--card-rare-text); }
html.ds .fin-rare .fc-stub-foot { color: var(--card-rare-meta); }
html.ds .fin-rare .fc-stub-foot > span:first-child { color: var(--card-rg-2); }
html.ds .fin-rare .fc-back.is-quiet { justify-content: center; gap: 18px; }
html.ds .fin-rare .fc-back.is-quiet .fc-crest { flex: none; padding: 0; gap: 18px; }
html.ds .fin-rare .fc-back.has-note .fc-backnote { display: none; }
/* the edge of light that runs round the back before a Rare is turned */
html.ds .r-trace { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; overflow: visible; opacity: 0; }
html.ds .r-trace rect { fill: none; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
html.ds .r-trace .t-glow { stroke: var(--card-rare-glow-soft); stroke-width: 9; }
html.ds .r-trace .t-line { stroke: var(--card-rg-1); stroke-width: 2.4; }
html.ds .r-trace .t-head { stroke: var(--card-rg-hi); stroke-width: 4.5; stroke-dasharray: 1 999; }

/* ------------------------------------------------------------------ a small card: a still picture (the shelf, Today, a sheet)
   No animation, no canvas, nothing per frame. The three finishes have to be told apart at the width of a thumb:
   Standard is plain navy print; Foil carries a still rainbow sheen and a bright gold edge; Rare is black with a
   doubled gold frame and a gold glow, which nothing else on the shelf has. A First Print carries a small gold seal. */
html.ds .fc-mini { position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; border-radius: var(--r-control); overflow: hidden; isolation: isolate; box-sizing: border-box;
  background: var(--card-ink); border: 1px solid var(--card-gold-faint); padding: 6%; }
html.ds .fc-mini-art { position: relative; display: block; width: 100%; height: 100%; border-radius: var(--r-chip); overflow: hidden; background: var(--fc-field, var(--card-ink-2)); }
html.ds .fc-mini-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; color: var(--card-cream); }
html.ds .fc-mini.fin-standard .fc-mini-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, var(--card-matte-hi), transparent 42%, var(--card-matte-lo)); }
html.ds .fc-mini.fin-foil { border-color: var(--card-gold); }
html.ds .fc-mini-foil { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .62; filter: brightness(.8) contrast(1.2); background-image: var(--card-rainbow); background-size: 300% 300%; background-position: 30% 45%; }
html.ds .fc-mini.fin-foil::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, .34) 46%, transparent 58%); mix-blend-mode: screen; }
html.ds .fc-mini.fin-rare { background: var(--card-rare-stock); border: 1.5px solid var(--card-rg-2); padding: 8%; overflow: visible;
  box-shadow: 0 0 0 1px var(--card-rare-stock), 0 0 0 2px var(--card-rg-3), 0 0 14px 1px var(--card-rare-glow-soft); }
html.ds .fc-mini.fin-rare .fc-mini-art { background: var(--fc-field, var(--card-rare-art)); box-shadow: 0 0 0 1px var(--card-rare-line); }
html.ds .fc-mini-rim { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, transparent 34%, var(--card-rare-glare) 48%, transparent 60%); }
/* First Print: a small gold seal at the foot */
html.ds .fc-mini-first { position: absolute; right: 9%; bottom: 7%; width: 22%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 2;
  background: radial-gradient(circle at 35% 30%, var(--card-rg-hi), var(--card-gold) 46%, var(--card-gold-deep)); box-shadow: 0 0 0 1px var(--card-ink), 0 1px 3px rgba(0, 0, 0, .6); }
html.ds .fc-mini-first::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--card-gold-ink); opacity: .55; }
/* face down: a week to come (dim), an earned card waiting for Friday (sealed: gold, quiet), a card waiting to be opened (ready: lit) */
html.ds .fc-mini.is-down { display: grid; place-items: center; padding: 0; background: repeating-linear-gradient(135deg, var(--card-ink) 0 6px, var(--card-ink-2) 6px 12px); border-color: var(--card-shade-line); }
html.ds .fc-mini.is-down .fc-emblem { gap: 6%; width: 46%; aspect-ratio: 1 / 1; align-items: flex-end; justify-content: center; opacity: .45; }
html.ds .fc-mini.is-down .fc-emblem > i { width: 26%; height: 62%; border-width: 1px; border-radius: 999px 999px 2px 2px; }
html.ds .fc-mini.is-down .fc-emblem > i:nth-child(2) { height: 84%; }
html.ds .fc-mini.is-down.is-sealed { border-color: var(--card-gold-line); box-shadow: 0 0 12px var(--card-gold-wash); }
html.ds .fc-mini.is-down.is-sealed .fc-emblem { opacity: 1; }
html.ds .fc-mini.is-down.is-sealed .fc-emblem > i { background: var(--card-gold-faint); }
html.ds .fc-mini.is-down.is-ready { border-color: var(--card-gold); box-shadow: 0 0 0 1px var(--card-gold), 0 0 18px var(--card-gold-faint); }
html.ds .fc-mini.is-down.is-ready .fc-emblem { opacity: 1; }
html.ds .fc-mini.is-down.is-ready .fc-emblem > i { background: var(--card-gold); }
/* not the person's: the drawing as a silhouette on dark stock. Missed is a gap; this week's has a dashed gold edge. */
html.ds .fc-mini.is-shade { background: var(--card-shade-stock); border-color: var(--card-shade-line); }
html.ds .fc-mini.is-shade .fc-mini-art { background: transparent; }
html.ds .fc-mini.is-shade .fc-mini-art > svg { filter: brightness(0) invert(1); opacity: .13; }
html.ds .fc-mini.is-shade.is-current { border: 1px dashed var(--card-gold-faint); }
html.ds .fc-mini.is-shade.is-current .fc-mini-art > svg { opacity: .2; }
html.ds .fc-mini.is-fresh { box-shadow: 0 0 0 2px var(--card-gold), 0 0 22px var(--card-gold-faint); }

@media (prefers-reduced-motion: reduce) {
  html.ds .fc-press { transition: none; }
}
html.ds #device.manual-reduced-motion .fc-press { transition: none; }
@media (forced-colors: active) {
  html.ds :is(.fc-foil, .fc-halo, .fc-sparkle, .fc-glare, .fc-mini-foil, .fc-mini-rim, .r-varnish, .r-glass, .m-grain) { display: none; }
  html.ds .fc-line > span, html.ds .fc-card .gold-ink { background-image: none; -webkit-text-fill-color: currentColor; }
  html.ds .fc-face, html.ds .fc-mini { border-color: CanvasText; }
}

/* ===== prototype-src/film-cards-ultra.css ===== */
/* THE TWO CARDS OF 8 OCTOBER 2026: the mystery card (this week's card before its reveal: film-cards-card.js miniMystery)
   and THE ULTRA (film-cards-ultra.js: a season's secret sixth card, earned with five First Prints).
   Record: hub/docs/FILM-CARDS-ULTRA-2026-10-08.md. Both have light that moves on its own (a breath, a sheen, a drift),
   which film-cards.css, the printed card's own sheet, never has; so they live here.

   THE FINISH. Opal, unlike Foil (a rainbow that slides) or Rare (black and gold): a dark glass with a soft spectrum
   in it, patches of rose, sky, mint and pale gold that drift against each other as the card is tilted, under a clear
   lacquer (one long highlight that follows the light, and a bright hairline on the top edge). The lettering is a fine
   gold engraving, cut in: dark below, light above. The colours here are the Ultra's own and are used nowhere else.
   Sizes on the card are card units (the 300 x 420 card, scaled whole by --fu-k), as the film card's are. */
html.ds :is(.fu-card, .fu-mini, .fu-tray, .fu-rise) {
  --fu-glass: #0a0a12;
  --fu-glass-2: #15141f;
  --fu-glass-deep: #040408;
  --fu-rose: rgba(255, 168, 212, .26);
  --fu-sky: rgba(132, 214, 255, .22);
  --fu-mint: rgba(160, 255, 206, .17);
  --fu-gold-tint: rgba(255, 222, 150, .19);
  --fu-violet: rgba(186, 160, 255, .2);
  --fu-lacquer: rgba(255, 255, 255, .13);
  --fu-lacquer-edge: rgba(255, 255, 255, .34);
  --fu-cut-hi: rgba(255, 255, 255, .2);
  --fu-cut-lo: rgba(0, 0, 0, .78);
  --fu-engr-1: #7c5c22;
  --fu-engr-2: #dfc072;
  --fu-engr-3: #fff4d2;
  --fu-ledge: #0b0a10;
  --fu-ledge-line: rgba(223, 192, 114, .8);
  --fu-bay-frame: rgba(223, 192, 114, .5);
  --fu-bay-dark: rgba(4, 4, 10, .5);
  --fu-glow: rgba(255, 236, 196, .5);
  --fu-room: rgba(150, 120, 255, .22);
}

/* ------------------------------------------------------------------ the mystery card (the owner, 8 October 2026)
   This week's card before its reveal: nothing of the film, only the card's back as black glass, the season's mark cut
   into it (the three arches, the season's numeral under them) and a question of light: a point of light that rises
   and breathes inside the tall middle arch, and a slow sheen across the glass. Earned (sealed), the arches take gold;
   waiting to be opened (ready), the light fills the arch and the edge is lit. Reduce Motion: the light simply stands. */
html.ds .fc-mini.is-mystery { container-type: inline-size; display: grid; place-items: center; padding: 0; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 38%, #1a1d33 0%, #0b0c18 46%, #040409 100%); border: 1px solid rgba(214, 222, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -1px 0 rgba(0, 0, 0, .7), 0 6px 18px rgba(0, 0, 0, .45); }
html.ds .fc-mini.is-mystery::before { content: ""; position: absolute; inset: 5%; border-radius: calc(var(--r-control) - 3px); pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(214, 222, 255, .08), inset 0 0 18px rgba(120, 132, 255, .06); }
html.ds .fc-myst-mark { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6cqi; width: 70%; margin-top: 4%; }
/* the light gathering behind the arches, spilling out into the glass */
html.ds .fc-myst-mark::before { content: ""; position: absolute; left: 50%; top: 46%; width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 150, .2), rgba(150, 140, 255, .08) 55%, transparent); animation: fc-myst-breathe 5.2s var(--motion-breathe) infinite; }
html.ds .fc-myst-mark .fc-emblem { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 7%; width: 100%; aspect-ratio: 1 / 1; }
html.ds .fc-myst-mark .fc-emblem > i { position: relative; display: block; width: 26%; height: 64%; box-sizing: border-box; overflow: hidden; border: 1.5px solid rgba(214, 222, 255, .42); border-radius: 999px 999px 2px 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .35)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .05); }
html.ds .fc-myst-mark .fc-emblem > i:nth-child(2) { height: 92%; border-color: rgba(255, 226, 170, .62); background: linear-gradient(0deg, rgba(255, 210, 140, .34), rgba(255, 210, 140, .06) 62%, rgba(0, 0, 0, .3)); }
/* the question of light: inside the middle arch, a light that rises and breathes */
html.ds .fc-myst-light { position: absolute; left: 50%; bottom: 16%; width: 190%; aspect-ratio: 1; translate: -50% 50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff6dc 0 8%, rgba(255, 226, 160, .82) 13%, rgba(255, 196, 110, .3) 32%, transparent 64%); animation: fc-myst-breathe 5.2s var(--motion-breathe) infinite; }
html.ds .fc-myst-n { font: 600 calc(12 * 1cqi) / 1 var(--font-ui); letter-spacing: .32em; text-indent: .32em; color: rgba(255, 226, 170, .6); }
html.ds .fc-myst-sheen { position: absolute; inset: -40% -60%; pointer-events: none; z-index: 2; mix-blend-mode: screen;
  background: linear-gradient(112deg, transparent 42%, rgba(200, 210, 255, .10) 48%, rgba(255, 255, 255, .18) 50%, rgba(200, 210, 255, .10) 52%, transparent 58%); animation: fc-myst-sheen 7.5s var(--motion-breathe) infinite; }
html.ds .fc-mini.is-mystery.is-sealed { border-color: var(--card-gold-faint); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 14px var(--card-gold-wash), 0 6px 18px rgba(0, 0, 0, .45); }
html.ds .fc-mini.is-mystery.is-sealed .fc-myst-mark .fc-emblem > i { border-color: var(--card-gold-line); }
html.ds .fc-mini.is-mystery.is-sealed .fc-myst-n { color: var(--card-gold-faint); }
html.ds .fc-mini.is-mystery.is-ready { border-color: var(--card-gold); box-shadow: 0 0 0 1px var(--card-gold), 0 0 22px var(--card-gold-faint); }
html.ds .fc-mini.is-mystery.is-ready .fc-myst-mark .fc-emblem > i { border-color: var(--card-gold); }
html.ds .fc-mini.is-mystery.is-ready .fc-myst-mark .fc-emblem > i:nth-child(2) { background: linear-gradient(0deg, rgba(255, 220, 150, .7), rgba(255, 210, 140, .18) 70%, rgba(0, 0, 0, .2)); }
html.ds .fc-mini.is-mystery.is-ready .fc-myst-light { width: 280%; animation-duration: 2.6s; }
html.ds .fc-mini.is-mystery.is-ready .fc-myst-n { color: var(--card-gold); }
@keyframes fc-myst-breathe { 0%, 100% { opacity: .55; transform: translateY(8%) scale(.86); } 50% { opacity: 1; transform: translateY(-14%) scale(1.06); } }
@keyframes fc-myst-sheen { 0%, 55% { transform: translateX(-38%); opacity: 0; } 62% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(38%); opacity: 0; } }

/* ------------------------------------------------------------------ the card in 3D */
html.ds .fu-card { position: relative; display: block; width: 100%; height: var(--fu-h, 420px); margin: 0 auto; touch-action: none; cursor: grab; outline: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; --mx: 50%; --my: 40%; }
html.ds .fu-card:focus-visible { outline: 2px solid var(--c-focus, #fff); outline-offset: 4px; border-radius: 18px; }
html.ds .fu-stage { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1700px; transition: opacity var(--motion-fast) var(--motion-curve); }
html.ds .fu-scale { position: relative; width: 300px; height: 420px; transform: scale(var(--fu-k-closed, 1)); transform-style: preserve-3d; transition: transform var(--motion-ceremony) var(--motion-curve); }
html.ds .fu-card.is-open .fu-scale { transform: scale(var(--fu-k-open, .5)); }
html.ds .fu-tilt { position: absolute; inset: 0; transform-style: preserve-3d; }
/* the cross-fade is on the flat stage, never on a 3D layer: opacity there would flatten the unfold mid-fade */
html.ds .fu-card.is-fading .fu-stage { opacity: 0; }
html.ds .fu-shadow { position: absolute; left: 6%; right: 6%; bottom: -26px; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); transform: translateZ(-30px); transition: transform var(--motion-ceremony) var(--motion-curve); }
/* 120 Hz (17 Oct 2026): the shadow widens by scale (88% -> 188% of the card), not by moving its left and right edges */
html.ds .fu-card.is-open .fu-shadow { transform: translateZ(-30px) scaleX(2.136); }
html.ds .fu-centre, html.ds .fu-wing { position: absolute; top: 0; height: 420px; transform-style: preserve-3d; }
html.ds .fu-centre { left: 0; width: 300px; visibility: hidden; transition: visibility 0s linear 1150ms; }
/* the centre is only ever seen open: closed, the wings are the whole slab (and its square corners never show at theirs) */
html.ds .fu-card.is-open .fu-centre { visibility: visible; transition-delay: 0s; }
html.ds .fu-wing { width: 150px; transition: transform var(--motion-ceremony) var(--motion-curve); }
/* the wings hang from the centre's two edges; closed they lie over it (their outer faces are the slab), open they swing
   out by nearly a half turn, standing a little forward, as the triptych's wings stand */
html.ds .fu-wing.is-left { left: 0; transform-origin: 0 50%; transform: translateZ(1.5px); }
html.ds .fu-wing.is-right { left: 150px; transform-origin: 100% 50%; transform: translateZ(1.5px); }
html.ds .fu-card.is-open .fu-wing.is-left { transform: translateZ(1.5px) rotateY(-168deg); }
html.ds .fu-card.is-open .fu-wing.is-right { transform: translateZ(1.5px) rotateY(168deg); }
html.ds .fu-face { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--fu-glass); }
html.ds .fu-wing > .fu-face.is-in { transform: rotateY(180deg); }
html.ds .fu-wing.is-left > .fu-face { border-radius: 16px 0 0 16px; }
html.ds .fu-wing.is-right > .fu-face { border-radius: 0 16px 16px 0; }
html.ds .fu-wing.is-left > .fu-face.is-out { box-shadow: inset 1px 0 0 var(--fu-lacquer-edge), inset 0 1px 0 var(--fu-lacquer-edge), inset -1px 0 0 rgba(0, 0, 0, .9); }
html.ds .fu-wing.is-right > .fu-face.is-out { box-shadow: inset -1px 0 0 rgba(255, 255, 255, .12), inset 0 1px 0 var(--fu-lacquer-edge), inset 1px 0 0 rgba(255, 255, 255, .08); }
/* the slab is one picture across both outer faces: each shows its half of it */
html.ds .fu-half { position: absolute; top: 0; left: 0; width: 300px; height: 420px; }
html.ds .fu-wing.is-right .fu-half { left: -150px; }

/* ------------------------------------------------------------------ opal and lacquer */
html.ds .fu-opal { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 34% at calc(var(--mx) - 18%) calc(var(--my) + 14%), var(--fu-rose), transparent 70%),
    radial-gradient(40% 32% at calc(118% - var(--mx)) calc(var(--my) - 6%), var(--fu-sky), transparent 70%),
    radial-gradient(38% 30% at calc(var(--mx) + 6%) calc(112% - var(--my)), var(--fu-mint), transparent 70%),
    radial-gradient(34% 26% at calc(var(--mx) + 26%) calc(var(--my) - 22%), var(--fu-gold-tint), transparent 70%),
    radial-gradient(36% 28% at calc(84% - var(--mx)) calc(var(--my) + 40%), var(--fu-violet), transparent 70%),
    radial-gradient(120% 90% at 50% 45%, var(--fu-glass-2) 0%, var(--fu-glass) 55%, var(--fu-glass-deep) 100%); }
/* inside, the opal is one wall across the three panels */
html.ds .fu-face.is-in > .fu-opal { left: calc(-1 * var(--fu-seg, 0px)); right: auto; width: 600px; }
html.ds .fu-lacquer { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, transparent calc(var(--mx) - 26%), var(--fu-lacquer) calc(var(--mx) - 4%), rgba(255, 255, 255, .02) calc(var(--mx) + 8%), transparent calc(var(--mx) + 22%)),
    linear-gradient(180deg, var(--fu-lacquer-edge), transparent 1.2%); }
/* the slow light inside the glass */
html.ds .fu-glow { position: absolute; left: 50%; top: 52%; width: 120%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 236, 196, .14), transparent 70%); animation: fu-drift 16s var(--motion-breathe) infinite alternate; }
@keyframes fu-drift { 0% { transform: translate(-16%, -10%) scale(.9); opacity: .6; } 50% { opacity: 1; } 100% { transform: translate(14%, 12%) scale(1.06); opacity: .7; } }

/* ------------------------------------------------------------------ the season's mark, cut into the slab */
html.ds .fu-slab { position: absolute; inset: 0; }
html.ds .fu-slab .fu-mark { position: absolute; left: 50%; top: 122px; translate: -50% 0; display: flex; align-items: flex-end; gap: 14px; height: 150px; }
html.ds .fu-mark > i { position: relative; display: block; width: 50px; height: 110px; box-sizing: border-box; border-radius: 25px 25px 3px 3px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .25)); box-shadow: inset 0 2px 3px var(--fu-cut-lo), inset 0 -1px 0 var(--fu-cut-hi), 0 1px 0 rgba(255, 255, 255, .07), 0 -1px 0 rgba(0, 0, 0, .5); }
html.ds .fu-mark > i:nth-child(2) { height: 150px; }
/* light gathers inside the middle arch, where the two wings meet */
html.ds .fu-slab .fu-mark > i:nth-child(2)::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: 70px; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, var(--fu-glow), transparent); animation: fu-breathe 6s var(--motion-breathe) infinite; }
@keyframes fu-breathe { 0%, 100% { opacity: .45; transform: translateY(10%) scale(.85); } 50% { opacity: .95; transform: translateY(-16%) scale(1.08); } }

/* ------------------------------------------------------------------ the gold engraving */
html.ds .fu-engr { position: absolute; left: 0; right: 0; margin: 0; text-align: center; white-space: nowrap; pointer-events: none; }
html.ds .fu-engr > span { display: inline-block; padding-left: .3em; letter-spacing: .3em; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, var(--fu-engr-1) 0%, var(--fu-engr-2) 34%, var(--fu-engr-3) 48%, var(--fu-engr-2) 62%, var(--fu-engr-1) 100%); background-size: 320% 100%; background-position: var(--mx) 0;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .85)) drop-shadow(0 -0.5px 0 rgba(255, 255, 255, .16)); font: 600 calc(10 * var(--type-unit))/1.2 var(--font-ui); }
html.ds .fu-slab .fu-engr.is-top { top: 34px; }
html.ds .fu-slab .fu-engr.is-top > span { font-size: calc(12 * var(--type-unit)); letter-spacing: .62em; padding-left: .62em; }
html.ds .fu-slab .fu-engr.is-num { top: 286px; }
html.ds .fu-slab .fu-engr.is-num > span { font-size: calc(12 * var(--type-unit)); letter-spacing: .4em; padding-left: .4em; }
html.ds .fu-slab .fu-engr.is-name { top: 336px; }
html.ds .fu-slab .fu-engr.is-name > span { font-size: calc(11 * var(--type-unit)); letter-spacing: .26em; padding-left: .26em; }
html.ds .fu-slab .fu-engr.is-no { top: 362px; }
html.ds .fu-slab .fu-engr.is-no > span { font-size: calc(10 * var(--type-unit)); letter-spacing: .3em; }
html.ds .fu-face.is-in .fu-engr.is-kicker { top: 36px; }
html.ds .fu-face.is-in .fu-engr.is-kicker > span { font-size: calc(9 * var(--type-unit)); letter-spacing: .5em; padding-left: .5em; }
html.ds .fu-face.is-in .fu-engr.is-title { top: 56px; }
html.ds .fu-face.is-in .fu-engr.is-title > span { font-size: calc(14 * var(--type-unit)); letter-spacing: .3em; }
html.ds .fu-face.is-in .fu-engr.is-serial { top: 356px; }
html.ds .fu-face.is-in .fu-engr.is-serial > span { font-size: calc(11 * var(--type-unit)); letter-spacing: .4em; padding-left: .4em; }
html.ds .fu-face.is-in .fu-engr.is-side { top: 357px; }
html.ds .fu-face.is-in .fu-engr.is-side > span { font-size: calc(8.5 * var(--type-unit)); letter-spacing: .34em; }

/* ------------------------------------------------------------------ the arcade: five windows on one ledge */
html.ds .fu-ledge { position: absolute; left: 0; right: 0; top: 312px; height: 16px; background: linear-gradient(180deg, var(--fu-ledge-line) 0 1px, var(--fu-ledge) 1px, rgba(0, 0, 0, .1));
  box-shadow: 0 6px 12px rgba(0, 0, 0, .55); }
html.ds .fu-wing.is-left .fu-ledge { left: 10px; }
html.ds .fu-wing.is-right .fu-ledge { right: 10px; }
html.ds .fu-bay { position: absolute; overflow: hidden; background: var(--fu-field, #07070c); box-shadow: inset 0 0 0 1px var(--fu-bay-frame), 0 0 0 3px rgba(0, 0, 0, .45), 0 0 0 4px rgba(255, 255, 255, .05); isolation: isolate; }
html.ds .fu-world { position: absolute; width: 0; height: 0; }
html.ds .fu-pl { position: absolute; display: block; overflow: visible; pointer-events: none; }
/* the light walks along the arcade: the bay whose turn it is is lit, the others rest in shade */
html.ds .fu-bay::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--fu-bay-dark); transition: opacity var(--motion-slow) var(--motion-curve); }
html.ds .fu-bay.is-lit::after { opacity: 0; }
html.ds .fu-bay-light { position: absolute; left: -20%; right: -20%; top: -30%; height: 70%; z-index: 3; pointer-events: none; opacity: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 238, 200, .16), transparent); transition: opacity var(--motion-slow) var(--motion-curve); }
html.ds .fu-bay.is-lit .fu-bay-light { opacity: 1; }
html.ds .fu-card:not(.is-open) .fu-bay::after { opacity: 1; }

/* ------------------------------------------------------------------ small: the shelf's Ultra, and its recessed slot */
html.ds .fu-mini { position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; border-radius: var(--r-control); overflow: hidden; container-type: inline-size; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 0 16px var(--fu-room); --mx: 42%; --my: 36%; }
html.ds .fu-mini > .fu-mark { position: absolute; left: 50%; top: 30%; translate: -50% 0; gap: 5cqi; height: 44%; display: flex; align-items: flex-end; }
html.ds .fu-mini > .fu-mark > i { width: 14cqi; height: 72%; border-radius: 7cqi 7cqi 1px 1px; }
html.ds .fu-mini > .fu-mark > i:nth-child(2) { height: 100%; }
html.ds .fu-mini-n { position: absolute; left: 0; right: 0; bottom: 10%; text-align: center; font: 600 calc(11 * 1cqi)/1 var(--font-ui); letter-spacing: .3em; text-indent: .3em; color: var(--fu-engr-2); }
html.ds .fu-tray { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; box-sizing: border-box; border-radius: var(--r-control); text-align: left; }
html.ds .fu-tray.is-locked { background: rgba(0, 0, 0, .28); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .06); }
html.ds .fu-tray.is-earned { background: linear-gradient(100deg, rgba(150, 120, 255, .1), rgba(120, 200, 255, .06) 50%, rgba(255, 210, 160, .08)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
html.ds .fu-tray > .fu-mini, html.ds .fu-socket { flex: none; width: 44px; }
html.ds .fu-socket { position: relative; display: block; aspect-ratio: 5 / 7; border-radius: var(--r-chip); background: rgba(0, 0, 0, .35); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .14), 0 1px 0 rgba(255, 255, 255, .05); container-type: inline-size; }
html.ds .fu-socket > .fu-mark { position: absolute; left: 50%; top: 24%; translate: -50% 0; display: flex; align-items: flex-end; gap: 5cqi; height: 50%; opacity: .7; }
html.ds .fu-socket > .fu-mark > i { width: 15cqi; height: 72%; border-radius: 8cqi 8cqi 1px 1px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); background: none; }
html.ds .fu-socket > .fu-mark > i:nth-child(2) { height: 100%; }
html.ds .fu-tray-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
html.ds .fu-tray-k { color: var(--c-label-2); font: 600 var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
html.ds .fu-tray-v { color: var(--c-label-1); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); }
html.ds .fu-pips { display: flex; gap: 5px; margin-top: 4px; }
html.ds .fu-pips > i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--card-gold-faint, rgba(255, 210, 122, .55)); }
html.ds .fu-pips > i.is-on { background: var(--card-gold, #ffd27a); box-shadow: 0 0 6px var(--card-gold-faint, rgba(255, 210, 122, .55)); }

/* ------------------------------------------------------------------ the Ultra's own reveal */
html.ds .fu-rise { position: relative; width: 100%; display: grid; place-items: center; }
html.ds .fu-row { position: absolute; z-index: 2; left: 50%; top: 50%; display: flex; gap: 8px; width: min(92%, 420px); margin: 0; padding: 0; list-style: none; translate: -50% -50%; pointer-events: none; }
html.ds .fu-row > li { flex: 1; min-width: 0; opacity: 0; transform: translateY(18px); transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-slow) var(--motion-curve); transition-delay: calc(var(--i) * 70ms); filter: brightness(.5); }
html.ds .fu-rise.is-in .fu-row > li { opacity: 1; transform: none; }
html.ds .fu-row > li.is-lit, html.ds .fu-rise.is-lit .fu-row > li { filter: brightness(1.12) drop-shadow(0 0 10px rgba(255, 210, 122, .55)); transition-delay: 0ms; }
/* the five lift and slide together to the middle, and go into the glass */
html.ds .fu-rise.is-gathered .fu-row > li { transform: translate(calc((2 - var(--i)) * 104%), -14px) scale(.86) rotate(calc((var(--i) - 2) * 3deg)); transition: transform var(--motion-slow) var(--motion-curve), opacity var(--motion-slow) var(--motion-curve) 620ms; }
html.ds .fu-rise.is-risen .fu-row > li { opacity: 0; }
html.ds .fu-from { position: relative; z-index: 1; width: 100%; opacity: 0; transform: translateY(42px) scale(.72); transition: opacity var(--motion-slow) var(--motion-curve), transform var(--motion-ceremony) var(--motion-curve); }
html.ds .fu-rise.is-risen .fu-from { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.ds :is(.fc-myst-light, .fc-myst-sheen, .fc-myst-mark::before) { animation: none; }
  html.ds :is(.fu-glow, .fu-slab .fu-mark > i:nth-child(2)::after) { animation: none; }
  html.ds :is(.fu-scale, .fu-wing, .fu-centre, .fu-shadow, .fu-row > li, .fu-from) { transition: none; }
  html.ds .fu-stage { transition: opacity var(--motion-fast) var(--motion-curve); }
}
html.ds #device.manual-reduced-motion :is(.fc-myst-light, .fc-myst-sheen, .fc-myst-mark::before) { animation: none; }
html.ds #device.manual-reduced-motion :is(.fu-glow, .fu-slab .fu-mark > i:nth-child(2)::after) { animation: none; }
html.ds #device.manual-reduced-motion :is(.fu-scale, .fu-wing, .fu-centre, .fu-shadow, .fu-row > li, .fu-from) { transition: none; }
@media (forced-colors: active) {
  html.ds :is(.fu-opal, .fu-lacquer, .fu-glow) { display: none; }
  html.ds .fu-face { border: 1px solid CanvasText; }
  html.ds .fu-engr > span { color: CanvasText; background-image: none; }
}

/* ===== prototype-src/film-cards-week.css ===== */
/* TRIPTIC film cards: the week, and every surface a card appears on (prototype-src/film-cards.js, film-cards-demo.js).
   Record: hub/docs/FILM-CARDS-SEASONS-APP-2026-10-07.md. The card itself is film-cards.css.

     .fc-week        You: "This week's card" (the sealed card, the three arches, one line); on Today until 9 October 2026
     .fc-arch-link   Today: one quiet line under the Daily Cryptic and Friday 3 ("Lights an arch on this week's card")
     .fc-capsule     the moment an arch lights: the emblem, the arch filling, one line
     .fc-slot-line   the film page: that same line under a rating
     .fc-overlay     the reveal (.fc-reveal) and a card opened in 3D (.fc-viewer)
     .fc-shelf       the Library: seasons as rows of five numbered slots
     .fc-sheet       a slot that is not theirs; a film to rate
     .fc-how         "How cards work"
     .fc-demo        /?cards=demo: the label and the panel

   Scoped under html.ds; the app's own tokens for everything around a card (--c-*, the type ramp, radii, spacing,
   motion), the card's --card-* tokens for its gold (inside .fc-scope only). `transition` names only transform and
   opacity. THE ARCH is one shape used everywhere (.fc-arch): a rounded-top panel whose gold rises from its foot
   (--fc-fill, 0 to 1, a scaleY on its inner <b>); full, it is lit. The middle arch of three is the taller.
   Reduce Motion: nothing slides or rises; a capsule and an overlay are simply there, then not. */

/* ------------------------------------------------------------------ the arch, and the emblem of three */
html.ds .fc-arch { position: relative; display: block; flex: none; box-sizing: border-box; width: 34px; height: 46px; overflow: hidden; border: 1.5px solid var(--card-gold-faint); border-radius: 999px 999px 5px 5px; background: var(--card-gold-wash); }
html.ds .fc-arch.is-tall { height: 58px; }
html.ds .fc-arch > b { position: absolute; inset: 0; display: block; transform-origin: 50% 100%; transform: scaleY(var(--fc-fill, 0)); background: linear-gradient(to top, var(--card-gold-deep), var(--card-gold) 46%, var(--card-gold-hi)); transition: transform var(--motion-slow) var(--motion-curve); }
html.ds .fc-arch.is-lit { border-color: var(--card-gold); box-shadow: 0 0 12px var(--card-gold-faint); }
html.ds .fc-emblem3 { display: inline-flex; align-items: flex-end; gap: 3px; flex: none; }
html.ds .fc-emblem3 > .fc-arch { width: 11px; height: 19px; border-width: 1px; border-radius: 999px 999px 2px 2px; }
html.ds .fc-emblem3 > .fc-arch:nth-child(2) { height: 25px; }
html.ds .fc-emblem3 > .fc-arch.is-lit { box-shadow: 0 0 8px var(--card-gold-faint); }
html.ds .fc-emblem3.is-small > .fc-arch { width: 8px; height: 14px; }
html.ds .fc-emblem3.is-small > .fc-arch:nth-child(2) { height: 18px; }
html.ds .fc-info { appearance: none; position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; min-height: 0; margin: -8px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--c-label-2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.ds .fc-info::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--c-fill-2); }
html.ds .fc-info svg { position: relative; width: 16px; height: 16px; }
html.ds :is(.fc-info, .fc-week-arch, .fc-week-meter, .fc-slot, .fc-quiet):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ You: "This week's card" */
html.ds .fc-week { position: relative; display: block; margin: 12px 0 0; padding: 14px 16px 16px; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--r-sheet);
  background: radial-gradient(190px 150px at 62px 96px, rgba(255, 210, 122, .13), rgba(255, 210, 122, 0) 72%), var(--c-fill-1); box-shadow: var(--e-1); color: var(--c-label-1); font-family: var(--font-ui); }
html.ds .fc-week[data-state="ready"] { border-color: var(--card-gold-faint); }
html.ds .fc-week-head { display: flex; align-items: center; gap: var(--sp-2); min-height: 28px; }
html.ds .fc-week-title { flex: 1; min-width: 0; margin: 0; color: var(--card-gold); font: 600 var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds .fc-week-film { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 8px; }
html.ds .fc-week-card { display: block; width: 74px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5)); }
html.ds .fc-week-copy { display: grid; gap: 2px; min-width: 0; }
html.ds .fc-week-mark { color: var(--card-gold); font: 600 var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: .04em; text-transform: uppercase; }
html.ds .fc-week-name { color: var(--c-label-1); font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: var(--tr-title-3); text-wrap: balance; overflow-wrap: anywhere; }
html.ds .fc-week-season { color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
/* the mystery: the season's theme is the only hint, said in full */
html.ds .fc-week-season.is-theme { text-wrap: pretty; }
html.ds .fc-week.is-mystery .fc-week-film { grid-template-columns: 88px minmax(0, 1fr); }
html.ds .fc-week.is-mystery .fc-week-card { width: 88px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
html.ds .fc-week.is-mystery { background: radial-gradient(190px 150px at 62px 96px, rgba(150, 140, 255, .14), rgba(150, 140, 255, 0) 72%), var(--c-fill-1); }
html.ds .fc-week-count { margin-top: 4px; color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }
html.ds .fc-week-count > b { color: var(--c-label-1); font-weight: 600; }
/* the three arches: three buttons side by side, the emblem's own shape, each with what lights it */
html.ds .fc-week-arches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
html.ds .fc-week-arch { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; min-height: 118px; margin: 0; padding: 12px 6px 10px; border: 1px solid var(--c-line); border-radius: var(--r-row); background: var(--c-fill-1);
  color: var(--c-label-1); cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; }
html.ds .fc-week-arch > .fc-arch { margin: 0 0 6px; }
html.ds .fc-week-arch > .fc-arch:not(.is-tall) { margin-top: 12px; }
html.ds .fc-week-arch.is-lit { border-color: var(--card-gold-faint); background: var(--card-gold-wash); }
html.ds .fc-week-arch-label { display: block; max-width: 100%; color: var(--c-label-1); font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); text-wrap: balance; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
/* (iPhone QA, 5 November 2026) at Larger Text "Commuters Corner" broke as "Commuter|s Corner" (overflow-wrap: anywhere, no hyphen);
   a word too wide for its arch is now hyphenated where the language allows */
html.ds .fc-week-arch-progress { display: block; color: var(--c-label-2); font: var(--fw-caption-2) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); }
html.ds .fc-week-arch.is-lit .fc-week-arch-progress { color: var(--card-gold); }
/* sealed: the lit arches glow brighter as the card's chances rise (--fc-charge, 0 to 1) */
html.ds .fc-week[data-state="sealed"] .fc-arch.is-lit { box-shadow: 0 0 calc(10px + 18px * var(--fc-charge, 0)) rgb(255 210 122 / calc(.42 + .5 * var(--fc-charge, 0))); filter: brightness(calc(1 + .3 * var(--fc-charge, 0))); }
/* THE ONE LINE */
html.ds .fc-week-line { margin: 14px 0 0; color: var(--c-label-1); font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); text-wrap: balance; }
html.ds .fc-week[data-state="ready"] .fc-week-line { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); }
html.ds .fc-week-meter { appearance: none; display: grid; gap: 8px; width: 100%; margin: 12px 0 0; padding: 10px 12px 12px; border: 1px solid var(--c-line); border-radius: var(--r-row); background: var(--c-fill-1); color: var(--c-label-1); cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
html.ds .fc-week-meter-caption { color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds .fc-week-meter-row { display: flex; align-items: center; gap: 10px; }
html.ds .fc-week-pips { display: flex; flex: 1; gap: 3px; min-width: 0; }
html.ds .fc-week-pips > i { flex: 1; height: 6px; border-radius: 3px; background: var(--c-fill-press); }
html.ds .fc-week-pips > i.is-on { background: var(--card-gold); box-shadow: 0 0 6px var(--card-gold-faint); }
html.ds .fc-week-meter-value { flex: none; color: var(--c-label-1); font: 600 var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }
html.ds .fc-week-meter-row > i { display: grid; place-items: center; flex: none; width: 16px; height: 16px; color: var(--c-label-3); }
html.ds .fc-week-meter-row > i svg { width: 14px; height: 14px; }
html.ds .fc-week .fc-week-action { width: 100%; margin: 14px 0 0; }
/* claiming a missed card is offered, never pushed: a row, not a headline */
html.ds .fc-week .fc-week-action.is-row { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--target); margin: 10px 0 0; padding: 0 12px; border: 1px solid var(--c-line); border-radius: var(--r-row); background: var(--c-fill-1); color: var(--c-label-1); cursor: pointer; text-align: left;
  font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); -webkit-tap-highlight-color: transparent; }
html.ds .fc-week .fc-week-action.is-row > i { display: grid; place-items: center; flex: none; width: 16px; height: 16px; color: var(--c-label-3); }
html.ds .fc-week .fc-week-action.is-row > i svg { width: 14px; height: 14px; }
/* On You (owner, 9 October 2026, 22:00: the card moved here from Today and should be noticed): the page's first card,
   under the person. A gold rim, a warmer light behind the card and a cooler one in the far corner, the title at
   headline size. The gold words keep their contrast: the washes are the module's own, at the same strength as before
   behind the words. */
html.ds .dsy-week > .fc-week { margin: 0; padding: 16px 16px 18px; border-color: var(--card-gold-faint); box-shadow: var(--e-2);
  background: radial-gradient(230px 180px at 66px 104px, rgba(255, 210, 122, .15), rgba(255, 210, 122, 0) 72%), radial-gradient(240px 170px at 100% 0, rgba(150, 140, 255, .10), rgba(150, 140, 255, 0) 70%), var(--c-fill-1); }
html.ds .dsy-week > .fc-week .fc-week-title { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); }
/* iPhone Duo, open like a book (vertical fold): You is one column across both leaves, so the card would put its middle
   arch on the hinge. It turns into two halves instead: the card and its words on the left leaf, the three arches (and
   the meter or the one action) on the right; the 32pt gap between them is where the hinge falls. */
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] .dsy-week > .fc-week { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] .dsy-week > .fc-week > :is(.fc-week-head, .fc-week-film, .fc-week-line) { grid-column: 1; }
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] .dsy-week > .fc-week > .fc-week-head { grid-row: 1; }
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] .dsy-week > .fc-week > .fc-week-film { grid-row: 2; }
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] .dsy-week > .fc-week > .fc-week-line { grid-row: 3; }
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] .dsy-week > .fc-week > :is(.fc-week-arches, .fc-week-meter, .fc-week-action) { grid-column: 2; }
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] .dsy-week > .fc-week > .fc-week-arches { grid-row: 1 / span 3; align-self: center; margin-top: 0; }
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] .dsy-week > .fc-week[data-state="ready"] > .fc-week-action,
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] .dsy-week > .fc-week[data-state="locked"] > .fc-week-action { grid-row: 1 / span 3; align-self: center; margin-top: 0; }
/* BEFORE SEASON 1 (the cards start again at launch, 14 October 2026): the title, one line and the season's name. Nothing to
   light, nothing to open, nothing that moves. On the open Duo it is one column (there is no card and no arches to share the leaves). */
html.ds .fc-week[data-state="soon"] .fc-week-season, html.ds .fc-shelf-mark { margin: var(--sp-1) 0 0; }
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] .dsy-week > .fc-week[data-state="soon"] { grid-template-columns: minmax(0, 1fr); }
/* news on the card (an arch lit, a new week, a card to open or claim): its rim lights once as it comes into view, and
   the tab's dot goes. Opacity only, once; never under Reduce Motion (the script does not ask for it, and CSS agrees). */
html.ds .fc-week.is-news::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px var(--card-gold), inset 0 0 28px var(--card-gold-faint); opacity: 0; animation: fc-week-news var(--motion-ceremony) var(--motion-curve) both; }
@keyframes fc-week-news { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }

/* ------------------------------------------------------------------ Today: the quiet line under a ritual */
/* A row as quiet as a footnote: the emblem as the week stands, the words, a chevron. It opens You. */
html.ds .fc-arch-link { appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: var(--target); margin: 0; padding: 0 6px 0 10px;
  border: 0; border-radius: var(--r-row); background: none; color: var(--c-label-2); cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds .fc-arch-link-words { flex: 1; min-width: 0; text-wrap: pretty; }
html.ds .fc-arch-link > i { display: grid; place-items: center; flex: none; width: 16px; height: 16px; color: var(--c-label-3); }
html.ds .fc-arch-link > i svg { width: 14px; height: 14px; }
html.ds .fc-arch-link:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ the capsule */
/* Above the tab bar (220), a film opened over a three (140) and the Cryptic's room; under a toast (300), a sheet (340) and an alert (400). */
html.ds #device > .fc-capsule { appearance: none; position: absolute; z-index: 296; left: 50%; top: max(14px, calc(env(safe-area-inset-top, 0px) + 8px)); display: flex; align-items: center; gap: 12px; box-sizing: border-box;
  width: max-content; max-width: calc(100% - 32px); min-height: 48px; margin: 0; padding: 9px 18px 9px 14px; border: 0; border-radius: 24px; background: var(--mat-chrome-solid); box-shadow: inset 0 0 0 1px var(--card-gold-faint), var(--e-2);
  color: var(--c-label-1); font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); text-align: left; pointer-events: none;
  opacity: 0; transform: translate(-50%, -130%); transition: transform var(--motion-normal) var(--motion-curve), opacity var(--motion-fast) var(--motion-curve); }
html.ds #device > .fc-capsule.is-in { opacity: 1; transform: translate(-50%, 0); }
html.ds #device > .fc-capsule.is-out { opacity: 0; transform: translate(-50%, -130%); }
html.ds #device > .fc-capsule.is-action { pointer-events: auto; cursor: pointer; padding-right: 12px; }
html.ds .fc-capsule-line { min-width: 0; text-wrap: balance; }
html.ds .fc-capsule-go { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--card-gold); color: var(--card-gold-ink); }
html.ds .fc-capsule-go svg { width: 14px; height: 14px; }
html.ds #device > .fc-capsule.is-action:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ the film page: one line under a rating */
html.ds [data-film-card-slot]:empty { display: none; }
html.ds .fc-slot-line { margin: var(--sp-3) 0 0; color: var(--c-label-2); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); text-wrap: pretty; }

/* ------------------------------------------------------------------ overlays: the reveal, a card in 3D */
/* Above the tab bar (220) and a film opened over a three (140); under a toast (300), a sheet (340) and an alert (400). */
html.ds #device > .fc-overlay { position: absolute; inset: 0; z-index: 280; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4);
  padding: max(20px, calc(env(safe-area-inset-top, 0px) + 12px)) var(--gutter) max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px)); box-sizing: border-box; overflow: hidden;
  color: var(--c-label-1); font-family: var(--font-ui); background: radial-gradient(circle at 50% 42%, var(--card-room-glow), transparent 62%), var(--card-room); opacity: 0; transition: opacity var(--motion-fast) var(--motion-curve); }
html.ds #device > .fc-overlay.fin-standard { background: radial-gradient(circle at 50% 42%, rgba(74, 82, 118, .32), transparent 62%), var(--card-room); }
html.ds #device > .fc-overlay.fin-rare { background: radial-gradient(circle at 50% 42%, var(--card-rare-room), transparent 62%), var(--card-room); }
html.ds #device > .fc-overlay.fin-ultra { background: radial-gradient(circle at 50% 44%, rgba(150, 120, 255, .26), transparent 64%), radial-gradient(circle at 30% 70%, rgba(120, 210, 255, .10), transparent 50%), var(--card-room); }
html.ds #device > .fc-overlay.is-open { opacity: 1; }
/* the Ultra: its stage is as wide as the screen allows, so that it can open into its panorama */
html.ds .fc-ultra-stage { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 100%; height: min(58vh, 440px); margin-bottom: var(--sp-2); }
html.ds .fc-ultra-stage > .fu-card, html.ds .fc-ultra-stage > .fu-rise { width: 100%; }
html.ds #device > .fc-overlay.fc-ultra-view { padding-top: calc(max(16px, env(safe-area-inset-top, 0px) + 8px) + var(--target)); }
html.ds #device > .fc-overlay:focus { outline: none; }
html.ds #device > .fc-overlay.is-leaving { opacity: 0; pointer-events: none; }
html.ds .fc-overlay .fc-close { position: absolute; top: max(16px, calc(env(safe-area-inset-top, 0px) + 8px)); right: 16px; z-index: 3; }
/* a Rare's reveal asks the room to go dark */
html.ds .fc-veil { position: absolute; inset: 0; background: var(--card-veil); opacity: 0; pointer-events: none; transition: opacity var(--motion-slow) var(--motion-curve); }
html.ds .fc-overlay.is-dim .fc-veil { opacity: 1; }
html.ds .fc-reveal-card { position: relative; z-index: 1; flex: none; width: min(64vw, 290px, 38vh); margin-bottom: var(--sp-4); will-change: transform; }
html.ds .fc-viewer .fc-reveal-card { width: min(72vw, 310px, 46vh); }
/* the 3D view keeps the card clear of the close mark on a short screen */
html.ds #device > .fc-overlay.fc-viewer { padding-top: calc(max(16px, env(safe-area-inset-top, 0px) + 8px) + var(--target)); }
html.ds .fc-cap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 50px; text-align: center; max-width: 330px; }
html.ds .fc-what { margin: 0; color: var(--c-label-1); font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); text-wrap: balance; }
/* a sentence stays whole: the line breaks between sentences, never inside a film's title if it can help it */
html.ds .fc-what > span { display: inline-block; max-width: 100%; }
html.ds .fc-what > i { font-style: normal; color: var(--c-label-3); }
html.ds .fc-stat > span { display: block; }
html.ds .fc-stat { margin: 0; color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); text-wrap: balance; }
html.ds .fc-actions { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); width: 100%; max-width: 320px; }
html.ds .fc-actions > :is(.primary-button, .secondary-button) { width: 100%; }
html.ds .fc-actions > button svg { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }
html.ds .fc-quiet { appearance: none; border: 0; background: none; color: var(--c-label-2); min-height: var(--target); padding: 0 var(--sp-4); border-radius: var(--r-control); cursor: pointer;
  font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); }
html.ds .fc-fade { opacity: 0; transform: translateY(8px); transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-curve); }
html.ds .fc-fade.is-in { opacity: 1; transform: none; }
html.ds .fc-fade:not(.is-in) { pointer-events: none; }
/* where a card lands when it is put on the shelf: over the Library tab, a pill with the count that goes up by one */
html.ds .fc-land { position: absolute; left: 50%; bottom: max(26px, calc(env(safe-area-inset-bottom, 0px) + 18px)); z-index: 1; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--sp-2); height: 44px; padding: 0 var(--sp-4);
  border-radius: var(--r-pill); background: var(--mat-chrome-solid); box-shadow: inset 0 0 0 1px var(--c-line-strong), var(--e-2); color: var(--c-label-1); opacity: 0; transition: opacity var(--motion-fast) var(--motion-curve);
  font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); white-space: nowrap; }
html.ds .fc-land.is-in { opacity: 1; }
html.ds .fc-land svg { width: 20px; height: 20px; flex: none; }
html.ds .fc-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 8px; box-sizing: border-box; border-radius: var(--r-pill); background: var(--card-gold); color: var(--card-gold-ink); font: 600 var(--fs-footnote)/1 var(--font-ui); }
html.ds .fc-count[hidden] { display: none; }

/* iPhone Duo, open like a book (the inner display, the fold down the middle): the card on one leaf, what it is on the
   other, nothing you can press on the fold. Only where the device environment reports that display. */
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] #device > .fc-overlay:is(.fc-reveal, .fc-viewer) {
  position: fixed; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 48px; row-gap: var(--sp-4); justify-items: center; align-items: center; padding: 24px 32px; }
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] #device > .fc-overlay > .fc-reveal-card { grid-column: 1; grid-row: 1 / -1; width: min(30vw, 300px, 58vh); margin: 0; }
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] #device > .fc-overlay > .fc-cap { grid-column: 2; grid-row: 2; }
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] #device > .fc-overlay > .fc-actions { grid-column: 2; grid-row: 3; }
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] #device > .fc-overlay.fin-rare,
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] #device > .fc-overlay { background-position: 0 0; background-size: 100% 100%; }

/* ------------------------------------------------------------------ the shelf: the first thing in the Library */
html.ds .fc-shelf { margin: 6px 0 var(--section-gap); color: var(--c-label-1); font-family: var(--font-ui); }
html.ds .fc-shelf-head { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-1); }
html.ds .fc-shelf-head > h2 { margin: 0; color: var(--c-label-1); font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: var(--tr-title-3); }
html.ds .fc-shelf-count { margin-left: auto; padding: 3px 10px; border-radius: var(--r-pill); background: var(--card-gold-wash); box-shadow: inset 0 0 0 1px var(--card-gold-faint); color: var(--card-gold); font: 600 var(--fs-footnote)/var(--lh-footnote) var(--font-ui); white-space: nowrap; }
html.ds .fc-shelf-head > h2 + .fc-info { margin-left: auto; }
html.ds .fc-shelf-line { margin: var(--sp-1) 0 0; color: var(--c-label-2); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); text-wrap: pretty; }
html.ds .fc-season { margin: var(--sp-4) 0 0; }
html.ds .fc-season-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
html.ds .fc-season-head > h3 { flex: 1; min-width: 0; margin: 0; color: var(--c-label-1); font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); text-wrap: balance; }
html.ds .fc-season-head > h3 > span { display: block; margin: 0 0 1px; color: var(--card-gold); font: 600 var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: .04em; text-transform: uppercase; }
html.ds .fc-trophy { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--card-rg-hi), var(--card-gold) 48%, var(--card-gold-deep)); color: var(--card-gold-ink); box-shadow: 0 0 14px var(--card-gold-faint); }
html.ds .fc-trophy svg { width: 20px; height: 20px; }
html.ds .fc-season-theme { margin: 4px 0 0; color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); text-wrap: pretty; }
html.ds .fc-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 8px; margin: 12px 0 0; padding: 0; list-style: none; }
html.ds .fc-slots > li { min-width: 0; }
html.ds .fc-slot { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: var(--r-control); background: none; color: var(--c-label-1); text-align: center; -webkit-tap-highlight-color: transparent; }
html.ds button.fc-slot { cursor: pointer; }
html.ds .fc-slot > .fc-mini { margin-bottom: 3px; }
html.ds .fc-slot-n { display: block; color: var(--c-label-3); font: 600 var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); }
html.ds .fc-slot-n:empty { display: none; }
/* a film's name under a card the width of a thumb: two lines, a little wider than its card, and a long word is hyphenated where the phone knows how */
html.ds .fc-slot-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; width: calc(100% + 6px); margin-inline: -3px; -webkit-hyphens: auto; hyphens: auto; color: var(--c-label-2); font: var(--fw-caption-2) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: -.01em; overflow-wrap: break-word; }
html.ds .fc-slot.is-owned .fc-slot-name { color: var(--c-label-1); }
html.ds .fc-slot:is(.is-sealed, .is-ready) .fc-slot-name { color: var(--card-gold); font-weight: 600; }
html.ds .fc-slot.is-upcoming { opacity: .7; }
/* the season's sixth, recessed slot: the Ultra's standing, or the Ultra (film-cards-ultra.css draws the tray itself) */
html.ds .fc-ultra-slot { appearance: none; display: block; width: 100%; margin: 12px 0 0; padding: 0; border: 0; border-radius: var(--r-control); background: none; color: inherit; text-align: left; -webkit-tap-highlight-color: transparent; }
html.ds button.fc-ultra-slot { cursor: pointer; }
html.ds .fc-ultra-slot:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
html.ds .fc-season-next { margin: var(--sp-3) 0 0; /* (release polish, 28 October 2026: on the page's gutter, as everything above it) */ color: var(--c-label-3); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds .fc-season-next > span { color: var(--c-label-2); font-weight: 600; }
/* THE WELCOME CARD's own place (given once, on a first visit): above the seasons, never in one. One row: the card, what
   it is, and the way to open it. */
html.ds .fc-welcome { margin: var(--sp-4) 0 0; }
html.ds .fc-welcome-slot { appearance: none; display: flex; align-items: center; gap: var(--sp-3); width: 100%; margin: 0; padding: 10px 14px 10px 10px; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: var(--e-1); color: var(--c-label-1); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.ds .fc-welcome-slot:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
html.ds .fc-welcome-card { flex: none; display: block; width: 52px; }
html.ds .fc-welcome-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.ds .fc-welcome-label { color: var(--card-gold); font: 600 var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: .04em; text-transform: uppercase; }
html.ds .fc-welcome-copy > strong { color: var(--c-label-1); font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); text-wrap: balance; overflow-wrap: anywhere; }
html.ds .fc-welcome-go { flex: none; display: flex; color: var(--c-label-3); }
html.ds .fc-welcome-go > svg { width: 16px; height: 16px; }
/* the welcome card's reveal: its one line is words, not a number */
html.ds .fc-stat.fc-welcome-line { color: var(--c-label-1); }
html.ds .fc-how .fc-how-welcome { margin: var(--sp-2) 0 0; color: var(--c-label-2); }
/* iPhone Duo, open like a book: a season to a leaf, each row of five the size it is on a phone, and no card on the fold. */
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] .fc-shelf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: stretch; }
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] .fc-shelf > :is(.fc-shelf-head, .fc-shelf-line, .fc-season-next, .fc-welcome, .fc-shelf-share) { grid-column: 1 / -1; }
/* (JOIN, 10 October 2026) Flick's note and his figure in the shelf (lane SPOOLIE, now FLICK) stand on the right leaf, on a row of
   their own, so they never take a season's leaf and never lie across the fold */
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] .fc-shelf > :is(.sps, .sps-tip) { grid-column: 2; }
/* A leaf is narrower than a phone: the season keeps less of it for its own edges, so that a slot (and the film's name
   under it: "Ratatouille", "GoodFellas") has nearly the width it has on a phone and a name is not broken inside a word. */
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] .fc-season-head, html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] .fc-season-theme { padding-inline: 4px; }

/* ------------------------------------------------------------------ sheets */
/* A small sheet is as tall as what it says, and never taller than the screen can show: its buttons are always in reach
     (a title of two rows on a 667-point phone left the second button under the screen's edge at a fixed half height). */
html.ds .ds-sheet-layer > .ds-sheet-host.fc-sheet-fit { height: auto; max-height: 92%; }
html.ds .fc-sheet { display: grid; gap: var(--sp-4); padding: 0 0 var(--sp-5); color: var(--c-label-1); font-family: var(--font-ui); }
html.ds .fc-sheet-film { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: var(--sp-4); }
html.ds .fc-sheet-copy { display: grid; gap: 6px; min-width: 0; }
html.ds .fc-sheet-sub { color: var(--c-label-3); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }
html.ds .fc-sheet-line { margin: 0; color: var(--c-label-1); font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); letter-spacing: var(--tr-body); text-wrap: pretty; }
html.ds .fc-sheet-note { margin: 0; color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); text-wrap: pretty; }
html.ds .fc-sheet-actions { display: grid; gap: var(--sp-2); }
html.ds .fc-sheet-actions > button { width: 100%; }
html.ds .fc-rate-list { margin: 0; }

/* ------------------------------------------------------------------ "How cards work" */
html.ds .fc-how { display: block; padding: 0 0 var(--sp-6); color: var(--c-label-2); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); }
html.ds .fc-how p { margin: var(--sp-3) 0 0; text-wrap: pretty; }
html.ds .fc-how .fc-how-lead { margin: 0; color: var(--c-label-1); font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); text-wrap: balance; }
html.ds .fc-how-h { margin: var(--sp-6) 0 0; color: var(--card-gold); font: 600 var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); text-align: left; }
html.ds .fc-how-arches { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: 0; list-style: none; color: var(--c-label-1); }
html.ds .fc-how-arches > li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: var(--sp-3); }
html.ds .fc-how-finishes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-4) 0 0; padding: 0; list-style: none; text-align: center; }
/* (pages polish, 28 October 2026; the owner: the three captions sat at different heights, Rare's frame being larger) every
   card stands in the same box, its foot on the box's floor, so the three names and lines start on one line */
html.ds .fc-how-finishes > li { display: grid; grid-template-rows: 132px auto auto; align-content: start; justify-items: center; gap: 2px; min-width: 0; }
html.ds .fc-how-card { display: flex; align-items: flex-end; justify-content: center; width: min(100%, 78px); height: 132px; margin-bottom: 6px; }
html.ds .fc-how-card > * { flex: 0 0 auto; width: 100%; }
html.ds .fc-odds-note { color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }
html.ds .fc-how-finishes strong { color: var(--c-label-1); font: 600 var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }
html.ds .fc-how-finishes span:not(.fc-how-card):not([class^="fc-mini"]) { color: var(--c-label-2); font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); text-wrap: balance; }
html.ds .fc-odds { width: 100%; margin: 0; border-collapse: collapse; color: var(--c-label-1); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); }
html.ds .fc-odds caption { margin: var(--sp-6) 0 var(--sp-2); caption-side: top; }
html.ds .fc-odds :is(th, td) { padding: 9px 0; border-bottom: 1px solid var(--c-line); text-align: right; vertical-align: top; font-weight: 400; }
html.ds .fc-odds thead :is(th, td) { padding: 0 0 6px; color: var(--c-label-3); font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); }
html.ds .fc-odds tbody th { text-align: left; color: var(--c-label-1); font-weight: 600; }
html.ds .fc-odds td > b { display: block; font-weight: 600; }
html.ds .fc-odds td > span { display: block; color: var(--c-label-3); font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); }
html.ds .fc-odds tr[data-finish="rare"] th { color: var(--card-gold); }
html.ds .fc-how .fc-how-last { color: var(--c-label-1); font-weight: 600; }

/* ------------------------------------------------------------------ /?cards=demo: the label and the panel */
html.ds .fc-demo-label { position: fixed; z-index: 2147483000; left: 50%; transform: translateX(-50%); top: max(10px, env(safe-area-inset-top, 0px)); padding: 3px 10px; border-radius: var(--r-pill); background: var(--card-gold); color: var(--card-gold-ink); font: 700 calc(12 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
html.ds .fc-demo { position: fixed; z-index: 2147482000; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); max-width: 430px; margin: 0 auto; box-sizing: border-box; display: grid; gap: 6px; padding: 8px 10px 8px; border-radius: 16px; background: var(--mat-chrome-solid); box-shadow: inset 0 0 0 1px var(--card-gold-faint), 0 18px 48px rgba(0, 0, 0, .6);
  color: var(--c-label-1); font: 400 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui); --type-unit: 1px; }
html.ds .fc-demo.is-shut { left: auto; right: 8px; max-width: none; padding: 0; background: none; box-shadow: none; }
html.ds .fc-demo-head { display: flex; align-items: center; gap: 8px; min-height: 26px; }
html.ds .fc-demo-head > strong { font-weight: 700; color: var(--card-gold); white-space: nowrap; }
html.ds .fc-demo-head > span { flex: 1; min-width: 0; color: var(--c-label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ds .fc-demo.is-shut .fc-demo-head > :is(strong, span) { display: none; }
html.ds .fc-demo-status { margin: 0; color: var(--c-label-1); font-weight: 600; text-wrap: pretty; }
html.ds .fc-demo-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
html.ds .fc-demo-row.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.ds .fc-demo-row.is-finish { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
html.ds .fc-demo-row.is-links { display: flex; flex-wrap: wrap; gap: 0 2px; justify-content: space-between; }
html.ds .fc-demo button { appearance: none; min-width: 0; min-height: 34px; margin: 0; padding: 0 6px; border: 0; border-radius: 9px; background: var(--c-fill-press); color: var(--c-label-1); font: 600 calc(12 * var(--type-unit))/calc(14 * var(--type-unit)) var(--font-ui); cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.ds .fc-demo button:active { opacity: .7; }
html.ds .fc-demo button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
html.ds .fc-demo button.is-main { background: var(--card-gold); color: var(--card-gold-ink); font-size: calc(13 * var(--type-unit)); }
html.ds .fc-demo button.is-link { min-height: 28px; padding: 0 4px; background: none; color: var(--c-label-2); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
html.ds .fc-demo-head > button { flex: none; min-height: 26px; padding: 0 10px; }
html.ds .fc-demo.is-shut .fc-demo-head > button { min-height: 40px; padding: 0 16px; background: var(--card-gold); color: var(--card-gold-ink); font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, .55); }
html.ds .fc-demo-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 2px; border-radius: 10px; background: var(--c-fill-2); }
html.ds .fc-demo-seg > button { min-height: 30px; background: none; color: var(--c-label-2); }
html.ds .fc-demo-seg > button[aria-pressed="true"] { background: var(--c-label-1); color: var(--mat-chrome-solid); }
/* the label has the top of the screen: a capsule comes in under it; and while a card, a reveal or a sheet is open the panel steps aside */
html.ds[data-cards-demo] #device > .fc-capsule { top: max(46px, calc(env(safe-area-inset-top, 0px) + 40px)); }
html.ds[data-cards-demo]:has(#device > .fc-overlay) .fc-demo, html.ds[data-cards-demo][data-fc-sheet-open] .fc-demo { display: none; }
/* room under Today for the panel, so that "This week's card" can be brought to the top of the screen and watched */
html.ds[data-cards-demo] #device .dsy-you { padding-bottom: 460px !important; }
@media (min-width: 900px) {
  html.ds .fc-demo { left: auto; right: 24px; top: 24px; bottom: auto; width: 320px; margin: 0; padding: 12px; gap: 8px; }
  html.ds .fc-demo.is-shut { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html.ds .fc-arch > b, html.ds .fc-fade, html.ds .fc-veil, html.ds .fc-land, html.ds #device > .fc-overlay, html.ds #device > .fc-capsule { transition: none; }
  html.ds .fc-week.is-news::after { animation: none; }
}
html.ds #device.manual-reduced-motion :is(.fc-arch > b, .fc-fade, .fc-veil, .fc-land), html.ds #device.manual-reduced-motion > :is(.fc-overlay, .fc-capsule) { transition: none; }
html.ds #device.manual-reduced-motion .fc-week.is-news::after, html.ds[data-motion-tier="reduced"] .fc-week.is-news::after { animation: none; }
@media (forced-colors: active) {
  html.ds .fc-arch { border-color: CanvasText; }
  html.ds .fc-arch > b { background: Highlight; }
}

/* ------------------------------------------------------------------ THE TROPHY CABINET (TIDY, 13 October 2026)
   The owner: the season's five slots become a real shelf. Each season is a cabinet: a walnut frame, a dark back wall lit
   from above, one glass shelf with a lit front edge, and the glass front's faint reflection over everything. A card the
   person holds STANDS on the shelf, leaning back a few degrees under one shared perspective (the side cards turn a
   little, as on a real shelf), with a contact shadow, a glow on the wall behind it and its reflection in the glass shelf.
   A week not yet theirs is a recess cut into the back wall: a card-shaped hollow, its film's silhouette faint inside
   (missed, this week's), or nothing (a week to come). The number and the film's name are the brass plate under the
   shelf. Picking a card up (film-cards.js pickUp) lifts it off the shelf and tips it toward you on the spring, the card
   view opens from where it was, and closing the view puts it back. Everything here is still: no loop, nothing per frame.
   Markup: .fc-slot > .fc-stand[aria-hidden] > (.fc-mini, .fc-stand-mirror, .fc-stand-glow, .fc-stand-shade); the plate is .fc-slot-n and
   .fc-slot-name. The buttons, their names and their order are unchanged, so VoiceOver reads the shelf as before. */
html.ds .fc-season {
  --cab-pad: 14px; --cab-gap: 8px; --cab-frame: 5px; --cab-lean: 10deg; --cab-back: -18px;
  --cab-wood-hi: #4a3121; --cab-wood: #2b1c12; --cab-wood-lo: #150d08;
  --cab-wall-hi: #20160f; --cab-wall: #110c09; --cab-wall-lo: #0a0706;
  --cab-light: 255, 214, 158;
  position: relative; isolation: isolate;
  padding: 16px var(--cab-pad) 14px;
  border: var(--cab-frame) solid transparent; border-radius: 24px;
  background:
    radial-gradient(130% 70% at 50% -14%, rgba(var(--cab-light), .20), rgba(var(--cab-light), .05) 46%, transparent 72%) padding-box,
    repeating-linear-gradient(90deg, rgba(255, 236, 210, .016) 0 1px, transparent 1px 5px, rgba(0, 0, 0, .05) 5px 6px, transparent 6px 11px) padding-box,
    linear-gradient(180deg, var(--cab-wall-hi), var(--cab-wall) 55%, var(--cab-wall-lo)) padding-box,
    linear-gradient(160deg, var(--cab-wood-hi), var(--cab-wood) 38%, var(--cab-wood-lo) 70%, var(--cab-wood) 100%) border-box;
  box-shadow: 0 1px 0 rgba(255, 228, 190, .10), 0 18px 40px -12px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .5);
}
/* the light under the cabinet's top: a warm strip with its glow falling onto the back wall */
html.ds .fc-season::before {
  content: ""; position: absolute; z-index: 0; left: 8%; right: 8%; top: 0; height: 2px; border-radius: 0 0 2px 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--cab-light), .85) 18%, rgba(255, 244, 226, .95) 50%, rgba(var(--cab-light), .85) 82%, transparent);
  box-shadow: 0 0 14px 2px rgba(var(--cab-light), .35), 0 0 42px 8px rgba(var(--cab-light), .10);
}
/* the glass front: one soft diagonal reflection and a cool edge at the top, over the cards (never over a lifted one) */
html.ds .fc-season::after {
  content: ""; position: absolute; z-index: 3; inset: 0; border-radius: 19px; pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 34%, rgba(255, 255, 255, .045) 40%, rgba(255, 255, 255, .012) 47%, transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 9%);
  box-shadow: inset 0 0 0 1px rgba(255, 238, 214, .07), inset 0 10px 24px -14px rgba(0, 0, 0, .9), inset 0 -18px 30px -20px rgba(0, 0, 0, .8), inset 16px 0 22px -16px rgba(0, 0, 0, .85), inset -16px 0 22px -16px rgba(0, 0, 0, .85);
}
html.ds .fc-season > * { position: relative; z-index: 1; }
html.ds .fc-season-head > h3 { color: #f6eadb; }
html.ds .fc-season-head > h3 > span { color: var(--card-gold); }
html.ds .fc-season-theme { color: rgba(240, 226, 208, .72); }
html.ds .fc-season.fc-earlier {
  background:
    radial-gradient(130% 70% at 50% -14%, rgba(var(--cab-light), .16), transparent 70%) padding-box,
    linear-gradient(180deg, var(--cab-wall-hi), var(--cab-wall-lo)) padding-box,
    linear-gradient(160deg, var(--cab-wood-hi), var(--cab-wood) 38%, var(--cab-wood-lo) 70%, var(--cab-wood) 100%) border-box;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .75);
}

/* the shelf: one perspective for the whole row, the eye a little above it, so the side cards turn as they would */
html.ds .fc-season .fc-slots { gap: 6px var(--cab-gap); margin-top: 18px; perspective: 560px; perspective-origin: 50% -40%; }
html.ds .fc-season .fc-slots > li, html.ds .fc-season .fc-slot { transform-style: preserve-3d; }
html.ds .fc-season .fc-slot { gap: 2px; }
html.ds .fc-season .fc-slot.is-upcoming { opacity: 1; }
html.ds .fc-stand { position: relative; display: block; width: 100%; margin: 0 0 18px; transform-style: preserve-3d; }
html.ds .fc-season .fc-slot > .fc-stand > .fc-mini { margin: 0; }
/* the glass shelf, drawn once under the whole row from the first place (so it has no seams), wall to wall: its top seen
   from just above (the cards stand a little back from its edge, so the glass is in front of their feet), its bright
   front edge, and its shadow on the wall below */
html.ds .fc-stand::before, html.ds .fc-stand::after { content: none; }
/* the glass top: a real plane in the shelf's perspective, running back from its front edge to the wall (so it narrows
   as it goes back, and the cards' feet stand on it a little way in) */
html.ds .fc-slots > li:first-child .fc-stand::before {
  content: ""; position: absolute; z-index: -1; top: calc(100% + 4px - 64px); height: 64px; pointer-events: none;
  left: calc(-1 * var(--cab-pad)); width: calc(500% + 4 * var(--cab-gap) + 2 * var(--cab-pad));
  transform-origin: 50% 100%; transform: rotateX(80deg);
  background: linear-gradient(0deg, rgba(255, 244, 228, .20), rgba(255, 240, 220, .08) 45%, rgba(255, 240, 220, .03) 80%, rgba(0, 0, 0, .35));
}
/* its front edge catching the light, and its shadow on the wall below */
html.ds .fc-slots > li:first-child .fc-stand::after {
  content: ""; position: absolute; z-index: -1; top: calc(100% + 3px); height: 9px; pointer-events: none;
  left: calc(-1 * var(--cab-pad)); width: calc(500% + 4 * var(--cab-gap) + 2 * var(--cab-pad));
  background:
    linear-gradient(180deg, rgba(255, 246, 232, .92), rgba(var(--cab-light), .72) 18%, rgba(var(--cab-light), .18) 36%, transparent 38%),
    linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, .55) 40%, transparent);
  box-shadow: 0 6px 16px -8px rgba(var(--cab-light), .32), 0 -1px 8px -2px rgba(var(--cab-light), .30);
}
/* the earned card: standing, leaning back */
html.ds .fc-stand > .fc-mini {
  transform-origin: 50% 100%; transform: translateZ(var(--cab-back)) rotateX(var(--cab-lean));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 -2px 10px -4px rgba(var(--cab-light), .25), 0 10px 14px -10px rgba(0, 0, 0, .9);
  transition: opacity var(--motion-fast) var(--motion-curve);
}
/* its reflection in the glass: the same card upside down under it, leaning the other way, fading within the glass */
html.ds .fc-stand-mirror { position: absolute; z-index: -1; left: 0; right: 0; top: 100%; pointer-events: none; transform-origin: 50% 0; transform: translateZ(var(--cab-back)) rotateX(calc(-1 * var(--cab-lean))) scaleY(-1);
  opacity: .62; filter: blur(.5px) saturate(.9);
  -webkit-mask-image: linear-gradient(0deg, #000, rgba(0, 0, 0, .4) 5%, transparent 10%); mask-image: linear-gradient(0deg, #000, rgba(0, 0, 0, .4) 5%, transparent 10%); }
html.ds .fc-stand-mirror > .fc-mini { box-shadow: none; transform: none; }
html.ds .fc-slot.is-lifting .fc-stand-mirror { opacity: .12; transition: opacity var(--motion-fast) var(--motion-curve); }
html.ds .fc-slot.is-in-hand .fc-stand-mirror { opacity: 0; }
/* the light pooled on the back wall behind a card, and its contact shadow on the shelf */
html.ds .fc-stand-glow { position: absolute; z-index: -2; left: -24%; right: -24%; top: -16%; bottom: 8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--cab-light), .20), rgba(var(--cab-light), .06) 60%, transparent); }
html.ds .fc-stand-shade { position: absolute; z-index: -1; left: 2%; right: 2%; bottom: -5px; height: 9px; transform: translateZ(var(--cab-back)); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .78), rgba(0, 0, 0, .3) 60%, transparent); }
html.ds .fc-slot.is-owned .fc-stand-glow { background: radial-gradient(closest-side, rgba(var(--cab-light), .26), rgba(var(--cab-light), .07) 62%, transparent); }
html.ds .fc-slot:is(.is-sealed, .is-ready) .fc-stand-glow { background: radial-gradient(closest-side, rgba(255, 196, 92, .30), rgba(255, 196, 92, .08) 60%, transparent); }
/* a week that is not theirs: a recess cut into the back wall, nothing standing in it */
html.ds .fc-slot:is(.is-upcoming, .is-missed, .is-current) .fc-stand > .fc-mini {
  transform: translateZ(var(--cab-back));
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .28) 40%, rgba(255, 236, 210, .03));
  border: 1px solid rgba(0, 0, 0, .6); border-bottom-color: rgba(255, 232, 200, .10);
  box-shadow: inset 0 7px 12px -2px rgba(0, 0, 0, .85), inset 0 -1px 0 rgba(255, 232, 200, .07), 0 1px 0 rgba(255, 232, 200, .05);
}
html.ds .fc-slot:is(.is-upcoming, .is-missed, .is-current) :is(.fc-stand-glow, .fc-stand-shade) { display: none; }
html.ds .fc-slot.is-upcoming .fc-stand > .fc-mini .fc-emblem { opacity: .16; }
html.ds .fc-slot.is-upcoming .fc-stand > .fc-mini .fc-emblem > i { border-color: rgba(255, 232, 200, .6); background: none; }
html.ds .fc-slot:is(.is-missed, .is-current) .fc-stand > .fc-mini .fc-mini-art { background: transparent; }
html.ds .fc-slot:is(.is-missed, .is-current) .fc-stand > .fc-mini .fc-mini-art > svg { opacity: .14; }
html.ds .fc-slot.is-current .fc-stand > .fc-mini { border-style: dashed; border-color: rgba(255, 210, 122, .32); }
/* this week's card as a mystery that is not yet theirs: its shape in the recess, its light low */
html.ds .fc-slot.is-current .fc-stand > .fc-mini.is-mystery { opacity: .7; }
/* the brass plate: the number, then the film's name */
html.ds .fc-season .fc-slot-n { color: rgba(var(--cab-light), .62); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
html.ds .fc-season .fc-slot.is-owned .fc-slot-n { color: var(--card-gold); }
html.ds .fc-season .fc-slot-name { color: rgba(240, 226, 208, .74); }
html.ds .fc-season .fc-slot.is-owned .fc-slot-name { color: #f6eadb; }

/* picked up: the card lifts off the shelf and tips toward you (film-cards.js animates it on the spring); while the card
   view is open it is in your hand, so its place stands empty; closing the view sets it back down */
html.ds .fc-slot.is-lifting { z-index: 4; }
html.ds .fc-slot.is-lifting .fc-stand-shade { opacity: .35; transform: translateZ(var(--cab-back)) scale(1.25); transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-curve); }
html.ds .fc-slot.is-in-hand .fc-stand > .fc-mini { opacity: 0; }
html.ds .fc-slot.is-in-hand .fc-stand-shade { opacity: 0; }
html.ds .fc-season .fc-slot.ds-press:active { scale: 1; }
html.ds .fc-season .fc-slot.is-owned:focus-visible { outline-offset: 4px; }

/* the largest text: the plate takes the room it needs; the shelf keeps its line */
html.ds[data-text-size="largest"] .fc-stand { margin-bottom: 16px; }
/* iPhone Duo, open like a book: the leaf is narrower, the frame and the gaps with it */
html.ds[data-env-fold="1"][data-env-fold-display="inner"][data-env-fold-axis="vertical"] .fc-season { --cab-pad: 7px; --cab-gap: 6px; --cab-frame: 3px; border-radius: 18px; }
@media (max-width: 380px) { html.ds .fc-season { --cab-pad: 12px; --cab-gap: 7px; } }
/* Reduce Motion: the cabinet is still the cabinet (it never moves); picking a card up is a plain fade (film-cards.js) */
@media (prefers-reduced-motion: reduce) { html.ds .fc-stand > .fc-mini, html.ds .fc-slot.is-lifting .fc-stand-shade { transition: none; } }
html.ds #device.manual-reduced-motion :is(.fc-stand > .fc-mini, .fc-slot.is-lifting .fc-stand-shade) { transition: none; }
/* Reduce Transparency and Increase Contrast: the glass goes, the wood and the shelf stay */
html.ds.reduce-transparency .fc-season::after, html.ds #device.manual-solid .fc-season::after { display: none; }
html.ds.reduce-transparency .fc-stand-mirror, html.ds #device.manual-solid .fc-stand-mirror { display: none; }
@media (forced-colors: active) {
  html.ds .fc-season { background: Canvas; border-color: CanvasText; box-shadow: none; }
  html.ds .fc-season::before, html.ds .fc-season::after, html.ds :is(.fc-stand-glow, .fc-stand-shade) { display: none; }
  html.ds .fc-slots > li:first-child .fc-stand::after { background: CanvasText; height: 2px; top: calc(100% + 2px); box-shadow: none; }
  html.ds .fc-stand-mirror { display: none; }
}

/* (pages polish, 28 October 2026; the owner: the names under the shelf did not line up, "The Princess Bride" pushed down) Why:
   the plate under each card followed the card in the flow, and a Rare card is taller than the others (its black-and-gold frame
   is padding round the picture), so its plate sat lower. Every stand now keeps one card-shaped box, the card standing on its
   floor (a taller frame rises upwards, not down), so the numbers and names start on one line whatever the card. */
html.ds .fc-season .fc-stand { aspect-ratio: 2 / 3; }
html.ds .fc-season .fc-slot > .fc-stand > .fc-mini { position: absolute; left: 0; right: 0; bottom: 0; }

/* ===== prototype-src/film-cards-share.css ===== */
/* Sharing a film card: the one sheet, and "Stop sharing" in an opened card's view (prototype-src/film-cards-share.js).
   Record: hub/docs/FILM-CARDS-SHARE-2026-10-07.md.

     .fcs-sheet      the sheet: as tall as what it holds, never taller than the screen allows
     .fcs            its body: the picture previewed, one quiet line, at most two choices (or one line and one action)
     .fcs-frame      the share picture as it will leave the phone (9:16), on the card's own dark room
     .fcs-stop       "Stop sharing": a quiet control beside "See the film", there only while the card has a link

   Scoped under html.ds; the app's tokens throughout, the card's --card-* tokens for the picture's frame (inside
   .fc-scope). `transition` and animation name only transform and opacity. Reduce Motion: nothing pulses. */
html.ds .ds-sheet-layer > .ds-sheet-host.fcs-sheet { height: auto; max-height: 94%; }
html.ds .fcs-sheet .ds-sheet-title { text-align: center; margin-bottom: var(--sp-3); }
html.ds .fcs { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: 0 0 var(--sp-2); color: var(--c-label-1); font-family: var(--font-ui); }
/* the picture: its height is what the screen can spare, its width follows (a story's shape) */
html.ds .fcs-frame { position: relative; flex: none; height: min(48vh, 430px); aspect-ratio: 9 / 16; border-radius: var(--r-card); overflow: hidden; background: var(--card-room); box-shadow: var(--e-2), 0 0 0 1px var(--c-line-strong); }
html[data-device-h="compact"].ds .fcs-frame { height: min(40vh, 300px); }
html.ds .fcs-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* while the picture is being made: the three arches, breathing */
html.ds .fcs-wait { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding-bottom: 46%; opacity: .5; animation: fcs-breathe 1600ms var(--motion-breathe) infinite alternate; }
html.ds .fcs-wait > i { display: block; width: 18px; height: 44px; border: 1.5px solid var(--card-gold-faint); border-radius: 999px 999px 3px 3px; background: var(--card-gold-wash); }
html.ds .fcs-wait > i:nth-child(2) { height: 58px; }
@keyframes fcs-breathe { from { opacity: .25; } to { opacity: .6; } }
html.ds .fcs-note { margin: 0; max-width: 40ch; text-align: center; text-wrap: balance; color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds .fcs-line { margin: 0; max-width: 32ch; text-align: center; text-wrap: balance; color: var(--c-label-1); font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); letter-spacing: var(--tr-body); }
html.ds .fcs-actions { display: grid; gap: var(--sp-2); width: 100%; max-width: 360px; }
html.ds .fcs-actions > button { width: 100%; }
html.ds .fcs-actions > button svg { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }
html.ds .fcs-actions > button[aria-busy="true"] { opacity: .5; }

/* an opened card that has a link: "See the film" and "Stop sharing" side by side under Share, so the view is no taller */
html.ds .fc-actions.has-stop { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: var(--sp-1); }
html.ds .fc-actions.has-stop > .primary-button { flex: 0 0 100%; }
html.ds .fcs-stop:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
html.ds .fcs-stop[disabled] { opacity: .5; }

/* "Share my shelf" (hub/docs/CARDS-SHELF-2026-10-09.md): the row at the foot of the shelf, and its sheet */
html.ds .fc-shelf-share { margin: var(--sp-5) 0 0; }
html.ds .fc-shelf-share-button { appearance: none; display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--target); margin: 0; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-fill-1); color: var(--c-label-1); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.ds .fc-shelf-share-button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
html.ds .fc-shelf-share-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--card-gold-wash); color: var(--card-gold); }
html.ds .fc-shelf-share-icon > svg { width: 18px; height: 18px; }
html.ds .fc-shelf-share-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.ds .fc-shelf-share-copy > strong { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); }
html.ds .fc-shelf-share-copy > span { color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); overflow-wrap: anywhere; }
html.ds .fc-shelf-share-go { flex: none; display: flex; color: var(--c-label-3); }
html.ds .fc-shelf-share-go > svg { width: 16px; height: 16px; }
html.ds .fcs-shelf { align-items: stretch; gap: var(--sp-3); width: 100%; max-width: 420px; margin: 0 auto; }
html.ds .fcs-lead { margin: 0; color: var(--c-label-1); font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); letter-spacing: var(--tr-body); text-align: center; text-wrap: balance; }
html.ds .fcs-shelf .fcs-note, html.ds .fcs-shelf .fcs-line { align-self: center; }
html.ds .fcs-field { display: flex; flex-direction: column; gap: 6px; }
html.ds .fcs-field-label { color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds .fcs-field > input { appearance: none; width: 100%; min-height: var(--target); margin: 0; padding: 0 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-control); background: var(--c-fill-1); color: var(--c-label-1); font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); letter-spacing: var(--tr-body); }
html.ds .fcs-field > input::placeholder { color: var(--c-label-3); }
html.ds .fcs-field > input:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
html.ds .fcs-field > input[aria-invalid="true"] { border-color: var(--c-danger); }
html.ds .fcs-hint { margin: -2px 0 0; color: var(--c-label-3); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds .fcs-line.is-problem { margin: -2px 0 0; max-width: none; text-align: left; color: var(--c-danger); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }
html.ds .fcs-link { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--sp-4) var(--sp-3); border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); text-align: center; }
html.ds .fcs-link-label { color: var(--card-gold); font: 600 var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: .04em; text-transform: uppercase; }
html.ds .fcs-link-url { color: var(--c-label-1); font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
html.ds .fcs-link-count { color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds .fcs-shelf .fcs-actions { justify-self: center; margin: 0 auto; }

/* the sign-in nudge after a first earned card (film-cards.js offerNudge): calm, one card, one line, two choices */
html.ds .fc-nudge { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); max-width: 380px; margin: 0 auto; padding: 0 0 var(--sp-2); text-align: center; }
html.ds .fc-nudge-sheet .ds-sheet-title { text-align: center; }
html.ds .fc-nudge-card { width: 72px; }
html.ds .fc-nudge-card .fc-mini { display: block; }
html.ds .fc-nudge-line { margin: 0; max-width: 30ch; color: var(--c-label-1); font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); letter-spacing: var(--tr-body); text-wrap: balance; }
html.ds .fc-nudge-actions { display: grid; gap: var(--sp-2); width: 100%; }
html.ds .fc-nudge-later { width: 100%; }
html.ds .fc-nudge-privacy { max-width: 34ch; }

@media (prefers-reduced-motion: reduce) { html.ds .fcs-wait { animation: none; } }
html.ds #device.manual-reduced-motion .fcs-wait { animation: none; }
@media (forced-colors: active) { html.ds .fcs-frame { border: 1px solid CanvasText; } }

/* ===== prototype-src/share-sheet.css ===== */
/* ONE SHARE SHEET (prototype-src/share-sheet.js; record hub/docs/SHARE-2026-10-15.md).

     .ss-actions   the one group of actions every share sheet has: the main action full width, then
     .ss-row       one row of equals (Save image, Copy link, Messages ...), as many across as the text size allows
     .ss-sheet     the glass sheet a card, Film DNA or a stub shares in (TRIPTIC_DS.sheet); the share page of a three, a
                   film or a Collection is a page and takes the same row and the same glass

   The buttons are the app's own (.primary-button, .secondary-button: Lamp and Glass, design-system.css); this file only
   lays them out. The app's tokens throughout. `transition` and animation name only transform and opacity. */
html.ds .ss-actions { display: grid; gap: var(--sp-2); width: 100%; max-width: 360px; }
html.ds .ss-actions > button { width: 100%; }
/* a row of equals: all across where they fit, wrapping to a second row where the words are large (never a word broken).
   (pages polish, 28 October 2026; the owner: "Save image" and "Copy link" broke onto two lines on the film's share page.)
   Why: each button had a third of the row (flex 1 1 0) and wrapped its words inside it, so the longest label folded
   first, on SE 320 and at Larger text. Now a label never wraps: each button takes its words' width plus an equal share of
   what is left, and a row of three sets its words just small enough to fit across (the row is a container; the three
   labels measure 16.6em of semibold words in Chromium; 6px and a 1px border each side, and 17.5em leaves room for WebKit's), never below 12px, still wrapping whole buttons if even that will not do. */
html.ds .ss-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); width: 100%; margin: 0; container-type: inline-size; }
html.ds :is(#device, body) .ss-row > button { flex: 1 1 auto; width: auto; min-width: max-content; min-height: var(--target); height: auto; margin: 0; padding: 8px 10px !important; white-space: nowrap; overflow-wrap: normal; border-radius: var(--r-pill) !important; background: var(--c-fill-2) !important; border: 1px solid var(--c-line) !important; font: 600 var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); }
html.ds :is(#device, body) .ss-row:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) > button { padding: 8px 6px !important; font-size: max(12px, min(var(--fs-subhead), calc((100cqi - 2 * var(--sp-2) - 42px) / 17.5))) !important; }   /* over the app-wide button size, which is !important (interaction-targets) */
html.ds .ss-row > button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* on the share page the row sits under Share at the page's own width */
html.ds #device .collectible-share > .ss-row { max-width: none; margin: var(--sp-2) 0 0; }
/* the sheet: the same top, the same picture, the same note, whichever kind it holds */
html.ds .ss-sheet .ds-sheet-title { text-align: center; }
html.ds .ss .fcs-note { margin: 0; }
html.ds .ss-sheet > .ss-close { position: absolute; top: var(--sp-2); left: var(--gutter); z-index: 3; }

/* ===== prototype-src/share-shapes.css ===== */
/* TRIPTIC share shapes: the "Picture" choice in a share sheet (share-shapes.js). Three small previews of the very
   pictures that will go, each at its own shape: Stories (9:16), Posts (1:1), Links (1.91:1). A radio group: the
   chosen one carries the lamp's hairline. Tokens only; sizes follow the text size (--text-scale) for the names. */
html.ds .share-shapes { display: grid; gap: 8px; margin: 14px 0 4px; }
/* on the share page: under the ticket and its message, just above Share (ds-film-share.css orders that page) */
html.ds #device .collectible-share.ds-share > .share-shapes { order: 2; margin: 0 0 20px; }
html.ds .share-shapes-label { font: var(--fw-footnote, 600) var(--fs-footnote)/1.3 var(--font-ui); color: var(--c-label-2); letter-spacing: var(--tr-footnote, 0); }
html.ds .share-shapes-row { display: flex; align-items: flex-end; justify-content: center; gap: 12px; flex-wrap: wrap; }
html.ds .share-shape {
  appearance: none; border: 0; background: transparent; color: var(--c-label-2); padding: 6px 6px 4px; min-width: 76px; min-height: 44px;
  display: grid; justify-items: center; align-content: end; gap: 6px; border-radius: var(--r-control); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform var(--motion-fast) var(--motion-curve), color var(--motion-fast) var(--motion-curve);
}
html.ds .share-shape:active { transform: scale(.97); }
html.ds .share-shape:focus-visible { outline: 2px solid var(--c-lamp); outline-offset: 2px; }
html.ds .share-shape-frame {
  display: block; border-radius: 10px; overflow: hidden; background: var(--c-stage-raised);
  box-shadow: 0 0 0 1px var(--c-line), 0 8px 18px rgba(0, 0, 0, .45);
  transition: transform var(--motion-fast) var(--motion-curve);
}
html.ds .share-shape--story .share-shape-frame { width: 56px; height: 100px; }
html.ds .share-shape--square .share-shape-frame { width: 64px; height: 64px; }
html.ds .share-shape--link .share-shape-frame { width: 112px; height: 59px; }
html.ds .share-shape-preview, html.ds .share-shape-canvas { display: block; width: 100%; height: 100%; }
html.ds .share-shape-name { font: 600 var(--fs-caption-1)/1.2 var(--font-ui); }
html.ds .share-shape.is-chosen { color: var(--c-label-1); }
html.ds .share-shape.is-chosen .share-shape-frame { box-shadow: 0 0 0 2px var(--c-lamp), 0 10px 22px rgba(0, 0, 0, .5); transform: translateY(-2px); }
html.ds .share-shapes-line { margin: 0; text-align: center; font: 400 var(--fs-footnote)/1.35 var(--font-ui); color: var(--c-label-2); }
@media (prefers-reduced-motion: reduce) {
  html.ds .share-shape, html.ds .share-shape-frame { transition: none; }
  html.ds .share-shape.is-chosen .share-shape-frame { transform: none; }
  html.ds .share-shape:active { transform: none; }
}
/* the app's own Reduce Motion switch (#device.manual-reduced-motion) does the same */
html.ds #device.manual-reduced-motion .share-shape, html.ds #device.manual-reduced-motion .share-shape-frame { transition: none; }
html.ds #device.manual-reduced-motion .share-shape.is-chosen .share-shape-frame, html.ds #device.manual-reduced-motion .share-shape:active { transform: none; }
/* the largest text sizes: the three stay on one line where they fit, and their names wrap under them rather than overlap */
html.ds[data-text-size="largest"] .share-shapes-row { gap: 8px; }
html.ds[data-text-size="largest"] .share-shape { min-width: 72px; }
/* the film card's and Film DNA's sheets: the choice sits between the picture and the buttons */
html.ds .fcs .share-shapes { margin: 4px 0 12px; }
/* their preview takes the chosen shape: a square, or the wide link (Stories keeps the sheet's own 9:16 frame) */
html.ds .fcs-frame[data-shape="square"] { aspect-ratio: 1 / 1; height: auto; width: min(72vw, 300px); }
html.ds .fcs-frame[data-shape="link"] { aspect-ratio: 1200 / 630; height: auto; width: min(84vw, 340px); }
html[data-device-h="compact"].ds .fcs-frame[data-shape="square"] { width: min(60vw, 230px); height: auto; }
html[data-device-h="compact"].ds .fcs-frame[data-shape="link"] { width: min(80vw, 300px); height: auto; }

/* ===== prototype-src/referral.css ===== */
/* Invite a friend (prototype-src/referral.js; record hub/docs/REFERRAL-2026-10-20.md). Drawn from the design tokens only:
   the invite sheet, the friend-joined moment, and the one line under every share sheet's actions. No loop: the two tickets
   settle in once on arrival (opacity and transform, a token's duration), and are still under Reduce Motion. */
html.ds .rf-body { display: grid; gap: 14px; padding: 4px 4px 20px; text-align: center; justify-items: center; }
html.ds .rf-title {
  margin: 0; max-width: 22ch; color: var(--c-label-1);
  font: var(--fw-headline) var(--fs-title-2)/1.15 var(--font-ui); letter-spacing: var(--tr-headline);
}
html.ds .rf-title:focus { outline: none; }
html.ds .rf-title:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 4px; border-radius: var(--r-row); }
html.ds .rf-lede { margin: 0; max-width: 34ch; color: var(--c-label-2); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); }
html.ds .rf-count {
  margin: 0; padding: 6px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-fill-1);
  color: var(--c-label-1); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote);
}
html.ds .rf-body > .primary-button, html.ds .rf-ready > .secondary-button { width: 100%; max-width: 360px; min-height: 50px; }
html.ds .rf-ready { display: grid; gap: 8px; width: 100%; justify-items: center; padding-top: 4px; }
html.ds .rf-ready-line { margin: 0; color: var(--c-label-1); font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); }
html.ds .rf-note { margin: 0; min-height: 1em; color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }
html.ds .rf-note:empty { display: none; }
html.ds .rf-small { margin: 4px 0 0; max-width: 38ch; color: var(--c-label-3); font: var(--fw-footnote) var(--fs-caption-1)/1.4 var(--font-ui); }

/* two tickets, one each: they lean together once, then rest */
html.ds .rf-hero { position: relative; width: 132px; height: 84px; margin-top: 4px; }
html.ds .rf-ticket {
  position: absolute; top: 10px; width: 74px; height: 56px; border-radius: var(--r-row);
  border: 1px solid var(--tint-edge); background: var(--c-stage-raised); box-shadow: var(--e-1);
  animation: rf-lean var(--motion-normal) var(--motion-spring) both;
}
html.ds .rf-ticket::before { content: ""; position: absolute; inset: 9px 12px auto; height: 3px; border-radius: var(--r-pill); background: var(--c-seal); }
html.ds .rf-ticket::after { content: ""; position: absolute; left: 12px; right: 26px; bottom: 12px; height: 3px; border-radius: var(--r-pill); background: var(--c-line-strong); }
html.ds .rf-ticket:first-child { left: 8px; --rf-tilt: -8deg; }
html.ds .rf-ticket:last-child { right: 8px; --rf-tilt: 8deg; animation-delay: var(--motion-press); }
html.ds .rf-ticket { transform: rotate(var(--rf-tilt)); }
@keyframes rf-lean { from { opacity: 0; transform: translateY(10px) rotate(0deg); } to { opacity: 1; transform: rotate(var(--rf-tilt)); } }

/* the moment: Flick, his line, one button */
html.ds .rf-moment .rf-body { padding-top: 8px; }
html.ds .rf-moment .rf-flick { max-width: 340px; }
html.ds .rf-moment .rf-said { color: var(--c-label-1); }

/* the line under every share sheet's actions (share-sheet.js) */
html.ds .ss-invite {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin: 10px 0 0; padding: 0 12px;
  border: 0; background: transparent; color: var(--c-label-2);
  font: var(--fw-subhead-strong) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote);
}
html.ds .ss-invite b { color: var(--c-seal-hi); font-weight: inherit; }
html.ds .ss-invite:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-row); }

@media (prefers-reduced-motion: reduce) { html.ds .rf-ticket { animation: none; } }
html.reduce-motion .rf-ticket, html[data-motion-tier="still"] .rf-ticket, html.low-power .rf-ticket { animation: none !important; }

/* ===== prototype-src/reveal-clip.css ===== */
/* Share this reveal (REVEAL lane, 14 October 2026; reveal-clip.js; record hub/docs/REVEAL-2026-10-14.md).
   An option of its own on the page Share opens for a three that may be sent, after You choose: a heading, one sentence of
   what it does, a preview once the clip is made, where it stands, and the buttons. No motion of its own. */
html.ds #device .collectible-share > .rc-share {
  box-sizing: border-box; width: 100%; margin: 14px 0 0; padding: 16px 16px 14px; border-radius: var(--r-card);
  background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); text-align: left;
}
/* on the designed page every child has its own place in a column (ds-film-share.css): this one follows You choose, ahead of the notes */
html.ds #device .collectible-share.ds-share > .rc-share { order: 7; }
html.ds #device .collectible-share > .rc-share > .rc-share-head { display: flex; align-items: center; gap: 10px; color: var(--c-seal-hi); }
html.ds #device .collectible-share > .rc-share > .rc-share-head > svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html.ds #device .collectible-share > .rc-share h2 { margin: 0; font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--fw-headline); letter-spacing: var(--tr-headline); color: var(--c-label-1); }
html.ds #device .collectible-share > .rc-share > .rc-share-what { margin: 6px 0 0; font-size: var(--fs-subhead); line-height: var(--lh-subhead); letter-spacing: var(--tr-subhead); color: var(--c-label-2); }
/* the clip itself, small and upright (9:16), once it is made */
html.ds #device .collectible-share > .rc-share > .rc-share-preview {
  display: block; box-sizing: border-box; width: min(52%, 190px); aspect-ratio: 9 / 16; margin: 14px auto 0; object-fit: cover;
  border-radius: var(--r-control); background: var(--c-stage); box-shadow: inset 0 0 0 1px var(--c-line);
}
html.ds #device .collectible-share > .rc-share > .rc-share-status { margin: 10px 0 0; min-height: 1px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--fw-subhead-strong); color: var(--c-beam); }
html.ds #device .collectible-share > .rc-share[data-rc-state="error"] > .rc-share-status { color: var(--c-label-2); }
html.ds #device .collectible-share > .rc-share[data-rc-state="ready"] > .rc-share-status { color: var(--c-ok); }
html.ds #device .collectible-share > .rc-share > :is(.rc-share-make, .rc-share-go) { width: 100%; min-height: 48px; margin: 12px 0 0; }
html.ds #device .collectible-share > .rc-share > :is(.rc-share-save, .rc-share-again) { width: 100%; min-height: 44px; margin: 8px 0 0; }
html.ds #device .collectible-share > .rc-share > .rc-share-private { margin: 12px 0 0; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--c-label-3); }

/* ===== prototype-src/film-credits.css ===== */
/* TRIPTIC film credits (film-credits.js): a film page's cast and crew as its opening credits. One title card on the
   stage, lit faintly in the film's own colour (--tint-rgb, the room's tint): the role in small capitals, the names in
   the interface face, centred, portraits as small circles. Initials stand in for a missing portrait. Tokens only. */
html.ds #device .film-v5 .cast-section.film-credits { text-align: center; }
html.ds #device .film-v5 .film-credits > header { justify-content: flex-start; text-align: left; }
html.ds .film-credits .fcr-roll {
  display: grid; gap: var(--sp-6); padding: var(--sp-6) var(--sp-4);
  background: radial-gradient(120% 80% at 50% 0%, rgba(var(--tint-rgb), .16), rgba(var(--tint-rgb), 0) 70%), var(--c-stage-raised);
  border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--e-1);
}
html.ds .film-credits .fcr-credit { display: grid; gap: var(--sp-3); justify-items: center; }
html.ds .film-credits .fcr-credit + .fcr-credit { padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
html.ds .film-credits .fcr-role {
  margin: 0; font: var(--fw-eyebrow) var(--fs-eyebrow)/1.2 var(--font-ui); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--c-label-3);
}
html.ds .film-credits .fcr-people { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4) var(--sp-5); }
html.ds .film-credits .fcr-people--cast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-3); width: 100%; }
html.ds .film-credits .fcr-person { display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; }
html.ds .film-credits .fcr-name {
  font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline);
  color: var(--c-label-1); overflow-wrap: anywhere; text-wrap: balance;
}
html.ds .film-credits .fcr-people--director .fcr-name { font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: var(--tr-title-3); }
html.ds .film-credits .fcr-part { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); overflow-wrap: anywhere; text-wrap: balance; }
html.ds .film-credits .fcr-as { color: var(--c-label-3); }
html.ds .film-credits .fcr-crew-names { margin: 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-1); text-wrap: balance; }
html.ds .film-credits .fcr-dot { color: var(--c-label-3); }
/* a portrait, or its initials */
html.ds .fcr-face {
  position: relative; display: grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 32% 26%, rgba(var(--tint-rgb), .42), rgba(var(--tint-rgb), .08) 62%), var(--c-stage);
  box-shadow: 0 0 0 1px rgba(var(--tint-rgb), .5), 0 6px 16px rgba(0, 0, 0, .45);
}
html.ds .fcr-face--lg { width: 72px; height: 72px; }
html.ds .fcr-face--md { width: 60px; height: 60px; }
html.ds .fcr-face--sm { width: 44px; height: 44px; }
html.ds .fcr-face > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
html.ds .fcr-initials { font: 600 var(--fs-headline)/1 var(--font-ui); letter-spacing: var(--tr-caps); color: var(--c-lamp); }
html.ds .fcr-face--lg .fcr-initials { font-size: var(--fs-title-3); }
html.ds .fcr-face--sm .fcr-initials { font-size: var(--fs-footnote); }
html.ds .film-credits .fcr-full { display: block; margin: var(--sp-4) auto 0; min-height: 44px; }
/* the full cast sheet */
html.ds .fcr-sheet { padding: 0 0 var(--sp-6); }
html.ds .fcr-sheet-count { margin: 0 0 var(--sp-3); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }
html.ds .fcr-list { list-style: none; margin: 0; padding: 0; display: grid; }
html.ds .fcr-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--c-line); }
html.ds .fcr-row-text { display: grid; gap: 2px; min-width: 0; text-align: left; }
html.ds .fcr-row .fcr-name { font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); color: var(--c-label-1); overflow-wrap: anywhere; }
html.ds .fcr-row .fcr-part { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); overflow-wrap: anywhere; }
/* the largest text: one name to a line, so no name is squeezed */
html.ds[data-text-size="largest"] .film-credits .fcr-people--cast { grid-template-columns: minmax(0, 1fr); }
@media (forced-colors: active) { html.ds .fcr-face { border: 1px solid CanvasText; } html.ds .film-credits .fcr-roll { border-color: CanvasText; } }

/* ===== prototype-src/film-rating.css ===== */
/* TRIPTIC film ratings (film-rating.js): TMDB's user score, always named as TMDB's. Tokens only.
   The chip ("★ 7.8 TMDB") sits in a poster's top-left corner on dark glass, or at the end of a line of text; the film
   page's score sits under the title's line, large, with TMDB's name and the votes in words beside it. The star is the
   warm caution amber (the app's own token), never TMDB's colours, never a TRIPTIC mark. Nothing moves. */
html.ds .frt-anchor { position: relative; }
html.ds .frt-chip {
  display: inline-flex; align-items: center; gap: 3px; flex: none; max-width: 100%; white-space: nowrap;
  font: 600 var(--fs-caption-2)/1 var(--font-ui); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--c-label-1);
  pointer-events: none;
}
html.ds .frt-chip .frt-star { width: 1em; height: 1em; flex: none; color: var(--c-caution); }
html.ds .frt-chip .frt-num { font-weight: 700; }
html.ds .frt-chip .frt-src { margin-left: 2px; font-size: .78em; font-weight: 600; letter-spacing: .06em; color: var(--c-label-2); }
/* over a poster: dark glass tucked into the top-left corner, inside the poster's own rounding.
   (pages polish, 28 October 2026; the owner: "rating badges cover poster titles", The Innocents and Let the Right One In in a
   Collection) A poster's title is set in its lower third, over the billing block, far more often than in its top corner: the chip
   sat in the lower-left corner, 6pt in, and covered the title's first letters. It is a size smaller (10pt figures, a 16pt pill)
   and takes the top-left corner, 5pt in, on every poster that carries one (one style app-wide: a Collection, the Library's
   grids and rails, Watched as a strip). Coming Soon already stood it there; Next to watch keeps the top-right corner. */
html.ds .frt-chip--over {
  position: absolute; left: 5px; top: 5px; bottom: auto; z-index: 3; padding: 3px 5px 3px 4px; border-radius: var(--r-pill);
  font-size: calc(10 * var(--type-unit, 1px)); gap: 2px;
  background: rgba(5, 5, 7, .74); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 2px 8px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2);
}
html.ds .frt-chip--over .frt-src { margin-left: 1px; font-size: .74em; letter-spacing: .05em; }
/* at the end of a line: a quiet hairline pill that follows the line's own size */
html.ds .frt-chip--line {
  margin-left: 8px; padding: 2px 6px 2px 5px; vertical-align: .08em; border-radius: var(--r-pill);
  font-size: max(var(--fs-caption-2), .82em); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--c-line);
}
html.ds .frt-chip--lead {
  margin-right: 6px; padding: 1px 5px 1px 4px; vertical-align: .04em; border-radius: var(--r-pill);
  font-size: max(var(--fs-caption-2), .86em); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--c-line);
}
/* Today's Ten fan: the back three posters stand small and turned away; a chip there could not be read, so only the two
   in front carry one (The Ten itself, one tap away, shows every score in full) */
html.ds #device .ds-ten-fan-card:nth-child(n+3) .frt-chip--over { display: none; }
/* Coming Soon: the countdown board stands over the foot of the poster in front; the chip's top corner is every poster's now */
/* the film page */
/* (TIDY, 13 October 2026: the owner found the score pressed against the line above it. The film page's own rule for a
   paragraph under the title, `.recon-film .film-title > p { margin: 0 }`, outranked the gap set here, so the two touched.
   The score is a step down the page from the facts line: a clear gap that grows with the text size, then the row.) */
html.ds #device .film-v5 .film-title > .frt-score,
html.ds #device .film-v5.recon-film .film-title > p.frt-score {
  display: flex; align-items: center; gap: var(--sp-3); margin: max(var(--sp-4), calc(16 * var(--type-unit, 1px))) 0 0; padding: 0;
}
html.ds .frt-score-num { display: inline-flex; align-items: baseline; gap: 4px; flex: none; color: var(--c-label-1); font-variant-numeric: tabular-nums; }
html.ds .frt-score-num .frt-star { width: calc(20 * var(--type-unit, 1px)); height: calc(20 * var(--type-unit, 1px)); align-self: center; color: var(--c-caution); }
html.ds .frt-score-num b { font: var(--fw-title-2) var(--fs-title-2)/1 var(--font-ui); letter-spacing: -.01em; }
html.ds .frt-score-num small { font: var(--fw-footnote) var(--fs-footnote)/1 var(--font-ui); color: var(--c-label-2); }
html.ds .frt-score-text { display: grid; gap: 2px; min-width: 0; padding-left: var(--sp-3); border-left: 1px solid var(--c-line-strong, var(--c-line)); }
html.ds .frt-score-text strong { font: var(--fw-caption-2-strong, 600) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: .02em; color: var(--c-label-1); }
html.ds .frt-score-text small { font: var(--fw-footnote) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); color: var(--c-label-2); }
/* the largest text: the line chip drops to its own line rather than squeezing the words before it; the score wraps */
html.ds[data-text-size="largest"] .frt-chip--line { margin: 4px 0 0; }
html.ds[data-text-size="largest"] #device .sp-meta .frt-chip--line,
html.ds[data-text-size="largest"] #device .received-film-list .frt-chip--line { display: flex; width: max-content; margin-left: auto; margin-right: auto; }
html.ds[data-text-size="largest"] #device .film-v5 .film-title > .frt-score { flex-wrap: wrap; row-gap: var(--sp-2); }
html.ds[data-text-size="largest"] .frt-chip--over { font-size: calc(10px * 1.2); }
@media (forced-colors: active) { html.ds .frt-chip--over, html.ds .frt-chip--line { border: 1px solid CanvasText; } html.ds .frt-chip .frt-star, html.ds .frt-score-num .frt-star { color: CanvasText; } }
/* Settings, About: TMDB's approved logo above its credit, smaller than TRIPTIC's own mark (TMDB's rule); the file is the
   owner's to add (public/assets/attribution/tmdb-logo.svg) and the image removes itself until it is there */
html.ds #device .about-screen .about-credit-logo { display: block; width: auto; height: 14px; margin: 0 0 8px; }
/* (release polish, 28 October 2026) "Next to watch": its words stand over the foot of the poster, so the chip takes the top right */
html.ds #device .dslc-next .frt-chip--over { top: 10px; bottom: auto; left: auto; right: 10px; }

/* (FILM PAGE FIXES, 29 October 2026) the score's place, kept from the page's first frame while the score is asked for; the score
   is drawn into it (nothing moves; this layer has no motion of its own) */
html.ds #device .film-v5 .film-title > .frt-score[data-frt-pending] { visibility: hidden; }

/* ===== prototype-src/also-liked.css ===== */
/* TRIPTIC people also liked (also-liked.js): the very bottom of a film page. The page's own section title (Title 3), three
   posters in a row at 2:3 with the Library's poster corners and hairline, the title (two lines at most) and the year
   under each. While it loads: the same shapes, still (no shimmer, no loop).
   Tokens only. */
html.ds #device .film-v5 .film-content > .also-liked { order: 80; margin: var(--section-gap) 0 0; padding: 0; border: 0; background: none; box-shadow: none; }
html.ds #device .film-v5 .film-content > .also-liked[hidden] { display: none; }
html.ds #device .film-v5 .film-content > .also-liked[data-al-state="waiting"] { margin: 0; }
html.ds .also-liked .al-marker { display: block; width: 100%; height: 1px; }
html.ds .also-liked .al-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin: 0 0 var(--sp-3); padding: 0; }
html.ds .also-liked .al-title {
  margin: 0; font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: var(--tr-title-3);
  color: var(--c-label-1); text-transform: none;
}
html.ds .also-liked .al-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); align-items: start; }
html.ds .also-liked .al-item { min-width: 0; margin: 0; padding: 0; }
html.ds .also-liked .al-film {
  appearance: none; display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; min-height: var(--target);
  margin: 0; padding: 0; border: 0; border-radius: var(--r-row); background: none; box-shadow: none; color: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
html.ds .also-liked .al-poster {
  position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--r-row);
  background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line);
}
html.ds .also-liked .al-poster > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
html.ds .also-liked .al-seen {
  position: absolute; z-index: 2; top: var(--sp-1); right: var(--sp-1); display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-pill);
  background: var(--c-stage); color: var(--c-ok); box-shadow: 0 0 0 1px var(--c-line), var(--e-1);
}
html.ds .also-liked .al-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: var(--sp-2) 0 0;
  font: var(--fw-headline) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1); overflow-wrap: anywhere;
}
html.ds .also-liked .al-year { display: block; margin: 2px 0 0; font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); font-variant-numeric: tabular-nums; color: var(--c-label-2); }
html.ds .also-liked .al-film:focus-visible { outline: 2px solid var(--c-focus); outline-offset: var(--sp-1); }
html.ds .also-liked .al-film[aria-busy="true"] .al-poster { opacity: .6; }
/* the skeleton: the same shapes, still */
html.ds .also-liked .al-poster--skeleton { box-shadow: none; background: var(--c-fill-1); }
html.ds .also-liked .al-line { display: block; height: var(--lh-subhead); margin: var(--sp-2) 0 0; border-radius: var(--r-chip); background: var(--c-fill-1); }
html.ds .also-liked .al-line--short { width: 40%; height: var(--lh-caption-1); margin-top: 2px; }
html.ds .also-liked.is-loading .al-film { cursor: default; }
/* the films arrive: a short fade (none with Reduce Motion) */
html.ds .also-liked.is-arriving .al-row { animation: al-in var(--motion-fast) var(--motion-curve) both; }
@keyframes al-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.ds .also-liked.is-arriving .al-row { animation: none; } }
html.ds #device.manual-reduced-motion .also-liked.is-arriving .al-row,
html.ds[data-motion-tier="reduced"] .also-liked.is-arriving .al-row { animation: none; }
/* the largest text: two to a row would squeeze the names less, but three keep the row whole; the names may take three lines */
html.ds[data-text-size="largest"] .also-liked .al-name { -webkit-line-clamp: 3; }
@media (forced-colors: active) { html.ds .also-liked .al-poster { border: 1px solid CanvasText; } html.ds .also-liked .al-seen { border: 1px solid CanvasText; } }

/* ===== prototype-src/film-resolve.css ===== */
/* TRIPTIC film resolve (film-resolve.js): a film page whose film could not be had says so, in the page's own materials: its
   title (Title 3), one line of why, Retry (the primary action) and Back. First in the page's content, under the poster and
   the title it already has. Tokens only. */
html.ds #device .film-v5 .film-content > .fr-state {
  order: -1; display: grid; gap: var(--sp-3); margin: 0 0 var(--section-gap); padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-card, 20px);
}
html.ds .fr-state .fr-title { margin: 0; font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: var(--tr-title-3); color: var(--c-label-1); }
html.ds .fr-state .fr-copy { margin: 0; font: var(--fw-body) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
html.ds .fr-state .fr-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
html.ds .fr-state .fr-actions > button { flex: 1 1 140px; min-height: 44px; margin: 0; }
html.ds .fr-state[aria-busy="true"] .fr-retry { opacity: .6; }

/* ===== prototype-src/motion-language.css ===== */
/* TRIPTIC motion language: gestures and living things (owner, 8 October 2026; hub/docs/MOTION-2026-10-09.md).
   The tokens themselves are in motion-system.css section 1. This layer holds:
     1. the film page held by a finger (motion-gestures.js)
     2. horizontal rows: their ends rubber-band (the platform's own bounce, kept local to the row)
     3. one living thing per screen: off screen, in the background, Low Power and Reduce Motion (motion-living.js) */

/* 1. ---------------------------------------------------------------- the held film page */
html.ds #device :is(.critical-film-layer, .screen).film-v5.mo-pulled {
  transform-origin: 50% 0;
  border-radius: var(--r-sheet, 28px);
  overflow: hidden;
  box-shadow: 0 24px 60px rgb(0 0 0 / .5);
  will-change: transform;
  transition: none !important;
  animation: none !important;
}

/* 2. --------------------------------------------------------------------- horizontal rows */
/* A row's ends bounce like any iOS list (the WebKit default) and the bounce stays in the row: it never chains into the
   page's edge-back swipe or moves the page. `none` would switch the bounce off, so no row may use it. */
html.ds #device :is(.dslc-reel-track, .dslc-watched-row, .dslc-track, .explore-shelf-track,
  .collections-search-invitations, .ds-cs-reel, .cg-clues, .cast-track, .ds-film, .p20-constraints) {
  overscroll-behavior-x: contain;
}

/* 3. ----------------------------------------------------------------- one living thing per screen */
/* off screen (motion-living.js observes each living host) and in the background: paused where it is */
html.ds .mo-off, html.ds .mo-off::before, html.ds .mo-off::after,
html.ds .mo-off *, html.ds .mo-off *::before, html.ds .mo-off *::after,
html.mo-hidden *, html.mo-hidden *::before, html.mo-hidden *::after { animation-play-state: paused !important; }

/* The new living things (each one compositor-only: opacity, scale, rotate or translate) */
@keyframes mo-dot-breathe { from { opacity: 1; } to { opacity: .42; } }
@keyframes mo-bead-breathe { from { scale: 1; } to { scale: 1.22; } }
@keyframes mo-reel-turn { to { rotate: 360deg; } }
@keyframes mo-foil-catch { from { translate: -70% 0; } to { translate: 70% 0; } }
/* Collections: the amber dot beside "Curated by TRIPTIC" breathes, like a light left on */
html.ds #device .dslc-collections .dslc-coll-shelf:first-of-type > header h2::before { animation: mo-dot-breathe 2.4s var(--motion-breathe) infinite alternate; }
/* ...unless the Cinematic Universe's doorway is on the page (JOIN3, 14 October 2026; lane CU-WEB): its drifting sky is
   Collections' one living thing, and on a tall screen (an iPad, or a phone with no "In cinemas now" shelf) the dot would
   breathe beside it. The same selector as above plus :has, so it outranks it. */
html.ds #device .dslc-collections:has(.cu-door) .dslc-coll-shelf:first-of-type > header h2::before { animation: none; }
/* You: the bead of your strongest lean swells and settles, slowly */
html.ds #device .dsy-you .dsy-dna-card .fd-lane.is-lean:first-of-type .fd-bead { animation: mo-bead-breathe 2.4s var(--motion-breathe) infinite alternate; }
/* ...unless this week's sealed card sits just below it (JOIN, 13 October 2026): its light is You's one living thing */
html.ds #device .dsy-you:has(.fc-myst-mark) .dsy-dna-card .fd-lane.is-lean:first-of-type .fd-bead { animation: none; }   /* (the same selector as above plus :has, so it outranks it) */
/* Friday 3, before six: today's reel turns, very slowly */
html.ds #device .ds-reel-strip[data-state="today"] .ds-can-hub { animation: mo-reel-turn 16s linear infinite; }
/* The Library: the foil on the shelf catches the light as you scroll (a scroll timeline: nothing runs at rest) */
@supports (animation-timeline: view()) {
  html.ds #device .fc-shelf .fc-mini.fin-foil::after { inset: 0 -40%; animation: mo-foil-catch linear both; animation-timeline: view(); animation-range: cover; }
}

/* One per screen: the screen's chosen living thing; everything else that used to loop there holds still */
/* The Daily Cryptic: the marquee bulbs. The floating props, the poster's wiggle and sparks, the live dot, the Play
   button's beckon and Flick's breath and blink hold still (Flick still reacts to a guess, a solve, a finished day). */
html.ds #device > .screen.cg-room :is(.cg-float, .cg-poster, .cg-poster-spark, .cg-btn-face),
html.ds #device > .screen.cg-room .cg-live-dot::after,
html.ds #device > .screen.cg-room .cg-stub::before,
html.ds #device > .screen.cg-room .flk :is(.flk-body, .flk-lids) { animation: none !important; }
/* Today: the electric Friday card while it is awake; otherwise Flick in the Daily Cryptic row (his slow breath, and his
   blink when his eyes are open), and The Ten's card only once that row has scrolled away. The week's mystery card holds
   still here. */
html.ds #device > .screen.ds-today :is(.fc-myst-light, .fc-myst-sheen),
html.ds #device > .screen.ds-today .fc-myst-mark::before { animation: none !important; }
html.ds #device > .screen.ds-today:has(.dt-fri-hero.is-awake) .cg-spool :is(.flk-body, .flk-lids),
html.ds #device > .screen.ds-today:has(.dt-fri-hero.is-awake) .ds-ten-card :is(.ds-ten-fan, .ds-ten-sheen, .ds-ten-backdrop img) { animation: none !important; }
html.ds #device > .screen.ds-today:has(.cg-spool:not(.mo-off)) .ds-ten-card :is(.ds-ten-fan, .ds-ten-sheen, .ds-ten-backdrop img) { animation-play-state: paused !important; }
/* The Library: the shelf's foil. The week's mystery card on the shelf holds still. */
html.ds #device > .screen.dslc-library :is(.fc-myst-light, .fc-myst-sheen),
html.ds #device > .screen.dslc-library .fc-myst-mark::before { animation: none !important; }

/* Reduce Motion, and Low Power where it can be known: every living thing is still */
@media (prefers-reduced-motion: reduce) {
  html.ds #device :is(.dt-fri-hero .dt-zap-spin, .dt-fri-hero .dt-arc, .dt-fri-hero .dt-zap-glow, .dt-fri-hero .dt-zap-flash, .flk, .flk *, .cg-float, .cg-poster, .cg-poster-spark, .cg-btn-face, .spc-art *, .ds-ten-fan, .ds-ten-sheen, .ds-ten-backdrop img, .ds-tt-still img, .fc-myst-light, .fc-myst-sheen, .fu-glow, .ds-seal-glow, .ds-can, .ds-can-hub, .fd-bead),
  html.ds #device :is(.dt-slot, .cg-headline, .fc-myst-mark, .dslc-coll-shelf > header h2, .cg-live-dot, .fc-mini.fin-foil)::before,
  html.ds #device :is(.cg-headline, .cg-live-dot, .fc-mini.fin-foil)::after { animation: none !important; }
}
html.ds:is(.reduce-motion, .mo-low-power) #device :is(.dt-fri-hero .dt-zap-spin, .dt-fri-hero .dt-arc, .dt-fri-hero .dt-zap-glow, .dt-fri-hero .dt-zap-flash, .flk, .flk *, .cg-float, .cg-poster, .cg-poster-spark, .cg-btn-face, .spc-art *, .ds-ten-fan, .ds-ten-sheen, .ds-ten-backdrop img, .ds-tt-still img, .fc-myst-light, .fc-myst-sheen, .fu-glow, .ds-seal-glow, .ds-can, .ds-can-hub, .fd-bead),
html.ds:is(.reduce-motion, .mo-low-power) #device :is(.dt-slot, .cg-headline, .fc-myst-mark, .dslc-coll-shelf > header h2, .cg-live-dot, .fc-mini.fin-foil)::before,
html.ds:is(.reduce-motion, .mo-low-power) #device :is(.cg-headline, .cg-live-dot, .fc-mini.fin-foil)::after,
html.ds #device.manual-reduced-motion :is(.dt-fri-hero .dt-zap-spin, .dt-fri-hero .dt-arc, .dt-fri-hero .dt-zap-glow, .dt-fri-hero .dt-zap-flash, .flk, .flk *, .cg-float, .cg-poster, .cg-poster-spark, .cg-btn-face, .spc-art *, .ds-ten-fan, .ds-ten-sheen, .ds-ten-backdrop img, .ds-tt-still img, .fc-myst-light, .fc-myst-sheen, .fu-glow, .ds-seal-glow, .ds-can, .ds-can-hub, .fd-bead),
html.ds #device.manual-reduced-motion :is(.dt-slot, .cg-headline, .fc-myst-mark, .dslc-coll-shelf > header h2, .cg-live-dot, .fc-mini.fin-foil)::before,
html.ds #device.manual-reduced-motion :is(.cg-headline, .cg-live-dot, .fc-mini.fin-foil)::after { animation: none !important; }

/* ===== prototype-src/notifications.css ===== */
/* TRIPTIC reminders: Settings > Notifications, and the priming card (prototype-src/notifications.js).
   Tokens only (design-system.css). The card carries its own solid surface so it reads on the dark app and inside the
   bright Daily Cryptic room alike. Transform and opacity only; no motion under Reduce Motion. */

/* ===== Settings > Notifications ======================================================== */
/* The four times were written "08:00 12:30 18:00 20:30" in chips 52pt wide beside their label. Written the way every
   sentence now writes an hour ("8am 12:30pm 6pm 8:30pm": owner decision O11) the longer two no longer fitted a 52pt
   chip. The label sits on its own line, in the text column, and the chips run the full width of the card beneath it
   (from the card's own edge, 40pt left of the text column), which is 71pt a chip on the narrowest phone. */
#device .tn-settings .tn-time {
  display: grid; gap: 8px;
  padding: 2px 16px 14px 56px; min-height: var(--row-min, 52px);
}
#device .tn-settings .tn-time-label {
  font: var(--fw-body, 400) var(--fs-subhead, 15px)/1.3 var(--font-ui, system-ui);
  color: var(--c-label-2, rgba(245, 244, 247, .68));
}
#device .tn-settings .tn-time-label small { display: inline; margin-left: 6px; font-size: var(--fs-caption-1, 12px); color: var(--c-label-3, rgba(245, 244, 247, .56)); }
#device .tn-settings .tn-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; min-width: 0; margin-left: -40px; }
#device .tn-settings .tn-chip {
  appearance: none; -webkit-appearance: none;
  min-height: 44px; padding: 0 4px; border-radius: 12px;
  border: 1px solid var(--c-line, rgba(255, 255, 255, .09));
  background: var(--c-fill-1, rgba(255, 255, 255, .05));
  color: var(--c-label-2, rgba(245, 244, 247, .68));
  font: 600 calc(14 * var(--type-unit))/1 var(--font-ui, system-ui);
  font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap;
  transition: background-color var(--motion-fast) var(--motion-curve), border-color var(--motion-fast) var(--motion-curve), color var(--motion-fast) var(--motion-curve), transform var(--motion-fast) var(--motion-spring);
}
#device .tn-settings .tn-chip.is-on {
  background: color-mix(in srgb, var(--c-seal, #8b5cf6) 30%, transparent);
  border-color: var(--c-seal-hi, #a78bfa);
  color: var(--c-label-1, #f5f4f7);
}
#device .tn-settings .tn-chip:active { transform: scale(.96); }
#device .tn-settings .tn-chip:disabled { opacity: .45; }
#device .tn-settings .tn-chip:focus-visible { outline: 2px solid var(--c-focus, #a78bfa); outline-offset: 2px; }
#device .tn-settings .tn-status { cursor: default; }
#device .tn-settings .tn-status .ds-row-chevron,
html.ds #device .tn-settings .dsy-list .tn-status .ds-row-chevron { display: none; }
#device .tn-settings .settings-row[aria-busy="true"] { opacity: .7; }
#device .tn-settings .settings-row[aria-disabled="true"] { opacity: .55; }

/* (the html.ds selectors outrank the design system's own note rule, wherever this sheet sits in the bundle) */
#device .tn-settings .tn-explainer,
html.ds #device .tn-settings.dsy-page .settings-note.tn-explainer { border: 1px solid color-mix(in srgb, var(--c-seal-hi, #a78bfa) 34%, transparent); background: color-mix(in srgb, var(--c-seal, #8b5cf6) 12%, transparent); }
#device .tn-settings .tn-explainer.tn-denied,
#device .tn-settings .tn-paused,
html.ds #device .tn-settings.dsy-page .settings-note.tn-explainer.tn-denied,
html.ds #device .tn-settings.dsy-page .settings-note.tn-paused { border: 1px solid color-mix(in srgb, var(--c-caution, #f0c786) 34%, transparent); background: color-mix(in srgb, var(--c-caution, #f0c786) 9%, transparent); }
#device .tn-settings .tn-explainer .quiet-button { margin-top: 12px; }
#device .tn-settings .tn-steps,
html.ds #device .tn-settings.dsy-page .settings-note .tn-steps { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 10px; }
#device .tn-settings .tn-steps li { display: flex; align-items: center; gap: 12px; font: var(--fw-body, 400) var(--fs-subhead, 15px)/1.35 var(--font-ui, system-ui); color: var(--c-label-1, #f5f4f7); }
#device .tn-settings .tn-steps b { font-weight: 600; }
#device .tn-settings .tn-step-n {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-seal-fill, #7c4deb); color: #fff; font: 700 var(--fs-footnote, 13px)/1 var(--font-ui, system-ui); font-variant-numeric: tabular-nums;
}
#device .tn-settings .tn-feedback { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--r-row, 14px); background: color-mix(in srgb, var(--c-caution, #f0c786) 12%, transparent); color: var(--c-label-1, #f5f4f7); font: var(--fw-body, 400) var(--fs-subhead, 15px)/1.4 var(--font-ui, system-ui); }
#device .tn-settings .tn-feedback.is-ok { background: color-mix(in srgb, var(--c-ok, #8ee8cb) 14%, transparent); }
/* the one line under "From your Watchlist": what it needs, in the footnote voice (lane NOTIFY, 14 October 2026) */
#device .tn-settings .tn-watch-note,
html.ds #device .tn-settings.dsy-page .tn-watch-note { margin: 8px 16px 0; font: var(--fw-footnote, 400) var(--fs-footnote, 13px)/1.4 var(--font-ui, system-ui); letter-spacing: 0; color: var(--c-label-3, rgba(245, 244, 247, .56)); }
#device .tn-settings .settings-note p + p, #device .tn-settings .settings-note ol + p,
html.ds #device .tn-settings.dsy-page .settings-note ol + p { margin-top: 8px; }

/* ===== the priming card ================================================================= */
#device .tn-prime {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 12px; align-items: start;
  margin: 16px 0 0; padding: 16px;
  border-radius: 20px; border: 1px solid rgba(255, 255, 255, .14);
  background: var(--mat-chrome-solid, #16161d);
  box-shadow: var(--e-2, 0 12px 32px rgba(0, 0, 0, .36));
  color: var(--c-label-1, #f5f4f7); text-align: left;
}
#device .tn-prime-icon {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c-seal, #8b5cf6) 32%, transparent); color: var(--c-seal-hi, #a78bfa);
}
#device .tn-prime-icon svg { width: 22px; height: 22px; display: block; }
#device .tn-prime-copy strong { display: block; margin: 0 0 2px; font: 600 var(--fs-headline, 17px)/1.3 var(--font-ui, system-ui); letter-spacing: 0; color: var(--c-label-1, #f5f4f7); }
#device .tn-prime-copy p { margin: 0; font: 400 var(--fs-subhead, 15px)/1.4 var(--font-ui, system-ui); letter-spacing: 0; color: var(--c-label-2, rgba(245, 244, 247, .68)); }
#device .tn-prime-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
#device .tn-prime-actions button {
  appearance: none; -webkit-appearance: none; min-height: 48px; padding: 0 16px; border-radius: 14px; border: 0;
  font: 600 var(--fs-callout, 16px)/1 var(--font-ui, system-ui); letter-spacing: 0;
  transition: transform var(--motion-fast) var(--motion-spring), opacity var(--motion-fast) var(--motion-curve);
}
#device .tn-prime-actions button:active { transform: scale(.97); }
#device .tn-prime-actions button:focus-visible { outline: 2px solid var(--c-focus, #a78bfa); outline-offset: 2px; }
#device .tn-prime-yes { background: var(--c-lamp, #f3eee6); color: var(--c-lamp-ink, #0b0b10); }
#device .tn-prime-no { background: var(--c-fill-2, rgba(255, 255, 255, .08)); color: var(--c-label-1, #f5f4f7); }
#device .tn-prime[aria-busy="true"] .tn-prime-actions { opacity: .6; pointer-events: none; }
#device .tn-prime.is-settled { align-items: center; }
#device .tn-prime.is-settled .tn-prime-icon { background: color-mix(in srgb, var(--c-ok, #8ee8cb) 22%, transparent); color: var(--c-ok, #8ee8cb); }
#device [data-notify-slot]:empty { display: none; }
#device .tn-slot { margin: 8px 0 0; }

/* no slot on the screen: one small card above the Home indicator, never a full sheet */
#device > .tn-float {
  position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); z-index: 320;
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-spring);
}
#device > .tn-float.is-in { opacity: 1; transform: none; }
#device > .tn-float .tn-prime { margin: 0; box-shadow: var(--e-3, 0 28px 72px rgba(0, 0, 0, .55)); }
@media (prefers-reduced-motion: reduce) {
  #device > .tn-float { transform: none; transition: opacity var(--motion-fast) var(--motion-curve); }
  #device .tn-prime-actions button, #device .tn-settings .tn-chip { transition: none; }
}
#device.manual-reduced-motion > .tn-float { transform: none; transition: opacity var(--motion-fast) var(--motion-curve); }

/* (pages polish, 28 October 2026) "What's stored", folded under "Quiet by design": a plain disclosure row, every word inside */
html.ds #device .tn-settings .tn-stored { margin: 10px 0 0; border-top: 1px solid var(--c-line); }
html.ds #device .tn-settings .tn-stored > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; list-style: none; cursor: pointer; color: var(--c-label-1); font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); }
html.ds #device .tn-settings .tn-stored > summary::-webkit-details-marker { display: none; }
html.ds #device .tn-settings .tn-stored > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); color: var(--c-label-3); }
html.ds #device .tn-settings .tn-stored[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

/* ===== prototype-src/account.css ===== */
/* TRIPTIC accounts (prototype-src/account.js): the Account block in You and on the Account page, the Sign in with Apple
   button, the delete-account sheet, and the small sign-in prompts.
   Tokens only (design-system.css :root): --c-*, --fs/--lh/--fw/--tr-*, radii {6,10,14,20,28,999}, weights 400-700,
   nothing under 11px, no `transition: all`, motion on transform and opacity only. Scoped under #device.
   The Sign in with Apple button follows Apple's guidance for the white style on a dark surface: the system font, the
   title "Sign in with Apple", Apple's logo to its left, both centred, at least 44pt tall (50 here), nothing else inside.
   !important: none. */

/* ------------------------------------------------------------------ the block */
#device .ta-block { display: block; margin: 28px 0 0; padding: 0; color: var(--c-label-1); font-family: var(--font-ui); text-align: left; }
#device .settings-screen > .ta-block { margin: 12px 0 24px; }
#device .ta-title { margin: 0 0 8px; padding: 0 16px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-3); text-transform: none; }
#device .ta-card { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: var(--e-1); }
#device .ta-why { margin: 0; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1); text-wrap: balance; }
#device .ta-privacy { margin: 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-3); }
#device .ta-status { margin: 0; min-height: 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-2); }
#device .ta-status:empty { display: none; }
#device .ta-status.is-ok { color: var(--c-ok); }
#device .ta-status.is-error { color: var(--c-caution); }

/* Sign in with Apple: white style */
#device .ta-siwa { appearance: none; -webkit-appearance: none; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; margin: 0; padding: 0 16px; border: 0;
  border-radius: var(--r-row); background: white; color: black; font: 500 calc(19 * var(--type-unit))/1 var(--font-ui); letter-spacing: -.01em; cursor: pointer;
  transition: transform var(--motion-press) var(--motion-curve), opacity var(--motion-press) linear; }
#device .ta-siwa .ta-apple { flex: none; width: 16px; height: 19px; margin-top: -3px; }
#device .ta-siwa:active { transform: scale(.98); }
#device .ta-siwa[aria-disabled="true"] { opacity: .6; }
#device .ta-siwa:focus-visible, #device .ta-row:focus-visible, #device .ta-destructive:focus-visible, #device .ta-quiet:focus-visible, #device .ta-prompt-no:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* signed in */
#device .ta-head { display: flex; align-items: center; gap: 12px; }
#device .ta-badge { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-control); background: white; color: black; }
#device .ta-badge .ta-apple { width: 17px; height: 20px; margin-top: -2px; }
#device .ta-head-copy { display: grid; gap: 2px; min-width: 0; }
#device .ta-head-copy strong { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1); }
#device .ta-sub { font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); font-variant-numeric: tabular-nums; }
#device .ta-actions { display: grid; margin: 0 -16px -16px; border-top: 1px solid var(--c-line); }
#device .ta-row { appearance: none; -webkit-appearance: none; position: relative; display: flex; align-items: center; width: 100%; min-height: var(--row-min); margin: 0; padding: 0 16px; border: 0; border-radius: 0; background: none;
  color: var(--c-label-1); font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); letter-spacing: var(--tr-body); text-align: left; cursor: pointer; transition: opacity var(--motion-press) linear; }
#device .ta-row + .ta-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--c-line); }
#device .ta-row:last-child { border-radius: 0 0 var(--r-card) var(--r-card); }
#device .ta-row:active { opacity: .6; }
#device .ta-row.is-danger { color: var(--c-danger); }
#device .ta-row[aria-disabled="true"] { opacity: .5; }
#device .ta-card:has(.ta-actions) > .ta-status:not(:empty) { margin: 16px 0 0; }

/* ------------------------------------------------------------------ sheets */
#device > .ta-sheet-layer { position: absolute; inset: 0; z-index: 310; }
#device .ta-sheet-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .56); opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve); }
#device .ta-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92%; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 10px 20px calc(env(safe-area-inset-bottom, 0px) + 18px);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; background: var(--mat-chrome-solid); box-shadow: var(--e-3), inset 0 1px 0 var(--c-line-strong); color: var(--c-label-1); font-family: var(--font-ui); text-align: left;
  transform: translateY(104%); transition: transform var(--motion-normal) var(--motion-spring); }
#device > .ta-sheet-layer.is-open .ta-sheet-scrim { opacity: 1; }
#device > .ta-sheet-layer.is-open .ta-sheet { transform: none; }
#device > .ta-sheet-layer.is-closing .ta-sheet { transform: translateY(104%); transition-duration: var(--motion-fast); }
#device > .ta-sheet-layer.is-closing .ta-sheet-scrim { opacity: 0; transition-duration: var(--motion-fast); }
#device .ta-grabber { display: block; width: 36px; height: 5px; margin: 0 auto 10px; border-radius: var(--r-pill); background: var(--c-label-4); }
#device .ta-sheet .ta-sheet-close { position: absolute; top: 10px; right: 12px; left: auto; bottom: auto; margin: 0; width: 44px; height: 44px; }
#device .ta-sheet-title { margin: 14px 52px 8px 0; font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2); color: var(--c-label-1); text-wrap: balance; }
#device .ta-sheet-body { margin: 0 0 12px; font: var(--fw-body) var(--fs-body)/var(--lh-prose) var(--font-ui); letter-spacing: var(--tr-body); color: var(--c-label-2); }
#device .ta-deleted { list-style: none; margin: 0 0 14px; padding: 4px 16px; border-radius: var(--r-row); background: var(--c-fill-1); }
#device .ta-deleted li { position: relative; padding: 11px 0 11px 22px; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1); }
#device .ta-deleted li + li { border-top: 1px solid var(--c-line); }
#device .ta-deleted li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 10px; height: 2px; border-radius: var(--r-pill); background: var(--c-danger); }
#device .ta-sheet-note { margin: 0 0 10px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-2); }
#device .ta-sheet-note .ta-manage { color: var(--c-label-1); text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: 12px 0; margin: -12px 0; }
#device .ta-confirm { display: flex; align-items: center; gap: 12px; min-height: var(--row-min); margin: 6px 0 4px; padding: 0 2px; font: var(--fw-body) var(--fs-callout)/var(--lh-callout) var(--font-ui); letter-spacing: var(--tr-callout); color: var(--c-label-1); cursor: pointer; }
#device .ta-confirm input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--c-danger); }
#device .ta-sheet .ta-status { margin: 0 0 8px; }
#device .ta-destructive, #device .ta-quiet { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 50px; margin: 8px 0 0; padding: 0 16px; border: 0; border-radius: var(--r-pill);
  font: var(--fw-headline) var(--fs-headline)/1 var(--font-ui); letter-spacing: var(--tr-headline); cursor: pointer; transition: transform var(--motion-press) var(--motion-curve), opacity var(--motion-press) linear; }
#device .ta-destructive { background: var(--c-danger); color: var(--c-lamp-ink); }
#device .ta-destructive:disabled { opacity: .38; cursor: default; }
#device .ta-quiet { background: var(--c-fill-2); color: var(--c-label-1); }
#device .ta-quiet.is-strong { background: var(--c-lamp); color: var(--c-lamp-ink); }
#device .ta-quiet:disabled { opacity: .5; }
#device .ta-destructive:active:not(:disabled), #device .ta-quiet:active:not(:disabled) { transform: scale(.98); }

/* ------------------------------------------------------------------ prompts */
#device .ta-prompt, #device .ta-inline { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-card); border: 1px solid var(--c-line-strong); background: var(--mat-chrome-solid); color: var(--c-label-1); font-family: var(--font-ui); text-align: left; }
#device .ta-prompt-copy strong { display: block; margin: 0 0 2px; font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1); text-wrap: balance; }
#device .ta-prompt-copy p { margin: 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); }
#device .ta-prompt-actions { display: grid; gap: 8px; }
#device .ta-prompt-no { appearance: none; -webkit-appearance: none; min-height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: var(--r-row); background: var(--c-fill-2); color: var(--c-label-1);
  font: var(--fw-subhead-strong) var(--fs-callout)/1 var(--font-ui); letter-spacing: var(--tr-callout); cursor: pointer; transition: transform var(--motion-press) var(--motion-curve); }
#device .ta-prompt-no:active { transform: scale(.98); }
#device .ta-inline { margin: 20px 0 4px; }
#device .ta-inline .ta-prompt-no { background: none; color: var(--c-label-2); min-height: 44px; }
/* no slot on the screen: one small card above the Home indicator, never a full sheet */
#device > .ta-float { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); z-index: 320; opacity: 0; transform: translateY(24px);
  transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-spring); }
#device > .ta-float.is-in { opacity: 1; transform: none; }
#device > .ta-float .ta-prompt { box-shadow: var(--e-3); }
#device > .ta-float.is-status .ta-prompt { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
#device > .ta-float.is-status .ta-prompt-copy strong { margin: 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); }

@media (prefers-reduced-motion: reduce) {
  #device .ta-sheet, #device > .ta-sheet-layer.is-closing .ta-sheet { transform: none; opacity: 0; transition: opacity var(--motion-fast) linear; }
  #device > .ta-sheet-layer.is-open .ta-sheet { opacity: 1; }
  #device > .ta-float { transform: none; transition: opacity var(--motion-fast) var(--motion-curve); }
  #device .ta-siwa, #device .ta-destructive, #device .ta-quiet, #device .ta-prompt-no { transition: none; }
}
#device.manual-reduced-motion .ta-sheet, #device.manual-reduced-motion > .ta-sheet-layer.is-closing .ta-sheet { transform: none; opacity: 0; transition: opacity var(--motion-fast) linear; }
#device.manual-reduced-motion > .ta-sheet-layer.is-open .ta-sheet { opacity: 1; }
#device.manual-reduced-motion > .ta-float { transform: none; transition: opacity var(--motion-fast) var(--motion-curve); }

/* ===== prototype-src/report-this.css ===== */
/* "Report this" (prototype-src/report-this.js, 3 November 2026). The sheet is the account sheets' own shape (account.css):
   a bottom sheet on iPhone, a centred card on iPad, and on the iPhone Duo held like a book a sheet on the right leaf, never
   across the fold. The Collection's line is a quiet footnote under its films. Tokens only. */

/* the line under a Collection's films */
#device .collections-api-detail > .rt-link {
  appearance: none; -webkit-appearance: none; display: block; margin: var(--sp-5, 24px) auto var(--sp-6, 32px); min-height: 44px; padding: 0 var(--sp-4, 16px);
  border: 0; background: none; color: var(--c-label-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-line);
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); cursor: pointer;
}
#device .collections-api-detail > .rt-link:active { opacity: .6; }
#device .rt-link:focus-visible, #device .rt-layer :is(button, input, textarea):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* the sheet */
#device > .rt-layer { position: absolute; inset: 0; z-index: 310; }
#device .rt-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .56); opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve); }
#device .rt-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 92%; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
  padding: 10px 20px calc(env(safe-area-inset-bottom, 0px) + 18px); border-radius: var(--r-sheet, 28px) var(--r-sheet, 28px) 0 0;
  background: var(--mat-chrome-solid); box-shadow: var(--e-3), inset 0 1px 0 var(--c-line-strong); color: var(--c-label-1); text-align: left; transform: translateY(104%); transition: transform var(--motion-normal) var(--motion-curve);
}
#device > .rt-layer.is-open .rt-scrim { opacity: 1; }
#device > .rt-layer.is-open .rt-sheet { transform: none; }
#device > .rt-layer.is-closing .rt-sheet { transform: translateY(104%); transition-duration: var(--motion-fast); }
#device > .rt-layer.is-closing .rt-scrim { opacity: 0; transition-duration: var(--motion-fast); }
#device .rt-grabber { display: block; width: 36px; height: 5px; margin: 0 auto 10px; border-radius: var(--r-pill); background: var(--c-label-4); }
#device .rt-sheet .rt-close { position: absolute; top: 10px; right: 12px; left: auto; bottom: auto; margin: 0; width: 44px; height: 44px; }
#device .rt-title { margin: 14px 52px 2px 0; font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2); color: var(--c-label-1); }
#device .rt-about { margin: 0 52px 12px 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-2); overflow-wrap: anywhere; }
#device .rt-reasons { margin: 0 0 12px; padding: 0; border: 0; border-radius: var(--r-card); background: var(--c-fill-1); overflow: hidden; }
#device .rt-reasons legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#device .rt-reason { position: relative; display: flex; align-items: center; gap: 12px; min-height: var(--row-min, 48px); padding: 8px 16px; box-sizing: border-box; cursor: pointer;
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); letter-spacing: var(--tr-body); color: var(--c-label-1); }
#device .rt-reason + .rt-reason::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--c-line); }
#device .rt-reason input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--c-lamp); }
#device .rt-reason-text small { display: block; color: var(--c-label-3); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
#device .rt-note-label { display: block; margin: 4px 2px 6px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-2); }
#device .rt-note { display: block; width: 100%; box-sizing: border-box; min-height: 76px; margin: 0 0 8px; padding: 10px 12px; resize: vertical; border: 0; border-radius: var(--r-row, 12px);
  background: var(--c-fill-1); color: var(--c-label-1); font: var(--fw-body) 16px/1.35 var(--font-ui); }
#device .rt-privacy { margin: 0 2px 6px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-label-3); }
#device .rt-status { min-height: 1em; margin: 0 2px 4px; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
#device .rt-send, #device .rt-cancel { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 50px; margin: 8px 0 0; padding: 0 16px; border: 0; border-radius: var(--r-pill);
  font: var(--fw-headline) var(--fs-headline)/1 var(--font-ui); letter-spacing: var(--tr-headline); cursor: pointer; }
#device .rt-send { background: var(--c-lamp); color: var(--c-lamp-ink); }
#device .rt-send:disabled { opacity: .38; cursor: default; }
#device .rt-cancel { background: var(--c-fill-2); color: var(--c-label-1); }
#device .rt-send:active:not(:disabled), #device .rt-cancel:active:not(:disabled) { transform: scale(.98); }

/* iPad (regular width): a card in the middle of the lower window, at a reading width */
html[data-ipad="regular"] #device .rt-sheet { left: 50%; right: auto; bottom: max(24px, env(safe-area-inset-bottom, 0px)); width: min(540px, calc(100vw - 48px)); max-height: min(720px, 86%);
  border-radius: var(--r-sheet, 28px); transform: translate(-50%, 24px); opacity: 0; transition: transform var(--motion-normal) var(--motion-curve), opacity var(--motion-normal) linear; padding-bottom: 20px; }
html[data-ipad="regular"] #device > .rt-layer.is-open .rt-sheet { transform: translate(-50%, 0); opacity: 1; }
html[data-ipad="regular"] #device > .rt-layer.is-closing .rt-sheet { transform: translate(-50%, 24px); opacity: 0; }
html[data-ipad="regular"] #device .rt-grabber { display: none; }

/* iPhone Duo held like a book: the right leaf only, never across the fold */
html[data-duo-book] #device .rt-sheet { left: var(--dbk-rx); right: auto; width: var(--dbk-rw); }

@media (prefers-reduced-motion: reduce) {
  #device .rt-sheet, #device > .rt-layer.is-closing .rt-sheet { transform: none; opacity: 0; transition: opacity var(--motion-fast) linear; }
  #device > .rt-layer.is-open .rt-sheet { opacity: 1; }
  html[data-ipad="regular"] #device .rt-sheet, html[data-ipad="regular"] #device > .rt-layer.is-open .rt-sheet { transform: translate(-50%, 0); }
}
#device.manual-reduced-motion .rt-sheet, #device.manual-reduced-motion > .rt-layer.is-closing .rt-sheet { transform: none; opacity: 0; transition: opacity var(--motion-fast) linear; }
#device.manual-reduced-motion > .rt-layer.is-open .rt-sheet { opacity: 1; }
html[data-ipad="regular"] #device.manual-reduced-motion .rt-sheet { transform: translate(-50%, 0); }

/* ===== prototype-src/delight-moments.css ===== */
/* TRIPTIC delight-moments (prototype-src/delight-moments.js; lane DELIGHT, 9 October 2026). Every colour is a design
   token; every moving thing moves by transform and opacity, from the script, on the motion tokens. Nothing here can be
   focused or touched: each drawing is aria-hidden with pointer-events: none. */

/* ---------------------------------------------------------------- the popcorn (Great minds) */
.dlm-pop { position: fixed; z-index: 2147483000; width: 0; height: 0; pointer-events: none; }
.dlm-pop > svg { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; opacity: 0; will-change: transform, opacity; }
.dlm-k circle, .dlm-tub .dlm-k circle { fill: var(--c-lamp); stroke: var(--c-caution); stroke-width: .7; }
.dlm-k .dlm-h { fill: var(--c-caution); stroke: none; }
.dlm-tub { display: block; width: 96px; height: 88px; }
.dlm-tub-a { fill: var(--c-seal); }
.dlm-tub-b { fill: var(--c-lamp); }
.dlm-rim { fill: var(--c-lamp); stroke: var(--c-seal-hi); stroke-width: 1.4; }
/* Reduce Motion: the tub, still, over the top of the screen for a moment */
.dlm-still { position: fixed; z-index: 2147483000; transform: translateX(-50%); pointer-events: none; }

/* ---------------------------------------------------------------- the flipbook behind the logo */
/* the mark steps aside while its book plays (and comes straight back if anything ends it) */
.brand-mark.dlm-hide { opacity: 0 !important; }
/* a long press on the mark is a hold, never the system's image menu or a text selection */
#device .app-header .brand-mark, #device .welcome-brand .brand-mark, #device .auth-brand .brand-mark { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.dlm-flip { position: fixed; z-index: 2147483000; pointer-events: none; will-change: transform, opacity; }
.dlm-flip-glow { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(closest-side, var(--tint-glow), transparent); opacity: .55; }
.dlm-flip-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* the word behind it (lane VOICE, 13 October 2026): the dictionary's "triptych", beside the book for a few seconds
   (its type: ds-you-settings.css .tw). A raised card on the page, never touchable. */
.dlm-define { position: fixed; z-index: 2147483000; box-sizing: border-box; padding: 14px 16px 13px; pointer-events: none; -webkit-user-select: none; user-select: none;
  border-radius: var(--r-card); background: var(--c-stage-raised); box-shadow: inset 0 0 0 1px var(--c-line-strong), var(--e-3); }
.dlm-fl-ink { fill: var(--c-stage); stroke: var(--c-label-1); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.dlm-fl-ink .dlm-fl-line { fill: none; }
.dlm-fl-ink .dlm-fl-band { stroke: none; fill: var(--c-stage); }
.dlm-fl-ink .dlm-fl-hole { fill: var(--c-label-2); stroke: none; }
.dlm-fl-ink .dlm-fl-arch { fill: var(--c-seal); stroke: var(--c-seal-hi); stroke-width: 2.2; }

/* ---------------------------------------------------------------- the projector start's switch: the Settings row
   is account-settings.js switchRow("projector"); its icon is ds-you-settings.js "experience-projector". */

/* ===== prototype-src/game-shell.css ===== */
/* TRIPTIC Commute Corner: the shared game shell (17 October 2026; behaviour game-shell.js, window.TRIPTIC_GAME_SHELL; record
   hub/docs/COMMUTE-CORNER-2026-10.md). Not a ds-* file: it may use its own values; type sizes go through var(--type-unit) so the
   text-size setting scales them; every duration and curve is a motion token; one loop, the typing field's caret (gs-caret: a state,
   opacity only, steady under Reduce Motion and Low Power).

   ONE LAYOUT, EACH GAME ITS OWN WORLD. The header, the rules card, How to play and the result are laid out and spaced the same in every
   game (a 4/8 pt grid; radii 12 for pictures, 14 for buttons and cards, 20 for the sheet; every target 44 pt or more). The colours,
   the type and the ornaments are the game's own, given through custom properties on its theme class (.xc-theme, .tg-theme, .ec-theme, defined in the
   game's own stylesheet and set on the game's root and on the room's rule card):
     --gs-bg        the game's ground (the start card and the sheet sit on it)      --gs-sheet     the How to play sheet
     --gs-ink       text                --gs-dim  secondary text   --gs-mute  quiet text            --gs-line   hairlines
     --gs-number    the issue number under the title (default: --gs-mute lifted 45% toward --gs-ink; a game need not set it)
     --gs-accent    the game's one colour (the rank line, the stamp, the numbers)   --gs-panel     the ground of a rule picture
     --gs-btn       the primary button's fill    --gs-on-btn  its text               --gs-title-font / -weight / -track / -case
     --gs-big-font  the result's display face    --gs-ui-font  the controls' face */

.gs {
  --gs-bg: #0c0c10; --gs-sheet: #16161c; --gs-ink: #f4f4f8; --gs-dim: rgb(244 244 248 / .72); --gs-mute: rgb(244 244 248 / .5); --gs-line: rgb(255 255 255 / .16);
  --gs-accent: #c4b5fd; --gs-panel: rgb(255 255 255 / .06); --gs-btn: #f4f4f8; --gs-on-btn: #0c0c10; --gs-cost: #f0a39a;
  --gs-title-font: var(--font-ui, system-ui, sans-serif); --gs-title-weight: 600; --gs-title-track: .02em; --gs-title-case: none;
  --gs-big-font: var(--font-display, "Fraunces TRIPTIC", system-ui, sans-serif); --gs-ui-font: var(--font-ui, system-ui, -apple-system, sans-serif);
}
.gs [hidden] { display: none !important; }
/* a game's root never scrolls sideways, not even programmatically (a focused field or a wide lamp once nudged Cross Cut 24 pt left,
   with How to play cut off at the right): clip, not hidden, so no scroll container exists to be scrolled */
.gs.gs { overflow: clip; }

/* ===================================================================== the header: x, the title and its number, ? and the clock */
.gs-head { position: relative; z-index: 6; flex: none; display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px; align-items: center; min-height: 56px; box-sizing: border-box;
  padding: max(4px, env(safe-area-inset-top, 0px)) 8px 4px; color: var(--gs-ink); font-family: var(--gs-ui-font); }
.gs .gs-x, .gs .gs-help { appearance: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--gs-dim); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.gs-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.gs-help > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; font: 700 calc(14 * var(--type-unit, 1px))/1 var(--gs-ui-font); }
.gs .gs-x:focus-visible, .gs .gs-help:focus-visible, .gs .gs-btn:focus-visible, .gs .gs-quiet:focus-visible, .gs .gs-rank-locked:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 2px; }
.gs-title { display: grid; justify-items: center; gap: 2px; min-width: 0; text-align: center; }
.gs-name { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--gs-title-weight) calc(20 * var(--type-unit, 1px))/1.1 var(--gs-title-font); letter-spacing: var(--gs-title-track); text-transform: var(--gs-title-case); color: var(--gs-ink); }
/* the header's title never outgrows its column (a 320 phone at the largest text): it scales with the text size up to 6% of the width */
.gs-name { font-size: min(calc(20 * var(--type-unit, 1px)), 6vw); }
.gs-no { font: 600 calc(11 * var(--type-unit, 1px))/1.2 var(--gs-ui-font); letter-spacing: .16em; text-transform: uppercase; color: var(--gs-number, color-mix(in srgb, var(--gs-mute), var(--gs-ink) 45%)); font-variant-numeric: tabular-nums; }
/* (iPhone QA 2, 5 November 2026; the owner) the "No. 20" under a game's title: the game's own quiet colour lifted toward its ink
   until it reads at its 11pt (4.5:1 or more on every game's header), worked out where it is drawn so each game's own pair is used */
@media (max-width: 359px) { .gs-head { grid-template-columns: 88px minmax(0, 1fr) 88px; } }   /* a 320 phone: the title's column gets the room */
.gs-right { display: flex; align-items: center; justify-content: flex-end; gap: 0; }
.gs-left { display: flex; align-items: center; gap: 0; }
/* a solid backdrop in the game's ground once something has scrolled beneath the header (game-shell.js toggles is-over) */
.gs-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gs-head-bg, var(--gs-bg)); box-shadow: 0 1px 0 var(--gs-line), 0 8px 18px rgb(0 0 0 / .35); opacity: 0; pointer-events: none; transition: opacity var(--motion-fast) var(--motion-curve); }
.gs-head.is-over::before { opacity: 1; }
/* (27 October 2026) a soft band under the header while something is scrolled beneath it: what passes under fades out, never a hard cut */
.gs-headfade { position: absolute; left: 0; right: 0; top: 100%; height: 22px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, var(--gs-head-bg, var(--gs-bg)) 0%, color-mix(in srgb, var(--gs-head-bg, var(--gs-bg)) 55%, transparent) 45%, transparent 100%);
  transition: opacity var(--motion-fast) var(--motion-curve); }
.gs-head.is-over .gs-headfade { opacity: 1; }
.gs .gs-statsbtn { appearance: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--gs-dim); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.gs-statsbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.gs .gs-statsbtn:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 2px; }
/* (CORNER PRESS, 4 November 2026) in the app these are pressed by its one press (ds-core.js .ds-pressed: in at the touch, one spring
   back at the click); the :active scales below (on their own clocks, WebKit's :active late and gone at the lift) pressed them a
   second time inside it, so they only stand in where that press is not running (html:not(.ds)) */
html:not(.ds) .gs .gs-x:active, html:not(.ds) .gs .gs-help:active, html:not(.ds) .gs .gs-statsbtn:active { transform: scale(.92); }
.gs .gs-x, .gs .gs-help, .gs .gs-statsbtn { transition: transform var(--motion-press) var(--motion-curve); }
.gs-clock { min-width: 44px; padding-right: 4px; text-align: right; font: 600 calc(15 * var(--type-unit, 1px))/1 var(--gs-ui-font); font-variant-numeric: tabular-nums; color: var(--gs-dim); transition: opacity var(--motion-fast) var(--motion-curve); }
.gs.gs-paused .gs-clock { opacity: .45; }
/* (20 October 2026, the owner's hint rules) a cost lands on the clock: the number has already jumped; a small "+20s" rises off it */
.gs-clockwrap { position: relative; display: inline-flex; }
.gs-plus { position: absolute; right: 4px; bottom: 100%; margin-bottom: -2px; font: 700 calc(12 * var(--type-unit, 1px))/1 var(--gs-ui-font); font-variant-numeric: tabular-nums; color: var(--gs-cost); white-space: nowrap; pointer-events: none; animation: gs-plus-rise var(--motion-ceremony) var(--motion-curve) both; }
.gs-plus.is-minus { color: var(--gs-accent); }
@keyframes gs-plus-rise { 0% { opacity: 0; transform: translateY(14px); } 18% { opacity: 1; transform: translateY(6px); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); } }
.gs-sr-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ===================================================================== the rule panels: an SVG picture and one line, three of them */
.gs-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gs-rule { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; }
.gs-art { display: block; width: 96px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--gs-panel); box-shadow: inset 0 0 0 1px var(--gs-line); color: var(--gs-ink); }
.gs-art svg { display: block; width: 100%; height: 100%; }
.gs-rule-n { position: absolute; left: -6px; top: -6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gs-accent); color: var(--gs-on-btn); font: 700 calc(11 * var(--type-unit, 1px))/1 var(--gs-ui-font); font-variant-numeric: tabular-nums; }
.gs-rule-line { margin: 0; font: 500 calc(16 * var(--type-unit, 1px))/1.35 var(--gs-ui-font); color: var(--gs-ink); text-wrap: pretty; }
/* the pictures' parts (game-shell.js and each game's rules use these classes, so every picture takes the game's palette) */
.gs-art .i { fill: var(--gs-ink); } .gs-art .d { fill: var(--gs-dim); } .gs-art .m { fill: var(--gs-mute); } .gs-art .a { fill: var(--gs-accent); }
.gs-art .p { fill: var(--gs-panel); } .gs-art .l { fill: var(--gs-line); } .gs-art .w { fill: var(--gs-bg); }
.gs-art .si { fill: none; stroke: var(--gs-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gs-art .sd { fill: none; stroke: var(--gs-dim); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gs-art .sa { fill: none; stroke: var(--gs-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gs-art .t { fill: var(--gs-ink); font: 700 9px/1 var(--gs-ui-font); }
.gs-art .ta { fill: var(--gs-accent); font: 700 10px/1 var(--gs-ui-font); }
.gs-rules.is-compact { gap: 8px; }
.gs-rules.is-compact .gs-rule { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
.gs-rules.is-compact .gs-art { width: 72px; height: 54px; border-radius: 10px; }
.gs-rules.is-compact .gs-rule-n { display: none; }
.gs-rules.is-compact .gs-rule-line { font-size: calc(14 * var(--type-unit, 1px)); }

/* ===================================================================== before play: the rules card (first time) and the start card */
.gs-start { position: absolute; left: 0; right: 0; bottom: 0; top: calc(max(4px, env(safe-area-inset-top, 0px)) + 56px); z-index: 20; overflow-y: auto; overscroll-behavior: contain;
  display: grid; align-content: safe center; justify-items: center; padding: 24px 24px max(24px, env(safe-area-inset-bottom, 0px)); box-sizing: border-box;
  background: var(--gs-bg); color: var(--gs-ink); font-family: var(--gs-ui-font); transition: opacity var(--motion-normal) var(--motion-curve); }
.gs-start.is-gone { opacity: 0; pointer-events: none; }
/* (29 October 2026) while the landing stands over it, the board keeps its place but is not drawn (game-shell.js start) */
.gs.gs-under-start > :not(.gs-head, .gs-start, .gs-sheet-layer, .gs-plus) { opacity: 0; }
.gs-start-in { display: grid; gap: 16px; width: 100%; max-width: 380px; }
.gs-eyebrow { margin: 0; text-align: center; font: 600 calc(12 * var(--type-unit, 1px))/1.3 var(--gs-ui-font); letter-spacing: .2em; text-transform: uppercase; color: var(--gs-accent); }
.gs-start-title { margin: -8px 0 8px; text-align: center; font: var(--gs-title-weight) calc(32 * var(--type-unit, 1px))/1.1 var(--gs-title-font); letter-spacing: var(--gs-title-track); text-transform: var(--gs-title-case); color: var(--gs-ink); text-wrap: balance; }
.gs-start-title.is-big { font-size: calc(44 * var(--type-unit, 1px)); margin-bottom: 0; }
/* (10 November 2026, the owner, Daily Cryptic start screen, then "the other three the same way"; the coordinator: keep the landing's big
   title) before Play each thing is said once: the game's name in the card's big title (the header's name stays for VoiceOver only
   while the card is up, and comes back with Play), the issue number in the card's eyebrow (the header's number steps aside while that
   card is up), and no clock until Play (it would only say 0:00) */
.gs.gs-under-start .gs-head .gs-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gs.gs-under-start .gs-clockwrap { visibility: hidden; }
.gs.gs-start-no .gs-head .gs-no { display: none; }
.gs-start .gs-rules { gap: 16px; margin: 0 0 8px; padding-left: 6px; }
.gs-tagline { margin: 0 0 8px; text-align: center; font: 400 calc(17 * var(--type-unit, 1px))/1.4 var(--gs-big-font); color: var(--gs-dim); text-wrap: balance; }
/* (28 October 2026, the owner: "the Cross Cut and Triptych landings are half empty ... Make the four landings share one layout") THE ONE
   LANDING: the number, the name, the game's hero picture (Freefall's painted world, Triptych's three frames, Cross Cut's grid: the
   game's own poster from the room, drawn large), one line, "Best · Streak", the free days, Play, How to play; the column stands in the
   middle of the space. The hero is Freefall's size and shape everywhere: 3:2, at most 360pt wide, 20pt corners. */
.gs-start.has-hero .gs-start-in { gap: 14px; margin-block: auto; }
.gs-start.has-hero :is(.gs-goal, .gs-demo, .gs-rules) { display: none; }
.gs-start.has-hero .gs-start-title { margin: -4px 0 0; }
.gs-start.has-hero .gs-tagline { justify-self: center; margin: 0; max-width: 340px; color: var(--gs-ink); opacity: .94; }
.gs-hero { position: relative; justify-self: center; margin: 0; width: min(100%, 360px); aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; contain: paint; background: var(--gs-panel, rgb(255 255 255 / .06));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 14px 30px rgb(0 0 0 / .3); }
.gs-hero > * { position: absolute; inset: 0; }
@media (max-height: 600px) { .gs-hero { width: min(100%, 240px); } }   /* an SE: the landing on one screen with its hero */
@media (min-width: 744px) and (min-height: 744px) { html:not([data-duo-book]) .gs-start.has-hero .gs-start-in { zoom: 1.2; } }
.gs-strip { justify-self: center; margin: 0; padding: 8px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--gs-line); font: 600 calc(14 * var(--type-unit, 1px))/1.3 var(--gs-ui-font); color: var(--gs-ink); font-variant-numeric: tabular-nums; text-align: center; }
/* (20 October 2026) the free plays on the start card, and the kind locked state with the TRIPTIC+ invitation */
.gs-allow { justify-self: center; margin: -4px 0 0; font: 500 calc(14 * var(--type-unit, 1px))/1.35 var(--gs-ui-font); color: var(--gs-dim); text-align: center; text-wrap: balance; font-variant-numeric: tabular-nums; }
.gs-lockmark { justify-self: center; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--gs-panel, rgb(255 255 255 / .06)); box-shadow: inset 0 0 0 1px var(--gs-line); color: var(--gs-accent); }
.gs-lockmark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gs-locked-line { margin: 0; text-align: center; font: 500 calc(18 * var(--type-unit, 1px))/1.4 var(--gs-big-font); color: var(--gs-ink); text-wrap: balance; }
/* (10 November 2026, the owner: the world rank is TRIPTIC+) in a free player's statistics sheet, where the rank would be: the locked
   start card's line and button, the button the sheet's full width */
.gs-stats-locked { display: grid; justify-items: stretch; gap: 12px; margin: 4px 0; }
.gs-locked-sub { margin: -8px 0 4px; text-align: center; font: 400 calc(15 * var(--type-unit, 1px))/1.4 var(--gs-ui-font); color: var(--gs-dim); text-wrap: balance; }
.gs .gs-quiet { appearance: none; justify-self: center; min-height: 44px; padding: 0 16px; border: 0; background: none; color: var(--gs-dim); font: 600 calc(15 * var(--type-unit, 1px))/1 var(--gs-ui-font); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gs-line); cursor: pointer; }

/* ===================================================================== buttons (one size, one radius, in every game; .gs before each
   control so a game's own button reset, .xc :where(button), never wins over them) */
.gs .gs-btn { appearance: none; display: flex; white-space: nowrap; align-items: center; justify-content: center; min-height: 52px; margin: 0; padding: 0 16px; box-sizing: border-box; border: 0; border-radius: 14px; cursor: pointer;
  background: none; box-shadow: inset 0 0 0 1px var(--gs-line); color: var(--gs-ink); font: 600 calc(16 * var(--type-unit, 1px))/1.15 var(--gs-ui-font); letter-spacing: .01em; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform var(--motion-press) var(--motion-curve), opacity var(--motion-fast) var(--motion-curve); }
html:not(.ds) .gs .gs-btn:active { transform: scale(.98); }
/* the one press keeps a button's own edge (the secondary's 1px line) and darkens its face a touch; never a box of shade over it */
html.ds .gs .gs-btn.ds-pressed:not(.ds-pressed-bare) { box-shadow: inset 0 0 0 1px var(--gs-line), inset 0 0 0 999px rgb(0 0 0 / .08) !important; }
html.ds .gs .gs-btn.gs-btn-primary.ds-pressed:not(.ds-pressed-bare) { box-shadow: inset 0 0 0 999px rgb(0 0 0 / .1) !important; }
.gs .gs-btn[disabled] { opacity: .55; cursor: default; }
.gs .gs-btn-primary { background: var(--gs-btn); box-shadow: none; color: var(--gs-on-btn); font-weight: 700; }

/* ===================================================================== How to play: a sheet; the clock stops while it is up */
.gs-sheet-layer { position: absolute; inset: 0; z-index: 40; }
.gs-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .6); opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve); }
.gs-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; display: grid; gap: 16px;
  padding: 8px 24px max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px)); border-radius: 20px 20px 0 0; background: var(--gs-sheet); color: var(--gs-ink); font-family: var(--gs-ui-font);
  box-shadow: 0 -12px 32px rgb(0 0 0 / .45), inset 0 1px 0 var(--gs-line); transform: translateY(104%); transition: transform var(--motion-normal) var(--motion-spring, var(--motion-curve)); }
.gs-sheet-layer.is-open .gs-scrim { opacity: 1; }
.gs-sheet-layer.is-open .gs-sheet { transform: none; }
.gs-grip { position: relative; justify-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--gs-line); cursor: pointer; }
/* (20 October 2026) the grip is a handle: a tap on it closes the sheet, a drag from it brings the sheet down; its target is 44pt tall */
.gs-grip::before { content: ""; position: absolute; left: -40px; right: -40px; top: -20px; bottom: -20px; }
.gs-sheet-title { margin: 0; font: var(--gs-title-weight) calc(24 * var(--type-unit, 1px))/1.15 var(--gs-title-font); letter-spacing: var(--gs-title-track); text-transform: var(--gs-title-case); outline: none; }
.gs-sheet-sub { margin: -8px 0 0; font: 500 calc(13 * var(--type-unit, 1px))/1.3 var(--gs-ui-font); color: var(--gs-mute); }
.gs-paused-note { color: var(--gs-accent); }
.gs-sheet .gs-rules { padding-left: 6px; }
.gs-notes { margin: 0; padding: 16px 0 0 18px; border-top: 1px solid var(--gs-line); display: grid; gap: 8px; font: 400 calc(14 * var(--type-unit, 1px))/1.4 var(--gs-ui-font); color: var(--gs-dim); }
.gs-sheet-done { margin-top: 8px; }

/* ===================================================================== the one result layout */
.gs-result { display: grid; justify-items: center; width: 100%; max-width: 400px; margin: 0 auto; box-sizing: border-box; text-align: center; color: var(--gs-ink); font-family: var(--gs-ui-font); }
.gs-res-big { display: grid; justify-items: center; gap: 4px; width: 100%; }
.gs-res-rank { margin-top: 12px; display: flex; justify-content: center; width: 100%; }
.gs-rank { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; min-height: 32px; font: 600 calc(16 * var(--type-unit, 1px))/1.3 var(--gs-ui-font); color: var(--gs-accent); text-wrap: balance; }
.gs-rank-words { display: grid; justify-items: center; gap: 2px; }
.gs-rank-many { display: block; font: 500 calc(13 * var(--type-unit, 1px))/1.3 var(--gs-ui-font); color: var(--gs-dim); font-variant-numeric: tabular-nums; }
.gs-rank-icon { flex: none; display: grid; place-items: center; width: 18px; height: 18px; }
.gs-rank-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gs .gs-rank-locked { appearance: none; min-height: 44px; padding: 0 12px 0 14px; border: 0; border-radius: 999px; background: var(--gs-panel); box-shadow: inset 0 0 0 1px var(--gs-line); color: var(--gs-ink); cursor: pointer; font: 500 calc(15 * var(--type-unit, 1px))/1.25 var(--gs-ui-font); letter-spacing: 0; text-transform: none; max-width: 100%; }
/* one line at the default size in every game (it wrapped in End Credits' bold); larger text may wrap, starting at the left */
.gs .gs-rank-locked .gs-rank-words { min-width: 0; text-align: start; }
.gs-rank-locked .gs-rank-icon { color: var(--gs-accent); }
.gs-rank-unranked { color: var(--gs-mute); font-weight: 500; font-size: calc(15 * var(--type-unit, 1px)); }   /* (10 November 2026) a member's unverified time: plain words, no icon, no button */
.gs-rank-chev { display: grid; place-items: center; width: 16px; height: 16px; color: var(--gs-mute); }
.gs-rank-chev svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gs-res-best { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; font: 600 calc(15 * var(--type-unit, 1px))/1.3 var(--gs-ui-font); color: var(--gs-ink); font-variant-numeric: tabular-nums; }
.gs-stamp { display: inline-block; padding: 4px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--gs-accent); color: var(--gs-accent); font: 800 calc(11 * var(--type-unit, 1px))/1 var(--gs-ui-font); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-4deg); }
.gs-res-streak { margin: 4px 0 0; font: 500 calc(14 * var(--type-unit, 1px))/1.3 var(--gs-ui-font); color: var(--gs-dim); font-variant-numeric: tabular-nums; }
/* (27 October 2026) the result never outgrows a 320 phone at the largest text: one column that may not exceed the width; Share across
   it, then "Share as square" and Done side by side, each on one line, wrapping to a row each when they no longer fit side by side */
.gs-result { grid-template-columns: minmax(0, 1fr); }
.gs-res-acts { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 20px; }
.gs-res-acts .gs-btn { flex: 1 1 auto; }
.gs-res-acts .gs-share { flex-basis: 100%; }
.gs-res-next { margin: 12px 0 0; font: 500 calc(13 * var(--type-unit, 1px))/1.3 var(--gs-ui-font); color: var(--gs-mute); font-variant-numeric: tabular-nums; }
.gs-res-more { width: 100%; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--gs-line); }

/* ===================================================================== the room's "?" sheet: one card per game, each in its own colours */
.gs-rulecard { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: var(--gs-bg); box-shadow: inset 0 0 0 1px var(--gs-line); color: var(--gs-ink); --gs-ui-font: var(--font-ui, system-ui, -apple-system, sans-serif); font-family: var(--gs-ui-font); }
.gs-rulecard-title { margin: 0; font: var(--gs-title-weight) calc(19 * var(--type-unit, 1px))/1.15 var(--gs-title-font); letter-spacing: var(--gs-title-track); text-transform: var(--gs-title-case); color: var(--gs-accent); }

/* ===================================================================== HOW TO PLAY, THE NYT BAR (17 October 2026): the goal in one sentence,
   a worked example that plays itself once, the rules, the controls and the scoring */
.gs-goal { margin: 0; font: 500 calc(17 * var(--type-unit, 1px))/1.4 var(--gs-big-font); color: var(--gs-ink); text-wrap: balance; }
.gs-start .gs-goal { text-align: center; margin-top: -8px; }
.gs-goal.is-small { font-size: calc(15 * var(--type-unit, 1px)); color: var(--gs-dim); }
.gs-how-h { margin: 8px 0 0; font: 700 calc(12 * var(--type-unit, 1px))/1.3 var(--gs-ui-font); letter-spacing: .16em; text-transform: uppercase; color: var(--gs-accent); }
.gs-how-sec { display: grid; gap: 8px; }
.gs-controls { display: grid; gap: 8px; margin: 0; }
.gs-controls > div { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr); gap: 12px; align-items: baseline; }
/* (3 November 2026, the owner: "Looks weird") every row once sized its own key column, so a wide key ("Name the film")
   pushed only its own description over; the rows now share one key column, sized by the widest key, so every
   description starts on the same line */
@supports (grid-template-columns: subgrid) {
  .gs-controls { grid-template-columns: minmax(84px, max-content) minmax(0, 1fr); column-gap: 12px; }
  .gs-controls > div { grid-column: 1 / -1; grid-template-columns: subgrid; }
}
.gs-controls dt { justify-self: start; padding: 4px 8px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--gs-line); background: var(--gs-panel); font: 700 calc(13 * var(--type-unit, 1px))/1.2 var(--gs-ui-font); color: var(--gs-ink); }
.gs-controls dd { margin: 0; font: 400 calc(15 * var(--type-unit, 1px))/1.4 var(--gs-ui-font); color: var(--gs-dim); }
.gs-scoring { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font: 400 calc(15 * var(--type-unit, 1px))/1.4 var(--gs-ui-font); color: var(--gs-dim); }
.gs-scoring li::marker { color: var(--gs-accent); }

/* the worked example: the game's own scene, stepped by data-step (each game's stylesheet moves it, one-shot, on the tokens) */
.gs-demo { position: relative; margin: 0; display: grid; gap: 8px; }
.gs-demo-stage { position: relative; height: 168px; border-radius: 14px; overflow: hidden; background: var(--gs-panel); box-shadow: inset 0 0 0 1px var(--gs-line); color: var(--gs-ink); contain: paint; }
.gs-demo-cap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: calc(40 * var(--type-unit, 1px)); }
.gs-demo-dots { display: flex; gap: 5px; }
.gs-demo-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gs-line); transition: background-color var(--motion-fast) var(--motion-curve), transform var(--motion-fast) var(--motion-curve); }
.gs-demo-dots i.is-on { background: var(--gs-accent); transform: scale(1.3); }
.gs-demo-text { font: 500 calc(15 * var(--type-unit, 1px))/1.35 var(--gs-ui-font); color: var(--gs-ink); text-wrap: pretty; }
.gs-demo-list { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gs .gs-demo-again { appearance: none; position: absolute; right: 8px; top: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; font: 600 calc(13 * var(--type-unit, 1px))/1 var(--gs-ui-font); cursor: pointer; }
.gs-demo-again[hidden] { display: none; }
/* Reduce Motion: the last frame, and every step written out under it */
.gs-demo.is-still .gs-demo-cap { display: none; }
.gs-demo.is-still .gs-demo-list { position: static; width: auto; height: auto; margin: 0; padding: 0 0 0 20px; overflow: visible; clip-path: none; white-space: normal; display: grid; gap: 4px; font: 400 calc(14 * var(--type-unit, 1px))/1.4 var(--gs-ui-font); color: var(--gs-dim); }
/* (iPhone QA 2, 5 November 2026; the owner) the first landing says its rules once, in the illustrated rows: the worked example's
   steps, written out as a list when the example stands still (Reduce Motion, Low Power), stay for VoiceOver only there; the
   How to play sheet keeps the list */
.gs-start .gs-demo.is-still .gs-demo-list { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* ...and on a short screen (an iPhone SE) the landing is one screen with Play on it: the room between the blocks a little closer,
   the worked example drawn smaller, and its caption (the same steps again, one at a time) left to VoiceOver, so the rules are the
   illustrated rows alone. A taller phone keeps the caption. */
@media (max-height: 700px) {
  html:not([data-duo-spread]) .gs-start:not(.has-hero) { padding-top: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
  html:not([data-duo-spread]) .gs-start:not(.has-hero) .gs-start-in { gap: 10px; }
  html:not([data-duo-spread]) .gs-start:not(.has-hero) .gs-demo-stage { zoom: .72; }
  html:not([data-duo-spread]) .gs-start:not(.has-hero) .gs-demo-cap { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html:not([data-duo-spread]) .gs-start:not(.has-hero) .gs-rules { gap: 8px; margin-bottom: 0; }
}
.gs-start .gs-demo-stage { height: 152px; }
/* (final review R1-04 / R6-05, owner 14 November 2026) THE FIRST HOW TO PLAY CARD: Play is pinned at the foot of the card, on screen
   on every phone and text size without a scroll; the rules scroll above it and fade under the foot. Where everything fits, the foot
   sits where Play always sat. The solid shadow below fills the gap down to the screen's edge (outer shadows paint only outside it). */
.gs-start-foot { position: sticky; bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 1; display: grid; margin: -8px -24px 0; padding: 18px 24px 0;
  background: linear-gradient(to bottom, transparent, var(--gs-bg) 16px); box-shadow: 0 48px 0 0 var(--gs-bg); }

/* ===================================================================== STATISTICS: four numbers, the best, the rank, the distribution */
.gs-stats { display: grid; gap: 16px; text-align: left; color: var(--gs-ink); }
.gs-stats-h { margin: 0; text-align: center; font: 700 calc(12 * var(--type-unit, 1px))/1.3 var(--gs-ui-font); letter-spacing: .16em; text-transform: uppercase; color: var(--gs-accent); }
.gs-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; }
.gs-nums > div { display: grid; justify-items: center; align-content: start; gap: 2px; text-align: center; }
.gs-nums dd { margin: 0; font: 600 calc(32 * var(--type-unit, 1px))/1.05 var(--gs-big-font); color: var(--gs-ink); font-variant-numeric: tabular-nums; }
.gs-nums dt { font: 500 calc(12 * var(--type-unit, 1px))/1.2 var(--gs-ui-font); color: var(--gs-dim); text-wrap: balance; overflow-wrap: normal; hyphens: none; }
/* (27 October 2026) a 320 phone or large text: the four numbers stay one row; a long label takes two even lines, never a broken word */
@media (max-width: 359px) { .gs-nums dt { font-size: calc(11 * var(--type-unit, 1px)); } .gs-nums { gap: 2px; } }
.gs-pb { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--gs-panel); box-shadow: inset 0 0 0 1px var(--gs-line); font: 500 calc(14 * var(--type-unit, 1px))/1.3 var(--gs-ui-font); color: var(--gs-dim); }
.gs-pb b { font: 700 calc(16 * var(--type-unit, 1px))/1.2 var(--gs-ui-font); color: var(--gs-ink); font-variant-numeric: tabular-nums; }
.gs-rank-slot { display: flex; justify-content: center; }
.gs-rank-slot[hidden] { display: none; }
.gs-dist-h { margin: 0; font: 700 calc(12 * var(--type-unit, 1px))/1.3 var(--gs-ui-font); letter-spacing: .16em; text-transform: uppercase; color: var(--gs-dim); }
.gs-dist { list-style: none; margin: -6px 0 0; padding: 0; display: grid; gap: 6px; }
/* (27 October 2026) label | proportional bar | count: every count in one column; a zero row a hairline stub; today's row the accent
   bar, its label and count in full ink (the same in the sheet and under the result) */
.gs-bar { display: grid; grid-template-columns: minmax(64px, 30%) minmax(0, 1fr); align-items: center; gap: 10px; }
.gs-bar-l { font: 600 calc(13 * var(--type-unit, 1px))/1.2 var(--gs-ui-font); color: var(--gs-dim); text-align: right; font-variant-numeric: tabular-nums; }
.gs-bar-track { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) calc(2.4em + 8px); align-items: center; min-height: 22px; font-size: calc(13 * var(--type-unit, 1px)); }
.gs-bar-track i { display: block; width: var(--w, 0%); min-width: 2px; height: 22px; border-radius: 4px; background: var(--gs-line); }
.gs-bar-track b { padding-left: 8px; text-align: left; font: 700 calc(13 * var(--type-unit, 1px))/1 var(--gs-ui-font); color: var(--gs-dim); font-variant-numeric: tabular-nums; }
.gs-bar.is-today .gs-bar-track i { background: var(--gs-accent); }
.gs-bar.is-today .gs-bar-l, .gs-bar.is-today .gs-bar-track b { color: var(--gs-ink); font-weight: 800; }
.gs-bar.is-zero .gs-bar-track i { width: 2px; height: 14px; border-radius: 1px; opacity: .8; }
.gs-bar.is-zero .gs-bar-track b { color: var(--gs-mute); }
.gs-stats-none { margin: 0; text-align: center; font: 400 calc(14 * var(--type-unit, 1px))/1.4 var(--gs-ui-font); color: var(--gs-mute); }
.gs-res-stats { width: 100%; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--gs-line); }
.gs-stats.is-compact .gs-nums dd { font-size: calc(26 * var(--type-unit, 1px)); }

/* ===================================================================== A HINT, its cost printed on it */
.gs .gs-hint { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 8px 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--gs-panel); box-shadow: inset 0 0 0 1px var(--gs-line); color: var(--gs-ink); font: 600 calc(14 * var(--type-unit, 1px))/1.1 var(--gs-ui-font);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform var(--motion-press) var(--motion-curve), opacity var(--motion-fast) var(--motion-curve); }
html:not(.ds) .gs .gs-hint:active { transform: scale(.96); }
/* the games' own buttons that also pressed themselves by :active (Triptych's Name it, Cross Cut's help menu): one press in the app */
html.ds :is(.tg-go, .xc-mi):active { transform: none; }
.gs .gs-hint[disabled] { opacity: .45; cursor: default; }
.gs .gs-hint:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 2px; }
.gs-hint-i { display: grid; place-items: center; width: 18px; height: 18px; color: var(--gs-accent); }
.gs-hint-i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gs-cost { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border-radius: 999px; background: var(--gs-accent); color: var(--gs-on-btn); font: 800 calc(12 * var(--type-unit, 1px))/1 var(--gs-ui-font); letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* ===================================================================== THE IN-GAME KEYBOARD (End Credits, Triptych; touch screens) */
.gs-kb { display: grid; gap: 8px; padding: 8px 4px max(8px, env(safe-area-inset-bottom, 0px)); box-sizing: border-box; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none; }
.gs-krow { display: flex; justify-content: center; gap: 5px; }
.gs-krow-2 { padding: 0 4.5%; }
.gs .gs-key { appearance: none; position: relative; flex: 1 1 0; min-width: 0; max-width: 44px; height: 46px; margin: 0; padding: 0; border: 0; border-radius: 7px; cursor: pointer;
  background: var(--gs-key, rgb(255 255 255 / .16)); color: var(--gs-ink); box-shadow: 0 1px 0 rgb(0 0 0 / .45); font: 600 calc(19 * var(--type-unit, 1px))/1 var(--gs-ui-font);
  -webkit-tap-highlight-color: transparent; touch-action: none; transition: background-color var(--motion-press) var(--motion-curve), transform var(--motion-press) var(--motion-curve); }
.gs .gs-key.is-fn { flex: 1.5 1 0; max-width: 66px; background: var(--gs-key-fn, rgb(255 255 255 / .08)); font-size: calc(14 * var(--type-unit, 1px)); }
.gs .gs-key.is-space { flex: 4 1 0; max-width: none; }
.gs .gs-key.is-enter { flex: 2 1 0; max-width: none; background: var(--gs-btn); color: var(--gs-on-btn); font-weight: 700; }
.gs .gs-key.is-enter[disabled] { opacity: .45; }
.gs .gs-key[hidden] { display: none; }
.gs .gs-key svg { width: 24px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gs .gs-key.is-down { background: var(--gs-accent); color: var(--gs-on-btn); transform: translateY(1px); }
.gs-pop { position: absolute; left: 50%; bottom: calc(100% + 6px); display: grid; place-items: center; width: 44px; height: 52px; margin-left: -22px; border-radius: 10px; background: var(--gs-sheet); color: var(--gs-ink); box-shadow: 0 6px 16px rgb(0 0 0 / .5), inset 0 0 0 1px var(--gs-line);
  font: 700 calc(26 * var(--type-unit, 1px))/1 var(--gs-ui-font); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity var(--motion-press) var(--motion-curve), transform var(--motion-press) var(--motion-curve); }
.gs-key.is-down .gs-pop { opacity: 1; transform: none; }
.gs-krow-1 .gs-key:first-child .gs-pop { left: 0; margin-left: 0; }
.gs-krow-1 .gs-key:last-child .gs-pop { left: auto; right: 0; margin-left: 0; }
/* the field the keyboard types into: the input holds the value; on a touch screen a mirror shows it and a caret (the input is never
   focused there, so the phone's own keyboard never comes up) */
.gs-field { position: relative; }
.gs .gs-in-kb { pointer-events: none; color: transparent !important; caret-color: transparent; -webkit-text-fill-color: transparent; }
.gs .gs-in-kb::placeholder { color: transparent; -webkit-text-fill-color: transparent; }
.gs-mirror { position: absolute; inset: 0; display: flex; align-items: center; min-width: 0; padding: var(--gs-mirror-pad, 0 16px); box-sizing: border-box; overflow: hidden; pointer-events: none; white-space: pre; font: inherit; color: var(--gs-ink); }
.gs-mirror.is-empty::before { content: attr(data-placeholder); order: 2; margin-left: 2px; color: var(--gs-mute); font-style: italic; overflow: hidden; text-overflow: ellipsis; }
.gs-mirror-t { min-width: 0; overflow: hidden; text-overflow: clip; direction: ltr; }
.gs-caret { flex: none; order: 1; width: 2px; height: 1.2em; margin-left: 1px; border-radius: 1px; background: var(--gs-accent); animation: gs-caret 1.1s steps(1, end) infinite; }
.gs-mirror.is-empty .gs-caret { margin-left: 0; }
.gs-mirror-t { order: 0; }
/* (20 October 2026, the owner: "caps/shift stays on") one case only: what is typed shows in capitals, from the game's keys or a
   hardware keyboard alike; the placeholder keeps its own case */
.gs-mirror-t, .gs-field input:not(:placeholder-shown) { text-transform: uppercase; }
@keyframes gs-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* ===================================================================== Reduce Motion and Low Power: nothing moves; changes are instant */
html:is(.reduce-motion, .mo-low-power) :is(.gs-sheet, .gs-scrim, .gs-start, .gs-btn, .gs-clock, .gs-key, .gs-pop, .gs-hint, .gs-demo *), #device.manual-reduced-motion :is(.gs-sheet, .gs-scrim, .gs-start, .gs-btn, .gs-clock, .gs-key, .gs-pop, .gs-hint, .gs-demo *) { transition: none; }
html:is(.reduce-motion, .mo-low-power) .gs-caret, #device.manual-reduced-motion .gs-caret { animation: none; }
html:is(.reduce-motion, .mo-low-power) .gs-plus, #device.manual-reduced-motion .gs-plus { animation: none; opacity: 1; transform: translateY(6px); }
html:is(.reduce-motion, .mo-low-power) .gs-btn:active, #device.manual-reduced-motion .gs-btn:active { transform: none; }
@media (prefers-reduced-motion: reduce) { .gs-sheet, .gs-scrim, .gs-start, .gs-btn, .gs-clock, .gs-key, .gs-pop, .gs-hint, .gs-demo * { transition: none; } .gs-btn:active { transform: none; } .gs-caret { animation: none; } .gs-plus { animation: none; opacity: 1; transform: translateY(6px); } }

/* (20 October 2026, lane B's finding: on the smallest iPhone at the largest text End Credits' keyboard covered its hint and Pass) the
   keyboard never grows with the text size (its labels are capped) and on a short screen it is lower: 40pt keys, closer rows; the
   game's own area above it (sized from the dock's height) keeps more room for what sits over the keys */
.gs .gs-key { font-size: min(calc(19 * var(--type-unit, 1px)), 23px); }
.gs .gs-key.is-fn { font-size: min(calc(14 * var(--type-unit, 1px)), 17px); }
@media (max-height: 700px) {
  .gs-kb { gap: 6px; padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); }
  .gs .gs-key { height: 40px; }
}
/* (20 October 2026) the keys take no browser gesture (two thumbs are never a pinch), over the design system's rule for every button */
html.ds .gs .gs-kb .gs-key { touch-action: none; }

/* ===================================================================== press and hold a poster to see it larger (28 October 2026, the owner;
   game-shell.js posterHold, on Triptych's three). The view: the poster the game already loaded, large and centred over a dimmed backdrop;
   it lifts from its place (transform and opacity), a fade under Reduce Motion. While a finger holds it, nothing in it takes a tap. */
.gs-holdable { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.gs-holdable img { -webkit-touch-callout: none; pointer-events: none; }
.gs .gs-enlarge { position: absolute; top: 4px; right: 4px; z-index: 3; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: rgb(0 0 0 / .6); color: #fff; cursor: pointer; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.gs .gs-enlarge:focus-visible { clip-path: none; opacity: 1; pointer-events: auto; outline: 2px solid var(--c-focus, var(--c-seal-hi)); outline-offset: 2px; }
.gs .gs-enlarge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gs-enlarged { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.gs-enlarged.is-sticky { pointer-events: auto; }
.gs-enlarged-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .72); opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve); }
.gs-enlarged-pic { position: absolute; margin: 0; border-radius: 10px; overflow: hidden; transform-origin: 0 0; opacity: 0; box-shadow: 0 24px 60px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .18);
  transition: transform var(--motion-normal) var(--motion-curve), opacity var(--motion-fast) var(--motion-curve); }
.gs-enlarged-pic img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.gs-enlarged.is-on .gs-enlarged-scrim, .gs-enlarged.is-on .gs-enlarged-pic { opacity: 1; }
.gs-enlarged.is-fade .gs-enlarged-pic { transition: opacity var(--motion-fast) var(--motion-curve); transform: none !important; }
.gs-enlarged-x { position: absolute; top: calc(max(4px, env(safe-area-inset-top, 0px)) + 8px); right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .14); color: #fff; cursor: pointer; }
.gs-enlarged-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.gs-enlarged-x:focus-visible { outline: 2px solid var(--c-focus, var(--c-seal-hi)); outline-offset: 2px; }
html:is(.reduce-motion, .mo-low-power) .gs-enlarged *, #device.manual-reduced-motion .gs-enlarged * { transition-duration: var(--motion-fast) !important; }

/* ===== prototype-src/commute-corner.css ===== */
/* TRIPTIC Commute Corner: the ticket on Today and the games room (lane 1, shell). Behaviour: commute-corner.js (window.TRIPTIC_COMMUTE);
   record hub/docs/COMMUTE-CORNER-2026-10.md. Not a ds-* file: it may use its own colours, but type sizes go through var(--type-unit)
   so the text-size setting scales them, and every duration and curve is a motion token.

   THE TICKET (owner, 17 October 2026: "a button you click to go into the games room"). Today's one games thing: an ADMIT ONE paper
   ticket in the house's ticket look (the stingers' ticket: cream paper, a thin red rule, ADMIT ONE in red; the Cryptic's ticket: a
   half-round notch each side where the stub tears off). The main part and the stub are two pieces of the same paper, each with its
   own half notches, so the stub can tear away alone (commute-corner.js enter(): transform and opacity, MO.normal). Four small bulbs
   on the stub, one per game, lit as each is played today. On Today's entrance (.dt-arrive) the lit ones come on in a run, once.

   THE ROOM. A cinema foyer, not a carousel: a striped wine-dark wall with the marquee's warm light falling on it, a lit marquee
   over it (COMMUTE CORNER in changeable letters on a lit board, ringed with bulbs: a quarter of them for each game played today,
   all of them when the day is complete), four poster frames on the wall in a 2 x 2 (brass cases, a picture light over each, the
   game's own cover inside, SCREEN n over it, a small stub under it with today's state), Flick at the side as the usher, the count
   and the streak at the foot. ONE living thing: the marquee's chasing lights (@keyframes ccn-chase, opacity and transform; the sign is a
   .mo-living host, paused off screen by motion-living.js; still under Reduce Motion and Low Power). The day's moment is a one-shot
   (ccn-on: the bulbs come on in a run round the sign). A 390 x 844 phone shows it all without scrolling; at 320 wide and the
   largest text the room scrolls inside itself and nothing is clipped. An iPhone Duo's inner display (744 wide and more): the four
   posters stand in one row, two each side of the fold, and nothing (no poster, no letter) stands on the fold band. */

/* ===================================================================== the ticket on Today */
html.ds .ccn-ticket {
  --tk-paper: #f1e3c4; --tk-paper-lo: #e6d3ad; --tk-ink: #2b1b10; --tk-red: #b3322d; --tk-hole: var(--c-stage, #0a0a10);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 98px; width: 100%; min-height: 96px; margin: 0; padding: 0;
  border: 0; background: none; color: var(--tk-ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
html.ds .ccn-ticket:focus-visible { outline: 2px solid var(--c-focus, var(--c-seal-hi)); outline-offset: 4px; border-radius: 12px; }
html.ds .ccn-tk-main, html.ds .ccn-tk-stub { position: relative; overflow: hidden; box-sizing: border-box; background: linear-gradient(176deg, var(--tk-paper), var(--tk-paper-lo)); box-shadow: 0 10px 18px -10px rgb(0 0 0 / .7); }
/* the half notches where the stub tears off, one on each piece, top and bottom */
/* (each half drawn inside its own piece, so nothing hangs past the paper) */
html.ds .ccn-tk-main::before, html.ds .ccn-tk-main::after, html.ds .ccn-tk-stub::before, html.ds .ccn-tk-stub::after { content: ""; position: absolute; width: 8px; height: 16px; background: var(--tk-hole); }
html.ds .ccn-tk-main::before, html.ds .ccn-tk-main::after { right: 0; border-radius: 8px 0 0 8px; }
html.ds .ccn-tk-stub::before, html.ds .ccn-tk-stub::after { left: 0; border-radius: 0 8px 8px 0; }
html.ds .ccn-tk-main::before, html.ds .ccn-tk-stub::before { top: -8px; }
html.ds .ccn-tk-main::after, html.ds .ccn-tk-stub::after { bottom: -8px; }
html.ds .ccn-tk-main { display: grid; align-content: center; gap: 2px; padding: 12px 16px 12px 18px; border-radius: 12px 0 0 12px; }
/* the thin red rule printed round the main part */
html.ds .ccn-tk-main > .ccn-tk-admit::before { content: ""; position: absolute; inset: 6px 10px 6px 6px; border: 1px solid rgb(179 50 45 / .55); border-radius: 6px; pointer-events: none; }
html.ds .ccn-tk-admit { font: 700 calc(11 * var(--type-unit))/calc(14 * var(--type-unit)) var(--font-ui); letter-spacing: .26em; text-transform: uppercase; color: var(--tk-red); }
/* (the name is a display line: it grows with the text size until it fills the ticket, then wraps rather than overflow) */
html.ds .ccn-tk-name { font: 600 min(calc(27 * var(--type-unit)), 8.4cqw)/1.08 "Credits TRIPTIC", var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--tk-ink); overflow-wrap: anywhere; text-wrap: balance; }
html.ds .ccn-tk-line { font: 500 calc(13 * var(--type-unit))/calc(17 * var(--type-unit)) var(--font-ui); color: rgb(43 27 16 / .74); text-wrap: pretty; }
/* the stub: a perforation down its left edge, four bulbs, the serial; it pivots off its lower left corner when torn */
html.ds .ccn-tk-stub { display: grid; align-content: center; justify-items: center; gap: 10px; padding: 10px 6px 10px 12px; border-radius: 0 12px 12px 0; transform-origin: 0 100%;
  background: radial-gradient(circle, rgb(43 27 16 / .34) 0 1.2px, transparent 1.6px) 1px 0 / 3px 7px repeat-y, linear-gradient(176deg, var(--tk-paper), var(--tk-paper-lo)); }
html.ds .ccn-tk-bulbs { display: flex; gap: 7px; }
html.ds .ccn-tk-bulb { display: block; width: 11px; height: 11px; border-radius: 50%; background: rgb(43 27 16 / .1); box-shadow: inset 0 0 0 1.5px rgb(43 27 16 / .28); }
html.ds .ccn-tk-bulb.is-on { background: radial-gradient(circle at 38% 34%, #fffbe6 0 18%, #ffd36b 46%, #d18a1a 100%); box-shadow: 0 0 6px 1px rgb(255 190 80 / .65), inset 0 0 0 1px rgb(150 90 10 / .5); }
html.ds .ccn-tk-serial { font: 600 min(calc(11 * var(--type-unit)), 12px)/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--tk-red); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* (17 October 2026) the ticket reads as a way in: the four games named on it, a printed call to action, an arrow on the stub */
html.ds .ccn-tk-games { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 2px 0 2px; font: 600 calc(10.5 * var(--type-unit))/calc(14 * var(--type-unit)) var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: rgb(43 27 16 / .62); }
html.ds .ccn-tk-dot { display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--tk-red); opacity: .7; }
html.ds .ccn-tk-cta { justify-self: start; display: inline-flex; align-items: center; min-height: 28px; margin-top: 8px; padding: 0 12px; border-radius: 999px; background: var(--tk-red); color: #fff7ea;
  font: 700 calc(12.5 * var(--type-unit))/1.15 var(--font-ui); letter-spacing: .04em; box-shadow: 0 1px 0 rgb(0 0 0 / .18); }
html.ds .ccn-tk-go { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tk-red); color: #fff7ea; }
html.ds .ccn-tk-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html.ds .ccn-ticket :is(.ccn-tk-main, .ccn-tk-stub) { transition: transform var(--motion-fast) var(--motion-curve), filter var(--motion-fast) var(--motion-curve); }
/* pressed: the paper gives a little under the thumb */
html.ds .ccn-ticket:active :is(.ccn-tk-main, .ccn-tk-stub), html.ds .ccn-ticket.ds-pressed-row :is(.ccn-tk-main, .ccn-tk-stub) { transform: translateY(1px) scale(.99); filter: brightness(.96); }
html.ds:is(.reduce-motion, .mo-low-power) .ccn-ticket :is(.ccn-tk-main, .ccn-tk-stub), html.ds #device.manual-reduced-motion .ccn-ticket :is(.ccn-tk-main, .ccn-tk-stub) , html.ds[data-motion-tier="reduced"] .ccn-ticket :is(.ccn-tk-main, .ccn-tk-stub) { transition: none; }
@media (prefers-reduced-motion: reduce) { html.ds .ccn-ticket :is(.ccn-tk-main, .ccn-tk-stub) { transition: none; } }
/* Today's one entrance: the lit bulbs come on in a run, once, when the tab is opened (ds-today.js .dt-arrive) */
@keyframes ccn-tk-on { from { opacity: .15; transform: scale(.4); } }
html.ds .ds-today.dt-arrive .ccn-tk-bulb.is-on { animation: ccn-tk-on var(--motion-normal) var(--motion-curve) both; animation-delay: calc(var(--i, 0) * 90ms + 260ms); }

/* ===================================================================== the room */
html.ds .ccn {
  --ccn-brass: #d9b46a; --ccn-brass-hi: #f3dca0; --ccn-brass-lo: #6b4a18; --ccn-cream: #f4e8d6; --ccn-soft: #cbb9a4; --ccn-paper: #f1e3c4; --ccn-ink: #2b1b10;
  position: absolute; inset: 0; z-index: 315; box-sizing: border-box; overflow: hidden; color: var(--ccn-cream); font-family: var(--font-ui);
  /* the foyer: the marquee's warm light falling on a striped wine-dark wall, the floor darker (a property, so the Cryptic's crossing
     can lay the same ground over its stage while the room goes) */
  --ccn-ground:
    radial-gradient(90% 34% at 50% 9%, rgb(255 196 110 / .2), rgb(255 196 110 / 0) 100%),
    repeating-linear-gradient(90deg, rgb(255 225 200 / .028) 0 18px, rgb(255 225 200 / 0) 18px 36px),
    linear-gradient(180deg, #1c0a10 0%, #22090f 46%, #160609 82%, #0c0406 100%);
  background: var(--ccn-ground);
}
html.ds .ccn.is-arriving .ccn-dialog { animation: ccn-rise var(--motion-slow) var(--motion-curve) both; }
@keyframes ccn-rise { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: none; } }

html.ds .ccn-dialog {
  container-type: inline-size; position: relative; z-index: 2; box-sizing: border-box; height: 100%; display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none;
  padding: max(6px, env(safe-area-inset-top, 0px)) 0 max(12px, calc(env(safe-area-inset-bottom, 0px) + 4px));
}
html.ds .ccn-dialog::-webkit-scrollbar { display: none; }
html.ds .ccn-head { display: grid; gap: 10px; padding: 0 16px; flex: none; }
html.ds .ccn-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
html.ds .ccn-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 0 0 0 -8px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ccn-soft); cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.ds .ccn-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
html.ds .ccn-close:focus-visible { outline: 2px solid var(--c-focus, var(--c-seal-hi)); outline-offset: 2px; }
html.ds .ccn-date { flex: 1 1 auto; min-width: 0; font: 600 calc(12 * var(--type-unit))/calc(16 * var(--type-unit)) var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #a8917c; text-align: right; }
/* the room's "?": How to play, one card per game (17 October 2026) */
html.ds .ccn-help { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 0 -8px 0 -4px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ccn-soft); cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.ds .ccn-help > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; font: 700 calc(14 * var(--type-unit))/1 var(--font-ui); }
html.ds .ccn-help:focus-visible { outline: 2px solid var(--c-focus, var(--c-seal-hi)); outline-offset: 2px; }
html.ds .ccn-vh, html.ds .ccn-flick-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ----- the marquee: a canopy ringed with bulbs, the name in changeable letters on a lit board */
html.ds .ccn-sign {
  position: relative; display: grid; gap: 8px; padding: 9px 12px; border-radius: 14px;
  background: linear-gradient(180deg, #33101a, #1c070c);
  box-shadow: 0 16px 26px -14px rgb(0 0 0 / .9), inset 0 0 0 1px rgb(217 180 106 / .5), inset 0 1px 0 rgb(255 230 180 / .18);
}
html.ds .ccn-bulbs { display: flex; justify-content: space-between; padding: 0 2px; }
/* (20 October 2026, the owner: "have lights going round Commuters Corner") every bulb is lit now, warm glass in a brass socket; a hot
   filament (::after) runs round the sign as two chasing lights, the old marquee's chase taken slowly. A bulb is the game's quarter
   (.is-on, a game played today) burns a touch hotter at rest. */
html.ds .ccn-bulb { position: relative; display: block; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #fff1cf 0 16%, #f2bf62 56%, #a8692a 100%); }
html.ds .ccn-bulb.is-on { background: radial-gradient(circle at 40% 36%, #ffffff 0 22%, #ffe08a 52%, #f0a830 100%); }
html.ds .ccn-bulb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: .5;
  background: radial-gradient(circle at 40% 36%, #ffffff 0 26%, #ffe8a6 56%, #f6b443 100%); box-shadow: 0 0 7px 2px rgb(255 196 92 / .7); }
html.ds .ccn-bulb.is-on::after { opacity: .62; }
/* the marquee's light on the wall under it: brighter with each game played (--lit, 0 to 1, from the script) */
html.ds .ccn-sign::after { content: ""; position: absolute; left: -16px; right: -16px; top: 70%; height: 200px; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 0%, rgb(255 196 110 / .2), rgb(255 196 110 / 0) 100%); opacity: calc(.2 + .8 * var(--lit, 0)); transition: opacity var(--motion-slow) var(--motion-curve); }
html.ds .ccn-title { margin: 0; }
/* (the heading takes focus when the room opens, for VoiceOver; it is not a control, so no ring: the design system's [tabindex] ring is for controls) */
html.ds .ccn .ccn-title:is(:focus, :focus-visible) { outline: none !important; box-shadow: none; }
html.ds .ccn-board {
  display: flex; justify-content: center; align-items: center; gap: .5em; padding: 7px 10px 6px; border-radius: 6px;
  background: linear-gradient(180deg, #fff6df, #f1dfb6);
  box-shadow: inset 0 0 0 1px rgb(120 80 30 / .28), inset 0 -8px 12px rgb(214 160 80 / .22);
  font: 600 min(calc(26 * var(--type-unit)), 6.7cqw)/1 "Credits TRIPTIC", var(--font-ui); color: #1d0c10;   /* (20 October 2026: COMMUTERS CORNER, two letters longer) */
}
html.ds .ccn-word { display: flex; white-space: nowrap; }
html.ds .ccn-word > i { display: inline-block; font-style: normal; margin: 0 .045em; transform: rotate(var(--t, 0deg)); }
html.ds .ccn-sign.is-lit { box-shadow: 0 16px 26px -14px rgb(0 0 0 / .9), inset 0 0 0 1px rgb(243 220 160 / .8), inset 0 1px 0 rgb(255 230 180 / .3); }
html.ds .ccn-sign.is-lit .ccn-board { background: linear-gradient(180deg, #fffaf0, #f6e6c0); }
/* THE living thing (20 October 2026): the chase. Two lights run round the sign, clockwise (--k is a bulb's place on the ring, the
   bottom row right to left), a bulb's filament rising quickly and dying slowly as the light passes on: opacity and a hair of scale on
   the filament only, 4.2 s a lap. Paused off screen (.mo-living host, motion-living.js); still and lit under Reduce Motion and Low Power. */
@keyframes ccn-chase {
  0% { opacity: 1; transform: scale(1.18); } 9% { opacity: .62; transform: scale(1.04); } 22% { opacity: .22; transform: none; } 44% { opacity: .22; transform: none; }
  50% { opacity: 1; transform: scale(1.18); } 59% { opacity: .62; transform: scale(1.04); } 72% { opacity: .22; transform: none; } 94% { opacity: .22; transform: none; }
  100% { opacity: 1; transform: scale(1.18); }
}
html.ds .ccn-bulb::after { animation: ccn-chase 4.2s linear infinite; animation-delay: calc(var(--k, 0) * 150ms - 4.2s); }
/* the day complete: the bulbs come on in a run round the sign, once (a one-shot on the bulb; the chase is the filament's) */
@keyframes ccn-on { from { transform: scale(.3); } }
html.ds .ccn-sign.is-blooming .ccn-bulb.is-on { animation: ccn-on var(--motion-normal) var(--motion-curve) calc(var(--k, 0) * 30ms) both; }

/* ----- Flick, the usher: a small picture at the side and one short line, held still */
/* (28 October 2026, the owner: "the intro text sits tight against the Flick illustration") his picture is drawn to its box's edges (the reel
   in his hand reaches the right one), so the line stands a clear 16pt off it, with a little room above and below */
html.ds .ccn-flick { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 2px 4px 2px 2px; }
html.ds .ccn-flick:not(:has(.ccn-flick-art)) { grid-template-columns: minmax(0, 1fr); }
html.ds .ccn-flick-art { display: block; width: 44px; }
html.ds .ccn-flick-art .flk, html.ds .ccn-flick-art .flk * { animation: none !important; }
html.ds .ccn-flick-say { margin: 0; font: 400 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--font-ui); color: var(--ccn-soft); text-wrap: pretty; }

/* ----- the wall: four poster frames, 2 x 2 */
/* (18 October 2026, the coordinator: at 320 x 568 and the largest text the stubs overlapped the next row's SCREEN label: a row is never
   shorter than what it holds; the room scrolls inside itself instead) */
/* (20 October 2026, the owner: "different sizes for Commuters Corner": a tile took whatever height its column had left, so a tile with
   more lines under it had a shorter, cropped picture.) Now every case is the same box (one aspect, the column's width), the picture
   whole inside it, and a poster's parts stack from its top (screen, case, name, stub, best, players, plays), so the labels and the
   status lines of a row of posters start on the same lines whatever each one says. The wall stands in the middle of the space it has. */
html.ds .ccn-wall { flex: 1 0 auto; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; align-content: center; gap: 14px 14px; padding: 0 16px; --ccn-aspect: 3 / 2; }
html.ds .ccn-frame {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 6px; min-width: 0; min-height: 0; margin: 0; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
html.ds .ccn-frame:focus-visible { outline: none; }
html.ds .ccn-frame:focus-visible .ccn-case { outline: 2px solid var(--c-focus, var(--c-seal-hi)); outline-offset: 3px; }
html.ds .ccn-screen { font: 600 calc(11 * var(--type-unit))/calc(14 * var(--type-unit)) var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--ccn-brass); }
/* the case: a brass frame, the cover inside it, a picture light over it */
html.ds .ccn-case {
  position: relative; display: block; flex: none; width: 100%; aspect-ratio: var(--ccn-aspect, 3 / 2); border-radius: 6px;
  background: linear-gradient(145deg, var(--ccn-brass-hi), #a67c34 42%, var(--ccn-brass-lo));
  box-shadow: 0 18px 24px -14px rgb(0 0 0 / .95), inset 0 1px 0 rgb(255 244 210 / .55);
  transition: transform var(--motion-fast) var(--motion-curve);
}
/* (CORNER PRESS, 4 November 2026) the tile's press is the app's one press (ds-core.js: the whole tile to .96, from the touch to its
   game's arrival, then one spring back): the case's own :active scale (.975, on its own clock, which WebKit set late and took
   away at the lift) pressed it a second time under that one, and the case came back out before the tile did */
html.ds .ccn-art { position: absolute; inset: 4px; overflow: hidden; contain: paint; border-radius: 3px; background: #0b0710; }
html.ds .ccn-art > * { position: absolute; inset: 0; }
/* the picture light: a brass bar over the frame and its light falling down the poster */
html.ds .ccn-lamp { position: absolute; left: 30%; right: 30%; top: -5px; height: 5px; border-radius: 3px; background: linear-gradient(180deg, var(--ccn-brass-hi), #8a6326); pointer-events: none; }
html.ds .ccn-lamp::after { content: ""; position: absolute; left: -45%; right: -45%; top: 9px; height: calc(var(--ccn-light, 120px)); border-radius: 0 0 50% 50%; pointer-events: none;
  background: radial-gradient(70% 100% at 50% 0%, rgb(255 228 170 / .22), rgb(255 228 170 / 0) 100%); }
html.ds .ccn-name { font: 600 calc(15 * var(--type-unit))/calc(19 * var(--type-unit)) var(--font-ui); color: var(--ccn-cream); }
/* today's stub: a scrap of the ticket's paper, a perforation down its left edge; gold once the game is played */
html.ds .ccn-stub { align-self: center; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: calc(23 * var(--type-unit)); box-sizing: border-box; padding: 4px 8px 4px 11px; border-radius: 3px;
  background: radial-gradient(circle, rgb(43 27 16 / .38) 0 1px, transparent 1.4px) 2px 0 / 3px 5px repeat-y, var(--ccn-paper); color: var(--ccn-ink); }
html.ds .ccn-stub-words { font: 600 calc(11.5 * var(--type-unit))/calc(15 * var(--type-unit)) var(--font-ui); letter-spacing: .01em; text-wrap: balance; }
html.ds .ccn-frame.is-played .ccn-stub { background: radial-gradient(circle, rgb(80 40 0 / .4) 0 1px, transparent 1.4px) 2px 0 / 3px 5px repeat-y, linear-gradient(180deg, #f7d98c, #e2b04e); }
html.ds .ccn-frame.is-played .ccn-stub::before { content: ""; flex: none; width: 3.5px; height: 7px; margin: -2px 1px 0 0; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(40deg); }
/* the stub's second line: "Best: COSTUME · Top 12%" (a member), "Best: COSTUME" and a lock (a free player) */
html.ds .ccn-best-slot { display: block; margin-top: -2px; }
html.ds .ccn-stub-best { display: block; text-align: center; max-width: 100%; font: 600 calc(11.5 * var(--type-unit))/calc(15 * var(--type-unit)) var(--font-ui); color: var(--ccn-soft); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ds .ccn-stub-dot { color: var(--ccn-brass); }
/* (20 October 2026) a free player's plays of this game this week, under the best; and how many played it today, on the preview's foot */
html.ds .ccn-plays-slot { display: block; min-height: 0; margin-top: -2px; }
html.ds .ccn-plays { display: block; text-align: center; font: 500 calc(11.5 * var(--type-unit))/calc(15 * var(--type-unit)) var(--font-ui); color: var(--ccn-soft); }
html.ds .ccn-plays.is-locked { color: var(--ccn-brass-hi); }
html.ds .ccn-plays.is-locked .ccn-stub-lock { margin-right: 4px; }
html.ds .ccn-best-slot:empty, html.ds .ccn-players-slot:empty, html.ds .ccn-plays-slot:empty { display: none; }
html.ds .ccn-players-slot { display: block; margin-top: -2px; }
html.ds .ccn-players { display: block; text-align: center; font: 500 calc(11.5 * var(--type-unit))/calc(15 * var(--type-unit)) var(--font-ui); color: var(--ccn-soft); font-variant-numeric: tabular-nums; text-wrap: balance; }
html.ds .ccn-stub-lock { display: inline-grid; place-items: center; width: 13px; height: 13px; vertical-align: -2px; color: var(--ccn-brass-hi); }
html.ds .ccn-stub-lock svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* (28 October 2026, the owner: "Hub cards don't line up. Cross Cut has no Best line, so its card is shorter") every poster carries the
   same lines (its best is "—" until it has one: commute-corner.js bestInfo), and the posters of a row share their lines' tracks: each
   frame is a subgrid of the wall's rows, every part in its own row (screen, case, name, stub, best, players, plays), so a name that
   wraps or a line one poster has and its neighbour has not still leaves the lines beside each other level. A part that is empty takes
   no room (no gap: the spacing is each part's own top margin). Without subgrid, the column stack above. */
@supports (grid-template-rows: subgrid) {
  html.ds .ccn-wall { row-gap: 0; }
  html.ds .ccn-frame { display: grid; grid-row: span 7; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; justify-items: stretch; align-content: start; margin-bottom: 14px; }
  html.ds .ccn-frame > .ccn-screen { grid-row: 1; }
  html.ds .ccn-frame > .ccn-case { grid-row: 2; margin-top: 6px; align-self: start; }
  html.ds .ccn-frame > .ccn-name { grid-row: 3; margin-top: 6px; }
  html.ds .ccn-frame > .ccn-stub { grid-row: 4; margin-top: 6px; justify-self: center; align-self: start; }
  html.ds .ccn-frame > .ccn-best-slot { grid-row: 5; margin-top: 4px; }
  html.ds .ccn-frame > .ccn-players-slot { grid-row: 6; margin-top: 4px; }
  html.ds .ccn-frame > .ccn-plays-slot { grid-row: 7; margin-top: 4px; }
}
html.ds .ccn-frame[aria-disabled="true"] { cursor: default; }
html.ds .ccn-frame[aria-disabled="true"] .ccn-case { filter: saturate(.4); opacity: .7; }

/* ----- the foot: the count and the streak, quietly */
/* (28 October 2026, the owner: "the hub footer line is also cut off at the bottom") on an iPhone the room is the screen less the Dynamic
   Island and the home indicator (393 x 759 on a 15), and its last line ran under the bottom edge. The count and the run share one line
   ("0 of 4 played today · Commuted yesterday", wrapping only where they must), the rule its own; the foot's own padding carries the
   home indicator (below), so its last line always ends clear of it once the room is scrolled to its end. */
html.ds .ccn-foot { flex: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; padding: 12px 20px 0; text-align: center; }
html.ds .ccn-foot > .ccn-allow { flex: 1 0 100%; }
html.ds .ccn-foot > .ccn-streak:not([hidden])::before { content: "\00b7"; margin-right: 8px; color: var(--ccn-soft); }
html.ds .ccn-allow { margin: 2px 0 0; font: 500 calc(12.5 * var(--type-unit))/calc(17 * var(--type-unit)) var(--font-ui); color: var(--ccn-soft); text-wrap: balance; }
html.ds .ccn-allow[hidden] { display: none; }
html.ds .ccn-count { margin: 0; font: 500 calc(14 * var(--type-unit))/calc(19 * var(--type-unit)) var(--font-ui); color: var(--ccn-soft); font-variant-numeric: tabular-nums; }
html.ds .ccn.is-complete .ccn-count { color: var(--ccn-brass-hi); }
html.ds .ccn-streak { margin: 0; font: 500 calc(13 * var(--type-unit))/calc(17 * var(--type-unit)) var(--font-ui); color: var(--ccn-brass); }
html.ds .ccn-streak[hidden] { display: none; }

/* ----- How to play (the room's "?"): a sheet over the room, one rule card per game, each in its own colours */
html.ds .ccn-how { position: absolute; inset: 0; z-index: 6; }
html.ds .ccn-how-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .6); opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve); }
html.ds .ccn-how-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 90%; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; display: grid; gap: 12px;
  padding: 8px 16px max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px)); border-radius: 20px 20px 0 0; background: linear-gradient(180deg, #2a0f18, #1a070c); color: var(--ccn-cream);
  box-shadow: 0 -12px 32px rgb(0 0 0 / .5), inset 0 1px 0 rgb(217 180 106 / .35); transform: translateY(104%); transition: transform var(--motion-normal) var(--motion-curve); }
html.ds .ccn-how.is-open .ccn-how-scrim { opacity: 1; }
html.ds .ccn-how.is-open .ccn-how-sheet { transform: none; }
html.ds .ccn-how-grip { position: relative; justify-self: center; width: 36px; height: 4px; border-radius: 2px; background: rgb(244 232 214 / .25); cursor: pointer; }
html.ds .ccn-how-grip::before { content: ""; position: absolute; left: -40px; right: -40px; top: -20px; bottom: -20px; }
html.ds .ccn-how-title { margin: 0 8px; font: 600 calc(26 * var(--type-unit))/1.1 "Credits TRIPTIC", var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ccn-brass-hi); outline: none; }
html.ds .ccn-how-sub { margin: -4px 8px 4px; font: 400 calc(14 * var(--type-unit))/calc(19 * var(--type-unit)) var(--font-ui); color: var(--ccn-soft); }
html.ds .ccn-how-cards { display: grid; gap: 12px; }
html.ds .ccn-how-done { min-height: 52px; margin-top: 4px; border: 0; border-radius: 14px; background: linear-gradient(180deg, var(--ccn-brass-hi), var(--ccn-brass)); color: var(--ccn-ink); font: 700 calc(16 * var(--type-unit))/1 var(--font-ui); cursor: pointer; }
html.ds .ccn-how-done:focus-visible { outline: 2px solid var(--c-focus, var(--c-seal-hi)); outline-offset: 2px; }
/* the Daily Cryptic's own colours for its rule card (purple and gold bulbs) */
html.ds .ccn-theme-cryptic { --gs-bg: #2b1278; --gs-ink: #fff6e5; --gs-dim: rgb(255 246 229 / .78); --gs-mute: rgb(255 246 229 / .55); --gs-line: rgb(255 212 59 / .3); --gs-accent: #ffd43b; --gs-panel: rgb(255 255 255 / .08); --gs-on-btn: #26104f;
  --gs-title-font: var(--font-ui); --gs-title-weight: 800; --gs-title-track: .02em; --gs-title-case: none; background: linear-gradient(160deg, #2a1178 0%, #5a1fb4 60%, #7f1a8e 100%); }

/* ----- a game's host: full screen inside the room */
html.ds :is(.ccn-host, .ccn-host-going) { position: absolute; inset: 0; z-index: 4; overflow: auto; background: var(--c-stage, #0a0a10); color: var(--c-label-1, #f4f4f8); }
/* (20 October 2026) a closed game on its way out: it sinks and fades over the room (commute-corner.js closeGame), takes no taps */
html.ds .ccn-host-going { overflow: hidden; pointer-events: none; }
/* (CORNER PRESS, 4 November 2026; the owner's recording, Freefall's start card and the room seen through each other) a game arrives by a
   fade THROUGH (commute-corner.js openGame): its ground comes over the room in the first 45% (the room's words go under it), then (from 35%) its
   words rise onto that ground. The game's own rise (tg-rise, xc-rise) gives way to this one entrance (the rule below is the more
   specific). Composited: opacity and transform only */
html.ds .ccn-host.is-arriving { animation: ccn-host-ground var(--motion-normal) linear both; }
html.ds .ccn-host.is-arriving > * { animation: ccn-host-in var(--motion-normal) linear both; }
@keyframes ccn-host-ground { 0% { opacity: 0; animation-timing-function: var(--motion-curve); } 45% { opacity: 1; } 100% { opacity: 1; } }
@keyframes ccn-host-in { 0% { opacity: 0; transform: translateY(14px); } 35% { opacity: 0; transform: translateY(14px); animation-timing-function: var(--motion-curve); } 100% { opacity: 1; transform: none; } }
html.ds .ccn-host:focus { outline: none; }

/* ----- the Daily Cryptic's cover: its ticket, marquee-free (gold bulbs on purple, standing still) */
/* (11 November 2026, the owner: the top dots "sat low" and the bottom ones "touching the edge".) The cover now fills its frame exactly and
   the ticket takes only the room between the two rows, so both rows sit the same distance from their edge. */
html.ds .ccn-cry { position: absolute; inset: 0; box-sizing: border-box; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; place-items: center; gap: 7px; padding: 8px 8px; background: linear-gradient(160deg, #2a1178 0%, #5a1fb4 52%, #7f1a8e 100%); }
html.ds .ccn-cry-bulbs { display: flex; justify-content: space-between; width: 100%; padding: 0 4px; box-sizing: border-box; }
html.ds .ccn-cry-bulbs > i { width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b8, #ffd43b 55%, #d08f00); }
html.ds .ccn-cry-ticket { position: relative; display: grid; align-content: center; justify-items: center; gap: 7px; width: 88%; height: 100%; min-height: 0; max-height: 104px; box-sizing: border-box; padding: 8px; border-radius: 8px; background: #fff6e5; color: #26104f; transform: rotate(-3deg); box-shadow: 0 10px 18px -8px rgb(0 0 0 / .55); }
html.ds .ccn-cry-ticket::before, html.ds .ccn-cry-ticket::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #4a1a9c; }
html.ds .ccn-cry-ticket::before { left: -6px; } html.ds .ccn-cry-ticket::after { right: -6px; }
html.ds .ccn-cry-name { font: 800 calc(9 * var(--type-unit))/1 var(--font-ui); letter-spacing: .16em; white-space: nowrap; }
html.ds .ccn-cry-tiles { display: flex; gap: 2px; }
html.ds .ccn-cry-tiles > i { width: 10px; height: 13px; border-radius: 2px; background: rgb(38 16 79 / .12); box-shadow: inset 0 -2px 0 #d08f00; }
html.ds .ccn-cry-tiles > u { width: 5px; }
html.ds .ccn-cry-lines { display: grid; gap: 3px; width: 70%; }
html.ds .ccn-cry-lines > i { height: 3px; border-radius: 2px; background: rgb(38 16 79 / .16); }
html.ds .ccn-cry-lines > i:last-child { width: 62%; }
html.ds .ccn-cry-q, html.ds .ccn-cry-stamp { position: absolute; right: 8px; bottom: 4px; font-style: normal; font: 800 calc(18 * var(--type-unit))/1 var(--font-ui); color: #d08f00; }
html.ds .ccn-cry-stamp { right: 6px; bottom: 6px; padding: 2px 5px; border: 2px solid #1d8a5a; border-radius: 5px; color: #1d8a5a; font-size: calc(9 * var(--type-unit)); letter-spacing: .12em; transform: rotate(-8deg); }

/* ----- a game that has not joined yet: its title on a quiet poster */
html.ds .ccn-ph { display: grid; place-items: center; background: linear-gradient(160deg, #2a1218 0%, #160a0d 100%); }
html.ds .ccn-ph > b { font: 800 calc(18 * var(--type-unit))/calc(22 * var(--type-unit)) var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: rgb(244 232 214 / .22); text-align: center; padding: 0 10px; text-wrap: balance; }
html.ds .ccn-ph > i { position: absolute; left: 22%; right: 22%; bottom: 22%; height: 2px; border-radius: 2px; background: rgb(244 232 214 / .1); }

/* ----- (28 October 2026) an iPhone's room is the screen less the Dynamic Island and the home indicator (393 x 852 less 59 and 34 in
   the Home Screen app since its status bar is translucent): a room taller than its space is drawn tight (commute-corner.js fit():
   .ccn.is-tight, measured, so the real insets and the text size count), and then fits on one screen; the posters a little wider than
   tall-ish (16:10) and the spacing a touch tighter. An SE (under 360pt wide) keeps its pictures and scrolls. */
@media (min-width: 360px) {
  html.ds .ccn.is-tight .ccn-dialog { gap: 8px; }
  html.ds .ccn.is-tight .ccn-wall { --ccn-aspect: 16 / 10; }
  html.ds .ccn.is-tight .ccn-frame { margin-bottom: 10px; }
  html.ds .ccn.is-tight .ccn-head { gap: 6px; }
  html.ds .ccn.is-tight .ccn-flick { padding-block: 0; }
  html.ds .ccn.is-tight .ccn-frame > :is(.ccn-case, .ccn-name, .ccn-stub) { margin-top: 4px; }
  html.ds .ccn.is-tight .ccn-frame > :is(.ccn-best-slot, .ccn-players-slot, .ccn-plays-slot) { margin-top: 2px; }
}
/* ----- a short screen (375 x 667) and the largest text: the posters keep a picture, the room scrolls inside itself */
@media (max-height: 740px) {
  html.ds .ccn-dialog { gap: 10px; }
  html.ds .ccn-head { gap: 8px; }
  html.ds .ccn-flick-art { width: 38px; }
}

/* ----- an iPhone Duo's inner display held like a book (duo-book.js: html[data-duo-book]): one row of four, two each side of the fold;
   nothing on the fold band. (20 October 2026, the coordinator: the fold's gap showed on iPad too; it is only for a real fold now.) */
@container (min-width: 744px) {
  html.ds[data-duo-book] .ccn-head { grid-template-columns: minmax(0, 1fr) var(--ccn-fold, 72px) minmax(0, 1fr); column-gap: 0; padding: 0 24px; }
  html.ds[data-duo-book] .ccn-top, html.ds[data-duo-book] .ccn-sign { grid-column: 1 / -1; }
  html.ds[data-duo-book] .ccn-flick-slot { grid-column: 1; }
  html.ds[data-duo-book] .ccn-board { display: grid; grid-template-columns: minmax(0, 1fr) var(--ccn-fold, 72px) minmax(0, 1fr); gap: 0; }
  html.ds[data-duo-book] .ccn-word:first-child { grid-column: 1; justify-self: end; }
  html.ds[data-duo-book] .ccn-word:last-child { grid-column: 3; justify-self: start; }
  html.ds[data-duo-book] .ccn-wall { grid-template-columns: repeat(2, minmax(0, 1fr)) var(--ccn-fold, 72px) repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; padding: 0 24px; column-gap: 18px; --ccn-aspect: 4 / 5; }
  html.ds[data-duo-book] .ccn-frame:nth-child(1) { grid-column: 1; } html.ds[data-duo-book] .ccn-frame:nth-child(2) { grid-column: 2; }
  html.ds[data-duo-book] .ccn-frame:nth-child(3) { grid-column: 4; } html.ds[data-duo-book] .ccn-frame:nth-child(4) { grid-column: 5; }
  html.ds[data-duo-book] .ccn-frame { grid-row: 1 / span 7; }   /* (28 October 2026) the one row of four: seven line tracks, shared */
  html.ds[data-duo-book] .ccn-foot { display: grid; grid-template-columns: minmax(0, 1fr) var(--ccn-fold, 72px) minmax(0, 1fr); justify-items: stretch; column-gap: 0; }
  html.ds[data-duo-book] .ccn-count { grid-column: 1; text-align: right; }
  html.ds[data-duo-book] .ccn-streak { grid-column: 3; text-align: left; }
  html.ds[data-duo-book] .ccn-foot > .ccn-streak::before { content: none; }
  html.ds[data-duo-book] .ccn-allow { grid-column: 1 / -1; }
}

/* ----- an iPad (and any large display that is not a Duo held like a book; 20 October 2026, the coordinator: "lay out a proper iPad
   room"): the whole room drawn larger (zoom: a layout scale, crisp, so its words and tiles keep their proportions), centred, no fold.
   Portrait: the room reads as a big phone's, two by two. Landscape: four across, square cases, the gaps all equal. */
@media (min-width: 744px) and (min-height: 744px) {
  html.ds:not([data-duo-book]) .ccn-dialog { zoom: 1.25; }
}
@container (min-width: 744px) {
  html.ds:not([data-duo-book]) .ccn-head { padding: 0 24px; }
  html.ds:not([data-duo-book]) .ccn-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 0 24px; width: 100%; max-width: 1040px; margin-inline: auto; box-sizing: border-box; --ccn-aspect: 1 / 1; }
}

/* ===================================================================== Reduce Motion and Low Power: nothing moves, nothing fades */
html.ds:is(.reduce-motion, .mo-low-power) .ccn *, html.ds #device.manual-reduced-motion .ccn *, html.ds .ccn.manual-reduced-motion * { animation: none !important; transition: none !important; }
/* the marquee stays lit, not moving: the filaments rest at a steady glow (the chase is on a pseudo-element, so it is named here) */
html.ds:is(.reduce-motion, .mo-low-power) .ccn .ccn-bulb::after, html.ds #device.manual-reduced-motion .ccn .ccn-bulb::after, html.ds .ccn.manual-reduced-motion .ccn-bulb::after { animation: none !important; opacity: .6; transform: none; }
html.ds:is(.reduce-motion, .mo-low-power) .ds-today .ccn-tk-bulb, html.ds #device.manual-reduced-motion .ds-today .ccn-tk-bulb, html.ds[data-motion-tier="reduced"] .ds-today .ccn-tk-bulb { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.ds .ccn *, html.ds .ccn { animation: none !important; transition: none !important; }
  html.ds .ccn .ccn-bulb::after { animation: none !important; opacity: .6; transform: none; }
  html.ds .ds-today .ccn-tk-bulb { animation: none !important; }
}

/* ===================================================================== THE CRYPTIC INSIDE THE ROOM (17 October 2026, the NYT bar): the room
   stays up; the Cryptic's stage is set inside its brass frame, under the shared header in the Cryptic's purple and gold, a row of its
   gold bulbs along the brass. The room's own wall and posters step aside (they are behind the Cryptic, not gone). */
html.ds .ccn.is-cryptic { background: none; pointer-events: none; --ccn-ct: calc(max(4px, env(safe-area-inset-top, 0px)) + 60px); }
html.ds .ccn.is-cryptic > .ccn-dialog { visibility: hidden; }
html.ds .ccn.is-cryptic::before, html.ds .ccn.is-cryptic::after, html.ds .ccn.has-art.is-cryptic::before, html.ds .ccn.has-art.is-cryptic::after { content: none; }
html.ds .ccn-cframe { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: block; overflow: visible;
  box-shadow: inset 0 0 0 5px #b8893a, inset 0 0 0 6px rgb(255 236 190 / .45), inset 0 0 0 7px rgb(20 8 40 / .7); border-radius: 0; }
html.ds .ccn-cframe.ccn-theme-cryptic { background: none; }
html.ds .ccn-cframe > .gs-head { pointer-events: auto; position: absolute; left: 0; right: 0; top: 0; height: var(--ccn-ct, 64px);
  background: linear-gradient(180deg, #2a1178 0%, #1e0b5a 100%); box-shadow: inset 0 -3px 0 #b8893a, inset 0 -4px 0 rgb(255 236 190 / .5), 0 6px 14px rgb(10 4 30 / .45); }
/* (28 October 2026) the Cryptic's clock shows, as every game's does (its attempt's time: commute-corner.js enterCry) */
html.ds .ccn-cframe .gs-sheet-layer { pointer-events: auto; }
/* (10 November 2026, the owner, on the Daily Cryptic's start screen) the frame's header says each thing once: on the landing the number
   is the date chip's ("No. 314 · Tue 10 Nov") and the clock waits for Play (commute-corner.js enterCry: is-landing, is-before-play) */
html.ds .ccn-cframe.is-landing .gs-head .gs-no { display: none; }
html.ds .ccn-cframe.is-before-play .gs-head .gs-clockwrap { visibility: hidden; }
html.ds .ccn-cframe-bulbs { position: absolute; left: 14px; right: 14px; top: calc(var(--ccn-ct, 64px) - 6px); z-index: 7; display: flex; justify-content: space-between; pointer-events: none; }
html.ds .ccn-cframe-bulbs > i { width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b8, #ffd43b 55%, #d08f00); box-shadow: 0 1px 2px rgb(40 20 0 / .6); }
/* the Cryptic's stage, inset in the frame under its header; its own Back is the frame's x now */
html.ds #device.ccn-cry-hosted > .screen.cg-room { inset: var(--ccn-ct, 64px) 6px 6px 6px; width: auto; height: auto !important; padding-top: 10px !important; border-radius: 0 0 8px 8px; }
html.ds #device.ccn-cry-hosted > .screen.cg-room .cg-header > .cg-round[data-control-key="cryptic-header-back"] { visibility: hidden; }
/* (CORNER PRESS, 4 November 2026; the owner's recording: the Cryptic rose in over Today, "Season" and the ticket showing through it)
   THE CROSSING: the Cryptic's stage is put in place at once, standing still under the room, and the room goes off it by a fade through
   (its words in the first 40%, then its ground), the Cryptic's frame and header coming in as the ground goes. Today is never seen */
html.ds #device.ccn-cry-arriving > .screen.cg-room { animation: none; }
html.ds #device.ccn-cry-arriving > .screen.fluid-departure { visibility: hidden; }
html.ds #device.ccn-cry-arriving > .ccn.is-cryptic > .ccn-dialog { visibility: visible; animation: ccn-cry-words var(--motion-normal) linear both; }
html.ds #device.ccn-cry-arriving > .ccn.is-cryptic::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--ccn-ground); animation: ccn-cry-ground var(--motion-normal) linear both; }
html.ds #device.ccn-cry-arriving > .ccn.has-art.is-cryptic::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(180deg, rgb(28 10 16 / .55) 0%, rgb(34 9 15 / .62) 46%, rgb(22 6 9 / .78) 82%), var(--ccn-wall); background-size: auto, 220px 220px; background-repeat: repeat; animation: ccn-cry-wall var(--motion-normal) linear both; }
html.ds #device.ccn-cry-arriving > .ccn.is-cryptic > .ccn-cframe { animation: ccn-cry-frame var(--motion-normal) linear both; }
@keyframes ccn-cry-words { 0% { opacity: 1; animation-timing-function: var(--motion-curve); } 40% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ccn-cry-ground { 0% { opacity: 1; } 40% { opacity: 1; animation-timing-function: var(--motion-curve); } 100% { opacity: 0; } }
@keyframes ccn-cry-wall { 0% { opacity: .9; } 40% { opacity: .9; animation-timing-function: var(--motion-curve); } 100% { opacity: 0; } }
@keyframes ccn-cry-frame { 0% { opacity: 0; } 40% { opacity: 0; animation-timing-function: var(--motion-curve); } 100% { opacity: 1; } }
html.ds #device.ccn-cry-hosted { --ccn-ct: calc(max(4px, env(safe-area-inset-top, 0px)) + 60px); }

/* ----- the Daily Cryptic's keys (13 November 2026; cryptic-premium.js keys(), ds-cryptic-game.css "THE IN-GAME KEYBOARD"): the shared
   game keyboard in the Cryptic's colours (its frame's purple, its gold Guess), and the field it types into, drawn in the field's own ink */
/* the field the keys type into: the input keeps the value, its mirror shows it in the field's own ink, with a caret while the keys are up */
html.ds .cg-room .cg-field { position: relative; display: block; min-width: 0; font: 600 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--font-ui); letter-spacing: var(--tr-headline); --gs-mirror-pad: 0 21px; }
html.ds .cg-room .cg-field .gs-in-kb { pointer-events: none; color: transparent !important; caret-color: transparent; -webkit-text-fill-color: transparent; }
html.ds .cg-room .cg-field .gs-in-kb::placeholder { color: transparent; -webkit-text-fill-color: transparent; }
html.ds .cg-room .cg-field.gs-field { cursor: text; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html.ds .cg-room .cg-field .gs-mirror { color: var(--cg-ink); }
html.ds .cg-room .cg-field .gs-mirror.is-empty::before { color: var(--cg-ink-soft); font-style: normal; font-weight: 500; }
html.ds .cg-room .cg-field .gs-caret { background: var(--cg-bg-mid); }
html.ds .cg-play:not(.is-keys) .cg-field .gs-caret { display: none; }
html.ds .cg-play.is-keys .cg-field .gs-in-kb { border-color: var(--cg-pop); box-shadow: inset 0 3px 0 var(--cg-paper-edge), 0 0 0 4px var(--cg-glow-warm); }
/* the keys: the shared keyboard in the Cryptic's colours (its frame's purple, its gold Guess), across the screen's foot */
html.ds #device > .screen.cg-play > .cg-keys { position: relative; z-index: 6; flex: 0 0 auto; margin: 0 -20px; overflow: visible;
  --gs-bg: #2b1278; --gs-sheet: #3a1d92; --gs-ink: #fff6e5; --gs-dim: rgb(255 246 229 / .78); --gs-mute: rgb(255 246 229 / .55); --gs-line: rgb(255 212 59 / .3);
  --gs-accent: #ffd43b; --gs-btn: #ffd43b; --gs-on-btn: #26104f; --gs-key: rgb(255 246 229 / .17); --gs-key-fn: rgb(255 246 229 / .08);
  background: linear-gradient(180deg, #2a1178 0%, #1e0b5a 100%); box-shadow: inset 0 3px 0 #b8893a, inset 0 4px 0 rgb(255 236 190 / .5), 0 -10px 20px rgb(10 4 30 / .35); padding-top: 4px; }
html.ds #device > .screen.cg-play > .cg-keys[hidden] { display: none; }

/* ----- the Cryptic's worked example (How to play): the bulbs, the points, a riddle, the next clue at -150, a guess, solved */
html.ds .ccn-cd { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(160deg, #2a1178 0%, #5a1fb4 60%, #7f1a8e 100%); font-family: var(--font-ui); }
html.ds .ccn-cd-bulbs { position: absolute; left: 12px; right: 12px; top: 8px; display: flex; justify-content: space-between; }
html.ds .ccn-cd-bulbs > i { width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b8, #ffd43b 55%, #d08f00); }
html.ds .ccn-cd-pts { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); color: #ffd43b; font: 600 calc(11 * var(--type-unit))/1 var(--font-ui); }
html.ds .ccn-cd-pts b { font: 800 calc(18 * var(--type-unit))/1 var(--font-ui); }
html.ds .ccn-cd-ticket { position: absolute; top: 46px; width: 112px; height: 72px; padding: 8px 10px; box-sizing: border-box; border-radius: 8px; background: #fff6e5; box-shadow: 0 8px 14px rgb(20 0 40 / .45); display: grid; align-content: start; gap: 5px;
  opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-slow) var(--motion-curve); }
html.ds .ccn-cd-ticket small { justify-self: start; padding: 2px 6px; border-radius: 999px; background: #efe1ff; color: #4a1a9c; font: 700 calc(9 * var(--type-unit))/1 var(--font-ui); }
html.ds .ccn-cd-ticket i { display: block; height: 4px; border-radius: 2px; background: rgb(38 16 79 / .2); }
html.ds .ccn-cd-ticket i:last-child { width: 60%; }
html.ds .ccn-cd-t1 { left: calc(50% - 120px); transform: rotate(-3deg) translateY(8px); }
html.ds .ccn-cd-t2 { left: calc(50% + 8px); transform: rotate(3deg) translateX(60px); }
html.ds .ccn-cry-demo:not([data-step="0"]) .ccn-cd-t1 { opacity: 1; transform: rotate(-3deg); }
html.ds .ccn-cry-demo:is([data-step="2"], [data-step="3"], [data-step="4"]) .ccn-cd-t2 { opacity: 1; transform: rotate(3deg); }
html.ds .ccn-cd-cost { position: absolute; left: calc(50% + 70px); top: 40px; padding: 3px 7px; border-radius: 999px; background: #ff5d8f; color: #fff; font: 800 calc(11 * var(--type-unit))/1 var(--font-ui); opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve); }
html.ds .ccn-cry-demo[data-step="2"] .ccn-cd-cost { opacity: 1; }
html.ds .ccn-cd-field { position: absolute; left: 24px; right: 24px; bottom: 14px; height: 28px; display: flex; align-items: center; padding: 0 12px; border-radius: 14px; background: #fff6e5; color: #26104f; font: 600 calc(12 * var(--type-unit))/1 var(--font-ui); opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve); }
html.ds .ccn-cry-demo:is([data-step="3"], [data-step="4"]) .ccn-cd-field { opacity: 1; }
html.ds .ccn-cd-stamp { position: absolute; right: 26px; bottom: 50px; padding: 3px 8px; border: 2px solid #1d8a5a; border-radius: 6px; background: #effbf4; color: #1d8a5a; font: 800 calc(11 * var(--type-unit))/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; opacity: 0; transform: rotate(-8deg) scale(1.3); transition: opacity var(--motion-fast) var(--motion-curve), transform var(--motion-normal) var(--motion-curve); }
html.ds .ccn-cry-demo[data-step="4"] .ccn-cd-stamp { opacity: 1; transform: rotate(-8deg); }

/* ===================================================================== THE ARTWORK (17 October 2026, the NYT bar; scripts/build-game-art.mjs)
   The foyer: flocked wallpaper on the wall, the cinema carpet on the floor band, brushed brass on the frames and the marquee's trim,
   each tiled small and kept quiet under the room's own light (the wine-dark gradient lies over the paper). The posters: the painted
   ones, over the code-drawn covers. Without the art nothing changes. */
html.ds .ccn.has-art::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(180deg, rgb(28 10 16 / .55) 0%, rgb(34 9 15 / .62) 46%, rgb(22 6 9 / .78) 82%), var(--ccn-wall); background-size: auto, 220px 220px; background-repeat: repeat; opacity: .9; }
/* (20 October 2026, the owner: the foot's "2 of 4 played today" sat too close to the carpet's brass line above it) the carpet is the
   foot's own floor now: its brass edge is the foot's top, with room under it at every text size and at 320pt, down to the screen's edge */
html.ds .ccn.has-art .ccn-foot { position: relative; margin-top: 6px; margin-bottom: calc(-1 * max(12px, calc(env(safe-area-inset-bottom, 0px) + 4px)));
  padding-top: calc(14px + 2 * var(--type-unit)); padding-bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 14px));
  background-image: linear-gradient(180deg, rgb(10 3 6 / .92) 0%, rgb(10 3 6 / .45) 26%, rgb(10 3 6 / .55) 100%), var(--ccn-carpet); background-size: auto, 90px 90px; box-shadow: inset 0 1px 0 rgb(217 180 106 / .35); }
html.ds .ccn.has-art .ccn-case { background-image: linear-gradient(145deg, rgb(255 240 200 / .45), rgb(166 124 52 / .05) 42%, rgb(60 36 8 / .55)), var(--ccn-brass-img); background-size: auto, 100px 100px; }
html.ds .ccn.has-art .ccn-sign { background-image: linear-gradient(180deg, #33101a, #1c070c); box-shadow: 0 16px 26px -14px rgb(0 0 0 / .9), inset 0 0 0 2px rgb(217 180 106 / .65), inset 0 1px 0 rgb(255 230 180 / .18); }
html.ds .ccn.has-art .ccn-sign::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: 16px; pointer-events: none; background-image: linear-gradient(180deg, rgb(255 240 200 / .25), rgb(60 36 8 / .45)), var(--ccn-brass-img); background-size: auto, 100px 100px; }
html.ds .ccn.has-art .ccn-dialog { z-index: 2; }
html.ds .ccn-poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve); -webkit-user-drag: none; user-select: none; }
html.ds .ccn-poster.is-in { opacity: 1; }
/* the code-drawn cover underneath is only the fallback: once the painted poster is in, it is not seen through it */
html.ds .ccn-art:has(> .ccn-poster.is-in) > :not(.ccn-poster) { visibility: hidden; }
/* that swap is never a move: the fallback cover (and its ::before/::after) hides at once, so the app's Reduce Motion catch-all
   (every property, .01ms) cannot turn it into a stray transition; under Reduce Motion and Low Power the poster appears at once (18 Oct 2026) */
html.ds .ccn-art > :not(.ccn-poster), html.ds .ccn-art > :not(.ccn-poster) *, html.ds .ccn-art > :not(.ccn-poster)::before, html.ds .ccn-art > :not(.ccn-poster)::after,
html.ds .ccn-art > :not(.ccn-poster) *::before, html.ds .ccn-art > :not(.ccn-poster) *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) { html.ds .ccn-poster { transition: none !important; } }
html.ds.mo-low-power .ccn-poster, html.ds #device.manual-reduced-motion .ccn-poster { transition: none !important; }

/* Today's ticket, the painted one: its main part and its stub two pictures cut at the perforation (the stub tears alone); the words
   sit on the cream; the drawn paper, notches and red rule step aside */
/* the paper's height follows its words (never shorter than the painting's own proportions would make it at this width: min-height) */
html.ds .ccn-ticket.has-art { grid-template-columns: var(--tk-split, 76%) minmax(0, 1fr); min-height: 0; height: auto; }
html.ds .ccn-ticket.has-art .ccn-tk-main { align-content: start; }
/* each piece in its own cell (the main part, then the stub after the perforation), whatever else is laid into the ticket */
html.ds .ccn-ticket > .ccn-tk-main { grid-area: 1 / 1; }
html.ds .ccn-ticket > .ccn-tk-stub { grid-area: 1 / 2; }
html.ds .ccn-ticket.has-art :is(.ccn-tk-main, .ccn-tk-stub) { background: none; box-shadow: none; border-radius: 0; overflow: visible; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .55)); }
html.ds .ccn-ticket.has-art .ccn-tk-main { background-image: var(--tk-main); background-size: 100% 100%; background-repeat: no-repeat; padding: 12.5% 12% 12.5% 13.5%; }
html.ds .ccn-ticket.has-art .ccn-tk-stub { background-image: var(--tk-stub); background-size: 100% 100%; background-repeat: no-repeat; padding: 14% 32% 14% 14%; gap: 6px; }
html.ds .ccn-ticket.has-art :is(.ccn-tk-main, .ccn-tk-stub)::before, html.ds .ccn-ticket.has-art :is(.ccn-tk-main, .ccn-tk-stub)::after, html.ds .ccn-ticket.has-art .ccn-tk-main > .ccn-tk-admit::before { content: none; }
html.ds .ccn-ticket.has-art .ccn-tk-name { font-size: min(calc(21 * var(--type-unit)), 6.4cqw); line-height: 1.02; color: #2a1236; }
html.ds .ccn-ticket.has-art .ccn-tk-admit { color: #8a2a6a; font-size: calc(10 * var(--type-unit)); }
/* (release polish, 28 October 2026; the owner) ADMIT ONE stands a little clear of the ticket's inner edge */
html.ds .ccn-ticket.has-art .ccn-tk-admit { margin-top: 5px; }
html.ds .ccn-ticket.has-art .ccn-tk-games { margin: 1px 0 0; gap: 0 5px; font-size: calc(8.5 * var(--type-unit)); line-height: calc(11 * var(--type-unit)); color: rgb(42 18 54 / .6); }
html.ds .ccn-ticket.has-art .ccn-tk-line { font-size: calc(11.5 * var(--type-unit)); line-height: calc(14 * var(--type-unit)); color: rgb(42 18 54 / .74); }
html.ds .ccn-ticket.has-art .ccn-tk-cta { text-wrap: balance; margin-top: 4px; min-height: 24px; padding: 0 10px; background: linear-gradient(180deg, #5b2a7d, #3a1556); color: #ffe7a8; font-size: calc(11.5 * var(--type-unit)); box-shadow: inset 0 0 0 1px rgb(255 214 120 / .5); }
html.ds .ccn-ticket.has-art .ccn-tk-dot { background: #8a2a6a; }
html.ds .ccn-ticket.has-art .ccn-tk-bulbs { display: grid; grid-template-columns: repeat(2, 10px); gap: 5px; }
html.ds .ccn-ticket.has-art .ccn-tk-bulb { width: 10px; height: 10px; }
html.ds .ccn-ticket.has-art .ccn-tk-go { width: 28px; height: 28px; background: linear-gradient(180deg, #5b2a7d, #3a1556); color: #ffe7a8; box-shadow: inset 0 0 0 1px rgb(255 214 120 / .5); }
html.ds .ccn-ticket.has-art .ccn-tk-go svg { width: 15px; height: 15px; }
html.ds .ccn-ticket.has-art .ccn-tk-serial { font: 600 min(calc(10 * var(--type-unit)), 11px)/1 "Credits TRIPTIC", var(--font-ui); letter-spacing: .02em; color: #8a2a6a; }

/* (20 October 2026) the membership sheet opened from the room (a game's free plays used: tripMembership.paywall("games")) stands over the
   room and the game in it, not under them */
html.ds #device:has(> .ccn) > .tm-sheet-layer { z-index: 330; }

/* ===== prototype-src/end-credits.css ===== */
/* TRIPTIC End Credits: THE FALLING WORLD (21 October 2026; behaviour and record: end-credits.js, hub/docs/FREEFALL-2026-10-21.md).
   Not a ds-* file: it has its own palette (the watercolour world, glass over it, the app's gold and violet), but type sizes go through
   var(--type-unit) so the text-size setting scales them, and every duration and curve is a motion token. NO @keyframes: the drop,
   Flick's drift, the air's particles and the moments are driven from script (transform and opacity only), so nothing here loops.
   Reduce Motion / Low Power: the script draws no particles, no drift and no falling camera (a cross-fade instead); the fades below
   become instant. Labels over the watercolour stand on glass chips (a dark tint, no backdrop blur: the world moves under them). */

/* the condensed face is declared here and used beyond the game (the room's sign and board, the ticket): keep it even though the
   falling world itself no longer sets type in it */
@font-face { font-family: "Credits TRIPTIC"; src: url("/assets/fonts/barlow-condensed-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Credits TRIPTIC"; src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

.ec, .ec-theme {
  --gs-bg: #120e22; --gs-sheet: #17122a; --gs-ink: #fff; --gs-dim: rgb(255 255 255 / .74); --gs-mute: rgb(255 255 255 / .52); --gs-line: rgb(244 213 141 / .24);
  --gs-accent: #f4d58d; --gs-panel: rgb(244 213 141 / .08); --gs-btn: #f4d58d; --gs-on-btn: #1a1206;
  --gs-title-font: var(--font-display, "Fraunces TRIPTIC", system-ui, serif); --gs-title-weight: 500; --gs-title-track: .01em; --gs-title-case: none;
  --gs-big-font: var(--font-display, "Fraunces TRIPTIC", system-ui, serif);
  --gs-key: rgb(255 255 255 / .14); --gs-key-fn: rgb(255 255 255 / .07);
  --gs-head-bg: rgb(18 14 34 / .92);
}
.ec {
  --ff-glass: rgb(18 14 34 / .64); --ff-glass-hi: rgb(18 14 34 / .82); --ff-glass-line: rgb(255 255 255 / .16); --ff-gold: #f4d58d; --ff-violet: #b9a4ff;
  --ff-top: #19152e; --ff-foot: #3a1a10; --ff-dock-h: 0px; --ff-head: 64px; --ff-focus: 50%; --ff-fs: 106px;
  /* (28 October 2026, the owner: the "+20 · 14% named it" chip touched the depth gauge's bead) the right-hand gutter the gauge owns: its
     6pt column 6pt in, its bead 4pt proud of it, and 12pt clear before any label (the trail's, the rarity chip, the landing card) */
  --ff-gutter: 32px;
  /* (3 November 2026) the prompt ring's four bands as the time runs out (end-credits.js ringBand): each at least 4.5:1 on the field */
  --ec-ring-go: #7ddc9b; --ec-ring-mid: #f6d55c; --ec-ring-low: #ff9f4a; --ec-ring-end: #ff6464;
  position: absolute; inset: 0; overflow: hidden; background: var(--ff-top); color: #fff; box-sizing: border-box;
  font-family: var(--font-ui, system-ui, -apple-system, sans-serif); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
.ec *, .ec *::before, .ec *::after { box-sizing: border-box; }
.ec [hidden] { display: none !important; }
.ec > .gs-head { z-index: 8; }
/* the header always stands on glass over the watercolour (its words read over a pale sky) */
.ec > .gs-head::before { opacity: 1; }
.ec button:focus-visible { outline: 2px solid var(--ff-gold); outline-offset: 2px; }

/* ---- the stage and the world: a column of sixteen layers, moved by one transform while playing, scrolled freely after */
.ff-stage { position: absolute; inset: 0; z-index: 1; overflow: hidden; overscroll-behavior: contain; }
.ec.is-result .ff-stage { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ff-world { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
.ec.is-result .ff-world { will-change: auto; }
.ff-pad { position: absolute; left: 0; right: 0; }
.ff-pad-top { top: 0; background: var(--ff-top); }
.ff-pad-bot { background: var(--ff-foot); }
/* each layer: its own top and foot colour under the picture (the picture fades in only once decoded) */
.ff-layer { position: absolute; left: 0; width: 100%; overflow: visible; background: linear-gradient(180deg, var(--ff-a), var(--ff-b)); }
.ff-bd { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve); pointer-events: none; }
.ff-bd.is-in { opacity: 1; }
/* (R2-D, 22 October 2026) while playing, each decoded backdrop near Flick (at most six: the rest are let go) is its own compositor
   layer: WebKit shows it as a directly composited image (no tile painting on the main thread when the camera reaches it) and
   Chromium rasters it on its own, so the layer the drop falls into is not drawn late as a bare gradient */
.ec:not(.is-result) .ff-bd.is-in { will-change: transform; }

/* ---- the eggs: buttons at the sides, a pre-rendered contact shadow, a glow that shows when lifted (opacity), a lift (transform) */
.ff-egg { position: absolute; z-index: 2; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; min-width: 44px; min-height: 44px; -webkit-tap-highlight-color: transparent; }
.ff-egg-in { position: absolute; inset: 0; display: block; opacity: 0; transform: none; transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-curve); }
.ff-egg.is-in .ff-egg-in { opacity: 1; }
.ff-egg-im, .ff-egg-im2 { position: absolute; left: 0; bottom: 8%; width: 100%; height: 92%; object-fit: contain; object-position: 50% 100%; pointer-events: none; }
.ff-egg-sh { position: absolute; left: 12%; right: 12%; bottom: 0; width: 76%; height: 18%; opacity: .85; pointer-events: none; transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-curve); }
/* (27 October 2026) only an egg that stands on the ground casts its contact shadow; what flies, floats, swims or hangs casts none */
.ff-egg:not(.is-ground) .ff-egg-sh { display: none; }
.ff-egg-glow { position: absolute; left: -22%; top: -22%; width: 144%; height: 144%; opacity: 0; pointer-events: none; transition: opacity var(--motion-normal) var(--motion-curve); }
.ff-egg.is-lift .ff-egg-in { transform: translateY(-8px) scale(1.08); }
.ff-egg.is-lift .ff-egg-glow { opacity: .9; }
.ff-egg.is-lift .ff-egg-sh { opacity: .45; transform: scale(.86); }
.ff-egg:active .ff-egg-in { transform: scale(.97); }
/* a pair: the chocolates and the feather; the fin and its beach sign */
.ff-egg.is-pair .ff-egg-im { left: 30%; width: 70%; }
.ff-egg.is-pair .ff-egg-im2 { left: 0; width: 46%; height: 70%; bottom: 22%; }
.ff-egg[data-egg="B32"] .ff-egg-im { left: 0; width: 72%; }
.ff-egg[data-egg="B32"] .ff-egg-im2 { left: auto; right: 0; width: 34%; height: 46%; bottom: 46%; }
.ff-egg-sign { position: absolute; left: 5%; width: 36%; top: 26%; height: 22%; display: grid; place-items: center; text-align: center; font: 800 clamp(7px, 2.2vw, 11px)/1.02 var(--font-ui, system-ui, sans-serif); letter-spacing: .02em; color: #6b1d12; pointer-events: none; }
/* the core crystal: the finish line (no button: not a film); lit when Flick reaches it */
.ff-core { position: absolute; z-index: 1; display: block; opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve); pointer-events: none; }
.ff-core.is-in { opacity: 1; }
.ff-core-im { position: absolute; inset: 0 0 10% 0; width: 100%; height: 90%; object-fit: contain; object-position: 50% 100%; }
.ff-core .ff-egg-sh { left: 10%; right: 10%; width: 80%; height: 16%; }
.ff-core-glow { position: absolute; left: -30%; top: -30%; width: 160%; height: 160%; opacity: .35; transition: opacity var(--motion-ceremony) var(--motion-curve); }
.ff-core.is-lit .ff-core-glow { opacity: 1; }

/* ---- Flick: one picture a pose; the one for where he is shown */
.ff-flick { position: absolute; z-index: 4; top: 0; left: 0; opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve); pointer-events: none; will-change: transform; }
.ff-flick.is-in { opacity: 1; }
.ff-flick-bob, .ff-flick-shake { position: absolute; inset: 0; }
.ff-flick-im { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity var(--motion-fast) var(--motion-curve); }
.ff-flick-im.is-on { opacity: 1; }

/* ---- the trail: dotted down the middle, a bead at each landing, its label on a glass chip */
.ff-trail { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 3; pointer-events: none; }
.ff-seg { position: absolute; left: calc(50% - 1.5px); width: 3px; transform-origin: 50% 0; background: radial-gradient(circle at 50% 50%, rgb(255 255 255 / .95) 1.3px, transparent 1.6px) 0 0 / 3px 9px repeat-y; }
.ff-dot { position: absolute; left: calc(50% - 6px); width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgb(18 14 34 / .45), 0 2px 6px rgb(0 0 0 / .3); transition: opacity var(--motion-normal) var(--motion-curve); }
.ff-tag { position: absolute; left: calc(50% + var(--ff-fs) * .44); margin-top: -13px; max-width: calc(50% - var(--ff-fs) * .44 - var(--ff-gutter)); padding: 4px 10px; border-radius: 999px; background: var(--ff-glass-hi); box-shadow: inset 0 0 0 1px var(--ff-glass-line); color: #fff; width: max-content; white-space: normal; text-wrap: balance;
  font: 600 calc(12 * var(--type-unit, 1px))/1.5 var(--font-ui, system-ui, sans-serif); font-variant-numeric: tabular-nums; transition: opacity var(--motion-normal) var(--motion-curve); }
.ff-tag.is-left { left: auto; right: calc(50% + var(--ff-fs) * .44); }
.ff-dot.is-wait, .ff-tag.is-wait { opacity: 0; }
/* a label waits while Flick sits on its landing (the landing chip says it), shows as he moves on, and the older ones step back */
.ff-tag.is-past { opacity: .72; }

/* ---- the air: particles (script places them), the moments at the crossings, the paper's grain over the whole world */
.ff-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.ff-fx > i { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--ff-pc); will-change: transform, opacity; opacity: 0; }
.ff-fx > i.is-soft { background: radial-gradient(closest-side, var(--ff-pc), transparent); }
.ff-fx > i.is-ring { background: none; border: 1px solid var(--ff-pc); }
.ff-grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; background-size: 256px 256px; opacity: .55; }
.ff-fade { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity var(--motion-fast) var(--motion-curve); }
.ff-fade.is-on { opacity: 1; }

/* ---- the layer's name, softly, as he enters it (a glass chip under the header) */
.ff-place { position: absolute; left: 0; right: 0; top: calc(var(--ff-head) + 18px); z-index: 5; margin: 0; display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity var(--motion-slow) var(--motion-curve), transform var(--motion-slow) var(--motion-curve); }
.ff-place.is-on { opacity: 1; transform: none; }
.ff-place span { padding: 6px 16px; border-radius: 999px; background: var(--ff-glass); box-shadow: inset 0 0 0 1px var(--ff-glass-line); font: 500 calc(17 * var(--type-unit, 1px))/1.3 var(--font-display, "Fraunces TRIPTIC", system-ui, serif); letter-spacing: .01em; color: #fff; }
.ec.is-result .ff-place { display: none; }

/* ---- the depth gauge: a slim column of the sixteen layers' colours at the side, Flick's bead on it */
/* (28 October 2026, the owner: "the colourful depth bar on the right edge is half hidden under the prompt card", its bead "a small dark
   dot clipped at the top right") the gauge starts under the prompt card's foot (--ff-qfoot, end-credits.js measure), not the header */
.ff-gauge { position: absolute; z-index: 6; right: 6px; top: calc(max(var(--ff-head), var(--ff-qfoot, 0px)) + 12px); bottom: calc(var(--ff-dock-h) + 14px); width: 6px; display: grid; grid-template-rows: repeat(16, 1fr); border-radius: 4px; overflow: visible; box-shadow: 0 0 0 1px rgb(255 255 255 / .35); }
.ff-gauge > b { display: block; opacity: .9; }
.ff-gauge > b:first-child { border-radius: 3px 3px 0 0; }
.ff-gauge > b:nth-child(16) { border-radius: 0 0 3px 3px; }
.ff-gauge-mark { position: absolute; left: -4px; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--ff-gold); box-shadow: 0 0 0 2px #1a1206, 0 2px 6px rgb(0 0 0 / .4); will-change: transform; }

/* ---- the landing card: the film, its rarity and how many named it, just above Flick */
.ff-land { position: absolute; z-index: 6; left: 50%; top: calc(var(--ff-focus) - var(--ff-fs) / 2 - 14px); translate: -50% -100%; width: max-content; max-width: min(340px, calc(100% - 2 * var(--ff-gutter))); display: grid; justify-items: center; gap: 2px; padding: 10px 16px 11px; border-radius: 16px;
  background: var(--ff-glass-hi); box-shadow: inset 0 0 0 1px var(--ff-glass-line), 0 10px 26px rgb(0 0 0 / .28); text-align: center; pointer-events: none; opacity: 0; transform: translateY(6px) scale(.98); transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-curve); }
.ff-land.is-on { opacity: 1; transform: none; }
.ff-land-film { font: 500 calc(17 * var(--type-unit, 1px))/1.25 var(--font-display, "Fraunces TRIPTIC", system-ui, serif); color: #fff; text-wrap: balance; }
.ff-land-line { font: 600 calc(13 * var(--type-unit, 1px))/1.35 var(--font-ui, system-ui, sans-serif); color: var(--ff-gold); font-variant-numeric: tabular-nums; }
.ff-land-est { font-size: calc(11 * var(--type-unit, 1px)); line-height: 1.3; color: rgb(255 255 255 / .6); }
/* after a moment the card settles into a compact chip (the rarity and points only), so the fall stays the hero */
.ff-land.is-chip { padding: 5px 12px; border-radius: 999px; }
.ff-land.is-chip :is(.ff-land-film, .ff-land-est) { display: none; }
.ff-land-est:empty { display: none; }

/* ---- (3 November 2026, the owner: "make this easier to interpret") THE STAT LINE: a right film's rarity, points and share, just under
   the top bar in the prompt counter's place (end-credits.js rareFor sets its top on the label row), for TUNE.statMs. Four bands, each
   its colour AND its word: the band word on a chip of the band's colour (dark ink on it, 9:1 or more), the line white on near-opaque
   night glass (AA well over 4.5:1 on any sky); a ring of the band's colour round it. Never over Flick's path, the field or the keys. */
.ec [data-band="popular"] { --ff-band: #e4e2ec; }
.ec [data-band="good"] { --ff-band: #8fd3ff; }
.ec [data-band="rare"] { --ff-band: #c4a3ff; }
.ec [data-band="very-rare"] { --ff-band: #f4d58d; }
.ff-stat { position: absolute; z-index: 8; left: 18px; top: calc(max(4px, env(safe-area-inset-top, 0px)) + 58px); margin: 0; max-width: calc(100% - 52px); box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; padding: 3px 12px 4px 10px; border-radius: 14px; background: rgb(18 14 34 / .94);
  box-shadow: inset 0 0 0 1px var(--ff-band, rgb(255 255 255 / .3)), 0 6px 16px rgb(0 0 0 / .26); color: #fff; text-align: left; pointer-events: none;
  font: 600 calc(12.5 * var(--type-unit, 1px))/1.35 var(--font-ui, system-ui, sans-serif); font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(-4px); transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-curve); }
.ff-stat.is-on { opacity: 1; transform: none; }
.ff-stat-band { margin-left: -7px; padding: 1px 8px; border-radius: 999px; background: var(--ff-band, #fff); color: #140f24; font-weight: 700; letter-spacing: .01em; }
.ff-stat-pts { font-weight: 700; }
.ff-stat-share { font-weight: 500; color: rgb(255 255 255 / .92); }
.ff-stat-est { font-size: calc(11 * var(--type-unit, 1px)); font-weight: 500; color: rgb(255 255 255 / .66); white-space: nowrap; }
.ec.is-result .ff-stat { display: none; }
/* the counter steps back while the line is in its place (it stays in VoiceOver's reach); a line that wraps (the largest text on a
   narrow phone) makes room in the label row rather than lie over the prompt */
.ec-qn { transition: opacity var(--motion-slow) var(--motion-curve); }
.ec-q.is-rare .ec-qn { opacity: 0; }
.ec-q.is-rare .ec-lab { min-height: var(--ff-stat-room, 0px); }
/* while the line is up, the next prompt comes in on its fade alone (no drop from above, which would pass under the line) */
.ec-q.is-rare.is-away { transform: none; }
/* the trail's labels: in play the stat line says it (nothing floats beside Flick); on the result the trail is read in the same words */
.ec:not(.is-result) .ff-tag { visibility: hidden; }
.ff-tag { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--ff-band, var(--ff-glass-line)); }
.ff-tag .ff-stat-band { display: inline-block; margin: 0 4px 2px -6px; padding: 0 7px; }
.ff-tag .ff-stat-share { display: block; }
.ff-tag .ff-stat-est { display: block; }

/* ---- the prompt: on glass at the top; the feedback band above the field */
.ec-q { position: absolute; left: 0; right: 0; top: 0; z-index: 7; padding: calc(max(4px, env(safe-area-inset-top, 0px)) + 62px) 22px 16px;
  background: linear-gradient(180deg, rgb(18 14 34 / .9) 0%, rgb(18 14 34 / .82) 78%, rgb(18 14 34 / .66) 100%); box-shadow: 0 1px 0 rgb(255 255 255 / .08), 0 14px 28px rgb(0 0 0 / .18);
  border-radius: 0 0 22px 22px; transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-curve); }
.ec-q.is-away { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.ec.is-kb .ec-q { max-height: calc(100% - var(--ff-dock-h, 0px) - 8px); overflow-y: auto; overscroll-behavior: contain; }
.ec-lab { position: relative; display: flex; align-items: center; font: 700 calc(11.5 * var(--type-unit, 1px))/1.3 var(--font-ui, system-ui, sans-serif); letter-spacing: .18em; color: var(--ff-gold); }
.ec-qt { margin: 6px 0 0; font-family: var(--font-display, "Fraunces TRIPTIC", system-ui, serif); font-weight: 400; font-size: calc(25 * var(--type-unit, 1px)); line-height: 1.16; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.ec-band { position: relative; display: grid; align-items: center; min-height: 24px; margin: 8px 0 0; }
.ec-band > span { grid-area: 1 / 1; opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve); }
.ec-band > span.is-on { opacity: 1; }
.ec-flash { font: 400 calc(16 * var(--type-unit, 1px))/1.3 var(--font-display, "Fraunces TRIPTIC", system-ui, serif); color: #fff; }
.ec-note { font: 600 calc(13 * var(--type-unit, 1px))/1.3 var(--font-ui, system-ui, sans-serif); color: var(--ff-gold); }
.ec-field { position: relative; margin-top: 6px; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; border-radius: 14px; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2);
  --gs-mirror-pad: 0 48px 0 14px; font-family: var(--font-ui, system-ui, -apple-system, sans-serif); font-size: max(16px, calc(17 * var(--type-unit, 1px))); }
.ec-q.is-locked .ec-field { box-shadow: inset 0 0 0 1px rgb(244 213 141 / .6); }
.ec-field:focus-within { box-shadow: inset 0 0 0 1px rgb(244 213 141 / .6); }
.ec-in { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; caret-color: var(--ff-gold); font-family: var(--font-ui, system-ui, -apple-system, sans-serif); font-size: max(16px, calc(17 * var(--type-unit, 1px))); padding: 0; border-radius: 0; -webkit-appearance: none; appearance: none; user-select: text; -webkit-user-select: text; }
html .ec .ec-in, html .ec .ec-in:focus, html .ec .ec-in:focus-visible, html .ec .ec-in:disabled { outline: 0 !important; box-shadow: none !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; height: 100%; }
.ec-in::placeholder { color: rgb(255 255 255 / .45); }
.ec-in:disabled { opacity: 1; -webkit-text-fill-color: #fff; }
.ec-ring { flex: none; margin-left: auto; }
.ec-ringc { stroke: var(--ec-ring-go); transition: stroke var(--motion-normal) var(--motion-curve); }
.ec-ringc[data-band="mid"] { stroke: var(--ec-ring-mid); }
.ec-ringc[data-band="low"] { stroke: var(--ec-ring-low); }
.ec-ringc[data-band="end"] { stroke: var(--ec-ring-end); }
.ec.is-reduced .ec-ringc, html.reduce-motion .ec-ringc, #device.manual-reduced-motion .ec-ringc { transition: none; }
@media (prefers-reduced-motion: reduce) { .ec-ringc { transition: none; } }
.ec-drop { list-style: none; margin: 6px 0 0; padding: 0; border-radius: 14px; overflow: hidden; background: rgb(24 19 42 / .97); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); font-family: var(--font-ui, system-ui, -apple-system, sans-serif); }
.ec-drop li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; min-height: 44px; padding: 11px 14px; font-size: calc(15 * var(--type-unit, 1px)); color: rgb(255 255 255 / .92); border-top: 1px solid rgb(255 255 255 / .07); cursor: pointer; }
.ec-drop li:first-child { border-top: 0; }
.ec-drop li .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-drop li em { flex: none; font-style: normal; color: rgb(255 255 255 / .68); font-variant-numeric: tabular-nums; }
/* (22 October 2026) two films of one title: the year and director tell them apart, so they read clearly and may take more room */
.ec-drop li em.is-twin { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(244 213 141 / .92); }
.ec-drop li.is-active { background: rgb(244 213 141 / .18); }
.ec-drop li.ec-none { cursor: default; color: rgb(255 255 255 / .55); }
.ec-tried { margin: 8px 0 0; font-size: calc(13 * var(--type-unit, 1px)); line-height: 1.35; color: rgb(255 255 255 / .62); }
.ec-tried:empty { display: none; }
.ec-tr-h { color: rgb(255 255 255 / .5); }
.ec-tried s { text-decoration-color: rgb(255 255 255 / .45); color: rgb(255 255 255 / .76); }
.ec-help { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 10px; transition: opacity var(--motion-normal) var(--motion-curve); }
.ec-q.is-locked .ec-help { opacity: .45; }
.ec .ec-hintbtn { flex: 0 1 auto; min-width: 0; height: auto; flex-wrap: wrap; row-gap: 4px; padding-top: 6px; padding-bottom: 6px; border-radius: 22px; text-align: left; }
.ec .ec-hintbtn .gs-hint-l { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.ec .ec-hintbtn .gs-cost, .ec .ec-hintbtn .gs-hint-i { flex: none; }
.ec-pass { appearance: none; min-height: 44px; padding: 0 12px; border: 0; background: none; color: rgb(255 255 255 / .72); font: 600 calc(14 * var(--type-unit, 1px))/1 var(--font-ui, system-ui, sans-serif); letter-spacing: .02em; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(255 255 255 / .3); cursor: pointer; }
.ec-pass[disabled] { opacity: .4; }
/* the in-game keyboard, the films right above it */
.ec-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; padding: 0 4px; background: linear-gradient(180deg, rgb(18 14 34 / .9), rgb(14 10 26 / .97) 40%); box-shadow: 0 -1px 0 rgb(255 255 255 / .08); border-radius: 18px 18px 0 0; }
.ec-dock .ec-drop { margin: 6px 4px 0; max-height: calc(4 * 44px + 2px); overflow-y: auto; }

/* ---- the egg card: glass, the film, Add to Watchlist, how many found */
.ff-card { position: absolute; z-index: 9; padding: 14px 16px 12px; border-radius: 18px; background: rgb(22 17 40 / .92); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 16px 34px rgb(0 0 0 / .34); color: #fff;
  opacity: 0; transform: translateY(6px) scale(.98); transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-curve); }
.ff-card.is-on { opacity: 1; transform: none; }
.ff-card-what { margin: 0 32px 4px 0; font-size: calc(12 * var(--type-unit, 1px)); line-height: 1.35; color: rgb(255 255 255 / .66); }
.ff-card-film { margin: 0 32px 10px 0; font: 500 calc(19 * var(--type-unit, 1px))/1.2 var(--font-display, "Fraunces TRIPTIC", system-ui, serif); }
.ff-card-film span { font: 500 calc(13 * var(--type-unit, 1px))/1 var(--font-ui, system-ui, sans-serif); color: rgb(255 255 255 / .6); }
.ff-card-save { display: block; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 999px; background: var(--ff-gold); color: #1a1206; font: 700 calc(15 * var(--type-unit, 1px))/1.2 var(--font-ui, system-ui, sans-serif); cursor: pointer; }
.ff-card-save[aria-pressed="true"] { background: rgb(255 255 255 / .14); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .24); }
.ff-card-note { margin: 0; font-size: calc(13 * var(--type-unit, 1px)); color: rgb(255 255 255 / .7); }
.ff-card-found { margin: 10px 0 0; font: 600 calc(12 * var(--type-unit, 1px))/1.3 var(--font-ui, system-ui, sans-serif); color: var(--ff-gold); }
.ff-card-x { position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; border: 0; background: none; color: rgb(255 255 255 / .8); font-size: 22px; line-height: 1; cursor: pointer; }

/* (27 October 2026, No. 27) the sheet is opaque: at 90% the trail's labels under it ("+100 · 0.2% named it") showed through as faded
   leftover chips */
/* ---- the result: ONE glass sheet resting low over the world (the headline, Share and Done showing), a grab handle to draw it up
   for the rest; the world, Flick and the trail stay the hero above it (21 October 2026, the coordinator) */
.ff-res { position: absolute; z-index: 7; left: 50%; bottom: 0; width: min(560px, 100%); translate: -50% 0; max-height: calc(100% - var(--ff-head) - 10px); display: flex; flex-direction: column;
  border-radius: 26px 26px 0 0; background: rgb(20 15 36); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 -10px 30px rgb(0 0 0 / .26); color: #fff; text-align: center;
  transition: transform var(--motion-normal) var(--motion-curve); will-change: transform; }
.ff-res.is-drag { transition: none; }
.ff-grip { flex: none; display: grid; place-items: center; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.ff-grip i { display: block; width: 40px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / .45); }
.ff-res-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 18px max(20px, calc(env(safe-area-inset-bottom, 0px) + 14px)); }
.ff-res:not(.is-open) .ff-res-body { overflow: hidden; }
/* (3 November 2026) at rest the inert rest is not drawn: no half line under Done (or behind the home indicator) that a finger cannot
   reach; it comes in as the sheet is drawn up (the finger on it, or the grip) */
.ff-res .gs-result > :not(.gs-res-big, .gs-res-acts) { transition: opacity var(--motion-fast) var(--motion-curve); }
.ff-res:not(.is-open, .is-drag) .gs-result > :not(.gs-res-big, .gs-res-acts) { opacity: 0; }
.ec.is-reduced .ff-res .gs-result > *, html:is(.reduce-motion, .mo-low-power) .ff-res .gs-result > * { transition: none; }
@media (prefers-reduced-motion: reduce) { .ff-res .gs-result > * { transition: none; } }
.ff-res .gs-result { margin: 0; }
.ff-res .gs-res-acts { margin-top: 12px; }
/* one surface: the headline stands on the sheet itself (feel-wire.css prints the old result on black card stock) */
.ff-res .gs-res-big { background: none; box-shadow: none; padding: 0; }
html.ds .ec .ff-res .ec-res-in, .ec .ff-res .ec-res-in { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.ec.is-result .ff-gauge { bottom: calc(var(--ff-peek, 200px) + 12px); }
.ff-res-big { display: grid; justify-items: center; gap: 4px; }
.ff-res-big small { font: 700 calc(11.5 * var(--type-unit, 1px))/1.3 var(--font-ui, system-ui, sans-serif); letter-spacing: .2em; color: var(--ff-gold); }
.ff-res-big .ec-res-label { font: 500 calc(34 * var(--type-unit, 1px))/1.08 var(--font-display, "Fraunces TRIPTIC", system-ui, serif); letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; }
.ec-res-pts { margin: 4px 0 0; font-size: calc(14 * var(--type-unit, 1px)); color: rgb(255 255 255 / .78); }
.ec-res-pts b { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.ec-res-rare { margin: 6px 0 0; font: 400 calc(14.5 * var(--type-unit, 1px))/1.4 var(--font-display, "Fraunces TRIPTIC", system-ui, serif); color: rgb(255 255 255 / .88); text-wrap: pretty; }
/* (27 October 2026) one line: the share of players stays with its dot; an estimate is said quietly after it */
.ec-res-share { white-space: nowrap; }
.ff-res .ec-res-est { font: 500 calc(11.5 * var(--type-unit, 1px))/1.3 var(--font-ui, system-ui, sans-serif); color: rgb(255 255 255 / .55); white-space: nowrap; }
.ec-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ec-res-h { margin: 6px 0 8px; font: 700 calc(11.5 * var(--type-unit, 1px))/1.3 var(--font-ui, system-ui, sans-serif); letter-spacing: .18em; text-transform: uppercase; color: var(--ff-gold); }
.ec-res-seven { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.ec-res-seven li { display: grid; grid-template-columns: 1fr 1.2fr; column-gap: 12px; font-size: calc(12.5 * var(--type-unit, 1px)); line-height: 1.35; color: rgb(255 255 255 / .62); }
.ec-res-seven .n { color: rgb(255 255 255 / .92); }
.ec-res-seven .n.is-none { color: rgb(255 255 255 / .4); }
.ec-res-t { display: block; font-style: normal; font-weight: 600; color: var(--ff-gold); }
.ff-res-found { margin: 14px 0 0; font: 600 calc(13 * var(--type-unit, 1px))/1.3 var(--font-ui, system-ui, sans-serif); color: var(--ff-gold); }
.ff-res-explore { margin: 4px 0 0; font-size: calc(12.5 * var(--type-unit, 1px)); color: rgb(255 255 255 / .66); }
.ec.is-result .ec-q, .ec.is-result .ff-land { display: none; }

/* ---- the open message, Done */
.ec-open { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; align-content: center; gap: 22px; padding: 0 40px; background: var(--ff-top); text-align: center; font: 400 calc(19 * var(--type-unit, 1px))/1.4 var(--font-display, "Fraunces TRIPTIC", system-ui, serif); color: rgb(255 255 255 / .92); transition: opacity var(--motion-normal) var(--motion-curve); }
.ec-open.is-gone { opacity: 0; pointer-events: none; }
.ec-msg-done { font: 600 calc(16 * var(--type-unit, 1px)) var(--font-ui, system-ui, sans-serif); color: #fff; background: none; border: 0; padding: 12px 18px; min-height: 44px; cursor: pointer; }

/* ---- the start card: one picture and one line, then Play (How to play keeps the rules and the moving example) */
.gs-start.ec-start { top: var(--ff-head, calc(max(4px, env(safe-area-inset-top, 0px)) + 56px)); align-content: stretch; }
/* (28 October 2026) the landing itself is the one every game shares (game-shell.css .gs-start.has-hero); its hero is the cover below */

/* ---- the corner's cover: the mini world tile (the code-drawn colours under it until the picture is decoded) */
.ec-cover { position: absolute; inset: 0; overflow: hidden; display: block; background: linear-gradient(180deg, #2b2a5c 0%, #8fb8d8 30%, #c9d6de 48%, #2f8c9a 70%, #8a3418 100%); }
.ec-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve); }
.ec-cover img.is-in { opacity: 1; }

/* ---- How to play's worked example: a slice of the world, a prompt, a film typed and tapped, Flick dropping with his trail */
.ec-d { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #2b2a5c 0%, #8fb8d8 38%, #d8e2e6 52%, #3d93a0 74%, #1f4d6b 100%); font-family: var(--font-ui, system-ui, sans-serif); }
.ec-d-world { position: absolute; inset: 0; }
.ec-d-trail { position: absolute; left: calc(50% - 1px); top: 20px; width: 2px; height: 90px; transform-origin: 50% 0; transform: scaleY(0); background: radial-gradient(circle, #fff 1px, transparent 1.3px) 0 0 / 2px 7px repeat-y; transition: transform var(--motion-slow) var(--motion-curve); }
.ec-d-flick { position: absolute; left: calc(50% - 15px); top: 8px; width: 30px; height: 30px; border-radius: 9px; background: #2a1e3a; box-shadow: inset 0 6px 0 #f4d58d, 0 4px 10px rgb(0 0 0 / .3); transition: transform var(--motion-slow) var(--motion-curve); }
.ec-d-q { position: absolute; left: 12px; right: 12px; top: 8px; margin: 0; padding: 6px 10px; border-radius: 10px; background: rgb(18 14 34 / .82); font: 400 calc(14 * var(--type-unit, 1px))/1.2 var(--font-display, "Fraunces TRIPTIC", system-ui, serif); color: #fff; transition: opacity var(--motion-normal) var(--motion-curve); }
.ec-d-field { position: absolute; left: 12px; right: 12px; top: 42px; display: flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 8px; background: rgb(18 14 34 / .82); box-shadow: inset 0 0 0 1px rgb(244 213 141 / .5); color: #fff; font: 500 calc(13 * var(--type-unit, 1px))/1 var(--font-ui, system-ui, sans-serif); transition: opacity var(--motion-normal) var(--motion-curve); }
.ec-d-typed { font-weight: 500; opacity: 0; transition: opacity var(--motion-fast) var(--motion-curve); }
.ec-d-list { position: absolute; left: 12px; right: 12px; top: 74px; display: grid; border-radius: 8px; overflow: hidden; background: rgb(24 19 42 / .96); opacity: 0; transform: translateY(-4px); transition: opacity var(--motion-fast) var(--motion-curve), transform var(--motion-fast) var(--motion-curve); }
.ec-d-row { display: flex; justify-content: space-between; padding: 7px 10px; color: rgb(255 255 255 / .92); font: 500 calc(12 * var(--type-unit, 1px))/1 var(--font-ui, system-ui, sans-serif); }
.ec-d-row em { font-style: normal; color: rgb(255 255 255 / .5); }
.ec-d-row:first-child { background: rgb(244 213 141 / .2); }
.ec-d-rare { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: rgb(18 14 34 / .82); font: 600 calc(11 * var(--type-unit, 1px))/1.4 var(--font-ui, system-ui, sans-serif); color: #f4d58d; opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve); }
.ec-demo[data-step="2"] .ec-d-typed, .ec-demo[data-step="2"] .ec-d-list { opacity: 1; transform: none; }
.ec-demo:is([data-step="3"], [data-step="4"]) :is(.ec-d-q, .ec-d-field) { opacity: 0; }
.ec-demo:is([data-step="3"], [data-step="4"]) .ec-d-trail { transform: scaleY(1); }
.ec-demo:is([data-step="3"], [data-step="4"]) .ec-d-flick { transform: translateY(96px); }
.ec-demo[data-step="3"] .ec-d-rare { opacity: 1; }
.ec-demo.is-still .ec-d-trail { transform: scaleY(1); }
.ec-demo.is-still .ec-d-flick { transform: translateY(96px); }

/* ---- Settings: the field under the opt-in switch */
.ec-set-field { padding: 0 16px 16px 56px; }
.ec-set-field[hidden] { display: none !important; }
.ec-set-field label { display: grid; gap: 8px; color: rgb(255 255 255 / .62); font-size: calc(13 * var(--type-unit, 1px)); letter-spacing: .02em; }
.ec-set-in { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .06); color: #fff; font: inherit; font-size: calc(17 * var(--type-unit, 1px)); letter-spacing: 0; }
.ec-set-in::placeholder { color: rgb(255 255 255 / .34); }
.ec-set-in:focus-visible { outline: 2px solid rgb(244 213 141); outline-offset: 2px; }

/* ---- Reduce Motion and Low Power: every fade is instant; nothing lifts or slides (the script draws no particles and no fall) */
.ec.is-reduced :is(.ff-stat, .ec-qn, .ff-res, .ff-bd, .ff-egg-in, .ff-egg-sh, .ff-egg-glow, .ff-core, .ff-core-glow, .ff-flick, .ff-flick-im, .ff-dot, .ff-tag, .ff-place, .ff-land, .ec-q, .ec-band > span, .ec-help, .ff-card, .ec-open, .ec-cover img, .ec-d *) { transition: none; }
.ec.is-reduced .ff-egg.is-lift .ff-egg-in, .ec.is-reduced .ff-stat, .ec.is-reduced .ec-q.is-away, .ec.is-reduced .ff-place, .ec.is-reduced .ff-land, .ec.is-reduced .ff-card { transform: none; }
.ec.is-reduced .ff-fade { transition: opacity var(--motion-fast) linear; }
@media (prefers-reduced-motion: reduce) {
  :is(.ff-stat, .ec-qn, .ff-res, .ff-bd, .ff-egg-in, .ff-egg-sh, .ff-egg-glow, .ff-core, .ff-core-glow, .ff-flick, .ff-flick-im, .ff-dot, .ff-tag, .ff-place, .ff-land, .ec-q, .ec-band > span, .ec-help, .ff-card, .ec-open, .ec-cover img, .ec-d *) { transition: none; }
  .ff-egg.is-lift .ff-egg-in, .ff-stat, .ec-q.is-away, .ff-place, .ff-land, .ff-card { transform: none; }
}
html:is(.reduce-motion, .mo-low-power) :is(.ff-res, .ff-bd, .ff-egg-in, .ff-egg-sh, .ff-egg-glow, .ff-core, .ff-core-glow, .ff-flick, .ff-flick-im, .ff-dot, .ff-tag, .ff-place, .ff-land, .ec-q, .ec-band > span, .ec-help, .ff-card, .ec-open, .ec-cover img) { transition: none; }
html:is(.reduce-motion, .mo-low-power) :is(.ff-egg.is-lift .ff-egg-in, .ff-stat, .ec-q.is-away, .ff-place, .ff-land, .ff-card) { transform: none; }

/* ===== prototype-src/triptych-game.css ===== */
/* TRIPTIC Triptych: the daily game of three films and the one thing that links them (Commute Corner, lane 5).
   Behaviour: triptych-game.js (window.TRIPTIC_TRIPTYCH; registers with TRIPTIC_COMMUTE). Record: hub/docs/COMMUTE-CORNER-2026-10.md.
   Not a ds-* file: it may use its own colours; type sizes go through var(--type-unit) so the text-size setting scales them, and every
   duration and curve is a motion token.

   THE LOOK (17 October 2026, the owner: Triptych and Cross Cut "must no longer look like twins"; Triptych an ivory, silver and deep
   blue gallery). A gallery after hours: a deep blue wall washed by one cool picture light from above; three posters hang in thin
   silver frames, the middle one a little larger, as large as the room above the keyboard allows; under the question three
   calm clue lines (27 October 2026: text, never a fourth film), their room kept from the start. The type is ivory, in the app's display serif. At the solve the posters stay where they
   hang: a fine gold thread of light (4 November 2026) runs from a brass eyelet on the foot of each frame and gathers into a brass knot
   on an ivory card with the link's name (SVG strokes, one-shot, their dash run on the motion tokens). The shell (game-shell.css) draws the header, the rules card, How to play
   and the result; this file gives it Triptych's palette (custom properties on .tg and on .tg-theme, the room's rule card).
   The page's ONE living thing is the picture light: @keyframes tg-lamp (opacity and transform only), paused off screen by
   motion-living.js through .mo-living, still under Reduce Motion and Low Power. Everything else is still or a one-shot.
   Reduce Motion: no slide; the thread is there already, drawn, with no light travelling: the same states by fades only. */

.tg, .tg-theme {
  --gs-bg: #0b1631; --gs-sheet: #13234a; --gs-ink: #f3eee2; --gs-dim: #b8c1d4; --gs-mute: #7f8ba5; --gs-line: rgb(214 222 238 / .2);
  --gs-accent: #dfe5f0; --gs-panel: rgb(214 222 238 / .07); --gs-btn: linear-gradient(180deg, #f8f4ea, #e6decb); --gs-on-btn: #0d1a3a;
  --gs-title-font: "Fraunces TRIPTIC", system-ui, sans-serif; --gs-title-weight: 600; --gs-title-track: .01em; --gs-title-case: none;
  --gs-big-font: "Fraunces TRIPTIC", system-ui, sans-serif;
}
.tg {
  --tg-ivory: #f3eee2; --tg-silver-hi: #f4f6fa; --tg-silver: #c3cad6; --tg-silver-lo: #7f8898; --tg-dim: #b8c1d4; --tg-mute: #7f8ba5;
  --tg-wall: #0b1631; --tg-serif: "Fraunces TRIPTIC", system-ui, sans-serif;
  position: absolute; inset: 0; z-index: 330; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden;
  color: var(--tg-ivory); font-family: var(--font-ui, system-ui, sans-serif);
  background: radial-gradient(120% 60% at 50% -8%, #1d3366 0%, rgb(29 51 102 / 0) 62%), linear-gradient(180deg, #0d1a3a 0%, #091330 55%, #050a1c 100%);
  -webkit-tap-highlight-color: transparent;
}
.tg *, .tg *::before, .tg *::after { box-sizing: border-box; }
.tg [hidden] { display: none !important; }
.tg :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.tg button:focus-visible, .tg input:focus-visible, .tg [role="option"]:focus-visible { outline: 2px solid var(--tg-ivory); outline-offset: 3px; }
.tg.is-arriving { animation: tg-rise var(--motion-slow) var(--motion-curve) both; }
@keyframes tg-rise { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }

/* the picture light: a cool pool of light from above, the page's one living thing */
.tg-lamp { position: absolute; left: -10%; right: -10%; top: 0; height: 58%; pointer-events: none; z-index: 0;
  background: radial-gradient(56% 78% at 50% 0%, rgb(210 224 255 / .22) 0%, rgb(170 192 240 / .08) 46%, rgb(170 192 240 / 0) 74%);
  transform-origin: 50% 0; animation: tg-lamp 7s var(--motion-breathe) infinite alternate; }
@keyframes tg-lamp { 0% { opacity: .74; transform: scale(1); } 100% { opacity: 1; transform: scale(1.06); } }

.tg-scroll { position: relative; z-index: 1; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 16px max(32px, env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; }
.tg-scroll > * { width: 100%; max-width: 420px; }

/* the wall: three posters in silver frames, the middle one a little larger */
.tg-altar { position: relative; display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 12px; align-items: center; margin-top: 8px; padding-bottom: 0; transition: padding-bottom var(--motion-normal) var(--motion-curve); }
.tg-leaf { position: relative; transition: transform var(--motion-slow) var(--motion-curve), opacity var(--motion-slow) var(--motion-curve); }
.tg-leaf.tg-pre { opacity: 0; transform: translateY(14px) scale(.97); }
.tg-frame { position: relative; padding: 3px; border-radius: 4px; background: linear-gradient(150deg, var(--tg-silver-hi) 0%, var(--tg-silver) 40%, var(--tg-silver-lo) 70%, #dfe4ec 100%);
  box-shadow: 0 16px 26px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(255 255 255 / .4); }
.tg-poster { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: 2px; overflow: hidden; background: #13203f; }
.tg-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.tg-poster::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(225 235 255 / .14) 0%, rgb(225 235 255 / 0) 34%, rgb(0 0 0 / 0) 64%, rgb(0 0 0 / .28) 100%); }
.tg-poster .tg-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 4px 4px; text-align: center; font: 500 calc(11 * var(--type-unit, 1px))/1.25 var(--font-ui, system-ui); color: var(--tg-ivory); background: linear-gradient(0deg, rgb(5 10 28 / .9), rgb(5 10 28 / 0)); opacity: 0; transition: opacity var(--motion-fast) var(--motion-curve); pointer-events: none; }
.tg-leaf.show-cap .tg-cap { opacity: 1; }
.tg-poster.tg-noimg { display: grid; place-items: center; padding: 8px; text-align: center; font: 600 calc(13 * var(--type-unit, 1px))/1.2 var(--tg-serif); color: var(--tg-ivory); }
.tg-mid { z-index: 2; }

/* the solve (4 November 2026, the owner: "redesign so it looks infinitely better"): a fine filament of gold light. A strand leaves a
   brass eyelet on the lower edge of each poster's frame (never on the picture) and the three gather into one brass knot on the
   answer card. At the solve the strands are drawn (on the breathing curve, so the light is seen to travel) with a spark riding each
   tip; the three arrive at the knot together, the card comes up under it, and the knot glows once and settles to a low ember. Stroke, opacity and transform only, on the motion
   tokens; one-shots (the lamp stays the page's one living thing). */
.tg.is-threaded .tg-altar { padding-bottom: var(--tg-tagroom, calc(104 * var(--type-unit, 1px))); }
.tg-thread { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity var(--motion-fast) var(--motion-curve); }
.tg.is-threaded .tg-thread { opacity: 1; }
.tg-thread path { fill: none; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.tg-thread-haze { stroke: #e9c47a; stroke-width: 7; opacity: .09; }
.tg-thread-glow { stroke: #ecc982; stroke-width: 3; opacity: .3; }
.tg-thread-line { stroke: #f4dc9c; stroke-width: 1.15; }
.tg-thread .tg-thread-spark { stroke: #fffaf0; stroke-width: 2.4; stroke-dasharray: 7 200; stroke-dashoffset: 7; opacity: 0; }
.tg-thread :is(.tg-eyelet, .tg-knot) > * { transform-box: fill-box; transform-origin: center; }
.tg-eyelet > *, .tg-knot > * { opacity: 0; }
.tg-knot-ring { fill: rgb(11 22 49 / .35); stroke: #e9c47a; stroke-width: .9; }
.tg.is-tied :is(.tg-thread-haze, .tg-thread-glow, .tg-thread-line) { animation: tg-thread-draw var(--motion-ceremony) var(--motion-breathe) both; }
.tg.is-tied .tg-thread-spark { animation: tg-thread-spark var(--motion-ceremony) var(--motion-breathe) both; }
.tg.is-tied .tg-eyelet .tg-bead { animation: tg-thread-bead var(--motion-normal) var(--motion-curve) both; }
.tg.is-tied .tg-eyelet-glow { animation: tg-thread-flare var(--motion-slow) var(--motion-curve) both; }
.tg.is-tied .tg-eyelet-1 > * { animation-delay: 60ms; } .tg.is-tied .tg-eyelet-2 > * { animation-delay: 120ms; }
.tg.is-tied .tg-knot :is(.tg-bead, .tg-knot-ring) { animation: tg-thread-bead var(--motion-normal) var(--motion-curve) calc(var(--motion-ceremony) - var(--motion-normal)) both; }
.tg.is-tied .tg-knot-glow { animation: tg-thread-pulse var(--motion-ceremony) var(--motion-curve) calc(var(--motion-ceremony) - var(--motion-fast)) both; }
@keyframes tg-thread-draw { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } }
/* the spark rides the drawing tip (the same curve and length), bright on the way and gone into the knot */
@keyframes tg-thread-spark { 0% { stroke-dashoffset: 7; opacity: 0; } 8% { opacity: 1; } 62% { opacity: 1; } 100% { stroke-dashoffset: -93; opacity: 0; } }
@keyframes tg-thread-bead { 0% { opacity: 0; transform: scale(.2); } 100% { opacity: 1; transform: scale(1); } }
@keyframes tg-thread-flare { 0% { opacity: 0; transform: scale(.3); } 35% { opacity: .9; transform: scale(1); } 100% { opacity: .22; transform: scale(.8); } }
@keyframes tg-thread-pulse { 0% { opacity: 0; transform: scale(.25); } 28% { opacity: 1; transform: scale(1.18); } 100% { opacity: .42; transform: scale(.72); } }
/* drawn and still: Reduce Motion, or a day already done */
.tg.is-calm .tg-thread :is(path, .tg-eyelet > *, .tg-knot > *) { animation: none; }
.tg.is-calm .tg-thread :is(.tg-thread-haze, .tg-thread-glow, .tg-thread-line) { stroke-dashoffset: 0; }
.tg.is-calm .tg-thread :is(.tg-bead, .tg-knot-ring) { opacity: 1; }
.tg.is-calm .tg-eyelet-glow { opacity: .22; transform: scale(.8); }
.tg.is-calm .tg-knot-glow { opacity: .42; transform: scale(.72); }
/* given up: the same thread, quieter, and no light runs along it */
.tg.is-given .tg-thread { opacity: .55; }
.tg.is-given .tg-thread-spark, .tg.is-given .tg-knot-glow { visibility: hidden; }
.tg-tag { position: absolute; left: 50%; bottom: 0; z-index: 4; display: grid; justify-items: center; gap: 4px; width: max-content; min-width: 60%; max-width: 100%; padding: 12px 18px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, #fbf8f0, #ece5d3); color: #0d1a3a; box-shadow: inset 0 0 0 1px rgb(176 132 52 / .5), inset 0 0 0 3px rgb(251 248 240 / .9), inset 0 0 0 3.6px rgb(176 132 52 / .22), 0 12px 24px rgb(0 0 0 / .45); transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  transition: opacity var(--motion-normal) var(--motion-curve) calc(var(--motion-ceremony) - var(--motion-slow)), transform var(--motion-normal) var(--motion-curve) calc(var(--motion-ceremony) - var(--motion-slow)); }
.tg.is-tied .tg-tag { opacity: 1; transform: translate(-50%, 0); }
.tg-tag-line { display: block; white-space: nowrap; font: 600 calc(11 * var(--type-unit, 1px))/1.2 var(--font-ui, system-ui); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: #3c4a6b; }
.tg-tag-name { display: block; font: 600 calc(24 * var(--type-unit, 1px))/1.1 var(--tg-serif); color: #0d1a3a; text-wrap: balance; overflow-wrap: anywhere; }
.tg-tag-name.is-long { font-size: calc(20 * var(--type-unit, 1px)); }
.tg.is-given .tg-leaf { opacity: .6; }

/* the clue ladder (27 October 2026): three calm lines under the question, room kept from the start. An unopened line is a quiet
   name ("The kind of link"); an opened one is ivory. One line each, wrapping downward if it must; a fade in, no slide. */
.tg-hints { list-style: none; margin: 4px auto 0; padding: 0; display: grid; gap: 2px; width: 100%; max-width: 360px; }
.tg-h { display: grid; grid-template-columns: calc(20 * var(--type-unit, 1px)) minmax(0, 1fr); align-items: baseline; gap: 8px; min-height: calc(22 * var(--type-unit, 1px)); padding: 1px 4px;
  font: 500 calc(14 * var(--type-unit, 1px))/calc(20 * var(--type-unit, 1px)) var(--font-ui, system-ui); color: var(--tg-mute); transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-curve); }
.tg-hn { justify-self: center; font: 600 calc(11 * var(--type-unit, 1px))/1 var(--font-ui, system-ui); font-variant-numeric: tabular-nums; color: var(--tg-mute); letter-spacing: .04em; }
.tg-ht { min-width: 0; text-wrap: pretty; }
/* (28 October 2026, the owner: the locked rows "The kind of link / A narrowing fact / The answer's shape" in grey italics "look like
   placeholder text") A CLUE NOT TAKEN is a closed card: a dashed outline round a faint panel, a lock where its number will be, and what
   it will be in plain upright type (never italics, never a field's grey). A TAKEN CLUE is an open card: a solid ivory-edged panel, its
   number in a filled ivory disc, the clue itself in the serif. Both cards are the same height, so nothing moves when one opens. */
.tg-hints { gap: 6px; }
.tg-h { padding: 5px 10px 5px 6px; border-radius: 10px; min-height: calc(30 * var(--type-unit, 1px)); align-items: center; box-sizing: border-box; }
.tg-h:not(.is-on) { color: var(--tg-dim); background: rgb(214 222 238 / .04); border: 1px dashed rgb(214 222 238 / .34); }
.tg-h:not(.is-on) .tg-ht { font: 600 calc(12.5 * var(--type-unit, 1px))/calc(18 * var(--type-unit, 1px)) var(--font-ui, system-ui); letter-spacing: .04em; }
.tg-hn { display: grid; place-items: center; width: calc(20 * var(--type-unit, 1px)); height: calc(20 * var(--type-unit, 1px)); border-radius: 50%; }
.tg-hn b { display: none; font: inherit; }
.tg-hlock { display: grid; place-items: center; color: var(--tg-dim); }
.tg-hlock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tg-h.is-on { color: var(--tg-ivory); background: rgb(243 238 226 / .1); border: 1px solid rgb(243 238 226 / .55); }
.tg-h.is-on .tg-hn { background: var(--tg-ivory); color: #0a1430; }
.tg-h.is-on .tg-hn b { display: block; }
.tg-h.is-on .tg-hlock { display: none; }
.tg-h.is-on .tg-ht { font: 500 calc(15.5 * var(--type-unit, 1px))/calc(20 * var(--type-unit, 1px)) var(--tg-serif); font-style: normal; opacity: 1; letter-spacing: .005em; }
.tg-h.is-on:nth-child(3) .tg-ht { letter-spacing: .08em; font-variant-numeric: tabular-nums; }
/* (final review fix round 2, item 10, 14 November 2026) an open clue too long for one line (a 320pt phone): two smaller lines in about
   the room of one (triptych-game.js longLine), so the field below barely moves; the posters give back the rest (fit) */
.tg-h.is-on.is-long { padding-top: 2px; padding-bottom: 2px; }
.tg-h.is-on.is-long .tg-ht { font-size: calc(13.5 * var(--type-unit, 1px)); line-height: calc(16 * var(--type-unit, 1px)); }
.tg-h.tg-pre { opacity: 0; transform: translateY(4px); }
/* (3 November 2026, the owner: "Not clear that a kind of link, a narrowing fact etc are clues to be unlocked that have a time limit")
   A closed card says "Clue 1" before its name and carries its price on the right: the seconds opening it adds to the clock. The card
   "Show a clue" opens next wears the button's own price pill (--gs-accent on --gs-on-btn); the later ones an outline of it. An open
   card loses both (its number is in the disc). Same height as before: the label and the pill sit inside the card's line. */
.tg-h { grid-template-columns: calc(20 * var(--type-unit, 1px)) auto minmax(0, 1fr) auto; }
.tg-hk { white-space: nowrap; font: 700 calc(11 * var(--type-unit, 1px))/1 var(--font-ui, system-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--tg-ivory); }
.tg-hc { justify-self: end; display: inline-flex; align-items: center; min-height: calc(18 * var(--type-unit, 1px)); padding: 0 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(214 222 238 / .4);
  font: 700 calc(11 * var(--type-unit, 1px))/1 var(--font-ui, system-ui); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--tg-dim); white-space: nowrap; }
.tg-h.is-next .tg-hc { background: var(--gs-accent); box-shadow: none; color: var(--gs-on-btn); }
.tg-h.is-on :is(.tg-hk, .tg-hc) { display: none; }
.tg-h.is-on { grid-template-columns: calc(20 * var(--type-unit, 1px)) minmax(0, 1fr); }   /* an open card keeps its whole line for the clue (no empty tracks and their gaps) */
/* at the result: the clues used stay as the same lines (none used: none shown) */
.tg.is-open .tg-h:not(.is-on), .tg.is-given .tg-h:not(.is-on) { display: none; }
.tg.is-open .tg-hints:not(.tg-has-on), .tg.is-given .tg-hints:not(.tg-has-on) { display: none; }
.tg.is-open .tg-hints, .tg.is-given .tg-hints { width: fit-content; max-width: 100%; margin: 12px auto 0; }

/* the question and the field */
.tg-ask { margin: calc(24 * var(--type-unit, 1px)) 0 8px; text-align: center; font: italic 500 calc(25 * var(--type-unit, 1px))/1.15 var(--tg-serif); color: var(--tg-ivory); }
.tg-form { position: relative; }
.tg-row { display: flex; gap: 8px; align-items: stretch; }
.tg-input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid rgb(214 222 238 / .4); background: rgb(5 10 28 / .5); color: var(--tg-ivory); font: 500 calc(18 * var(--type-unit, 1px))/1 var(--tg-serif); caret-color: var(--tg-ivory); transition: border-color var(--motion-fast) var(--motion-curve), background-color var(--motion-fast) var(--motion-curve); }
.tg-input::placeholder { color: var(--tg-mute); font-style: italic; font-size: calc(16 * var(--type-unit, 1px)); letter-spacing: -.01em; }
.tg .tg-input:focus, .tg .tg-input:focus-visible { outline: 2px solid var(--tg-ivory); outline-offset: 2px; border-color: var(--tg-ivory); background: rgb(5 10 28 / .7); }
.tg.is-wrong .tg-input { border-color: #e2928a; }
.tg-go { flex: 0 0 auto; min-width: 88px; height: 52px; padding: 0 16px; border-radius: 14px; background: linear-gradient(180deg, #f8f4ea, #e6decb); color: #0d1a3a; font: 700 calc(15 * var(--type-unit, 1px))/1 var(--font-ui, system-ui); letter-spacing: .02em; transition: opacity var(--motion-fast) var(--motion-curve), transform var(--motion-press) var(--motion-curve); }
.tg-go:active { transform: scale(.97); }
.tg-go[disabled] { opacity: .42; cursor: default; }
.tg-hint { min-height: calc(20 * var(--type-unit, 1px)); margin: 8px 0 0; text-align: center; font: 400 calc(14 * var(--type-unit, 1px))/1.35 var(--font-ui, system-ui); color: var(--tg-dim); }
.tg-list { list-style: none; margin: 8px 0 0; padding: 4px; border-radius: 14px; border: 1px solid rgb(214 222 238 / .24); background: rgb(9 17 40 / .97); }
.tg-list[hidden] { display: none; }
.tg-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 4px 12px; border-radius: 10px; cursor: pointer; font: 500 calc(16.5 * var(--type-unit, 1px))/1.2 var(--tg-serif); }
.tg-list li[aria-selected="true"], .tg-list li:active { background: rgb(214 222 238 / .14); }
.tg-list li small { flex: 0 0 auto; font: 600 calc(10.5 * var(--type-unit, 1px))/1 var(--font-ui, system-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--tg-mute); }
.tg-foot { display: flex; justify-content: center; gap: 16px; margin-top: 4px; }
.tg-quiet { min-height: 44px; padding: 0 16px; color: var(--tg-mute); font: 500 calc(14 * var(--type-unit, 1px))/1 var(--font-ui, system-ui); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(127 139 165 / .5); }
.tg-confirm { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; color: var(--tg-dim); font: 400 calc(14 * var(--type-unit, 1px))/1.3 var(--font-ui, system-ui); }
.tg-confirm[hidden] { display: none; }

/* Flick, when the voice file has lines for this game */
.tg-flick { display: flex; align-items: center; gap: 8px; margin: 14px auto 0; min-height: 56px; }
.tg-flick[hidden] { display: none; }
.tg-flick .tg-flick-art { flex: 0 0 auto; width: 56px; height: 56px; }
.tg-flick .tg-flick-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tg-flick p { margin: 0; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: rgb(214 222 238 / .07); box-shadow: inset 0 0 0 1px rgb(214 222 238 / .2); font: 400 calc(14 * var(--type-unit, 1px))/1.35 var(--font-ui, system-ui); color: var(--tg-ivory); text-wrap: pretty; }

/* the result: the big part (the shell lays out the rest) */
.tg-result { margin-top: calc(16 * var(--type-unit, 1px)); text-align: center; }
.tg-result[hidden] { display: none; }
.tg-result.is-in { animation: tg-fade var(--motion-slow) var(--motion-curve) both; }
@keyframes tg-fade { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
.tg-res { display: grid; justify-items: center; gap: 4px; }
.tg-score { margin: 0; font: 600 calc(28 * var(--type-unit, 1px))/1.15 var(--tg-serif); color: var(--tg-ivory); text-wrap: balance; }
.tg-note { margin: 2px 0 0; font: 500 calc(13 * var(--type-unit, 1px))/1.35 var(--gs-ui-font, system-ui); color: var(--tg-dim); }
/* (28 October 2026) the link, said plainly on the result (solved or given up), never only on the tag above */
.tg-link { margin: 2px 0 4px; text-align: center; font: 500 calc(18 * var(--type-unit, 1px))/1.3 var(--tg-serif); color: var(--tg-dim); text-wrap: balance; }
.tg-link-v { font-weight: 600; color: var(--tg-ivory); }
.tg-time { margin: 0; font: 500 calc(20 * var(--type-unit, 1px))/1.3 var(--tg-serif); color: var(--tg-dim); font-variant-numeric: tabular-nums; text-wrap: balance; }
.tg-btn { min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid rgb(214 222 238 / .4); color: var(--tg-ivory); font: 600 calc(15 * var(--type-unit, 1px))/1 var(--font-ui, system-ui); }

/* loading and trouble */
.tg-state { margin: 22vh 0 0; text-align: center; color: var(--tg-dim); font: italic 500 calc(18 * var(--type-unit, 1px))/1.35 var(--tg-serif); }
.tg-state .tg-btn { margin-top: 16px; padding: 0 24px; }

/* the cover in the room: three small posters in silver frames on the deep blue wall */
.tg-cover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4%; padding: 6% 4%; overflow: hidden; background: radial-gradient(90% 70% at 50% 0%, #22397a 0%, #0a1430 70%); }
/* (11 November 2026, the owner: "Triptych middle panel yellow doesn't look good".) The frames are now sized by HEIGHT with a fixed 2:3
   shape, so a poster can never spill below its frame (the middle one did: its frame was clamped but its picture was not). */
.tg-cover .tg-mini { flex: 0 0 auto; height: 72%; aspect-ratio: 2 / 3; box-sizing: border-box; overflow: hidden; border-radius: 2px; padding: 1.5px; background: linear-gradient(150deg, #f4f6fa, #c3cad6 40%, #7f8898); box-shadow: 0 6px 10px rgb(0 0 0 / .5); }
.tg-cover .tg-mini:nth-child(2) { height: 86%; }
.tg-cover .tg-mini i { display: block; width: 100%; height: 100%; border-radius: 1px; background: linear-gradient(180deg, #24304d 0%, #121a30 100%) center / cover no-repeat; }
/* (10 November 2026, the owner: "hide them until play, just show like an example one") the cover is an example trio: How to play's three
   example posters (.tg-d-p1..3's colours) in the silver frames; on the landing its link on the solve's tag and a quiet "Example" */
.tg-cover.is-example:has(.tg-cover-tag) { padding-bottom: 14%; }   /* room for the example's tag on the landing only: the room's tile is centred */
/* three invented posters (never a real film, so they can never spoil a puzzle); the example's link, Ada Moreau, is on each */
.tg-cover.is-example .tg-mini:nth-child(1) i { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 90'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230f3b4a'/%3E%3Cstop offset='.6' stop-color='%23145a63'/%3E%3Cstop offset='1' stop-color='%230a2630'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='60' height='90' fill='url(%23a)'/%3E%3Ccircle cx='42' cy='20' r='9' fill='%23f3e6c4'/%3E%3Ccircle cx='38.5' cy='18' r='8' fill='%2312505c'/%3E%3Cpath d='M0 56 C10 50 20 62 30 56 S50 50 60 56 V90 H0Z' fill='%230c2f3a'/%3E%3Cpath d='M0 64 C12 58 22 70 34 64 S52 58 60 63' fill='none' stroke='%237fc3c0' stroke-width='1' opacity='.7'/%3E%3Cpath d='M0 71 C12 66 24 76 36 71 S54 66 60 70' fill='none' stroke='%237fc3c0' stroke-width='.8' opacity='.45'/%3E%3Ctext x='30' y='80' font-size='5.2' fill='%23f3e6c4' font-family='system-ui,sans-serif' font-weight='600' text-anchor='middle' letter-spacing='1.2'%3ETHE LONG TIDE%3C/text%3E%3Ctext x='30' y='86' font-size='3' fill='%23f3e6c4' opacity='.7' font-family='system-ui,sans-serif' font-weight='600' text-anchor='middle' letter-spacing='1.2'%3EADA MOREAU%3C/text%3E%3C/svg%3E") center / cover no-repeat; }
.tg-cover.is-example .tg-mini:nth-child(2) i { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 90'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f2e3c2'/%3E%3Cstop offset='1' stop-color='%23d9b98a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='60' height='90' fill='url(%23b)'/%3E%3Cpath d='M14 52 L18 30 L26 42 L30 24 L34 42 L42 30 L46 52Z' fill='%239c3b2a'/%3E%3Crect x='14' y='52' width='32' height='5' fill='%237a2c20'/%3E%3Ccircle cx='18' cy='29' r='2' fill='%237a2c20'/%3E%3Ccircle cx='30' cy='23' r='2.2' fill='%237a2c20'/%3E%3Ccircle cx='42' cy='29' r='2' fill='%237a2c20'/%3E%3Cpath d='M8 66 H52' stroke='%237a2c20' stroke-width='.6'/%3E%3Ctext x='30' y='75' font-size='6' fill='%233a1a12' font-family='system-ui,sans-serif' font-weight='600' text-anchor='middle' letter-spacing='1.2'%3EPAPER KINGS%3C/text%3E%3Ctext x='30' y='83' font-size='3' fill='%233a1a12' opacity='.75' font-family='system-ui,sans-serif' font-weight='600' text-anchor='middle' letter-spacing='1.2'%3EADA MOREAU%3C/text%3E%3C/svg%3E") center / cover no-repeat; }
.tg-cover.is-example .tg-mini:nth-child(3) i { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 90'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231d1640'/%3E%3Cstop offset='.65' stop-color='%233a1f5c'/%3E%3Cstop offset='1' stop-color='%23120c26'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='60' height='90' fill='url(%23c)'/%3E%3Cpath d='M30 66 V44' stroke='%230b0718' stroke-width='3'/%3E%3Ccircle cx='30' cy='34' r='15' fill='%230b0718'/%3E%3Ccircle cx='20' cy='42' r='9' fill='%230b0718'/%3E%3Ccircle cx='40' cy='42' r='9' fill='%230b0718'/%3E%3Cg fill='%23e8c07e'%3E%3Ccircle cx='24' cy='30' r='1.3'/%3E%3Ccircle cx='35' cy='26' r='1.3'/%3E%3Ccircle cx='38' cy='38' r='1.3'/%3E%3Ccircle cx='22' cy='41' r='1.3'/%3E%3Ccircle cx='30' cy='36' r='1.3'/%3E%3C/g%3E%3Cg fill='%23f3eee6' opacity='.8'%3E%3Ccircle cx='10' cy='12' r='.6'/%3E%3Ccircle cx='50' cy='9' r='.6'/%3E%3Ccircle cx='46' cy='20' r='.5'/%3E%3Ccircle cx='14' cy='24' r='.5'/%3E%3C/g%3E%3Cpath d='M0 66 H60 V90 H0Z' fill='%230b0718'/%3E%3Ctext x='30' y='77' font-size='3.9' fill='%23e8c07e' font-family='system-ui,sans-serif' font-weight='600' text-anchor='middle' letter-spacing='.7'%3EMIDNIGHT ORCHARD%3C/text%3E%3Ctext x='30' y='84' font-size='3' fill='%23f3eee6' opacity='.7' font-family='system-ui,sans-serif' font-weight='600' text-anchor='middle' letter-spacing='1.2'%3EADA MOREAU%3C/text%3E%3C/svg%3E") center / cover no-repeat; }
.tg-cover-tag { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); padding: 5px 10px; border-radius: 7px; white-space: nowrap; background: linear-gradient(180deg, #fbf8f0, #ece5d3); color: #0d1a3a; font: 600 calc(13 * var(--type-unit, 1px))/1 "Fraunces TRIPTIC", system-ui, serif; box-shadow: inset 0 0 0 1px rgb(176 132 52 / .45), 0 6px 12px rgb(0 0 0 / .4); }
.tg-cover-note { position: absolute; left: 12px; top: 10px; font: 600 calc(11 * var(--type-unit, 1px))/1 var(--font-ui, system-ui); letter-spacing: .08em; text-transform: uppercase; color: rgb(243 238 226 / .62); }

/* Reduce Motion and Low Power: the light stills; no slide, no drawn thread: fades only */
html.reduce-motion .tg-lamp, html.mo-low-power .tg-lamp, #device.manual-reduced-motion .tg-lamp, .tg.manual-reduced-motion .tg-lamp { animation: none; opacity: .9; }
html.reduce-motion .tg.is-arriving, #device.manual-reduced-motion .tg.is-arriving { animation: tg-fade-only var(--motion-normal) var(--motion-curve) both; }
@keyframes tg-fade-only { 0% { opacity: 0; } 100% { opacity: 1; } }
html.reduce-motion .tg-leaf.tg-pre, #device.manual-reduced-motion .tg-leaf.tg-pre { transform: none; }
html.reduce-motion .tg-h, #device.manual-reduced-motion .tg-h { transition: none; transform: none; }
html:is(.reduce-motion, .mo-low-power) .tg-thread :is(path, .tg-eyelet > *, .tg-knot > *), #device.manual-reduced-motion .tg-thread :is(path, .tg-eyelet > *, .tg-knot > *) { animation: none; }
html:is(.reduce-motion, .mo-low-power) .tg-thread :is(.tg-thread-haze, .tg-thread-glow, .tg-thread-line), #device.manual-reduced-motion .tg-thread :is(.tg-thread-haze, .tg-thread-glow, .tg-thread-line) { stroke-dashoffset: 0; }
html:is(.reduce-motion, .mo-low-power) .tg-thread :is(.tg-bead, .tg-knot-ring), #device.manual-reduced-motion .tg-thread :is(.tg-bead, .tg-knot-ring) { opacity: 1; }
html:is(.reduce-motion, .mo-low-power) .tg-thread .tg-eyelet-glow, #device.manual-reduced-motion .tg-thread .tg-eyelet-glow { opacity: .22; transform: scale(.8); }
html:is(.reduce-motion, .mo-low-power) .tg-thread .tg-knot-glow, #device.manual-reduced-motion .tg-thread .tg-knot-glow { opacity: .42; transform: scale(.72); }
html.reduce-motion .tg-tag, #device.manual-reduced-motion .tg-tag { transition: opacity var(--motion-normal) var(--motion-curve); transform: translate(-50%, 0); }
html.reduce-motion .tg-result.is-in, #device.manual-reduced-motion .tg-result.is-in { animation: tg-fade-only var(--motion-normal) var(--motion-curve) both; }
@media (prefers-reduced-motion: reduce) {
  .tg-lamp { animation: none; opacity: .9; }
  .tg.is-arriving { animation: tg-fade-only var(--motion-normal) var(--motion-curve) both; }
  .tg-leaf.tg-pre { transform: none; }
  .tg-h { transition: none; transform: none; }
  .tg-thread :is(path, .tg-eyelet > *, .tg-knot > *) { animation: none; }
  .tg-thread :is(.tg-thread-haze, .tg-thread-glow, .tg-thread-line) { stroke-dashoffset: 0; }
  .tg-thread :is(.tg-bead, .tg-knot-ring) { opacity: 1; }
  .tg-thread .tg-eyelet-glow { opacity: .22; transform: scale(.8); }
  .tg-thread .tg-knot-glow { opacity: .42; transform: scale(.72); }
  .tg-tag { transition: opacity var(--motion-normal) var(--motion-curve); transform: translate(-50%, 0); }
  .tg-result.is-in { animation: tg-fade-only var(--motion-normal) var(--motion-curve) both; }
}

/* ===================================================================== THE NYT BAR (17 October 2026): the in-game keyboard, the hint, the
   miss, the hinge, the worked example. Each a one-shot on the motion tokens; the lamp stays the one living thing. */
.tg, .tg-theme { --gs-key: rgb(214 222 238 / .15); --gs-key-fn: rgb(214 222 238 / .07); }
/* the dock: the suggestions right above the keys, on the wall's darkest blue */
.tg-dock { position: relative; z-index: 5; flex: none; display: grid; gap: 0; padding: 0 4px; background: linear-gradient(180deg, #0a1534, #060c22); box-shadow: 0 -1px 0 rgb(214 222 238 / .14), 0 -16px 24px rgb(3 7 20 / .5); }
.tg-dock[hidden] { display: none; }
.tg-dock .tg-list { margin: 6px 4px 0; max-height: calc(4 * 44px + 8px); overflow-y: auto; border-radius: 12px; }
.tg-fieldwrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.tg-fieldwrap .tg-input { width: 100%; }
.tg-fieldwrap { --gs-mirror-pad: 0 17px; font: 500 calc(18 * var(--type-unit, 1px))/1 var(--tg-serif); }
.tg.is-kb .tg-fieldwrap .tg-input { border-color: var(--tg-ivory); background: rgb(5 10 28 / .7); }
/* a miss: the field gives a short shake and a red edge */
@keyframes tg-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.tg.is-wrong .tg-fieldwrap { animation: tg-shake var(--motion-normal) var(--motion-curve) both; }
.tg.is-wrong .tg-fieldwrap .tg-input { border-color: #e2928a; }
.tg-foot { align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
/* the keyboard in play: the posters are the hero, sized by fit() (triptych-game.js) to the room the keys leave; the rest tightens */
.tg.is-kb .tg-altar { grid-template-columns: 1fr 1.32fr 1fr; width: calc(100% + 8px); max-width: none; margin: 6px -4px 0; gap: 8px; justify-self: center; }
/* typing on a tall phone: the posters ease to the size that keeps the field above the names list (fit() sets the scale and the rise) */
.tg.is-kb .tg-altar, .tg.is-kb :is(.tg-postertip, .tg-ask, .tg-hints, .tg-form, .tg-foot) { transition: transform var(--motion-normal) var(--motion-curve); }
.tg.is-typing .tg-altar { transform: scale(var(--tg-tk, 1)); transform-origin: 50% 0; }
.tg.is-typing :is(.tg-postertip, .tg-ask, .tg-hints, .tg-form, .tg-foot) { transform: translateY(calc(-1 * var(--tg-tshift, 0px))); }
html.reduce-motion .tg.is-kb :is(.tg-altar, .tg-postertip, .tg-ask, .tg-hints, .tg-form, .tg-foot), #device.manual-reduced-motion .tg.is-kb :is(.tg-altar, .tg-postertip, .tg-ask, .tg-hints, .tg-form, .tg-foot) { transition: none; }
@media (prefers-reduced-motion: reduce) { .tg.is-kb :is(.tg-altar, .tg-postertip, .tg-ask, .tg-hints, .tg-form, .tg-foot) { transition: none; } }
.tg.is-kb .tg-ask { margin: 12px 0 4px; font-size: calc(22 * var(--type-unit, 1px)); }
.tg.is-kb .tg-hints { margin-bottom: 8px; }
/* a short phone (an SE): the names in one row above the keys (the posters ease smaller by that much while typing) */
.tg.is-strip .tg-dock .tg-list { display: flex; gap: 6px; margin: 4px 0; padding: 4px; max-height: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-radius: 12px; }
.tg.is-strip .tg-dock .tg-list[hidden] { display: none; }
.tg.is-strip .tg-dock .tg-list li { flex: 0 0 auto; min-height: 36px; padding: 0 12px; white-space: nowrap; font-size: calc(15 * var(--type-unit, 1px)); }
.tg.is-strip .tg-dock .tg-list li small { display: none; }
.tg.is-strip .tg-ask { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tg.is-strip .tg-hints { margin-top: 10px; }
.tg.is-strip .tg-h { min-height: calc(24 * var(--type-unit, 1px)); padding: 1px 8px 1px 4px; }
.tg.is-strip .tg-hints { gap: 3px; }
.tg.is-strip .tg-input, .tg.is-strip .tg-go { height: 46px; }
.tg.is-kb .tg-hint { margin-top: 6px; }
.tg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tg.is-kb .tg-flick { display: none; }
.tg.is-kb .tg-scroll { padding-bottom: 12px; }
/* (20 October 2026) the first-play poster tip: a quiet line under the three posters, never a card over them */
.tg-postertip { margin: 8px 0 0; text-align: center; font: 500 calc(13 * var(--type-unit, 1px))/1.3 var(--gs-ui-font, system-ui); color: var(--tg-dim); }
.tg-postertip[hidden] { display: none; }
.tg.is-kb .tg-postertip { margin-top: 6px; }

/* THE DELIGHT: the side panels hinge shut over the middle, their grisaille backs showing, a bell, then they open on the thread */
.tg-altar { perspective: 900px; }
.tg-wing { z-index: 3; transform-style: preserve-3d; }
.tg-l { transform-origin: calc(100% + var(--tg-g, 6px)) 50%; }
.tg-r { transform-origin: calc(0px - var(--tg-g, 6px)) 50%; }
.tg-wing .tg-frame { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tg-wing::after { content: ""; position: absolute; inset: 0; border-radius: 4px; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: radial-gradient(70% 50% at 50% 35%, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 70%), linear-gradient(160deg, #dfe4ec 0%, #9aa3b4 48%, #5e6678 100%);
  box-shadow: inset 0 0 0 3px #c3cad6, inset 0 0 0 4px rgb(255 255 255 / .35), 0 16px 26px rgb(0 0 0 / .5); }
.tg.is-shut .tg-l { transform: rotateY(180deg) scaleX(var(--tg-k, .72)); }
.tg.is-shut .tg-r { transform: rotateY(-180deg) scaleX(var(--tg-k, .72)); }

/* ----- the worked example (How to play): three posters, a guess typed, a miss opening a clue line, the thread tying them */
.tg-d { position: absolute; inset: 0; font-family: var(--font-ui, system-ui); background: radial-gradient(80% 70% at 50% 0%, #22397a 0%, #0a1430 72%); }
.tg-d-p { position: absolute; top: 14px; width: 46px; height: 69px; padding: 2px; border-radius: 3px; background: linear-gradient(150deg, #f4f6fa, #c3cad6 40%, #7f8898); box-shadow: 0 8px 12px rgb(0 0 0 / .45);
  opacity: 0; transform: translateY(8px); transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-curve); }
.tg-d-p i { display: block; width: 100%; height: 100%; border-radius: 2px; }
.tg-d-p1 { left: calc(50% - 86px); } .tg-d-p1 i { background: linear-gradient(170deg, #c86b5a, #4b1f2c); }
.tg-d-p2 { left: calc(50% - 28px); top: 8px; width: 56px; height: 84px; transition-delay: 80ms; } .tg-d-p2 i { background: linear-gradient(170deg, #e7c66a, #4d3b17); }
.tg-d-p3 { left: calc(50% + 40px); transition-delay: 160ms; } .tg-d-p3 i { background: linear-gradient(170deg, #5f8fc4, #182c4d); }
.tg-demo:not([data-step="0"]) .tg-d-p { opacity: 1; transform: none; }
.tg-d-field { position: absolute; left: 50%; bottom: 14px; display: flex; align-items: center; width: 168px; height: 30px; margin-left: -84px; padding: 0 10px; box-sizing: border-box; border-radius: 9px; border: 1px solid rgb(214 222 238 / .5); background: rgb(5 10 28 / .6);
  color: #f3eee2; font: 500 13px/1 "Fraunces TRIPTIC", system-ui, serif; opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve), border-color var(--motion-fast) var(--motion-curve); }
.tg-d-t { position: absolute; left: 10px; font-weight: 500; opacity: 0; transition: opacity var(--motion-fast) var(--motion-curve); }
.tg-d-caret { position: absolute; left: 10px; width: 1.5px; height: 15px; background: #dfe5f0; transition: transform var(--motion-normal) var(--motion-curve); }
.tg-demo:is([data-step="2"], [data-step="3"], [data-step="4"]) .tg-d-field { opacity: 1; }
.tg-demo[data-step="2"] .tg-d-t2, .tg-demo[data-step="3"] .tg-d-t3, .tg-demo[data-step="4"] .tg-d-t4 { opacity: 1; }
.tg-demo[data-step="2"] .tg-d-caret { transform: translateX(46px); }
.tg-demo[data-step="3"] .tg-d-caret { transform: translateX(36px); }
.tg-demo[data-step="4"] .tg-d-caret { transform: translateX(74px); }
.tg-demo[data-step="3"] .tg-d-field { border-color: #e2928a; animation: tg-shake var(--motion-normal) var(--motion-curve) both; }
/* (4 November 2026, the owner: "Overlapping text") "Not that" sat where the opened clue line appears at the same step; it now
   stands inside the field, at its end, beside the wrong guess it answers */
.tg-d-no { position: absolute; left: calc(50% + 74px); bottom: 24px; transform: translateX(-100%); font: 600 11px/1 var(--font-ui, system-ui); letter-spacing: .08em; text-transform: uppercase; color: #e2928a; opacity: 0; transition: opacity var(--motion-fast) var(--motion-curve); }
.tg-demo[data-step="3"] .tg-d-no { opacity: 1; }
.tg-d-line { position: absolute; left: 50%; top: 95px; transform: translate(-50%, 4px); white-space: nowrap; font: 500 12px/1 "Fraunces TRIPTIC", system-ui, serif; color: #f3eee2; opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-curve); }
.tg-d-line b { margin-right: 6px; font: 600 10px/1 var(--font-ui, system-ui); color: #b8c1d4; }
.tg-demo[data-step="3"] .tg-d-line { opacity: 1; transform: translate(-50%, 0); }
/* (4 November 2026) the thread in small, as at the solve: three gold strands from the posters' feet, a spark riding each tip, gathering
   into a brass knot on the card, which glows once */
.tg-d-thread { position: absolute; left: 50%; top: 0; width: 300px; height: 120px; margin-left: -150px; overflow: visible; pointer-events: none; z-index: 1; }
.tg-d-thread path { fill: none; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.tg-d-glow { stroke: rgb(233 196 122 / .28); stroke-width: 4; }
.tg-d-strand { stroke: #f4dc9c; stroke-width: 1.1; }
.tg-d-thread .tg-d-spark { stroke: #fffaf0; stroke-width: 2.2; stroke-dasharray: 6 200; stroke-dashoffset: 6; opacity: 0; }
.tg-d-thread circle { transform-box: fill-box; transform-origin: center; opacity: 0; }
.tg-d-knot { fill: #e2bd72; stroke: #fff4d2; stroke-width: .6; }
.tg-demo[data-step="4"] .tg-d-thread :is(.tg-d-glow, .tg-d-strand) { animation: tg-thread-draw var(--motion-ceremony) var(--motion-breathe) var(--motion-normal) both; }
.tg-demo[data-step="4"] .tg-d-spark { animation: tg-thread-spark var(--motion-ceremony) var(--motion-breathe) var(--motion-normal) both; }
.tg-demo[data-step="4"] .tg-d-knot { animation: tg-thread-bead var(--motion-normal) var(--motion-curve) var(--motion-ceremony) both; }
.tg-demo[data-step="4"] .tg-d-kglow { animation: tg-thread-pulse var(--motion-ceremony) var(--motion-curve) calc(var(--motion-normal) + var(--motion-ceremony) - var(--motion-fast)) both; }
.tg-d-tag { position: absolute; left: 50%; top: 108px; z-index: 0; transform: translate(-50%, 6px); padding: 5px 10px; border-radius: 7px; background: linear-gradient(180deg, #fbf8f0, #ece5d3); color: #0d1a3a; font: 600 13px/1 "Fraunces TRIPTIC", system-ui, serif; box-shadow: inset 0 0 0 1px rgb(176 132 52 / .45), 0 6px 12px rgb(0 0 0 / .4);
  opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve) var(--motion-ceremony), transform var(--motion-normal) var(--motion-curve) var(--motion-ceremony); }
.tg-demo[data-step="4"] .tg-d-tag { opacity: 1; transform: translate(-50%, 0); }
.tg-demo[data-step="4"] .tg-d-field { opacity: 0; transition-delay: var(--motion-slow); }

/* Reduce Motion: no shake, no hinge (the solve shows the thread at once), the example's frames change by fades */
html.reduce-motion .tg.is-wrong .tg-fieldwrap, #device.manual-reduced-motion .tg.is-wrong .tg-fieldwrap, html.mo-low-power .tg.is-wrong .tg-fieldwrap { animation: none; }
html.reduce-motion .tg-demo .tg-d-field, #device.manual-reduced-motion .tg-demo .tg-d-field { animation: none; }
html:is(.reduce-motion, .mo-low-power) .tg-demo .tg-d-thread *, #device.manual-reduced-motion .tg-demo .tg-d-thread * { animation: none !important; }
html:is(.reduce-motion, .mo-low-power) .tg-demo[data-step="4"] .tg-d-thread :is(.tg-d-glow, .tg-d-strand), #device.manual-reduced-motion .tg-demo[data-step="4"] .tg-d-thread :is(.tg-d-glow, .tg-d-strand) { stroke-dashoffset: 0; }
html:is(.reduce-motion, .mo-low-power) .tg-demo[data-step="4"] .tg-d-knot, #device.manual-reduced-motion .tg-demo[data-step="4"] .tg-d-knot { opacity: 1; }
html:is(.reduce-motion, .mo-low-power) .tg-demo[data-step="4"] .tg-d-kglow, #device.manual-reduced-motion .tg-demo[data-step="4"] .tg-d-kglow { opacity: .42; transform: scale(.72); }
html.reduce-motion .tg-leaf, #device.manual-reduced-motion .tg-leaf { transition: opacity var(--motion-normal) var(--motion-curve); }
@media (prefers-reduced-motion: reduce) {
  .tg.is-wrong .tg-fieldwrap, .tg-demo .tg-d-field { animation: none; }
  .tg-demo .tg-d-thread * { animation: none !important; }
  .tg-demo[data-step="4"] .tg-d-thread :is(.tg-d-glow, .tg-d-strand) { stroke-dashoffset: 0; }
  .tg-demo[data-step="4"] .tg-d-knot { opacity: 1; }
  .tg-demo[data-step="4"] .tg-d-kglow { opacity: .42; transform: scale(.72); }
  .tg-leaf { transition: opacity var(--motion-normal) var(--motion-curve); }
}

/* (20 October 2026) the clue ladder: the cost after this one, small, beside the button's own cost */
.tg-hintbtn .tg-next { font: 600 calc(11 * var(--type-unit, 1px))/1 var(--gs-ui-font, system-ui); color: var(--tg-dim); font-variant-numeric: tabular-nums; }
.tg-hintbtn .tg-next:empty { display: none; }

/* (11 November 2026, the owner on his iPhone: the clue rows "CLUE 1 · The kind of link" and their +60s / +90s / +120s are too small to
   read comfortably) PREVIEW FLAG "triptych-clues" (off by default; ?preview=triptych-clues): one step up the app's type ramp for each
   part of a closed clue card: the "Clue 1" kicker and the price pill from caption 2 to caption 1, the name from 12.5 to footnote. The
   card grows by the line's own two points, so the posters, the field and the keys keep their places (fit() measures the rows). */
html:is(.pv-triptych-clues, .pv-all) .tg-hk { font: 700 var(--fs-caption-1, calc(12 * var(--type-unit, 1px)))/1 var(--font-ui, system-ui); letter-spacing: .07em; }
html:is(.pv-triptych-clues, .pv-all) .tg-hc { min-height: calc(20 * var(--type-unit, 1px)); padding: 0 8px; font: 700 var(--fs-caption-1, calc(12 * var(--type-unit, 1px)))/1 var(--font-ui, system-ui); }
html:is(.pv-triptych-clues, .pv-all) .tg-h:not(.is-on) .tg-ht { font: 600 var(--fs-footnote, calc(13 * var(--type-unit, 1px)))/var(--lh-footnote, calc(18 * var(--type-unit, 1px))) var(--font-ui, system-ui); letter-spacing: .01em; }
html:is(.pv-triptych-clues, .pv-all) .tg-h { min-height: calc(32 * var(--type-unit, 1px)); column-gap: 6px; }
html:is(.pv-triptych-clues, .pv-all) .tg.is-strip .tg-h { min-height: calc(26 * var(--type-unit, 1px)); }

/* ===== prototype-src/cross-cut.css ===== */
/* TRIPTIC Cross Cut: the daily film mini-crossword (Commute Corner, the fourth game).
   Behaviour: cross-cut.js (window.TRIPTIC_CROSS_CUT; registers with TRIPTIC_COMMUTE). Record: hub/docs/COMMUTE-CORNER-2026-10.md.
   Not a ds-* file: it may use its own colours. Type sizes go through var(--type-unit) so the text-size setting scales them; the one
   exception is the letter in a frame, which is sized by the frame itself (a share of the grid's width: 100cqw / columns), because a
   letter must fit its frame at every text size. Every duration and curve is a motion token.

   THE LOOK (17 October 2026, the owner: Triptych and Cross Cut "must no longer look like twins"; Cross Cut a cooler cutting-room
   white-green light table and typewritten-style capitals). A cutting room at night, lit from the table: a white-green light table, and
   on it the grid as a strip of film: every open square a clear frame of leader with the light coming through, its perforations at top
   and foot; the blocks are opaque black film. The letters are typed in dark ink, each slug a hair off true (--jr, --jy from the script)
   with a little ink spread: typewritten, in the app's one face (no monospace family is used anywhere in the app). The word being cut is
   tinted mint, the frame under the cursor brightest with a dark ring. Filling a word runs one splice of light along it; Check word marks
   a wrong frame with a red grease-pencil stroke; a revealed letter is typed in the marker's blue. Solving runs the strip through the gate:
   a bar of light crosses the table and every frame lights green behind it, then one splice of light across the whole table.
   The shell (game-shell.css) draws the header, the rules card, How to play and the result; this file gives it Cross Cut's palette
   (custom properties on .xc and on .xc-theme, the room's rule card).
   The page's ONE living thing is the lamp under the table (@keyframes xc-table: opacity and transform only), paused off screen by
   motion-living.js through .mo-living, still under Reduce Motion and Low Power. Everything else is still or a one-shot.
   Reduce Motion: no sweep, no gate, no nudge: the same states by fades only.
   TYPING (17 October 2026): the chosen frame carries a caret (@keyframes xc-caret, opacity only: a state loop while a frame waits
   for a letter; steady under Reduce Motion and Low Power); a one-line hint over the grid says where to start;
   the table scales to --xc-fit (the room above the dock). Flick's start line leaves by a fade (.xc-flick.is-leaving).
   OUR OWN KEYBOARD (17 October 2026, evening; iOS would not raise its keyboard for the hidden field): .xc-keys, docked under the
   clue bar, three rows of editing-bench keys in the cutting room's smoked green with typewritten cream capitals. A press lights the
   key from below like a frame on the light table (instant on, a motion-fast fade off) and lifts a frame of leader with the letter
   above the finger (.xc-pop). Keys are at least 44pt tall; ten fit across 320pt. No double-tap zoom, no selection, no callout. */

/* the palette: Cross Cut's own, given to the shell (the game and the room's rule card) */
.xc, .xc-theme {
  --gs-bg: #0b1612; --gs-sheet: #13221c; --gs-ink: #eaf5ef; --gs-dim: #a9c4b6; --gs-mute: #75907f; --gs-line: rgb(170 230 196 / .2);
  --gs-accent: #7fe3a8; --gs-panel: rgb(170 230 196 / .07); --gs-btn: linear-gradient(180deg, #f2fbf5, #cdebd9); --gs-on-btn: #0d1d16;
  /* typewritten capitals (17 October 2026, the owner's review: Cross Cut is no longer Triptych's twin): the iPhone's own American
     Typewriter, else a typewriter face where there is one (no generic monospace: design-system.test); the cutting-room labels, the letters in the frames, the title and the result */
  --xc-type: "American Typewriter", "Courier Prime", "Courier New", var(--font-ui, system-ui, sans-serif);
  --gs-title-font: var(--xc-type); --gs-title-weight: 600; --gs-title-track: .16em; --gs-title-case: uppercase;
  --gs-big-font: var(--xc-type);
}
.xc {
  --xc-table: #e9f6ee; --xc-table-lo: #bcdcc9; --xc-leader: #fbfffd; --xc-leader-lo: #e2f2e9; --xc-film: #101b16; --xc-ink: #13221b;
  --xc-word: #c9efd8; --xc-word-lo: #b2e3c5; --xc-cur: #93e6b6; --xc-cur-lo: #6fd398; --xc-ring: #1c6b45; --xc-wrong: #d2493a; --xc-shown: #2f6db3;
  --xc-mint: #7fe3a8; --xc-cream: #eaf5ef; --xc-dim: #a9c4b6; --xc-mute: #75907f;
  --xc-kg: 6px; --xc-kh: 46px;   /* the keyboard: the gap between keys and a key's height */
  position: absolute; inset: 0; z-index: 330; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden;
  color: var(--xc-cream); font-family: var(--font-ui, system-ui, sans-serif);
  background: radial-gradient(120% 64% at 50% 30%, #173126 0%, rgb(23 49 38 / 0) 66%), linear-gradient(180deg, #0c1814 0%, #08110d 55%, #040806 100%);
  -webkit-tap-highlight-color: transparent;
}
.xc *, .xc *::before, .xc *::after { box-sizing: border-box; }
.xc [hidden] { display: none !important; }
.xc :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.xc button:focus-visible { outline: 2px solid var(--xc-mint); outline-offset: 2px; }
.xc button[disabled] { opacity: .4; cursor: default; }
.xc.is-arriving { animation: xc-rise var(--motion-slow) var(--motion-curve) both; }
@keyframes xc-rise { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }

/* the lamp under the table: the page's one living thing */
.xc-lamp { position: absolute; left: -12%; right: -12%; top: 6%; height: 60%; pointer-events: none; z-index: 0;
  background: radial-gradient(52% 50% at 50% 46%, rgb(170 240 200 / .22) 0%, rgb(140 220 180 / .08) 50%, rgb(140 220 180 / 0) 76%);
  transform-origin: 50% 46%; animation: xc-table 8s var(--motion-breathe) infinite alternate; }
@keyframes xc-table { 0% { opacity: .72; transform: scale(1); } 100% { opacity: 1; transform: scale(1.05); } }

/* in the header the typewritten title tracks a little tighter (it fits a 320 phone at the largest text) */
.xc .gs-head .gs-name { letter-spacing: .1em; }

/* the field the phone's keyboard types into: in the shell's header (see .xc-input below) */
.xc-scroll { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 12px 24px; }   /* (12 + the table's 4: eight frames at a 44pt pitch at 390) */
.xc-body { width: 100%; max-width: 440px; margin: 0 auto; }
/* the area above the keyboard goes soft at its foot, so what scrolls under the dock reads as more to come, not cut off */
.xc-scroll { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 20px), rgb(0 0 0 / 0) 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 20px), rgb(0 0 0 / 0) 100%); }
.xc.is-solved .xc-scroll { -webkit-mask-image: none; mask-image: none; }

/* the light table and the grid: clear frames of leader on black film, lit from below */
.xc-bay { display: flex; justify-content: center; margin-top: 4px; }
.xc-table { position: relative; width: 100%; max-width: min(404px, var(--xc-fit, 404px)); padding: 4px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(90% 90% at 50% 45%, #fbfffc 0%, var(--xc-table) 52%, var(--xc-table-lo) 100%);
  box-shadow: 0 18px 32px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(255 255 255 / .7), inset 0 -10px 18px rgb(60 130 90 / .18); }
.xc-grid { --xc-cond: var(--xc-type); position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--xc-cols, 8), minmax(0, 1fr)); gap: 2px; padding: 2px; border-radius: 6px; background: var(--xc-film); container-type: inline-size; touch-action: manipulation; }
.xc-gap { aspect-ratio: 1; border-radius: 2px;
  background: radial-gradient(circle, rgb(170 230 196 / .1) 0 1.2px, rgb(0 0 0 / 0) 1.6px) 50% 8% / 33% 12% repeat-x, radial-gradient(circle, rgb(170 230 196 / .1) 0 1.2px, rgb(0 0 0 / 0) 1.6px) 50% 92% / 33% 12% repeat-x, var(--xc-film); }
.xc-cell { position: relative; aspect-ratio: 1; min-width: 0; display: grid; place-items: center; border-radius: 3px; overflow: hidden; color: var(--xc-ink);
  background:
    repeating-linear-gradient(90deg, rgb(16 27 22 / .26) 0 14%, rgb(16 27 22 / 0) 14% 29%) 50% 4% / 72% 6% no-repeat,
    repeating-linear-gradient(90deg, rgb(16 27 22 / .26) 0 14%, rgb(16 27 22 / 0) 14% 29%) 50% 96% / 72% 6% no-repeat,
    linear-gradient(180deg, var(--xc-leader), var(--xc-leader-lo));
  box-shadow: inset 0 0 0 1px rgb(16 27 22 / .12);
  transition: color var(--motion-fast) var(--motion-curve); }
/* a typed letter: dark ink, a slug a hair off true, a little ink spread (typewritten, in the app's one face) */
.xc-l { position: relative; z-index: 2; font: 600 22px/1 var(--xc-cond); font-weight: 500; font-size: calc(100cqw / var(--xc-cols, 8) * .6); letter-spacing: 0; text-transform: uppercase;
  transform: translateY(calc(4% + var(--jy, 0%))) rotate(var(--jr, 0deg)); text-shadow: .5px .3px 0 rgb(19 34 27 / .34), -.3px 0 0 rgb(19 34 27 / .18); }
.xc-num { position: absolute; z-index: 2; left: 9%; top: 11%; font: 600 calc(9 * var(--type-unit, 1px))/1 var(--font-ui, system-ui, sans-serif); font-size: min(calc(9 * var(--type-unit, 1px)), calc(100cqw / var(--xc-cols, 8) * .27)); color: rgb(19 34 27 / .62); }
/* the word being cut: tinted mint; the frame under the cursor is brightest, with a dark ring */
.xc-cell.is-word { background:
    repeating-linear-gradient(90deg, rgb(16 27 22 / .3) 0 14%, rgb(16 27 22 / 0) 14% 29%) 50% 4% / 72% 6% no-repeat,
    repeating-linear-gradient(90deg, rgb(16 27 22 / .3) 0 14%, rgb(16 27 22 / 0) 14% 29%) 50% 96% / 72% 6% no-repeat,
    linear-gradient(180deg, var(--xc-word), var(--xc-word-lo)); }
.xc-cell.is-cur { background:
    repeating-linear-gradient(90deg, rgb(16 27 22 / .34) 0 14%, rgb(16 27 22 / 0) 14% 29%) 50% 4% / 72% 6% no-repeat,
    repeating-linear-gradient(90deg, rgb(16 27 22 / .34) 0 14%, rgb(16 27 22 / 0) 14% 29%) 50% 96% / 72% 6% no-repeat,
    linear-gradient(180deg, var(--xc-cur), var(--xc-cur-lo));
  box-shadow: inset 0 0 0 2px var(--xc-ring); }
.xc-cell.is-cur .xc-num { color: rgb(12 40 26 / .8); }
/* the caret: a bar in the chosen frame (centred when empty, beside the letter when filled), blinking while it waits */
.xc-caret { position: absolute; z-index: 3; left: calc(50% - 1px); top: 24%; width: 2px; height: 52%; border-radius: 1px; background: var(--xc-ring); opacity: 0; pointer-events: none; }
.xc-cell.is-filled .xc-caret { left: auto; right: 13%; }
.xc-cell.is-cur .xc-caret { opacity: 1; animation: xc-caret var(--motion-ceremony) step-end infinite; }
.xc.is-solved .xc-caret { display: none; }
@keyframes xc-caret { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
/* typing: the chosen frame gets an outer ring so it reads at a glance */
.xc.is-keyed .xc-cell.is-cur { outline: 2px solid var(--xc-mint); outline-offset: 1px; z-index: 2; }
/* a revealed letter: typed in the marker's blue, with a corner nick */
.xc-cell.is-shown .xc-l { color: var(--xc-shown); }
.xc-cell.is-shown::before { content: ""; position: absolute; right: 0; top: 0; z-index: 2; width: 24%; height: 24%; background: linear-gradient(225deg, var(--xc-shown) 50%, rgb(47 109 179 / 0) 50%); }
/* Check word: a wrong frame gets a red grease-pencil stroke */
.xc-cell.is-wrong .xc-l { color: #a3291d; }
.xc-cell.is-wrong::before { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(135deg, rgb(210 73 58 / 0) 44%, rgb(210 73 58 / .9) 45% 53%, rgb(210 73 58 / 0) 54%); }
/* a filled word: one splice of light runs along it */
.xc-cell::after { content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; background: linear-gradient(90deg, rgb(200 255 225 / 0) 0%, rgb(200 255 225 / .95) 50%, rgb(200 255 225 / 0) 100%); transform: translateX(-100%); }
.xc-cell.is-splice::after { animation: xc-splice var(--motion-slow) var(--motion-curve) calc(var(--k, 0) * var(--motion-fast) / 4) both; }
@keyframes xc-splice { 0% { opacity: 0; transform: translateX(-100%); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(100%); } }

/* solved: the strip runs through the gate (a bar of light crosses the table) and every frame lights green behind it */
.xc-gate { position: absolute; z-index: 3; top: -6%; bottom: -6%; left: 0; width: 16%; pointer-events: none; opacity: 0; transform: translateX(-110%);
  background: linear-gradient(90deg, rgb(230 255 240 / 0) 0%, rgb(230 255 240 / .95) 50%, rgb(230 255 240 / 0) 100%); }
.xc.is-gate .xc-gate { animation: xc-gate var(--motion-ceremony) var(--motion-curve) both; }
@keyframes xc-gate { 0% { opacity: 0; transform: translateX(-110%); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(640%); } }
.xc.is-gate .xc-cell { transition: box-shadow var(--motion-normal) var(--motion-curve) calc(var(--x, 0) * var(--motion-ceremony) * .8), color var(--motion-normal) var(--motion-curve) calc(var(--x, 0) * var(--motion-ceremony) * .8); }
.xc.is-gate .xc-cell, .xc.is-lit .xc-cell { color: #0d2418; box-shadow: inset 0 0 0 40px rgb(140 228 176 / .72); }
.xc.is-gate .xc-num, .xc.is-lit .xc-num { color: rgb(12 40 26 / .7); }
/* then one splice of light across the whole table */
.xc-table::after { content: ""; position: absolute; z-index: 4; left: 4%; right: 4%; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; pointer-events: none; opacity: 0; transform: scaleX(.1);
  background: linear-gradient(90deg, rgb(240 255 246 / 0), #f0fff6 50%, rgb(240 255 246 / 0)); }
.xc.is-spliced .xc-table::after { animation: xc-cutline var(--motion-slow) var(--motion-curve) both; }
@keyframes xc-cutline { 0% { opacity: 0; transform: scaleX(.1); } 40% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
/* a full grid that is not right yet: the table nudges once */
.xc.is-off .xc-table { animation: xc-nudge var(--motion-normal) var(--motion-curve) both; }
@keyframes xc-nudge { 0% { transform: translateX(0); } 25% { transform: translateX(-6px); } 55% { transform: translateX(5px); } 80% { transform: translateX(-2px); } 100% { transform: translateX(0); } }

/* the hint over the grid: where to start (it steps aside once typing has begun) */
.xc-hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 8px; min-height: calc(24 * var(--type-unit, 1px)); text-align: center; font: 500 calc(14 * var(--type-unit, 1px))/1.3 var(--font-ui, system-ui, sans-serif); color: var(--xc-mint); transition: opacity var(--motion-fast) var(--motion-curve); }
.xc-hint-key { flex: 0 0 auto; display: block; width: 20px; height: 14px; }
.xc-hint-key svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.xc.is-keyed .xc-hint { opacity: 0; visibility: hidden; }
.xc-msg { min-height: calc(20 * var(--type-unit, 1px)); margin: 8px 0 0; text-align: center; font: 500 calc(15 * var(--type-unit, 1px))/1.35 var(--font-ui, system-ui, sans-serif); color: var(--xc-mint); }
.xc-counts { margin: 0; min-height: calc(16 * var(--type-unit, 1px)); text-align: center; font: 600 calc(12 * var(--type-unit, 1px))/1.3 var(--font-ui, system-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--xc-mute); }

/* the clue lists: a typed cutting log */
.xc-lists { margin-top: 16px; display: grid; gap: 16px; }
.xc-list h2 { margin: 0 0 4px; padding-left: 8px; font: 700 calc(12 * var(--type-unit, 1px))/1.2 var(--font-ui, system-ui, sans-serif); letter-spacing: .24em; text-transform: uppercase; color: var(--xc-mint); }
.xc-list ul { list-style: none; margin: 0; padding: 0; }
.xc-item { display: grid; grid-template-columns: 2.25em 1fr; align-items: baseline; gap: 4px; width: 100%; min-height: 44px; padding: 8px; border-radius: 10px; text-align: left; font: 400 calc(15 * var(--type-unit, 1px))/1.4 var(--font-ui, system-ui, sans-serif); color: var(--xc-cream); transition: background-color var(--motion-fast) var(--motion-curve); }
.xc-item b { font: 700 calc(14 * var(--type-unit, 1px))/1.4 var(--font-ui, system-ui, sans-serif); letter-spacing: .06em; color: var(--xc-mint); font-variant-numeric: tabular-nums; }
.xc-item.is-cur { background: rgb(127 227 168 / .12); }
.xc-item.is-done span { color: var(--xc-dim); }
.xc-item.is-ok b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* the dock: Check word, Reveal letter, the clue bar and the keyboard, at the foot of the screen */
.xc-dock { position: relative; z-index: 3; flex: 0 0 auto; padding: 8px 12px max(8px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgb(127 227 168 / .18);
  background: linear-gradient(180deg, #12211b 0%, #09120e 100%); }
.xc-tools { display: grid; grid-template-columns: 1fr 1fr 48px; gap: 8px; }
.xc-tool { min-height: 44px; padding: 4px 8px; border-radius: 12px; border: 1px solid rgb(127 227 168 / .4); color: var(--xc-cream); font: 600 calc(14 * var(--type-unit, 1px))/1.15 var(--font-ui, system-ui, sans-serif); }
.xc-tool:active { background: rgb(127 227 168 / .12); }
/* (20 October 2026) what Check word found, for a moment just above the tools where the finger is (the line under the grid can be out
   of sight behind the keys on a phone); a fade only, never in the way of a tap */
.xc-dockmsg { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 4; max-width: calc(100% - 32px); margin: 0; padding: 8px 14px; box-sizing: border-box; border-radius: 999px;
  transform: translateX(-50%); background: #f2fbf5; color: var(--xc-ink); box-shadow: 0 6px 16px rgb(0 0 0 / .45); font: 600 calc(14 * var(--type-unit, 1px))/1.25 var(--font-ui, system-ui, sans-serif);
  text-align: center; pointer-events: none; opacity: 0; transition: opacity var(--motion-fast) var(--motion-curve); }
.xc-dockmsg:empty { display: none; }
.xc-dockmsg.is-on { opacity: 1; }
.xc-dockmsg.is-bad { background: #fbe4df; color: #5a1a10; }
/* a wrong frame: the grease-pencil stroke, the letter in red and a red edge; marked with one short nudge of the stroke */
.xc-cell.is-wrong { box-shadow: inset 0 0 0 2px rgb(210 73 58 / .85); }
.xc-cell.is-flag::before { animation: xc-nudge var(--motion-normal) var(--motion-curve) 1; }
.xc-bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 4px; align-items: center; margin-top: 6px; }
.xc-step { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--xc-mint); }
.xc-step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xc-clue { display: block; touch-action: manipulation; width: 100%; min-height: 52px; padding: 8px 12px; border-radius: 12px; text-align: left; background: linear-gradient(180deg, #f2fbf5, #dcefe4); color: var(--xc-ink); }
.xc-clue-num { display: block; font: 700 calc(11 * var(--type-unit, 1px))/1.2 var(--font-ui, system-ui, sans-serif); letter-spacing: .2em; text-transform: uppercase; color: #2a7a52; }
.xc-clue-text { display: block; margin-top: 2px; font: 500 calc(16 * var(--type-unit, 1px))/1.3 var(--font-ui, system-ui, sans-serif); color: var(--xc-ink); overflow-wrap: anywhere; }
/* the hidden field (a hardware keyboard's with a fine pointer; never focused on a touch device): in the header, 16px (no zoom),
   never display:none or visibility:hidden, never readonly; transparent and 1px so it is not seen */
.xc-input { position: absolute; left: 50%; top: 50%; z-index: -1; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; color: transparent; background: transparent; caret-color: transparent; pointer-events: none; }

/* the keyboard: editing-bench keys on the dock, typewritten capitals; a press lights the key from below and lifts the letter */
.xc-keys { margin: 10px calc(-12px + var(--xc-kg)) 0; display: grid; gap: 8px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.xc-krow { display: flex; gap: var(--xc-kg); }
.xc-krow-2 { padding: 0 calc((100% - 9 * var(--xc-kg)) / 20 + var(--xc-kg) / 2); }   /* half a key in, each side */
.xc-key { position: relative; z-index: 0; flex: 1 1 0; min-width: 0; height: var(--xc-kh); display: grid; place-items: center; padding: 0; border-radius: 8px; color: var(--xc-cream);
  background: linear-gradient(180deg, #223a2f 0%, #192c23 100%);
  box-shadow: inset 0 1px 0 rgb(214 255 232 / .1), inset 0 0 0 1px rgb(127 227 168 / .1), 0 2px 0 #030806;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: color var(--motion-fast) var(--motion-curve), transform var(--motion-fast) var(--motion-curve), box-shadow var(--motion-fast) var(--motion-curve); }
/* the light from below: on at once, off in a fast fade */
.xc-key::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, #f6fffa 0%, var(--xc-word) 100%); transition: opacity var(--motion-fast) var(--motion-curve); }
.xc-key.is-down { z-index: 2; color: var(--xc-ink); transform: translateY(1px); box-shadow: inset 0 0 0 1px rgb(16 27 22 / .16), 0 1px 0 #030806; transition: none; }
.xc-key.is-down::before { opacity: 1; transition: none; }
.xc-kl { position: relative; z-index: 1; display: block; font: 500 min(calc(21 * var(--type-unit, 1px)), 27px)/1 var(--xc-type); transform: translateY(1px) rotate(var(--jr, 0deg));
  text-shadow: .4px .3px 0 rgb(0 0 0 / .25); }
.xc-key.is-down .xc-kl { text-shadow: .5px .3px 0 rgb(19 34 27 / .3); }
/* the turn key and delete: a key and a half, the marks in mint */
.xc-key.is-fn { flex-grow: 1.5; color: var(--xc-mint); background: linear-gradient(180deg, #1a2e25 0%, #12221b 100%); }
.xc-key.is-fn svg { position: relative; z-index: 1; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.xc-key.is-back svg { width: 27px; height: 19px; }
.xc-key.is-fn.is-down { color: var(--xc-ring); }
.xc-key.is-fn[disabled] { opacity: .35; }
/* the letter lifted above the finger: a frame of leader, its perforations at top and foot, the letter typed in ink */
.xc-pop { position: absolute; z-index: 4; left: 50%; bottom: calc(100% + 8px); width: max(48px, 150%); height: 60px; display: grid; place-items: center; transform: translateX(-50%); border-radius: 10px; pointer-events: none; opacity: 0;
  color: var(--xc-ink); font: 500 calc(32 * var(--type-unit, 1px))/1 var(--xc-type);
  background:
    repeating-linear-gradient(90deg, rgb(16 27 22 / .26) 0 14%, rgb(16 27 22 / 0) 14% 29%) 50% 6% / 64% 5% no-repeat,
    repeating-linear-gradient(90deg, rgb(16 27 22 / .26) 0 14%, rgb(16 27 22 / 0) 14% 29%) 50% 94% / 64% 5% no-repeat,
    linear-gradient(180deg, var(--xc-leader), var(--xc-leader-lo));
  box-shadow: inset 0 0 0 1px rgb(16 27 22 / .14), 0 10px 18px rgb(0 0 0 / .5);
  transition: opacity var(--motion-fast) var(--motion-curve); }
.xc-key.is-l .xc-pop { left: 0; transform: none; }
.xc-key.is-r .xc-pop { left: auto; right: 0; transform: none; }
.xc-key.is-down .xc-pop { opacity: 1; transition: none; }
/* a 320 phone: ten keys across in 308pt (about 26 x 46) */
@media (max-width: 359px) { .xc { --xc-kg: 5px; } .xc-dock { padding-left: 10px; padding-right: 10px; } .xc-keys { margin-left: calc(-10px + var(--xc-kg)); margin-right: calc(-10px + var(--xc-kg)); } }
/* a short screen: the hint gives its line back once typing has begun, the keys sit a little closer (still 44pt) */
@media (max-height: 700px) { .xc { --xc-kh: 44px; } .xc-keys { gap: 6px; margin-top: 8px; } .xc.is-keyed .xc-hint { display: none; } }

.xc-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Flick, when the voice file has lines for this game */
.xc-flick { position: relative; display: flex; align-items: center; gap: 8px; margin: 16px auto 0; min-height: 56px; transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-curve); }
.xc-flick.is-leaving { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.xc-flick-x { flex: 0 0 auto; width: 44px; height: 44px; margin-left: -4px; display: grid; place-items: center; border-radius: 50%; color: var(--xc-mute); }
.xc-flick-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.xc-flick[hidden] { display: none; }
.xc-flick .xc-flick-art { flex: 0 0 auto; width: 56px; height: 56px; }
.xc-flick .xc-flick-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.xc-flick p { margin: 0; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: rgb(170 230 196 / .08); box-shadow: inset 0 0 0 1px rgb(127 227 168 / .22); font: 400 calc(14 * var(--type-unit, 1px))/1.35 var(--font-ui, system-ui, sans-serif); color: var(--xc-cream); text-wrap: pretty; }

/* the result: the big part (the shell lays out the rest) */
.xc-result { margin-top: calc(24 * var(--type-unit, 1px)); text-align: center; }
.xc-result.is-in { animation: xc-fade var(--motion-slow) var(--motion-curve) both; }
@keyframes xc-fade { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
.xc-res { display: grid; justify-items: center; gap: 4px; }
.xc-cut { margin: 0; font: 700 calc(13 * var(--type-unit, 1px))/1 var(--font-ui, system-ui, sans-serif); letter-spacing: .42em; text-transform: uppercase; color: var(--xc-mint); }
.xc-time { margin: 4px 0 0; font: 600 calc(64 * var(--type-unit, 1px))/1 var(--font-ui, system-ui, sans-serif); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--xc-cream); }
.xc-shown { margin: 4px 0 0; font: 500 calc(17 * var(--type-unit, 1px))/1.3 var(--font-ui, system-ui, sans-serif); letter-spacing: .02em; color: var(--xc-dim); }
.xc-shown.is-clean { color: var(--xc-mint); }
.xc-note { margin: 4px auto 0; max-width: 30em; font: 400 calc(13 * var(--type-unit, 1px))/1.35 var(--font-ui, system-ui, sans-serif); color: var(--xc-mute); }
.xc-btn { min-height: 48px; padding: 0 12px; border-radius: 14px; border: 1px solid rgb(127 227 168 / .4); color: var(--xc-cream); font: 600 calc(15 * var(--type-unit, 1px))/1.1 var(--font-ui, system-ui, sans-serif); }

/* loading and trouble */
.xc-state { margin: 22vh 0 0; text-align: center; color: var(--xc-dim); font: 500 calc(17 * var(--type-unit, 1px))/1.35 var(--font-ui, system-ui, sans-serif); }
.xc-state .xc-btn { margin-top: 16px; padding: 0 24px; }

/* the cover in the room: today's grid as clear frames on a small light table, a strip of film either side */
.xc-cover { position: absolute; inset: 0; container-type: size; display: flex; align-items: center; justify-content: center; gap: 4cqw; overflow: hidden; background: radial-gradient(90% 75% at 50% 40%, #1d3a2d 0%, #07100c 75%); }
.xc-cover-table { flex: 0 0 auto; width: min(66cqw, 80cqh); aspect-ratio: 1; padding: 4%; border-radius: 8px; background: radial-gradient(90% 90% at 50% 45%, #fbfffc 0%, #e9f6ee 55%, #bcdcc9 100%); box-shadow: 0 8px 14px rgb(0 0 0 / .5); }
.xc-cover-grid { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(var(--xc-cols, 7), 1fr); grid-template-rows: repeat(var(--xc-rows, 7), 1fr); gap: 1.5px; padding: 1.5px; border-radius: 3px; background: #101b16; }
.xc-cover-grid i { display: block; border-radius: 1px; background: #101b16; }
.xc-cover-grid i.is-frame { background: linear-gradient(180deg, #fbfffd, #e2f2e9); }
.xc-cover-grid i.is-lit { background: linear-gradient(180deg, #b6f0cd, #7fd9a3); }
.xc-cover-strip { flex: 0 0 auto; height: min(78cqw, 90cqh); width: min(7cqw, 22px); display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 4px 0; border-radius: 3px; background: #0c1511; }
.xc-cover-strip i { display: block; width: 52%; aspect-ratio: 1.3; border-radius: 1px; background: rgb(200 240 215 / .45); }
/* (10 November 2026, the owner: "hide them until play, just show like an example one") the cover's grid is a fixed example; on the
   landing a quiet "Example" says so */
.xc-cover.is-example .xc-cover-table { width: min(60cqw, 70cqh); margin-bottom: 9cqh; }
.xc-cover.is-example .xc-cover-strip { height: min(70cqw, 78cqh); margin-bottom: 9cqh; }
.xc-cover-note { position: absolute; left: 50%; bottom: 5cqh; transform: translateX(-50%); font: 600 calc(11 * var(--type-unit, 1px))/1 var(--font-ui, system-ui); letter-spacing: .08em; text-transform: uppercase; color: rgb(220 245 230 / .62); }

/* Reduce Motion and Low Power: the lamp stills; no splice sweep, no gate, no nudge: fades only */
html.reduce-motion .xc-lamp, html.mo-low-power .xc-lamp, #device.manual-reduced-motion .xc-lamp, .xc.manual-reduced-motion .xc-lamp { animation: none; opacity: .9; }
html.reduce-motion .xc-cell.is-cur .xc-caret, html.mo-low-power .xc-cell.is-cur .xc-caret, #device.manual-reduced-motion .xc-cell.is-cur .xc-caret, .xc.manual-reduced-motion .xc-cell.is-cur .xc-caret { animation: none; opacity: 1; }
html.reduce-motion .xc-flick.is-leaving, #device.manual-reduced-motion .xc-flick.is-leaving { transform: none; }
html.reduce-motion .xc-key.is-down, #device.manual-reduced-motion .xc-key.is-down, .xc.manual-reduced-motion .xc-key.is-down { transform: none; }
html.reduce-motion .xc.is-arriving, #device.manual-reduced-motion .xc.is-arriving { animation: xc-fade-only var(--motion-normal) var(--motion-curve) both; }
@keyframes xc-fade-only { 0% { opacity: 0; } 100% { opacity: 1; } }
html.reduce-motion .xc-cell.is-splice::after, #device.manual-reduced-motion .xc-cell.is-splice::after,
html.reduce-motion .xc.is-gate .xc-gate, #device.manual-reduced-motion .xc.is-gate .xc-gate,
html.reduce-motion .xc.is-off .xc-table, #device.manual-reduced-motion .xc.is-off .xc-table,
html.reduce-motion .xc.is-spliced .xc-table::after, #device.manual-reduced-motion .xc.is-spliced .xc-table::after { animation: none; }
html.reduce-motion .xc.is-gate .xc-cell, #device.manual-reduced-motion .xc.is-gate .xc-cell { transition: box-shadow var(--motion-normal) var(--motion-curve), color var(--motion-normal) var(--motion-curve); }
html.reduce-motion .xc-result.is-in, #device.manual-reduced-motion .xc-result.is-in { animation: xc-fade-only var(--motion-normal) var(--motion-curve) both; }
@media (prefers-reduced-motion: reduce) {
  .xc-lamp { animation: none; opacity: .9; }
  .xc-cell.is-cur .xc-caret { animation: none; opacity: 1; }
  .xc-flick.is-leaving { transform: none; }
  .xc-key.is-down { transform: none; }
  .xc.is-arriving { animation: xc-fade-only var(--motion-normal) var(--motion-curve) both; }
  .xc-cell.is-splice::after, .xc.is-gate .xc-gate, .xc.is-off .xc-table, .xc.is-spliced .xc-table::after { animation: none; }
  .xc.is-gate .xc-cell { transition: box-shadow var(--motion-normal) var(--motion-curve), color var(--motion-normal) var(--motion-curve); }
  .xc-result.is-in { animation: xc-fade-only var(--motion-normal) var(--motion-curve) both; }
}

/* solved: the result and the lit grid are the page (the clues have done their work) */
.xc.is-solved .xc-lists { display: none; }

/* ===================================================================== THE NYT BAR (17 October 2026): help with its cost printed on it,
   More (Reveal word, Reveal the grid), the worked example on a little light table; every move a one-shot on the motion tokens */
.xc-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.xc-cost { display: inline-flex; align-items: center; min-height: 22px; padding: 0 6px; border-radius: 999px; background: var(--xc-mint); color: var(--xc-ink); font: 800 calc(11.5 * var(--type-unit, 1px))/1 var(--font-ui, system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.xc-more svg { width: 22px; height: 22px; fill: currentColor; }
.xc-tool[disabled] { opacity: .45; }
.xc-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.xc-menu[hidden], .xc-confirm[hidden] { display: none; }
.xc-mi { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; min-height: 48px; padding: 4px 8px; border-radius: 12px; background: rgb(127 227 168 / .08); box-shadow: inset 0 0 0 1px rgb(127 227 168 / .3); color: var(--xc-cream); font: 600 calc(14 * var(--type-unit, 1px))/1.15 var(--font-ui, system-ui, sans-serif); transition: transform var(--motion-press) var(--motion-curve); }
.xc-mi:active { transform: scale(.97); }
.xc-mi small { flex-basis: 100%; font: 500 calc(11.5 * var(--type-unit, 1px))/1.2 var(--font-ui, system-ui, sans-serif); color: #e7a59a; }
.xc-mi[disabled] { opacity: .45; }
.xc-confirm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; padding: 10px; border-radius: 12px; background: rgb(210 73 58 / .12); box-shadow: inset 0 0 0 1px rgb(231 165 154 / .4); }
.xc-confirm p { grid-column: 1 / -1; margin: 0; color: var(--xc-cream); font: 500 calc(14 * var(--type-unit, 1px))/1.35 var(--font-ui, system-ui, sans-serif); text-align: center; }
.xc-confirm .xc-btn { min-height: 44px; border-radius: 12px; border: 1px solid rgb(127 227 168 / .4); color: var(--xc-cream); font: 600 calc(14 * var(--type-unit, 1px))/1 var(--font-ui, system-ui, sans-serif); }
.xc-confirm .xc-cf-yes { background: #e7a59a; border-color: transparent; color: #2a0f0b; }

/* ----- the worked example: a little light table; a tap lights the word, letters run along it, the splice, a grease mark, +10s */
.xc-d { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(70% 80% at 50% 40%, #1d3a2c 0%, #0b1612 75%); }
.xc-d-table { padding: 8px; border-radius: 10px; background: radial-gradient(90% 90% at 50% 45%, #f6fff9, #c5e3d1); box-shadow: 0 10px 20px rgb(0 0 0 / .45); }
.xc-d-grid { display: grid; grid-template-columns: repeat(5, 30px); grid-auto-rows: 30px; gap: 3px; }
.xc-d-gap { background: #101b16; border-radius: 3px; }
.xc-d-c { position: relative; display: grid; place-items: center; border-radius: 3px; background: linear-gradient(180deg, #fbfffd, #e3f3ea); box-shadow: inset 0 0 0 1px rgb(20 40 30 / .14); font-style: normal; transition: background-color var(--motion-fast) var(--motion-curve); }
.xc-d-c b { font: 500 calc(17 * var(--type-unit, 1px))/1 var(--xc-type); color: #10201a; opacity: 0; transform: translateY(-3px); transition: opacity var(--motion-fast) var(--motion-curve), transform var(--motion-fast) var(--motion-curve); transition-delay: calc(var(--k, 0) * 220ms); }
.xc-demo:not([data-step="0"]) .xc-d-w { background: linear-gradient(180deg, #e6fff0, #b9efd0); }
.xc-demo:not([data-step="0"]) .xc-d-w0 { box-shadow: inset 0 0 0 2px #1f8a55; }
.xc-demo:is([data-step="2"], [data-step="3"], [data-step="4"]) .xc-d-w b { opacity: 1; transform: none; }
.xc-d-w::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / .95), rgb(255 255 255 / 0)); opacity: 0; transform: scaleX(.2); transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-curve); transition-delay: calc(var(--k, 0) * 70ms); }
.xc-demo[data-step="3"] .xc-d-w::after { opacity: .9; transform: none; }
.xc-demo[data-step="4"] .xc-d-w2::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2.5px; border-radius: 2px; background: #d2493a; transform: rotate(-38deg); }
.xc-d-cost { position: absolute; right: 18px; top: 18px; padding: 4px 8px; border-radius: 999px; background: #7fe3a8; color: #0d1d16; font: 800 calc(12 * var(--type-unit, 1px))/1 var(--font-ui, system-ui, sans-serif); opacity: 0; transform: translateY(6px); transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-curve); }
.xc-demo[data-step="4"] .xc-d-cost { opacity: 1; transform: none; }
.xc-d-finger { position: absolute; left: calc(50% - 72px); top: calc(50% - 40px); width: 26px; height: 26px; border-radius: 50%; background: rgb(255 255 255 / .55); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .9); opacity: 0; transform: scale(1.4); transition: opacity var(--motion-fast) var(--motion-curve), transform var(--motion-normal) var(--motion-curve); }
.xc-demo[data-step="1"] .xc-d-finger { opacity: 1; transform: none; }
html.reduce-motion .xc-demo .xc-d-c b, #device.manual-reduced-motion .xc-demo .xc-d-c b { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .xc-demo .xc-d-c b { transition-delay: 0s; } }
/* (20 October 2026) the keys take no browser gesture, over the design system's touch-action for every button */
.xc .xc-keys .xc-key { touch-action: none !important; }

/* ===== prototype-src/duo-games.css ===== */
/* TRIPTIC on iPhone Duo: Commuters Corner and its games as SPREADS (4 November 2026). Behaviour: duo-games.js. Record:
   hub/docs/DUO-SPREADS-GAMES-2026-11-04.md.

   Every rule hangs from the shared spread system's html[data-duo-spread] (duo-spreads.js; its --dsp-* tokens): "book" (the inner
   display held like a book: the STAGE on the left page, the ACTION on the right) or "half" (the fold across the middle, half open like
   a laptop: the stage on the top half, the controls on the bottom half, like a Nintendo DS). On an iPhone, an iPad and the Duo's cover
   display the attribute is never written, and nothing here applies.

   ONE TECHNIQUE, every game. A game's root is absolutely positioned; its stage part (Freefall's world, Triptych's three posters, Cross
   Cut's board, the Cryptic's noticeboard of clue tickets) is lifted out of the game's scroller onto the stage page (position: absolute,
   its containing block the game's root, so the scroller neither clips nor moves it), and the scroller and the dock are narrowed to the
   action page. The game's own markup, order, focus order, VoiceOver names and keyboard handling are unchanged: only where things are drawn.
   Nothing that can be read or pressed lies on the fold (the spine band, --dsp-spx/spy/spw/sph). */

html[data-duo-spread="book"] {
  --dg-gut: var(--dsp-gut, 24px);
  --dg-lw: var(--dsp-spx, 441px);                                   /* the stage page's width: a game covers the rail (10 November 2026), so its left page runs from the edge to the spine */
  --dg-rx: var(--dsp-acx, 449px);                                   /* the action page's left edge */
  --dg-rw: var(--dsp-acw, 441px);                                   /* the action page's width */
  --dg-cw: calc(var(--dg-lw) - 2 * var(--dg-gut));                 /* a column of reading on a page */
  --dg-bleed: 36px;                                                /* how far a stage picture runs on past the spine */
}
html[data-duo-spread="half"] {
  --dg-gut: 20px;
  --dg-head: 56px;                                                 /* the games' header (game-shell.css) */
}

/* ===================================================================== the pages (duo-games.js split()) */
.dg-page { min-width: 0; min-height: 0; box-sizing: border-box; }

/* ===================================================================== the header: on the book, the way back and the statistics with the
   game's name over the stage page; How to play and the clock at the action page's top right. Nothing on the fold. */
html[data-duo-spread="book"] .gs > .gs-head,
html[data-duo-spread="book"] .ccn-cframe > .gs-head {
  grid-template-columns: 96px calc(var(--dg-lw) - 208px) 104px var(--dsp-spw) minmax(0, 1fr) 96px;
}
html[data-duo-spread="book"] :is(.gs, .ccn-cframe) > .gs-head > .gs-left { grid-column: 1; }
html[data-duo-spread="book"] :is(.gs, .ccn-cframe) > .gs-head > .gs-title { grid-column: 2; }
html[data-duo-spread="book"] :is(.gs, .ccn-cframe) > .gs-head > .gs-right { grid-column: 6; }

/* ===================================================================== THE LANDING (every game's start card) as a spread: the game's
   painted hero fills the stage page and runs on past the spine, fading; the number, the name, the line, Best · Streak, the free days,
   Play and How to play stand on the action page. The first-time card: the worked example on the stage, the rules opposite. */
html[data-duo-spread="book"] .gs-start { display: block; padding: 0; overflow: hidden; }
html[data-duo-spread="book"] .gs-start-in.dg-split { display: grid; grid-template-columns: var(--dg-lw) var(--dsp-spw) minmax(0, 1fr); gap: 0; width: 100%; max-width: none; height: 100%; margin: 0; zoom: 1; }
html[data-duo-spread="book"] .gs-start-in > .dg-stage { grid-column: 1; position: relative; display: grid; align-content: center; justify-items: center; gap: 16px; padding: 24px var(--dg-gut); overflow-y: auto; overscroll-behavior: contain; }
html[data-duo-spread="book"] .gs-start-in > .dg-action { grid-column: 3; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: safe center; align-items: center; gap: 14px;
  padding: 24px var(--dg-gut) max(24px, env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
html[data-duo-spread="book"] .gs-start-in > .dg-action > * { max-width: 100%; }
html[data-duo-spread="book"] .gs-start-in > .dg-action > .gs-play { align-self: stretch; }
/* the hero: the whole stage page, past the spine by --dg-bleed, its far edge fading into the action page's ground */
html[data-duo-spread="book"] .gs-start.has-hero .gs-start-in > .dg-stage { overflow: visible; padding: 0; }
html[data-duo-spread="book"] .gs-start.has-hero .gs-start-in > .dg-stage > .gs-hero {
  position: absolute; inset: 0 calc(-1 * (var(--dsp-spw) + var(--dg-bleed))) 0 0; justify-self: stretch; align-self: stretch; width: auto; height: auto; max-width: none; aspect-ratio: auto; border-radius: 0; box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--dg-bleed) - var(--dsp-spw) - 24px), rgb(0 0 0 / 0) 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--dg-bleed) - var(--dsp-spw) - 24px), rgb(0 0 0 / 0) 100%);
}
html[data-duo-spread="book"] .gs-start.has-hero .gs-start-in > .dg-action { padding-left: calc(var(--dg-gut) + var(--dg-bleed) * .5); }
html[data-duo-spread="book"] .gs-start .gs-start-title.is-big { font-size: calc(52 * var(--type-unit, 1px)); }
html[data-duo-spread="book"] .gs-start .dg-action .gs-tagline { max-width: 360px; }
/* the first-time card: the worked example, large, on the stage */
html[data-duo-spread="book"] .gs-start .dg-stage .gs-demo { width: 100%; max-width: 380px; }
html[data-duo-spread="book"] .gs-start .dg-stage .gs-goal { max-width: 380px; text-align: center; }
html[data-duo-spread="book"] .gs-start .dg-action .gs-rules { align-self: stretch; }

/* ===================================================================== How to play and Statistics as a spread: the sheet rises over both
   pages; the goal and the worked example (or the four numbers and the personal best) on the stage page, the rules, controls and scoring
   (or the world rank and the distribution) opposite, each page scrolling on its own. */
html[data-duo-spread="book"] .gs-sheet.dg-split { display: grid; grid-template-columns: var(--dg-lw) var(--dsp-spw) minmax(0, 1fr); gap: 0; padding: 0;
  height: calc(100% - 64px); max-height: none; overflow: hidden; }
html[data-duo-spread="book"] .gs-sheet > .dg-page { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px var(--dg-gut) max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px)); }
html[data-duo-spread="book"] .gs-sheet > .dg-stage { grid-column: 1; }
html[data-duo-spread="book"] .gs-sheet > .dg-action { grid-column: 3; padding-top: 22px; }
html[data-duo-spread="book"] .gs-sheet > .dg-stage > .gs-grip { align-self: center; flex: none; }
html[data-duo-spread="book"] .gs-sheet > .dg-stage .gs-demo { flex: none; }
html[data-duo-spread="book"] .gs-sheet > .dg-action > .gs-sheet-done { margin-top: auto; flex: none; }
/* Statistics: the four numbers as a 2 x 2 of big figures on the stage */
html[data-duo-spread="book"] .gs-sheet > .dg-stage > .gs-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; margin: 12px 0 0; }
html[data-duo-spread="book"] .gs-sheet > .dg-stage > .gs-nums dd { font-size: calc(44 * var(--type-unit, 1px)); }
html[data-duo-spread="book"] .gs-sheet > .dg-stage > .gs-pb { margin-top: 4px; }

/* ===================================================================== FREEFALL (end-credits.js): the falling world and Flick fill the
   stage page; the prompt, the ring, the field, the keys, the stat line and the depth trail are on the action page; the result is the
   action page, always open, beside the world you can scroll. */
html[data-duo-spread="book"] .ec.ff :is(.ff-stage, .ff-fx, .ff-grain, .ff-fade) { right: auto; width: var(--dg-lw); }
html[data-duo-spread="book"] .ec.ff .ff-place { right: auto; width: var(--dg-lw); }
html[data-duo-spread="book"] .ec.ff .ff-land { left: calc(var(--dg-lw) / 2); max-width: calc(var(--dg-lw) - 2 * var(--dg-gut)); }
html[data-duo-spread="book"] .ec.ff .ec-q { left: var(--dg-rx); padding-left: var(--dg-gut); padding-right: calc(var(--dg-gut) + 22px); }
html[data-duo-spread="book"] .ec.ff .ec-dock { left: var(--dg-rx); border-radius: 18px 0 0 0; }
html[data-duo-spread="book"] .ec.ff .ec-q, html[data-duo-spread="book"] .ec.ff .ec-dock { background-color: transparent; }
/* the action page's ground: the night at the top of the world, so the page reads as a page and not as more sky */
html[data-duo-spread="book"] .ec.ff::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--dg-rx); right: 0; pointer-events: none;
  background: radial-gradient(120% 60% at 30% 0%, rgb(64 52 120 / .5), rgb(64 52 120 / 0) 70%), linear-gradient(180deg, #18122e 0%, #120d24 100%);
  box-shadow: inset 1px 0 0 rgb(255 255 255 / .06); }
/* the depth trail: the sixteen layers, a bar down the action page's edge beside the prompt and the keys */
html[data-duo-spread="book"] .ec.ff .ff-gauge { right: 10px; top: calc(var(--ff-head) + 14px); bottom: calc(var(--ff-dock-real, 200px) + 14px); }
html[data-duo-spread="book"] .ec.ff .ff-stat { left: calc(var(--dg-rx) + var(--dg-gut)); top: auto; bottom: calc(var(--ff-dock-real, 200px) + 16px); max-width: calc(var(--dg-rw) - 2 * var(--dg-gut) - 24px); }
html[data-duo-spread="book"] .ec.ff.is-result .ff-gauge { bottom: 24px; }
/* the result: the whole action page */
html[data-duo-spread="book"] .ec.ff .ff-res { left: var(--dg-rx); width: var(--dg-rw); translate: none; top: calc(var(--ff-head) + 6px); max-height: none; border-radius: 22px 0 0 0;
  transform: none !important; background: transparent; box-shadow: none; }
html[data-duo-spread="book"] .ec.ff .ff-res .ff-grip { display: none; }
html[data-duo-spread="book"] .ec.ff .ff-res-body { overflow-y: auto; padding-top: 14px; }
html[data-duo-spread="book"] .ec.ff .ff-res .gs-result > * { opacity: 1; }
/* the landing over the world: the world is its own hero on the stage page (game-shell's landing, split by duo-games.js) */
html[data-duo-spread="book"] .ec.ff .gs-start { background: transparent; }
html[data-duo-spread="book"] .ec.ff .gs-start .dg-action { background: linear-gradient(180deg, #18122e 0%, #120d24 100%); }

/* ===================================================================== TRIPTYCH (triptych-game.js): the three posters on the stage page,
   the clue rows, the field, Show a clue and the keys on the action page; the result opposite the posters. */
html[data-duo-spread="book"] .tg .tg-scroll,
html[data-duo-spread="book"] .tg .tg-dock { margin-left: var(--dg-rx); }
html[data-duo-spread="book"] .tg .tg-scroll { position: static; padding-inline: var(--dg-gut); justify-content: safe center; }
html[data-duo-spread="book"] .tg .tg-lamp { left: 0; right: auto; width: var(--dg-lw); height: 100%; }
html[data-duo-spread="book"] .tg .tg-altar { position: absolute; z-index: 2; left: var(--dg-gut); width: var(--dg-cw); max-width: none; top: 56px; bottom: 40px; margin: 0; align-content: center; }
html[data-duo-spread="book"] .tg .tg-postertip { position: absolute; z-index: 2; left: var(--dg-gut); width: var(--dg-cw); bottom: 16px; margin: 0; text-align: center; }
html[data-duo-spread="book"] .tg.is-typing .tg-altar { transform: none; }
html[data-duo-spread="book"] .tg .tg-dock { border-top-left-radius: 18px; }

/* ===================================================================== CROSS CUT (cross-cut.js): the board on the stage page, the clue,
   the tools and the keys on the action page, with the hint line, the counts, Flick and the two clue lists above them. */
html[data-duo-spread="book"] .xc .xc-scroll,
html[data-duo-spread="book"] .xc .xc-dock { margin-left: var(--dg-rx); }
html[data-duo-spread="book"] .xc .xc-scroll { position: static; padding-inline: var(--dg-gut); }
/* (the scroller's fade at its foot is a mask, and a mask is painted over everything inside it, the lifted board too) */
html[data-duo-spread] .xc .xc-scroll { -webkit-mask-image: none; mask-image: none; }
html[data-duo-spread="book"] .xc .xc-body { max-width: none; }
html[data-duo-spread="book"] .xc .xc-lamp { left: -20%; right: auto; width: calc(var(--dg-lw) * 1.3); }
html[data-duo-spread="book"] .xc .xc-bay { position: absolute; z-index: 2; left: var(--dg-gut); width: var(--dg-cw); top: 64px; bottom: 24px; margin: 0; align-items: center; }
html[data-duo-spread="book"] .xc .xc-dock { border-top-left-radius: 14px; }

/* ===================================================================== THE DAILY CRYPTIC (cryptic-premium.js; ds-cryptic-game.css), in
   the room's frame (#device.ccn-cry-hosted: the screen is inset 6px). The landing: Spoolie and the poster under the spotlight on the
   stage page, the headline, the day, the world line and Play opposite. Play: the clue tickets hang on the stage page like a noticeboard
   (every ticket at once, the newest arriving from the action page over the fold); the score, the five clue tokens, Spoolie's word,
   the guess and Reveal next clue on the action page. */
html[data-duo-spread="book"] #device > .screen.cg-room { --dg-ox: 0px; }
html[data-duo-spread="book"] #device.ccn-cry-hosted > .screen.cg-room { --dg-ox: 6px; }   /* (in the room's frame the screen is inset 6px) */
html[data-duo-spread="book"] #device > .screen.cg-room:is(.cg-landing, .cg-play) {
  padding-left: calc(var(--dg-rx) - var(--dg-ox) + var(--dg-gut)) !important; padding-right: calc(var(--dg-gut) - var(--dg-ox)) !important; }
html[data-duo-spread="book"] #device > .screen.cg-landing > .cg-stage {
  position: absolute; left: calc(var(--dg-gut) - var(--dg-ox)); width: var(--dg-cw); top: 24px; bottom: 24px; margin: 0; min-height: 0; }
html[data-duo-spread="book"] #device > .screen.cg-play > .cg-clues {
  position: absolute; left: calc(var(--dg-gut) - var(--dg-ox) - 8px); width: calc(var(--dg-cw) + 16px); top: 12px; bottom: 12px; margin: 0;
  display: flex; flex-direction: column; gap: 14px; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; padding: 14px 8px 20px; box-sizing: border-box;
  border-radius: 18px; background: rgb(18 6 48 / .32); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
html[data-duo-spread="book"] #device > .screen.cg-play > .cg-clues > .cg-clue-card { flex: none; width: 100%; transform: rotate(var(--dg-tilt, -.6deg)); scroll-snap-align: none; position: relative; }
html[data-duo-spread="book"] #device > .screen.cg-play > .cg-clues > .cg-clue-card:nth-child(2n) { --dg-tilt: .5deg; }
html[data-duo-spread="book"] #device > .screen.cg-play > .cg-clues > .cg-clue-card:nth-child(3n) { --dg-tilt: -.25deg; }
/* each ticket hangs from a pin */
html[data-duo-spread="book"] #device > .screen.cg-play > .cg-clues > .cg-clue-card::before { content: ""; position: absolute; z-index: 3; left: 50%; top: -5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #f4c542 45%, #a87412 100%); box-shadow: 0 2px 3px rgb(0 0 0 / .45); pointer-events: none; }
html[data-duo-spread="book"] #device > .screen.cg-play > .cg-clues > .cg-clue-card.is-arriving { animation: none; }
html[data-duo-spread="book"] #device > .screen.cg-play > .cg-clues.is-typed { flex: none; }

/* ===================================================================== HALF OPEN (the fold across, like a laptop): the stage on the top half,
   the controls on the bottom half */
/* the landing, How to play and Statistics: split into the top half (the hero, the worked example, the four numbers) and the bottom
   half (the name, the rules, the scores, Play), each half its own page; the header stays at the top */
html[data-duo-spread="half"] .gs-start { display: block; padding: 0; overflow: hidden; }
html[data-duo-spread="half"] .gs-start-in.dg-split { display: grid; grid-template-rows: calc(var(--dsp-sth) - var(--dg-head)) var(--dsp-sph) minmax(0, 1fr); gap: 0; width: 100%; max-width: none; height: 100%; margin: 0; zoom: 1; }
html[data-duo-spread="half"] .gs-start-in > .dg-page { overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 12px; padding: 12px var(--dg-gut); }
html[data-duo-spread="half"] .gs-start-in > .dg-stage { grid-row: 1; }
html[data-duo-spread="half"] .gs-start-in > .dg-action { grid-row: 3; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
html[data-duo-spread="half"] .gs-start-in > .dg-action > * { max-width: 520px; }
html[data-duo-spread="half"] .gs-start-in > .dg-action > .gs-play { align-self: stretch; margin-inline: auto; width: 100%; }
html[data-duo-spread="half"] .gs-start.has-hero .gs-start-in > .dg-stage { padding: 0; overflow: hidden; }
html[data-duo-spread="half"] .gs-start.has-hero .gs-start-in > .dg-stage > .gs-hero { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
html[data-duo-spread="half"] .gs-start .dg-stage .gs-demo { width: 100%; max-width: 440px; }
html[data-duo-spread="half"] .gs-sheet.dg-split { display: grid; grid-template-rows: calc(var(--dsp-sth) - 64px) var(--dsp-sph) minmax(0, 1fr); gap: 0; padding: 0; height: calc(100% - 64px); max-height: none; overflow: hidden; }
html[data-duo-spread="half"] .gs-sheet > .dg-page { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; overscroll-behavior: contain; padding: 10px var(--dg-gut) 16px; }
html[data-duo-spread="half"] .gs-sheet > .dg-stage { grid-row: 1; }
html[data-duo-spread="half"] .gs-sheet > .dg-action { grid-row: 3; padding-bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px)); }
html[data-duo-spread="half"] .gs-sheet > .dg-stage > .gs-grip { align-self: center; flex: none; }
html[data-duo-spread="half"] .gs-sheet > :is(.dg-stage, .dg-action) > * { flex: none; }
html[data-duo-spread="half"] .gs-sheet > .dg-stage > .gs-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-block: auto; }
html[data-duo-spread="half"] .gs-sheet > .dg-stage > .gs-nums dd { font-size: calc(40 * var(--type-unit, 1px)); }

/* the games room: the marquee and Flick on the top screen, the four cabinets on the bottom screen */
html.ds[data-duo-spread="half"] .ccn-head { flex: none; height: calc(var(--dsp-sth) - 6px); grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; box-sizing: border-box; padding-bottom: 14px; }
html.ds[data-duo-spread="half"] .ccn-head > .ccn-sign { align-self: center; }
html.ds[data-duo-spread="half"] .ccn-wall { flex: none; margin-top: calc(var(--dsp-sph) + 6px); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 16px; --ccn-aspect: 4 / 5; align-content: start; }
html.ds[data-duo-spread="half"] .ccn-dialog { gap: 12px; }

/* the Daily Cryptic: the spotlight (landing) or the noticeboard of clue tickets (play) on the top half */
html[data-duo-spread="half"] #device > .screen.cg-room { --dg-oy: 0px; --dg-ox: 0px; }
html[data-duo-spread="half"] #device.ccn-cry-hosted > .screen.cg-room { --dg-oy: var(--ccn-ct, 64px); --dg-ox: 6px; }
html[data-duo-spread="half"] #device > .screen.cg-room:is(.cg-landing, .cg-play) { padding-top: calc(var(--dsp-acy) - var(--dg-oy) + 8px) !important; }
html[data-duo-spread="half"] #device > .screen.cg-landing > .cg-stage { position: absolute; left: 0; right: 0; top: 8px; height: calc(var(--dsp-sth) - var(--dg-oy) - 16px); margin: 0; min-height: 0; }
html[data-duo-spread="half"] #device > .screen.cg-play > .cg-clues { position: absolute; left: 14px; right: 14px; top: 8px; height: calc(var(--dsp-sth) - var(--dg-oy) - 16px); margin: 0;
  display: flex; flex-direction: column; gap: 12px; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; padding: 12px 8px 16px; box-sizing: border-box;
  border-radius: 18px; background: rgb(18 6 48 / .32); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
html[data-duo-spread="half"] #device > .screen.cg-play > .cg-clues > .cg-clue-card { flex: none; width: 100%; scroll-snap-align: none; }
html[data-duo-spread="half"] #device > .screen.cg-play > .cg-clues.is-typed { flex: none; }

/* Freefall: the world in the top half, the prompt and the keys in the bottom half */
html[data-duo-spread="half"] .ec.ff :is(.ff-stage, .ff-fx, .ff-grain, .ff-fade) { bottom: auto; height: var(--dsp-sth); }
html[data-duo-spread="half"] .ec.ff .ec-q { top: var(--dsp-acy); padding-top: 10px; }
/* (final duofix R2-05, 14 November 2026) typing, the keys and their suggestions filled most of the bottom half and covered the
   prompt and its field. The prompt keeps the action page over the keys; the suggestions stand just above the fold, at the foot
   of the top half (the dock stands on the display's foot: its suggestions are lifted out of it to the fold's edge). */
html[data-duo-spread="half"] .ec.ff .ec-dock .ec-drop { position: absolute; z-index: 3; left: 12px; right: 12px; margin: 0; bottom: calc(100dvh - var(--dsp-sty, 0px) - var(--dsp-sth) + 8px); }
html[data-duo-spread="half"] .ec.ff::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: var(--dsp-acy); bottom: 0; pointer-events: none;
  background: linear-gradient(180deg, #18122e 0%, #120d24 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); }
html[data-duo-spread="half"] .ec.ff .ff-gauge { top: calc(var(--ff-head) + 14px); bottom: calc(100% - var(--dsp-sth) + 14px); }
html[data-duo-spread="half"] .ec.ff .ff-stat { top: auto; bottom: calc(100% - var(--dsp-sth) + 12px); }
html[data-duo-spread="half"] .ec.ff .ff-res { top: var(--dsp-acy); max-height: none; transform: none !important; border-radius: 0; }
html[data-duo-spread="half"] .ec.ff .ff-res .ff-grip { display: none; }
html[data-duo-spread="half"] .ec.ff .ff-res-body { padding-top: 16px; }
html[data-duo-spread="half"] .ec.ff .ff-res .gs-result > * { opacity: 1; }
html[data-duo-spread="half"] .ec.ff.is-result .ff-stage { bottom: auto; height: var(--dsp-sth); }

/* Triptych: the posters, the poster tip and the clue rows on the top screen (what you read); the field, Show a clue, I give up and the
   keys on the bottom screen (what you do) */
html[data-duo-spread="half"] .tg .tg-scroll { position: static; margin-top: calc(var(--dsp-acy) - var(--dg-head)); justify-content: flex-start; padding-top: 6px; padding-bottom: 8px; }
html[data-duo-spread="half"] .tg .tg-altar { position: absolute; z-index: 2; left: 0; right: 0; margin: 0 auto; top: var(--dg-head); height: calc(var(--dsp-sth) - var(--dg-head) - 150px);
  width: min(calc(100% - 2 * var(--dg-gut)), calc((var(--dsp-sth) - var(--dg-head) - 170px) * 1.66)); max-width: none; align-content: center; }
html[data-duo-spread="half"] .tg .tg-postertip { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--dsp-sth) - 146px); margin: 0; text-align: center; }
html[data-duo-spread="half"] .tg .tg-hints { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--dsp-sth) - 118px); width: min(420px, calc(100% - 2 * var(--dg-gut))); margin: 0 auto; }
html[data-duo-spread="half"] .tg.is-open .tg-hints, html[data-duo-spread="half"] .tg.is-given .tg-hints { margin: 0 auto; }
html[data-duo-spread="half"] .tg.is-typing .tg-altar { transform: none; }

/* Cross Cut: the board in the top half */
html[data-duo-spread="half"] .xc .xc-scroll { position: static; margin-top: calc(var(--dsp-acy) - var(--dg-head)); }
html[data-duo-spread="half"] .xc .xc-bay { position: absolute; z-index: 2; left: var(--dg-gut); right: var(--dg-gut); top: calc(var(--dg-head) + 4px); height: calc(var(--dsp-sth) - var(--dg-head) - 14px); margin: 0; align-items: center; }

/* the Cryptic's play half open: Spoolie's word rides on the top half with the noticeboard, so the guess fits the bottom half */
html[data-duo-spread="half"] #device > .screen.cg-play > .cg-host { position: absolute; left: 14px; right: 14px; top: 8px; height: 64px; min-height: 0; margin: 0; z-index: 2; }
html[data-duo-spread="half"] #device > .screen.cg-play > .cg-clues { top: 84px; height: calc(var(--dsp-sth) - var(--dg-oy) - 92px); }

/* ===================================================================== the Cryptic's result as a spread: the verdict and the film on the
   stage, the points, the world rank, the card week and what next opposite (each page its own scroll; the header over both) */
html[data-duo-spread] #device > .screen.cg-result { overflow: hidden !important; }
html[data-duo-spread] #device > .screen.cg-result > .cg-header { position: relative; z-index: 3; }
html[data-duo-spread] #device > .screen.cg-result > .cg-result-body.dg-split { position: absolute; inset: 0; z-index: 1; display: grid; gap: 0; padding: 0; }
html[data-duo-spread] #device > .screen.cg-result > .cg-result-body > .dg-page { display: grid; align-content: start; gap: 14px; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 20px; }
html[data-duo-spread="book"] #device > .screen.cg-result > .cg-result-body.dg-split { grid-template-columns: calc(var(--dg-lw) - var(--dg-ox)) var(--dsp-spw) minmax(0, 1fr); }
html[data-duo-spread="book"] #device > .screen.cg-result > .cg-result-body > .dg-stage { grid-column: 1; padding: 70px var(--dg-gut) 20px calc(var(--dg-gut) - var(--dg-ox)); align-content: center; }
html[data-duo-spread="book"] #device > .screen.cg-result > .cg-result-body > .dg-action { grid-column: 3; padding: 70px calc(var(--dg-gut) - var(--dg-ox)) 20px var(--dg-gut); }
/* the brand mark over the stage page's middle, not on the spine */
html[data-duo-spread="book"] #device > .screen.cg-result > .cg-header > .critical-brand-lockup { position: absolute; left: calc(var(--dg-lw) / 2 - 26px); top: 50%; translate: -50% -50%; }
html[data-duo-spread="half"] #device > .screen.cg-result > .cg-result-body.dg-split { grid-template-rows: calc(var(--dsp-sth) - var(--dg-oy)) var(--dsp-sph) minmax(0, 1fr); }
html[data-duo-spread="half"] #device > .screen.cg-result > .cg-result-body > .dg-stage { grid-row: 1; padding: 64px 20px 12px; }
html[data-duo-spread="half"] #device > .screen.cg-result > .cg-result-body > .dg-action { grid-row: 3; padding: 12px 20px 20px; }

/* ===== prototype-src/stingers.css ===== */
/* TRIPTIC Stingers: the post-credits scenes earned in End Credits, and their reel in the Library (Commute Corner lane 4,
   16 October 2026; plan hub/docs/COMMUTE-CORNER-2026-10.md). This file is not a design-system file: it may use its own values.
   No CSS animation lives here: every movement is a Web Animation drawn from stingers.js (transform and opacity only), so there
   are no keyframes to register in the living map. Type goes through --type-unit so the text size setting scales it. */

/* the credits face for the names and dates inside the scenes (Barlow Condensed, OFL, already shipped for End Credits) */
@font-face { font-family: "Stinger Cond"; src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------------------------------------------------------------- the player (full screen) */
.stg-host {
  position: absolute; inset: 0; z-index: 2600; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #050302; color: #f1e3c4; overflow: hidden; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
.stg-host.is-fixed { position: fixed; }
.stg-frame { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; width: 100%; min-height: 0; }
.stg-stage { position: relative; flex: none; overflow: hidden; border-radius: 6px; background: #0d0907; }
.stg-set { position: absolute; left: 0; top: 0; width: 360px; height: 520px; transform-origin: 0 0; overflow: hidden; }
.stg-cam { position: absolute; left: 0; top: 0; width: 360px; height: 520px; will-change: transform; }
.stg-o { position: absolute; display: block; will-change: transform, opacity; pointer-events: none; }
.stg-o > svg { display: block; overflow: visible; }
.stg-f .stg-l { position: absolute; inset: 0; will-change: opacity; }
.stg-f .flk, .stg-f .flk-body { position: absolute; inset: 0; display: block; width: 100%; height: 100%; animation: none; }
.stg-f .flk-img, .stg-f img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.stg-f .flk-lids { display: none; }
.stg-mum { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stg-flick-missing { position: absolute; left: 20%; right: 20%; top: 20%; bottom: 6%; border-radius: 12px; background: #f1e3c4; opacity: .85; }

.stg-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; min-height: calc(92 * var(--type-unit, 1px)); padding: 10px 20px 22px;
  text-align: center; font-family: var(--font-ui, system-ui, sans-serif);
}
.stg-no { font-size: calc(12 * var(--type-unit, 1px)); line-height: calc(16 * var(--type-unit, 1px)); letter-spacing: .28em; margin-right: -.28em; text-transform: uppercase; color: #c9a24a; font-weight: 600; }
.stg-title { font-size: calc(20 * var(--type-unit, 1px)); line-height: calc(26 * var(--type-unit, 1px)); font-weight: 600; letter-spacing: .01em; color: #f6ecd0; }
.stg-day { font-size: calc(12 * var(--type-unit, 1px)); line-height: calc(16 * var(--type-unit, 1px)); letter-spacing: .2em; margin-right: -.2em; color: rgba(241, 227, 196, .58); }

.stg-done {
  position: absolute; top: max(10px, env(safe-area-inset-top, 0px)); right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(241, 227, 196, .1); color: #f1e3c4; display: grid; place-items: center; padding: 0; cursor: pointer;
}
.stg-done i { position: relative; width: 16px; height: 16px; display: block; }
.stg-done i::before, .stg-done i::after { content: ""; position: absolute; left: 7px; top: -1px; width: 2px; height: 18px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.stg-done i::after { transform: rotate(-45deg); }
.stg-done:focus-visible { outline: 2px solid #c9a24a; outline-offset: 2px; }

/* ---------------------------------------------------------------- the Library's Stingers room: a reel of twelve frames */
html.ds #device .dslc-room-stingers .stg-reel { display: grid; gap: 14px; max-width: 520px; margin: 0 auto; padding: 4px 0 8px; }
html.ds #device .dslc-room-stingers .stg-strip {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 17px 9px 8px;
  border-radius: 7px; background: #0b0806; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
/* sprocket holes along the top of every strip (a film strip's perforations) */
html.ds #device .dslc-room-stingers .stg-strip::before {
  content: ""; position: absolute; left: 7px; right: 7px; top: 5px; height: 6px; border-radius: 2px; opacity: .5;
  background: repeating-linear-gradient(90deg, rgba(241, 227, 196, .9) 0 7px, transparent 7px 15px);
}
html.ds #device .dslc-room-stingers .stg-cellwrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
html.ds #device .dslc-room-stingers .stg-cell {
  position: relative; display: block; width: 100%; aspect-ratio: 360 / 520; margin: 0; padding: 0; border: 0; border-radius: 3px; overflow: hidden;
  background: #0f0a07; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); color: inherit; font: inherit; text-align: center; -webkit-tap-highlight-color: transparent;
}
html.ds #device .dslc-room-stingers button.stg-cell { cursor: pointer; transition-property: scale, opacity; transition-duration: var(--motion-fast); transition-timing-function: var(--motion-curve); }
html.ds #device .dslc-room-stingers button.stg-cell:active { scale: .97; }
html.ds #device .dslc-room-stingers button.stg-cell:focus-visible { outline: 2px solid #c9a24a; outline-offset: 2px; }
html.ds #device .dslc-room-stingers .stg-poster { position: absolute; inset: 0; display: block; overflow: hidden; pointer-events: none; }
html.ds #device .dslc-room-stingers .stg-poster .stg-stage { border-radius: 0; }
html.ds #device .dslc-room-stingers .stg-cell.is-dark { background: radial-gradient(120% 90% at 50% 40%, #17110c 0%, #0a0705 70%); }
html.ds #device .dslc-room-stingers .stg-num {
  position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; display: block; text-align: center; font-family: var(--font-ui, system-ui, sans-serif);
  font-size: calc(13 * var(--type-unit, 1px)); line-height: calc(16 * var(--type-unit, 1px)); letter-spacing: .12em; text-transform: uppercase; color: rgba(241, 227, 196, .34); font-weight: 600;
}
html.ds #device .dslc-room-stingers .stg-cap { display: block; min-height: calc(30 * var(--type-unit, 1px)); text-align: center; font-family: var(--font-ui, system-ui, sans-serif); }
html.ds #device .dslc-room-stingers .stg-cap-title { display: block; font-size: calc(12 * var(--type-unit, 1px)); line-height: calc(15 * var(--type-unit, 1px)); font-weight: 600; color: var(--c-label-1, #f6ecd0); }
html.ds #device .dslc-room-stingers .stg-cap-day { display: block; font-size: calc(10 * var(--type-unit, 1px)); line-height: calc(14 * var(--type-unit, 1px)); letter-spacing: .14em; color: var(--c-label-3, rgba(241, 227, 196, .5)); }
html.ds #device .dslc-room-stingers .stg-note { margin: 14px 0 0; padding: 0 12px; text-align: center; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }
html.ds #device .dslc-room-stingers .stg-flickline { display: flex; justify-content: center; margin: 0 0 12px; }

@media (prefers-reduced-motion: reduce) { html.ds #device .dslc-room-stingers button.stg-cell { transition: none; } }
html.ds.reduce-motion #device .dslc-room-stingers button.stg-cell, html.ds #device.manual-reduced-motion .dslc-room-stingers button.stg-cell { transition: none; }

/* five rooms in the one segmented control (the Stingers room, after Cards): the names are set a little smaller so none is cut on the smallest iPhone */
html.ds #device .dslc-seg.dslc-rooms-seg[style*="--n: 5"]:not(.is-stacked) .dslc-seg-btn { font-size: calc(12.5 * var(--type-unit, 1px)); padding: 0 2px; letter-spacing: -.01em; }

/* ---------------------------------------------------------------- the backdrop (17 October 2026, lane ART-C; hub/docs/SCENE-ART-2026-10-17.md)
   The scene's painted scenery, a still layer of its own under the set (it does not move with the camera). If it does not arrive,
   the stage's own dark shows through the thinned wall, as a darker room. */
.stg-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0d0907; }
.stg-backdrop[data-art="failed"] { display: none; }
.stg-backdrop-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.stg-backdrop + .stg-set { z-index: 1; }
/* (release polish, 28 October 2026) the empty reel: one strip of what is to come, quiet, under the room's empty state */
html.ds #device .stg-reel.is-teaser { margin-top: 18px; opacity: .55; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent); pointer-events: none; }

/* ===== prototype-src/swipe-deck.css ===== */
/* TRIPTIC swipe-deck: the film card in the hand (lane SWIPE, 20 October 2026; runtime pair swipe-deck.js; record
   hub/docs/SWIPE-2026-10-20.md). Tokens only. Everything that moves moves by transform / opacity (and the individual
   translate / scale properties), fed by the custom properties the gesture writes once a frame:
     on the card   --sw-right | --sw-left | --sw-up | --sw-down   0..1, how far toward each answer (its stamp)
     on the deck   --stack-p                                      0..1, how far the next card has risen
   Loads after ds-first-run.css. */

/* ------------------------------------------------------------------ the card */
html.ds #device .first-run-screen.ds-fr-taste.sw-deck .taste-swipe-card {
  touch-action: none !important;          /* four ways out: the card takes the whole gesture (this screen does not scroll) */
  cursor: grab;
  container-type: inline-size;            /* the stamps are sized by the card (it is small at 320pt and at the largest text) */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html.ds #device .first-run-screen.ds-fr-taste.sw-deck .taste-swipe-card.sw-held { cursor: grabbing; }
html.ds #device .first-run-screen.ds-fr-taste.sw-deck .taste-swipe-card:focus-visible { outline: 3px solid var(--c-lamp); outline-offset: 4px; }
html.ds #device .first-run-screen.ds-fr-taste.sw-deck .taste-swipe-card .swipe-verdict[hidden] { display: none !important; }
html.ds #device .sw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* the wash: the poster takes on the colour of the answer it is heading for */
html.ds #device .sw-deck .sw-wash { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; overflow: hidden; }
html.ds #device .sw-deck .sw-wash > i { position: absolute; inset: 0; opacity: 0; }
html.ds #device .sw-deck .sw-wash > .sw-wash-right { background: linear-gradient(90deg, color-mix(in srgb, var(--c-lamp) 38%, transparent), transparent 70%); opacity: calc(var(--sw-right, 0) * .9); }
html.ds #device .sw-deck .sw-wash > .sw-wash-left { background: linear-gradient(270deg, color-mix(in srgb, var(--c-stage) 70%, transparent), transparent 75%); opacity: var(--sw-left, 0); }
html.ds #device .sw-deck .sw-wash > .sw-wash-up { background: linear-gradient(0deg, color-mix(in srgb, var(--c-lamp) 44%, transparent), transparent 80%); opacity: calc(var(--sw-up, 0) * .9); }
html.ds #device .sw-deck .sw-wash > .sw-wash-down { background: color-mix(in srgb, var(--c-stage) 55%, transparent); opacity: calc(var(--sw-down, 0) * .8); }

/* the stamps: pressed onto the poster on the side the card is heading away from */
html.ds #device .sw-deck .sw-stamps { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
html.ds #device .sw-deck .sw-stamp {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  max-width: 88cqi;
  padding: .35em .65em .35em .5em;
  border: 2px solid currentColor;
  border-radius: var(--r-control);
  background: color-mix(in srgb, var(--c-stage) 58%, transparent);
  font: 800 clamp(10px, 8cqi, calc(19 * var(--type-unit)))/1.1 var(--fr-font, var(--font-ui));
  letter-spacing: -.01em;
  white-space: nowrap;
  opacity: 0;
  scale: .9;
  transition: scale var(--motion-fast) var(--motion-spring, var(--motion-curve));
}
html.ds #device .sw-deck .sw-stamp svg { flex: none; width: 1.15em; height: 1.15em; }
html.ds #device .sw-deck .sw-stamp-right { top: 8cqi; left: 6cqi; rotate: -12deg; color: var(--c-lamp); opacity: var(--sw-right, 0); }
html.ds #device .sw-deck .sw-stamp-left { top: 8cqi; right: 6cqi; rotate: 12deg; color: var(--c-label-1); opacity: var(--sw-left, 0); }
html.ds #device .sw-deck .sw-stamp-up { left: 50%; bottom: 34%; translate: -50% 0; rotate: -6deg; color: var(--c-lamp-ink); background: var(--c-lamp); border-color: var(--c-lamp); opacity: var(--sw-up, 0); }
html.ds #device .sw-deck .sw-stamp-up svg { fill: currentColor; }
html.ds #device .sw-deck .sw-stamp-down { left: 50%; top: 8cqi; translate: -50% 0; rotate: 4deg; color: var(--c-label-2); border-style: dashed; opacity: var(--sw-down, 0); }
html.ds #device .sw-deck .taste-swipe-card[data-sw-armed="right"] .sw-stamp-right,
html.ds #device .sw-deck .taste-swipe-card[data-sw-armed="left"] .sw-stamp-left,
html.ds #device .sw-deck .taste-swipe-card[data-sw-armed="up"] .sw-stamp-up,
html.ds #device .sw-deck .taste-swipe-card[data-sw-armed="down"] .sw-stamp-down { scale: 1.06; }
/* ------------------------------------------------------------------ the films beneath
   (29 October 2026; hub/docs/TASTE-INTRO-2026-10-29.md) Why a yellow sliver showed under the card: the cards beneath were
   centred with `transform: translate(-50%, -50%)`, which CSS applies AFTER the separate `translate` and `scale`, so each was
   scaled about a point that was not its centre and hung down and to the right of the card, the next film's poster showing
   in the gap. They now stand in the card's own grid cell (no centring transform), scaled from their foot, so each shows
   exactly 9pt (and 18pt) of a plain dark edge under the card. The next film's poster is there, decoded, under an opaque
   veil that lifts only as that card rises into place (--stack-p, while a card is dragged off; arrive() when it comes up). */
html.ds #device .first-run-screen.ds-fr-taste.sw-deck .taste-deck > :is(.taste-ghost, .taste-swipe-card) { grid-area: 1 / 1; }
html.ds #device .first-run-screen.ds-fr-taste.sw-deck .taste-ghost {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  transform-origin: 50% 100%;
  opacity: 1 !important;
  overflow: hidden;
  pointer-events: none;
  translate: 0 calc((1 - var(--stack-p, 0)) * 9px);
  scale: calc(.94 + .06 * var(--stack-p, 0));
}
html.ds #device .first-run-screen.ds-fr-taste.sw-deck .taste-ghost.ghost-b {
  translate: 0 calc(9px + (1 - var(--stack-p, 0)) * 9px);
  scale: calc(.88 + .06 * var(--stack-p, 0));
}
html.ds #device .first-run-screen.ds-fr-taste.sw-deck .taste-swipe-card { z-index: 2; }
html.ds #device .first-run-screen.ds-fr-taste.sw-deck .taste-ghost.ghost-a { z-index: 1; }
html.ds #device .first-run-screen.ds-fr-taste.sw-deck .taste-ghost.sw-empty { opacity: 0 !important; }
html.ds #device .sw-deck .taste-ghost > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
html.ds #device .sw-deck .taste-ghost > .sw-dim { position: absolute; inset: 0; border-radius: inherit; background: var(--c-stage-raised); opacity: calc(1 - var(--stack-p, 0)); }
html.ds #device .sw-deck .taste-ghost.ghost-b > .sw-dim { opacity: 1; }
html.ds #device .sw-deck .taste-swipe-card > .sw-veil { position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: var(--c-stage-raised); pointer-events: none; }

/* ------------------------------------------------------------------ the 30-second round */
html.ds #device .first-run-screen.ds-fr-taste.refinement-timed-round > header .ds-fr-progress { display: none; }
html.ds #device .first-run-screen.ds-fr-taste.refinement-timed-round > header .sw-clock {
  grid-column: 2;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 5px;
  width: min(150px, 100%);
}
html.ds #device .refinement-timed-round .sw-clock [data-refinement-clock] {
  font: 700 calc(17 * var(--type-unit))/calc(20 * var(--type-unit)) var(--fr-font, var(--font-ui));
  font-variant-numeric: tabular-nums;
  color: var(--c-label-1);
}
html.ds #device .refinement-timed-round .sw-clock [data-refinement-clock].is-low { color: var(--c-lamp); }
html.ds #device .refinement-timed-round .sw-clock-track { position: relative; display: block; width: 100%; height: 4px; border-radius: var(--r-pill); background: var(--c-fill-2); overflow: hidden; }
html.ds #device .refinement-timed-round .sw-clock-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--c-lamp); transform-origin: 0 50%; }
html.ds #device .first-run-screen.ds-fr-taste.refinement-timed-round > header .refinement-score {
  grid-column: 3;
  justify-self: end;
  white-space: nowrap;
  font: 500 calc(13 * var(--type-unit))/calc(18 * var(--type-unit)) var(--fr-font, var(--font-ui));
  color: var(--c-label-2);
}
html.ds #device .refinement-timed-round > header .refinement-score b {
  display: inline-block;
  font: 700 calc(20 * var(--type-unit))/1 var(--fr-font, var(--font-ui));
  font-variant-numeric: tabular-nums;
  color: var(--c-label-1);
}

/* ------------------------------------------------------------------ "Rate films at your own pace" (owner, 3 November 2026)
   No round and no fifteen dots: the count of films rated this time ("12 rated") stands where the dots stood, centred over
   the card, in the count's own tabular Subhead; Done (the close) keeps its place. */
html.ds #device .first-run-screen.ds-fr-taste.refinement-endless > header > .ds-fr-count { grid-column: 2; grid-row: 1; justify-self: center; }

/* ------------------------------------------------------------------ the end of a round */
html.ds #device .taste-refinement-screen .refinement-done { display: flex; flex-direction: column; align-items: center; text-align: center; }
html.ds #device .taste-refinement-screen .refinement-done-timed .refinement-edition-number { margin-bottom: 0; font-variant-numeric: tabular-nums; }
html.ds #device .taste-refinement-screen .refinement-score-unit {
  margin: 2px 0 var(--sp-3);
  font: 600 calc(17 * var(--type-unit))/calc(22 * var(--type-unit)) var(--fr-font, var(--font-ui));
  color: var(--c-label-2);
}
html.ds #device .taste-refinement-screen .refinement-best {
  display: inline-flex;
  align-items: center;
  align-self: center;
  width: auto;
  min-height: 30px;
  margin: 0 0 var(--sp-4);
  padding: 4px 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  font: 600 calc(14 * var(--type-unit))/calc(18 * var(--type-unit)) var(--fr-font, var(--font-ui));
  color: var(--c-label-1);
  font-variant-numeric: tabular-nums;
}
html.ds #device .taste-refinement-screen .refinement-best.is-new { border-color: var(--c-lamp); background: var(--c-lamp); color: var(--c-lamp-ink); }
html.ds #device .taste-refinement-screen .refinement-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 330px;
  margin: 0 auto var(--sp-5);
}
html.ds #device .taste-refinement-screen .refinement-strip > img {
  width: 32px;
  height: 48px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--c-line);
  opacity: .42;
}
html.ds #device .taste-refinement-screen .refinement-strip > img.is-lit { opacity: 1; }
html.ds #device .taste-refinement-screen .refinement-strip > img.is-loved { border: 2px solid var(--c-lamp); }
html.ds #device .taste-refinement-screen .refinement-strip > b {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 48px;
  font: 600 calc(13 * var(--type-unit))/1 var(--fr-font, var(--font-ui));
  color: var(--c-label-2);
}
@media (max-height: 640px) {
  html.ds #device .taste-refinement-screen .refinement-strip > img, html.ds #device .taste-refinement-screen .refinement-strip > b { width: 24px; min-width: 24px; height: 36px; }
}

/* Reduce Motion: no depth, no stamp spring; the card still follows the finger */
html.ds.reduce-motion #device .sw-deck .sw-stamp, html.ds #device.manual-reduced-motion .sw-deck .sw-stamp { transition: none; }
@media (prefers-reduced-motion: reduce) { html.ds #device .sw-deck .sw-stamp { transition: none; } }

/* short screens (320 × 568, Duo inner, the largest text): the end card keeps the count, the best and the buttons; the strip,
   the summary line and the device note make way so nothing overlaps */
@media (max-height: 700px) {
  html.ds #device .taste-refinement-screen .refinement-done-timed .refinement-strip,
  html.ds #device .taste-refinement-screen .refinement-done-timed .onboarding-copy > p,
  html.ds #device .taste-refinement-screen.refinement-finished.refinement-timed-round > .refinement-local-note { display: none; }
  html.ds #device .taste-refinement-screen .refinement-done-timed .refinement-edition-number { font-size: calc(44 * var(--type-unit)); line-height: 1.05; }
  html.ds #device .taste-refinement-screen .refinement-done-timed .refinement-score-unit { margin-bottom: var(--sp-2); }
  html.ds #device .taste-refinement-screen .refinement-done-timed .refinement-best { margin-bottom: var(--sp-3); }
}
/* the first card lifting out of the intro's dimmed poster (ds-first-run.js liftIn): the same dimming, lifting */
html.ds #device .sw-deck .taste-swipe-card > .sw-veil.sw-veil-dim, html.ds #device .ds-fr-taste .taste-swipe-card > .sw-veil.sw-veil-dim { position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: black; pointer-events: none; }

/* ===== prototype-src/native-extras.css ===== */
/* TRIPTIC native extras (lane NATIVE, 9 October 2026): Settings > App icon and Settings > Spatial sound, sheets shown
   only in the iPhone app (prototype-src/native-extras.js). Tokens only; the one motion language; nothing loops. */
#device .ne-page { padding: 0 0 var(--sp-8); color: var(--c-label-1); font-family: var(--font-ui); }
#device .ne-intro {
  margin: 0 0 var(--sp-5);
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui);
  letter-spacing: var(--tr-body);
  color: var(--c-label-2);
}
#device .ne-note {
  margin: var(--sp-4) 0 0;
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui);
  letter-spacing: var(--tr-footnote);
  color: var(--c-label-3);
}
#device .ne-note-strong { color: var(--c-label-2); }

/* the icons: one row each, the picture, its name and line, a check on the chosen one */
#device .ne-icons {
  display: grid;
  gap: 0;
  border-radius: var(--r-row);
  background: var(--c-fill-1);
  border: 1px solid var(--c-line);
  overflow: hidden;
}
#device .ne-icon {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 24px;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  min-height: 96px;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-top: 1px solid var(--c-line);
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-fast) var(--motion-curve);
}
#device .ne-icon:first-child { border-top: 0; }
#device .ne-icon:active { background: var(--c-fill-press); }
#device .ne-icon[disabled] { opacity: .72; }
#device .ne-icon img {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  display: block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 18px rgba(0, 0, 0, .45);
}
#device .ne-icon-text strong,
#device .ne-switch-text strong {
  display: block;
  font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui);
  letter-spacing: var(--tr-headline);
  color: var(--c-label-1);
}
#device .ne-icon-text small,
#device .ne-switch-text small {
  display: block;
  margin-top: 2px;
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui);
  letter-spacing: var(--tr-footnote);
  color: var(--c-label-3);
}
#device .ne-check { color: var(--c-seal-hi, #a78bfa); opacity: 0; transform: scale(.7); transition: opacity var(--motion-fast) var(--motion-curve), transform var(--motion-normal) var(--motion-curve); }
#device .ne-icon.is-on .ne-check { opacity: 1; transform: none; }
#device .ne-icon.is-on img { box-shadow: 0 0 0 2px var(--c-seal-hi, #a78bfa), 0 8px 18px rgba(0, 0, 0, .45); }

/* spatial sound: the drawing, then the one switch */
#device .ne-drawing { display: grid; place-items: center; margin: 0 0 var(--sp-2); }
#device .ne-drawing svg { max-width: 100%; height: auto; }
#device .ne-switch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 51px;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  margin: var(--sp-5) 0 0;
  padding: var(--sp-3) var(--sp-4);
  min-height: 64px;
  border-radius: var(--r-row);
  background: var(--c-fill-1);
  border: 1px solid var(--c-line);
  color: inherit;
  text-align: left;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
#device .ne-switch[disabled] .ne-switch-text strong { color: var(--c-label-3); }
#device .ne-toggle {
  position: relative;
  width: 51px;
  height: 31px;
  border-radius: 999px;
  background: var(--c-fill-2, rgba(255, 255, 255, .16));
  transition: background-color var(--motion-normal) var(--motion-curve);
}
#device .ne-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  transition: transform var(--motion-normal) var(--motion-curve);
}
#device .ne-switch[aria-checked="true"] .ne-toggle { background: var(--c-seal, #8b5cf6); }
#device .ne-switch[aria-checked="true"] .ne-toggle::after { transform: translateX(20px); }
#device .ne-switch[disabled] .ne-toggle { opacity: .5; }

/* the largest text: the picture above the words */
html[data-text-size="largest"] #device .ne-icon { grid-template-columns: 56px minmax(0, 1fr) 20px; }
html[data-text-size="largest"] #device .ne-icon img { width: 56px; height: 56px; border-radius: 13px; }
@media (prefers-reduced-motion: reduce) {
  #device .ne-check, #device .ne-toggle, #device .ne-toggle::after, #device .ne-icon { transition: none; }
}
html.reduce-motion #device .ne-check, html.reduce-motion #device .ne-toggle, html.reduce-motion #device .ne-toggle::after { transition: none; }

/* ===== prototype-src/clip-receiver.css ===== */
/* The share page's arrival and "TRIPTIC for iPhone" (lane CLIP, 9 October 2026; prototype-src/clip-receiver.js,
   hub/docs/CLIP-2026-10-09b.md). The arches, the seal and the three films as the App Clip draws them
   (ios/TRIPTICClip/ClipLook.swift): the design system's colours, the motion tokens, no loop. */

html.ds #device > .clip-arrival {
  --clip-c: clamp(92px, 30vw, 170px);
  position: absolute; inset: 0; z-index: 70; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) 24px max(28px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(60% 45% at 50% 42%, color-mix(in srgb, var(--c-seal) 30%, transparent), transparent 70%),
    radial-gradient(70% 40% at 50% -6%, color-mix(in srgb, var(--c-lamp) 8%, transparent), transparent 70%),
    var(--c-stage);
  opacity: 1;
  transition: opacity var(--motion-slow) var(--motion-curve);
}
html.ds #device > .clip-arrival.is-leaving { opacity: 0; pointer-events: none; }
html.ds #device.clip-arriving > .collectible-receiver { visibility: hidden; }
html.ds #device.clip-arriving > .clip-arrival.is-leaving ~ .collectible-receiver,
html.ds #device.clip-arriving:has(> .clip-arrival.is-leaving) > .collectible-receiver { visibility: visible; }

/* ---- the arches ---- */
html.ds #device .clip-stage {
  position: relative; display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--clip-c) * .1);
  flex: none; padding-top: 8px; margin-bottom: 30px;
}
html.ds #device .clip-floor {
  position: absolute; left: 50%; bottom: calc(var(--clip-c) * -.2); width: calc(var(--clip-c) * 3.2); height: calc(var(--clip-c) * .5);
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-seal) 45%, transparent), transparent);
  opacity: .8; transition: opacity var(--motion-slow) var(--motion-curve);
}
html.ds #device .clip-arrival.is-whole .clip-floor { opacity: 1; }
html.ds #device .clip-arch {
  --w: calc(var(--clip-c) * .8);
  position: relative; display: block; flex: none; width: var(--w); height: calc(var(--w) * 1.6); overflow: hidden;
  border-radius: calc(var(--w) / 2) calc(var(--w) / 2) 4px 4px;
  background:
    repeating-linear-gradient(90deg, transparent 0 18%, color-mix(in srgb, var(--c-seal-hi) 14%, transparent) 24%, transparent 32%),
    radial-gradient(90% 55% at 50% 100%, color-mix(in srgb, var(--c-seal-hi) 55%, transparent), transparent 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--c-stage) 92%, transparent), color-mix(in srgb, var(--c-seal-fill) 30%, var(--c-stage)) 55%, color-mix(in srgb, var(--c-seal-fill) 85%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-lamp) 38%, transparent), 0 6px 44px color-mix(in srgb, var(--c-seal) 45%, transparent);
}
html.ds #device .clip-arch.is-centre { --w: var(--clip-c); }
html.ds #device .clip-arch > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: translateY(26px) scale(.95); transform-origin: 50% 100%;
  transition: opacity var(--motion-slow) var(--motion-curve), transform var(--motion-slow) var(--motion-spring);
}
html.ds #device .clip-arch > b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box;
  font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); color: var(--c-label-1); text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-seal-fill) 30%, var(--c-stage)), var(--c-seal-fill));
  opacity: 0; transition: opacity var(--motion-slow) var(--motion-curve);
}
html.ds #device .clip-arch > i {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 2px 7px; border-radius: var(--r-pill);
  font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); font-style: normal; font-variant-numeric: tabular-nums;
  color: var(--c-label-1); background: color-mix(in srgb, var(--c-stage) 72%, transparent);
  opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve);
}
html.ds #device .clip-arch.is-landed { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-lamp) 55%, transparent), 0 6px 44px color-mix(in srgb, var(--c-seal) 45%, transparent); }
html.ds #device .clip-arch.is-landed > img { opacity: 1; transform: none; }
html.ds #device .clip-arch.is-landed > b,
html.ds #device .clip-arch.is-landed > i { opacity: 1; }

/* ---- the seal ---- */
html.ds #device .clip-seal {
  position: absolute; left: 50%; bottom: calc(var(--clip-c) * .42); width: calc(var(--clip-c) * .46); height: calc(var(--clip-c) * .46);
  margin-left: calc(var(--clip-c) * -.23); cursor: pointer;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c-lamp) 35%, transparent)) drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
  transition: opacity var(--motion-normal) var(--motion-curve), transform var(--motion-normal) var(--motion-curve);
}
html.ds #device .clip-seal > svg { display: block; width: 100%; height: 100%; }
html.ds #device .clip-seal .clip-seal-disc { fill: var(--c-lamp); }
html.ds #device .clip-seal .clip-seal-ring { fill: none; stroke: color-mix(in srgb, var(--c-lamp-ink) 14%, transparent); stroke-width: 1.6; }
html.ds #device .clip-seal .clip-seal-arches { fill: var(--c-lamp-ink); opacity: .82; }
html.ds #device .clip-arrival.is-breaking .clip-seal { opacity: 0; transform: scale(1.35); pointer-events: none; }

/* ---- the words and the one action ---- */
html.ds #device .clip-arrival > .clip-eyebrow {
  margin: 0 0 10px; font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); color: var(--c-label-3);
}
html.ds #device .clip-arrival > h1 {
  margin: 0 0 22px; max-width: 20em; text-align: center; overflow-wrap: anywhere;
  font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); color: var(--c-label-1);
}
html.ds #device .clip-arrival > h1:focus { outline: none; }
html.ds #device .clip-arrival > .clip-reveal { width: 100%; max-width: 360px; margin: 0; transition: opacity var(--motion-fast) var(--motion-curve); }
html.ds #device .clip-arrival.is-breaking > .clip-reveal { opacity: 0; pointer-events: none; }

/* Reduce Motion: nothing moves or scales; each step is a fade */
html.ds.reduce-motion #device .clip-arch > img, html.ds #device.manual-reduced-motion .clip-arch > img,
html.ds.reduce-motion #device .clip-arrival.is-breaking .clip-seal, html.ds #device.manual-reduced-motion .clip-arrival.is-breaking .clip-seal { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.ds #device .clip-arch > img, html.ds #device .clip-arrival.is-breaking .clip-seal { transform: none; }
}

/* ---- "TRIPTIC for iPhone": Safari on an iPhone or iPad, once the App Store page is known ---- */
html.ds #device .collectible-receiver .clip-get {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; padding: 12px 12px 12px 14px;
  border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line);
}
html.ds #device .clip-get-mark { flex: none; width: 40px; height: 40px; }
html.ds #device .clip-get-mark > svg { display: block; width: 100%; height: 100%; }
html.ds #device .clip-get-mark .clip-seal-disc { fill: var(--c-lamp); }
html.ds #device .clip-get-mark .clip-seal-ring { fill: none; stroke: color-mix(in srgb, var(--c-lamp-ink) 14%, transparent); stroke-width: 1.6; }
html.ds #device .clip-get-mark .clip-seal-arches { fill: var(--c-lamp-ink); }
html.ds #device .clip-get-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
html.ds #device .clip-get-words > strong { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); color: var(--c-label-1); }
html.ds #device .clip-get-words > span { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds #device .clip-get-link {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; padding: 0 18px; box-sizing: border-box;
  border-radius: var(--r-pill); background: var(--c-lamp); color: var(--c-lamp-ink); text-decoration: none;
  font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui);
}
html.ds #device .clip-get-link:focus-visible { outline: 2px solid var(--c-seal-hi); outline-offset: 3px; }

/* ===== prototype-src/stubs.css ===== */
/* TRIPTIC stubs (lane STUBS, 10 October 2026): the ticket tear, milestone stubs and the Stubs shelf, Film DNA's
   "You've got a thing for…". Script: stubs.js. Record: hub/docs/STUBS-2026-10-10.md. Tokens only; motion is transform
   and opacity on the motion tokens (the animations themselves are WAAPI in stubs.js). */

/* ------------------------------------------------------------------------------------------------ 4. the ticket tear */
html.ds #device .stb-tear { position: absolute; z-index: 260; width: 0; height: 0; pointer-events: none; }
html.ds #device .stb-tear-ticket {
  position: absolute; left: 0; top: 0; display: flex; width: 216px; height: 68px; translate: -50% -50%;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); will-change: transform, opacity;
}
html.ds #device .stb-tear-main,
html.ds #device .stb-tear-stub { position: relative; display: grid; align-content: center; gap: 3px; height: 100%; background: var(--c-lamp); color: var(--c-lamp-ink); will-change: transform, opacity; }
html.ds #device .stb-tear-main {
  flex: 1 1 auto; min-width: 0; padding: 0 12px 0 18px; border-radius: 10px 0 0 10px; transform-origin: 100% 0;
  box-shadow: inset 4px 0 0 rgb(var(--stb-film, 124, 77, 235));
}
html.ds #device .stb-tear-stub {
  flex: 0 0 64px; justify-items: center; padding: 0 6px; border-radius: 0 10px 10px 0; transform-origin: 0 0;
  /* the perforation the ticket tears along: a column of small holes, then the paper */
  background: radial-gradient(circle at 0 50%, transparent 1.8px, var(--c-lamp) 2.4px) 0 0 / 5px 8px repeat-y, linear-gradient(var(--c-lamp), var(--c-lamp)) 5px 0 / calc(100% - 5px) 100% no-repeat;
}
html.ds #device .stb-tear-main b,
html.ds #device .stb-tear-stub b { font: 700 11px/1.1 var(--font-ui); letter-spacing: .14em; color: var(--c-lamp-ink); opacity: .62; }
html.ds #device .stb-tear-main i { overflow: hidden; font: 700 15px/1.2 var(--font-ui); font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
html.ds #device .stb-tear-stub em { font: 700 12px/1.1 var(--font-ui); font-style: normal; }

/* ------------------------------------------------------------------------------------------------ 5. a stub: the moment, and opened from the shelf */
/* above the dock (220), as the film-cards overlay is (280), and under the sheets (340) so Share opens over it */
html.ds #device .stb-layer { position: absolute; inset: 0; z-index: 280; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
html.ds #device .stb-dim { position: absolute; inset: 0; background: color-mix(in srgb, var(--c-stage) 80%, transparent); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); }
html.ds #device .stb-card {
  position: relative; display: grid; justify-items: center; gap: 16px; width: min(100%, 360px); max-height: 100%; overflow-y: auto; padding: 26px 22px 22px;
  border-radius: var(--r-sheet); background: var(--mat-chrome-solid); box-shadow: inset 0 0 0 1px var(--c-line-strong), var(--e-3); overscroll-behavior: contain;
}
html.ds #device .stb-stage { display: grid; place-items: center; transform: rotate(-2deg); will-change: transform, opacity; }
html.ds #device .stb-canvas { display: block; width: auto; height: min(328px, 40vh); max-width: 100%; }
html.ds #device .stb-copy { display: grid; justify-items: center; gap: 6px; width: 100%; text-align: center; }
html.ds #device .stb-eyebrow { margin: 0; font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-seal-hi); }
html.ds #device .stb-copy h2 { margin: 0; font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2); color: var(--c-label-1); text-wrap: balance; }
/* the title takes focus so VoiceOver starts there; it is not a control, so no ring */
html.ds #device .stb-layer #stb-title[tabindex="-1"]:is(:focus, :focus-visible) { outline: none !important; box-shadow: none !important; }
html.ds #device .stb-line { margin: 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); text-wrap: pretty; }
html.ds #device .stb-kept { margin: 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }
/* Flick says it (lane VOICE, 11 October 2026): him with his badge beside a speech bubble (ds-flick.css) */
html.ds #device .stb-spoolie { width: 100%; margin-top: 6px; text-align: left; }
html.ds #device .stb-spoolie > .sps-speech { display: flex; align-items: center; gap: 14px; }
html.ds #device .stb-spoolie .sps-art { width: 44px; }
html.ds #device .stb-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 8px; }
html.ds #device .stb-actions > button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-width: 0; min-height: 50px; margin: 0; white-space: normal; }
html.ds #device .stb-actions svg { width: 18px; height: 18px; flex: 0 0 auto; }
html.ds #device .stb-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; }
html.ds #device .stb-close i { position: relative; display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--c-fill-2); }
html.ds #device .stb-close i::before, html.ds #device .stb-close i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; border-radius: var(--r-pill); background: var(--c-label-2); rotate: 45deg; }
html.ds #device .stb-close i::after { rotate: -45deg; }
html.ds #device .stb-close:focus-visible { outline: 1px solid var(--c-focus); outline-offset: -4px; }
/* the largest text: one button a row */
html.ds[data-text-size="largest"] #device .stb-actions { grid-template-columns: minmax(0, 1fr); }
/* a short phone (375 x 667): the stub a little smaller so the words and both buttons stay in view */
@media (max-height: 700px) { html.ds #device .stb-canvas { height: min(248px, 34vh); } html.ds #device .stb-card { gap: 12px; padding-top: 20px; } }
/* iPhone Duo, inner display: the stub on the left leaf, its words on the right; nothing in the fold */
html.ds #device .stb-layer.is-spanned { place-items: stretch; padding: 0; }
html.ds #device .stb-layer.is-spanned .stb-card {
  width: 100%; max-height: none; height: 100%; border-radius: 0; padding: 0; background: none; box-shadow: none;
  grid-template-columns: var(--stb-leaf) var(--stb-gap) minmax(0, 1fr); grid-template-rows: 1fr; align-items: center;
}
html.ds #device .stb-layer.is-spanned .stb-stage { grid-column: 1; }
html.ds #device .stb-layer.is-spanned .stb-canvas { height: min(380px, 70vh); }
html.ds #device .stb-layer.is-spanned .stb-copy { grid-column: 3; width: min(100% - 48px, 360px); justify-self: center; }
html.ds #device .stb-layer.is-spanned .stb-close { top: 16px; right: 16px; }

/* ------------------------------------------------------------------------------------------------ the Stubs shelf (Library) */
html.ds #device .stb-shelf-head { display: flex; align-items: baseline; gap: 10px; }
html.ds #device .stb-shelf-count { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }
html.ds #device .stb-row { display: flex; gap: 14px; margin: 0 -20px; padding: 6px 20px 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
html.ds #device .stb-row::-webkit-scrollbar { display: none; }
html.ds #device .stb-slot { flex: 0 0 auto; scroll-snap-align: start; }
html.ds #device .stb-mini { position: relative; display: block; width: 72px; height: 120px; min-height: 0; padding: 0; border: 0; border-radius: 10px; background: none; box-shadow: none; transform: rotate(-2deg); }
html.ds #device .stb-slot:nth-child(2n) .stb-mini { transform: rotate(1.5deg); }
html.ds #device .stb-mini-art { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .4)); }
html.ds #device .stb-mini-canvas { display: block; width: 72px; height: 120px; }
html.ds #device .stb-mini-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html.ds #device .stb-mini:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 4px; }
html.ds #device .stb-next { margin: 4px 0 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }

/* ------------------------------------------------------------------------------------------------ 6. Film DNA noticed */
html.ds #device .stb-thing {
  position: relative; display: grid; justify-items: start; gap: 6px; margin: 4px 0 22px; padding: 18px 52px 18px 18px; border-radius: var(--r-card);
  background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line);
}
html.ds #device .stb-thing-eyebrow { margin: 0; font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-dna-worlds); }
html.ds #device .stb-thing-title { margin: 0; font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: var(--tr-title-3); color: var(--c-label-1); text-wrap: balance; }
html.ds #device .stb-thing-line { margin: 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); text-wrap: pretty; }
html.ds #device .stb-thing-more { margin-top: 8px; min-height: 44px; white-space: normal; text-align: left; }
html.ds #device .stb-thing-x { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; color: var(--c-label-3); }
html.ds #device .stb-thing-x svg { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
html.ds #device .stb-thing-x:focus-visible { outline: 1px solid var(--c-focus); outline-offset: -4px; }
/* the sheet: their films the app already knows */
html.ds .stb-more { display: grid; gap: 14px; padding-bottom: 8px; }
html.ds .stb-more-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
html.ds .stb-more-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 8px 4px; border: 0; border-radius: var(--r-row); background: none; box-shadow: none; text-align: left; color: var(--c-label-1); }
html.ds .stb-more-row:focus-visible { outline: 1px solid var(--c-focus); outline-offset: -2px; }
html.ds .stb-more-poster { position: relative; flex: 0 0 auto; width: 40px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 6px; background: var(--c-fill-2); }
html.ds .stb-more-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.ds .stb-more-body { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
html.ds .stb-more-title { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); color: var(--c-label-1); }
html.ds .stb-more-meta { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds .stb-more-note { margin: 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-3); }
html.ds .stb-more-search { justify-self: start; min-height: 44px; }

/* ===== prototype-src/noticed.css ===== */
/* TRIPTIC noticed (lane FLICK-DELIGHT, 20 October 2026; record hub/docs/NOTICED-2026-10-20.md). Runtime pair: noticed.js.
   One kind of note for every moment the app notices: a small card of the app's solid chrome (legible over any page) above the tab bar (or the
   foot of the screen where there is none), a spark and NOTICED in the label style, one sentence, at most one action, and a
   close button. 44-point targets; the app's type ramp, so it grows with the text size; tokens only. It rises on the
   motion spring (transform and opacity), follows a finger that swipes it away, and is simply there under Reduce Motion. */
html.ds #device > .ntc {
  position: absolute; z-index: 295; left: 12px; right: 12px;
  bottom: var(--ntc-bottom, max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px)));
  display: flex; align-items: flex-start; gap: 2px; box-sizing: border-box; max-width: 520px; margin: 0 auto; padding: 12px 6px 12px 14px;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-card);
  background: var(--mat-chrome-solid); box-shadow: var(--e-2);
  color: var(--c-label-1); touch-action: none; -webkit-tap-highlight-color: transparent;
}
html.ds #device > .ntc > .ntc-live { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; justify-items: start; }
html.ds .ntc-eyebrow {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font: var(--fw-eyebrow) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-seal-hi);
}
html.ds .ntc-glyph { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
html.ds .ntc-text { margin: 0; text-wrap: pretty; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); color: var(--c-label-1); }
html.ds .ntc-go {
  appearance: none; min-height: 44px; margin: 0 0 -10px -12px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer;
  font: var(--fw-headline) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-beam);
}
html.ds .ntc-x {
  appearance: none; flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -10px 0 -10px 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--c-label-3); cursor: pointer;
}
html.ds .ntc-x svg { stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none; }
html.ds :is(.ntc-go, .ntc-x):focus-visible { outline: 2px solid var(--c-label-1); outline-offset: -4px; }
html.ds #device > .ntc.is-arriving { animation: ntc-in var(--motion-slow) var(--motion-spring) both; }
@keyframes ntc-in { 0% { opacity: 0; transform: translateY(18px) scale(.97); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.ds #device > .ntc { animation: none !important; transition: none !important; } }
html.ds #device.manual-reduced-motion > .ntc, html.ds[data-motion-tier="reduced"] #device > .ntc { animation: none !important; transition: none !important; }

/* ===== prototype-src/title-glide.css ===== */
/* TRIPTIC title-glide (preview flag "title-glide"; title-glide.js has the whole story). A one-line text the stylesheets cut
   with an ellipsis, when it really overflows: it shows its start and fades softly at the cut edge (a mask, never a painted
   gradient over the letters), and now and then glides to show its end (its pieces move together: its text in spans made for the glide only).
   --tg-l / --tg-r are the soft edges at the start and the end, moved by title-glide.js with the glide. */
@property --tg-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --tg-r { syntax: "<length>"; inherits: false; initial-value: 14px; }
html:is(.pv-title-glide, .pv-all) #device .tg-fit {
  text-overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--tg-l), #000 calc(100% - var(--tg-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--tg-l), #000 calc(100% - var(--tg-r)), transparent 100%);
}
html:is(.pv-title-glide, .pv-all) #device .tg-run > :is(.tg-t, .tg-p) { display: inline-block; }
html:is(.pv-title-glide, .pv-all) #device .tg-run > .tg-t.tg-keep { white-space: pre; }
/* Reduce Motion: a second line where the row has the room (title-glide.js checks the row keeps its height) */
html:is(.pv-title-glide, .pv-all) #device .tg-wrap {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow: hidden; text-overflow: ellipsis;
  -webkit-mask-image: none; mask-image: none;
}

/* ===== prototype-src/reason-words.css ===== */
/* TRIPTIC reason-words (preview flag "reason-words"; reason-words.js has the whole story). While the reason under a film
   settles, each word is its own small box so it can rise; the spaces between stay text, so the lines break where they did. */
html:is(.pv-reason-words, .pv-all) #device .rw-run > .rw-w { display: inline-block; }

/* ===== prototype-src/badge-stamp.css ===== */
/* TRIPTIC badge-stamp (preview flag "badge-stamp"; badge-stamp.js has the whole story). While the match label is stamped
   on, its own scale and rotation are moved (never its transform, which places it): the turn and the size are taken
   about the label's middle (badge-stamp.js run()). */
html:is(.pv-badge-stamp, .pv-all) #device .bs-run { will-change: transform, opacity; }
/* the stamp comes straight down where the label belongs: while it is stamped the label does not also slide into place (the
   showpiece's own settle of its transform; the stamp is the one move) */
html:is(.pv-badge-stamp, .pv-all) #device .trip-critical-layer .sp-strongest.bs-run { transition: none !important; }

/* ===== prototype-src/speaker-waves.css ===== */
/* TRIPTIC speaker-waves (preview flag "speaker-waves"; speaker-waves.js has the whole story). The Ten's speaker before
   what the trailer's caption row says: the cone alone and still when muted or paused; its two waves breathing out from it
   while the trailer plays WITH sound (data-sound="on", which only YouTube's own report sets). Transform and opacity on
   the wave paths only; a state loop (scripts/motion/living-map.mjs), paused off screen and in the background; still under
   Reduce Motion. */
html:is(.pv-speaker-waves, .pv-all) .ds-tt-player-meta p.sw-row { grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-items: center; }
html:is(.pv-speaker-waves, .pv-all) .ds-tt-player-meta p.sw-row > strong { grid-column: 1 / -1; }
html:is(.pv-speaker-waves, .pv-all) .ds-tt-player-meta .sw-spk { display: none; width: 16px; height: 16px; color: var(--c-label-2); }
html:is(.pv-speaker-waves, .pv-all) .ds-tt-player:is([data-mode="muted"], [data-mode="paused"], [data-mode="sound"]) .sw-spk { display: block; }
html:is(.pv-speaker-waves, .pv-all) .ds-tt-player[data-sound="on"] .sw-spk { color: var(--c-ok); }
html:is(.pv-speaker-waves, .pv-all) .sw-spk .sw-glyph { display: block; width: 100%; height: 100%; overflow: visible; }
html:is(.pv-speaker-waves, .pv-all) .sw-spk .sw-wave { opacity: 0; transform-box: fill-box; transform-origin: 0 50%; transition: opacity var(--motion-fast) var(--motion-curve); }
html:is(.pv-speaker-waves, .pv-all) .ds-tt-player[data-sound="on"] .sw-spk .sw-wave { opacity: 1; animation: sw-wave var(--motion-ceremony) var(--motion-breathe) infinite; }
html:is(.pv-speaker-waves, .pv-all) .ds-tt-player[data-sound="on"] .sw-spk .sw-w2 { animation-delay: calc(var(--motion-ceremony) / -2); }
html:is(.pv-speaker-waves, .pv-all) .sw-spk.sw-away .sw-wave, html.sw-hidden:is(.pv-speaker-waves, .pv-all) .sw-spk .sw-wave { animation-play-state: paused; }
@keyframes sw-wave {
  0%, 100% { opacity: .35; transform: translate3d(-1px, 0, 0) scale(.86); }
  50% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { html:is(.pv-speaker-waves, .pv-all) .ds-tt-player[data-sound="on"] .sw-spk .sw-wave { animation: none; opacity: 1; } }
html.reduce-motion:is(.pv-speaker-waves, .pv-all) .ds-tt-player[data-sound="on"] .sw-spk .sw-wave, html:is(.pv-speaker-waves, .pv-all) #device.manual-reduced-motion .ds-tt-player[data-sound="on"] .sw-spk .sw-wave { animation: none; opacity: 1; }

/* ===== prototype-src/progress-ring.css ===== */
/* TRIPTIC progress-ring (preview flag "progress-ring"; progress-ring.js has the whole story). A fine gold ring round The
   Ten's pause button: how far through the preview is. Drawn in the button's own box, out past any ring the button draws
   (--pr-gap, read from its outline and hard box-shadows), so a restyled or resized button keeps it in place. It fades
   with the button. The arc is a stroke-dashoffset on a unit path, starting at twelve o'clock and going clockwise. */
html:is(.pv-progress-ring, .pv-all).ds .ds-tt-pp > svg.pr-ring {
  position: absolute; inset: calc(-1 * var(--pr-gap, 4px)); width: auto; height: auto; display: block; overflow: visible; pointer-events: none;
  rotate: -90deg; translate: none; opacity: 0; transition: opacity var(--motion-fast) var(--motion-curve);
}
html:is(.pv-progress-ring, .pv-all).ds .ds-tt-pp > svg.pr-ring.is-known { opacity: 1; }
html:is(.pv-progress-ring, .pv-all).ds .ds-tt-pp > svg.pr-ring circle { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
html:is(.pv-progress-ring, .pv-all).ds .ds-tt-pp > svg.pr-ring .pr-track { stroke: color-mix(in srgb, var(--c-plus-gold) 22%, transparent); }
html:is(.pv-progress-ring, .pv-all).ds .ds-tt-pp > svg.pr-ring .pr-arc { stroke: var(--c-plus-gold); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
@media (forced-colors: active) { html:is(.pv-progress-ring, .pv-all).ds .ds-tt-pp > svg.pr-ring .pr-arc { stroke: CanvasText; } }

/* ===== prototype-src/save-anywhere.css ===== */
/* TRIPTIC save-anywhere (11 November 2026): the drawn parts of save-anywhere.js. Every rule here styles an element that only exists
   while its preview flag is on (save-bookmark: .sv-mark, .sv-twin; hold-menu: .sv-ctx and the html.sv-hold class), or is scoped to
   html.pv-hold-menu / html.pv-all: with every flag off nothing here applies. The menu itself wears the recent searches' hold menu
   (.ds-swipe-ctx in ds-swipe-rows.css); only what is new is drawn here. */

/* ------------------------------------------------------------------ the bookmark */
html.ds .sv-mark {
  position: relative; z-index: 2; display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; margin: 0; padding: 0; border: 0;
  background: none; box-shadow: none; color: var(--c-label-3); cursor: pointer; -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; pointer-events: auto;
}
/* the finger's target is 44 pt, whatever the glyph's size */
html.ds .sv-mark::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; translate: -50% -50%; border-radius: var(--r-pill); }
html.ds .sv-mark[hidden] { display: none; }
html.ds .sv-mark svg { width: 18px; height: 18px; overflow: visible; transform-origin: 50% 20%; }
html.ds .sv-mark .sv-o { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
html.ds .sv-mark .sv-f {
  fill: var(--c-plus-gold); stroke: var(--c-plus-gold); stroke-width: 1.7; stroke-linejoin: round;
  opacity: 0; transform: scale(.4); transform-origin: 12px 4.5px; transform-box: view-box;
  transition: opacity var(--motion-fast) var(--motion-curve), transform var(--motion-normal) var(--motion-spring);
}
html.ds .sv-mark[data-sv-on="1"] { color: var(--c-plus-gold); }
html.ds .sv-mark[data-sv-on="1"] .sv-f { opacity: 1; transform: none; }
html.ds .sv-mark.is-kbd { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: var(--r-pill); }
html.ds .sv-mark:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: var(--r-pill); }

/* on a poster (no row chrome): a small glass disc in its top right corner, above the picture and its sheen (its centre 22 pt in from
   the poster's edges, so all of its 44 pt target is on the poster) */
html.ds .sv-mark[data-sv-kind="corner"] {
  position: absolute; z-index: 4; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: var(--r-pill);
  color: var(--c-label-1); background: color-mix(in srgb, var(--c-stage) 58%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-label-1) 14%, transparent), 0 2px 8px color-mix(in srgb, var(--c-stage) 40%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2);
}
html.ds .sv-mark[data-sv-kind="corner"] svg { width: 15px; height: 15px; }
html.ds .sv-mark[data-sv-kind="corner"][data-sv-on="1"] { color: var(--c-plus-gold); }
/* The Ten card's front poster is larger: its disc too, a touch */
html.ds #device .ds-ten-art > .sv-mark[data-sv-kind="corner"] { top: 7px; right: 7px; width: 30px; height: 30px; }
/* the posters that clip their corners keep the disc inside them */
html.ds #device :is(.collection-film-poster, .al-poster, .ds-cs-art, .library-grid-poster):has(> .sv-mark) { position: relative; }

/* on a row: The Ten's in the top line of the row's end, beside the rank change (↑4, NEW) and over "Open ›", so the end column
   hardly widens and the title keeps its room at 320 pt; before the chevron on Find a film's rows */
html.ds #device .ds-tt-row-end:has(> .sv-mark) { grid-template-columns: auto auto; grid-template-areas: "mark badge" "open open"; align-items: center; column-gap: 6px; row-gap: 6px; }
html.ds #device .ds-tt-row-end:has(> .sv-mark):has(> .ds-tt-badge[data-move="same"]), html.ds #device .ds-tt-row-end:has(> .sv-mark):not(:has(> .ds-tt-badge)) { grid-template-columns: auto; grid-template-areas: "mark" "open"; }
html.ds #device .ds-tt-row-end:has(> .sv-mark) > .ds-tt-badge { grid-area: badge; justify-self: end; }
html.ds #device .ds-tt-row-end:has(> .sv-mark) > .ds-tt-row-open { grid-area: open; justify-self: end; }
html.ds #device .ds-tt-row-end > .sv-mark { grid-area: mark; justify-self: end; width: 18px; height: 18px; }
html.ds #device .ds-tt-row-end > .sv-mark svg { width: 15px; height: 15px; }
html.ds #device .ff-row > .sv-mark { margin: 0 2px 0 4px; }

/* Your three: the caption's line of facts ends with the bookmark (on the Duo, the first leaf's facts) */
/* (12 November 2026, on for everyone) no taller than the line it ends, so the three's caption keeps the height its layout counts on */
html.ds :is(#device .sp-meta, .duo-meta) > .sv-mark[data-sv-kind="caption"] { width: 22px; height: 1lh; max-height: 20px; margin-left: 6px; vertical-align: top; color: var(--c-label-2); }
html.ds :is(#device .sp-meta, .duo-meta) > .sv-mark[data-sv-kind="caption"] svg { width: 16px; height: 16px; }
html.ds :is(#device .sp-meta, .duo-meta) > .sv-mark[data-sv-kind="caption"][data-sv-on="1"] { color: var(--c-plus-gold); }

/* the real button VoiceOver and a keyboard reach: unseen (its poster's bookmark shows the focus) */
html.ds #device .sv-twin {
  position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%);
  border: 0; white-space: nowrap; opacity: 0;
}
html.ds #device .sv-twin[hidden] { display: none; }
html.ds #device .sv-more-kbd { outline: 2px solid var(--c-focus); outline-offset: 2px; }
html.ds #device .sv-twins { position: relative; width: 0; height: 0; margin: 0; padding: 0; overflow: visible; }

/* ------------------------------------------------------------------ the hold menu */
/* the poster held still is never the system's: no callout, no picture menu, no text selection (only these posters, only with the flag) */
html:is(.pv-hold-menu, .pv-all).sv-hold #device :is(.ds-tt-row-btn, .ds-ten-poster, .ds-cs-card, .collection-film-card, .dslc-tile, .ff-list .ff-row, .al-film, .trip-critical-layer .critical-card.is-revealed),
html:is(.pv-hold-menu, .pv-all).sv-hold #device :is(.ds-tt-row-btn, .ds-ten-poster, .ds-cs-card, .collection-film-card, .dslc-tile, .ff-list .ff-row, .al-film, .trip-critical-layer .critical-card.is-revealed) img {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
html.ds #device.sv-ctx-open > :is(.persistent-glass-nav, .ds-edge-fade, .ds-tab-capsule, .ds-edge-top) { z-index: 80 !important; }
/* above Flick's notes and cheers (z-index 296, ds-flick.css): the dimmed page dims everything under the held poster */
html.ds :is(#device, .duo-stage) > .ds-swipe-ctx.sv-ctx { z-index: 300; }
html.ds :is(#device, .duo-stage) .sv-ctx-lift { overflow: hidden; background: var(--c-stage-raised); transform-origin: 0 0; will-change: transform; }
html.ds :is(#device, .duo-stage) .sv-ctx-lift img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.ds :is(#device, .duo-stage) .sv-ctx-source { opacity: 0; }
/* one line each ("Remove from Watchlist" too, at 320 pt) */
html.ds :is(#device, .duo-stage) .sv-ctx-item > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html.ds :is(#device, .duo-stage) .sv-ctx-item.is-on svg { color: var(--c-plus-gold); }
html.ds :is(#device, .duo-stage) .sv-ctx-item[data-sv-item="watchlist"].is-on svg path { fill: currentColor; }
html.ds :is(#device, .duo-stage) .sv-ctx-item[data-sv-item="seen"].is-on svg { color: var(--c-ok); }
html.ds :is(#device, .duo-stage) .sv-ctx-item.is-dim > span { color: var(--c-label-3); }
@media (forced-colors: active) { html.ds .sv-mark { color: CanvasText; } html.ds .sv-mark[data-sv-on="1"] .sv-f { fill: Highlight; stroke: Highlight; } }
/* Reduce Motion: the bookmark fills in place (no pop, no growth), the menu simply arrives (ds-swipe-rows.css) */
@media (prefers-reduced-motion: reduce) { html.ds .sv-mark .sv-f { transform: none; transition: opacity var(--motion-fast) var(--motion-curve); } }
html.reduce-motion .sv-mark .sv-f, #device.manual-reduced-motion .sv-mark .sv-f { transform: none; transition: opacity var(--motion-fast) var(--motion-curve); }

/* ===== prototype-src/way-forward.css ===== */
/* TRIPTIC: a way forward from a search that could not make three (owner, 11 November 2026). Preview flag "way-forward":
   ON by default since 12 November 2026 (?preview=off turns it off); every rule here is gated by html.pv-way-forward / html.pv-all, and the elements exist only with it on.
   Runtime: recommendation-client.js (wayForwardPage, tripWayForwardTwoFilm). Record: hub/docs/DECISIONS.md.

   The "Not quite a full three" page keeps its orb, eyebrow and headline. Under them: one plain sentence; the service's own
   sentence whole behind "Why?"; the person's words as before; then, when the server found it, the offer
   ("If we let go of ‘X’, I have three for you.") over its button "Search without it", and "Change my request" as the quiet
   second way (wording: the owner, 12 November 2026).
   Motion: on arrival only, the offer and its button rise into place after the words (transform and opacity). The "Why?"
   chevron turns as the sentence opens. Reduce Motion: the page is simply there. Design-system tokens only. */

:is(html.pv-way-forward, html.pv-all).ds #device > .screen.way-forward-screen { overflow-y: auto; overscroll-behavior: contain; }

/* the plain sentence: what a person needs first, in a person's words */
:is(html.pv-way-forward, html.pv-all).ds #device .way-forward-screen > .way-forward-plain {
  max-width: 30ch; margin: var(--sp-2) auto 0;
  font: var(--fw-subhead-strong) var(--fs-callout)/var(--lh-callout) var(--font-ui) !important; letter-spacing: var(--tr-callout);
  color: var(--c-label-1) !important; text-wrap: balance;
}
/* the nudge, when nothing could be offered: the kind of detail that ruled most films out */
:is(html.pv-way-forward, html.pv-all).ds #device .way-forward-screen > .way-forward-nudge {
  max-width: 32ch; margin: var(--sp-2) auto 0;
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui) !important; letter-spacing: var(--tr-subhead);
  color: var(--c-label-2) !important; text-wrap: balance;
}

/* "Why?": the service's own sentence, whole, one tap away */
:is(html.pv-way-forward, html.pv-all).ds #device .way-forward-why { flex: none; width: 100%; max-width: 34rem; margin: var(--sp-2) auto 0; text-align: center; }
:is(html.pv-way-forward, html.pv-all).ds #device .way-forward-why > summary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 var(--sp-3);
  border-radius: var(--r-pill); list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font: var(--fw-subhead-strong) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); color: var(--c-beam);
}
:is(html.pv-way-forward, html.pv-all).ds #device .way-forward-why > summary::-webkit-details-marker { display: none; }
:is(html.pv-way-forward, html.pv-all).ds #device .way-forward-why > summary > i {
  width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--motion-fast) var(--motion-curve);
}
:is(html.pv-way-forward, html.pv-all).ds #device .way-forward-why[open] > summary > i { transform: translateY(3px) rotate(225deg); }
:is(html.pv-way-forward, html.pv-all).ds #device .way-forward-why > summary:active { background: var(--c-fill-press); }
:is(html.pv-way-forward, html.pv-all).ds #device .way-forward-why > p {
  margin: var(--sp-1) 0 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line);
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui) !important; letter-spacing: var(--tr-footnote); color: var(--c-label-2) !important;
  text-align: left; animation: way-forward-open var(--motion-normal) var(--motion-curve) both;
}
:is(html.pv-way-forward, html.pv-all).ds #device .way-forward-screen > .recommendation-preserved-query { margin: var(--sp-4) auto var(--sp-2); }

/* the offer and the ways on */
:is(html.pv-way-forward, html.pv-all).ds #device .way-forward-actions { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); width: 100%; max-width: 34rem; margin: var(--sp-3) auto 0; }
:is(html.pv-way-forward, html.pv-all).ds #device :is(.way-forward-actions, .two-film-foot) > .way-forward-offer {
  max-width: 30ch; margin: 0 auto var(--sp-1); text-align: center; text-wrap: balance;
  font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); color: var(--c-label-1);
}
:is(html.pv-way-forward, html.pv-all).ds #device :is(.way-forward-actions, .two-film-foot) > :is(.primary-button, .quiet-button) {
  min-height: 48px; height: auto; margin: 0; white-space: normal; text-wrap: balance; pointer-events: auto;
}
:is(html.pv-way-forward, html.pv-all).ds #device .way-forward-actions > .primary-button { width: 100%; }
:is(html.pv-way-forward, html.pv-all).ds #device .way-forward-actions > .quiet-button,
:is(html.pv-way-forward, html.pv-all).ds #device .two-film-foot.has-way-forward > .quiet-button { min-height: 44px; min-width: 44px; padding: 0 var(--sp-4); }
:is(html.pv-way-forward, html.pv-all).ds #device .way-forward-screen > small { margin-top: var(--sp-2); }
/* the two-film page: the offer leads its foot; the page's own action follows, quiet */
:is(html.pv-way-forward, html.pv-all).ds #device .two-film-foot.has-way-forward {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  /* the foot is taller with the offer: the stage is solid from where its words begin, so nothing reads through them */
  background: linear-gradient(to bottom, transparent 0, var(--c-stage) var(--sp-6));
}
:is(html.pv-way-forward, html.pv-all).ds #device .two-film-foot.has-way-forward > .primary-button { width: 100%; }
:is(html.pv-way-forward, html.pv-all).ds #device .two-film-foot.has-way-forward > .way-forward-offer { margin-bottom: 0; }

/* arrival: the words settle, then the way on rises into place */
:is(html.pv-way-forward, html.pv-all).ds #device .way-forward-screen.has-offer > .way-forward-actions > * { animation: way-forward-rise var(--motion-slow) var(--motion-spring) both; }
:is(html.pv-way-forward, html.pv-all).ds #device .way-forward-screen.has-offer > .way-forward-actions > :nth-child(1) { animation-delay: 240ms; }
:is(html.pv-way-forward, html.pv-all).ds #device .way-forward-screen.has-offer > .way-forward-actions > :nth-child(2) { animation-delay: 320ms; }
:is(html.pv-way-forward, html.pv-all).ds #device .way-forward-screen.has-offer > .way-forward-actions > :nth-child(3) { animation-delay: 380ms; }
@keyframes way-forward-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes way-forward-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  :is(html.pv-way-forward, html.pv-all).ds #device :is(.way-forward-actions > *, .way-forward-why > p) { animation: none !important; }
  :is(html.pv-way-forward, html.pv-all).ds #device .way-forward-why > summary > i { transition: none; }
}
:is(html.pv-way-forward, html.pv-all).ds #device.manual-reduced-motion :is(.way-forward-actions > *, .way-forward-why > p),
:is(html.pv-way-forward, html.pv-all).ds[data-motion-tier="reduced"] #device :is(.way-forward-actions > *, .way-forward-why > p) { animation: none !important; }

/* the smallest phone: a little less air, the same page */
@media (max-height: 700px) {
  /* the two-film page: a foot that carries the offer would hide half the posters on a small phone; it closes the page instead */
  :is(html.pv-way-forward, html.pv-all).ds #device .two-film-foot.has-way-forward { position: static; margin-top: var(--sp-4); padding-top: 0; background: none; }
  :is(html.pv-way-forward, html.pv-all).ds #device .way-forward-screen > .recommendation-preserved-query { margin: var(--sp-3) auto var(--sp-1); padding: var(--sp-2) var(--sp-3); }
  :is(html.pv-way-forward, html.pv-all).ds #device .way-forward-why { margin-top: 0; }
}
@media (forced-colors: active) {
  :is(html.pv-way-forward, html.pv-all).ds #device .way-forward-why > summary { color: LinkText; }
}

/* ===== prototype-src/brand-inline.css ===== */
/* GENERATED by scripts/build-brand-inline.mjs from public/assets/{trio-mark-compact.svg,trio-mark-master.svg,triptic-wordmark-white.svg,member/mark@3x.webp}: do not edit by hand.
   The brand's own art, carried in the stylesheet so it is drawn with no network (coverage audit gap 5, 13 November 2026).
   Same pictures as the files, so nothing changes on screen while online. */
img[src="/assets/trio-mark-compact.svg"] { content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 140 150%22%3E%3Cg color=%22%23F4F4F7%22 fill=%22%2309090D%22 stroke=%22currentColor%22 stroke-width=%224.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg%3E%3Cpath d=%22M11 16C11 9.5 20.5 6 32 6C43.5 6 53 9.5 53 16L54 130C54 137 44.5 141 32.5 141C20.5 141 11.5 137 11.5 130Z%22/%3E%3Cellipse cx=%2232%22 cy=%2216%22 rx=%2221%22 ry=%2210%22/%3E%3Cpath d=%22M12 79C17 84 24 86.5 32.5 86.5C41 86.5 48.5 84 53.5 79%22/%3E%3C/g%3E%3Cg%3E%3Cpath d=%22M48 35C48 28.5 57.5 25 69 25C80.5 25 90 28.5 90 35L91 122C91 129 81.5 133 69.5 133C57.5 133 48.5 129 48.5 122Z%22/%3E%3Cellipse cx=%2269%22 cy=%2235%22 rx=%2221%22 ry=%2210%22/%3E%3Cpath d=%22M49 82C54 87 61 89.5 69.5 89.5C78 89.5 85.5 87 90.5 82%22/%3E%3C/g%3E%3Cg%3E%3Cpath d=%22M86 54C86 48 94.5 45 105 45C115.5 45 124 48 124 54L125 108C125 114.5 116.5 118 105.5 118C94.5 118 86.5 114.5 86.5 108Z%22/%3E%3Cellipse cx=%22105%22 cy=%2254%22 rx=%2219%22 ry=%229%22/%3E%3Cpath d=%22M87 80C91.5 84 98 86 105.5 86C113 86 120 84 124.5 80%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
img[src="/assets/trio-mark-master.svg"] { content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 140 150%22%3E%3Cg color=%22%23F4F4F7%22 fill=%22%2309090D%22 stroke=%22currentColor%22 stroke-width=%223.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3C!-- Tall roll: upright and stable --%3E%3Cg%3E%3Cpath d=%22M11 16 C11 9.5 20.5 6 32 6 C43.5 6 53 9.5 53 16 L54 130 C54 137 44.5 141 32.5 141 C20.5 141 11.5 137 11.5 130 Z%22/%3E%3Cellipse cx=%2232%22 cy=%2216%22 rx=%2221%22 ry=%2210%22/%3E%3Cpath d=%22M12 79 C17 84 24 86.5 32.5 86.5 C41 86.5 48.5 84 53.5 79%22/%3E%3Cg fill=%22currentColor%22 stroke=%22none%22%3E%3Crect x=%2216%22 y=%2229%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2225%22 y=%2231%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2235%22 y=%2231%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2245%22 y=%2229%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2216%22 y=%2240%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2216%22 y=%2251%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2216%22 y=%2262%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2216%22 y=%2291%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2216%22 y=%22102%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2216%22 y=%22113%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2217%22 y=%22124%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2222%22 y=%22132%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2230.5%22 y=%22135%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2239%22 y=%22134%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2247%22 y=%22130%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3C/g%3E%3C/g%3E%3C!-- Middle roll: slight overlap, no visible tilt --%3E%3Cg%3E%3Cpath d=%22M48 35 C48 28.5 57.5 25 69 25 C80.5 25 90 28.5 90 35 L91 122 C91 129 81.5 133 69.5 133 C57.5 133 48.5 129 48.5 122 Z%22/%3E%3Cellipse cx=%2269%22 cy=%2235%22 rx=%2221%22 ry=%2210%22/%3E%3Cpath d=%22M49 82 C54 87 61 89.5 69.5 89.5 C78 89.5 85.5 87 90.5 82%22/%3E%3Cg fill=%22currentColor%22 stroke=%22none%22%3E%3Crect x=%2253%22 y=%2248%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2262%22 y=%2250%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2272%22 y=%2250%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2282%22 y=%2248%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2253%22 y=%2259%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2253%22 y=%2270%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2253%22 y=%2294%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2253%22 y=%22105%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2253%22 y=%22116%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2255%22 y=%22124%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2263%22 y=%22127%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2272%22 y=%22127%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3Crect x=%2281%22 y=%22124%22 width=%223.4%22 height=%225.2%22 rx=%220.8%22/%3E%3C/g%3E%3C/g%3E%3C!-- Short roll: closely grouped, upright --%3E%3Cg%3E%3Cpath d=%22M86 54 C86 48 94.5 45 105 45 C115.5 45 124 48 124 54 L125 108 C125 114.5 116.5 118 105.5 118 C94.5 118 86.5 114.5 86.5 108 Z%22/%3E%3Cellipse cx=%22105%22 cy=%2254%22 rx=%2219%22 ry=%229%22/%3E%3Cpath d=%22M87 80 C91.5 84 98 86 105.5 86 C113 86 120 84 124.5 80%22/%3E%3Cg fill=%22currentColor%22 stroke=%22none%22%3E%3Crect x=%2291%22 y=%2266%22 width=%223.2%22 height=%225%22 rx=%220.8%22/%3E%3Crect x=%2299%22 y=%2268%22 width=%223.2%22 height=%225%22 rx=%220.8%22/%3E%3Crect x=%22108%22 y=%2268%22 width=%223.2%22 height=%225%22 rx=%220.8%22/%3E%3Crect x=%22116%22 y=%2266%22 width=%223.2%22 height=%225%22 rx=%220.8%22/%3E%3Crect x=%2291%22 y=%2277%22 width=%223.2%22 height=%225%22 rx=%220.8%22/%3E%3Crect x=%2291%22 y=%2290%22 width=%223.2%22 height=%225%22 rx=%220.8%22/%3E%3Crect x=%2291%22 y=%22101%22 width=%223.2%22 height=%225%22 rx=%220.8%22/%3E%3Crect x=%2293%22 y=%22109%22 width=%223.2%22 height=%225%22 rx=%220.8%22/%3E%3Crect x=%22101%22 y=%22112%22 width=%223.2%22 height=%225%22 rx=%220.8%22/%3E%3Crect x=%22110%22 y=%22111%22 width=%223.2%22 height=%225%22 rx=%220.8%22/%3E%3Crect x=%22118%22 y=%22107%22 width=%223.2%22 height=%225%22 rx=%220.8%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
img[src="/assets/triptic-wordmark-white.svg"] { content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 480 84%22%3E%3Cg fill=%22none%22 stroke=%22%23F7F7FA%22 stroke-width=%223.2%22 stroke-linecap=%22square%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 12H56 M32 12V72%22/%3E%3Cpath d=%22M86 72V12H107C123 12 132 20 132 32C132 44 123 50 107 50H86 M107 50L135 72%22/%3E%3Cpath d=%22M169 12V72%22/%3E%3Cpath d=%22M207 72V12H229C245 12 254 20 254 32C254 44 245 51 229 51H207%22/%3E%3Cpath d=%22M282 12H330 M306 12V72%22/%3E%3Cpath d=%22M364 12V72%22/%3E%3Cpath d=%22M454.5 24.7C449 15.6 440.8 11 429.8 11C410.7 11 397 23.8 397 42C397 60.2 410.7 73 429.8 73C440.8 73 449 68.4 454.5 59.3%22/%3E%3C/g%3E%3C/svg%3E"); }
/* TRIPTIC+ members' gold mark (ds-look.css): online it comes from /assets/member/ as before; offline (html.is-offline, net-cue.js) the copy below */
html.ds.is-plus.is-offline #device .app-header .brand-home img.brand-mark,
html.ds.is-plus.is-offline #device .trip-critical-layer .critical-brand-lockup img.brand-mark { content: url("data:image/webp;base64,UklGRqwTAABXRUJQVlA4WAoAAAAQAAAAZQAAZQAAQUxQSG8CAAABoEZtkyHJiljbtm3btm3btm3vXtu2bdu2zc6I70dhqrqjrxERE0C/XzkiNsdbqF7/+QfOPPfiC848tmpEy1JMBnPbfc98j/D61sVDChiTa+4b8BfnC/+fDleypO9nAOBEFMGq4gQANtsxEYBTRKkC4BIr6gAJRC/AQiMOQhCnw9tMbMEtcLEItLANd8SGEjbcFl9xG25PIma2LROzJ5CZTSpBUTKb82s2oqwV2k1YtmHH7u3rFg1vWpJSMi6FdJxy03sI/8pF44pZE1Z9PQASF7WwRoGEE1X4q4pzAHBOQVugioyrCPB+VVsiV7yRKz1gXjqA4AYits/hwd8VD/zeyMQcxMxGPUgRskV3ElGuSi16Dh41YkDXxmWyUZwpJHigxab7vkbID69b3sCgiF9ant8idaKqHlURBwBfDrBHkWFxAOabE6kmgKZpABCcSAsOd6SJ29LE7f8r5rbfEYIr0gIwJw2o4MP81mjG1AFoRtbAOVFVj6qKEwAv1CN7/FVV4f/sBCZjBI93PPm6JzDxxK4WFHkKOdxCxGVbj5y/eue2FXMGNS5GcaaQ4gRFyOYI0IaIOQwzxZgyDjhCwcyeeG+LTUUjUAfgBCV1fF4noupRVXEOAL4aQ8l9OSQWxa8vIMonZuehJJ+EeB0upxbr7vgy1AdXzqtNyZ/lSUAiUwfUJyLKVbHVkLHTZkwZ069J2Szk5WSj0m8CKhqFCID+FC1TCuY/HQDEiagqAFVVcQ4AHmtIXmYOwcyUqnWOfYZAVYS8vg9Zm6vHwUd/8AS/cuH40mRzgWodh09duGbZzDE96xUnXzaGmaJkpr98AgBWUDggFhEAADBCAJ0BKmYAZgA+KRCGQiGhC0YDGgwBQlqAIV7TJ8X5otVfuX4z9jPWPFl7i85/+h9Sf9v/uP/A9wTnKf07/g+oD+Wf3v9hfdh/1HqL/ZH8gPkA/qX9R9YL1J/7b/t/YK/Vj00P3C+Cb+0f7H9tvgL/nn+B/335/9wB6AHrLqV/w/40/sB6p/iXyn9c/Ir+xf97/D/Ej+7eBzoP/L/kd6n/sr9t/sv7Tfu5/yvjr/T/jB6B+nf1CPxf+T/3P8mfy99qv+V7w+xv9y/Jn4CPXH5r/Zvyq/uP7hez5/hei/5Z/Yf9P+TP0AfxX+i/3f8o/3s+T/8t/gPIe+wf5n/R/jB9Af8z/m/+H/uP7Wf33///bF/Pf7n/I/un/svb1+c/2z/ef4T9zf7D9gv8f/m3+P/uH+T/7X+F////P+6T2Jfr5///c9/W7/yk1EOosSar0xSPdcLpQCuBMZ20mrzogg8FGqCARwQ4pgfoJLJRc9rrs2Hmbf9entSgAOi8JvUklFWzqPiDN8lQ64F3B5gZ0Zn1UK8qp70cRvIEqknzxA1w4NGBHFf8IkqcXrYELHWbU6ELomqyLlZTtx9Fa8ygi3saQ/I8XgxHji9I0HH/X7ghzWrwSRpq3m1mt7aEY1aLO7c+QDtAIpbPegXYPIEYH7oM4/tagKHjMRP1sko6dEpG9uEbXodxk52HP/102sqyPTlx4/LFNt914gAA/v//oO0/+wsYpKjpeisS+P0SJyZfHdcsrF+75qUK3PR0Uh+JHQaw6URIiWk7usmVYZQ4Ej6iRuwDy9HbD76Qfgq+HXOzefZPIb5vGzs15jBIhQ8D7Okmf+6heHio2kEMtpp+jKQ71AOfXW7o12RuzchGu8UJMQi4zcu18z3bemkXrOPMuuE97TuXNUlcgNYPjnLXlY99AGv7mBE+dDE7eVOgvM9/lT+8mRZTiK87xAHvSPM7EdNRqpwcF0mYtaVYEHibEcq2vARrjerchxh2wcsUzkEQWsiCrdvnSXz5tZHHw9cgjjFUZJV5qFTE9w27HPkKhObMN9Lw1uqhst1YdNZCUOQXM5ZAQFs3dBVoFQttG2KSGi/V69Gs8XP2418CNOFnF/No0wYUJNre9oIeaGB0zfY6kr49fwBDxAJQRpYj8u4FQjNotTatBOc8hR3IIBP1h3g/Gj+ZEyk18w3+bfb1Zo6UpHJsH6Mla/uwv46hTHxty3QZb1Fpw/qn3xZkywFEQ16OhdHhaWfLzfUz+S6ib7cWwewEYBqMHXgg4Te/OGTfhL43IxUIuEqJd7+uh5SpnQYNmap2aMH0gRpmaSqOh6wjGYD80bw/X1fNdE/RQWMOr6ks6XdnuMP7co9v7w13/djLg4jrw1EZS8ULH3gWvP8XughpkIbxDsWevhv3QkIK6Asta+sq2EJKEzcNSDx0i5s8LrCDjAONqzFpn6hhnb51DXliW68OPuyJ+J4/fObGWJtcPlllJAhFspb9u1KGTSLn09ODzklqdV/WkmgSs1OD7dYM90+9O1K6QIjsDW4U24H1Q2B5cdvuTGtv9jFovnUuvChbbv9g6uh2zifKkvZfnuH8LuhY3Heny7/Z1Ceptg6120nizFgpQuzxzr/VvRmS3nr06hib92uGGJoRddjVWR1BumupTfznZ7/NlU+o6jtdBsmaOZz46CccMAH1g+bmnDFEU9W1ZYrDFbJ3i+CwkYzfMTTSzBHor7CRHw2TyKjwRhPD4QTDr4TQ5fYu1jOOOydHjmjr+WcEaEH3lxN23zLA1AqkQNBfsycnQdZ8ggdJpPni9SYX1IuEjFjCJgfFfYEPq0ohYjYC40HN5aDwe9gNQ3lfdXVXwc9LY7w2RVvUMFcHfSb0aiKaf1FALbHvDIogQMKSHELq3HNj1yAsXEFJGTZSxP9k7iE65BjXBLj+6HmoyQ6NZGYk2NdWrouBgkVAAPZUf7uqxxd8ZfZAvV4aWM+sl16igjUk5hzSW3Kclr8tTzxblttHH/Vlnm6P3rDFUdsyt/5pOMUrkBoMz8xHulNkc/acM+kTzj6M9e26+Q2ubjk5rq7LVu9m78dwyfPWF0xzQnw//HqWlcKFXab8PBVHRixrr/kI9fYpa+DQY1HoxkVJW/ybbl9WlAAugmkKFovu5OFoerCINnuq18ufld1nSxCBFa4PUYvLvwdR82gzdoMHJnZyBSw7JdWKshszhDBFyheID6qhOGTO7UrzV1mCC9r0VtFlkexXu9wn3j9nEhH3kCF8sG/UV/ezOcd4Ek6VSYqjKf44I+QqV8ycPAvlF8XS+/ToEvdYuBSQQ/iQwWKjpB9V9DM5ANuJEUdXxkAkUMBfrPCDOcrt66U7iomcuWLMVwFEtNoio/dLX1AGog0OKCY56ld0WNfjcfKw+ERLaL+1qpODEjVJ+LdlPSdG8bYFzIGs2OYVVgGWr8DrLgQ9Gi1IHCUjqkW5rUW+ihqiHFATD+pleUVVG266dxITYKEhcJPnvXadse6xmAApjt4CsYYLmdc69UyUpwwnzhchcZ6OJVoYWPLhDZDUk1OaOllly/wMgCmArlnOX/gRjOFk3UfDjvrVR2Oopy4yAD3nsbzG4bZk5UQiHR9Bu+dq/tQserahO7Qv5qcYTVoqMpV+HwB7iVVz5UwyHDhZoZUdmX+cpPhqAv92xffYizsjoox/DuUypj+ck8iZZsgSgRtl6OfOis5kqivf4Ir6NxAQdCXLaJr7stfbblsMs/tT0JI9X+aUk0v/9bHrVRflMIL//TeuAT1CStDaI2Q/qbxvrIFG74EaPiXC2cvCmWCwdMay05JoWx2O9juD+MEAz5vQndib8T4ZJOJ/3xwFRK4/b8zQ8YYvq9F4VLs50H7HdRbkySGrJdkCR50HFlcav94crU2foncXWUcQyQl9lR2gPk5wG2s+V1GaoJ9JHvdbI3HcfGmeSA9/9claokWmkPANNV/MJMqnNi8PkANC8bPCRVVTXYdhC3yAxb38MG4UiDj8rL9carswzu2YkDeM5qmMwMES2DIfkk026Gfq8bD5KdHSGrigqv1OA8SBZuF5EHb6LBcr8bHjrrCrqXeGB6tT4QzkdP9oehWC0AREG/ceGRJq9lxZLWflr54NIci4o24iAcx3f+9xRtykvGkFi2fRkzRejUKzrHrgccoTA1yGmQHtBfYP581q7zfmyP/Vtx5BVgD/O5Rc6F8XsVLOPO+wCKB7N01cL2Yn6SZm2Iotvz+KCcMV7zgby09iKBhfuadF+K8lWIvyWEB7X+d549zNnE5PsKc1TFxed25w91VjXXwP2u419m1+KnqPCA/tv4P26UIJEgLKTxkcW6fLAbYJjtOZyGQFe+OhP54Rfy9GULOpXR83U5mEBp+Ja+kzj2Bb9Xj6Lix+GzK4QjY4GGtgrFbcDOycQfr0MTGvPKIb1b3RHZ1X7r/rBV93s8awCpFEIFUX+nIr1lp25m3C6wL4oPox3zVWG+4wUCwWjyzuXbh4S1kRUZ7R7FU5M524X1vG+/QdFdNZjq89lD+3WY/mBIUXCu6rRXvxXv+kHfJdN2k+nDbTcFoMPvIgeEfdWo+L9C9xkiGJ8GGhAlV9cFUeI/YIF175zTdrohXlzy1ZfRETz1Frej0HI2nqymPt2NgqFOwPXCYZ/ao+dChqcbg8a0YxYnekJx2g09ALwZGLb3TrQNwRJWSkBbGJ8rK8sjODrpjWuMpNWJ2WqRmxVwbg8/8DLaj07FE76i0jj9ttmymbhgHJNiEaWkAsJHUPimL0/RZF2Xvs7VXcKzYigOA/s6COZ3wH+ubrLM4QVk4sFNSvXO/QRx66LKpAGr29+rhh54Oh2xhN1PQn8OuMX16DjQW4wC4EGgUdysJmlyzTTWqPyRczBrCgoWTCTK4wAFVeCPmq9nDp7GetTxXWDj67akLk2tl3hWsJRuktkJH6MIfAXf/l2FX1b5ro5NcVSFLxbIyqoXMA2kqbFQVNnWnNrwugjosYmMd392GnBF/1oRQ8OfR9OZtbrugc6PpLmmmnAOcR2JLpaIqqj2WccE1GIvfEgqkd999VdB4nZ0rf+TP7uFbo/BZuT1UJqh6IAPk5ENPVUuhWvULEiavoyzb+D3SsBZNMonNyfy42NWCnKuDgKQvAS2UC8C0BvIQTvY7BnL8+qKe5c/Qm4FJHLc4igxKpALfQH+FcQKas1g7HozOF6xIA7hfHNbIxMmgzo2u0KutoQurKfh+9xo8Sw71nc21Mv0lNttWKRJD9SCycP0cZd53qNxPW3+mzyya/eHCGpv7SeBDeDgS4xUZHv3ja8JqozJ3F8Npu25DILmkuHyUDsNZtvkBo++0+cMV4fEgZL0o3HeaVledz3I5bfYYylgGfga1ZJ/71jSuYJ04YEs+V2kJD5N/SS8GnYpOYKmtH5mNt5ps4fhP5mFuPnmCbQ6bkSG8LnUIirp9pBi/cMv6qZ6EIZtTgMpsAsSEjmvcMJoHKbae2PeQ9kuSchibNlfs0RDTyWpKCSzYGLXm41YN08bQPWourqmJ9hStNFLlM7qLiD1Fm2xInCnDjN0YCsmhep+mvSiRr2VQcakUJpybZVKLWy/dwJS1VNXbIYx7TElO4DhHmXOEYV0xLRSO83xrO1EqdovY0E9Ep7r+BTp5YqxI/JZeMYv00cesK2dY/MCykdmYzrSQcHrNsuzaVCAiE4xpc1D+hsPzfzCcNJYiJhpco7v9JcaVC2qja9PA/oV5E8nWcRvcBV9ubU1HiEVL/yTSjsdJI1+/nTw9owDtnUr/QFtZRk0/hZXjmSBtnr894U0nIr7OnQRcmWfl9yHBr1CUQecxbcDaHKm8QJklZKZbf5Kvg5gILxwXaPW5E3BR3T4b0FEF6DCwUTUpZKdtGXI9OvSEMU9mhQFKzugt3m5EvVC4N+KmHzXF458uKLCIuGRcP74nS6gNKvSB3SNhf9Il1mDH8BCT3oAJLQAfVv+s61FFGScaU/eN/IggZXpHiHlF26CGkFZlwTTcILCm9dQQJmzVMQx4FOvVgHxbHX49fnCynvoCZtWkmyC1dz9o5zzFDMI1K+Pzo58/FpfwkdT0z21FAt25FJ1PLIci0mHqn4DJBc+AasdPyUsuZfquM1AGK/IIIzqD8gEFDwCZV6iNPqImY2O2UuVbPCCH7SEwova+D/BM4KEnaEEIQ5BWBa4AdOB5/HyyCcW3o71ltCdnPOf0ytMUABhpLpDfOh9KgPSIrGBckRiDjnORyZsAHxuL+mhJb/f/n2ZmKbe3O5WdBU050oJSzarfROUrf591H5767+IKJiQ8Cm8cvMmhnI77K3XpRb/9ezF5/T5/zG9CigAp5mhmpQ4sK1/Gn44fV8w4R917xShEg+6lR6RSHyxFP6hFsfzWtvS+5m7ZaO1t9ZfACUQU9+GVxlGbNE2raDf4dxXSFZnvF16yt2VO9ihZdFl+hxkql4obiyqN1cR1M5TFj+/EdkXU8igvAw3HXRmEn4ZwPU224WQYZ0EaCwvkgW8/bYLDCWOqsyFpCRTsgBUNlsLJWy0KKhgPY2+FHCo/sHQyEhzsHYOzSDNZAc8y3Iju+CRvSyO6ebN+e2ulxiPedXdIxHizu8GEQS5Ua5deR5w/ZJRQfQ+u4YbFKAMLd8rzwY3IyI2CrtgXSVk8r6SUR50zm83NcR2uFqTLWwn1f5/YHSXHK/BzT+0FyxG1UMHGOdji757LzLy6sX+E294Zm/3fQiOjbUttfdcJzquncGtrd1DebBXjY8My5SHKpc+y5psJze7iWsRAo1D0m5MPL//09qAFCP+Y///44HA+W9w1AQ70C1+oZBjIP5OU+g3QAAAAAAA=="); }

/* ===== prototype-src/net-cue.css ===== */
/* TRIPTIC net-cue (net-cue.js): the one quiet offline line on Discover and Today. Footnote size, the secondary label
   colour, a struck Wi-Fi glyph; no panel, no motion. Only ever in the page while html.is-offline. */
html.ds #device .net-cue {
  display: flex; align-items: center; gap: 8px;
  margin: 12px var(--gutter, 20px) 4px; padding: 0;
  font: var(--fw-footnote, 400) var(--fs-footnote, 13px)/var(--lh-footnote, 18px) var(--font-ui);
  letter-spacing: var(--tr-footnote, 0);
  color: var(--c-label-2);
}
html.ds #device .net-cue svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
html.ds #device .net-cue svg circle { fill: currentColor; stroke: none; }
/* Discover: the line sits between the request box and "Searches aren't metered here", inside the column's own gutter */
html.ds #device .discover-screen > .net-cue { margin: 14px 0 0; padding: 0 4px; }
/* Today: under the date and the title, before the first card */
html.ds #device .today-screen > .net-cue { margin: -8px 0 16px; }

/* ===== prototype-src/solid-surfaces.css ===== */
/* TRIPTIC solid-surfaces (solid-surfaces.js sets html.a11y-solid from Increase Contrast / Reduce Transparency, the web's media
   queries or the iPhone app's own reading). ONE solid-surface token set: opaque panels, text at 4.5:1 or more on them, no
   backdrop blur anywhere. Nothing here applies without the class.

   Contrast arithmetic (WCAG relative luminance, over the darkest panel --c-fill-2 #202029 and the stage #050507):
     --c-label-1 #f5f4f7    15.9:1 / 18.6:1
     --c-label-2 .88 alpha  12.6:1 on #202029
     --c-label-3 .80 alpha  10.4:1 on #202029
     --c-label-4 .62 alpha   6.2:1 on #202029 (was .24: placeholder-grade, 1.9:1)
   The idle "Find three" is --c-label-2 on #2a2a35 with a 1px #8d8c96 edge: 11.4:1 (it was --c-label-3 at .56 on 8% white
   over the lilac glass, about 2.9:1). */
html.a11y-solid {
  --c-fill-1: #17171e;
  --c-fill-2: #202029;
  --c-fill-press: #2a2a35;
  --c-line: rgba(255, 255, 255, .26);
  --c-line-strong: rgba(255, 255, 255, .42);
  --c-label-2: rgba(245, 244, 247, .88);
  --c-label-3: rgba(245, 244, 247, .80);
  --c-label-4: rgba(245, 244, 247, .62);
  --mat-chrome: var(--mat-chrome-solid);
  --mat-blur: none;
  --hl-gloss: none;
}
/* no frosted glass at all: every backdrop blur in the app, in the page or in a sheet over it. (:is(*, #a#a#a#a) matches every
   element but weighs six ids, so this wins over the glass rules that are themselves !important and long, the longest
   being the three's header controls at four ids.) */
html.a11y-solid :is(*, #a11y#a11y#a11y#a11y#a11y#a11y), html.a11y-solid :is(*, #a11y#a11y#a11y#a11y#a11y#a11y)::before, html.a11y-solid :is(*, #a11y#a11y#a11y#a11y#a11y#a11y)::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* the tab bar: the opaque bar ds-navigation.css already draws for Reduce Transparency, for Increase Contrast too */
html.ds.a11y-solid #device {
  --cc-blur: none; --cc-fill: linear-gradient(180deg, rgb(44 42 54), rgb(27 26 34));   /* chrome-polish.css: the round controls, solid */
  --dock-backdrop: none;
  --dock-fill: linear-gradient(180deg, var(--dock-solid-hi), var(--dock-solid-lo));
  --dock-under: var(--dock-solid-lo);
  --dock-well: rgb(10 9 16 / 0);
}
html.ds.a11y-solid #device > .persistent-glass-nav .ds-dock-tint { box-shadow: inset 0 0 0 1px var(--c-line-strong); }
html.ds.a11y-solid #device > .persistent-glass-nav button:not([aria-current="page"]):not(.is-active) { color: var(--c-label-2) !important; }

/* the request box: an opaque panel with a clear edge (the glass sheen and glow are art over glass: away). The panel colour is a
   one-colour gradient: a plain colour may stand only in the LAST background layer, and "#191626 padding-box, …" was dropped
   whole, which left the box with no panel at all once its blur was gone (seen in the evidence, fixed 13 November 2026). */
html.ds.a11y-solid #device .screen.dg2 > .premium-composer.search-glass::before {
  background: linear-gradient(#191626, #191626) padding-box, linear-gradient(var(--c-line-strong), var(--c-line-strong)) border-box !important;
}
html.ds.a11y-solid #device .screen.dg2 > .premium-composer :is(.dg2-sheen, .dg2-glow) { display: none !important; }
html.ds.a11y-solid #device .premium-composer textarea#query::placeholder { color: var(--c-label-3) !important; -webkit-text-fill-color: var(--c-label-3) !important; opacity: 1; }
/* the idle Find three: clearly a button, clearly readable */
html.ds.a11y-solid #device .premium-composer .query-submit.query-submit-plain[aria-disabled="true"] {
  color: var(--c-label-2) !important; -webkit-text-fill-color: var(--c-label-2) !important;
  background: var(--c-fill-press) !important;
  box-shadow: inset 0 0 0 1px #8d8c96 !important;
}
html.ds.a11y-solid #device .premium-composer .query-submit.query-submit-plain[aria-disabled="true"] > span:not(.ds-look-sheen) { color: var(--c-label-2) !important; -webkit-text-fill-color: var(--c-label-2) !important; }
/* Find a film, and the round header controls, lose their glass: give them the panel colour and an edge */
html.ds.a11y-solid #device :is(.ff-entry, .circle-control, .tm-close) { background: var(--c-fill-2) !important; box-shadow: inset 0 0 0 1px var(--c-line-strong) !important; }

/* the scrolled title bar (ds-tab-scroll.css): opaque, so scrolled words never show through it */
html.ds.a11y-solid #device > .ds-tsx-bar > .ds-tsx-row { background: var(--c-stage) !important; }
html.ds.a11y-solid #device > :is(.ds-tsx-bar, .ds-tsx-ctl) > .ds-tsx-glass { background: var(--c-fill-2) !important; box-shadow: inset 0 0 0 1px var(--c-line-strong); }
html.ds.a11y-solid #device i.ds-tsx-blur { display: none !important; }

/* cards and rows: the panel colour, and an edge so a card is a card */
html.ds.a11y-solid #device :is(.dt-wk-hero, .dt-fri, .dt-dna, .ds-list, .dslc-seg, .tm-plan, .tm-topup, .tm-compare, .content-material, .dsy-dna-card, .dsy-alert, .collections-api-search, .list-search) {
  background-color: var(--c-fill-1) !important; background-image: none !important;
  box-shadow: inset 0 0 0 1px var(--c-line) !important;
}
html.ds.a11y-solid #device .tm-plan.is-selected { box-shadow: inset 0 0 0 2px var(--c-label-1) !important; }

/* Your three: the bar of actions under the films, and the request's echo over them */
html.ds.a11y-solid #device .trip-critical-layer :is(.critical-actions, .critical-dock, .critical-toolbar, .critical-query, .critical-insight) {
  background: var(--c-stage-raised) !important; box-shadow: inset 0 0 0 1px var(--c-line) !important;
}

/* sheets: opaque, edged at the top */
html.ds.a11y-solid :is(.ds-sheet, .tm-sheet, .share-sheet-panel, .ssh-panel, .fcs-sheet, .reason-sheet, .hold-menu, .toast, .fluid-toast) {
  background-color: var(--mat-chrome-solid) !important; background-image: none !important;
}

/* ===== prototype-src/tap-targets.css ===== */
/* TRIPTIC tap-targets (coverage audit gap 14; owner approved 13 November 2026, 14:53). Each control below already had (or now
   has) a 44 x 44 pt hit area drawn by a transparent pseudo-element, but something cut it down: measured in Chromium by sampling a
   44 x 44 square on the control with elementFromPoint (tests/offline-contrast-fixes-browser.test.mjs). Nothing here draws anything: no
   colour, no size and no position of anything seen changes.

   1. The inline Watchlist bookmark (save-anywhere.css .sv-mark; Your three's caption, 22 x 18): its ::before was a 44 pt CIRCLE
      (border-radius), and the caption's meta line (overflow: hidden, for the line's ellipsis) cut it to the line's height, so
      31% of the square answered. The area is made square, and the line's clip box is grown by padding the line and taking the
      same back as negative margin (its text box, and so its text, stays where it was).
   2. The Daily Cryptic's "What is the speed bonus?" (ds-cryptic-game.css button.cg-speed, 64 x 22, ::after 72 x 44): the speed
      meter above it took the square's top edge (86%). The link is lifted above its neighbours.
   3. The request box's Save and Clear (discover-glass.css, 34 x 34): overflow: hidden on the buttons clipped their own ::after,
      and the text field took the rest (43%). The clip is lifted (the icon is a 15 pt mask in the middle; nothing reaches the edge)
      and each ::after is a 44 x 44 square reaching away from its neighbour.
   The running-time chip on the film page (ds-delights-2.css .dsd-rt, ::after inset -15px -10px) already answers on the whole
   square and is unchanged. */

/* 1 */
html.ds .duo-meta:has(> .sv-mark[data-sv-kind="caption"]) { padding-block: 13px; margin-block: -13px; padding-inline: 12px; margin-inline: -12px; }
/* (Your three's line keeps its own top margin, from showpiece.css, under the same weight of selector: the padding is taken back
   from it, not put in its place, so the reason under it is measured where it always stood (showpiece.js fitWhy). content-box
   keeps max-width, 100% or the iPad's 40ch, a measure of the text alone.) */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .sp-caption > .sp-meta:has(> .sv-mark[data-sv-kind="caption"]) { box-sizing: content-box; padding: 13px 12px; margin: calc(4 * var(--sp-u) - 13px) -12px -13px; }
/* and the area itself is the square, not a 44 pt circle (hit testing follows border-radius: a circle holds no 44 x 44 square) */
html.ds .sv-mark[data-sv-kind="caption"]::before { border-radius: 0; }

/* 2 */
html.ds button.cg-speed { z-index: 2; }

/* 3 */
html.ds #device .screen.dg2 .premium-composer .composer-meta :is(.query-save, .query-clear) { overflow: visible; }
/* the two stand closer than 44 pt apart, so each reaches outward: Save to the left, Clear to the right; and up rather than down,
   where the microphone starts 4 pt under them (46 x 45 each, no overlap with each other or the microphone) */
html.ds #device .screen.dg2 .premium-composer .composer-meta .query-save::after { inset: -8px 0 -3px -12px; }
html.ds #device .screen.dg2 .premium-composer .composer-meta .query-clear::after { inset: -8px -12px -3px 0; }

/* ===== prototype-src/plus-title-edge.css ===== */
/* TRIPTIC+ page, scrolled (coverage audit gap 15; owner approved 13 November 2026, 14:53). The floating "TRIPTIC+" capsule and
   its close control stood over the plans' words as they scrolled under them ("Have a code?" scrolls the page a long way): the
   capsule's row (ds-tab-scroll.css .ds-tsx-row) dims only a strip 10 pt above to 18 pt below the capsule, at 30%, so the words
   above and beside it stayed sharp. On this page the row reaches the top edge and is the stage's own colour down to the capsule's
   foot, then fades: nothing reads through the capsule or the cross. It comes and goes with the capsule (the row's own opacity,
   written by ds-tab-scroll.js), so at the top of the page, which is how TRIPTIC+ opens, nothing here shows. */
html.ds #device[data-tsx="subscription"] > .ds-tsx-bar > .ds-tsx-row {
  top: -80px; bottom: -32px;
  background: linear-gradient(to bottom, var(--c-stage) 0, var(--c-stage) calc(100% - 26px), color-mix(in srgb, var(--c-stage) 0%, transparent) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none;
}

/* ===== prototype-src/share-ticket-wait.css ===== */
/* The share sheet's ticket (coverage audit gap 11; owner approved 13 November 2026, 14:53). The ticket is drawn at once from the
   films already on the page (ds-film-share.js no longer starts encoding pictures until it has been painted); the one thing that
   may still be on its way is a poster image. Its slot waits as a quiet panel, still (no animation), and the poster covers it
   completely when it arrives (ds-film-share.css: the img is inset 0, object-fit cover). */
html.ds #device .ds-tk-art { background: var(--c-fill-2); }

/* ===== prototype-src/swap-film.css ===== */
/* "Seen it, swap this one" (prototype-src/swap-film.js). Record: hub/docs/SWAP-2026-10-09b.md.
   Three things, all under html.ds and all drawn from the design tokens (no colour, size or radius of its own):
     1. Swap, a fourth action in the settled three's row (beside Share, Save and Refine);
     2. the sheet (TRIPTIC_DS.sheet.open): the film named, why, and what happens; Flick explains it once;
     3. the new film's arrival is a WAAPI animation in the script (motion tokens); nothing here keeps moving.
   !important here only answers the !important of the toolbar rules it sits beside (ds-film-share.css, device-fit.css). */

/* ---------------------------------------------------------------- 1. the toolbar: four across when Refine is there too */
html.ds #device .trip-critical-layer .critical-result-toolbar.sw-four { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
html.ds #device .trip-critical-layer .critical-result-toolbar > button.sw-tool > span { white-space: nowrap; }
html.ds #device .trip-critical-layer .critical-result-toolbar > button.sw-tool[hidden] { display: none !important; }
/* compact heights lay icon and label side by side: four fit when each column is only as wide as it needs */
html[data-fit][data-device-h="compact"] #device .trip-critical-layer.trip-phase-settled .critical-result-toolbar.sw-four {
  grid-template-columns: repeat(4, auto) !important; justify-content: space-between !important;
}
html[data-fit][data-device-h="compact"] #device .trip-critical-layer.trip-phase-settled .critical-result-toolbar.sw-four > button { gap: 5px !important; }
html[data-fit][data-device-h="compact"] #device .trip-critical-layer.trip-phase-settled .critical-result-toolbar.sw-four > button > svg { width: 32px !important; height: 32px !important; padding: 7px !important; }

/* ---------------------------------------------------------------- 2. the sheet */
html.ds .ds-sheet-layer > .ds-sheet-host.sw-sheet { height: auto; max-height: 92%; }
html.ds .sw-sheet .ds-sheet-title { text-align: center; margin-bottom: var(--sp-2); }
html.ds .sw { display: flex; flex-direction: column; gap: var(--sp-4); padding: 0 0 var(--sp-2); }
/* the film it is about: its poster and its name, as small as a row */
html.ds .sw-film { display: flex; align-items: center; gap: var(--sp-3); margin: 0 auto; max-width: 100%; }
html.ds .sw-poster {
  position: relative; flex: none; width: 52px; aspect-ratio: 2 / 3; border-radius: var(--r-chip); overflow: hidden;
  background: var(--c-stage-raised); box-shadow: var(--e-1), 0 0 0 1px var(--c-line-strong);
}
html.ds .sw-poster > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
html.ds .sw-noart {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--sp-1); overflow: hidden; overflow-wrap: anywhere;
  color: var(--c-label-2); font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui);
}
html.ds .sw-film-words { display: flex; flex-direction: column; min-width: 0; }
html.ds .sw-film-words > b {
  color: var(--c-label-1); font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline);
  overflow-wrap: anywhere; text-wrap: balance;
}
html.ds .sw-film-words > small { color: var(--c-label-3); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds .sw-lede {
  margin: 0 auto; max-width: 34ch; text-align: center; text-wrap: pretty; color: var(--c-label-2);
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead);
}
/* the first time: Flick beside the one sentence that says what Swap does */
html.ds .sw-intro { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-row); background: var(--c-fill-1); }
html.ds .sw-intro > .sw-spoolie { flex: none; display: block; width: 64px; }
html.ds .sw-intro > .sw-spoolie svg { display: block; width: 100%; height: auto; }
html.ds .sw-intro > .sw-lede { margin: 0; text-align: left; }
/* Flick's own note (tripFlick.explain("swap"), JOIN 10 October 2026): his card is the box, so the wrapper is bare */
html.ds .sw-intro.sw-intro-spoolie { display: block; padding: 0; background: none; }
html.ds .sw-intro.sw-intro-spoolie > .sps-tip { margin: 0; }
/* why: the grouped list Settings is made of (52pt rows, hairlines, the list chevron) */
html.ds .sw-choices { display: block; margin: 0; padding: 0; overflow: hidden; border-radius: var(--r-row); background: var(--c-fill-1); }
html.ds .sw-choice {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); box-sizing: border-box;
  width: 100%; min-height: var(--row-min, 52px); margin: 0; padding: 10px var(--sp-4); border: 0; border-radius: 0; background: none;
  color: var(--c-label-1); text-align: left; cursor: pointer;
}
html.ds .sw-choice + .sw-choice::before { content: ""; position: absolute; top: 0; left: var(--sp-4); right: 0; height: 1px; background: var(--c-line); }
html.ds .sw-choice > span { display: flex; flex-direction: column; min-width: 0; }
html.ds .sw-choice b { font: var(--fw-body) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); }
html.ds .sw-choice small { color: var(--c-label-3); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
html.ds .sw-choice > i {
  flex: none; width: 8px; height: 13px; opacity: .5; background: var(--c-label-1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M1.5 1.5 6.5 6.5 1.5 11.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M1.5 1.5 6.5 6.5 1.5 11.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate var(--motion-press) var(--motion-curve);
}
html.ds .sw-choice:is(:active, .ds-pressed, .ds-pressed-row) { background: var(--c-fill-2); }
html.ds .sw-choice:is(:active, .ds-pressed, .ds-pressed-row) > i { translate: 2px 0; }
html.ds .sw-choice:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -3px; }
html.ds .sw-choice:disabled { cursor: default; }
html.ds .sw-choice:disabled > span { opacity: .45; }
html.ds .sw[aria-busy="true"] .sw-choices { transition: opacity var(--motion-normal) var(--motion-curve); }
/* where things stand: finding the next, or the one plain sentence when nothing is left */
html.ds .sw-status {
  margin: 0; min-height: var(--lh-footnote); text-align: center; text-wrap: pretty; color: var(--c-label-2);
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote);
}
html.ds .sw-status:empty { display: none; }
html.ds .sw[data-view="problem"] .sw-choices { display: none; }
/* (JOIN) once there is a problem to say, the first-time explanation (Flick's note, or its sentence) steps aside */
html.ds .sw[data-view="problem"] .sw-intro { display: none; }
html.ds .sw[data-view="problem"] .sw-status { color: var(--c-label-1); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); }
html.ds .sw-after { display: flex; justify-content: center; }
html.ds .sw-after[hidden] { display: none; }
html.ds .sw-after > .sw-action { width: 100%; }

/* on a phone that folds: lifted over the Duo's own triptych (duo-triptych.css: a fixed stage at 60), on one leaf */
html.ds body > .ds-sheet-layer.sw-over-duo {
  position: fixed; z-index: 61; top: var(--sw-leaf-top, 0px); right: var(--sw-leaf-right, 0px); bottom: var(--sw-leaf-bottom, 0px); left: var(--sw-leaf-left, 0px);
}

/* ---------------------------------------------------------------- 3. the arrival */
/* the panel being swapped keeps its light where it is while its face changes (nothing else on the page moves) */
html.ds #device .trip-critical-layer .critical-card.sw-swapping { pointer-events: none; }

/* ===== prototype-src/return-delights.css ===== */
/* TRIPTIC: coming back (return-delights.js; lane RETURN, 10 October 2026; hub/docs/RETURN-2026-10-10.md). Tokens only.
   1. Flick's question when someone comes back from a film ("Intermission’s over. How was it?"): one small card above
      the tab bar, the film page's three answers, a close button. It arrives once (the one curve); nothing loops.
   2. "New on <service>": a small ribbon in a poster's top-left corner (the score chip keeps the lower-left), and a quiet
      pill above the title on the film's page.
   3. "Out today": a lamp-coloured label in a poster's top-right corner and one gleam of light across the poster, the
      first time it is seen that day. The gleam is a pseudo-element moved by transform only (the compositor's work);
      under Reduce Motion it is a still light and nothing moves. */
html.ds .rt-anchor { position: relative; }

/* ===== 1. the question */
html.ds #device > .rt-ask {
  position: absolute; z-index: 300; box-sizing: border-box;
  left: calc(var(--rt-left, 0px) + 12px); right: 12px; bottom: calc(var(--dock-bottom, 14px) + var(--dock-h, 62px) + 12px);
  max-width: 430px; margin: 0 auto;
  padding: 12px 6px 14px 12px; border-radius: var(--r-card);
  background: var(--c-stage-raised); box-shadow: inset 0 0 0 1px var(--c-line-strong, var(--c-line)), var(--e-2);
}
html.ds #device > .rt-ask.is-arriving { animation: rt-ask-in var(--motion-normal) var(--motion-curve) both; }
/* Flick asks it (lane VOICE, 11 October 2026): him with his badge, and a speech bubble whose tail points at him */
html.ds .rt-ask-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
html.ds .rt-ask-head > .sps-x { margin-left: -8px; }
html.ds .rt-ask-say {
  margin: 0; color: var(--c-label-1); text-wrap: pretty;
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead);
}
html.ds .rt-ask-film {
  display: block; margin-top: 2px; overflow-wrap: anywhere; color: var(--c-label-3);
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote);
}
html.ds .rt-ask-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2, 8px); margin: 12px 6px 0 0; }
html.ds .rt-ask-choices > button {
  appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0;
  min-height: calc(var(--target, 44px) + 12px); padding: 8px 4px; border: 0; border-radius: var(--r-control, 10px);
  background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-label-1); cursor: pointer;
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); text-align: center;
  transition: background-color var(--motion-fast) var(--motion-curve);
}
html.ds .rt-ask-choices > button > svg { flex: none; width: 22px; height: 22px; color: currentColor; }
html.ds .rt-ask-choices > button > span { display: block; max-width: 100%; overflow-wrap: anywhere; }
html.ds .rt-ask-choices > button:active { background: var(--c-fill-press, var(--c-fill-2)); }
html.ds .rt-ask-choices > button:focus-visible { outline: 2px solid var(--c-label-1); outline-offset: 2px; }
html.ds .rt-ask-choices > button[aria-pressed="true"] { background: var(--c-lamp); color: var(--c-lamp-ink); box-shadow: none; }
html.ds .rt-ask-choices > button:disabled:not([aria-pressed="true"]) { opacity: .45; }
/* (20 October 2026) "Didn't watch it": a quieter fourth answer under the three; not a rating. Then, once, "Keep it on your Watchlist?" */
html.ds .rt-ask-unwatched {
  appearance: none; display: block; width: calc(100% - 6px); min-height: var(--target, 44px); margin: var(--sp-2, 8px) 6px 0 0; padding: 8px 12px;
  border: 0; border-radius: var(--r-control, 10px); background: none; box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-label-2); cursor: pointer;
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); text-align: center;
  transition: background-color var(--motion-fast) var(--motion-curve);
}
html.ds .rt-ask-unwatched:active { background: var(--c-fill-press, var(--c-fill-2)); }
html.ds .rt-ask-unwatched:focus-visible { outline: 2px solid var(--c-label-1); outline-offset: 2px; }
html.ds .rt-ask-unwatched[aria-pressed="true"] { background: var(--c-fill-2); color: var(--c-label-1); }
html.ds .rt-ask-unwatched:disabled:not([aria-pressed="true"]) { opacity: .45; }
html.ds .rt-ask-keep { margin: 12px 6px 0 0; padding-top: 12px; border-top: 1px solid var(--c-line); }
html.ds .rt-ask-keep-q { margin: 0 0 var(--sp-2, 8px); color: var(--c-label-1); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); }
html.ds .rt-ask-keep-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2, 8px); }
html.ds .rt-ask-keep-row > button {
  appearance: none; min-width: 0; min-height: var(--target, 44px); padding: 8px 10px; border: 0; border-radius: var(--r-control, 10px);
  background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-label-1); cursor: pointer; overflow-wrap: anywhere;
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote);
}
html.ds .rt-ask-keep-row > button[data-rt-keep="yes"] { background: var(--c-lamp); color: var(--c-lamp-ink); box-shadow: none; }
html.ds .rt-ask-keep-row > button:focus-visible { outline: 2px solid var(--c-label-1); outline-offset: 2px; }
html.ds .rt-ask-keep-row > button:disabled:not([aria-pressed="true"]) { opacity: .45; }
html.ds .rt-ask-keep.is-arriving { animation: rt-next-in var(--motion-normal) var(--motion-curve) both; }
html.ds[data-text-size="largest"] .rt-ask-keep-row { grid-template-columns: minmax(0, 1fr); }
/* the largest text: the three answers stand one under another, each still a full-width target */
html.ds[data-text-size="largest"] .rt-ask-choices { grid-template-columns: minmax(0, 1fr); }
html.ds[data-text-size="largest"] .rt-ask-choices > button { flex-direction: row; justify-content: flex-start; padding: 8px 14px; gap: 10px; min-height: var(--target, 44px); }
html.ds[data-text-size="largest"] #device > .rt-ask { max-height: calc(100% - var(--dock-h, 62px) - 48px); overflow-y: auto; }
/* iPad: the tab bar floats at the top, so the card sits above the Home indicator, centred at a reading width */
html.ds[data-ipad="regular"] #device > .rt-ask { bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); max-width: 480px; }

/* ===== 1b. what next (lane AFTER, 14 October 2026; hub/docs/AFTER-2026-10-14.md): after the answer the card keeps one small
   moment under the three answers: one line about taste, "Because of that:" with a film, and "Three more". The inner rules are
   the film page's (ds-film-share.css, .film-next-*); here is only its place in this card. It stays until it is closed or the
   person goes to another page. */
html.ds .rt-ask .film-next { margin: 12px 6px 0 0; padding-top: 12px; border-top: 1px solid var(--c-line); }
/* the largest text: the two answers not given are spent and say nothing more, so the card keeps its room for the moment (it
   never has to scroll to reach "Three more") */
html.ds[data-text-size="largest"] #device > .rt-ask[data-rt-next] .rt-ask-choices > button:disabled:not([aria-pressed="true"]) { display: none; }
html.ds .rt-ask .film-next.is-arriving { animation: rt-next-in var(--motion-normal) var(--motion-curve) both; }
@keyframes rt-next-in { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }

/* ===== 2. "New on <service>" */
html.ds .rt-new {
  position: absolute; z-index: 3; top: 6px; left: 6px; max-width: calc(100% - 12px); box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 3px 6px; border-radius: var(--r-pill);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none;
  font: 600 var(--fs-caption-2)/1.15 var(--font-ui); letter-spacing: .01em; color: var(--c-label-1);
  background: rgba(5, 5, 7, .76); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 8px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2);
}
html.ds .rt-new::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c-lamp); }
html.ds #device .film-v5 .film-title > .rt-new--page {
  position: static; display: inline-flex; width: max-content; margin: 0 0 var(--sp-2, 8px); padding: 5px 10px 5px 8px;
  font: var(--fw-footnote) var(--fs-footnote)/1.15 var(--font-ui); letter-spacing: var(--tr-footnote);
}
html.ds #device .film-v5 .film-title > .rt-new--page + span { display: block; }
html.ds[data-text-size="largest"] .rt-new:not(.rt-new--page) { white-space: normal; line-height: 1.1; }
/* the Library's search rows: the words stand in the row, under its title and year (no poster corner to hold them) */
html.ds #device .dslp-hit-copy > :is(.rt-new--row, .rt-out--row) {
  position: static; display: inline-flex; width: max-content; max-width: 100%; margin: 4px 6px 0 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.ds #device .dslp-hit-copy > .rt-new--row { background: var(--c-fill-2); }

/* ===== 3. "Out today" */
html.ds .rt-out {
  position: absolute; z-index: 4; top: 6px; right: 6px; max-width: calc(100% - 12px); box-sizing: border-box;
  padding: 3px 8px; border-radius: var(--r-pill); pointer-events: none; white-space: nowrap;
  font: 700 var(--fs-caption-2)/1.15 var(--font-ui); letter-spacing: .04em; color: var(--c-lamp-ink); background: var(--c-lamp);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
html.ds .rt-gleam { position: absolute; z-index: 2; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
html.ds .rt-gleam::before {
  content: ""; position: absolute; inset: -10% -60%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 248, 230, .08) 44%, rgba(255, 248, 230, .42) 50%, rgba(255, 248, 230, .08) 56%, transparent 62%);
  transform: translateX(-75%); opacity: 0;
}
html.ds .is-gleaming > .rt-gleam::before { animation: rt-gleam var(--motion-ceremony) var(--motion-curve) both; }
/* Coming Soon: the score chip has the top-left corner there and the board the foot; the label takes the top-right */
html.ds #device .ds-cs-card .rt-out { top: 6px; right: 6px; }
/* the largest text: the label stays on the poster, in two lines if it must */
html.ds[data-text-size="largest"] .rt-out { white-space: normal; text-align: center; line-height: 1.05; }

@keyframes rt-ask-in { 0% { opacity: 0; transform: translateY(10px) scale(.98); } 100% { opacity: 1; transform: none; } }
@keyframes rt-gleam { 0% { opacity: 0; transform: translateX(-75%); } 18% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: translateX(75%); } }

/* ===== still: Reduce Motion (system or the app's switch) and the "reduced" tier: the words, a still light, no movement */
@media (prefers-reduced-motion: reduce) {
  html.ds #device > .rt-ask, html.ds .rt-ask-choices > button, html.ds .rt-ask .film-next { animation: none !important; transition: none !important; }
  html.ds .rt-ask-unwatched, html.ds .rt-ask-keep { animation: none !important; transition: none !important; }
  html.ds .rt-gleam::before { animation: none !important; transform: none; opacity: 1; background: linear-gradient(135deg, rgba(255, 248, 230, .2), transparent 42%); }
}
html.ds #device.manual-reduced-motion > .rt-ask, html.ds #device.manual-reduced-motion .rt-ask-choices > button,
html.ds[data-motion-tier="reduced"] #device > .rt-ask, html.ds[data-motion-tier="reduced"] .rt-ask-choices > button,
html.ds #device.manual-reduced-motion .rt-ask .film-next, html.ds[data-motion-tier="reduced"] .rt-ask .film-next { animation: none !important; transition: none !important; }
html.ds #device.manual-reduced-motion :is(.rt-ask-unwatched, .rt-ask-keep), html.ds[data-motion-tier="reduced"] :is(.rt-ask-unwatched, .rt-ask-keep) { animation: none !important; transition: none !important; }
html.ds #device.manual-reduced-motion .rt-gleam::before,
html.ds[data-motion-tier="reduced"] .rt-gleam::before { animation: none !important; transform: none; opacity: 1; background: linear-gradient(135deg, rgba(255, 248, 230, .2), transparent 42%); }
@media (forced-colors: active) { html.ds .rt-new, html.ds .rt-out, html.ds #device > .rt-ask { border: 1px solid CanvasText; } html.ds .rt-gleam { display: none; } }

/* ===== prototype-src/bigscreen-layout.css ===== */
/* TRIPTIC on a big screen: the composition pass (3 November 2026, lane BIGSCREEN; record: hub/docs/BIGSCREEN-2026-11-03.md;
   audit: scripts/bigscreen-audit.mjs; tests: tests/bigscreen-layout-browser.test.mjs).

   The owner, looking at the iPad App Store shot of Discover: the "Try asking for" row started at the column's left edge and
   ran off the right of the screen, and the free-searches line under the request hugged the left of a centred column, so the
   foot of the page looked lopsided. This layer is alignment and spacing only, one mechanism, for both big screens:
     html[data-ipad="regular"]   an iPad window 744pt and wider (ipad-layout.css: the page keeps to a centred column)
     html[data-duo-book]         the iPhone Duo's inner display held like a book (duo-book.css: each leaf is a column)
   An iPhone, the Duo's cover display, an iPad in Slide Over and a desktop browser meet none of it.

   1. Rows that scroll sideways keep to the column, both sides. Each starts on the column's start edge and is cut on its end
      edge, with a soft fade at whichever edge has films under it (nothing fades at rest at the start, nothing when the row
      has nothing to scroll). The phone's way (the row running to the window's edge) is a phone's: on a big screen it made
      a row that began inside the column and ended outside it.
   2. One-line notes under a centred control stand centred under it.
   3. The fold: (withdrawn 4 November; the Duo's spreads are designed separately).

   Tokens: --bs-row-fade (the fade's width). Transform-free, nothing moves; the fades follow the row's own scroll
   (a scroll-driven animation where the browser has one; without it the row is still symmetric, just unfaded). */

html:is([data-ipad="regular"], [data-duo-book]) { --bs-row-fade: 28px; }

/* ================================================================== 1. rows keep to the column
   ipad-layout.css bled its carousels and shelves to the window (margin -side, padding side); here each row's own bleed is 0
   (set on the row, so this layer can load before ipad-layout.css, in the slot the manifest-order tests leave free), so the
   row's box is the column's. (A page of two columns already had 0: unchanged.) The cinema row on Today bled by its own --pad. */
html.ds[data-ipad="regular"] #device > .screen :is(.ds-carousel, .dslc-track:not(.is-compact), .dslc-watched-row) { --ipad-bleed: 0px; }
html.ds:is([data-ipad="regular"], [data-duo-book]) #device .ds-cs { --pad: 0px; }

@property --bs-fl { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --bs-fr { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes bs-row-fade {
  0%   { --bs-fl: 0px;                --bs-fr: var(--bs-row-fade); }
  6%   { --bs-fl: var(--bs-row-fade); }
  94%  { --bs-fr: var(--bs-row-fade); }
  100% { --bs-fl: var(--bs-row-fade); --bs-fr: 0px; }
}
/* the fade is only drawn while the row has somewhere to scroll: the timeline of a row with nothing to scroll is inactive,
   and an inactive animation sets nothing, so the mask (which would clip a card's shadow) is never there at rest */
@keyframes bs-row-mask {
  from, to {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--bs-fl), #000 calc(100% - var(--bs-fr)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--bs-fl), #000 calc(100% - var(--bs-fr)), transparent 100%);
  }
}
@supports (animation-timeline: scroll(self inline)) {
  html.ds:is([data-ipad="regular"], [data-duo-book]) #device :is(.ds-carousel, .dslc-track:not(.is-compact), .dslc-watched-row, .ds-cs-reel) {
    animation: bs-row-fade linear both, bs-row-mask linear both;
    animation-timeline: scroll(self inline), scroll(self inline);
  }
}

/* ================================================================== 2. notes under a centred control
   "3 free searches left this week" (membership.js) under the request: centred under it, as "One film at random" is under
   Break Glass. In a two-column page or a leaf it centres in its own column (its margins are the column's). */
html.ds:is([data-ipad="regular"], [data-duo-book]) #device > .screen.dg2 > .tm-allowance { display: flex; width: 100%; box-sizing: border-box; justify-content: center; }
/* (the line is now its column's width: a pointer brightens its words rather than filling a column-wide pill) */
@media (any-hover: hover) {
  html.ds:is([data-ipad="regular"], [data-duo-book]) #device > .screen.dg2 > .tm-allowance:hover { background-color: transparent; }
  html.ds:is([data-ipad="regular"], [data-duo-book]) #device > .screen.dg2 > .tm-allowance:hover .tm-allow-label { color: var(--c-label-1); }
}

/* ================================================================== 3. the fold
   (4 November 2026, the owner: moving a game's start card or Library's rooms onto one leaf left the other empty: "it's not
   entirely a bad thing to have stuff centred on the fold ... if we are going to put it to one side, it should be done creatively
   and have stuff on the other side". Those moves are withdrawn; the Duo's spreads are being designed as a whole.) */

/* ================================================================== 4. Discover's grid of suggestions
   In two columns (iPad landscape) and on the Duo's right leaf, "Try asking for" is a grid of two tracks that fill the column
   (ipad-layout.css section 4, duo-book.css section 3 ask for width: auto). A later layer (discover-glass.css) fixes every card
   at 150pt, so each card sat at the start of a wider track: the grid's left edge on the column, its right edge 40pt short of
   it. Each card fills its track again, so both edges are the column's; the cards keep their height. */
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device > .screen.dg2.ipad-two > .discover-inspiration .prompt-grid.ds-carousel .prompt-card,
html.ds[data-duo-book] #device > .screen.dg2.dbk-two > .discover-inspiration .prompt-grid.ds-carousel .prompt-card {
  width: auto !important; flex: none !important;
}

/* ===== prototype-src/ipad-layout.css ===== */
/* TRIPTIC on iPad. Runtime: prototype-src/ipad-layout.js. Record: hub/docs/IPAD-2026-10-09b.md.

   Every rule hangs from html[data-ipad] (an iPad, or ?ipad=1), so an iPhone, the iPhone Duo and a desktop browser
   never meet one of them. Two sizes, as iPadOS has them:
     data-ipad="regular"   744pt and wider: the iPad layout (sections 1-9)
     data-ipad="compact"   under 744pt (Slide Over, a narrow Split View): the iPhone layout across the window (1)
   and in "regular", data-ipad-cols="2" (1000pt and wider) opens the two-column compositions.

   1. The canvas: the window is the app. No phone column, no bars either side.
   2. The tab bar: the iPadOS 18 floating tab bar, at the top in the middle, never minimised.
   3. Reading widths: every page keeps its words to a comfortable measure; nothing is a stretched phone.
   4. Discover: the request in a column of its own, the suggestions beside it (two columns) or under it.
   5. Your three: the triptych at its full size, the words and the actions at a reading width.
   6. The film page: the poster beside the room (two columns), a wide hero over a centred page (one column).
   7. Library, Today, Collections, You: two columns of sections where it helps.
   8. The pointer: hover states for a trackpad or a mouse, never left behind by a finger.
   9. Large text and Reduce Motion: the same layout; nothing here moves.

   Tokens only (colours, radii, type from design-tokens.css); no transition: all. !important only where an earlier
   layer's rule is itself !important. */

/* ================================================================== 1. the canvas */
html[data-ipad] { --wide-touch-column: 100vw; }
html[data-ipad="regular"] {
  --ipad-gutter: clamp(24px, 4vw, 48px);              /* the page's own margin at the window's edges */
  --ipad-read: 680px;                                 /* one column of reading: about 70 characters of body text */
  --ipad-wide: 1120px;                                /* the widest a two-column page grows */
  --ipad-bar-h: 52px;                                 /* the floating tab bar */
  --ipad-bar-top: max(12px, calc(env(safe-area-inset-top, 0px) + 6px));
  --ipad-bar-room: calc(var(--ipad-bar-top) + var(--ipad-bar-h) + 14px);   /* what a tab's first row keeps clear */
  --ipad-col-gap: clamp(28px, 3.2vw, 48px);
}
/* the column a page keeps to: the reading width, centred, never closer to the window's edge than the gutter */
html[data-ipad="regular"] #device {
  /* (in vw, not %: these are read inside the page as well as on it, and the iPad canvas is always the window) */
  --ipad-side: max(var(--ipad-gutter), calc((100vw - var(--ipad-read)) / 2));
  --ipad-side-wide: max(var(--ipad-gutter), calc((100vw - var(--ipad-wide)) / 2));
}

/* ================================================================== 2. the tab bar
   The iPadOS 18 floating tab bar: a capsule at the top in the middle, each tab its symbol and its name side by side.
   It is the same dock (ds-navigation.js dresses it, the lens slides under the chosen tab, the glass, the bloom), placed
   and proportioned for a wide screen. It never draws in to a circle on iPad (ds-navigation.js asks
   html[data-ipad="regular"] first): on a big screen the bar costs nothing and is always one reach away. */
html.ds[data-ipad="regular"] #device {
  --dock-h: var(--ipad-bar-h);
  --dock-max: 600px;
  --dock-icon: 20px;
  --dock-icon-y: 26px;
  --dock-bloom-y: 50px;
}
html.ds[data-ipad="regular"] #device > .persistent-glass-nav {
  top: var(--ipad-bar-top) !important;
  bottom: auto !important;
  left: max(var(--ipad-gutter), calc((100% - var(--dock-max)) / 2)) !important;
  right: max(var(--ipad-gutter), calc((100% - var(--dock-max)) / 2)) !important;
}
html.ds[data-ipad="regular"] #device > .persistent-glass-nav > button {
  flex-direction: row !important;
  gap: 7px !important;
  padding: 0 10px !important;
  font: 500 calc(14px * min(var(--text-scale, 1), 1.15))/calc(18px * min(var(--text-scale, 1), 1.15)) var(--font-ui) !important;
  letter-spacing: var(--tr-subhead, -.01em);
}
html.ds[data-ipad="regular"] #device > .persistent-glass-nav:not(.is-scrubbing) > button:is([aria-current="page"], .active) { font-weight: 600 !important; }
/* the unread dot sits after the name, as iPadOS puts a badge. It takes no room in the row (margin-right gives back its
   width and the gap before it), so the tab's symbol and name stay where they were when the dot arrives (3 November 2026:
   in the flow, it pushed a centred tab's contents 6.5pt to the left as it appeared). */
html.ds[data-ipad="regular"] #device > .persistent-glass-nav > button > .ds-dock-dot {
  position: static; order: 3; flex: none; translate: none; margin-left: -1px; margin-right: -13px; width: 7px; height: 7px;
}
/* the Watchlist count (ds-look.css 10) at the symbol's top-right shoulder, as on the phone. The phone places it from
   the tab's middle (50% + 4pt), where its symbol stands over its name; here the symbol and the name sit side by side,
   so the middle is in the name and the count covered it (3 November 2026). Here the count is a point in the row just
   before the symbol (no width; margin-right gives back the gap after it, so nothing moves when it comes or goes), and
   its pill (::before) hangs from there: from 3pt right of the symbol's centre, its foot on the top of the name's line
   (half the name's 18pt line above the row's centre line, at any text size), so it never lies over the name. The
   symbol and the name share one line here, so the count stands on the symbol's top edge rather than over its corner
   as on the phone: lower, it would reach the name's first letter. */
html.ds[data-ipad="regular"] #device > .persistent-glass-nav > button > .ds-look-count {
  position: relative; left: auto; top: auto; order: -1; flex: none; align-self: center;
  width: 0; min-width: 0; height: 0; padding: 0; margin: 0 -7px 0 0;
  background: none; box-shadow: none; overflow: visible;
}
html.ds[data-ipad="regular"] #device > .persistent-glass-nav > button > .ds-look-count::before {
  position: absolute; left: calc(var(--dock-icon) / 2 + 3px); bottom: calc(9px * min(var(--text-scale, 1), 1.15));
  box-sizing: border-box; min-width: 17px; height: 17px; padding: 0 4.5px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
  color: var(--dock-solid-lo); background: rgb(var(--dock-accent));
  box-shadow: 0 0 0 1.5px var(--dock-solid-lo);
}
/* the circle that stands for a minimised bar has nothing to do on iPad */
html.ds[data-ipad="regular"] #device > .ds-tab-capsule { display: none !important; }
/* the phone's dark band under the dock is for a bar at the bottom; a bar at the top has the page's own top edge */
html.ds[data-ipad="regular"] #device > :is(.ds-edge-fade, .ds-discover-fade, .ds-tsx-bottom) { display: none !important; }
/* when the bar steps aside (the search ritual, the keyboard, voice) it leaves upwards, the way it came */
html.ds[data-ipad="regular"] #device:is(.critical-journey-active, .keyboard-open, .ritual-listening) > .persistent-glass-nav { transform: translateY(-140%) !important; }
/* the page-name capsule that comes in as a phone page scrolls stands where the tab bar now is: on iPad the bar names
   the page (the chosen tab), so the capsule stays out of the way */
html.ds[data-ipad="regular"] #device > .ds-tsx-bar { display: none !important; }

/* ================================================================== 3. reading widths
   A page keeps its column (--ipad-side each side: 680pt of reading, centred), and its top row clears the tab bar.
   The brand and the account control stay at the window's corners, level with the bar, as a navigation bar's items do. */
html.ds[data-ipad="regular"] #device > .screen {
  --ipad-pad: var(--ipad-side);
  padding-left: var(--ipad-pad) !important;
  padding-right: var(--ipad-pad) !important;
}
html.ds[data-ipad="regular"] #device > .screen > .app-header {
  margin-left: calc(var(--ipad-gutter) - var(--ipad-pad)) !important;
  margin-right: calc(var(--ipad-gutter) - var(--ipad-pad)) !important;
  /* the brand's row and the bar share one centre line */
  height: auto !important;
  min-height: 0 !important;
  padding-top: calc(var(--ipad-bar-top) + (var(--ipad-bar-h) - 44px) / 2) !important;
  padding-bottom: 0 !important;
  margin-bottom: 18px !important;
}
/* 744-999pt: the brand's word steps aside so the mark and the bar never meet (the bar is up to 600pt wide) */
html.ds[data-ipad="regular"][data-ipad-cols="1"] #device > .screen > .app-header .brand-home > .wordmark { display: none !important; }
/* a carousel or a shelf runs to the window's edges, its first card on the column's edge. In a page of two columns it
   keeps to its own column (--ipad-bleed is 0 there). */
html.ds[data-ipad="regular"] #device > .screen { --ipad-bleed: var(--ipad-pad); }
html.ds[data-ipad="regular"] #device > .screen :is(.ds-carousel, .dslc-track:not(.is-compact), .dslc-watched-row) {
  margin-left: calc(-1 * var(--ipad-bleed)) !important;
  margin-right: calc(-1 * var(--ipad-bleed)) !important;
  padding-left: var(--ipad-bleed) !important;
  padding-right: var(--ipad-bleed) !important;
  scroll-padding-inline: var(--ipad-bleed) !important;
}

/* ------------------------------------------------------------------ two columns, one rule
   ipad-layout.js marks a two-column page: the page .ipad-two with data-ipad-aside="start" or "end" (the side its
   standing section is on), its header rows .ipad-head, and ONE section .ipad-aside. The header rows run across the
   whole width; the aside stands in its own column from the first row under the header (--ipad-aside-y, measured);
   every other section runs down the main column in order, in the page's own flow. So a section another lane adds later
   lands in the main column, at the column's width: nothing new ever stretches across the window, and nothing about
   the page's own flow (its order, its margins, its scroll position, what reads its children) changes.
   The aside is taken out of the flow (position: absolute in the page, which is its own scroller), so neither column
   can space out the other; the page still scrolls to the end of whichever column is longer.
   --ipad-share is the aside's share of the width between the gutters. */
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device > .screen.ipad-two {
  --ipad-share: .47;
  --ipad-pad: var(--ipad-side-wide);
  --ipad-bleed: 0px;
}
/* the main column: every in-flow section that is not a header row or the aside (a percentage margin is of the
   page's content width) */
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device > .screen.ipad-two[data-ipad-aside="start"] > :not(.ipad-head, .ipad-aside, .trip-critical-layer, .critical-film-layer, [class*="ambient"], [class*="atmosphere"], .ds-tsx-light) {
  margin-left: calc((100% - var(--ipad-col-gap)) * var(--ipad-share) + var(--ipad-col-gap)) !important;
  max-width: calc((100% - var(--ipad-col-gap)) * (1 - var(--ipad-share))) !important;
}
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device > .screen.ipad-two[data-ipad-aside="end"] > :not(.ipad-head, .ipad-aside, .trip-critical-layer, .critical-film-layer, [class*="ambient"], [class*="atmosphere"], .ds-tsx-light) {
  margin-right: calc((100% - var(--ipad-col-gap)) * var(--ipad-share) + var(--ipad-col-gap)) !important;
  max-width: calc((100% - var(--ipad-col-gap)) * (1 - var(--ipad-share))) !important;
}
/* the aside (a percentage width is of the page's padding box, the gutters included) */
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device > .screen.ipad-two > .ipad-aside {
  position: absolute !important;
  top: var(--ipad-aside-y, auto) !important;
  width: calc((100% - 2 * var(--ipad-side-wide) - var(--ipad-col-gap)) * var(--ipad-share)) !important;
  max-width: none !important;
  margin: 0 0 96px !important;
  box-sizing: border-box;
}
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device > .screen.ipad-two[data-ipad-aside="start"] > .ipad-aside { left: var(--ipad-side-wide) !important; right: auto !important; }
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device > .screen.ipad-two[data-ipad-aside="end"] > .ipad-aside { right: var(--ipad-side-wide) !important; left: auto !important; }
/* the absolute children of a page (its lights) keep to the page; the reveal and the film page drawn over Discover
   are #device's own layers and never meet these rules */

/* ================================================================== 4. Discover
   One column (portrait): the request at the reading width, the suggestions running to the window's edges under it.
   Two columns (landscape): the request on the left (its heading, the field, Find three, your searches), what to ask
   for on the right as a grid of cards, all of them in sight at once. */
html.ds[data-ipad="regular"] #device > .premium-discover .discover-heading h1 { font-size: var(--fs-large-title, 34px); }
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device > .premium-discover.ipad-two { --ipad-share: .48; }
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device > .premium-discover.ipad-two > .discover-inspiration { margin-top: 0 !important; }
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device > .premium-discover.ipad-two > .discover-inspiration .ds-carousel {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px !important;
  margin: 0 !important; padding: 0 !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device > .premium-discover.ipad-two > .discover-inspiration .ds-carousel > * {
  width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important;
}

/* ================================================================== 5. your three
   The showpiece (showpiece.css) lays everything out from one frame: --sp-fw wide, --sp-ox from the left. On iPad that
   frame is ipad-layout.js's (--ipad-reveal-fw / --ipad-reveal-ox): a centred 760pt in one column; in two columns the
   left pane, with the chosen film's name, its facts, why it was chosen and the actions in the right pane (the iPhone
   Duo lays its wait on two leaves the same way: showpiece.css, data-sp-fold="book"). The triptych is allowed to grow
   to 440pt across its centre panel (300 on a phone): at full size, within the height it has. The top row (Back,
   sound) keeps to the window's gutters; the request keeps to a reading width. */
html.ds[data-ipad="regular"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):not([data-sp-fold]) {
  --sp-fw: var(--ipad-reveal-fw, var(--sp-vw, 390px));
  --sp-ox: var(--ipad-reveal-ox, 0px);
  --sp-cw: max(96px, min(calc(var(--sp-fw) * var(--sp-c)), calc(var(--sp-fit-h) / 1.5), 440px));
}
html.ds[data-ipad="regular"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-header {
  left: max(16px, calc(var(--ipad-gutter) - 8px)) !important; right: max(16px, calc(var(--ipad-gutter) - 8px)) !important;
}
html.ds[data-ipad="regular"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-request-capsule {
  left: max(28px, calc((100% - var(--ipad-read)) / 2)) !important; right: max(28px, calc((100% - var(--ipad-read)) / 2)) !important;
}
/* one column: the actions keep to a reading width under the triptych */
html.ds[data-ipad="regular"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) > .critical-results {
  left: max(20px, calc((100% - 560px) / 2)) !important; right: max(20px, calc((100% - 560px) / 2)) !important;
}
/* two columns: the right pane (from the end of the triptych's frame, a column gap on, to the gutter) */
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):not([data-sp-fold]) {
  --ipad-pane-x: calc(var(--sp-ox) + var(--sp-fw) + var(--ipad-col-gap));
  --ipad-pane-w: calc(var(--sp-vw, 100vw) - var(--ipad-pane-x) - var(--ipad-gutter));
  /* under the triptych only the one line "Your three are ready." and the floor: the words and the actions are beside it */
  --sp-cap-h: calc(52 * var(--sp-u));
  --sp-dock-h: 0px;
}
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):not([data-sp-fold]) > .sp-caption {
  left: var(--ipad-pane-x); width: var(--ipad-pane-w);
  top: calc(var(--sp-tri-top) + var(--sp-ch) * .18); height: auto; max-height: calc(var(--sp-ch) * .66);
  align-items: flex-start; text-align: left;
}
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):not([data-sp-fold]) > .sp-caption > * { text-align: left; max-width: 26ch; }
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):not([data-sp-fold]) > .critical-results {
  left: var(--ipad-pane-x) !important; right: auto !important; width: min(var(--ipad-pane-w), 420px) !important;
  top: auto !important; bottom: max(var(--sp-bot), calc(var(--sp-vh, 100vh) - var(--sp-tri-bot))) !important;
  justify-content: flex-start !important;
}
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):not([data-sp-fold]) > .sp-words {
  left: var(--ipad-pane-x); width: var(--ipad-pane-w); top: 0; height: 100%; align-items: center; justify-content: flex-start;
}
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):not([data-sp-fold]) > .sp-words > p { text-align: left; font: 700 var(--fs-title-1, 28px)/var(--lh-title-1, 34px) var(--font-ui, system-ui); max-width: 22ch; -webkit-line-clamp: 6; }
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):not([data-sp-fold]) > .sp-fact {
  left: var(--ipad-pane-x); width: min(var(--ipad-pane-w), 420px); top: auto; bottom: calc(var(--sp-bot) + 18px);
}

/* ================================================================== 6. the film page
   Two columns: the poster stands the whole height of the window on the left, still while you read; the film's room
   (why it matched, where to watch, the trailer, the synopsis, the cast) scrolls beside it at a reading width.
   One column: the poster is taller (an iPad in portrait has the room) and the page under it keeps to the column. */
html.ds[data-ipad="regular"] #device .film-v5.recon-film .film-hero { --film-hero-height: clamp(520px, 62svh, 860px); }
html.ds[data-ipad="regular"] #device .film-v5.recon-film > .film-content {
  padding-left: var(--ipad-side) !important;
  padding-right: var(--ipad-side) !important;
}
html.ds[data-ipad="regular"] #device .film-v5.recon-film .film-title { padding-left: var(--ipad-side); padding-right: var(--ipad-side); }
html.ds[data-ipad="regular"] #device .film-v5.recon-film .film-topbar { left: var(--ipad-gutter) !important; right: var(--ipad-gutter) !important; }
html.ds[data-ipad="regular"] #device > .screen.film-v5 { padding-left: 0 !important; padding-right: 0 !important; }

html.ds[data-ipad="regular"][data-ipad-cols="2"] #device .film-v5.recon-film {
  --ipad-film-poster: min(44%, 560px);
  display: grid !important;
  grid-template-columns: var(--ipad-film-poster) minmax(0, 1fr);
  align-items: start;
  /* the room the phone keeps at the foot of the page belongs to the right column (its own padding), so the poster's
     column runs the page's whole height and the poster never leaves at the end */
  padding-bottom: 0 !important;
}
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device .film-v5.recon-film > * { grid-column: 2; min-width: 0; }
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device .film-v5.recon-film > .film-hero {
  --film-hero-height: var(--dv-h, 100vh);
  grid-column: 1; grid-row: 1 / span 40;
  position: sticky !important; top: 0;
  translate: none !important; scale: none !important;
}
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device .film-v5.recon-film > .film-content {
  grid-row: 1;
  padding: calc(var(--ipad-bar-top) + 8px) clamp(28px, 4vw, 56px) 96px !important;
  max-width: 760px;
}
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device .film-v5.recon-film .film-title { padding: 96px clamp(24px, 3vw, 40px) 32px; }
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device .film-v5.recon-film .film-topbar { left: 20px !important; right: 20px !important; }
/* the title's condensed bar belongs to the column it condenses over */
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device .film-v5 > .film-compact-header { grid-column: 2; }

/* ================================================================== 7. Library, Today, You, Collections */
/* Library: the Watchlist's cover stands on the left; Watched, Reels, the cards and the lists run down the right.
   Today: the day's ritual on the left; the week's card, Friday 3 and Cinema on the right.
   You: who you are across the top; Film DNA on the left, everything else on the right. */
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device > .library-screen.ipad-two { --ipad-share: .46; }
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device > .today-screen.ipad-two { --ipad-share: .48; }
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device > .profile-screen.ipad-two { --ipad-share: .5; }

/* Collections: its own grid, at the wide measure */
html.ds[data-ipad="regular"] #device > .collections-api-screen > .collections-api-content { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device > .collections-api-screen { --ipad-pad: var(--ipad-side-wide); }

/* ================================================================== 8. the pointer
   A trackpad or a mouse on iPad (any-hover: hover; a finger alone never matches, so no hover is ever left behind on a
   touch). iPadOS draws its own pointer; the page answers it the way iPadOS's own controls do: rows and plain buttons
   take a light fill, cards lift by two points and catch an edge of light, the tab under the pointer brightens. Colour
   and translate only, at the fast motion token; nothing here runs under Reduce Motion but the colour. */
@media (any-hover: hover) {
  html.ds[data-ipad] #device :is(.ds-row, .dsy-ident-main, .fd-card-open, .discover-shortcuts > button, .tm-allowance, .dslc-shelf-head button, .collections-api-header button, .subpage-header button) {
    transition: background-color var(--motion-fast) var(--motion-curve), color var(--motion-fast) var(--motion-curve);
  }
  html.ds[data-ipad] #device :is(.ds-row, .dsy-ident-main, .fd-card-open, .discover-shortcuts > button, .tm-allowance, .dslc-shelf-head button, .collections-api-header button, .subpage-header button):hover {
    background-color: var(--c-fill-2);
  }
  html.ds[data-ipad] #device :is(.prompt-card, .api-collection-card, .library-watchlist-cover, .dslc-card, .fc-week-arch, .ds-ten-card, .dsy-stat, .collection-film-card) {
    transition: translate var(--motion-fast) var(--motion-curve), border-color var(--motion-fast) var(--motion-curve);
  }
  html.ds[data-ipad] #device :is(.prompt-card, .api-collection-card, .library-watchlist-cover, .dslc-card, .fc-week-arch, .ds-ten-card, .collection-film-card):hover {
    translate: 0 -2px;
    border-color: var(--c-line-strong);
    box-shadow: var(--e-2, 0 10px 30px rgb(0 0 0 / .35));
  }
  html.ds[data-ipad] #device :is(.circle-control, .profile-control, .critical-header :is(.back-chevron, .critical-sound-toggle)):hover { background-color: var(--c-fill-press) !important; }
  html.ds[data-ipad] #device .primary-button:not(:disabled):hover { filter: brightness(1.08); }
  html.ds[data-ipad] #device .trip-critical-layer .critical-film-cta:hover { filter: brightness(1.04); }
  /* the tab bar: the tab under the pointer catches the light the lens has; the chosen tab already has it */
  html.ds[data-ipad="regular"] #device > .persistent-glass-nav > button:not([aria-current="page"], .active):hover { box-shadow: inset 0 0 0 999px rgb(255 255 255 / .07) !important; }
  /* a wing of the triptych under the pointer leans in a little: it can be chosen */
  html.ds[data-ipad] #device .trip-critical-layer[data-sp-act="three"] .critical-card:not(.is-selected) { cursor: pointer; }
  /* links and buttons say they can be pressed */
  html.ds[data-ipad] #device :is(button, a[href], [role="button"]):not(:disabled) { cursor: pointer; }
}
@media (any-hover: hover) and (prefers-reduced-motion: reduce) {
  html.ds[data-ipad] #device :is(.prompt-card, .api-collection-card, .library-watchlist-cover, .dslc-card, .fc-week-arch, .ds-ten-card, .collection-film-card):hover { translate: none; }
}
html.ds[data-ipad] #device.manual-reduced-motion :is(.prompt-card, .api-collection-card, .library-watchlist-cover, .dslc-card, .fc-week-arch, .ds-ten-card, .collection-film-card):hover { translate: none; }

/* ================================================================== 9. the largest text, Reduce Motion
   Nothing in this layer moves, and every measure above is in points that make room for larger type: the reading
   column is a maximum, never a fixed width, and the tab bar's names grow by up to 1.15 as the phone's do. At the
   largest size the bar's names step aside for their symbols below 900pt, so five tabs never crowd the bar. */
@media (max-width: 899px) {
  /* (the name stays for VoiceOver: drawn away, not removed) */
  html.ds[data-ipad="regular"][data-text-size="largest"] #device > .persistent-glass-nav > button > .ds-dock-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ================================================================== 10. made for iPad (lane H, 20 October 2026)
   ipad-layout.js, "made for iPad": the shortcuts card (Command-/ or ?), its one-time hint, a film lifted from your three
   and carried to Library, and the projector's light under a pointer. Transform and opacity only; Reduce Motion and Low
   Power: the card and the hint simply appear, nothing flies, no light. */
html[data-ipad] .ipk-sheet {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center; padding: 24px;
  background: rgb(0 0 0 / .55);
  opacity: 0; transition: opacity var(--motion-fast) var(--motion-curve);
}
html[data-ipad] .ipk-sheet.is-open { opacity: 1; }
html[data-ipad] .ipk-card {
  width: min(520px, 100%); max-height: calc(100vh - 48px); overflow: auto;
  padding: 26px 28px 22px; border-radius: var(--r-sheet, 28px);
  background: var(--c-stage-raised); color: var(--c-label-1);
  border: 1px solid var(--c-line-strong);
  box-shadow: 0 30px 80px rgb(0 0 0 / .55);
  font-family: var(--font-ui);
  transform: translateY(10px) scale(.98); transition: transform var(--motion-fast) var(--motion-curve);
}
html[data-ipad] .ipk-sheet.is-open .ipk-card { transform: none; }
html[data-ipad] .ipk-title { margin: 0 0 16px; font: 700 var(--fs-title-2, 22px)/var(--lh-title-2, 28px) var(--font-ui); letter-spacing: -.012em; }
html[data-ipad] .ipk-list { margin: 0; display: grid; gap: 2px; }
html[data-ipad] .ipk-row { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 16px; align-items: center; padding: 9px 0; border-top: 1px solid var(--c-line); }
html[data-ipad] .ipk-row dt { margin: 0; }
html[data-ipad] .ipk-row dd { margin: 0; font: 400 var(--fs-body, 17px)/var(--lh-body, 22px) var(--font-ui); color: var(--c-label-1); }
html[data-ipad] .ipk-sheet kbd, html[data-ipad] .ipk-hint kbd {
  display: inline-block; min-width: 2.2em; padding: 3px 9px; border-radius: var(--r-control, 10px);
  background: var(--c-fill-2); border: 1px solid var(--c-line-strong); color: var(--c-label-1);
  font: 600 var(--fs-footnote, 13px)/1.4 var(--font-ui); text-align: center; white-space: nowrap;
}
html[data-ipad] .ipk-done {
  margin-top: 18px; width: 100%; min-height: 48px; border: 0; border-radius: var(--r-pill, 999px);
  background: var(--c-lamp); color: var(--c-lamp-ink); font: 600 var(--fs-body, 17px)/1 var(--font-ui); cursor: pointer;
}
html[data-ipad] .ipk-done:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
html[data-ipad] .ipk-hint {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); z-index: 2147482000;
  padding: 10px 16px; border-radius: var(--r-pill, 999px);
  background: var(--c-stage-raised); border: 1px solid var(--c-line-strong); color: var(--c-label-1);
  font: 500 var(--fs-footnote, 13px)/1.3 var(--font-ui); pointer-events: none;
  opacity: 0; transform: translate(-50%, 8px); transition: opacity var(--motion-fast) var(--motion-curve), transform var(--motion-fast) var(--motion-curve);
}
html[data-ipad] .ipk-hint.is-on { opacity: 1; transform: translate(-50%, 0); }
/* a film carried to Library */
html[data-ipad] .ipk-ghost {
  position: fixed; left: 0; top: 0; z-index: 2147482500; pointer-events: none;
  border-radius: var(--r-row, 14px); background: var(--c-stage-raised) center / cover no-repeat;
  border: 1px solid var(--c-line-strong); box-shadow: 0 24px 60px rgb(0 0 0 / .6);
  transition: transform var(--motion-fast) var(--motion-curve), opacity var(--motion-fast) var(--motion-curve);
}
html[data-ipad] .ipk-ghost.is-back { transition: transform var(--motion-fast) var(--motion-curve), opacity var(--motion-fast) var(--motion-curve); opacity: 0; }
html[data-ipad] .ipk-ghost.is-taken { opacity: 0; transition: transform var(--motion-fast) var(--motion-curve), opacity var(--motion-fast) var(--motion-curve); }
/* drag a film: on iPad the three's cards take no browser gesture (the showpiece turns them with the pointer already),
   so a film held and carried to Library keeps its pointer to the drop and the page never scrolls under it. No touchmove
   listener cancels anything (tests/touch-scroll.test.mjs). */
html.ds[data-ipad="regular"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-act="three"] .critical-card { touch-action: none !important; }
html[data-ipad].ipk-dragging, html[data-ipad].ipk-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
html.ds[data-ipad="regular"].ipk-dragging #device:is(.critical-journey-active, .device) > .persistent-glass-nav { opacity: 1 !important; transform: none !important; }
html.ds[data-ipad] #device > .persistent-glass-nav > button.ipk-drop { box-shadow: inset 0 0 0 2px var(--c-beam) !important; }
html.ds[data-ipad] #device > .persistent-glass-nav > button.ipk-drop-on { box-shadow: inset 0 0 0 999px rgb(104 201 255 / .22), inset 0 0 0 2px var(--c-beam) !important; }
/* the projector's light: a soft pool under the pointer, over the triptych */
html[data-ipad] #device .trip-critical-layer > .ipk-light {
  position: absolute; left: 0; top: 0; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(closest-side, rgb(255 244 222 / .10), rgb(255 244 222 / .04) 55%, transparent);
  opacity: 0; transition: opacity var(--motion-fast) var(--motion-curve);
}
html[data-ipad] #device .trip-critical-layer > .ipk-light.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html[data-ipad] .ipk-sheet, html[data-ipad] .ipk-card, html[data-ipad] .ipk-hint, html[data-ipad] .ipk-ghost { transition-duration: 0s !important; }
  html[data-ipad] #device .trip-critical-layer > .ipk-light { display: none; }
}
html[data-ipad].mo-low-power #device .trip-critical-layer > .ipk-light, html[data-ipad] #device.manual-reduced-motion .ipk-light { display: none; }
/* (lane H) the facts under the film's name in the right pane: year, length, genre and the score wrap rather than being cut off */
html.ds[data-ipad="regular"][data-ipad-cols="2"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp):not([data-sp-fold]) > .sp-caption > .sp-meta { max-width: 40ch; white-space: normal; }
/* (lane H) Welcome: Get started was a 1300pt slab across the window. It keeps to a button's width, centred, as the words above it do. */
html.ds[data-ipad="regular"] #device > .welcome-screen.ds-fr-welcome > .welcome-actions { left: calc(50% - 220px) !important; right: calc(50% - 220px) !important; width: auto !important; }

/* ===== prototype-src/nice-to-haves.css ===== */
/* TRIPTIC nice-to-haves (owner, 16 October 2026): seven small, quiet touches. Script: nice-to-haves.js. Rules:
   tests/nice-to-haves.test.mjs. Each is a few percent of a look, not a feature.
   No filter blur anywhere, no all-round glow box-shadow, nothing faint that still paints a panel (lane LOOK's halo audit,
   scripts/lib/glow-audit.mjs). Motion is transform / translate / opacity. Reduce Motion and Low Power: stilled or not drawn.

   1. depth        the three's panels and halo slide a few pixels against each other with the phone's tilt (when allowed)
   2. flare        one soft horizontal streak across the halo, once a day, as the three stand
   3. dust         six specks drifting in the halo of the Friday 3 reveal (its one living thing)
   4. edge light   a thin rim of light along each panel's OUTER edge, the centre's brightest
   5. floor        a faint inverted reflection under Today's hero card, as if on polished black
   6. cast light   a foil card throws a little colour onto the shelf under it, a Rare more
   7. doors        two dark panels part from the centre as a Collection opens */

/* ===== 1. depth: only the `translate` property (the panels' own transforms are not touched). The panels need !important:
   showpiece.css sets `all: unset !important` on them (which resets translate too), and wins ties with its `#sp#sp` id
   trick, so these rules use the same trick. ===== */
html.ds #device .trip-critical-layer:is([data-nh-depth="on"], #sp#sp)[data-nh-depth="on"] .critical-card.rank-1 { translate: calc(var(--nh-x, 0) * 2px) calc(var(--nh-y, 0) * 1.5px) !important; }
html.ds #device .trip-critical-layer:is([data-nh-depth="on"], #sp#sp)[data-nh-depth="on"] .critical-card:not(.rank-1) { translate: calc(var(--nh-x, 0) * 1px) calc(var(--nh-y, 0) * .75px) !important; }
html.ds #device .trip-critical-layer[data-nh-depth="on"] .sp-stage > :is(.sp-room, .sp-pool-film, .sp-bloom) { translate: calc(var(--nh-x, 0) * -2px) calc(var(--nh-y, 0) * -1.5px); }
html.ds:is(.reduce-motion, .mo-low-power) #device .trip-critical-layer:is([data-nh-depth="on"], #sp#sp)[data-nh-depth="on"] .critical-card:is(.rank-1, .rank-2, .rank-3),
html.ds:is(.reduce-motion, .mo-low-power) #device .trip-critical-layer[data-nh-depth="on"] .sp-stage > * { translate: none !important; }

/* ===== 2. flare: a gradient streak (no blur), one pass; the script makes it and takes it away ===== */
html.ds #device .trip-critical-layer > .nh-flare {
  position: absolute; z-index: 20; left: -20%; width: 140%; top: 40%; height: 14px; margin: 0; padding: 0; border: 0;
  pointer-events: none; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(226, 244, 255, .82), rgba(156, 228, 255, .36) 38%, rgba(156, 228, 255, 0) 72%);
}
html.ds #device .trip-critical-layer > .nh-flare::after {
  content: ""; position: absolute; left: 14%; right: 14%; top: calc(50% - .5px); height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0));
}

/* ===== 3. dust: six specks, in the halo round the centre panel, only while the Friday three stand ===== */
html.ds #device .trip-critical-layer[data-mode="friday"] .sp-stage > .nh-dust {
  position: absolute; pointer-events: none; display: block;
  left: calc(var(--sp-cx) - var(--sp-cw) * .45); top: calc(var(--sp-tri-top) - var(--sp-ch) * .2); width: calc(var(--sp-cw) * 1.9); height: calc(var(--sp-ch) * 1.3);
}
html.ds #device .nh-dust > .nh-speck {
  position: absolute; display: block; width: 3px; height: 3px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 244, 226, .95), rgba(255, 244, 226, 0));
  animation: nh-dust-drift 24s var(--motion-breathe) infinite alternate both !important;   /* (!important: a settled three stills every animation in it, .trip-critical-layer.trip-phase-settled *; the dust is the one thing that is let through) */
}
html.ds #device .nh-dust > .nh-speck:nth-child(1) { left: 14%; top: 22%; animation: nh-dust-drift 26s var(--motion-breathe) -3s infinite alternate both !important; }
html.ds #device .nh-dust > .nh-speck:nth-child(2) { left: 70%; top: 14%; width: 2px; height: 2px; animation: nh-dust-drift 31s var(--motion-breathe) -11s infinite alternate both !important; }
html.ds #device .nh-dust > .nh-speck:nth-child(3) { left: 42%; top: 38%; width: 4px; height: 4px; animation: nh-dust-drift 29s var(--motion-breathe) -17s infinite alternate both !important; }
html.ds #device .nh-dust > .nh-speck:nth-child(4) { left: 86%; top: 52%; animation: nh-dust-drift 24s var(--motion-breathe) -6s infinite alternate both !important; }
html.ds #device .nh-dust > .nh-speck:nth-child(5) { left: 26%; top: 66%; width: 2px; height: 2px; animation: nh-dust-drift 33s var(--motion-breathe) -21s infinite alternate both !important; }
html.ds #device .nh-dust > .nh-speck:nth-child(6) { left: 58%; top: 80%; animation: nh-dust-drift 28s var(--motion-breathe) -9s infinite alternate both !important; }
@keyframes nh-dust-drift {
  0%   { opacity: 0;   transform: translate(0, 0); }
  25%  { opacity: .55; transform: translate(7px, -9px); }
  60%  { opacity: .3;  transform: translate(-6px, -22px); }
  100% { opacity: .5;  transform: translate(9px, -34px); }
}
html.ds:is(.reduce-motion, .mo-low-power) #device .nh-dust { display: none !important; }

/* ===== 4. edge light: a ring of the panel's own outline, masked to one side, along the OUTER edge ===== */
html.ds #device .trip-critical-layer[data-showpiece="on"] .sp-edge::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite: exclude;
}
html.ds #device .trip-critical-layer[data-showpiece="on"] .rank-3 .sp-edge::after { background: linear-gradient(90deg, rgba(var(--sp-film-hi, 255, 250, 240), .72), rgba(var(--sp-film-hi, 255, 250, 240), 0) 28%); }
html.ds #device .trip-critical-layer[data-showpiece="on"] .rank-2 .sp-edge::after { background: linear-gradient(270deg, rgba(var(--sp-film-hi, 255, 250, 240), .72), rgba(var(--sp-film-hi, 255, 250, 240), 0) 28%); }
html.ds #device .trip-critical-layer[data-showpiece="on"] .rank-1 .sp-edge::after {
  background:
    linear-gradient(180deg, rgba(var(--sp-film-hi, 255, 250, 240), 1), rgba(var(--sp-film-hi, 255, 250, 240), 0) 16%),
    linear-gradient(90deg, rgba(var(--sp-film-hi, 255, 250, 240), .62), rgba(var(--sp-film-hi, 255, 250, 240), 0) 10%, rgba(var(--sp-film-hi, 255, 250, 240), 0) 90%, rgba(var(--sp-film-hi, 255, 250, 240), .62));
}

/* ===== 5. floor: Today's hero card stands on polished black. A reflection is drawn, not laid out: no space, no
   accessibility node; a mask fades it to nothing within the first sixth of the card, and it is faint to begin with. ===== */
html.ds:not(.mo-low-power) #device > .screen.ds-today [data-dt-slot="hero"] > * {
  -webkit-box-reflect: below 3px linear-gradient(to bottom, rgba(255, 255, 255, 0) 84%, rgba(255, 255, 255, .11));
}

/* ===== 6. cast light: the shelf under a foil card, and under a Rare. An ellipse of colour on the shelf's glass, no blur. ===== */
html.ds .fc-slot .fc-stand-shade::after {
  content: ""; position: absolute; left: -22%; right: -22%; top: -12px; height: 32px; border-radius: 50%; pointer-events: none; opacity: 0;
}
html.ds .fc-slot:has(.fc-mini[data-finish="foil"]) .fc-stand-shade::after {
  opacity: 1;
  background:
    radial-gradient(ellipse 50% 50% at 30% 50%, rgba(118, 222, 255, .17), rgba(118, 222, 255, 0) 70%),
    radial-gradient(ellipse 50% 50% at 70% 50%, rgba(255, 126, 222, .15), rgba(255, 126, 222, 0) 70%);
}
html.ds .fc-slot:has(.fc-mini[data-finish="rare"]) .fc-stand-shade::after {
  opacity: 1;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 200, 112, .34), rgba(255, 200, 112, .12) 52%, rgba(255, 200, 112, 0) 78%);
}

/* ===== 7. doors: dark panels over a Collection while it opens, parting from the centre ===== */
html.ds #device > .nh-doors { position: absolute; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; contain: layout paint; }
html.ds #device > .nh-doors > .nh-door { position: absolute; top: 0; bottom: 0; width: 50.5%; pointer-events: none; will-change: transform;
  /* (17 October 2026) a cinema's doors: burgundy leather buttoned into diamonds, a row of brass studs round the edge */
  background:
    radial-gradient(circle at 50% 50%, rgba(8, 1, 3, .55) 0 1.6px, rgba(255, 210, 200, .07) 2.4px, transparent 3.4px) 0 0 / 30px 30px,
    radial-gradient(circle at 50% 50%, rgba(8, 1, 3, .55) 0 1.6px, rgba(255, 210, 200, .07) 2.4px, transparent 3.4px) 15px 15px / 30px 30px,
    repeating-linear-gradient(45deg, transparent 0 20.2px, rgba(0, 0, 0, .22) 20.2px 21.2px),
    repeating-linear-gradient(-45deg, transparent 0 20.2px, rgba(0, 0, 0, .22) 20.2px 21.2px),
    radial-gradient(120% 70% at 50% 40%, rgba(255, 120, 110, .10), transparent 70%),
    linear-gradient(180deg, #4a1019, #2a070d 62%, #16040a); }
html.ds #device > .nh-doors > .nh-door-l { left: 0; }
html.ds #device > .nh-doors > .nh-door-r { right: 0; }
/* the brass studs round the edge */
html.ds #device > .nh-doors > .nh-door::before { content: ""; position: absolute; inset: 10px; border-radius: 4px; pointer-events: none;
  background:
    radial-gradient(circle, #e9c77f 0 1.4px, #8a6326 2px, transparent 2.6px) 0 0 / 12px 12px repeat-x,
    radial-gradient(circle, #e9c77f 0 1.4px, #8a6326 2px, transparent 2.6px) 0 100% / 12px 12px repeat-x,
    radial-gradient(circle, #e9c77f 0 1.4px, #8a6326 2px, transparent 2.6px) 0 0 / 12px 12px repeat-y,
    radial-gradient(circle, #e9c77f 0 1.4px, #8a6326 2px, transparent 2.6px) 100% 0 / 12px 12px repeat-y; }
/* the light at the seam */
html.ds #device > .nh-doors > .nh-door::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(255, 214, 150, .1), rgba(255, 220, 160, .7) 50%, rgba(255, 214, 150, .1)); }
html.ds #device > .nh-doors > .nh-door-l::after { right: 0; }
html.ds #device > .nh-doors > .nh-door-r::after { left: 0; }
/* a round window, the warm screen light behind it */
html.ds #device > .nh-doors .nh-port { position: absolute; top: 24%; width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, rgba(255, 236, 196, .9), rgba(255, 176, 92, .55) 38%, rgba(70, 24, 10, .9) 72%, rgba(0, 0, 0, .6) 100%);
  border: 4px solid #b38a45; border-bottom-color: #7a5a26; }
html.ds #device > .nh-doors > .nh-door-l .nh-port { right: 26%; }
html.ds #device > .nh-doors > .nh-door-r .nh-port { left: 26%; }
/* a brass push plate by the seam */
html.ds #device > .nh-doors .nh-plate { position: absolute; top: 46%; width: 22px; height: 116px; border-radius: 6px;
  background: linear-gradient(90deg, #6e4c1c, #e8c784 34%, #fbe7b4 48%, #c49a52 66%, #6e4c1c);
  border-bottom: 3px solid rgba(0, 0, 0, .45); }
html.ds #device > .nh-doors > .nh-door-l .nh-plate { right: 18px; }
html.ds #device > .nh-doors > .nh-door-r .nh-plate { left: 18px; }
/* NOW SHOWING, lit over the seam */
html.ds #device > .nh-doors > .nh-sign { position: absolute; top: max(9%, calc(env(safe-area-inset-top, 0px) + 46px)); left: 50%; transform: translateX(-50%); opacity: 0;
  padding: 10px 18px 9px; border-radius: 6px; white-space: nowrap; text-transform: uppercase; letter-spacing: .28em;
  font: 700 calc(13 * var(--type-unit, 1px)) / 1 var(--font-sans, system-ui, sans-serif); color: #fff3d6;
  background:
    radial-gradient(circle, #ffe6a8 0 1.5px, transparent 2.2px) 4px 0 / 11px 7px repeat-x,
    radial-gradient(circle, #ffe6a8 0 1.5px, transparent 2.2px) 4px 100% / 11px 7px repeat-x,
    linear-gradient(180deg, #1d0a0c, #0d0405);
  border: 1px solid rgba(232, 199, 132, .7); }
/* (17 October 2026) the doors into Commute Corner's games room stand over the room itself (.ccn is z-index 315) */
html.ds #device > .nh-doors.is-over { z-index: 330; }
html.ds:is(.reduce-motion, .mo-low-power) #device > .nh-doors { display: none !important; }

/* ===== prototype-src/discover-glass.css ===== */
/* TRIPTIC discover-glass: Discover, the hovering glass box (the owner, 15 October 2026, 21:55 to 22:14). Script pair:
   discover-glass.js. Record: hub/docs/DISCOVER-2026-10-15.md section 9.

   The owner's page as it was (the header with Find a film and the account button, "WHAT DO YOU FEEL LIKE WATCHING?",
   "Describe it.", the week's searches under the box, Break glass at the foot) with the request box made the page's focal
   point: a thick pane of glass in the middle, with room above and below it, that hovers "like a bee, not dramatically,
   like it's waiting for my input". Everything here applies under `.screen.dg2` (the class the script puts on Discover);
   the older layers that draw the page are overruled with longer selectors, never edited.

   Sections: 1 the field  2 the page  3 the box (the glass)  4 inside the box  5 the hover  6 the light under it
             7 the tap's pulse  8 the week, Try asking for  9 tilt and night  10 Reduce Motion, Low Power, text size.
   Motion: transform, translate, rotate and opacity only, on the motion tokens where a token fits. The hover is Discover's one
   living thing (scripts/motion/living-map.mjs); it rests while the box is being written in, off screen and in the background. */

/* ================================================================== 1. the field: one violet, its light behind the box */
html.ds #device .screen.dg2 { isolation: isolate; }
html.ds #device .screen.dg2 > .dg2-field {
  position: absolute; left: 0; right: 0; top: 0; height: var(--dg2-h, 100%); z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(92% 40% at 50% var(--dg2-cy, 40%), rgb(115 82 214 / .8) 0%, rgb(115 82 214 / .34) 40%, rgb(115 82 214 / 0) 76%),
    radial-gradient(60% 26% at 4% calc(var(--dg2-cy, 40%) + 30%), rgb(78 54 170 / .5) 0%, rgb(78 54 170 / 0) 72%);
  transition: opacity var(--motion-slow) var(--motion-curve);
}
/* two soft pools right behind the pane, so the glass has light to bend */
html.ds #device .screen.dg2 > .dg2-field::before, html.ds #device .screen.dg2 > .dg2-field::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
html.ds #device .screen.dg2 > .dg2-field::before { left: 6%; top: calc(var(--dg2-cy, 40%) - 9%); width: 44%; height: 20%; background: radial-gradient(closest-side, rgb(176 148 255 / .55), rgb(176 148 255 / 0)); }
html.ds #device .screen.dg2 > .dg2-field::after { right: 4%; top: calc(var(--dg2-cy, 40%) + 3%); width: 48%; height: 22%; background: radial-gradient(closest-side, rgb(128 92 238 / .55), rgb(128 92 238 / 0)); }
html.ds #device .screen.dg2 > :not(.dg2-field) { position: relative; z-index: 1; }

/* ================================================================== 2. the page: the box is the focal point, with room around it */
html.ds #device .screen.dg2 > .premium-composer { margin-top: 40px !important; margin-bottom: 36px !important; }
/* Recent and Saved searches live in the Library (the Watchlist room's "Keep a thread"; the owner, 15 October 2026, 20:16). The row
   stays in the page unseen: find-tips.js and ds-first-run.js place things after it. */
html.ds #device .screen.discover-screen > .discover-shortcuts { display: none !important; }
/* the older layers' lights and the thinking-aloud typing (ds-delights-2.js says why) do not draw here */
html.ds #device .screen.dg2 > :is(.premium-discover-ambient, .discover-live-field, .edge-energy) { display: none !important; }
html.ds #device .screen.dg2 .premium-composer > :is(.ds-beam, .dsd-think, .dsd-hand) { display: none !important; }

/* ================================================================== 3. the box: a thick pane of glass */
html.ds #device .screen.dg2 > .premium-composer {
  position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto;
  align-items: start; width: auto !important; min-height: 0 !important; height: auto !important; padding: 0 !important;
  border: 0 !important; border-radius: 34px !important; background: none !important; overflow: visible !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  /* it floats: a tight contact shadow, a long soft one, and the field's own violet thrown under it */
  box-shadow: 0 1px 1px rgb(0 0 0 / .3), 0 6px 12px -4px rgb(0 0 0 / .45), 0 40px 70px -26px rgb(0 0 0 / .85), 0 28px 80px -28px rgb(124 90 240 / .85) !important;
}
/* the pane itself: the blurred, brightened field through it, a sheen from the top, the rim lit from the top left (moved by the
   phone's tilt, section 9), and a second faint rim inside that reads as the glass's thickness */
html.ds #device .screen.dg2 > .premium-composer::before,
html.ds #device .screen.dg2 > .premium-composer.search-glass::before,
html.ds #device .screen.dg2 > .premium-composer.is-empty::before {
  content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important;
  width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; transform: none !important; animation: none !important;
  border-radius: inherit !important; pointer-events: none; -webkit-mask: none !important; mask: none !important;
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .17) 0%, rgb(255 255 255 / .06) 28%, rgb(255 255 255 / .025) 66%, rgb(255 255 255 / .08) 100%) padding-box,
    linear-gradient(rgb(24 17 50 / .4), rgb(24 17 50 / .4)) padding-box,
    linear-gradient(calc(145deg + var(--dg2-tilt-a, 0deg)), rgb(255 255 255 / .95) 0%, rgb(255 255 255 / .4) 12%, rgb(255 255 255 / .12) 34%, rgb(255 255 255 / .05) 62%, rgb(255 255 255 / .18) 86%, rgb(255 255 255 / .5) 100%) border-box !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -1px 0 rgb(255 255 255 / .16), inset 0 -18px 30px -18px rgb(0 0 0 / .5), inset 0 0 0 5px rgb(255 255 255 / .015) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.08) !important; backdrop-filter: blur(30px) saturate(180%) brightness(1.08) !important;
}
html.ds #device .screen.dg2 > .premium-composer::after {
  content: "" !important; display: block !important; position: absolute !important; inset: 6px !important; z-index: 0; border-radius: 28px !important; pointer-events: none;
  width: auto !important; height: auto !important; opacity: 1 !important; transform: none !important; animation: none !important; background: none !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 0 0 1px rgb(255 255 255 / .035) !important;
}
html.ds #device .screen.dg2 > .premium-composer > * { position: relative; z-index: 2; }
html.ds #device .screen.dg2 > .premium-composer:focus-within::before {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .65), inset 0 -1px 0 rgb(255 255 255 / .2), inset 0 -18px 30px -18px rgb(0 0 0 / .5), 0 0 0 4px rgb(150 120 250 / .14), 0 22px 44px -18px rgb(160 130 255 / .7) !important;
}

/* ================================================================== 4. inside the box: the words, × and Save, the mic, the services, Find three */
/* the words: large, and room at the right for the two small circles and at the foot for the mic */
html.ds #device .screen.dg2 .premium-composer > textarea#query {
  grid-area: 1 / 1; display: block !important; box-sizing: border-box; width: 100% !important; height: max(calc(104 * var(--type-unit)), var(--dg2-grow, 0px)) !important; max-height: calc(300 * var(--type-unit)) !important; min-height: 0 !important;
  margin: 0 !important; padding: calc(24 * var(--type-unit)) 104px calc(30 * var(--type-unit)) 22px !important; overflow-y: auto; /* (release polish, 28 October 2026; the owner: "a large blank gap") the resting box is two lines of words and the services row, no more; it still grows with what is typed */
  resize: none; border: 0 !important; outline: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--c-label-1) !important; -webkit-text-fill-color: var(--c-label-1); caret-color: var(--c-seal-hi);
  font: 500 calc(19 * var(--type-unit)) / 1.36 var(--font-ui) !important; letter-spacing: -0.005em !important; opacity: 1 !important;
}
html.ds #device .screen.dg2 .premium-composer > textarea#query::placeholder { color: rgb(245 244 247 / .6); -webkit-text-fill-color: rgb(245 244 247 / .6); opacity: 1; }
/* no "YOUR REQUEST", no counter (it comes back near the limit), no guidance line (it comes back only over the limit) */
html.ds #device .screen.dg2 .composer-meta {
  grid-area: 1 / 1; align-self: start; justify-self: end; display: flex !important; align-items: center; margin: 0 !important; padding: 18px 16px 0 0 !important; gap: 6px; pointer-events: none; z-index: 3 !important;
}
html.ds #device .screen.dg2 .composer-meta .request-label { display: none !important; }
html.ds #device .screen.dg2:not(.dg2-near) .composer-meta .request-count:not(.is-at-limit):not(.is-over-limit) { display: none !important; }
html.ds #device .screen.dg2 .composer-meta .request-count { color: var(--c-label-2); font: 500 calc(12 * var(--type-unit)) / 1 var(--font-ui); padding-right: 4px; }
/* (final review R1-12, 14 November 2026) a request far over the limit (a paste of 2,800 characters): the counter has its own line
   under Save and Clear, in the column the words already leave free (the field's right padding), so "2800 / 500" never prints over
   the words; and the words that scroll up into the field's top padding fade out before the glass's top edge instead of being
   drawn above it (the first line at rest starts below the fade, so nothing changes for a short request). */
html.ds #device .screen.dg2:not(.dsp-discover-wide) .composer-meta-actions { flex-wrap: wrap; justify-content: flex-end; width: 82px; row-gap: 8px; }   /* Save and Clear side by side (34 + 6 + 34, and room) */
html.ds #device .screen.dg2:not(.dsp-discover-wide) .composer-meta .request-count { order: 2; flex: 0 0 100%; text-align: right; white-space: nowrap; padding-right: 0; }
html.ds #device .screen.dg2 .premium-composer > textarea#query { -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 6px, #000 calc(20 * var(--type-unit))); mask-image: linear-gradient(to bottom, transparent 0, transparent 6px, #000 calc(20 * var(--type-unit))); }
html.ds #device .screen.dg2 .composer-meta-actions { display: flex !important; align-items: center; gap: 6px; pointer-events: none; }
html.ds #device .screen.dg2 .composer-meta-actions > * { pointer-events: auto; }
/* Save (a bookmark) and Clear (a cross): small glass circles, only while there are words */
html.ds #device .screen.dg2 .composer-meta :is(.query-save, .query-clear) {
  position: relative; display: grid !important; place-items: center; width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important;
  border: 0 !important; border-radius: 50% !important; font-size: 0 !important; color: transparent !important; overflow: hidden;
  background: linear-gradient(180deg, rgb(255 255 255 / .2), rgb(255 255 255 / .05)) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 1px 2px rgb(0 0 0 / .25) !important;
}
html.ds #device .screen.dg2 .composer-meta :is(.query-save, .query-clear)[hidden] { display: none !important; }
html.ds #device .screen.dg2 .composer-meta :is(.query-save, .query-clear)::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px; background: #e6deff;
  -webkit-mask: var(--dg2-icon) center / contain no-repeat; mask: var(--dg2-icon) center / contain no-repeat;
}
html.ds #device .screen.dg2 .composer-meta .query-save { --dg2-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4-6 4z'/%3E%3C/svg%3E"); }
html.ds #device .screen.dg2 .composer-meta .query-save.is-saved { --dg2-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4-6 4z'/%3E%3C/svg%3E"); }
html.ds #device .screen.dg2 .composer-meta .query-save.is-saved::before { background: var(--c-seal-hi); }
html.ds #device .screen.dg2 .composer-meta .query-clear { --dg2-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
html.ds #device .screen.dg2 .composer-meta :is(.query-save, .query-clear):active { transform: scale(.92); }
/* the footer's own boxes dissolve: the mic sits in the glass, Find three under the services */
html.ds #device .screen.dg2 .premium-composer :is(.composer-footer, .composer-actions) { display: contents !important; }
html.ds #device .screen.dg2 .premium-composer .composer-guidance { display: none !important; }
html.ds #device .screen.dg2 .premium-composer.is-over-limit .composer-guidance {
  display: block !important; grid-row: 4; grid-column: 1; margin: 0 20px 16px; text-align: center; color: var(--c-caution); font: 500 var(--fs-footnote) / var(--lh-footnote) var(--font-ui);
}
/* the mic: inside the bottom right of the words */
html.ds #device .screen.dg2 .premium-composer .voice-control {
  grid-area: 1 / 1; align-self: end; justify-self: end; position: relative !important; z-index: 3 !important; display: grid !important; place-items: center;
  width: 44px !important; height: 44px !important; min-width: 44px; min-height: 44px; margin: 0 12px 6px 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
  color: #e2dbff !important; background: transparent !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent;
}
html.ds #device .screen.dg2 .premium-composer .voice-control svg { width: 21px !important; height: 21px !important; }
html.ds #device .screen.dg2 .premium-composer .voice-control:active { background: rgb(255 255 255 / .1) !important; }
html.ds #device .screen.dg2 .premium-composer .voice-control.is-listening { color: var(--c-label-1) !important; background: rgb(255 255 255 / .14) !important; }
/* On my services: one slim line under a hairline, no box behind it */
html.ds #device .screen.dg2 .premium-composer :is(.oms-row, .ds-fr-oms) {
  grid-row: 2; grid-column: 1; margin: 0 18px !important; padding: 6px 0 0 !important; width: auto !important; min-height: 44px; border: 0 !important; border-top: 1px solid rgb(255 255 255 / .1) !important;
  border-radius: 0 !important; background: none !important; box-shadow: none !important;
}
html.ds #device .screen.dg2 .premium-composer .oms-row.is-on { background: none !important; box-shadow: none !important; }
html.ds #device .screen.dg2 .premium-composer .oms-row .oms-copy { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; }
/* one line, until the text is too large for it: then a second line, never an ellipsis */
html.ds #device .screen.dg2 .premium-composer .oms-row .oms-copy > b { white-space: normal; }
html.ds #device .screen.dg2 .premium-composer .oms-row .oms-copy > b { font: 500 calc(14 * var(--type-unit)) / 1.2 var(--font-ui); letter-spacing: 0; color: #d9d0fa; }
html.ds #device .screen.dg2 .premium-composer .oms-row .oms-copy > small { font: 400 calc(12.5 * var(--type-unit)) / 1.2 var(--font-ui); color: var(--c-label-3); }
html.ds #device .screen.dg2 .premium-composer .oms-row .oms-glyph { background: none !important; box-shadow: none !important; color: var(--c-label-3); }
/* Find three: the full width of the box, under the services */
html.ds #device .screen.dg2 .premium-composer .query-submit.query-submit-plain {
  grid-row: 3; grid-column: 1; justify-self: stretch; width: auto !important; height: calc(54 * var(--type-unit)) !important; min-height: 54px !important; margin: 10px 16px 16px !important; padding: 0 24px !important; flex: none !important;
  border-radius: 999px !important;
}
/* with words it is ds-look.css's own violet key and its band of light, as on the owner's page */
/* while there are no words, Find three keeps ds-look.css's own grey glass (and its still, brighter edge under Reduce Motion) */
html.ds #device .screen.dg2 .premium-composer .query-submit.query-submit-plain > span:not(.ds-look-sheen) { font-size: calc(17.5 * var(--type-unit)) !important; }

/* ================================================================== 5. the hover: like a bee, waiting for you
   One slow, even rise and fall (the owner, 16 October 2026: "up then down", a little further each way and slower): from
   2.5 points down to 4.5 points up and back in 3.4 s, on the breathing curve; no sway, no second step. It holds where it is while the box is being written in, and rests off screen (motion-living
   .mo-living) and in the background. */
@keyframes dg2-bob {
  0%, 100% { translate: 0 2.5px; }
  50% { translate: 0 -4.5px; }
}
html.ds #device .screen.dg2 > .premium-composer.dg2-hover { animation: dg2-bob 3.4s var(--motion-breathe) infinite; will-change: translate; }
html.ds #device .screen.dg2 > .premium-composer.dg2-hover:focus-within,
html.ds #device .screen.dg2.dg2-launching > .premium-composer.dg2-hover { animation-play-state: paused; }

/* ================================================================== 6. the light under the box: it breathes with the hover */
html.ds #device .screen.dg2 > .premium-composer > .dg2-glow {
  position: absolute !important; left: 8%; right: 8%; bottom: -34px; height: 46px; z-index: -1 !important; pointer-events: none;
}
html.ds #device .screen.dg2 > .premium-composer > .dg2-glow::before {
  content: ""; position: absolute; inset: -8px -10%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgb(156 124 255 / .5), rgb(156 124 255 / .18) 55%, rgb(156 124 255 / 0) 100%);
  opacity: .75; transition: opacity var(--motion-slow) var(--motion-curve);
}
html.ds #device .screen.dg2.dg2-has-text > .premium-composer > .dg2-glow::before { opacity: 1; }
@keyframes dg2-glow { 0%, 100% { scale: 1.03 1.04; opacity: .82; } 50% { scale: .93 .9; opacity: .6; } }
html.ds #device .screen.dg2:not(.dg2-has-text) > .premium-composer > .dg2-glow.dg2-hover::before { animation: dg2-glow 3.4s var(--motion-breathe) infinite; animation-delay: var(--dg2-phase, 0ms); }
html.ds #device .screen.dg2 > .premium-composer:focus-within > .dg2-glow.dg2-hover::before { animation-play-state: paused; }

/* ================================================================== 7. the tap's pulse: touched, one band of light passes across */
html.ds #device .screen.dg2 > .premium-composer > .dg2-sheen {
  position: absolute !important; inset: 0; z-index: 1 !important; border-radius: inherit; overflow: hidden; pointer-events: none;
}
html.ds #device .screen.dg2 > .premium-composer > .dg2-sheen::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 34%; opacity: 0;
  background: linear-gradient(100deg, rgb(255 255 255 / 0), rgb(220 205 255 / .16) 40%, rgb(255 255 255 / .28) 50%, rgb(220 205 255 / .16) 60%, rgb(255 255 255 / 0));
  transform: translateX(0) skewX(-14deg);
}
@keyframes dg2-pass { 0% { opacity: 0; transform: translateX(0) skewX(-14deg); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(520%) skewX(-14deg); } }
html.ds #device .screen.dg2 > .premium-composer > .dg2-sheen.is-passing::before { animation: dg2-pass var(--motion-ceremony) var(--motion-curve) 1 both; }

/* ================================================================== 8. the week, and Try asking for, at half size */
html.ds #device .screen.dg2 > .tm-allowance { margin-top: 2px !important; }
html.ds #device .screen.dg2 > .discover-inspiration { margin-top: 18px !important; }
html.ds #device .screen.dg2 > .discover-inspiration > header { min-height: 0 !important; margin: 0 0 10px !important; padding: 0 !important; }
html.ds #device .screen.dg2 > .discover-inspiration > header h2 {
  margin: 0 !important; color: var(--c-label-2) !important; font: 600 var(--fs-caption-1) / var(--lh-caption-1) var(--font-ui) !important; letter-spacing: var(--tr-eyebrow) !important; text-transform: uppercase;
}
/* Explore collections is not on Discover (the owner, 15 October 2026) */
html.ds #device .screen.dg2 > .discover-inspiration > header > button { display: none !important; }
html.ds #device .screen.dg2 > .discover-inspiration .prompt-grid.ds-carousel { gap: 10px !important; }
html.ds #device .screen.dg2 > .discover-inspiration .prompt-grid.ds-carousel .prompt-card {
  flex: 0 0 calc(150 * var(--type-unit)) !important; width: calc(150 * var(--type-unit)) !important; height: calc(112 * var(--type-unit)) !important; min-height: 0 !important;
  border-radius: 20px !important; overflow: hidden !important;
}
html.ds #device .screen.dg2 > .discover-inspiration .prompt-card .prompt-art { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
html.ds #device .screen.dg2 > .discover-inspiration .prompt-card .prompt-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
html.ds #device .screen.dg2 > .discover-inspiration .prompt-card .prompt-copy {
  position: absolute !important; left: 0; right: 0; bottom: 0 !important; top: auto !important; min-height: 0 !important; margin: 0 !important; padding: 26px 11px 9px !important;
  background: linear-gradient(180deg, rgb(5 5 10 / 0), rgb(5 5 10 / .86) 60%) !important;
}
/* (followups, 21 October 2026) four lines, as written: frontend-completion.css's older clamp of three (!important) had been
   cutting a long request ("Funny, honest and still becoming yourself") to an ellipsis on the tile */
html.ds #device .screen.dg2 > .discover-inspiration .prompt-card .prompt-title {
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 4 !important; line-clamp: 4 !important; overflow: hidden !important; max-height: none !important; height: auto !important;
  font: 600 calc(12.5 * var(--type-unit)) / calc(15.5 * var(--type-unit)) var(--font-ui) !important; letter-spacing: 0 !important; color: #fff !important;
}
/* "Use this request": still read out, not drawn (the tile itself is the action); kept inside the tile, whole */
html.ds #device .screen.dg2 > .discover-inspiration .prompt-card .prompt-copy b {
  position: absolute; left: 11px; bottom: 2px; max-width: calc(100% - 22px); height: 12px; margin: 0; padding: 0 !important; overflow: hidden; opacity: 0; pointer-events: none;
  font: 500 10px / 12px var(--font-ui) !important; letter-spacing: 0 !important; white-space: nowrap;
}

/* ================================================================== 9. tilt and night */
/* the phone's tilt (discover-glass.js, only where the film cards were allowed to use it): the rim's light travels a few
   degrees, and the pane shifts a point or two against the field */
html.ds #device .screen.dg2 > .premium-composer { transform: translate3d(calc(var(--dg2-tx, 0) * 1px), calc(var(--dg2-ty, 0) * 1px), 0); transition: transform var(--motion-slow) var(--motion-curve); }
/* after ten at night until five: the same violet, a shade deeper and quieter, like a cinema with the lights down */
html.ds #device .screen.dg2.dg2-late > .dg2-field { opacity: .78; }
html.ds #device .screen.dg2.dg2-late { --dg2-cy: 42%; }

/* ================================================================== 9b. the launch: the box opens out to fill the screen, then clears
   away and leaves the wait whole (16 October 2026); on a complete three, three panes of light land on the cards' places
   (discover-glass.js). The opening sheet is the screen's size, cut to the box's shape (clip-path), so nothing stretches; no
   blur while it moves: the box's own violet glass, deepening to solid as it fills. It stands just above the wait (z 140) and
   never takes a touch. */
html.ds #device > .dg2-flight {
  position: absolute; z-index: 141; box-sizing: border-box; pointer-events: none; transform-origin: 0 0; border: 0; border-radius: 0;
  will-change: clip-path, opacity;
}
html.ds #device > .dg2-flight > .dg2-flight-fill {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 60% at 50% 42%, rgb(124 90 240 / .38), rgb(124 90 240 / 0) 70%),
    linear-gradient(180deg, rgb(58 44 112), rgb(30 22 62) 45%, rgb(16 12 32));
}
html.ds #device > .dg2-flight.is-frame > .dg2-flight-fill { display: none; }
/* (SEND, 27 October 2026) the box itself carried into the wait: a still copy of the box (its glass, its words, its controls),
   not a page (the copy's wrapper only lends the box's own rules their ".screen.dg2 >" ancestry), never blurred while it
   moves, never touched; and the wait's quoted request held back while the box still carries the words */
html.ds #device > .dg2-flight > .dg2-ghost {
  position: absolute !important; inset: 0 !important; display: block !important; width: auto !important; height: auto !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; overflow: visible !important;
  opacity: 1 !important; visibility: visible !important; transform: none !important; animation: none !important; transition-property: none !important; pointer-events: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important; contain: none !important;
}
html.ds #device > .dg2-flight > .dg2-ghost::before, html.ds #device > .dg2-flight > .dg2-ghost::after { display: none !important; }
html.ds #device > .dg2-flight > .dg2-ghost > .premium-composer { position: absolute !important; margin: 0 !important; animation: none !important; transition-property: none !important; will-change: transform, opacity; }
html.ds #device > .dg2-flight > .dg2-ghost > .premium-composer::before {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .65), inset 0 -1px 0 rgb(255 255 255 / .2), inset 0 -18px 30px -18px rgb(0 0 0 / .5), 0 0 0 4px rgb(150 120 250 / .14), 0 22px 44px -18px rgb(160 130 255 / .7) !important;
}
html.ds #device > .dg2-flight > .dg2-ghost > .premium-composer * { animation: none !important; transition-property: none !important; }
html.ds #device > .dg2-flight > .dg2-ghost .dg2-ghost-words { position: relative; z-index: 2; display: block; margin: 0; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; -webkit-text-fill-color: currentColor; }
html.ds #device > .dg2-flight > .dg2-ghost .dg2-ghost-words > span { display: block; }
/* the house goes dark at the press, in one frame: Discover is taken out of the picture at once while the box's copy carries
   the words (the journey's own rule keeps it drawn for .4s, signature-reveal.css; through those frames the keyboard's leaving
   re-laid it: the heading came back and the box moved down under its copy, SE 320 most of all) */
html.ds #device > .screen.dg2.dg2-launching.critical-engaged,
html.ds #device > .screen.dg2.dg2-launching.critical-engaged > :not(.trip-critical-layer):not(.critical-film-layer):not(.critical-poster-flight),
html.ds #device > .screen.dg2.dg2-launching.critical-engaged::before,
html.ds #device > .screen.dg2.dg2-launching.critical-engaged::after { visibility: hidden !important; transition-property: none !important; }
html.ds #device .trip-critical-layer.dg2-carry > .sp-words { opacity: 0 !important; transition-property: none !important; }

/* the three panes of light that land on the cards: only the rim (a masked ring, so the inside is truly clear and
   the wait shows through untouched), a faint violet light inside the edge, and its glow */
html.ds #device > .dg2-flight.is-frame { border: 0; border-radius: 38px; background: none; will-change: transform, opacity; box-shadow: inset 0 0 40px -14px rgb(150 120 250 / .4), 0 30px 80px -30px rgb(124 90 240 / .55); }
html.ds #device > .dg2-flight.is-frame::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(145deg, rgb(255 255 255 / .9), rgb(255 255 255 / .3) 14%, rgb(255 255 255 / .08) 40%, rgb(255 255 255 / .05) 64%, rgb(255 255 255 / .2) 88%, rgb(255 255 255 / .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html.ds #device > .dg2-flight.is-part { border-radius: 22px; box-shadow: inset 0 0 26px -10px rgb(150 120 250 / .45), 0 18px 30px -14px rgb(150 120 250 / .5); }

/* ================================================================== 10. Reduce Motion, Low Power, text size, solid glass */
html.ds:is(.reduce-motion, .mo-low-power) #device .screen.dg2 > .premium-composer.dg2-hover,
html.ds:is(.reduce-motion, .mo-low-power) #device .screen.dg2 > .premium-composer > .dg2-glow.dg2-hover::before { animation: none !important; }
html.ds.reduce-motion #device .screen.dg2 > .premium-composer > .dg2-sheen.is-passing::before { animation: none !important; }
/* (13 November 2026) the panel colour is a one-colour gradient: a plain colour may stand only in the last background layer, and
   "rgb(30 22 58) padding-box, …" was dropped whole, leaving the box see-through once its blur was gone */
html.ds.reduce-transparency #device .screen.dg2 > .premium-composer::before, html.ds #device.manual-solid .screen.dg2 > .premium-composer::before {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: linear-gradient(rgb(30 22 58), rgb(30 22 58)) padding-box, linear-gradient(145deg, rgb(255 255 255 / .6), rgb(255 255 255 / .12)) border-box !important;
}
html.ds[data-text-size="largest"] #device .screen.dg2.dg2-has-text .premium-composer > textarea#query { padding-right: 22px !important; padding-top: calc(62 * var(--type-unit)) !important; }
/* (final review R1-12) at the largest text the words run under Save and Clear's row (the field's top padding); words scrolled up into
   it fade out before that row and the counter under it */
html.ds[data-text-size="largest"] #device .screen.dg2.dg2-has-text .premium-composer > textarea#query { -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(57 * var(--type-unit)), #000 calc(63 * var(--type-unit))); mask-image: linear-gradient(to bottom, transparent 0, transparent calc(57 * var(--type-unit)), #000 calc(63 * var(--type-unit))); }

/* (17 October 2026, lane ART-C; hub/docs/SCENE-ART-2026-10-17.md) a request with a painting of its own (runtime-base.js
   discoverArtMarkup): the owner's object on the stage's dark, a still layer of its own over the line drawing it replaces; the
   drawing shows only while the painting is coming, or if it fails. */
html.ds #device .prompt-art.prompt-scene { z-index: 0; isolation: isolate; overflow: hidden; background: radial-gradient(120% 90% at 50% 30%, var(--c-stage-raised), var(--c-stage)); }
html.ds #device .prompt-art.prompt-scene > .own-art-panel { position: absolute; inset: 0; width: 100%; height: 100%; }
html.ds #device .prompt-art.prompt-scene > .prompt-scene-layer { position: absolute; inset: 0; z-index: 1; opacity: 0; }
html.ds #device .prompt-art.prompt-scene[data-art="ready"] > .prompt-scene-layer { opacity: 1; }
html.ds #device .prompt-art.prompt-scene[data-art="ready"] > .own-art-panel { visibility: hidden; }
html.ds #device .prompt-art.prompt-scene .prompt-scene-img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 22% !important; }

/* ===== prototype-src/card-art.css ===== */
/* TRIPTIC card art (11 November 2026; prototype-src/card-art.js): the owner's pictures on the "Try asking for" cards, behind the
   preview flag `card-art` (OFF by default). EVERY rule here hangs from html:is(.pv-card-art, .pv-all), and every rule names
   .prompt-card-art, a class only the flag's markup carries: with the flag off nothing here matches anything.
   The pictures are painted dark toward their foot, so the label's shade is lighter than the drawn cards' (which lay a near
   black over a bright flat colour): it only has to steady white type over the darkest third, not darken the art a second time.
   Still: nothing here moves (the layer is the scene art's .art-layer, so feel-wire's tilt treats it as it treats the six paintings). */

/* the picture fills the card; its crop is made for the card's shape (4:3), so the position only matters where a layout
   stretches the card (a wider card shows the middle band of the crop, a little above centre, where the subject is) */
html.ds:is(.pv-card-art, .pv-all) #device .prompt-art.prompt-card-art { background: var(--c-stage); }
html.ds:is(.pv-card-art, .pv-all) #device .prompt-art.prompt-card-art .prompt-card-img {
  display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: var(--card-art-pos, 50% 30%) !important;
}
/* a card edge one step lighter than the page, so a dark picture (a porthole in the dark, a telephone in a black room) keeps
   its outline on the dark page; drawn inside the card, over the picture, so nothing outside it moves */
html.ds:is(.pv-card-art, .pv-all) #device .prompt-art.prompt-card-art::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), inset 0 1px 0 rgb(255 255 255 / .1);
}

/* THE WIDE CROP, for a landscape card (about 370 x 215 pt; the opened Duo's later layout): any ancestor of the cards with
   data-card-art-shape="wide" shows the wide crop (the layer's --card-art-wide, an image-set) in place of the card crop.
   Only then is it fetched; the card crop's <img> is not shown (and, lazy, not fetched). --card-art-pos-wide moves it. */
html.ds:is(.pv-card-art, .pv-all) #device [data-card-art-shape="wide"] .prompt-card-art > .prompt-card-art-layer {
  opacity: 1; background: var(--card-art-wide) var(--card-art-pos-wide, 50% 30%) / cover no-repeat;
}
html.ds:is(.pv-card-art, .pv-all) #device [data-card-art-shape="wide"] .prompt-card-art > .prompt-card-art-layer > .prompt-card-img { display: none !important; }
html.ds:is(.pv-card-art, .pv-all) #device [data-card-art-shape="wide"] .prompt-card-art > .own-art-panel { visibility: hidden; }

/* THE LABEL on Discover's cards (discover-glass.css section 8 sets it for every card: 12.5 / 15.5 pt, 11 pt in from each side,
   up to four lines, on a shade to 86% black). Over a picture: two lines where the words honestly fit (12 pt, the system's
   caption size, the same weight, a hair tighter, the measure 9 pt in), three at most (never cut: a longer label is listed for
   the owner's wording, tests/card-art-browser.test.mjs THREE_LINES), on a shade that is clear above the words and at most a
   little over half black under them, and a soft shadow under the letters. */
html.ds:is(.pv-card-art, .pv-all) #device .screen.dg2 > .discover-inspiration .prompt-card .prompt-art.prompt-card-art ~ .prompt-copy {
  padding: 22px 9px 9px !important;
  background: linear-gradient(180deg, rgb(5 5 10 / 0), rgb(5 5 10 / .34) 42%, rgb(5 5 10 / .56)) !important;
}
html.ds:is(.pv-card-art, .pv-all) #device .screen.dg2 > .discover-inspiration .prompt-card .prompt-art.prompt-card-art ~ .prompt-copy .prompt-title {
  -webkit-line-clamp: 3 !important; line-clamp: 3 !important; text-wrap: balance;
  font: 600 calc(12 * var(--type-unit)) / calc(15 * var(--type-unit)) var(--font-ui) !important; letter-spacing: -.0125em !important;
  text-shadow: 0 1px 2px rgb(0 0 0 / .6), 0 0 8px rgb(0 0 0 / .35) !important;
}
html.ds:is(.pv-card-art, .pv-all) #device .screen.dg2 > .discover-inspiration .prompt-card .prompt-art.prompt-card-art ~ .prompt-copy b { left: 9px; max-width: calc(100% - 18px); }

/* ===== prototype-src/emergency-glass.css ===== */
/* TRIPTIC emergency-glass: "Break glass in case of emergency" (lane GLASS, 11-13 October 2026). Script pair:
   emergency-glass.js. Record: hub/docs/GLASS-2026-10-13.md. TRIPTIC's own drawing of a red call point, in CSS: on
   Discover a small one (a lacquered red plate, a little window with a red button behind glass, the signage beside it);
   the panel itself (opened over Discover the first time) a full-size one with four screws, a white-framed window, a dark
   well with a red mushroom button, and a pane of glass over it. Motion: transform and opacity only; durations and curves
   are the motion tokens. No loop (Discover's one living thing stays the composer's caret). */
html.ds #device :is(.eg, .eg-stage) {
  --eg-red-hi: #ff6a58; --eg-red: #e0251b; --eg-red-mid: #b4130f; --eg-red-lo: #6f0909; --eg-ink: #fff5ec; --eg-frame: #efe9e1;
}
html.ds #device :is(.eg, .eg-stage, .eg-pick) .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------------------------------------ the call point (Discover) */
/* no bottom margin: Discover's own foot padding already clears the tab bar, so the page ends on the call point exactly as it
   ended on the cards (JOIN, 13 October 2026: 30px here left a 92pt hole above the bar on a 375 x 667 iPhone) */
/* (release polish, 28 October 2026; the owner) the call point and its caption stand on the page's own content edges, as the request
   box and the "Try asking for" cards do (it was inset 16pt more and held to 340pt) */
html.ds #device .eg { position: relative; display: grid; justify-items: stretch; gap: 10px; margin: 14px 0 0; padding: 0; }
html.ds #device .eg-call {
  position: relative; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px;
  width: 100%; min-height: 72px; margin: 0; padding: 9px 30px 9px 9px; border: 0; border-radius: 16px; isolation: isolate;
  color: var(--eg-ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background:
    radial-gradient(120% 90% at 18% -20%, color-mix(in srgb, var(--eg-red-hi) 80%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--eg-red) 0%, var(--eg-red-mid) 62%, var(--eg-red-lo) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .34), inset 0 -2px 0 rgb(0 0 0 / .3), inset 0 0 0 1px rgb(0 0 0 / .3),
    0 2px 0 #4e0505, 0 14px 30px -14px rgb(255 50 36 / .45), 0 8px 18px rgb(0 0 0 / .4);
  transition: transform var(--motion-press) var(--motion-curve);
}
html.ds #device .eg-call:active { transform: scale(.985); }
html.ds #device .eg-call:focus-visible { outline: 2px solid var(--eg-ink); outline-offset: 3px; }
html.ds #device .eg-call-window {
  position: relative; display: block; width: 54px; height: 54px; border-radius: 10px;
  background: linear-gradient(180deg, #fbf8f3, var(--eg-frame) 60%, #d9d1c7); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .22), 0 1px 0 rgb(255 255 255 / .25);
}
html.ds #device .eg-call-well { position: absolute; inset: 5px; display: grid; place-items: center; border-radius: 6px; overflow: hidden; background: radial-gradient(circle at 50% 46%, #3d0f0c 0%, #1a0605 62%, #0d0302 100%); box-shadow: inset 0 4px 9px rgb(0 0 0 / .75); }
html.ds #device .eg-call-cap {
  display: block; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #ffd2c8 0 6%, #ff6a56 16%, #f2231a 38%, #b20d09 72%, #680404 100%);
  box-shadow: 0 0 0 3px #111, 0 3px 0 3px #000, 0 5px 8px rgb(0 0 0 / .6);
  transition: transform var(--motion-press) var(--motion-curve);
}
html.ds #device .eg-call.is-pressed .eg-call-cap, html.ds #device .eg[data-glass="spent"] .eg-call-cap { transform: translateY(2px) scale(.94); }
html.ds #device .eg[data-glass="spent"] .eg-call-cap { background: radial-gradient(circle at 36% 28%, #e0a69c 0 5%, #c4544a 14%, #9e1c16 40%, #6a0907 75%, #3d0202 100%); }
html.ds #device .eg-call-pane {
  position: absolute; inset: 5px; overflow: hidden; border-radius: 6px; pointer-events: none;
  background: linear-gradient(118deg, rgb(255 255 255 / .3) 0%, rgb(255 255 255 / .06) 30%, transparent 46%, rgb(255 255 255 / .14) 60%, transparent 70%), rgb(196 222 255 / .08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5);
}
html.ds #device .eg-call-pane .eg-sheen { position: absolute; top: -40%; bottom: -40%; left: 40%; width: 22%; rotate: 24deg; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .32), transparent); }
html.ds #device .eg-call-cracks { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); overflow: visible; pointer-events: none; opacity: 0; fill: none; stroke: rgb(255 255 255 / .7); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
/* broken: the pane gone, a few cracks left round the frame; spent: the same, the button in */
html.ds #device .eg:not([data-glass="intact"]) .eg-call-pane { opacity: 0; }
html.ds #device .eg:not([data-glass="intact"]) .eg-call-cracks { opacity: .55; }
html.ds #device .eg[data-glass="spent"] .eg-call { filter: saturate(.55) brightness(.82); cursor: default; }
html.ds #device .eg-call-words { display: grid; gap: 3px; min-width: 0; font-family: var(--font-ui); text-transform: uppercase; text-shadow: 0 1px 0 rgb(0 0 0 / .35); }
html.ds #device .eg-call-words b { font: 900 var(--fs-headline)/1.05 var(--font-ui); letter-spacing: .16em; }
html.ds #device .eg-call-words span { font: 700 var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: .2em; opacity: .9; }
html.ds #device .eg-screw { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fbf6f0, #a49c95 70%, #6c645e); box-shadow: 0 1px 0 rgb(0 0 0 / .45), inset 0 0 0 .5px rgb(0 0 0 / .35); }
html.ds #device .eg-screw::after { content: ""; position: absolute; left: 1.5px; right: 1.5px; top: 3.5px; height: 1px; background: rgb(60 50 45 / .7); rotate: 35deg; }
html.ds #device .eg-call .eg-screw-tr { top: 9px; right: 10px; } html.ds #device .eg-call .eg-screw-br { bottom: 9px; right: 10px; }
html.ds #device .eg-foot { width: 100%; }
html.ds #device .eg-note { margin: 0; text-align: center; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); text-wrap: balance; }
html.ds #device .eg-spoolie { display: flex; align-items: center; gap: 12px; text-align: left; }
html.ds #device .eg-spoolie-art { flex: 0 0 auto; display: grid; place-items: center; width: 52px; }
html.ds #device .eg-spoolie.is-compact .eg-spoolie-art { width: 40px; }
html.ds #device .eg-spoolie-art > * { max-width: 100%; }
html.ds #device .eg-spoolie p { margin: 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-1); }
html.ds #device .eg-spoolie.is-compact p { font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); }
html.ds #device .eg-spoolie small { display: block; margin-top: 2px; font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); color: var(--c-label-3); }
/* iPhone Duo, inner display: the call point and its words keep to the left leaf, clear of the fold */
html.ds #device .eg.is-leafed { justify-items: start; }
html.ds #device .eg.is-leafed :is(.eg-call, .eg-foot) { width: min(340px, var(--eg-leaf-w)); }

/* ------------------------------------------------------------------------------------------------ the panel (over Discover) */
html.ds #device .eg-stage { position: absolute; inset: 0; z-index: 95; display: grid; place-items: center; padding: max(56px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); overscroll-behavior: contain; }
html.ds #device .eg-stage-dim {
  position: absolute; inset: 0;
  background: radial-gradient(90% 60% at 50% 45%, rgb(80 6 4 / .5), transparent 70%), color-mix(in srgb, var(--c-stage) 86%, transparent);
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
}
html.ds #device .eg-stage-body { position: relative; display: grid; justify-items: center; gap: 18px; width: min(100%, 360px); max-height: 100%; overflow-y: auto; }
html.ds #device .eg-stage-note { margin: 0; max-width: 32ch; text-align: center; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); text-wrap: balance; }
html.ds #device .eg-stage-note .eg-spoolie { text-align: left; }
html.ds #device .eg-box {
  position: relative; box-sizing: border-box; width: 100%; padding: 16px 20px 14px; border-radius: 22px; isolation: isolate;
  background:
    radial-gradient(120% 70% at 28% -10%, color-mix(in srgb, var(--eg-red-hi) 85%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, var(--eg-red) 0%, var(--eg-red-mid) 58%, var(--eg-red-lo) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .38), inset 0 -3px 0 rgb(0 0 0 / .32), inset 0 0 0 1px rgb(0 0 0 / .3),
    0 3px 0 #4e0505, 0 26px 60px -18px rgb(255 50 36 / .6), 0 14px 30px rgb(0 0 0 / .5);
}
html.ds #device .eg-box::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: .5;
  background: linear-gradient(100deg, rgb(255 255 255 / .12) 0 6%, transparent 18% 82%, rgb(0 0 0 / .18) 100%), repeating-linear-gradient(0deg, rgb(0 0 0 / .03) 0 1px, transparent 1px 3px);
}
html.ds #device .eg-box .eg-screw-tl { top: 10px; left: 10px; } html.ds #device .eg-box .eg-screw-tr { top: 10px; right: 10px; }
html.ds #device .eg-box .eg-screw-bl { bottom: 10px; left: 10px; } html.ds #device .eg-box .eg-screw-br { bottom: 10px; right: 10px; }
html.ds #device .eg-sign { margin: 0; color: var(--eg-ink); text-align: center; text-transform: uppercase; text-shadow: 0 1px 0 rgb(0 0 0 / .35); font-family: var(--font-ui); }
html.ds #device .eg-sign-top { font: 900 var(--fs-title-3)/1.1 var(--font-ui); letter-spacing: .2em; padding-left: .2em; }
html.ds #device .eg-sign-bottom { font: 800 var(--fs-footnote)/1.2 var(--font-ui); letter-spacing: .28em; padding-left: .28em; }
html.ds #device .eg-window {
  position: relative; height: 170px; margin: 12px 0; border-radius: 12px; background: linear-gradient(180deg, #fbf8f3, var(--eg-frame) 60%, #d9d1c7);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .22), 0 1px 0 rgb(255 255 255 / .28), 0 -1px 0 rgb(0 0 0 / .25);
}
html.ds #device .eg-well {
  position: absolute; inset: 8px; display: grid; place-items: center; border-radius: 7px; overflow: hidden;
  background: radial-gradient(circle at 50% 46%, #3d0f0c 0%, #1a0605 62%, #0d0302 100%); box-shadow: inset 0 8px 18px rgb(0 0 0 / .75), inset 0 0 0 1px rgb(0 0 0 / .5);
}
/* the red button: a black collar and a domed red cap */
html.ds #device .eg-red {
  position: relative; display: block; width: 104px; height: 104px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: none; box-shadow: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.ds #device .eg-red-collar { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3b3b3d, #0b0b0c 72%); box-shadow: 0 2px 4px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .12); }
html.ds #device .eg-red-cap {
  position: absolute; inset: 12px; border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #ffd2c8 0 5%, #ff6a56 14%, #f2231a 36%, #b20d09 70%, #680404 100%);
  box-shadow: 0 7px 0 #5a0404, 0 10px 16px rgb(0 0 0 / .6), inset 0 -5px 7px rgb(0 0 0 / .32), inset 0 2px 2px rgb(255 255 255 / .25);
  transition: transform var(--motion-press) var(--motion-curve);
}
html.ds #device .eg-red:active .eg-red-cap, html.ds #device .eg-red.is-pressed .eg-red-cap {
  transform: translateY(6px); box-shadow: 0 1px 0 #5a0404, 0 3px 6px rgb(0 0 0 / .55), inset 0 -3px 6px rgb(0 0 0 / .35), inset 0 2px 2px rgb(255 255 255 / .2);
}
html.ds #device .eg-red:focus-visible { outline: 2px solid var(--eg-ink); outline-offset: 3px; }
html.ds #device .eg-box:not([data-glass="broken"]) .eg-red { opacity: .9; }
/* the pane: faintly blue, two streaks of light, a bright edge */
html.ds #device .eg-pane {
  position: absolute; inset: 8px; border-radius: 7px; overflow: hidden; pointer-events: none;
  background: linear-gradient(118deg, rgb(255 255 255 / .22) 0%, rgb(255 255 255 / .05) 24%, transparent 42%, rgb(255 255 255 / .12) 56%, transparent 66%), rgb(196 222 255 / .07);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .42), inset 0 0 22px rgb(255 255 255 / .07);
}
html.ds #device .eg-pane .eg-sheen { position: absolute; top: -40%; bottom: -40%; left: 64%; width: 9%; rotate: 24deg; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .16), transparent); }
html.ds #device .eg-box[data-glass="broken"] .eg-pane { opacity: 0; }
html.ds #device .eg-cracks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html.ds #device .eg-crack { fill: none; stroke: rgb(255 255 255 / .92); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
html.ds #device .eg-crack-shadow { fill: none; stroke: rgb(0 0 0 / .42); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
html.ds #device .eg-shards { position: absolute; inset: 8px; z-index: 3; pointer-events: none; }
html.ds #device .eg-shards[hidden] { display: none; }
html.ds #device .eg-shard {
  position: absolute; inset: 0; display: block; will-change: transform, opacity;
  background: linear-gradient(135deg, rgb(255 255 255 / .46), rgb(206 230 255 / .18) 42%, rgb(255 255 255 / .06) 70%, rgb(255 255 255 / .3));
}
html.ds #device .eg-flash { position: absolute; z-index: 4; width: 180px; height: 180px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgb(255 255 255 / .95) 0%, rgb(255 236 220 / .5) 22%, transparent 62%); }
html.ds #device .eg-strike {
  position: absolute; inset: 0; z-index: 5; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 12px;
  background: none; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
html.ds #device .eg-strike[hidden] { display: none; }
html.ds #device .eg-strike:focus-visible { outline: 2px solid var(--eg-ink); outline-offset: 2px; }
/* the close control, on the panel and on the card */
html.ds #device .eg-close { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 10px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; }
html.ds #device .eg-pick-card .eg-close { top: 10px; }
html.ds #device .eg-close i { position: relative; display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--c-fill-2); }
html.ds #device .eg-close i::before, html.ds #device .eg-close i::after { content: ""; position: absolute; left: 9px; right: 9px; top: 14px; height: 2px; border-radius: var(--r-pill); background: var(--c-label-2); rotate: 45deg; }
html.ds #device .eg-close i::after { rotate: -45deg; }
html.ds #device .eg-close:focus-visible { outline: 1px solid var(--c-focus); outline-offset: -4px; }
/* iPhone Duo, inner display: the panel on the left leaf */
html.ds #device .eg-stage.is-spanned { justify-items: start; padding-left: 0; padding-right: 0; }
html.ds #device .eg-stage.is-spanned .eg-stage-body { width: min(360px, calc(var(--eg-leaf) - 40px)); margin-left: max(20px, calc((var(--eg-leaf) - 360px) / 2)); }

/* ------------------------------------------------------------------------------------------------ the alarm light */
/* a red wash (opacity only) and a beacon's beam turning once round (transform only) */
html.ds #device .eg-siren {
  position: absolute; inset: 0; z-index: 97; display: block; pointer-events: none; opacity: 0;
  background: radial-gradient(130% 90% at 50% 34%, rgb(255 46 30 / .55) 0%, rgb(150 4 0 / .5) 55%, rgb(60 0 0 / .55) 100%);
}
html.ds #device .eg-beacon {
  position: absolute; left: 50%; top: 38%; z-index: 98; display: block; width: 260vmax; height: 260vmax; pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0deg, rgb(255 40 24 / 0) 6deg, rgb(255 52 32 / .55) 18deg, rgb(255 170 150 / .7) 24deg, rgb(255 52 32 / .55) 30deg, transparent 44deg 180deg,
    rgb(255 40 24 / 0) 186deg, rgb(255 52 32 / .45) 198deg, rgb(255 170 150 / .55) 204deg, rgb(255 52 32 / .45) 210deg, transparent 224deg);
  will-change: transform, opacity;
}

/* ------------------------------------------------------------------------------------------------ the pick card */
html.ds #device .eg-pick { position: absolute; inset: 0; z-index: 96; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
html.ds #device .eg-pick-dim { position: absolute; inset: 0; background: color-mix(in srgb, var(--c-stage) 80%, transparent); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); }
html.ds #device .eg-pick-card {
  position: relative; display: grid; justify-items: center; gap: 16px; box-sizing: border-box; width: min(100%, 370px); max-height: 100%; overflow-y: auto; padding: 26px 22px 22px; border-radius: var(--r-sheet);
  background: var(--mat-chrome-solid); box-shadow: inset 0 0 0 1px color-mix(in srgb, #ff3b2e 34%, var(--c-line-strong)), 0 0 70px -24px rgb(255 50 36 / .55), var(--e-3); perspective: 900px; overscroll-behavior: contain;
}
html.ds #device .eg-pick-stage { position: relative; display: grid; width: min(46%, 170px, 21dvh); aspect-ratio: 2 / 3; }
html.ds #device .eg-pick-stage > * { grid-area: 1 / 1; }
html.ds #device .eg-pick-leader { position: relative; display: block; border-radius: var(--r-control); background: var(--c-stage); box-shadow: inset 0 0 0 1px var(--c-line);
  background-image: radial-gradient(circle at 50% 50%, transparent 32%, var(--c-line) 33%, transparent 34%), linear-gradient(transparent 49.6%, var(--c-line) 50%, transparent 50.4%), linear-gradient(90deg, transparent 49.6%, var(--c-line) 50%, transparent 50.4%); }
html.ds #device .eg-pick-poster { position: relative; display: block; overflow: hidden; border-radius: var(--r-control); box-shadow: inset 0 0 0 1px var(--c-line), var(--e-2); transform-origin: 50% 80%; backface-visibility: hidden; }
html.ds #device .eg-pick-poster > :is(img, .ds-poster-fallback) { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; object-fit: cover; border-radius: inherit; }
html.ds #device .eg-pick-poster > img { z-index: 1; }
html.ds #device .eg-pick-copy { display: grid; justify-items: center; gap: 6px; width: 100%; text-align: center; }
html.ds #device .eg-pick-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 800 var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: #ff6b5c; }
html.ds #device .eg-pick-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb3a8, #f2231a 55%, #8c0606); box-shadow: 0 0 10px rgb(255 50 36 / .8); }
html.ds #device .eg-pick-copy h2 { margin: 0; font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2);  /* the title face: ds-look.css section 6 */ color: var(--c-label-1); text-wrap: balance; outline: none; }
html.ds #device .eg-pick-meta { margin: 0; font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); color: var(--c-label-2); }
html.ds #device .eg-pick-line { margin: 2px 0 0; max-width: 34ch; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-label-2); text-wrap: pretty; }
html.ds #device .eg-pick-where { margin: 0; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); color: var(--c-ok); }
html.ds #device .eg-pick-where[hidden], html.ds #device .eg-pick-said[hidden] { display: none; }
html.ds #device .eg-pick-said { width: 100%; margin-top: 4px; padding: 10px 12px; box-sizing: border-box; border-radius: var(--r-control); background: var(--c-fill-1); }
html.ds #device .eg-pick-said .eg-note { text-align: left; font-style: italic; }
html.ds #device .eg-pick-actions { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 10px; width: 100%; margin-top: 8px; }
html.ds #device .eg-watch-slot { grid-column: 1 / -1; display: grid; justify-items: center; gap: 6px; }
html.ds #device .eg-watch-slot .eg-watch { display: grid; place-items: center; box-sizing: border-box; width: 100%; min-height: 52px; margin: 0; text-decoration: none; }
html.ds #device .eg-watch-note { font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); color: var(--c-label-3); }
html.ds #device .eg-pick-actions > button { width: 100%; min-width: 0; min-height: 50px; margin: 0; white-space: normal; }
/* a narrow card (375 wide, the largest text, the Duo's right leaf): one action to a row */
html.ds #device .eg-pick-copy { container: eg-copy / inline-size; }
@container eg-copy (max-width: 340px) {
  html.ds #device .eg-pick-actions { grid-template-columns: minmax(0, 1fr); }
  html.ds #device .eg-film { min-height: 44px !important; }
}
/* the panel and the card cover the tab bar, as the app's own sheets do (ds-navigation.css, .ds-sheet-open) */
html.ds #device.eg-open > :is(.persistent-glass-nav, .ds-edge-fade, .ds-tab-capsule, .ds-edge-top) { z-index: 80 !important; }
html.ds #device.eg-open > :is(.ds-tsx-bar, .ds-tsx-top, .ds-tsx-bottom, .ds-tsx-ctl) { display: none; }
html.ds #device .eg-again-slot { display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; }
html.ds #device .eg-again-slot > .eg-again { width: 100%; min-width: 0; margin: 0; padding: 0 12px !important; font-size: var(--fs-subhead) !important; white-space: nowrap; }
html.ds #device .eg-left { font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); color: var(--c-label-3); }
html.ds #device .eg-left:empty { display: none; }
html.ds #device .eg-again.is-pressed { transform: scale(.97); }
html.ds #device .eg-film { border: 0; border-radius: var(--r-control); background: none; box-shadow: none; color: var(--c-label-1); font: var(--fw-headline) var(--fs-callout)/var(--lh-callout) var(--font-ui); text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 4px; }
html.ds #device .eg-film:focus-visible, html.ds #device .eg-again:focus-visible, html.ds #device .eg-watch:focus-visible { outline: 1px solid var(--c-focus); outline-offset: 2px; }
/* iPhone Duo, inner display: the poster on the left leaf, its words on the right; nothing in the fold */
html.ds #device .eg-pick.is-spanned { place-items: stretch; padding: 0; }
html.ds #device .eg-pick.is-spanned .eg-pick-card {
  width: 100%; max-height: none; height: 100%; border-radius: 0; padding: 0; background: none; box-shadow: none;
  grid-template-columns: var(--eg-leaf) var(--eg-gap) minmax(0, 1fr); grid-template-rows: 1fr; align-items: center;
}
html.ds #device .eg-pick.is-spanned .eg-pick-stage { grid-column: 1; width: min(58%, 250px); }
html.ds #device .eg-pick.is-spanned .eg-pick-copy { grid-column: 3; width: min(100% - 48px, 380px); justify-self: center; max-height: 100%; overflow-y: auto; padding: 24px 0; }
html.ds #device .eg-pick.is-spanned .eg-close { top: 16px; right: 16px; }

/* ------------------------------------------------------------------------------------------------ the corner (Discover, 15 October 2026)
   On Discover the call point is a small red plate at the foot, the glass real and breakable in place: whole, cracked by a strike,
   shattered, then the lit button. Used, it goes empty with its caption until the glass is replaced. No Flick here. */
html.ds #device .dg-links > .eg { display: block; flex: 0 0 auto; margin: 0; padding: 0; }
html.ds #device .dg-links .eg-foot { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.ds #device .dg-links .eg-foot > * { display: block; width: 1px; height: 1px; overflow: hidden; margin: 0; padding: 0; }
html.ds #device .dg-links .eg-call {
  position: relative; display: block; width: 48px; min-width: 0; height: 48px; min-height: 48px; padding: 0; gap: 0; border-radius: 15px; opacity: .6; filter: none;
  background: linear-gradient(160deg, rgb(255 255 255 / .1), rgb(255 255 255 / .02) 55%), rgb(12 12 18 / .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgb(255 78 66 / .5), inset 0 1px 0 rgb(255 255 255 / .12), 0 10px 22px -12px rgb(0 0 0 / .8);
  transition: opacity var(--motion-fast) var(--motion-curve), transform var(--motion-press) var(--motion-curve);
}
html.ds #device .dg-links .eg-call:is(:focus-visible, :active) { opacity: 1; }
html.ds #device .dg-links .eg-call-window { position: absolute; inset: 0; width: auto; height: auto; border-radius: 15px; background: none; box-shadow: none; }
html.ds #device .dg-links .eg-call-well { inset: 9px; border-radius: 50%; box-shadow: inset 0 2px 5px rgb(0 0 0 / .7); }
html.ds #device .dg-links .eg-call-cap { width: 15px; height: 15px; box-shadow: 0 0 0 2px #111, 0 2px 0 2px #000, 0 3px 6px rgb(0 0 0 / .55); }
html.ds #device .dg-links .eg-call-pane { inset: 3px; border-radius: 12px; }
html.ds #device .dg-links .eg-call-words { display: none; }
html.ds #device .dg-links .eg-screw { display: none; }
html.ds #device .dg-links .eg-call-shards { position: absolute; inset: 3px; z-index: 3; overflow: visible; pointer-events: none; }
html.ds #device .dg-links .eg-call-shards[hidden] { display: none; }
/* the pane is the glass: whole until struck; the cracks show while it is cracked */
html.ds #device .dg-links .eg:is([data-corner="whole"], [data-corner="cracked"]) .eg-call-pane { opacity: 1; }
html.ds #device .dg-links .eg[data-corner="cracked"] .eg-call-cracks { opacity: 1; }
html.ds #device .dg-links .eg[data-corner="lit"] .eg-call-cracks { opacity: 0; }
/* the lit button: a red glow that holds still */
html.ds #device .dg-links .eg[data-corner="lit"] .eg-call { opacity: 1; box-shadow: inset 0 0 0 1px rgb(255 96 84 / .85), inset 0 1px 0 rgb(255 255 255 / .18), 0 0 22px -3px rgb(255 50 36 / .6); }
html.ds #device .dg-links .eg-call-said { display: none; }
/* empty: the tile dims further; its caption sits beside it, to the left, in the foot's quiet type */
html.ds #device .dg-links > .eg { position: relative; }
html.ds #device .dg-links .eg[data-corner="empty"] .eg-call { opacity: .34; cursor: default; }
html.ds #device .dg-links .eg[data-corner="empty"] .eg-call-said { display: block; position: absolute; right: calc(100% + 12px); top: 50%; translate: 0 -50%; width: max-content; max-width: 9.5em; text-align: right; font: 500 calc(12 * var(--type-unit)) / 1.3 var(--font-ui); color: var(--c-label-2); }
html.ds #device .dg-links .eg[data-corner="empty"] .eg-call-cap { transform: translateY(1px) scale(.94); }
html.ds #device .dg-links .eg[data-corner="empty"] :is(.eg-call-pane, .eg-call-cracks) { opacity: 0; }
html.ds #device .dg-links .eg.is-leafed :is(.eg-call, .eg-foot) { width: 48px; }
@media (prefers-reduced-motion: reduce) { html.ds #device .dg-links .eg-call { transition: none; } }

/* the corner's spoken line lives in the corner only: on Discover's old page (discover-glass.js switched off, 15 October 2026,
   20:00) the call point is drawn as it was, without it */
html.ds #device .screen:not(.dg) .eg-call-said { display: none; }

/* (pages polish, 28 October 2026; the owner: "Film page" cut off at the foot of the Emergency pick card) Why: the card was a grid
   of fixed parts (a poster up to 170 x 255pt, the words, Flick's line, three actions) inside a box no taller than the screen,
   scrolling inside itself when they did not fit, which on an iPhone 15 left the last action under the edge. Now the poster is
   the one part that gives: the card is a column, the poster takes what height is left (never more than 255pt, never less than
   96pt) and keeps its shape, so every action stays in view on every phone; only the largest text may still scroll. */
html.ds #device .eg-pick-card { display: flex; flex-direction: column; align-items: center; gap: 14px; }
html.ds #device .eg-pick-card > * { flex: none; }
html.ds #device .eg-pick-card > .eg-pick-stage { flex: 0 1 255px; width: auto; height: auto; min-height: 96px; max-height: 255px; aspect-ratio: 2 / 3; }
html.ds #device .eg-pick-card > :is(.eg-pick-copy, .eg-pick-actions, .eg-pick-said) { align-self: stretch; }

/* ===== prototype-src/find-tips.css ===== */
/* TRIPTIC find-tips layer (lane FIND, 9 October 2026): the one-time tips for the widgets and Siri, and Settings >
   Widgets and Siri. Script: find-tips.js. Record: hub/docs/FIND-WIDGETS-SIRI-2026-10-09.md.
   Tokens only (colours, radii, type); the drawings are SVG, so they are pictures at any text size. Nothing loops. */

/* ------------------------------------------------------------------ a tip: one calm card */
#device .ft-tip {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  margin: var(--sp-5) 0 var(--sp-3);
  padding: var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-4);
  border-radius: var(--r-card);
  background: var(--c-fill-1);
  border: 1px solid var(--c-line);
  box-shadow: var(--e-1);
  overflow: hidden;
  color: var(--c-label-1);
  font-family: var(--font-ui);
  animation: ft-arrive var(--motion-slow) var(--motion-curve) both;
}
#device .ft-tip.ft-still { animation: ft-fade var(--motion-fast) var(--motion-curve) both; }
@media (prefers-reduced-motion: reduce) { #device .ft-tip { animation: ft-fade var(--motion-fast) var(--motion-curve) both; } }
#device .ft-tip.ft-leaving {
  opacity: 0;
  margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0;
  transition: opacity var(--motion-fast) var(--motion-curve), height var(--motion-normal) var(--motion-curve), margin var(--motion-normal) var(--motion-curve), padding var(--motion-normal) var(--motion-curve);
}
@keyframes ft-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ft-fade { from { opacity: 0; } to { opacity: 1; } }

#device .ft-art { width: 56px; line-height: 0; }
#device .ft-art .ft-drawing { width: 100%; height: auto; display: block; }
#device .ft-art-widget { width: 84px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45)); }

#device .ft-body { min-width: 0; }
#device .ft-eyebrow {
  margin: 0;
  font: var(--fw-eyebrow) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-ui);
  letter-spacing: var(--tr-eyebrow);
  color: var(--c-seal-hi);
}
#device .ft-title {
  margin: var(--sp-1) 0 var(--sp-1);
  font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui);
  letter-spacing: var(--tr-headline);
  color: var(--c-label-1);
  text-wrap: balance;
}
#device .ft-line {
  margin: 0;
  font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui);
  letter-spacing: var(--tr-subhead);
  color: var(--c-label-2);
}
#device .ft-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
#device .ft-act,
#device .ft-page-button {
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: var(--c-fill-2);
  color: var(--c-label-1);
  font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui);
  letter-spacing: var(--tr-subhead);
  cursor: pointer;
}
#device .ft-act:active,
#device .ft-page-button:active { background: var(--c-fill-press); }
#device .ft-how {
  margin: var(--sp-3) 0 0;
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui);
  letter-spacing: var(--tr-footnote);
  color: var(--c-label-2);
}
#device .ft-close {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-label-3);
  cursor: pointer;
}
#device .ft-close:active { background: var(--c-fill-press); }

/* the largest text: the picture sits above the words, so a line is never three words long */
html[data-text-size="largest"] #device .ft-tip { grid-template-columns: minmax(0, 1fr); }
html[data-text-size="largest"] #device .ft-art-widget { width: 96px; }

/* ------------------------------------------------------------------ Settings > Widgets and Siri (a sheet) */
#device .ft-page { padding: 0 0 var(--sp-8); color: var(--c-label-1); font-family: var(--font-ui); }
#device .ft-page-intro {
  margin: 0 0 var(--sp-5);
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui);
  letter-spacing: var(--tr-body);
  color: var(--c-label-2);
}
#device .ft-page-section { margin: 0 0 var(--sp-7); }
#device .ft-page-head {
  margin: 0 0 var(--sp-3);
  font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui);
  letter-spacing: var(--tr-title-3);
  color: var(--c-label-1);
}
#device .ft-phrases {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: var(--r-row);
  background: var(--c-fill-1);
  border: 1px solid var(--c-line);
}
#device .ft-phrases li { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-line); }
#device .ft-phrases li:first-child { border-top: 0; }
#device .ft-phrases strong {
  display: block;
  font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui);
  letter-spacing: var(--tr-headline);
  color: var(--c-label-1);
}
#device .ft-phrases small {
  display: block;
  margin-top: 2px;
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui);
  letter-spacing: var(--tr-footnote);
  color: var(--c-label-3);
}
#device .ft-page-note {
  margin: var(--sp-3) 0 0;
  font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui);
  letter-spacing: var(--tr-footnote);
  color: var(--c-label-2);
}
#device .ft-page-button { margin-top: var(--sp-4); width: 100%; }
#device .ft-shelf { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-start; }
#device .ft-fig { margin: 0 0 var(--sp-4); }
#device .ft-fig .ft-drawing { display: block; height: auto; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .5)); }
#device .ft-fig figcaption {
  margin-top: var(--sp-2);
  font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui);
  letter-spacing: var(--tr-caption-1);
  color: var(--c-label-3);
}
#device .ft-fig-small { flex: 1 1 0; min-width: 0; max-width: 170px; }
#device .ft-fig-small .ft-drawing { width: 100%; }
#device .ft-fig-medium .ft-drawing { width: 100%; max-width: 364px; }
#device .ft-shelf-lock { padding: var(--sp-4); border-radius: var(--r-card); background: linear-gradient(160deg, #2b3a5c, #6b4a7a 55%, #c27a6a); }
#device .ft-shelf-lock .ft-fig { margin: 0; }
#device .ft-shelf-lock .ft-drawing { filter: none; }
#device .ft-shelf-lock figcaption { color: var(--c-label-2); }
#device .ft-fig-rect { flex: 1 1 172px; min-width: 0; max-width: 172px; }
#device .ft-fig-rect .ft-drawing { width: 100%; }
#device .ft-fig-circle { flex: 0 0 76px; }

/* ===== prototype-src/membership.css ===== */
/* TRIPTIC+ membership surfaces (prototype-src/membership.js): the membership page, contextual paywall sheets, the
   free-searches indicator under the request box, the TRIPTIC+ badge and the Sign in screen.
   Tokens only (design-system.css :root): --c-*, --fs/--lh/--fw/--tr-*, radii {6,10,14,20,28,999}, weights 400-700,
   nothing under 11px, no `transition: all`, motion only on transform/opacity. Scoped under #device so the screens keep
   their layout with or without the design-system class (?ds=0).
   !important: none. */

/* ------------------------------------------------------------------ shared */
#device .tm-screen { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: var(--c-stage); color: var(--c-label-1);
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 20px calc(env(safe-area-inset-bottom, 0px) + 32px); font-family: var(--font-ui); }
#device .tm-screen > * { position: relative; z-index: 1; }
#device .tm-screen .tm-ambient { position: absolute; inset: 0 0 auto; height: 560px; z-index: 0; pointer-events: none; overflow: hidden; }
#device .tm-screen .tm-ambient i { position: absolute; border-radius: 50%; }
#device .tm-screen .tm-ambient i:first-child { width: 520px; height: 420px; left: 50%; top: -170px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(124, 77, 235, .30), rgba(124, 77, 235, 0)); }
#device .tm-screen .tm-ambient i:last-child { width: 360px; height: 260px; left: 50%; top: 150px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(243, 238, 230, .07), rgba(243, 238, 230, 0)); }
#device.manual-solid .tm-screen .tm-ambient { display: none; }
#device .tm-bar { display: flex; justify-content: flex-end; align-items: center; min-height: 52px; }
#device .tm-signin .tm-bar { justify-content: flex-start; }
#device .tm-bar .circle-control { position: static; inset: auto; margin: 0; width: 44px; height: 44px; flex: none; }
#device .tm-link { appearance: none; border: 0; background: none; color: var(--c-label-2); font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead);
  min-height: 44px; padding: 0 12px; border-radius: var(--r-control); cursor: pointer; }
#device .tm-link:focus-visible, #device .tm-plan:focus-visible, #device .tm-topup:focus-visible, #device .tm-allowance:focus-visible,
#device .tm-sheet-option:focus-visible, #device .tm-siwa:focus-visible, #device .tm-google-button:focus-visible, #device .tm-guest:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
#device .tm-screen .sr-only, #device .tm-sheet .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* TRIPTIC+ wordmark and badge */
#device .tm-wordmark { display: inline-flex; align-items: baseline; gap: .04em; font-weight: 600; letter-spacing: .28em; color: var(--c-label-1); }
#device .tm-wordmark b { font-weight: 600; letter-spacing: 0; color: var(--c-lamp); }
#device .tm-wordmark.is-xl { font-size: var(--fs-large-title); line-height: var(--lh-large-title); font-weight: 400; letter-spacing: .3em; }
#device .tm-wordmark.is-xl b { font-weight: 600; font-size: 1.08em; margin-left: -.18em; }
#device .tm-wordmark.is-sm { font-size: var(--fs-caption-1); line-height: var(--lh-caption-1); letter-spacing: .14em; }
#device .tm-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--c-lamp); color: var(--c-lamp-ink);
  font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: .08em; white-space: nowrap; }
#device .tm-badge b { font-weight: 700; margin-left: 1px; }

/* ------------------------------------------------------------------ membership page */
#device .tm-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 4px 0; }
#device .tm-triptych { position: relative; width: 252px; height: 178px; margin: 0 auto 18px; }
/* the hero's picture is TRIPTIC's own art (three film cards, three finishes): prototype-src/own-art.js and own-art.css */
#device .tm-halo { position: absolute; left: 50%; bottom: -26px; width: 230px; height: 60px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(243, 238, 230, .16), rgba(243, 238, 230, 0)); z-index: 3; pointer-events: none; }
#device .tm-context { margin: 2px 0 10px; padding: 7px 14px; border-radius: var(--r-card); background: var(--c-fill-2); color: var(--c-label-1);
  font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); text-wrap: balance; }
#device .tm-title { margin: 0; }
/* THE NEON (20 October 2026, lane CINEMA-LOOK; hub/docs/CINEMA-TYPE-2026-10-20.md). Under the velvet rope the name is framed like an
   Art Deco cinema's sign: two lit tubes above and two below, the outer one shorter and fainter (the Deco step), each tube in a
   soft band of its own light. Drawn in CSS gradients (no filter, no blur, no glow on a box). It lights ONCE, the first time the page is opened in
   a visit (membership.js neonOnce: after it, <html data-tm-neon="lit">; a few flickers and then steady, opacity only, the ceremony token), and is simply lit
   after that and with Reduce Motion. */
#device .tm-title.tm-neon { position: relative; isolation: isolate; padding: 12px 24px 12px calc(24px + .3em); }
#device .tm-title.tm-neon::before, #device .tm-title.tm-neon::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
#device .tm-title.tm-neon::after { /* the inner tubes: a lit line above and below, fading at the ends, each in its own soft band */
  inset: 3px 0;
  background:
    linear-gradient(90deg, transparent, var(--neon) 10%, var(--neon) 90%, transparent) 0 2px / 100% 1.5px no-repeat,
    linear-gradient(90deg, transparent, var(--neon) 10%, var(--neon) 90%, transparent) 0 calc(100% - 2px) / 100% 1.5px no-repeat,
    linear-gradient(90deg, transparent, var(--neon-halo) 16%, var(--neon-halo) 84%, transparent) 0 0 / 100% 5.5px no-repeat,
    linear-gradient(90deg, transparent, var(--neon-halo) 16%, var(--neon-halo) 84%, transparent) 0 100% / 100% 5.5px no-repeat;
}
#device .tm-title.tm-neon::before { /* the outer tubes, shorter and fainter: the Deco step */
  inset: -3px 22px;
  background:
    linear-gradient(90deg, transparent, rgb(214 196 255 / .5) 14%, rgb(214 196 255 / .5) 86%, transparent) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgb(214 196 255 / .5) 14%, rgb(214 196 255 / .5) 86%, transparent) 0 100% / 100% 1px no-repeat;
}
@keyframes tm-neon-on { 0% { opacity: 0; } 7% { opacity: .85; } 11% { opacity: .1; } 18% { opacity: .9; } 23% { opacity: .35; } 32%, 100% { opacity: 1; } }
html:not([data-tm-neon="lit"]) #device .tm-title.tm-neon::before, html:not([data-tm-neon="lit"]) #device .tm-title.tm-neon::after { animation: tm-neon-on var(--motion-ceremony) linear 160ms both; }
@media (prefers-reduced-motion: reduce) { html #device .tm-title.tm-neon::before, html #device .tm-title.tm-neon::after { animation: none; } }
html.reduce-motion #device .tm-title.tm-neon::before, html.reduce-motion #device .tm-title.tm-neon::after,
html[data-motion-tier="reduced"] #device .tm-title.tm-neon::before, html[data-motion-tier="reduced"] #device .tm-title.tm-neon::after,
html #device.manual-reduced-motion .tm-title.tm-neon::before, html #device.manual-reduced-motion .tm-title.tm-neon::after,
html #device[data-motion-tier="reduced"] .tm-title.tm-neon::before, html #device[data-motion-tier="reduced"] .tm-title.tm-neon::after { animation: none; }
@media (forced-colors: active) { #device .tm-title.tm-neon::before, #device .tm-title.tm-neon::after { background: none; border-block: 1px solid CanvasText; } }
#device .tm-lede { margin: 6px 0 0; max-width: 300px; color: var(--c-label-2); font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); letter-spacing: var(--tr-body); text-wrap: balance; }

#device .tm-status { margin: 22px 0 0; padding: 14px 16px; border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line);
  color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }
#device .tm-status p { margin: 6px 0 0; }
#device .tm-status.is-plus { display: flex; gap: 12px; align-items: center; background: rgba(243, 238, 230, .07); box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .22); }
#device .tm-status.is-plus strong { display: block; color: var(--c-label-1); font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); }
#device .tm-status.is-plus p { margin-top: 2px; }
#device .tm-status-meter { display: flex; align-items: center; gap: 8px; color: var(--c-label-1); font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); }

#device .tm-compare { margin: 24px 0 0; padding: 4px 16px 14px; border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); container-type: inline-size; }
/* (20 October 2026: the name column a little wider, so "Commuters" fits beside its icon on one line at the standard size) */
#device .tm-compare-head, #device .tm-compare-row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr) minmax(0, 1fr); gap: 8px; align-items: center; }
#device .tm-compare-head { min-height: 40px; color: var(--c-label-3); font: var(--fw-caption-1-strong) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); }
/* THE TRIPTIC+ COLUMN (owner, 2 November 2026): one quiet violet band, the app's violet, behind the TRIPTIC+ heading and every
   TRIPTIC+ value, top to bottom; the two headings in one type style, TRIPTIC+'s lit in the neon's colour. The band is a flat
   tint on the card (no blur, no material), so it reads the same with Reduce Transparency. It is drawn once, on the rows' group,
   where the third column starts: (width - two 8pt gaps) x 2.25/3.25 + 16pt in three columns; (width - 8pt) / 2 + 8pt in two. */
#device .tm-compare-grid { --tm-plus-x: calc((100% - 16px) * 2.25 / 3.25 + 16px); position: relative; isolation: isolate; }
#device .tm-compare-grid::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: 0; bottom: 0; left: calc(var(--tm-plus-x) - 6px); right: -10px;
  border-radius: var(--r-control); background: rgb(139 92 246 / .14); box-shadow: inset 0 0 0 1px rgb(167 139 250 / .16); }
@media (forced-colors: active) { #device .tm-compare-grid::before { background: none; box-shadow: none; border: 1px solid CanvasText; } }
#device .tm-compare-head > [role="columnheader"] { letter-spacing: .02em; }
#device .tm-compare-head > .tm-plus-head { color: var(--neon); }
/* Top-aligned (owner, 2 November 2026): a one-line Free value starts level with a two-line TRIPTIC+ value, not half-way down it.
   In three columns the values start level with the feature's name beside its 28pt icon. */
#device .tm-compare-row { align-items: start; }
#device .tm-compare-row > :is(.tm-free, .tm-plus) { padding-top: max(0px, calc((28px - 1lh) / 2)); }
#device .tm-compare-row { min-height: 52px; padding: 8px 0; border-top: 1px solid var(--c-line); }
#device .tm-compare-row > [role="rowheader"] { display: flex; align-items: center; gap: 10px; color: var(--c-label-1); font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); }
#device .tm-compare-row > [role="rowheader"] i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-control); background: var(--c-fill-2); color: var(--c-label-2); }
#device .tm-compare-row > [role="rowheader"] svg { width: 17px; height: 17px; }
/* A 320pt phone (iPhone SE 1st gen size, 20 October 2026): "Collections" and "Commuters Corner" ran into the Free column, so
   each feature's name takes its own line above Free and TRIPTIC+, as it does from the x1.1 text size (ds-text-size.css).
   (pages polish, 28 October 2026; the owner: each Free cell on one line, "3 a week (7 to start)") Why the Free cells took
   three lines: in three columns on a phone the Free column was .8 of 3.25 shares, about 77pt on an iPhone 15, narrower than
   any of its sentences. So the same two-column layout now applies wherever the TABLE is narrower than 440pt (a container
   query: every phone, the Duo's cover), giving Free half the width; a table wider than that keeps three columns (the iPad's paywall column is not). */
@container (max-width: 440px) {
  #device :is(.tm-compare-head, .tm-compare-row) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 6px; }
  #device .tm-compare-head > :first-child { position: absolute; }
  /* (lead review, 3 November 2026) the name and its icon stay in the Free column, wrapping to two lines if they must
     ("Commuters / Corner"), so the TRIPTIC+ band runs clean beside it; the two values take the line below */
  #device .tm-compare-row > [role="rowheader"] { grid-column: 1; grid-row: 1; }
  #device .tm-compare-row > .tm-free { grid-column: 1; grid-row: 2; }
  #device .tm-compare-row > .tm-plus { grid-column: 2; grid-row: 2; }
  #device .tm-compare-grid { --tm-plus-x: calc((100% - 8px) / 2 + 8px); }
  #device .tm-compare-row > :is(.tm-free, .tm-plus) { padding-top: 0; }
}
/* on a 320pt phone the half-width Free cell is a few points short of "3 a week (7 to start)": its words come down a little
   with the table's width (never under the caption-2 size), and still wrap rather than clip if even that will not do */
@container (max-width: 340px) {
  #device .tm-compare-row > .tm-free { font-size: max(var(--fs-caption-2), min(var(--fs-footnote), 4.3cqi)); }
}
#device .tm-free { color: var(--c-label-3); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }
#device .tm-plus { color: var(--c-label-1); font: var(--fw-caption-1-strong) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); font-weight: 600; }
#device .tm-compare-row > .tm-plus { padding-inline-start: 4px; }
#device .tm-compare-row .tm-nowrap { white-space: nowrap; }
#device .tm-always { margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--c-line); color: var(--c-label-3); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }

/* A member's own page (P-YOU, 13 October 2026): what their plan includes, one row each, in the comparison's look */
#device .tm-yours-list { margin: 0; padding: 4px 16px; list-style: none; border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); }
#device .tm-yours-list > li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; min-height: 52px; padding: 8px 0; }
#device .tm-yours-list > li + li { border-top: 1px solid var(--c-line); }
#device .tm-yours-list > li > i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-control); background: var(--c-fill-2); color: var(--c-lamp); }
#device .tm-yours-list > li > i svg { width: 17px; height: 17px; }
#device .tm-yours-label { min-width: 0; color: var(--c-label-1); font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); }
#device .tm-yours-value { max-width: 13ch; color: var(--c-label-2); text-align: right; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }
#device .tm-plan-line { margin: 4px 0 0; color: var(--c-label-1); font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); }
#device .tm-manage-note { margin: 0; color: var(--c-label-3); text-align: center; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }
#device .tm-section-title { margin: 30px 0 12px; color: var(--c-label-1); font: var(--fw-title-3) var(--fs-title-3)/var(--lh-title-3) var(--font-ui); letter-spacing: var(--tr-title-3); }
#device .tm-plans { display: grid; gap: 10px; }
#device .tm-plan { appearance: none; position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 76px;
  padding: 14px 16px; border: 0; border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line-strong); color: var(--c-label-1); text-align: left; cursor: pointer;
  transition: transform var(--motion-press) var(--motion-curve); }
#device .tm-plan:active { transform: scale(.985); }
#device .tm-plan.is-selected { background: rgba(243, 238, 230, .08); box-shadow: inset 0 0 0 2px var(--c-lamp); }
#device .tm-plan-check { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c-label-4); display: grid; place-items: center; }
#device .tm-plan.is-selected .tm-plan-check { background: var(--c-lamp); box-shadow: none; }
#device .tm-plan.is-selected .tm-plan-check::after { content: ""; width: 10px; height: 6px; border: solid var(--c-lamp-ink); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
#device .tm-plan-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#device .tm-plan-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#device .tm-plan-name { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); }
#device .tm-plan-detail { color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); text-wrap: pretty; }
#device .tm-plan-price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
#device .tm-price { display: flex; flex-direction: column; align-items: flex-end; }
#device .tm-price strong { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); }
#device .tm-price s { color: var(--c-label-3); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }
#device .tm-plan-price small { color: var(--c-label-3); font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); }
#device .tm-flag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: .02em; white-space: nowrap; }
#device .tm-flag.is-best { background: var(--c-lamp); color: var(--c-lamp-ink); }
#device .tm-screen .primary-button.tm-cta { width: 100%; margin: 16px 0 0; }
/* (21 October 2026, Weekly: "Continue with Weekly" / "Continue with Yearly" take two lines on a 320pt phone at the largest
   text size; the button grows with them instead of letting the second line out of the pill, as ds-sheets.css does) */
/* (release integration, 22 October 2026: html.ds in front, so it outranks design-system.css's button rule, (1,3,1) with its own
   html.ds; without it the pill stayed 50px and the second line ran out of it: review-fit-browser at 320pt x1.35) */
html.ds #device .tm-screen .primary-button.tm-cta { height: auto !important; min-height: 50px !important; padding-block: 10px !important; }
/* The yearly free trial (20 October 2026): the owner's sentence above the button, Apple's renewal terms right beneath it. */
/* (pages polish, 28 October 2026) the trial is said in the button: "Try 1 week free" over "then £39.99 a year" */
#device .tm-screen .primary-button.tm-cta.has-trial { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
#device .tm-cta-then { display: block; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); opacity: .78; }
#device .tm-trial-terms { margin: 10px 4px 0; color: var(--c-label-2); text-align: center; font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); text-wrap: pretty; }
#device .tm-cta-note { min-height: 20px; margin: 10px 4px 0; color: var(--c-label-2); text-align: center; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); text-wrap: balance; }
#device .tm-cta-note:empty { min-height: 0; margin: 0; }

#device .tm-topup, #device .tm-sheet-option { appearance: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 64px;
  margin: 18px 0 0; padding: 10px 16px 10px 10px; border: 0; border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-label-1); text-align: left; cursor: pointer;
  transition: transform var(--motion-press) var(--motion-curve); }
#device .tm-topup:active, #device .tm-sheet-option:active { transform: scale(.985); }
#device .tm-topup-icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-row); background: var(--c-fill-2); color: var(--c-label-1); }
#device .tm-topup-icon svg { width: 18px; height: 18px; }
#device .tm-topup-icon b { position: absolute; right: -6px; bottom: -4px; min-width: 24px; height: 18px; padding: 0 4px; border-radius: var(--r-pill); background: var(--c-lamp); color: var(--c-lamp-ink);
  font: var(--fw-caption-2-strong) var(--fs-caption-2)/calc(18 * var(--type-unit)) var(--font-ui); text-align: center; }
#device .tm-topup-copy, #device .tm-sheet-option-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#device .tm-topup-copy strong, #device .tm-sheet-option-copy strong { font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--font-ui); letter-spacing: var(--tr-headline); }
#device .tm-topup-copy small, #device .tm-sheet-option-copy small { color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }
#device .tm-sheet-option-copy small .tm-sheet-from { display: block; white-space: nowrap; }
#device .tm-topup-price { padding: 0 12px; height: 32px; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--c-fill-2); color: var(--c-label-1);
  font: var(--fw-headline) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); font-weight: 600; }

#device .tm-footer { margin-top: 28px; text-align: center; }
#device .tm-footer-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; }
/* (pages polish, 28 October 2026, the owner: the disclosure left-aligned and slightly smaller; every word kept) it reads as
   a paragraph of terms at caption size, ragged right, full width; the links under it stay one centred row */
#device .tm-legal { margin-top: 14px; color: var(--c-label-3); font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); text-align: left; }
#device .tm-legal p { width: 100%; max-width: none; margin: 0 0 10px; text-align: left; text-wrap: pretty; }
/* one centred row of links under the disclosure, all the same size (they were left, left-and-larger, then centred) */
#device .tm-legal-links { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 20px; margin-bottom: 0; }
#device .tm-doc { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-label-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-label-4); }
#device .tm-placeholder { color: var(--c-label-2); }
#device .tm-placeholder em { color: var(--c-caution); font-style: normal; }
#device .tm-manage { display: flex; justify-content: center; align-items: center; min-height: 44px; color: var(--c-label-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-label-4); }
#device .tm-code { width: 100%; margin: 8px 0 0; text-align: left; }
#device .tm-code label { display: block; margin: 0 0 6px 4px; color: var(--c-label-3); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }
#device .tm-code-row { display: flex; gap: 8px; }
#device .tm-code input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 0; border-radius: var(--r-row); background: var(--c-fill-2); box-shadow: inset 0 0 0 1px var(--c-line-strong); color: var(--c-label-1); font-size: calc(17 * var(--type-unit)); }
#device .tm-code input:focus { outline: 2px solid var(--c-focus); outline-offset: 1px; }
#device .tm-code-go { flex: none; height: 48px; padding: 0 18px; border: 0; border-radius: var(--r-row); background: var(--c-lamp); color: var(--c-lamp-ink); font: var(--fw-headline) var(--fs-headline)/1 var(--font-ui); cursor: pointer; }
#device .tm-code-result { margin: 8px 4px 0; color: var(--c-danger); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); text-align: center; }
#device .tm-code-result.is-ok { color: var(--c-ok); }

/* ------------------------------------------------------------------ free-searches indicator (Discover) */
#device .tm-allowance { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 6px 0 -8px; padding: 0 10px 0 14px; border: 0; border-radius: var(--r-pill);
  background: none; color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); cursor: pointer; align-self: flex-start; }
#device .tm-dots { display: inline-flex; gap: 4px; }
#device .tm-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-label-4); }
#device .tm-dots i.is-left { background: var(--c-lamp); }
#device .tm-allow-extra { color: var(--c-label-1); font-weight: 600; }
#device .tm-allow-chev { display: inline-grid; color: var(--c-label-3); }
#device .tm-allow-chev svg { width: 13px; height: 13px; }
/* (release polish, 28 October 2026; the owner) the line is quiet secondary text in every state, none left included */
#device .tm-allowance .tm-allow-label, #device .tm-allowance.is-empty .tm-allow-label { color: var(--c-label-2); }
#device .tm-dots i.is-left { background: var(--c-label-1); }
#device .tm-allowance.is-plus .tm-allow-label { color: var(--c-label-2); }
#device .app-header .tm-header-badge { display: inline-flex; align-items: center; margin-left: auto; margin-right: 10px; }
#device .ds-row-title .tm-badge, #device .settings-row strong .tm-badge { margin-left: 6px; vertical-align: 2px; }
#device .tm-status-check { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-lamp); }
#device .tm-status-check::after { content: ""; width: 12px; height: 7px; border: solid var(--c-lamp-ink); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }

/* ONE LOCK TREATMENT (owner, 6 October 2026): The Ten, Coming Soon, Collections and the Daily Cryptic's world rank all
   say "part of TRIPTIC+" with the same three pieces, so a locked thing never looks broken and never looks different:
     .tm-lock-chip    the mark: the lock glyph and TRIPTIC+ (.tm-lock-badge is the same chip pinned to a card's corner)
     .tm-seal         a sealed poster: something real is behind it and nothing of it is shown (never a blurred picture,
                      never a made-up one). Sized by whatever holds it.
     .tm-locked-line  one line that opens membership: the chip, what TRIPTIC+ gives here, a chevron
   Nothing here moves. */
#device .tm-lock-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--mat-chrome-solid); color: var(--c-label-1); box-shadow: inset 0 0 0 1px var(--c-line-strong); font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: .06em; }
#device .tm-lock-chip svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#device .tm-seal { position: relative; display: grid; place-items: center; overflow: hidden; color: var(--c-seal-hi);
  background: radial-gradient(130% 80% at 24% 0%, rgba(124, 77, 235, .42), rgba(124, 77, 235, 0) 62%), linear-gradient(165deg, rgba(34, 27, 58, 1), rgba(12, 12, 17, 1) 78%);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .30), 0 6px 14px rgba(0, 0, 0, .45); }
#device .tm-seal::before { content: ""; position: absolute; inset: -40% -60%; pointer-events: none; transform: rotate(24deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .07) 50%, rgba(255, 255, 255, 0) 58%); }
#device .tm-seal svg { position: relative; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#device .tm-locked-line { appearance: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 10px 12px 10px 14px;
  border: 0; border-radius: var(--r-row); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-label-1); text-align: left; cursor: pointer;
  font: var(--fw-subhead-strong) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); }
#device .tm-locked-line > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; }
#device .tm-locked-line small { color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); letter-spacing: var(--tr-footnote); }
#device .tm-locked-line > i { display: grid; place-items: center; width: 20px; height: 20px; color: var(--c-label-3); }
#device .tm-locked-line > i svg { width: 16px; height: 16px; }
#device .tm-locked-line:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
@media (prefers-reduced-transparency: reduce) { #device .tm-seal { background: var(--c-stage-raised); } #device .tm-seal::before { display: none; } }
#device.manual-solid .tm-seal { background: var(--c-stage-raised); }
#device.manual-solid .tm-seal::before { display: none; }

/* Library archive rows and locked Collections */
#device .tm-row-lock { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: var(--c-label-3); font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: .06em; vertical-align: middle; }
#device .tm-row-lock svg, #device .tm-lock-badge svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#device .api-collection-card[data-locked="true"] { position: relative; }
#device .api-collection-card[data-locked="true"] :is(.explore-card-art, .dslc-fan) { opacity: .62; }
#device .tm-lock-badge { position: absolute; z-index: 3; top: 12px; left: 12px; pointer-events: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-pill);
  background: var(--mat-chrome-solid); color: var(--c-label-1); box-shadow: inset 0 0 0 1px var(--c-line-strong); font: var(--fw-caption-2-strong) var(--fs-caption-2)/var(--lh-caption-2) var(--font-ui); letter-spacing: .06em; }

/* ------------------------------------------------------------------ paywall sheets */
#device > .tm-sheet-layer { position: absolute; inset: 0; z-index: 300; }
#device .tm-sheet-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .56); opacity: 0; transition: opacity var(--motion-normal) var(--motion-curve); }
#device .tm-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92%; overflow-y: auto; padding: 10px 20px calc(env(safe-area-inset-bottom, 0px) + 18px);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; background: var(--mat-chrome-solid); box-shadow: var(--e-3), inset 0 1px 0 var(--c-line-strong); text-align: center; color: var(--c-label-1);
  transform: translateY(104%); transition: transform var(--motion-normal) var(--motion-spring); }
#device > .tm-sheet-layer.is-open .tm-sheet-scrim { opacity: 1; }
#device > .tm-sheet-layer.is-open .tm-sheet { transform: none; }
#device > .tm-sheet-layer.is-closing .tm-sheet { transform: translateY(104%); transition-duration: var(--motion-fast); }
#device > .tm-sheet-layer.is-closing .tm-sheet-scrim { opacity: 0; transition-duration: var(--motion-fast); }
#device .tm-grabber { display: block; width: 36px; height: 5px; margin: 0 auto 6px; border-radius: var(--r-pill); background: var(--c-label-4); }
#device .tm-sheet .tm-sheet-close { position: absolute; top: 10px; right: 12px; left: auto; bottom: auto; margin: 0; width: 44px; height: 44px; }
#device .tm-sheet-art { display: grid; place-items: center; height: 72px; margin-top: 4px; }
#device .tm-lock { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-fill-2); box-shadow: inset 0 0 0 1px var(--c-line-strong); color: var(--c-lamp); }
#device .tm-lock svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
#device .tm-sheet-dots { display: inline-flex; gap: 10px; }
#device .tm-sheet-dots i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c-label-3); }
#device .tm-sheet-title { margin: 8px auto 0; max-width: 320px; font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-ui); letter-spacing: var(--tr-title-2); text-wrap: balance; }
#device .tm-sheet-body { margin: 8px auto 0; max-width: 320px; color: var(--c-label-2); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); text-wrap: pretty; }
#device .tm-sheet-body strong { color: var(--c-label-1); font-weight: 600; }
#device .tm-sheet-options { display: grid; gap: 10px; margin-top: 20px; }
#device .tm-sheet-option { margin: 0; }
#device .tm-sheet-option i { display: inline-grid; color: var(--c-label-3); }
#device .tm-sheet-option i svg { width: 15px; height: 15px; }
#device .tm-sheet-option.is-plus { background: rgba(243, 238, 230, .07); box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .24); }
#device .tm-sheet-option-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-row); background: var(--c-lamp); color: var(--c-lamp-ink);
  font: 600 calc(26 * var(--type-unit))/1 var(--font-ui); }
#device .tm-sheet-note { min-height: 18px; margin: 12px 8px 0; color: var(--c-label-2); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); text-wrap: balance; }
#device .tm-sheet-note:empty { min-height: 0; margin: 0; }
#device .tm-sheet-later { margin-top: 6px; }

/* ------------------------------------------------------------------ sign in */
#device .tm-signin { display: flex; flex-direction: column; }
#device .tm-signin-hero { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 18px; }
#device .tm-signin-mark { width: 56px; height: 56px; margin-bottom: 18px; }
#device .tm-signin-title { margin: 0; font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-ui); letter-spacing: var(--tr-title-1); text-wrap: balance; }
#device .tm-signin-lede { margin: 8px 0 0; max-width: 310px; color: var(--c-label-2); font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); letter-spacing: var(--tr-body); text-wrap: balance; }
#device .tm-signin-points { list-style: none; margin: 26px 0 0; padding: 6px 16px; border-radius: var(--r-card); background: var(--c-fill-1); box-shadow: inset 0 0 0 1px var(--c-line); }
#device .tm-signin-points li { display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--c-label-1); font: var(--fw-subhead) var(--fs-subhead)/var(--lh-subhead) var(--font-ui); letter-spacing: var(--tr-subhead); }
#device .tm-signin-points li + li { border-top: 1px solid var(--c-line); }
#device .tm-signin-points i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--r-control); background: var(--c-fill-2); color: var(--c-label-2); }
#device .tm-signin-points svg { width: 16px; height: 16px; }
#device .tm-signin-actions { display: grid; gap: 12px; margin-top: auto; padding-top: 26px; }
/* Sign in with Apple, white style (Apple HIG): system font, logo + title centred, minimum 44pt; 50pt here. */
#device .tm-siwa { appearance: none; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; border: 0; border-radius: var(--r-row);
  background: white; color: black; font: 500 calc(19 * var(--type-unit))/1 var(--font-ui); letter-spacing: -.01em; cursor: pointer; transition: transform var(--motion-press) var(--motion-curve), opacity var(--motion-press) linear; }
#device .tm-siwa .tm-apple { width: 16px; height: 19px; margin-top: -3px; }
#device .tm-google-button { appearance: none; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; border: 0; border-radius: var(--r-row);
  background: var(--c-stage-raised); box-shadow: inset 0 0 0 1px var(--c-line-strong); color: var(--c-label-1); font: 500 calc(17 * var(--type-unit))/1 var(--font-ui); letter-spacing: var(--tr-headline); cursor: pointer; transition: transform var(--motion-press) var(--motion-curve); }
#device .tm-siwa:active, #device .tm-google-button:active { transform: scale(.98); }
#device .tm-signin-status { min-height: 36px; margin: 0 8px; color: var(--c-label-2); text-align: center; font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); text-wrap: balance; }
#device .tm-guest { appearance: none; height: 50px; border: 0; border-radius: var(--r-pill); background: var(--c-fill-2); color: var(--c-label-1); font: var(--fw-headline) var(--fs-headline)/1 var(--font-ui); letter-spacing: var(--tr-headline); cursor: pointer; }
#device .tm-signin-foot { margin-top: 14px; text-align: center; color: var(--c-label-3); font: var(--fw-footnote) var(--fs-footnote)/var(--lh-footnote) var(--font-ui); }
#device .tm-signin-foot p { margin: 0 12px 2px; text-wrap: balance; }

/* ------------------------------------------------------------------ reduced motion / transparency */
@media (prefers-reduced-motion: reduce) {
  #device .tm-sheet, #device > .tm-sheet-layer.is-closing .tm-sheet { transform: none; opacity: 0; transition: opacity var(--motion-fast) linear; }
  #device > .tm-sheet-layer.is-open .tm-sheet { opacity: 1; }
  #device .tm-plan, #device .tm-topup, #device .tm-sheet-option, #device .tm-siwa, #device .tm-google-button { transition: none; }
}
#device.manual-reduced-motion .tm-sheet, #device.manual-reduced-motion > .tm-sheet-layer.is-closing .tm-sheet { transform: none; opacity: 0; transition: opacity var(--motion-fast) linear; }
#device.manual-reduced-motion > .tm-sheet-layer.is-open .tm-sheet { opacity: 1; }
#device .tm-row-lock.is-glyph { margin: 0 6px 0 0; }

/* (17 October 2026, lane ART-C; hub/docs/SCENE-ART-2026-10-17.md) the hero is the velvet rope: the owner's painting, a still layer of
   its own, the size the drawn cards had; the drawn cards stay underneath and are shown only if the painting fails. */
#device .tm-hero-art { position: relative; width: 264px; height: 180px; margin: 0 auto 14px; }
#device .tm-hero-art > .tm-rope { position: absolute; inset: 0; }
#device .tm-hero-art .tm-rope-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 20px rgb(0 0 0 / .5)); }
#device .tm-hero-art:not([data-art="failed"]) > .tm-hero-drawn { display: none; }
#device .tm-hero-art[data-art="failed"] { width: auto; height: auto; margin: 0; }
#device .tm-hero-art[data-art="failed"] > .tm-rope { display: none; }
#device .tm-allow-label { text-align: left; }

/* ------------------------------------------------------------------ price + button in view (owner, 5 November 2026; finished 10 November)
   From the launch review: the prices and the button sat under a long hero and the comparison table, so choosing a plan meant
   scrolling. On a page that sells (.is-buying: not a member's own page) the first screen holds the hero (the velvet rope and its
   card, the name in neon, the line, all shorter), the three plans with their prices and the button; the free week's note, the
   comparison and the full terms follow (membership.js membershipPage). Checked at 320 x 568, 375 x 667, 390 x 844, 430 x 932
   and the Duo's cover (466 x 678). The picture is as tall as the screen leaves room for: the full 180pt on a tall phone, about
   119pt at 667, down to 64pt on the shortest; at larger text sizes, where the words take the room, at most 112pt. */
#device .tm-membership.is-buying { --tm-art-h: clamp(64px, calc(100dvh - 548px), 180px); }
html[data-text-size="larger"] #device .tm-membership.is-buying, html[data-text-size="largest"] #device .tm-membership.is-buying { --tm-art-h: clamp(64px, calc(100dvh - 700px), 112px); }
/* the close button stands in the corner beside the picture (it is narrower than the screen), not in a row of its own above it */
#device .tm-membership.is-buying:not(.dbk-two) > .tm-hero { margin-top: -44px; }
#device .tm-membership.is-buying .tm-hero-art { width: calc(var(--tm-art-h) * 264 / 180); height: var(--tm-art-h); margin-bottom: 4px; }
#device .tm-membership.is-buying .tm-title.tm-neon { padding-block: 8px; }
#device .tm-membership.is-buying .tm-lede { margin-top: 2px; }
#device .tm-membership.is-buying .tm-plans-wrap > .tm-section-title { margin: 14px 0 8px; }
#device .tm-membership.is-buying .tm-plans { gap: 8px; }
#device .tm-membership.is-buying .tm-plan { min-height: 64px; padding-block: 10px; }
#device .tm-membership.is-buying .tm-screen .primary-button.tm-cta, #device .tm-membership.is-buying .primary-button.tm-cta { margin-top: 12px; }
#device .tm-membership.is-buying .tm-trial-terms { margin-top: 6px; }
/* (owner decision, 10 November 2026) the one line right under the buy button: "Renews automatically unless cancelled. Terms ·
   Privacy", small secondary text in the page's own tokens (the trial terms' caption size, the secondary label colour); the links
   take a 44pt-tall tap area from padding, which does not make the line any taller. The full terms stay at the foot. */
#device .tm-buyline { margin: 6px 4px 0; color: var(--c-label-2); text-align: center; font: var(--fw-caption-1) var(--fs-caption-1)/var(--lh-caption-1) var(--font-ui); letter-spacing: var(--tr-caption-1); text-wrap: balance; }
#device .tm-buyline-link { display: inline-block; margin: -14px -6px; padding: 14px 6px; color: var(--c-label-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-label-4); }
/* a short screen (under 600pt tall: a 4-inch iPhone, or a 4.7-inch one in Display Zoom), where the plans' lines also wrap: the
   same page, set closer, so that all three plans and the button are on it together */
@media (max-height: 600px) {
  #device .tm-membership.is-buying .tm-title.tm-neon { padding-block: 4px; }
  /* (10 November 2026) 2pt closer above and below "Choose your plan", and the line under the button 2pt closer to it, so that the
     owner's line ("Renews automatically unless cancelled. Terms · Privacy", two lines at 320pt wide) is whole on a 568pt screen */
  #device .tm-membership.is-buying .tm-plans-wrap > .tm-section-title { margin: 6px 0 4px; }
  #device .tm-membership.is-buying .tm-buyline { margin-top: 4px; }
  #device .tm-membership.is-buying .tm-plans { gap: 6px; }
  #device .tm-membership.is-buying .tm-plan { min-height: 56px; padding-block: 6px; }
  #device .tm-membership.is-buying .tm-screen .primary-button.tm-cta, #device .tm-membership.is-buying .primary-button.tm-cta { margin-top: 10px; }
}
/* the free week's note now follows the plans, as the comparison does */
#device .tm-membership.is-buying .tm-plans-wrap + .tm-status { margin-top: 24px; }
/* Where the words are larger than the screen has room for (Larger Text, a gate's line over the name on a short phone, a trial's
   terms), the button waits at the foot of the screen until the page reaches it, so it is in reach from the first screen on every
   phone; where it fits, it is simply in its place (sticky does nothing then). It never leaves the plans' own section. */
/* (the page's own foot padding is the safe area + 32pt, and sticky measures from inside it: -20pt puts the button 12pt above the
   safe area, not a second safe area higher) */
#device .tm-membership.is-buying .primary-button.tm-cta { position: sticky; bottom: -20px; z-index: 2; box-shadow: 0 6px 30px 8px rgb(0 0 0 / .6); }

/* ===== prototype-src/own-art.css ===== */
/* TRIPTIC's own art (7 October 2026). Runtime: prototype-src/own-art.js. Record: hub/docs/SHELL-AND-OWN-ART-2026-10-07.md.

   Three things are drawn here, all decoration and all TRIPTIC's own (no film poster, still, character or logo):
     .own-art-panel   one object on its flat colour, in a box of any shape ("Try asking for" on Discover uses it; the
                      card round it is laid out in ds-first-run.css);
     .own-wall        the Welcome screen's wall of those objects, where the poster wall was;
     .own-hero        the Membership page's hero: three film cards in their three finishes, as a still picture.

   !IMPORTANT OVERRIDES (each beats an earlier !important):
   - .own-wall inset / opacity / transform / mask beat triptic-critical-experience.css `.premium-welcome .auth-cinema`
     (the poster wall's box, set with !important): the tiles are flat colour, so they are dimmed by one shade and not by
     a filter on every tile.
   - .own-wall-col animation beats nothing: the poster tracks' own rules do not match these columns.

   Nothing here animates anything but transform. */

/* ===== one object on its colour ===== */
.own-art-panel { position: relative; display: block; overflow: hidden; background-color: var(--c-fill-2, #1a1a22); }
/* a square as tall as the panel, centred; it may paint past its own box (a sea or a table top is written wide on purpose) */
.own-art-panel > svg { position: absolute; left: 50%; top: 0; height: 100%; width: auto; aspect-ratio: 1; transform: translateX(-50%); overflow: visible; display: block; pointer-events: none; }
/* a panel wider than it is tall keeps the object clear of its edges; a tall one is filled across */
.own-art-panel.is-empty { background: var(--c-fill-2, #1a1a22); }

/* ===== the Welcome wall =====
   Six columns of square tiles, tilted and dimmed behind the mark and the headline, with the foot faded out, as the
   poster wall was. Alternate columns drift a little, once, and come to rest (never a loop). */
#device .auth-cinema.own-wall {
  inset: -9% -14% 20% !important;
  display: flex; justify-content: center; align-items: flex-start; gap: 12px;
  opacity: 1 !important;
  transform: rotate(-5deg) scale(1.06);
  -webkit-mask-image: linear-gradient(180deg, #000 0 70%, transparent 100%) !important; mask-image: linear-gradient(180deg, #000 0 70%, transparent 100%) !important;
}
#device .own-wall .own-wall-col { flex: none; display: grid; gap: 12px; width: 112px; margin-top: -84px; will-change: transform; }
#device .own-wall .own-wall-col.is-down { margin-top: -148px; }
#device .own-wall .own-wall-tile { width: 112px; height: 112px; border-radius: 24px; box-shadow: 0 18px 40px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(255 255 255 / .1); }
/* one shade over the whole wall: darker where the words are, so the mark, the headline and the button stay the subject */
#device .own-wall .auth-cinema-shade {
  position: absolute; inset: -6%; z-index: 2; pointer-events: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background:
    radial-gradient(96% 34% at 50% 37%, rgb(5 5 9 / .5), rgb(5 5 9 / 0) 100%),
    linear-gradient(180deg, rgb(5 5 9 / .46) 0, rgb(5 5 9 / .58) 30%, rgb(5 5 9 / .87) 53%, rgb(5 5 9 / .97) 78%) !important;
}
@keyframes own-wall-up { from { transform: translateY(28px); } to { transform: translateY(-28px); } }
@keyframes own-wall-down { from { transform: translateY(-28px); } to { transform: translateY(28px); } }
@media (prefers-reduced-motion: no-preference) {
  #device:not(.manual-reduced-motion) .own-wall .own-wall-col.is-up { animation: own-wall-up 24s var(--motion-drift) 1 both; }
  #device:not(.manual-reduced-motion) .own-wall .own-wall-col.is-down { animation: own-wall-down 24s var(--motion-drift) 1 both; }
}
/* the launch cover owns the entrance: the wall waits at its first frame until the cover has left */
#device .welcome-screen.launch-destination.is-clocked .own-wall-col { animation-play-state: paused !important; }

/* ===== the Membership hero: three film cards, three finishes =====
   A still picture. The card component is another layer's; this draws its own small cards: dark stock, a gold hairline,
   a drawing in its panel and the three arches as the maker's mark. Standard on the left, Rare in the middle (black
   and gold, the arches standing behind the object), Foil on the right (a sheen laid over the drawing). */
#device .tm-triptych.own-hero { width: 264px; height: 184px; }
#device .own-hero .own-card {
  position: absolute; top: 16px; width: 100px; height: 150px; padding: 5px 5px 0; box-sizing: border-box;
  display: flex; flex-direction: column;
  border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, rgb(21 25 54), rgb(11 13 30));
  box-shadow: var(--e-2), inset 0 0 0 1px rgb(232 178 48 / .5), inset 0 0 0 2.5px rgb(11 13 30), inset 0 0 0 3px rgb(232 178 48 / .18);
}
#device .own-hero .own-card.is-standard { left: 6px; transform: rotate(-9deg) translateY(10px); }
#device .own-hero .own-card.is-foil { right: 6px; transform: rotate(9deg) translateY(10px); background: linear-gradient(160deg, rgb(44 26 84), rgb(13 20 60) 60%, rgb(12 44 66)); }
#device .own-hero .own-card.is-rare {
  left: 50%; top: 0; width: 116px; height: 174px; transform: translateX(-50%); z-index: 2;
  background: linear-gradient(180deg, rgb(24 20 12), rgb(8 7 5));
  box-shadow: var(--e-3), inset 0 0 0 1px rgb(240 200 96 / .9), inset 0 0 0 2.5px rgb(8 7 5), inset 0 0 0 3px rgb(240 200 96 / .34);
}
#device .own-hero .own-card-art { flex: 1 1 auto; border-radius: 8px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
#device .own-hero .own-card-foot { flex: none; display: grid; place-items: center; height: 26px; }
#device .own-hero .own-arches { display: block; width: 26px; height: 12px; fill: rgb(232 178 48 / .88); stroke: none; }
#device .own-hero .is-rare .own-card-foot { height: 30px; }
#device .own-hero .is-rare .own-arches { width: 30px; height: 14px; fill: rgb(246 214 128); }
/* the foil: a still frame of the sheen, laid over the drawing only */
#device .own-hero .own-card-foil {
  position: absolute; left: 5px; right: 5px; top: 5px; bottom: 26px; border-radius: 8px; pointer-events: none; mix-blend-mode: screen; opacity: .62;
  background: linear-gradient(118deg, rgb(255 96 150 / 0) 8%, rgb(255 118 150 / .7) 26%, rgb(255 214 110 / .75) 42%, rgb(120 240 170 / .7) 58%, rgb(100 180 255 / .7) 74%, rgb(170 120 255 / 0) 92%);
}
@media (prefers-reduced-transparency: reduce) { #device .own-hero .own-card-foil { opacity: .4; } }

/* ===== a suggestion card that is about a named film: the film's poster (8 October 2026) =====
   Shown only where the request names the film (runtime-base.js). The poster fills the card's picture area, centred on the
   upper part so faces are not cut at the eyes; a soft dark gradient at the foot holds the words and "Use this request".
   The card is the same card as a drawing card (same shape, size, type, selection ring). No lettering of ours is added,
   and no filter is put on the poster: its artwork is shown as it is. If the picture does not load the card keeps this
   quiet dark ground and its words. Specificity beats the older !important rules on .prompt-card (ds-rituals.css, etc.). */
html.ds #device .ds-fr-discover .prompt-card.prompt-poster-card {
  position: relative; isolation: isolate; min-height: 264px !important;
  filter: none !important; box-shadow: var(--e-1) !important;
  background: #101015 !important;
}
html.ds #device .ds-fr-discover .prompt-card.prompt-poster-card::before,
html.ds #device .ds-fr-discover .prompt-card.prompt-poster-card::after { content: none !important; display: none !important; }
html.ds #device .ds-fr-discover .prompt-card.prompt-poster-card .prompt-art.prompt-poster {
  position: absolute !important; inset: 0; width: 100%; height: 100%; flex: none; display: block; overflow: hidden;
  box-shadow: none !important; background: #101015;
}
html.ds #device .ds-fr-discover .prompt-card.prompt-poster-card .prompt-art.prompt-poster > img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
}
html.ds #device .ds-fr-discover .prompt-card.prompt-poster-card .prompt-art.prompt-poster > img[hidden] { display: none !important; }
html.ds #device .ds-fr-discover .prompt-card.prompt-poster-card .prompt-copy {
  position: absolute !important; inset: auto 0 0 0 !important; z-index: 1;
  min-height: 0 !important; margin: 0 !important; padding: 84px 16px 15px !important;
  background: linear-gradient(0deg, rgb(5 5 8 / .92) 0%, rgb(5 5 8 / .8) 38%, rgb(5 5 8 / .42) 66%, rgb(5 5 8 / 0) 100%) !important;
}

/* (17 October 2026, lane ART-C; hub/docs/SCENE-ART-2026-10-17.md) THE SCENE ART's layers (prototype-src/scene-art.js): each painted
   picture is its own positioned element, .art-layer, so it can later be made to drift on its own; nothing here moves it. Where a
   surface keeps its drawn version under the picture, the host says whether the picture is in (data-art: wait, ready, failed). */
html.ds .art-layer { pointer-events: none; -webkit-user-select: none; user-select: none; }
html.ds .art-layer > img { display: block; -webkit-user-drag: none; }

/* ===== prototype-src/device-fit.css ===== */
/* TRIPTIC device fit — reveal layout from the phone's real size (round 3).

   Gate: html[data-fit] (set by device-fit.js once the canvas is measured), so
   without the runtime every earlier layer behaves exactly as before. All
   numbers come from device-fit.js (--fit-*, --dv-*): one source of truth for
   iPhone SE 375x548 to Pro Max 430x932, Safari toolbar shown or collapsed.

   Loaded after membership.css (last before ui-icons.css). Specificity is
   html[data-fit] #device .trip-critical-layer…, which outranks every earlier
   reveal rule (#device + classes at most); !important only where an earlier
   rule is !important (search-flow-premium.css, frontend-completion.css,
   motion-surfaces.css, triptych-signature.css, ds-film-share.css).

   1. Shared positions (header, request capsule) for every live phase, so the
      settle never jumps.
   2. Ceremony: the sealed stage is scaled into the band between the capsule
      and the status copy, and centred there (moves down on taller phones).
   3. Settled: title, card stage (card width from the height), rank rail with
      legible numbers, hint, and a bottom-anchored dock (CTA + Share/Save/
      Refine). Nothing scrolls, overlaps or clips at any supported size.
   4. Turn faces: the face pointing away is removed at the edge-on moment and
      the back's text fades before the turn, so no engine can paint a mirrored
      SEALED / rank / title even if backface culling is flattened away.
   Safari: no overflow-clip-margin; 3D stays inside the card; nothing here
   puts opacity or filter on a 3D ancestor. */

/* ------------------------------------------------------------------ 1 */
html[data-fit] #device .trip-critical-layer{
  --critical-header-y:var(--fit-header-y)!important;
  --critical-request-settled-y:var(--fit-cap-y)!important;
  --critical-request-settled-h:var(--fit-cap-h)!important;
  --search-request-y:var(--fit-cap-y)!important;
  --search-title-y:var(--fit-title-y)!important;
  --search-shelf-y:var(--fit-stage-y)!important;
  --surf-ready-top:var(--fit-ready-y)!important;
  --search-hint-y:var(--fit-rail-y)!important;
}
/* Friday settled: the dock has one more row, so the deck uses the geometry
   computed with that row (--fitx-*); header and capsule keep their
   ceremony positions so nothing above the title moves at the settle. */
html[data-fit] #device .trip-critical-layer[data-mode="friday"].trip-phase-settled:has(.critical-friday-refresh:not([hidden])){
  --fit-title-y:var(--fitx-title-y);
  --fit-stage-y:var(--fitx-stage-y);
  --fit-stage-h:var(--fitx-stage-h);
  --fit-card-w:var(--fitx-card-w);
  --fit-rail-y:var(--fitx-rail-y);
}
html[data-fit] #device .trip-critical-layer .critical-header{
  top:var(--fit-header-y)!important;
  left:var(--fit-side)!important;
  right:var(--fit-side)!important;
}
html[data-fit] #device .trip-critical-layer.is-live .critical-request-capsule{
  top:var(--fit-cap-y)!important;
  left:var(--fit-side)!important;
  right:var(--fit-side)!important;
  height:var(--fit-cap-h)!important;
  min-height:0!important;
  box-sizing:border-box!important;
  padding-top:0!important;
  padding-bottom:0!important;
  align-content:center!important;
}
html[data-fit] #device .trip-critical-layer.is-live .critical-request-capsule>p{
  -webkit-line-clamp:2!important;
  line-clamp:2;
}
html[data-fit="tight"] #device .trip-critical-layer.is-live .critical-request-capsule>p{
  -webkit-line-clamp:1!important;
  line-clamp:1;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  overflow:hidden!important;
  display:block!important;
}
html[data-fit="tight"] #device .trip-critical-layer.is-live .critical-request-capsule>span{margin-bottom:2px!important}

/* ------------------------------------------------------------------ 2 */
/* One layout `top` (the settled shelf) plus a compositor translate to the
   ceremony position (motion-surfaces.css); here the translate target and a
   scale chosen from the free band replace the old 278/322px guesses. */
html[data-fit] #device .trip-critical-layer:not(.trip-phase-settled) .critical-card-stage{
  transform:scale(var(--fit-ready-scale))!important;
  transform-origin:50% 0!important;
}
/* Bottom stack, one flow: status block anchored on top of its own Reveal all
   row (both from device-fit.js), so a wrapped hint grows upward into the
   reserved slack instead of under the button. */
html[data-fit] #device .trip-critical-layer:is(.trip-phase-forming,.trip-phase-ready,.trip-phase-revealing,.trip-phase-settled) .critical-status{
  top:auto!important;
  bottom:var(--fit-status-bottom)!important;
  left:var(--fit-side)!important;
  right:var(--fit-side)!important;
}
html[data-fit] #device .trip-critical-layer>.mo-reveal-all{
  top:var(--fit-reveal-all-y)!important;
  bottom:auto!important;
  height:44px;
  max-width:calc(100% - 2 * var(--fit-side));
}
html[data-fit][data-device-h="compact"] #device .trip-critical-layer .critical-status>h1{font-size:20px!important}
html[data-fit][data-device-h="compact"] #device .trip-critical-layer .critical-status>p{margin-top:6px!important}

/* ------------------------------------------------------------------ 3 */
html[data-fit] #device .trip-critical-layer.trip-phase-settled{
  overflow-y:auto!important;
  scroll-padding-bottom:0!important;
}
html[data-fit] #device .trip-critical-layer.trip-phase-settled .critical-results-heading{
  top:var(--fit-title-y)!important;
  left:var(--fit-side)!important;
  right:var(--fit-side)!important;
}
html[data-fit] #device .trip-critical-layer.trip-phase-settled .critical-results-heading>h1{
  margin-top:6px!important;
  font-size:var(--fit-h1)!important;
  line-height:1!important;
}
html[data-fit="tight"] #device .trip-critical-layer.trip-phase-settled .critical-results-heading>.eyebrow{display:none!important}
html[data-fit="tight"] #device .trip-critical-layer.trip-phase-settled .critical-results-heading>h1{margin-top:0!important}

/* Card stage: as tall as the deck it holds; cards sized from the height. */
html[data-fit] #device .trip-critical-layer.trip-phase-settled .critical-card-stage{
  top:var(--fit-stage-y)!important;
  height:var(--fit-stage-h)!important;
}
html[data-fit] #device .trip-critical-layer.trip-phase-settled .critical-card[data-slot],
html[data-fit] #device .trip-critical-layer.trip-phase-settled .critical-card:not([data-slot]){
  width:var(--fit-card-w)!important;
  height:auto!important;
  aspect-ratio:2/3!important;
}

/* The match pill never runs past a narrow card's edge. */
html[data-fit] #device .trip-critical-layer.trip-phase-settled .critical-card-front small{
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  line-height:13px!important;
  box-sizing:border-box!important;
}
html[data-fit] #device .trip-critical-layer.trip-phase-settled .critical-card-front small{padding-left:8px!important;padding-right:8px!important;letter-spacing:0!important}
html[data-fit][data-device-w="narrow"] #device .trip-critical-layer.trip-phase-settled .critical-card-front small{padding-left:7px!important;padding-right:7px!important;letter-spacing:-.01em!important}
html[data-fit] #device .trip-critical-layer.trip-phase-settled .critical-card-front{padding-left:12px!important;padding-right:12px!important}

/* Rank rail under the cards: the three frames carry readable numerals. */
html[data-fit] #device .trip-critical-layer.trip-phase-settled .critical-compare-hint{
  top:var(--fit-rail-y)!important;
  transform:translate(-50%,0)!important;
  gap:2px!important;
  z-index:11!important;
}
html[data-fit="tight"] #device .trip-critical-layer.trip-phase-settled .critical-compare-hint>span{display:none!important}
html[data-fit] #device .trip-critical-layer.trip-phase-settled .critical-compare-hint .triptych-spine{width:188px!important}
html[data-fit] #device .trip-critical-layer.trip-phase-settled .triptych-spine>button>i{
  width:22px!important;
  height:30px!important;
  border-radius:6px!important;
}
html[data-fit] #device .trip-critical-layer.trip-phase-settled .triptych-spine>button[aria-pressed="true"]>i{height:34px!important}
html[data-fit] #device .trip-critical-layer.trip-phase-settled .triptych-spine>button>i>b{
  opacity:1!important;
  font:650 13px/1 system-ui,-apple-system,sans-serif!important;
  color:#f4f1fb!important;
  font-variant-numeric:tabular-nums;
}

/* Dock: anchored to the bottom of the layer, never a scrolled document. */
html[data-fit] #device .trip-critical-layer.trip-phase-settled .critical-results{
  position:absolute!important;
  top:auto!important;
  bottom:var(--fit-bottom)!important;
  left:var(--fit-side)!important;
  right:var(--fit-side)!important;
  width:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  gap:var(--fit-dock-gap)!important;
  align-content:end!important;
}
html[data-fit] #device .trip-critical-layer.trip-phase-settled .critical-film-cta{
  position:relative!important;
  bottom:auto!important;
  height:var(--fit-cta-h)!important;
  min-height:var(--fit-cta-h)!important;
  margin:0!important;
}
html[data-fit] #device .trip-critical-layer[data-mode="friday"].trip-phase-settled .critical-results>.critical-friday-refresh:not([hidden]){
  position:relative!important;
  bottom:auto!important;
  height:46px!important;
  min-height:46px!important;
  margin:0!important;
}
html[data-fit] #device .trip-critical-layer[data-mode="friday"].trip-phase-settled .critical-results>.critical-friday-refresh:not([hidden])~.critical-result-toolbar{margin-top:0!important}
/* Friday's title is longer: one line at every width. */
html[data-fit] #device .trip-critical-layer[data-mode="friday"].trip-phase-settled .critical-results-heading>h1{
  white-space:nowrap!important;
  font-size:min(var(--fit-h1),calc((var(--dv-w) - 2 * var(--fit-side)) * .098))!important;
}
html[data-fit] #device .trip-critical-layer.trip-phase-settled .critical-result-toolbar{
  position:relative!important;
  bottom:auto!important;
  height:var(--fit-toolbar-h)!important;
  min-height:var(--fit-toolbar-h)!important;
  margin:0!important;
}
html[data-fit] #device .trip-critical-layer.trip-phase-settled .critical-result-toolbar::after{
  top:calc(-1 * (var(--fit-cta-h) + var(--fit-dock-gap) + 18px))!important;
  bottom:calc(-1 * var(--fit-bottom))!important;
}
html[data-fit] #device .trip-critical-layer.trip-phase-settled .critical-result-toolbar>button{
  height:var(--fit-toolbar-h)!important;
}
/* Compact heights: icon and label side by side in a 44px row. */
html[data-fit][data-device-h="compact"] #device .trip-critical-layer.trip-phase-settled .critical-result-toolbar>button{
  flex-direction:row!important;
  justify-content:center!important;
  align-items:center!important;
  gap:4px!important;
}
html[data-fit][data-device-h="compact"] #device .trip-critical-layer.trip-phase-settled .critical-result-toolbar>button>svg{
  width:34px!important;
  height:34px!important;
  padding:8px!important;
}

/* ------------------------------------------------------------------ 4 */
/* Root cause found on the Friday entry (and any ritual that starts while the
   Discover host is still arriving): motion-system.css 2a pauses every
   animation on .trip-critical-host.critical-engaged, including the host's
   own ds-screen-arrive, which then sits at its first frame — opacity .18 and
   a translate3d on the ancestor of every card. That dims the whole ceremony
   and, on WebKit, flattens the cards' 3D so the back face (mirrored SEALED)
   paints through the front. The host never animates while engaged. */
html[data-fit] #device .trip-critical-host.critical-engaged{
  animation:none!important;
  opacity:1!important;
}

/* The back's text (rank, ? glyph, SEALED / TAP TO REVEAL) leaves as the card
   lifts and is gone before the turn passes ~60deg; the face that points away
   is hidden from the edge-on moment (~19% of the spring), the front's text
   arrives after it. Faces are leaves of the card's own 3D context, so this
   never flattens it. */
html[data-fit] #device .trip-critical-layer .critical-card:is(.is-opening,.is-flipping):not(.is-revealed) .critical-card-back>:is(b,small,.critical-question,.card100-secret){
  opacity:0!important;
  transition:opacity var(--motion-press) linear!important;
}
html[data-fit] #device .trip-critical-layer .critical-card.is-flipping .critical-card-back{
  animation:fit-face-out var(--mo-turn,700ms) linear both;
}
html[data-fit] #device .trip-critical-layer .critical-card.is-flipping .critical-card-front{
  animation:fit-face-in var(--mo-turn,700ms) linear both;
}
html[data-fit] #device .trip-critical-layer.critical-final-reveal .critical-card.is-flipping :is(.critical-card-back,.critical-card-front){
  animation-duration:var(--mo-turn-final,800ms);
}
html[data-fit] #device .trip-critical-layer .critical-card.is-flipping .critical-card-front>:is(strong,small,em){
  animation:fit-text-in var(--mo-turn,700ms) linear both;
}
@keyframes fit-face-out{0%,18%{visibility:visible}19%,100%{visibility:hidden}}
@keyframes fit-face-in{0%,18%{visibility:hidden}19%,100%{visibility:visible}}
@keyframes fit-text-in{0%,20%{opacity:0}34%,100%{opacity:1}}
/* Reduced motion / quick reveals crossfade without a turn: no face timing. */
@media(prefers-reduced-motion:reduce){
  html[data-fit] #device .trip-critical-layer .critical-card.is-flipping :is(.critical-card-back,.critical-card-front,.critical-card-front>:is(strong,small,em)){animation:none!important}
}
html[data-fit] #device.manual-reduced-motion .trip-critical-layer .critical-card.is-flipping :is(.critical-card-back,.critical-card-front,.critical-card-front>:is(strong,small,em)),
html[data-fit] #device.manual-quick-reveals .trip-critical-layer .critical-card.is-flipping :is(.critical-card-back,.critical-card-front,.critical-card-front>:is(strong,small,em)){animation:none!important}

/* ------------------------------------------------------------------ 5 */
/* Daily Cryptic home on short phones: the sealed card scales with the
   available height (not just the type), so Begin and the links stay in view
   on an SE with Safari's toolbar showing. Regular and tall are untouched. */
html[data-fit][data-device-h="compact"] #device .cryptic-home-screen .ds-seal-card{
  height:clamp(132px,calc(var(--dv-h) - 380px),252px);
  width:calc(clamp(132px,calc(var(--dv-h) - 380px),252px) * 2 / 3);
}
html[data-fit][data-device-h="compact"] #device .cryptic-home-screen .ds-hero h2{margin-top:18px}
html[data-fit][data-device-h="compact"][data-device-w="narrow"] #device .cryptic-home-screen .ds-hero h2{font-size:26px;line-height:1.15}
html[data-fit][data-device-h="compact"] #device .cryptic-home-screen .ds-hero{padding-bottom:10px}

/* ------------------------------------------------------------------ 6 */
/* Software keyboard on Discover ("when I type the top is cropped off").
   device-fit.js pins the window, shell and #device at 0 and publishes
   html[data-keyboard] + --vv-h; the keyboard owner (apple-integration) sizes
   the screen to the visible band and reveals the composer inside it. Here
   the band is made enough: the brand header stays pinned at the top of the
   screen's own scrollport (it can never be scrolled away while typing), the
   heading condenses, and on the tightest band (SE with Safari's toolbar) it
   steps aside so the field sits directly under the header. The reveal
   respects the header through scroll-padding-top. */
html[data-fit][data-keyboard="open"] #device.keyboard-open>.premium-discover{
  scroll-padding-top:calc(var(--discover-safe-top,0px) + 64px)!important;
}
html[data-fit][data-keyboard="open"] #device.keyboard-open>.premium-discover>.app-header{
  position:sticky!important;
  top:0!important;
  z-index:24!important;
  height:calc(var(--discover-safe-top,0px) + 56px)!important;
  padding-top:calc(var(--discover-safe-top,0px) + 8px)!important;
  /* full-bleed band: the backing reaches both screen edges, not just the gutter */
  margin:0 calc(-1 * var(--triptic-brand-gutter,20px))!important;
  padding-inline:var(--triptic-brand-gutter,20px)!important;
  background:linear-gradient(180deg,var(--c-stage,#050507) 0%,var(--c-stage,#050507) 78%,rgba(5,5,7,0) 100%)!important;
}
html[data-fit][data-keyboard="open"] #device.keyboard-open>.premium-discover>.discover-heading{
  margin-top:2px!important;
  margin-bottom:10px!important;
}
html[data-fit][data-keyboard="open"] #device.keyboard-open>.premium-discover>.discover-heading>p{display:none!important}
html[data-fit][data-keyboard="open"] #device.keyboard-open>.premium-discover>.discover-heading>h1{
  font-size:28px!important;
  line-height:34px!important;
}
html[data-fit][data-keyboard="open"] #device.keyboard-open>.premium-discover>.premium-composer{margin-top:0!important}
html[data-fit][data-keyboard="open"][data-keyboard-room="tight"] #device.keyboard-open>.premium-discover>.discover-heading{display:none!important}
html[data-fit][data-keyboard="open"][data-keyboard-room="tight"] #device.keyboard-open>.premium-discover>.premium-composer{margin-top:4px!important}
/* The tab bar leaves with the keyboard; its edge fades (ds-navigation.css,
   ds-first-run.css) must not stay behind and dim the composer's footer and
   Find three. */
html[data-fit][data-keyboard="open"] #device.keyboard-open>:is(.ds-edge-fade,.ds-discover-fade){display:none!important}

/* Cryptic play ("when you start typing the screen just disappears", owner,
   2 Oct 2026). The play screen used to shrink itself to the visual viewport's
   height but stay at the top of the canvas, while iOS had already panned the
   visual viewport down to the field: the visible band then showed the empty
   canvas under the shrunk screen (black). It now follows the same contract as
   every other typing screen: device-fit.js pins the canvas, the keyboard owner
   publishes the visible band, and the screen sits exactly in that band, so the
   clue, the field and Guess are all above the keyboard wherever iOS pans. */
html[data-fit] #device.keyboard-open>.cg-play{
  top:var(--request-viewport-top,0px)!important;
  bottom:auto!important;
  height:var(--request-viewport-height,100%)!important;
  min-height:0!important;
  max-height:var(--request-viewport-height,100%)!important;
}

/* ------------------------------------------------------------------ 7 */
/* Waiting ("Finding your three" / "Still looking." + Did you know?): the
   owner saw it "squished" — engine and copy crammed at the top over a large
   empty floor. Geometry from device-fit.js (--fit-wait-*): the copy block is
   anchored to the bottom with the fact card's room reserved (a fact arriving
   or rotating never moves the status line), and the anticipation engine is
   scaled up (the independent `scale` property, so every phase transform in
   search-flow-premium/frontend-completion keeps working) and centred in the
   band between the request capsule and the copy. Replaces the fixed
   350px / 260px offsets in recommendation-waiting.css for the critical layer;
   Friday's own waiting page (.friday-waiting) is untouched. */
html[data-fit] #device .trip-critical-layer.has-waiting-note{
  overflow-x:hidden!important;
}
html[data-fit] #device .trip-critical-layer.has-waiting-note .critical-engine-stage{
  top:var(--fit-wait-engine-y)!important;
  scale:var(--fit-wait-engine-scale);
  /* `scale` composes outside the phase transform (translateX(-50%) ...), so
     about the 50% origin it would also scale that -50% and pull the engine
     left; the independent `translate` puts the centre back on the axis. */
  translate:calc((var(--fit-wait-engine-scale) - 1) * 50%) 0;
}
html[data-fit] #device .trip-critical-layer.has-waiting-note .trip-waiting-copy{
  margin:var(--fit-wait-copy-y) var(--fit-side) 0!important;
  padding-bottom:var(--fit-wait-bottom)!important;
}
html[data-fit][data-device-h="compact"] #device .trip-critical-layer.has-waiting-note .trip-waiting-note{margin-top:18px;padding:16px}
html[data-fit][data-device-h="tall"] #device .trip-critical-layer.has-waiting-note .trip-waiting-note{padding:24px}
html[data-fit][data-device-h="tall"] #device .trip-critical-layer.has-waiting-note .trip-waiting-note p{font-size:17px;line-height:1.55}
html[data-fit][data-device-h="tall"] #device .trip-critical-layer.has-waiting-note .critical-status>h1{font-size:30px!important}

/* ------------------------------------------------------------------ 6. accessibility fit (lane H, 20 October 2026)
   Findings of the device and accessibility review (hub/docs/DEVICE-REVIEW-2026-10-20.md), fixed here so each owning
   layer stays as it is: a target is grown by an invisible hit area (never by moving what is drawn), a note that would
   stand over a page's own message steps aside, focus is always visible to a keyboard. */
/* Flick's tip: its close is a 36pt circle; the hit area is 44pt (drawn the same) */
html[data-fit].ds .sps-x { position: relative; }
html[data-fit].ds .sps-x::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
/* The Ten, unavailable: the message stands in the middle of the page; Flick's first-time tip about the list would cover it */
html[data-fit].ds #device .ds-tt-screen.is-unavailable .sps-tip { display: none; }
/* Library's five rooms on the narrowest phones (320pt, iPhone SE 1st gen and Zoomed SE): "Watchlist" in semibold was
   wider than its fifth of the bar and ran into "Watched", even at stingers.css's 12.5pt. 11.5pt and tighter there only; larger text still stacks
   the rooms in two columns (ds-library-collections.css, .is-stacked). (The bar is not inside the .dslc-rooms container, so
   this is the window's width.) */
@media (max-width: 359.98px) {
  html[data-fit].ds #device .dslc-seg.dslc-rooms-seg[style*="--n: 5"]:not(.is-stacked) .dslc-seg-btn { padding: 0; font-size: calc(11.5 * var(--type-unit)); letter-spacing: -.035em; }
}
/* The tab bar at the largest text on a 320pt phone: "Collections" ran 6pt past its fifth of the bar. A tenth smaller there. */
html[data-fit][data-text-size="largest"][data-device-w="narrow"] #device > .persistent-glass-nav > button .ds-dock-label { font-size: 90%; letter-spacing: -.01em; }
/* A game's How to play at the largest text on a 320pt phone was squeezed to 39pt wide by the header row */
html[data-fit] .gs .gs-help, html[data-fit] .gs .gs-x { flex: none; min-width: 44px; }
/* Your three at the largest text on a short phone (iPhone SE): the second line of why it was chosen ran under Explore the
   strongest match. One line there; the whole sentence is on the film's page and is read by VoiceOver in full.
   (2 November 2026: only where nothing was measured; showpiece.js fitWhy sets --sp-why-lines to the lines really above the button) */
html[data-fit][data-text-size="largest"] #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp)[data-sp-size="short"] > .sp-caption > .sp-why { -webkit-line-clamp: var(--sp-why-lines, 1); }
/* Discover's request box with a keyboard: the field itself draws no ring (the glass box is the field), and the box's own
   focus glow is faint. Reached by Tab, the box takes the beam ring every other control has (design-system.css). */
html[data-fit][data-fit-keys].ds #device .screen.dg2 > .premium-composer:has(> textarea:focus-visible)::before {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .65), 0 0 0 2px var(--c-beam), 0 22px 44px -18px rgb(160 130 255 / .7) !important;
}
/* The rating deck (swipe-deck.js) on the shortest phones (iPhone SE 320 x 568 and 375 x 667 with a toolbar): the card was
   squeezed to 129 x 193 and its title, set for a 300pt card, covered the poster, so it read as a text card; "1 of 15" ran
   off the screen. The chrome around the card is tightened so the card grows, and the card's words are sized by the card
   itself (it is a size container: swipe-deck.css), so the poster shows with its title in a band at its foot. */
@media (max-height: 600px) {
  html[data-fit].ds #device .first-run-screen.ds-fr-taste > header { margin-top: 4px; grid-template-columns: 52px 1fr auto; }
  html[data-fit].ds #device .first-run-screen.ds-fr-taste > header .ds-fr-progress { gap: 3px; justify-content: center; }
  html[data-fit].ds #device .first-run-screen.ds-fr-taste > header .ds-fr-count { font-size: calc(13 * var(--type-unit)); }
  html[data-fit].ds #device .first-run-screen.ds-fr-taste .onboarding-copy > .ds-fr-section { display: none; }
  html[data-fit].ds #device .first-run-screen.ds-fr-taste .onboarding-copy h1 { font-size: calc(19 * var(--type-unit)) !important; line-height: calc(24 * var(--type-unit)) !important; }
  html[data-fit].ds #device .first-run-screen.ds-fr-taste .taste-deck { margin: 8px 0 34px !important; }   /* (29 October 2026) 16pt under the stack: ds-first-run.css */
  html[data-fit].ds #device .first-run-screen.ds-fr-taste .ds-fr-actions .ds-fr-disc { width: 52px; height: 52px; }
  html[data-fit].ds #device .first-run-screen.ds-fr-taste .ds-fr-actions > button { gap: 3px; }
}
@container (max-width: 230px) {
  html[data-fit].ds #device .first-run-screen.ds-fr-taste .taste-swipe-card .taste-film-copy { padding: 0 10px 10px !important; align-content: end; }
  html[data-fit].ds #device .first-run-screen.ds-fr-taste .taste-swipe-card .taste-film-copy strong { font-size: max(13px, 8.5cqi) !important; line-height: 1.2 !important; }
  html[data-fit].ds #device .first-run-screen.ds-fr-taste .taste-swipe-card .taste-film-copy span { font-size: max(11px, 6.5cqi) !important; line-height: 1.25 !important; }
}
/* End Credits at the largest text on the shortest iPhone: the hint button wrapped to three lines (106pt tall) and its lower
   half went under the in-game keyboard. Above the keyboard the hint and Pass keep one 44pt line (still well above 11pt). */
@media (max-height: 700px) {
  html[data-fit][data-text-size="largest"] .ec.is-kb .ec-help .ec-hintbtn { font-size: 14px; flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; }
  html[data-fit][data-text-size="largest"] .ec.is-kb .ec-help .ec-hintbtn .gs-hint-l { white-space: nowrap; overflow-wrap: normal; }
  html[data-fit][data-text-size="largest"] .ec.is-kb .ec-help .ec-hintbtn .gs-cost { font-size: 12px; }
  html[data-fit][data-text-size="largest"] .ec.is-kb .ec-help .ec-pass { font-size: 14px; }
}

/* ===== prototype-src/feel.css ===== */
/* TRIPTIC feel: the film grain (owner, 17 October 2026; hub/docs/DESIGN-2026-10-17.md; feel.js makes the tile).
   A very faint, still grain over the dark backgrounds, like the stock a film is printed on. One 96 px tile of noise,
   made once, laid over the display at about 3.5% (the tile's own alpha) with overlay blending: overlay leaves pure black and pure white exactly
   as they were, so the grain shows in the dark greys and never on the text. It sits under the tab bar, the sheets and
   the toasts. It never moves (so Reduce Motion changes nothing); it is off in Low Power and under Reduce Transparency,
   and it is not drawn at all where the grain tile could not be made. */
html.ds.feel-grain-on #device > .feel-grain {
  position: absolute; inset: 0; z-index: 11; display: block; pointer-events: none;
  background-image: var(--feel-grain); background-size: 96px 96px; background-repeat: repeat;
  mix-blend-mode: overlay;   /* the tile carries its own 3.5% (alpha 9/255): no near-invisible layer for WebKit to draw whole (scripts/lib/glow-audit.mjs "faint") */
  contain: strict;
}
html.ds:not(.feel-grain-on) #device > .feel-grain,
html.ds.mo-low-power #device > .feel-grain,
html.ds.reduce-transparency #device > .feel-grain,
html.ds #device.manual-solid > .feel-grain { display: none; }
@media (prefers-reduced-transparency: reduce) { html.ds #device > .feel-grain { display: none; } }

/* ===== prototype-src/feel-wire.css ===== */
/* TRIPTIC feel, wired (Lane 7, 18 October 2026; record hub/docs/DESIGN-2026-10-18.md; behaviour feel-wire.js, feel.js,
   hero-transition.js flight()). Everything that moves here moves by transform, translate, scale or opacity, on the motion tokens;
   nothing loops. The light comes from the one light source (design-system.css: --light-angle, the rim on the top and left edges);
   the materials are the owner's own textures (public/assets/games: brass, wallpaper, carpet; set on the room by commute-corner.js)
   and the film grain's tile (feel.js), plus gradients: no new image. */

html.ds {
  /* the materials' few colours, one place */
  --mat-brass-hi: #f3dca0; --mat-brass: #d9b46a; --mat-brass-lo: #6b4a18;
  --mat-paper-sheen: rgb(255 250 235 / .26); --mat-paper-shade: rgb(70 35 10 / .1);
  --mat-velvet-sheen: rgb(255 190 204 / .075); --mat-velvet-shade: rgb(8 2 4 / .28);
  --mat-house: rgb(255 214 150 / .2); --mat-house-up: rgb(255 226 176 / .14);
  --mat-warm: rgb(255 160 84 / .16); --mat-warm-low: rgb(255 120 90 / .08);
  --mat-stock: #050506;
}

/* ===================================================================== 1. scenery parallax (feel.js parallax: a few px each)
   A full-bleed painted layer is drawn 4% larger, so its few px of travel never show an edge. */
html.ds #device :is(.cu-door-cinema, .prompt-scene-layer, .ds-cs-board, .stg-backdrop, .ds-fr-hero-layer).art-layer { scale: 1.04; }
html.ds:is(.reduce-motion, .mo-low-power) #device .art-layer, html.ds #device.manual-reduced-motion .art-layer { scale: none; transform: none !important; }
@media (prefers-reduced-motion: reduce) { html.ds #device .art-layer { scale: none; transform: none !important; } }

/* ===================================================================== 2. tilt (feel.js tilt: --feel-tx / --feel-ty, 2 to 4 px)
   Only drawn while the tilt is live (html.feel-tilt-on: granted, and neither Reduce Motion nor Low Power). A film's poster is its
   page's ::before: it moves alone (a hair larger, so its edge never shows), the title and the bar stay put. */
html.ds.feel-tilt-on #device [data-tilt]:not(.film-hero) { translate: var(--feel-tx, 0px) var(--feel-ty, 0px); }
html.ds.feel-tilt-on #device .film-v5 .film-hero[data-tilt]::before { translate: var(--feel-tx, 0px) var(--feel-ty, 0px); scale: 1.02; }
html.ds:is(.reduce-motion, .mo-low-power) #device [data-tilt], html.ds:is(.reduce-motion, .mo-low-power) #device .film-hero[data-tilt]::before,
html.ds #device.manual-reduced-motion [data-tilt], html.ds #device.manual-reduced-motion .film-hero[data-tilt]::before { translate: none !important; }

/* ===================================================================== 3. continuity (hero-transition.js flight())
   A copy is a picture of what it was: its own entrance and its living loop do not start again inside it. The custom properties it
   inherited come with it on one boxless shell (never an ancestor's class). The ticket's copy is drawn without its stub, which tears away
   beneath it. */
html.ds #device > .hc-cont {
  position: absolute; z-index: 290; display: block; overflow: visible; pointer-events: none;
  transform-origin: 0 0; will-change: transform, opacity; contain: layout; box-shadow: none; background: none;
}
html.ds #device > .hc-cont-image { overflow: hidden; contain: layout paint; }
html.ds #device > .hc-cont > .hc-flight-img {
  position: absolute; display: block; transform-origin: 0 0; will-change: transform;
  background-repeat: no-repeat; background-size: 100% 100%; background-position: 50% 50%;
}
html.ds #device > .hc-cont .hc-cont-shell { display: contents !important; }
html.ds #device > .hc-cont .hc-cont-shell::before, html.ds #device > .hc-cont .hc-cont-shell::after { content: none !important; }
html.ds #device > .hc-cont *, html.ds #device > .hc-cont *::before, html.ds #device > .hc-cont *::after { animation: none !important; transition: none !important; }
html.ds #device > .hc-cont-from.feel-cont-ticket .ccn-tk-stub { visibility: hidden; }

/* ===================================================================== 4. the film page's header (feel-wire.js, --feel-hdr / --feel-solid)
   The title compacts toward the top bar as it nears it (a little smaller, held back a little, fading as the bar's own name comes
   in: ds-tab-scroll.js's capsule). (hotfix, 28 October 2026; the owner's The Shining at 18:53) The bar no longer takes a solid
   backdrop once the page's content passes under it: that backdrop was the stage colour at full strength over the whole top band
   (the status bar to 104pt below it) with a rim along its foot, so every film page scrolled into its words wore a black slab
   ending in a hard line that sliced the words in two. The capsule and the circles carry their own glass; the band stays the
   one soft shade (ds-tab-scroll.css). --feel-solid is still written (nothing reads it for a backdrop). */
html.ds #device[data-feel-hdr] .film-v5 .film-title { transform-origin: 20px 96px; scale: calc(1 - .2 * var(--feel-hdr, 0)); translate: 0 calc(var(--feel-hdr, 0) * 22px); }
html.ds #device[data-feel-hdr] .film-v5 .film-title > * { opacity: calc(1 - var(--feel-hdr, 0)); }
html.ds #device[data-feel-hdr] > .ds-tsx-top::before { content: none; }

/* ===================================================================== 5. materials with weight
   BRASS: the ticket's fittings (the arrow's ring, the bulbs' sockets), the marquee's bulb sockets, the game frames (the room's
   cases, a game's header in the room: a brushed brass rule), each catching the light on its top-left edge. */
html.ds .ccn-tk-bulb { box-shadow: inset 0 0 0 1.5px var(--mat-brass), inset .5px 1px 0 1.5px rgb(255 244 210 / .45); }
html.ds .ccn-tk-bulb.is-on { box-shadow: 0 0 6px 1px rgb(255 190 80 / .65), inset 0 0 0 1.5px var(--mat-brass); }
html.ds .ccn-ticket .ccn-tk-go { box-shadow: inset 0 0 0 1.5px var(--mat-brass), inset .5px 1px 0 2px rgb(255 244 210 / .35), 1px 2px 3px rgb(0 0 0 / .25); }
html.ds .ccn-bulb { box-shadow: inset 0 0 0 1px rgb(217 180 106 / .5); }
html.ds .ccn-case::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(var(--light-angle), rgb(255 250 230 / .22), rgb(255 250 230 / 0) 34%, rgb(40 24 6 / 0) 70%, rgb(40 24 6 / .28));
  box-shadow: var(--hl-edge-strong); }
html.ds .ccn .ccn-host .gs-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background-image: linear-gradient(90deg, var(--mat-brass-lo), var(--mat-brass-hi) 22%, var(--mat-brass) 60%, var(--mat-brass-lo)), var(--ccn-brass-img, none); background-size: auto, 100px 100px; background-blend-mode: overlay; }
/* VELVET: the room's wall has a pile that catches the one light (brighter toward the upper left, darker away from it); the seat
   tone is the carpet band's (commute-corner.css), given the same sheen. The layer is the house light's own element (.feel-house). */
html.ds .ccn > .feel-house { position: absolute; inset: 0; z-index: 1; display: block; pointer-events: none; }
html.ds .ccn > .feel-house::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 70% at 14% 0%, var(--mat-velvet-sheen), rgb(255 190 204 / 0) 62%), linear-gradient(var(--light-angle), rgb(255 255 255 / 0) 40%, var(--mat-velvet-shade)); }
/* PAPER: the ticket (painted or drawn), the End Credits result card, the share cards (game-shell.js paper()): a fine tooth (the
   grain's tile, multiplied), the light falling across it from the upper left and a little shade away from it. */
html.ds .ccn-ticket :is(.ccn-tk-main, .ccn-tk-stub) { background-image: linear-gradient(var(--light-angle), var(--mat-paper-sheen), rgb(255 250 235 / 0) 42%, var(--mat-paper-shade)), var(--feel-grain, none), linear-gradient(176deg, var(--tk-paper), var(--tk-paper-lo)); background-size: auto, 96px 96px, auto; background-blend-mode: soft-light, multiply, normal; }
html.ds .ccn-ticket .ccn-tk-stub { background-image: radial-gradient(circle, rgb(43 27 16 / .34) 0 1.2px, transparent 1.6px), linear-gradient(var(--light-angle), var(--mat-paper-sheen), rgb(255 250 235 / 0) 42%, var(--mat-paper-shade)), var(--feel-grain, none), linear-gradient(176deg, var(--tk-paper), var(--tk-paper-lo));
  background-size: 3px 7px, auto, 96px 96px, auto; background-position: 1px 0, 0 0, 0 0, 0 0; background-repeat: repeat-y, no-repeat, repeat, no-repeat; background-blend-mode: normal, soft-light, multiply, normal; }
/* the painted ticket: the same light, laid over the painting's own paper only (masked by it) */
html.ds .ccn-ticket.has-art :is(.ccn-tk-main, .ccn-tk-stub) { background-blend-mode: normal; }
html.ds .ccn-ticket.has-art .ccn-tk-main::after, html.ds .ccn-ticket.has-art .ccn-tk-stub::after {
  content: ""; position: absolute; inset: 0; top: 0; bottom: 0; left: 0; right: 0; width: auto; height: auto; border-radius: 0; pointer-events: none;
  background: linear-gradient(var(--light-angle), var(--mat-paper-sheen), rgb(255 250 235 / 0) 42%, var(--mat-paper-shade)); mix-blend-mode: soft-light;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html.ds .ccn-ticket.has-art .ccn-tk-main::after { -webkit-mask-image: var(--tk-main); mask-image: var(--tk-main); }
html.ds .ccn-ticket.has-art .ccn-tk-stub::after { -webkit-mask-image: var(--tk-stub); mask-image: var(--tk-stub); }
/* End Credits' result: the card it is printed on (black card stock: a fine tooth and the light's sheen; End Credits' own colours) */
html.ds .ec .ec-res-in { box-sizing: border-box; padding: 18px 16px 20px; border-radius: 14px;
  background-color: var(--mat-stock); background-image: linear-gradient(var(--light-angle), rgb(255 255 255 / .07), rgb(255 255 255 / 0) 46%), var(--feel-grain, none); background-size: auto, 96px 96px;
  box-shadow: var(--hl-edge), var(--e-2-cast); }

/* ===================================================================== 6. light that answers
   The room: the house light over the wall, from the one light source, a quarter brighter for each game played today
   (--feel-house, 0 to 1); all four played, the house lights come up (.is-house-up). Opacity only. */
html.ds .ccn > .feel-house::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(110% 64% at 22% 4%, var(--mat-house), rgb(255 214 150 / 0) 70%), linear-gradient(var(--light-angle), var(--mat-house-up), rgb(255 226 176 / 0) 60%);
  mix-blend-mode: screen; opacity: calc(.12 + .5 * var(--feel-house, 0)); transition: opacity var(--motion-slow) var(--motion-curve); }
html.ds .ccn.is-house-up > .feel-house::after { opacity: 1; }
/* Today, when Friday 3 is ready (the electric card is up): the page's light warms a touch, from the same upper left */
html.ds .ds-today > .dt-marquee-light::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 16% 8%, var(--mat-warm), rgb(255 160 84 / 0) 72%), radial-gradient(70% 50% at 86% 30%, var(--mat-warm-low), rgb(255 120 90 / 0) 70%);
  opacity: 0; transition: opacity var(--motion-slow) var(--motion-curve); }
html.ds .ds-today:has(.dt-fri-hero[data-electric="on"]) > .dt-marquee-light::after { opacity: 1; }
html.ds:is(.reduce-motion, .mo-low-power) .ccn > .feel-house::after, html.ds:is(.reduce-motion, .mo-low-power) .ds-today > .dt-marquee-light::after,
html.ds #device.manual-reduced-motion .ccn > .feel-house::after, html.ds #device.manual-reduced-motion .ds-today > .dt-marquee-light::after { transition: none; }
@media (prefers-reduced-motion: reduce) { html.ds .ccn > .feel-house::after, html.ds .ds-today > .dt-marquee-light::after { transition: none; } }

/* ===== prototype-src/one-moment.css ===== */
/* TRIPTIC one moment: the CSS half of one-moment.js (lane SMOOTH, 20 October 2026; hub/docs/SMOOTH-2026-10-20.md).
   Only rules keyed on #device[data-moment], set while one layer owns the moment. */
/* (20 October 2026, lane SMOOTH; one-moment.js, after the smoothness gate) ONE MOMENT: while the glass opens over the wait
   (#device[data-moment="glass"]), the glass is the only thing that moves: everything under it (the wait, the search page, the
   Duo's stage) holds. The wait comes in under it whole (no fades of its
   own), its own animations hold their first frame and play on once the glass has cleared (a paused animation resumes, it
   never restarts), and the search box under the glass does not fade by itself. The :not(#om#om#om#om) only lifts these rules
   above the wait's own (showpiece.css raises its rules with #sp#sp): it matches every element. */
html.ds #device[data-moment="glass"] > :not(.dg2-flight):not(#om#om#om#om),
html.ds #device[data-moment="glass"] > :not(.dg2-flight) *:not(#om#om#om#om),
html.ds #device[data-moment="glass"] > :not(.dg2-flight) *:not(#om#om#om#om)::before,
html.ds #device[data-moment="glass"] > :not(.dg2-flight) *:not(#om#om#om#om)::after { transition: none !important; animation-play-state: paused !important; }
/* the Duo's stage (duo-triptych.js) stands outside the display: it arrives once the glass has cleared, too */
html.ds[data-moment="glass"] .duo-stage:not(#om#om#om#om),
html.ds[data-moment="glass"] .duo-stage *:not(#om#om#om#om),
html.ds[data-moment="glass"] .duo-stage *:not(#om#om#om#om)::before,
html.ds[data-moment="glass"] .duo-stage *:not(#om#om#om#om)::after { transition: none !important; animation-play-state: paused !important; }

/* ===== prototype-src/rounded-clip.css ===== */
/* ===================================================================== ROUNDED CORNERS THAT CLIP ON THE IPHONE
   Lane B, 21 October 2026 (hub/docs/CLIP-AND-FLIGHT-2026-10-21.md; the owner's screenshot of Find three).

   On the iPhone, WebKit does not clip a child that has its own compositing layer (will-change, a transform or opacity
   animation or transition, a mask, mix-blend-mode, a filter, a 3D transform, a canvas) by its parent's ROUNDED corners when
   the parent clips with `overflow: hidden` and `border-radius` alone: the child is cut by the parent's square box, so its
   corners show (the light layer of Find three, a light square behind the pill's round ends). Chromium clips them, so no
   desktop check ever saw it.

   The fix, by kind (scripts/rounded-clip-lint.mjs and tests/rounded-clip-lint.test.mjs keep it):
     1. CLIP   the clipping parent also gets `clip-path: inset(0 round <its own radius>)`, which WebKit applies to composited
               children. Only where the parent has no outer shadow (a clip-path cuts the parent's own outer shadow too)
               and never while a control shows its focus ring (:not(:focus-visible)).
     2. CHILD  a parent with an outer shadow keeps it: its composited child that fills it is rounded itself
               (`border-radius: inherit`, the parent's own corners), so it has no square corner to show.
     3. LAYER  a parent with an outer shadow whose composited child moves past its corners (a sheen, a scaled picture):
               the parent gets its own compositing layer (`will-change: transform`), whose rounded clip WebKit applies to
               every composited child inside it. Used sparingly: each costs a layer.
   The radius in each clip is the same token as the rule that rounds the element; tests/clip-and-flight-browser.test.mjs
   checks on the audited screens that each clip's radius equals the element's own computed corners. */

/* ---------------------------------------------------------------------------------------------- 1. CLIP */
/* Find three: its fill (44px wider than the pill, will-change, a mask), its glint (mix-blend-mode) and ds-look's band */
html.ds #device .premium-composer .query-submit.query-submit-plain:not(:focus-visible) { clip-path: inset(0 round 999px); }
/* Today: the Friday hero's spinning rim (inside the hero's own rounded rim) */
html.ds .dt-fri .dt-zap-ring { clip-path: inset(0 round var(--r-sheet)); }
/* a film card's back: foil, halo, sparkle and glare (blend modes, masks) */
html.ds .fc-face { clip-path: inset(0 round var(--card-radius)); }
/* grouped lists (Settings, You, the Library's rooms): a pressed first or last row scales inside the group's corners */
html.ds .ds-list { clip-path: inset(0 round var(--r-row)); }
/* Friday 3's rim: its turning light */
html.ds #device .f3-rim { clip-path: inset(0 round var(--r-sheet)); }
/* the share ticket: the foil's shine (will-change) and the window's glow (filter) */
html.ds #device .ds-tk-body { clip-path: inset(0 round var(--r-card) var(--r-card) 0 0); }
html.ds #device .ds-tk-window { clip-path: inset(0 round var(--r-control)); }
html.ds #device .ds-tk-window.ds-tk-frame { clip-path: inset(0 round var(--r-row)); }
/* the reveal's showpiece mirror (a canvas) */
html.ds #device .trip-critical-layer:is([data-showpiece="on"], #sp#sp) .sp-mirror { clip-path: inset(0 round calc(var(--sp-r) * .6) calc(var(--sp-r) * .6) 0 0); }
/* the games room's frames: End Credits' beam (a mask) */
html.ds .ccn-art { clip-path: inset(0 round 3px); }
/* the first run's poster wall: each poster fades in */
html.ds #device .poster-wall .poster-wall-tile { clip-path: inset(0 round 10px); }
/* a screen that steps back behind a sheet (card presentation): everything on it is clipped by its new corners */
html.ds #device.ds-presenting > .screen:not(.ds-sheet-host):not(.fluid-departure) { clip-path: inset(0 round var(--r-row)); }
/* the Cryptic: the meter's fill, the answer's distribution columns */
html.ds .cg-meter { clip-path: inset(0 round 999px); }
html.ds .cg-dist-col { clip-path: inset(0 round 10px); }
/* Cross Cut: a cell's caret, splice and nudge */
.xc-cell { clip-path: inset(0 round 3px); }
/* the Ten's empty card, the reason sheet's options, the Ten's trailer when it opens out */
html.ds .ds-nothing-card { clip-path: inset(0 round var(--r-row)); }
html.ds #device > .screen.reason-sheet .reason-options { clip-path: inset(0 round var(--r-row)); }
html.ds .ds-tt-hero.is-expanded .ds-tt-video { clip-path: inset(0 round var(--r-card)); }
/* the Ten's backdrop (the #1 picture panning; its corners are the card's) */
html.ds .ds-ten-card > .ds-ten-backdrop { clip-path: inset(0 round var(--r-sheet)); }
/* a week card's arch (its lit glow) */
html.ds .fc-arch { clip-path: inset(0 round 999px 999px 5px 5px); }
html.ds .fc-emblem3 > .fc-arch { clip-path: inset(0 round 999px 999px 2px 2px); }
/* the Cryptic archive's rows (a stub's punched edge, a mask) */
html.ds .ds-cr .cryptic-archive-list > button.ds-ed-row:not(:focus-visible) { clip-path: inset(0 round var(--r-card)); }
/* Discover's glass: the sheen that passes over the box (the box's own 34px corners) */
html.ds #device .screen.dg2 > .premium-composer > .dg2-sheen { clip-path: inset(0 round 34px); }
/* the taste constellation (a mask over its stars) */
html.ds .p20-dna-constellation { clip-path: inset(0 round 28px); }

/* ---------------------------------------------------------------------------------------------- 2. CHILD */
/* a Collection's pick (its tint, fading in) and a Collection's hero (its live tint): both keep their shadow */
html.ds #device .dslc-pick::before { border-radius: inherit; }
html.ds #device .dslc-detail .collection-hero::after { border-radius: inherit; }
/* the film's action capsule keeps its shadow: the violet light under an action is rounded as the capsule is, so at the
   capsule's two ends it never shows a square corner (it fades in and out: a layer while it does) */
html.ds #device .film-v5 .film-content > .decision-actions > button::after,
html.ds #device .film-v5 :is(.film-seen .film-reaction-choices, .film-pass .film-pass-choices) > button::after { border-radius: var(--r-pill) !important; }
/* the share shapes' previews (a canvas filling its frame) */
html.ds .share-shape-frame > .share-shape-preview, html.ds .share-shape-frame .share-shape-canvas { border-radius: inherit; }
/* the room's ticket: the paper's light (a blend mode and a mask) */
html.ds .ccn-ticket.has-art .ccn-tk-main::after, html.ds .ccn-ticket.has-art .ccn-tk-stub::after { border-radius: inherit; }
/* a stub's punched edge (a mask) runs down its rounded left side */
html.ds .ds-stub::before, html.ds [data-product-route="crypticNudge"] .cryptic-sample-card::before { border-top-left-radius: inherit; border-bottom-left-radius: inherit; }
/* a foil mini card's catch of light (a blend mode) and a Collection fan poster's fresh picture */
html.ds .fc-mini.fin-foil::after { border-radius: inherit; }
html.ds #device .dslc-fan-p > img { border-radius: inherit; }
/* a Collection pick's poster picture (its fade in, its tone filter) */
html.ds #device .dslc-pick-poster > img { border-radius: inherit; }
/* a Collection tile's picture as it is pressed (a transform) */
html.ds #device .api-collection-card .explore-card-art img { border-radius: inherit; }
/* the arch on a clip's receipt: its picture, its seal and its light fade (opacity) and fill it */
html.ds #device .clip-arch > :is(img, b, i) { border-radius: inherit; }

/* ---------------------------------------------------------------------------------------------- 3. LAYER */
/* the film's trailer: its picture is larger than the card (a cover crop) and eases in scale; the card keeps its shadow */
html.ds #device .film-v5 .media-trailer { will-change: transform; }
/* Today's Friday hero: the glow under its key breathes (a transform and opacity) past the hero's lower corners */
html.ds .dt-fri.dt-fri-hero { will-change: transform; }
/* a mystery mini card: its sheen sweeps past the card's edges */
html.ds .fc-mini.is-mystery { will-change: transform; }
/* the Ten's #1: its band of light crosses it; a Collection fan poster: its sheen slides across */
html.ds .ds-ten-card[data-fan="rest"], html.ds #device .dslc-fan-p { will-change: transform; }
/* a returning visitor's gleam: a band of light that crosses whatever it sits on (its corners are its host's) */
html.ds .rt-gleam { will-change: transform; }
/* a Cryptic clue card as it arrives: its stamp, postmark and pieces pop and flip (only while it arrives) */
html.ds .cg-clue-card.is-arriving { will-change: transform; }

/* ===== prototype-src/ready-transition.css ===== */
/* TRIPTIC ready transitions: the CSS half of ready-transition.js (lane A "ready before it moves", 21 October 2026;
   hub/docs/READY-TRANSITIONS-2026-10-21.md). Motion tokens only; transform and opacity only.
     .rt-held    the control touched, pressed from the moment the finger lands until its move starts (ds-core's press is let go
                 at pointerup): smaller by 3% and a shade darker (opacity .82; under Reduce Motion the shade alone)
     .rt-cover   a still copy of the page left, over the display (under the tab bar and the flights) until the next move starts
     .rt-hold    an arriving page whose own CSS entrances wait for its move (they then move with it, frame by frame; an animation run
                 by a scroll position is left to its scroll)
     .rt-opening a Collection's tile while its Collection is on its way: the list stays, a small spinner on the tile */
/* (R2 waits, 22 October 2026) pressed from the moment the finger lands (ready-transition.js pressIn), a little smaller and a shade
   darker, so the tap is seen to count on any phone, however long its page takes: opacity, not a filter (composited) */
/* (CORNER PRESS, 4 November 2026; the owner's "Buttons are ever so slightly flickering") the hold is the app's one press kept in, not a
   second press: a control ds-core is pressing (.ds-pressed: ds-core now keeps it through the click and lets it go with this hold)
   takes nothing more from it. Only a control held without a finger on it (a tab chosen for a lost tap) is pressed here, by the
   same .96. No shade by opacity: it dimmed the control's picture against the page (.82), a flash on every opener */
html.ds #device .rt-held:not(.ds-pressed):not(.ds-pressed-row) { scale: .96 !important; transition: scale var(--motion-press) var(--motion-curve) !important; }
/* a tab tapped: its glyph answers at once (the page follows a frame later; rapid taps: the latest wins) */
html.ds #device > .persistent-glass-nav button.rt-held > * { scale: .9; transition: scale var(--motion-press) var(--motion-curve); }
html.ds.reduce-motion #device > .persistent-glass-nav button.rt-held > *, html.ds #device.manual-reduced-motion > .persistent-glass-nav button.rt-held > * { scale: 1; opacity: .7; }
html.ds #device > .persistent-glass-nav .rt-held,
html.ds.reduce-motion #device .rt-held,
html.ds #device.manual-reduced-motion .rt-held { scale: 1 !important; }
/* (R2 release, 22 October 2026: ds-surfaces "the quiet press") the press now lands with the finger (pressIn, at pointerdown), so
   the phone's own Reduce Motion setting needs the same shade-alone rule as the classes above (none of them is set by it) */
@media (prefers-reduced-motion: reduce) {
  html.ds #device .rt-held:not(.ds-pressed-row) { scale: 1 !important; }   /* as specific as the press it undoes */
  html.ds #device > .persistent-glass-nav button.rt-held > * { scale: 1; opacity: .7; }
}
/* the film flight's copy of the poster, while its page is made: pressed by a shade, never by size (it starts exactly on the poster) */
html.ds #device > .hc-flight.rt-held { scale: 1 !important; }
html.ds #device > .hc-flight > .hc-flight-img.is-round::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(0 0 0 / .18); opacity: 0;
  transition: opacity var(--motion-press) var(--motion-curve);
}
html.ds #device > .hc-flight.rt-held:not(.rt-lifted-copy) > .hc-flight-img.is-round::after { opacity: 1; }
/* (SPEED, 22 October 2026; ready-transition.js liftIn/handover) THE LIFT: at the click the opener lifts (a little larger, the
   press's shade gone) and the page it is on recedes (a little smaller, a shade dimmer). Both are CSS transitions of `scale` and
   `opacity`, run by the compositor while the next page is built; the move takes them over where they stand. !important, as the
   press is: a layer's own animation of the page must not hide it before the move (the move folds it in at its start).
   Never under Reduce Motion (liftIn() is not called; the rule below makes sure). */
/* (the lift's first frame already shows it moving: a transition's first frame draws its start, and the press and the click often
   land in one frame, so the lift began from rest and the frame of the tap showed nothing. A start 30 ms in (-30 ms delay) is
   what a phone's compositor draws in its first frame anyway; the rest of the curve runs on as before). On `press` (90 ms), not
   `fast`: the lift is the finger's answer, done within a few frames, and a lift that ran on over a page's build was a move no
   frame showed (the gate's unseen-move at 4x CPU, film from Today) */
html.ds #device .rt-held.rt-lift:not(.ds-pressed-row), html.ds #device .rt-lift:not(.ds-pressed-row) { scale: var(--rt-lift, 1.03) !important; opacity: 1 !important; transition: scale var(--motion-press) var(--motion-curve) -30ms, opacity var(--motion-press) var(--motion-curve) -30ms !important; }
html.ds #device > .rt-leaving { scale: .985 !important; opacity: .86 !important; transition: scale var(--motion-press) var(--motion-curve) -30ms, opacity var(--motion-press) var(--motion-curve) -30ms !important; }
html.ds.reduce-motion #device .rt-lift, html.ds #device.manual-reduced-motion .rt-lift, html.ds.reduce-motion #device > .rt-leaving, html.ds #device.manual-reduced-motion > .rt-leaving { scale: 1 !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  html.ds #device .rt-lift:not(.ds-pressed-row), html.ds #device > .rt-leaving { scale: 1 !important; opacity: 1 !important; }
}
html.ds #device > .rt-cover { z-index: 20 !important; pointer-events: none !important; animation: none !important; transition: none !important; }
html.ds #device > .rt-cover * { animation-play-state: paused !important; transition: none !important; }
html.ds #device .rt-hold, html.ds #device .rt-hold *, html.ds #device .rt-hold *::before, html.ds #device .rt-hold *::after { animation-play-state: paused !important; }

/* the tile of a Collection on its way (collections-client.js open()): the list stays where it is; a ring turns on the tile */
html.ds #device .api-collection-card.rt-opening { position: relative; }
html.ds #device .api-collection-card.rt-opening .rt-spinner {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 3; display: block;
  border-radius: 50%; border: 2px solid rgb(255 255 255 / .28); border-top-color: rgb(255 255 255 / .92);
  box-shadow: 0 0 0 6px rgb(10 10 14 / .55); background: rgb(10 10 14 / .55); pointer-events: none;
  animation: rt-spin var(--motion-ceremony) linear infinite;
}
@keyframes rt-spin { to { transform: rotate(360deg); } }
html.ds.reduce-motion #device .api-collection-card.rt-opening .rt-spinner,
html.ds #device.manual-reduced-motion .api-collection-card.rt-opening .rt-spinner,
html.ds.mo-low-power #device .api-collection-card.rt-opening .rt-spinner { animation: none; border-color: rgb(255 255 255 / .92); }

/* (SPEED, 22 October 2026; ready-transition.js showPreview) INSTANT TABS: the tab touched, shown in the frame of the tap while its
   page is built (its kept page, its last still copy, or a plain stand-in: its ground and its title). Over the page left, under the
   tab bar; inert and hidden from VoiceOver; gone in the task that builds the tab. No motion of its own (none to reduce). */
html.ds #device > .rt-preview { z-index: 19 !important; pointer-events: none !important; animation: none !important; transition: none !important; opacity: 1 !important; scale: 1 !important; translate: none !important; }
/* its animations stand at their end (an entrance shown as it ends, a loop as one turn ends): a copy that had them off, or paused at
   their start, drew what they bring in (Today's ticket) as missing, and the gate read the stand-in as an empty shell */
html.ds #device > .rt-preview * { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; animation-fill-mode: both !important; transition: none !important; }
html.ds #device > .rt-standin { position: absolute; inset: 0; background: var(--ds-bg, #0b0b10); }
html.ds #device > .rt-standin > .rt-standin-title { position: absolute; left: 20px; top: calc(env(safe-area-inset-top, 0px) + 56px); font: 700 34px/1.1 var(--ds-font-display, -apple-system, system-ui, sans-serif); letter-spacing: -.02em; color: rgb(255 255 255 / .92); }

/* ===== prototype-src/seen-move.css ===== */
/* TRIPTIC seen moves (R2-C, 22 October 2026; seen-move.js instant() / arriving()): while a page is dressed (its classes, colours,
   borders; a page arriving until its move has started), nothing in it starts a transition: the dressing lands at once. The class
   is only ever on for that moment. (#sm#sm#sm in :is() lifts the rule over the page layers' own `transition: … !important`.) */
html :is(#device, #sm#sm#sm) .sm-instant, html :is(#device, #sm#sm#sm) .sm-instant *,
html :is(#device, #sm#sm#sm) .sm-instant *::before, html :is(#device, #sm#sm#sm) .sm-instant *::after,
html :is(#device, #sm#sm#sm) .sm-instant::before, html :is(#device, #sm#sm#sm) .sm-instant::after { transition: none !important; }
/* every view transition's animations held at their start from the moment they are made, then driven frame by frame (seen-move.js) */
html.sm-vt-held::view-transition-group(*), html.sm-vt-held::view-transition-image-pair(*),
html.sm-vt-held::view-transition-old(*), html.sm-vt-held::view-transition-new(*) { animation-play-state: paused !important; }

/* ===== prototype-src/ui-icons.css ===== */
/* Crisp, optically balanced engraved strokes—not font glyphs or CSS cutouts. */
.trip-ui-icon{display:block;flex:none;width:1.5rem;height:1.5rem;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.7;pointer-events:none}
.trip-ui-icon *{vector-effect:non-scaling-stroke}
.decision-actions .trip-ui-icon{width:1.65rem;height:1.65rem;color:#b7dbfa;filter:drop-shadow(0 1px 0 #080713) drop-shadow(0 0 5px #86bdff26);transition:color var(--motion-fast) var(--motion-curve),fill var(--motion-fast) var(--motion-curve)}
.decision-actions button[aria-pressed=true] .trip-ui-icon{color:#ead6ff;fill:#b582ef30}
.decision-actions button[aria-pressed=true] [data-trip-icon=bookmark]{fill:#bd91ef80}
.decision-actions button[aria-pressed=true] [data-trip-icon=watched]{stroke-width:2}
.decision-actions [data-trip-icon=watched] path{fill:none}
.decision-actions button:disabled .trip-ui-icon{opacity:.45;filter:none}
.film-compact-header button{display:grid;place-items:center}
.film-compact-header .compact-share .trip-ui-icon{width:1.3rem;height:1.3rem}
.glass-nav button>.trip-ui-icon,.persistent-glass-nav button>.trip-ui-icon{width:1.6rem;height:1.6rem;margin:0 auto .2rem;stroke-width:1.65}
.glass-nav button.active>.trip-ui-icon,.persistent-glass-nav button.active>.trip-ui-icon{stroke-width:1.9}
.library-link-symbol .trip-ui-icon{width:1.4rem;height:1.4rem}
.library-link>.trip-ui-icon:last-child{width:1rem;height:1rem;color:#b6afc7}
.collection-screen .subpage-header button[aria-pressed=true] [data-trip-icon=bookmark]{fill:#caa1f185}
.collection-share-action .trip-ui-icon{display:inline-block;vertical-align:middle;width:1.15rem;height:1.15rem;margin-right:.55rem}
.profile-list button>.trip-ui-icon{width:1.35rem;height:1.35rem;color:#b7dbfa;flex:none}
.film-save-imprint .trip-ui-icon{fill:currentColor;stroke:currentColor;color:#fff5ff}
.collection-screen .subpage-header button[aria-disabled=true]{opacity:.55;cursor:progress}
/* Interest is a heart; the acknowledged Watched state retains its check. */
.premium-taste-controls button>.trip-ui-icon{width:1.875rem;height:1.875rem;margin:0 auto;color:#c8b7e9;filter:drop-shadow(0 1px 1px #080713)}
.premium-taste-controls button>[data-trip-icon=close]{color:#f1a0bf}
.premium-taste-controls button>[data-trip-icon=heart]{color:#d3afff;fill:#b480f51a}
.refinement-live .circle-control>.trip-ui-icon{width:1.5rem!important;height:1.5rem!important}
.received-film-list>button>.trip-ui-icon{width:1.25rem;height:1.25rem;color:#c8b7e9}
.trailer-player-toolbar .media-player-close{display:grid;place-items:center}
.settings-screen header .back-chevron{display:grid;place-items:center}
.settings-row>.trip-ui-icon{width:1.125rem;height:1.125rem;color:#c8b7e9}
@media(prefers-reduced-motion:reduce){.trip-ui-icon{transition:none!important}}
.manual-reduced-motion .trip-ui-icon,.reduce-motion .trip-ui-icon{transition:none!important}
@media(forced-colors:active){.trip-ui-icon{color:ButtonText!important;filter:none!important}.decision-actions button[aria-pressed=true] .trip-ui-icon{color:Highlight!important;fill:none!important}.decision-actions button[aria-pressed=true]{outline:2px solid Highlight;outline-offset:-3px}}