/* My Little Guardian: the desktop story, played one section at a time. Self-hosted fonts, no external requests.
   The desktop is a fixed 1600 x 900 "world" moved by a camera transform, so resizing never re-lays it out.
   Modes (keep in sync with home.js): WIDE = caption beside or under the shot, otherwise caption at the bottom.
   static.css replaces the story with plain sections (no JS, reduced motion, very short screens). */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/bricolage-grotesque-latin-v1.woff2") format("woff2-variations"),
       url("../assets/fonts/bricolage-grotesque-latin-v1.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/ibm-plex-sans-latin-v1.woff2") format("woff2-variations"),
       url("../assets/fonts/ibm-plex-sans-latin-v1.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-500-latin-v1.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face { font-family: "Bricolage Fallback"; src: local("Arial"); size-adjust: 101%; ascent-override: 92%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Plex Fallback"; src: local("Arial"); size-adjust: 104%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }

:root {
  --top: 56px;
  --ink: #1D2631;
  --ink-2: #3F4B57;
  --muted: #5B6773;
  --paper: #F6F3EC;
  --stage: #141D25;
  --petrol: #2F6F86;
  --petrol-d: #235566;
  --amber: #F0A03A;
  --win: #FCFBF8;
  --win-bar: #F2F0EA;
  --edge: rgba(20, 32, 43, .13);
  --shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 14px 36px -8px rgba(16, 24, 40, .32);
  --card: #1B2630;
  --card-ink: #F3F0E9;
  --card-mute: #AEBBC5;
  --font-d: "Bricolage Grotesque", "Bricolage Fallback", system-ui, sans-serif;
  --font-b: "IBM Plex Sans", "Plex Fallback", system-ui, sans-serif;
  --font-m: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--top); }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.55 var(--font-b);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--petrol-d); text-underline-offset: .18em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid #8FD0E8; outline-offset: 2px; border-radius: 4px; }
i { font-style: normal; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden, .transcript {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: #fff; color: var(--ink); border-radius: 8px; }
.skip:focus { top: 8px; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------ top bar */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: var(--top);
  display: flex; align-items: center; gap: 6px; padding: 0 12px 0 14px;
  background: #10181F; color: #F3F0E9; box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; padding: 6px 8px 6px 4px; border-radius: 8px; color: #F3F0E9; text-decoration: none; font: 650 1rem var(--font-b); white-space: nowrap; }
.brand:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.brand-mark { width: 34px; height: 27px; flex: none; }
.site-nav { display: flex; gap: 2px; }
.site-nav a { padding: 8px 12px; border-radius: 8px; color: #D7E0E6; text-decoration: none; font-weight: 500; white-space: nowrap; }
.site-nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.menu-btn { display: none; height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(243, 240, 233, .3); background: none; color: #F3F0E9; font: 500 .9375rem var(--font-b); cursor: pointer; }
.cta { display: inline-flex; align-items: center; height: 38px; margin-left: 8px; padding: 0 16px; border-radius: 8px; background: var(--petrol); color: #fff; text-decoration: none; font-weight: 600; white-space: nowrap; }
.cta:hover { background: #3A7F98; color: #fff; }
@media (max-width: 760px) {
  .menu-btn { display: inline-block; }
  .site-nav { display: none; position: absolute; top: var(--top); left: 0; right: 0; flex-direction: column; padding: 6px 10px 12px; background: #10181F; box-shadow: 0 12px 24px rgba(0, 0, 0, .35); }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 10px; font-size: 1.0625rem; }
  .cta { margin-left: 4px; padding: 0 12px; }
}
@media (max-width: 400px) {
  .brand span { display: none; }
}

/* ------------------------------------------------------------------ player */
main { padding-top: var(--top); }
.player { position: relative; height: calc(100svh - var(--top)); background: var(--stage); overflow: hidden; }
.vp { position: absolute; inset: 0; overflow: hidden; }
.dim { position: absolute; inset: 0; z-index: 1; background: rgba(10, 16, 22, .6); opacity: 0; visibility: hidden; pointer-events: none; }
.world {
  position: absolute; left: 0; top: 0; width: 1600px; height: 900px; font-size: 16px; line-height: 1.4;
  transform-origin: 0 0; border-radius: 18px; overflow: hidden; visibility: hidden;
  box-shadow: 0 30px 90px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .07);
}

/* Chapters: where you are in the story. */
.chapters {
  position: absolute; left: 50%; top: 10px; z-index: 3; transform: translateX(-50%);
  display: flex; gap: 4px; width: min(720px, calc(100% - 24px)); margin: 0; padding: 6px 8px 7px;
  list-style: none; border-radius: 12px; background: rgba(16, 24, 31, .82);
}
.chapters li { flex: 1; min-width: 0; }
.chapters button {
  display: block; width: 100%; padding: 5px 4px 1px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: rgba(243, 240, 233, .62); font: 500 .8125rem/1.2 var(--font-b); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chapters button::before { content: ""; display: block; height: 3px; margin-bottom: 6px; border-radius: 2px; background: rgba(243, 240, 233, .2); }
.chapters button.done::before { background: rgba(243, 240, 233, .55); }
.chapters button[aria-current="step"] { color: #fff; }
.chapters button[aria-current="step"]::before { background: #F3F0E9; }
.chapters button:hover { color: #fff; }

/* Captions sit where the eye already is; home.js places them next to each shot. */
.beats { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.beat {
  position: absolute; left: 0; top: 0; width: 380px; padding: 20px 22px 84px; border-radius: 16px;
  background: var(--card); color: var(--card-ink); pointer-events: auto; visibility: hidden; opacity: 0;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .07);
}
.beat .kicker { font: 500 .8125rem/1.3 var(--font-m); letter-spacing: .02em; color: var(--card-mute); margin-bottom: 8px; }
.beat h2 { font: 700 1.875rem/1.08 var(--font-d); letter-spacing: -.01em; margin-bottom: 10px; text-wrap: balance; }
.beat p { font-size: 1.0625rem; line-height: 1.5; }
.beat-hero { visibility: visible; opacity: 1; }
.beat-hero h1 { font: 760 3.25rem/1.02 var(--font-d); letter-spacing: -.022em; margin-bottom: 14px; }
.beat-hero h1 span { display: block; }
.h1-em { color: #8FD0E8; }
.beat-hero .lede { font-size: 1.1875rem; color: #D6DFE5; }
.beat-hero .honest { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(243, 240, 233, .14); font-size: .9375rem; color: var(--card-mute); }
.beat-join { left: 50%; top: 50%; width: min(58rem, calc(100% - 32px)); padding: 0; background: none; box-shadow: none; border-radius: 0; }

.ctrl { position: absolute; left: 22px; bottom: 20px; z-index: 3; display: flex; align-items: center; gap: 12px; }
.ctrl.solo { left: 50%; bottom: 18px; transform: translateX(-50%); }
.next {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 18px; border-radius: 10px;
  border: 1px solid rgba(243, 240, 233, .32); background: rgba(16, 24, 31, .6); color: #F3F0E9; font: 600 1rem var(--font-b); cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.next svg { width: 20px; height: 20px; }
.next:hover, .next.ready { background: #F3F0E9; border-color: #F3F0E9; color: var(--card); }


@media (min-width: 820px) and (min-aspect-ratio: 5/4) {
  .beat-hero { left: 32px; top: 50%; width: min(580px, 40vw); transform: translateY(-50%); }
  .beat-hero h1 { font-size: clamp(2.25rem, 3.1vw, 3.4rem); }
}
@media not all and (min-width: 820px) and (min-aspect-ratio: 5/4) {
  .chapters { top: 8px; padding: 5px 6px 6px; }
  .chapters button { font-size: 0; padding: 4px 2px 0; }
  .chapters button::before { margin-bottom: 2px; }
  .beat { width: calc(100% - 24px); padding: 16px 18px 76px; }
  .beat h2 { font-size: 1.5rem; margin-bottom: 6px; }
  .beat p { font-size: 1rem; }
  .beat-hero { left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; }
  .beat-hero h1 { font-size: clamp(1.75rem, 7.6vw, 2.5rem); margin-bottom: 8px; }
  .beat-hero .lede { font-size: 1rem; }
  .beat-hero .honest { margin-top: 8px; padding-top: 8px; font-size: .875rem; }
  .ctrl { left: 18px; bottom: 16px; }
  .beat-join { width: calc(100% - 20px); }
}

/* ------------------------------------------------------------------ the world (1600 x 900 px) */
.wall { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  --sky-a: #BCD7DE; --sky-b: #F2E7D2; --sun: #F7D9A2; --h1: #93B8C0; --h2: #5F95A4; --h3: #3D7C90; --h4: #2A6173; }
.sky-a { stop-color: var(--sky-a); }
.sky-b { stop-color: var(--sky-b); }
.sun circle { fill: var(--sun); }
.h1 { fill: var(--h1); } .h2 { fill: var(--h2); } .h3 { fill: var(--h3); } .h4 { fill: var(--h4); }
.dicons { position: absolute; left: 20px; top: 22px; display: grid; gap: 18px; }
.dico { display: grid; justify-items: center; gap: 4px; width: 78px; color: #fff; font: 500 12px/1.2 var(--font-b); text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.dico svg { width: 42px; height: 42px; }

.win { position: absolute; background: var(--win); color: var(--ink); border-radius: 8px; border: 1px solid var(--edge); box-shadow: var(--shadow); overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 9px; height: 38px; padding-left: 13px; background: var(--win-bar); border-bottom: 1px solid rgba(20, 32, 43, .07); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.win-bar .ico { width: 23px; height: 21px; flex: none; }
.win-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.win-bar .ctl { width: 128px; height: 38px; flex: none; color: var(--ink-2); }
/* The desktop is laid out only when the story starts, after the fonts: the first paint stays light. */
.world:not(.on) { display: none; }
.world .win, .world .phone, .world .bubble, .world .cursor, .world .toast { visibility: hidden; opacity: 0; }
.world .w-editor { visibility: visible; opacity: 1; }
.w-editor, .w-browser { z-index: 1; }
.w-chat, .w-memory { z-index: 3; }
.phone { z-index: 4; }
.taskbar { z-index: 5; }
.toast, .ghost { z-index: 6; }
.bubble { z-index: 7; }
.guardian { position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none; will-change: transform; }
.guardian .g-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cursor { position: absolute; left: 0; top: 0; z-index: 9; width: 26px; height: 26px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }

/* Code editor: the project. */
.w-editor { left: 118px; top: 64px; width: 740px; height: 560px; background: #1D2630; border-color: rgba(0, 0, 0, .3); }
.w-editor .win-bar { background: #26313C; color: #C8D2DA; border-color: rgba(0, 0, 0, .25); }
.w-editor .ctl { color: #C8D2DA; }
.ed { display: grid; grid-template-columns: 150px 1fr; height: calc(100% - 38px); }
.ed-side { background: #18212A; padding: 14px 10px; display: grid; align-content: start; gap: 2px; font-size: 13px; color: #95A3AF; }
.ed-side p { font: 500 11px var(--font-m); letter-spacing: .06em; text-transform: uppercase; color: #74828E; margin: 0 0 8px 6px; }
.ed-side span { padding: 4px 8px; border-radius: 5px; }
.ed-side .on { background: #2B3743; color: #E8EEF2; }
.ed-main { position: relative; display: flex; flex-direction: column; min-width: 0; }
.ed-tabs { display: flex; font-size: 13px; color: #8996A2; background: #18212A; }
.ed-tabs span { padding: 9px 16px; }
.ed-tabs .on { background: #1D2630; color: #E8EEF2; box-shadow: inset 0 2px 0 var(--petrol); }
.code { flex: 1; margin: 0; padding: 14px 16px 0 0; list-style: none; counter-reset: ln; font: 500 13px/1.72 var(--font-m); color: #D5DDE4; overflow: hidden; }
.code li { counter-increment: ln; visibility: hidden; white-space: pre; }
.code li::before { content: counter(ln); display: inline-block; width: 42px; padding-right: 16px; text-align: right; color: #56636F; }
.code li.on { visibility: visible; }
.code li.caret::after { content: ""; display: inline-block; width: 7px; height: 15px; margin-left: 1px; vertical-align: -3px; background: #8FD0E8; }
.code .t { color: #8FD0E8; } .code .a { color: #F2C27B; } .code .s { color: #A9D98C; } .code .k { color: #E9A0C6; } .code .c { color: #7A8794; }
.ed-status { display: flex; justify-content: space-between; padding: 7px 16px; background: #235566; color: #E3F0F4; font: 500 12px var(--font-m); }
.ed-status[data-s="done"] { background: #2F7A5B; }

/* Browser. */
.w-browser { left: 640px; top: 170px; width: 800px; height: 600px; display: flex; flex-direction: column; }
.br-tabs { display: flex; align-items: flex-end; height: 44px; padding-left: 10px; background: #E4E0D7; }
.tabs { flex: 1; display: flex; align-items: center; height: 100%; min-width: 0; }
.tab {
  display: none; align-self: flex-end; align-items: center; gap: 7px; flex: none; width: 104px; height: 34px; overflow: hidden;
  border-right: 4px solid #E4E0D7; border-radius: 9px 9px 0 0; background: #D7D2C7; background-clip: padding-box;
  font-size: 12.5px; color: var(--ink-2); white-space: nowrap;
}
.tab.on { background-color: var(--win); color: var(--ink); }
.tab b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; padding-right: 6px; }
.fav { flex: none; width: 14px; height: 14px; margin-left: 10px; border-radius: 4px; }
.f-docs { background: #2F6F86; } .f-vid { background: #D9534A; } .f-feed { background: #5B6FD6; } .f-shop { background: #E39A2D; } .f-news { background: #1D2631; }
.tab-new { position: relative; flex: none; width: 26px; height: 26px; margin: 0 0 4px 4px; border-radius: 50%; }
.tab-new::before, .tab-new::after { content: ""; position: absolute; left: 7px; top: 12px; width: 12px; height: 2px; border-radius: 1px; background: var(--ink-2); }
.tab-new::after { transform: rotate(90deg); }
.br-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: var(--win); border-bottom: 1px solid rgba(20, 32, 43, .08); }
.nb { width: 10px; height: 10px; border-left: 2px solid #7C8792; border-bottom: 2px solid #7C8792; transform: rotate(45deg); }
.nb + .nb { transform: rotate(-135deg); }
.nb-r { width: 12px; height: 12px; border: 2px solid #7C8792; border-radius: 50%; border-right-color: transparent; transform: none !important; }
.url { flex: 1; display: flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 14px; background: #EEEBE4; font-size: 13px; color: var(--ink-2); }
.pages { position: relative; flex: 1; overflow: hidden; background: #fff; }
/* Only the open page is laid out (a lighter first load); .measure lets the story measure a closed one. */
.pg { --d: block; position: absolute; inset: 0; display: none; }
.pages[data-p="0"] .pg:nth-child(1), .pages[data-p="1"] .pg:nth-child(2), .pages[data-p="2"] .pg:nth-child(3),
.pages[data-p="3"] .pg:nth-child(4), .pages[data-p="4"] .pg:nth-child(5), .pages[data-p="5"] .pg:nth-child(6),
.pages[data-p="6"] .pg:nth-child(7), .pg.measure { display: var(--d); }
.pg.measure { visibility: hidden; }
.ln { display: block; height: 9px; border-radius: 9px; background: #E2DED6; margin: 4px 0 8px; }
.w40 { width: 40%; } .w45 { width: 45%; } .w55 { width: 55%; } .w60 { width: 60%; } .w70 { width: 70%; } .w75 { width: 75%; } .w85 { width: 85%; }
.av { flex: none; display: block; width: 36px; height: 36px; border-radius: 50%; }
.av1 { background: #E9967E; } .av2 { background: #8F9FE0; } .av3 { background: #6CC3C0; }

.pg-docs { --d: grid; grid-template-columns: 170px 1fr; }
.dc-side { padding: 22px 16px; background: #F4F6F7; border-right: 1px solid #E3E7EA; }
.dc-side b { display: block; font: 700 15px var(--font-d); margin-bottom: 12px; }
.dc-side .on { background: #9CC3D0; }
.dc-main { padding: 22px 30px; }
.dc-crumb { font-size: 12px; color: var(--muted); }
.dc-h { font: 700 32px/1.1 var(--font-d); margin: 6px 0 14px; }
.dc-code { margin: 14px 0; padding: 14px 16px; border-radius: 8px; background: #1D2630; color: #D5DDE4; font: 500 13px/1.6 var(--font-m); }
.dc-code .k { color: #E9A0C6; }
.dc-demo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dc-demo i { height: 54px; border-radius: 6px; background: #CFE3EA; }
.dc-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 12px; border-radius: 8px; background: #EEF4F6; color: var(--petrol-d); font-size: 14px; font-weight: 500; }
.dc-link svg { width: 20px; height: 16px; }

.pg-vid { --d: grid; grid-template-columns: 1fr 230px; gap: 18px; padding: 18px; background: #FAFAF8; }
.v-player { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #172029; }
.v-slide { padding: 18px 20px; color: #E6EDF2; font: 500 15px var(--font-m); }
.v-slide b { color: #8FD0E8; font-weight: 500; }
.slide-card { position: absolute; bottom: 40px; width: 24%; height: 34%; border-radius: 6px; background: #3D7C90; }
.sc1 { left: 8%; } .sc2 { left: 38%; background: #4E8FA3; } .sc3 { left: 68%; background: #65A3B5; }
.cat-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.cat-bg { fill: #F2C25B; } .cat-box { fill: #C48A52; } .cat-flap { fill: #A87443; }
.v-player[data-v="2"] .cat-bg { fill: #E9967E; }
.pbar { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .3); }
.pbar i { display: block; height: 100%; border-radius: inherit; background: #E5534B; }
.pbar .p1 { width: 32%; } .pbar .p2 { width: 58%; } .pbar .p3 { width: 12%; }
.v-title { font: 650 19px/1.3 var(--font-b); margin: 12px 0 8px; }
.v-chan { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.v-chan span { margin-left: auto; padding: 7px 14px; border-radius: 18px; background: #1D2631; color: #fff; font-size: 13px; font-weight: 600; }
.v-side p { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.up { display: flex; gap: 9px; padding: 6px; margin: 0 -6px 4px; border-radius: 8px; }
.up[data-s="hover"] { background: #E8EEF0; }
.th { flex: none; display: grid; place-items: end center; width: 92px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; }
.th svg { width: 48px; height: 36px; }
.th1 { background: #F2C25B; } .th2 { background: #E9967E; } .th3 { background: #9DB592; }
.up span { display: grid; align-content: start; font-size: 12px; line-height: 1.3; }
.up b { font-weight: 600; }
.up em { font-style: normal; color: var(--muted); }

.pg-feed { --d: grid; grid-template-columns: 150px 1fr 200px; gap: 22px; padding: 18px 20px; background: #F3F4F7; }
.fd-nav b, .fd-side b { display: block; font: 700 17px var(--font-d); margin-bottom: 12px; }
.fd-col { display: grid; gap: 14px; align-content: start; }
.post { display: flex; gap: 12px; padding: 14px; border-radius: 12px; background: #fff; }
.post-body { flex: 1; }
.pic { display: block; height: 150px; border-radius: 10px; margin-top: 10px; }
.pic1 { background: #F2C25B; } .pic2 { background: #6CC3C0; height: 120px; }
.fd-ad { display: grid; gap: 2px; margin-top: 18px; padding: 10px; border-radius: 12px; background: #fff; font-size: 13px; }
.fd-ad svg { width: 100%; height: 70px; border-radius: 8px; background: #FBEBDD; }
.fd-ad span { font-weight: 600; }
.fd-ad em { font-style: normal; color: var(--muted); font-size: 12px; }

.pg-shop { background: #fff; }
.sh-top { display: flex; align-items: center; gap: 18px; height: 52px; padding: 0 22px; border-bottom: 1px solid #ECE9E2; font-size: 14px; }
.sh-top b { font: 800 20px var(--font-d); letter-spacing: -.01em; }
.sh-search { flex: 1; height: 30px; border-radius: 15px; background: #F1EFEA; }
.sh-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; padding: 22px; }
.sh-gal { display: grid; gap: 10px; }
.shoe { width: 100%; height: 250px; border-radius: 12px; background: #FBEBDD; }
.sh-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sh-thumbs i { height: 52px; border-radius: 8px; background: #F4EEE6; }
.sh-thumbs .on { box-shadow: inset 0 0 0 2px var(--ink); }
.sh-name { font: 700 26px/1.1 var(--font-d); margin-bottom: 8px; }
.sh-stars { display: flex; align-items: center; gap: 3px; font-size: 13px; color: var(--muted); }
.sh-stars i { width: 15px; height: 15px; background: #E39A2D; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.sh-stars span { margin-left: 6px; }
.sh-k { margin: 16px 0 8px; font-size: 13px; font-weight: 600; }
.sh-sw { display: flex; gap: 8px; }
.sh-sw i { width: 28px; height: 28px; border-radius: 50%; background: #E9967E; }
.sh-sw i + i { background: #6CC3C0; } .sh-sw i + i + i { background: #1D2631; }
.sh-sw .on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.sh-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sh-sizes i { padding: 7px 0; border-radius: 8px; border: 1px solid #D5D1C8; text-align: center; font-size: 13px; }
.sh-sizes .on { border-color: var(--ink); font-weight: 600; }
.sh-cart { display: block; margin-top: 18px; padding: 12px; border-radius: 24px; background: #1D2631; color: #fff; text-align: center; font-weight: 600; }
.sh-note { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; }

.pg-news { padding: 18px 30px; background: #FBFAF6; }
.nw-mast { font: 800 30px/1 var(--font-d); letter-spacing: -.015em; text-align: center; padding-bottom: 12px; border-bottom: 3px double #1D2631; }
.nw-nav { display: flex; justify-content: center; gap: 22px; padding: 8px 0 14px; font-size: 13px; color: var(--ink-2); border-bottom: 1px solid #E2DED5; }
.nw-lead { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; padding: 18px 0; border-bottom: 1px solid #E2DED5; }
.nw-img { display: block; height: 190px; border-radius: 6px; background: #C9B79C; }
.nw-h { font: 700 26px/1.12 var(--font-d); margin-bottom: 12px; }
.nw-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-top: 14px; }
.nw-row p { font: 600 14px/1.3 var(--font-b); margin-top: 8px; }
.nw-sm { display: block; height: 70px; border-radius: 6px; background: #9DB592; }
.nw-sm.s2 { background: #8F9FE0; } .nw-sm.s3 { background: #E9967E; }

/* Guardian's chat. */
.w-chat { left: 1140px; top: 330px; width: 400px; height: 440px; display: flex; flex-direction: column; }
.chat-view { position: relative; flex: 1; overflow: hidden; }
.chat-log { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; gap: 9px; padding: 14px 15px 18px; }
.day { align-self: center; font: 500 11.5px var(--font-m); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 3px; }
.msg { max-width: 88%; padding: 9px 13px 10px; border-radius: 16px; font-size: 16px; line-height: 1.38; opacity: 0; }
.msg.g { align-self: flex-start; background: #E9F0F2; border-bottom-left-radius: 5px; }
.msg.u { align-self: flex-end; background: var(--petrol); color: #fff; border-bottom-right-radius: 5px; }
.msg .unsaid, .bubble .unsaid, .ph-line .unsaid { color: transparent; }
.sess { margin-top: 4px; padding: 13px 16px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--edge); box-shadow: 0 2px 6px rgba(16, 24, 40, .06); opacity: 0; }
.sess-k { font: 500 11px var(--font-m); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.sess-t { font: 700 20px/1.2 var(--font-d); margin: 2px 0 7px; }
.sess-r { display: grid; grid-template-columns: 74px 1fr; gap: 10px; font-size: 14px; line-height: 1.35; padding: 5px 0; border-top: 1px solid rgba(20, 32, 43, .08); }
.sess-r b { font-weight: 500; color: var(--muted); }
.sbtn { display: inline-block; margin-top: 11px; padding: 7px 21px; border-radius: 8px; background: var(--petrol); color: #fff; font-weight: 600; font-size: 15px; }
.bbtn[data-s="press"], .sbtn[data-s="press"] { transform: scale(.95); filter: brightness(.9); }
.composer { flex: none; display: flex; align-items: center; gap: 8px; margin: 0 11px 11px; padding: 9px 11px 9px 14px; min-height: 45px; border-radius: 12px; border: 1px solid #C8D0D6; background: #fff; font-size: 16px; }
.ctext { white-space: nowrap; overflow: hidden; }
.ctext:not(:empty)::after { content: ""; display: inline-block; width: 1px; height: 18px; margin-left: 1px; vertical-align: -3px; background: var(--ink); }
.cplace { flex: 1; color: #8A949D; }
.ctext:not(:empty) + .cplace { display: none; }
.csend { flex: none; margin-left: auto; width: 27px; height: 27px; border-radius: 50%; background: #D5DCE1; }
.ctext:not(:empty) ~ .csend { background: var(--petrol); }

/* Memory. */
.w-memory { left: 700px; top: 230px; width: 410px; }
.mem { padding: 16px 18px 19px; }
.mem-head { font: 700 20px/1.2 var(--font-d); margin-bottom: 11px; }
.mem ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.mem li { display: grid; grid-template-columns: 1fr auto; column-gap: 13px; padding: 9px 12px 10px; border-radius: 8px; background: #F2F0EA; }
.mem li b { font: 500 10.5px/1.5 var(--font-m); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.mem li span { grid-column: 1; font-size: 15px; line-height: 1.35; }
.mem li i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 13px; color: var(--petrol-d); font-weight: 500; }

/* Phone. */
.phone { position: absolute; left: 1250px; top: 300px; width: 232px; height: 480px; padding: 8px; border-radius: 35px; background: #121A21; box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ph-screen { position: relative; height: 100%; overflow: hidden; border-radius: 28px; background: #F7F4EE; }
.ph-status { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 11px 21px 5px; background: #F7F4EE; font: 600 11.5px var(--font-b); }
.ph-status i { width: 54px; height: 11px; border-radius: 16px; background: #1D2631; opacity: .8; }
.ph-feed { padding: 5px 14px; }
.ph-app { font: 700 17.5px var(--font-d); margin: 5px 0 3px; }
.ph-pic { display: block; height: 128px; margin: 9px 0 6px; border-radius: 11px; }
.pp1 { background: #E9967E; } .pp2 { background: #8F9FE0; }
.ph-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 17px 16px 20px; border-radius: 21px 21px 28px 28px; background: #fff; box-shadow: 0 -10px 30px rgba(16, 24, 40, .18), inset 0 3px 0 var(--amber); }
.ph-line { font-size: 16px; line-height: 1.38; margin-bottom: 11px; }
.ph-sess { display: grid; gap: 2px; padding: 9px 11px; border-radius: 10px; background: #F2F0EA; font-size: 13px; }
.ph-sess span { color: var(--muted); }
.ph-sheet .sbtn { font-size: 13px; }

/* Taskbar of the pictured desktop. */
.taskbar {
  position: absolute; left: 0; top: 852px; width: 1600px; height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 10px; background: #EFECE5; box-shadow: 0 -1px 0 rgba(20, 32, 43, .14); font-size: 13px; line-height: 1.2; color: var(--ink);
}
.tb-apps { grid-column: 2; display: flex; gap: 2px; }
.tb-app { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; }
.tb-app svg { width: 24px; height: 24px; }
.tb-app#tb-chat svg { width: 30px; height: 24px; }
.tb-app::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 3px; margin-left: -3px; border-radius: 2px; background: #8A949E; opacity: 0; }
.tb-app[data-s="open"]::after { opacity: 1; }
.tb-app[data-s="active"]::after { opacity: 1; width: 16px; margin-left: -8px; background: var(--petrol); }
.tb-app[data-s="active"] { background: rgba(255, 255, 255, .7); }
.tb-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.tb-later { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 6px; color: var(--ink-2); font-weight: 500; }
.tb-later svg { width: 18px; height: 18px; }
.tb-later b { min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--amber); color: var(--ink); font-size: 12px; text-align: center; }
.tb-later b:empty { display: none; }
.tb-later[data-s="got"] { background: #fff; color: var(--ink); box-shadow: inset 0 -2px 0 var(--amber); }
.tb-tray { display: inline-flex; align-items: center; gap: 8px; padding: 0 4px 0 6px; color: var(--ink-2); }
.tb-face { width: 26px; height: 21px; }
.tb-sys { width: 16px; height: 16px; }
.tb-clock { display: grid; justify-items: end; padding: 0 4px; font-size: 12px; font-variant-numeric: tabular-nums; }
.toast { position: absolute; left: 0; top: 0; padding: 9px 13px; border-radius: 9px; background: #1D2631; color: #F3F0E9; font-size: 14px; white-space: nowrap; box-shadow: var(--shadow); }
.ghost { position: absolute; left: 0; top: 0; display: flex; visibility: hidden; box-shadow: 0 8px 18px -6px rgba(16, 24, 40, .45); }

/* Speech bubble. */
.bubble { position: absolute; left: 0; top: 0; width: max-content; max-width: 300px; padding: 12px 15px 13px; border-radius: 14px; background: #fff; color: var(--ink); border: 1px solid var(--edge); box-shadow: var(--shadow), inset 0 3px 0 var(--amber); font-size: 17px; line-height: 1.4; }
.bubble::after { content: ""; position: absolute; right: -7px; top: var(--tail-y, 20px); width: 13px; height: 13px; background: #fff; border-right: 1px solid var(--edge); border-bottom: 1px solid var(--edge); transform: rotate(-45deg); }
.bbtns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bbtn { display: inline-block; border: 1px solid #C5CDD3; background: #fff; color: var(--ink); border-radius: 7px; padding: 5px 11px; font: 500 14px/1.2 var(--font-b); }
.bbtn.primary { background: var(--petrol); border-color: var(--petrol); color: #fff; }

/* Small screens: bigger type inside the pictured desktop, because the camera shows it smaller. */
@media not all and (min-width: 820px) and (min-aspect-ratio: 5/4) {
  .msg { font-size: 20px; }
  .w-chat { height: 470px; top: 300px; }
  .sess-t { font-size: 22px; }
  .sess-r { font-size: 16px; grid-template-columns: 82px 1fr; }
  .composer { font-size: 18px; }
  .bubble { font-size: 22px; max-width: 330px; }
  .bbtn { font-size: 17px; padding: 7px 13px; }
  .ph-line { font-size: 18px; }
  .mem li span { font-size: 18px; }
  .mem-head { font-size: 23px; }
  .toast { font-size: 20px; }
}

/* ------------------------------------------------------------------ signup window, forms */
.w-setup { position: relative; width: 100%; visibility: inherit; opacity: 1; }
.setup { display: grid; grid-template-columns: 15rem 1fr; }
.setup-side { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2.2rem 1.4rem 1.8rem; background: #E4EDEF; }
.g-setup { position: relative; width: 10rem; }
.setup-steps { align-self: stretch; margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: .5rem; font-size: .9375rem; color: var(--muted); }
.setup-steps li { counter-increment: st; display: flex; align-items: center; gap: .6rem; }
.setup-steps li::before { content: counter(st); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1.5px solid #9AA6AF; font: 600 .8rem var(--font-b); }
.setup-steps .is-on { color: var(--ink); font-weight: 600; }
.setup-steps .is-on::before { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.setup-main { padding: 2rem 2.2rem 2rem; }
.setup-main .kicker, .apply .kicker { font: 500 .8125rem var(--font-m); color: var(--muted); margin-bottom: .6rem; }
.setup-main h2 { font: 760 clamp(1.9rem, 3.4vw, 2.8rem)/1.04 var(--font-d); letter-spacing: -.018em; margin-bottom: .8rem; }
.setup-main > p { color: var(--ink-2); margin-bottom: 1.2rem; max-width: 34rem; }
.w-setup .win-bar { height: 2.4rem; font-size: .8125rem; }
.w-setup .win-bar .ico { width: 1.45rem; height: 1.3rem; }
.w-setup .win-bar .ctl { width: 8rem; height: 2.4rem; }
.signup-row { display: flex; flex-wrap: wrap; gap: 8px; }
.signup input[type=email] { flex: 1 1 13rem; min-width: 0; }
.fine { margin-top: .7rem; font-size: .875rem; line-height: 1.45; color: var(--muted); }
.form-error { margin-top: .6rem; font-size: .9375rem; color: #A23A2C; font-weight: 500; }
input[type=email], input[type=text], textarea {
  font: 400 1.0625rem/1.3 var(--font-b); color: var(--ink); background: #fff;
  border: 1.5px solid #A5AFB8; border-radius: 8px; padding: 0 .9rem; height: 3rem;
}
textarea { height: auto; padding: .7rem .9rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: #75808A; }
input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(47, 111, 134, .35); outline-offset: 0; border-color: var(--petrol); }
.button {
  display: inline-flex; align-items: center; justify-content: center; appearance: none; border: 0; border-radius: 8px; height: 3rem; padding: 0 1.2rem; cursor: pointer;
  background: var(--petrol); color: #fff; font: 600 1rem/1 var(--font-b); white-space: nowrap; text-decoration: none;
}
.button:hover { background: var(--petrol-d); color: #fff; }
.button:disabled { opacity: .6; cursor: progress; }
.link-button { appearance: none; border: 0; background: none; padding: .5rem .25rem; font: 500 1rem var(--font-b); color: var(--ink-2); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
@media (max-width: 760px) {
  .setup { grid-template-columns: 1fr; }
  .setup-side { flex-direction: row; justify-content: flex-start; padding: .9rem 1.1rem; gap: 1rem; }
  .g-setup { width: 4.6rem; flex: none; }
  .setup-steps { align-self: center; }
  .setup-main { padding: 1.1rem 1.1rem 1.2rem; }
  .setup-main h2 { font-size: 1.75rem; margin-bottom: .5rem; }
  .setup-main > p { font-size: 1rem; margin-bottom: .9rem; }
  .signup input[type=email] { flex-basis: 10rem; padding: 0 .75rem; font-size: 1rem; }
  .signup .button { padding: 0 1rem; }
}

/* ------------------------------------------------------------------ privacy, questions, footer */
.privacy { padding: 72px 16px 40px; }
.pv-in { max-width: 70rem; margin: 0 auto; }
.privacy h2, .faq h2 { font: 760 clamp(2rem, 4.2vw, 3rem)/1.05 var(--font-d); letter-spacing: -.018em; }
.pv-lede { max-width: 40rem; margin: 12px 0 32px; font-size: 1.1875rem; color: var(--ink-2); }
.pv-grid { display: grid; grid-template-columns: minmax(0, 25rem) 1fr; gap: 44px; align-items: start; }
.w-settings { position: relative; font-size: 16px; }
.set { padding: 14px 20px 20px; }
.set-h { font: 500 11px var(--font-m); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 6px 0 6px; }
.set-h ~ .set-h { margin-top: 20px; }
.tg { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(20, 32, 43, .08); font-size: 15px; }
.tg i { position: relative; flex: none; width: 40px; height: 22px; border-radius: 16px; border: 1.5px solid #808B95; background: #fff; }
.tg i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #5B6773; }
.tg.is-on i { background: var(--petrol); border-color: var(--petrol); }
.tg.is-on i::after { transform: translateX(18px); background: #fff; }



.pv-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.pv-points li { color: var(--ink-2); }
.pv-points b { display: block; margin-bottom: 4px; font: 700 1.3rem/1.2 var(--font-d); color: var(--ink); }
.pv-note { margin-top: 30px; color: var(--muted); }
.faq { padding: 40px 16px 56px; }
.faq-in { max-width: 46rem; margin: 0 auto; }
.faq h2 { margin-bottom: 14px; }
.faq details { border-top: 1px solid rgba(20, 32, 43, .12); }
.faq summary { position: relative; padding: .95rem 2rem .95rem 0; font-weight: 600; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .4rem; top: 1.3rem; width: .55rem; height: .55rem; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); }
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.5rem; }
.faq details p { max-width: 40rem; padding: 0 0 1rem; color: var(--ink-2); }
.faq-cta { margin-top: 26px; }
.foot { display: grid; justify-items: center; gap: .4rem; padding: 28px 16px 40px; background: var(--stage); color: var(--card-ink); font-size: .9375rem; text-align: center; }
.foot p:last-child { display: flex; gap: 1.2rem; color: var(--card-mute); }
.foot a { color: #BFE0EA; }
@media (max-width: 760px) {
  .privacy { padding-top: 48px; }
  .pv-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ------------------------------------------------------------------ step 2 dialog */
body.has-dialog { overflow: hidden; }
.apply-layer { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 12px; background: rgba(12, 20, 28, .55); }
.apply-layer[hidden] { display: none; }
.apply-card { position: relative; width: min(100%, 38rem); max-height: calc(100dvh - 24px); overflow: auto; }
.apply-card .win-bar { height: 2.4rem; font-size: .8125rem; }
.apply-card .win-bar .ico { width: 1.45rem; height: 1.3rem; }
.apply, .apply-done { padding: 1.5rem 1.8rem 1.6rem; }
.apply h2, .apply-done h2 { font: 760 1.9rem/1.1 var(--font-d); margin-bottom: .6rem; }
.apply-intro { color: var(--ink-2); margin-bottom: 1.1rem; }
.chips { border: 0; margin: 0 0 1.1rem; padding: 0; }
.chips legend { font-weight: 600; margin-bottom: .5rem; padding: 0; }
.chips label { display: inline-block; margin: 0 .35rem .4rem 0; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-block; padding: .45rem .95rem; border-radius: 99px; border: 1.5px solid #A5AFB8; background: #fff; cursor: pointer; }
.chips input:checked + span { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.chips input:focus-visible + span { outline: 3px solid var(--petrol-d); outline-offset: 2px; }
.field { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.field span { font-weight: 600; }
.field input, .field textarea { width: 100%; }
.apply-actions { display: flex; align-items: center; gap: 1rem; margin-top: .4rem; }
.apply-done { text-align: center; }
.apply-done:focus { outline: none; }
.apply-mark { width: 5rem; height: 4rem; margin: .4rem auto 1rem; display: block; }
.apply-done p { color: var(--ink-2); margin-bottom: 1.2rem; }

/* The signup window scrolls inside the story if the screen is short. */
.beat-join { max-height: calc(100% - 132px); overflow-y: auto; }


/* ------------------------------------------------------------------ the drift opens real windows */
.w-more, .w-msg { z-index: 2; }
.w-more .tab { display: flex; }
.pg.on { display: var(--d); }
#w-video { left: 300px; top: 104px; width: 720px; height: 470px; }
#w-shop { left: 170px; top: 318px; width: 690px; height: 470px; }
#w-feed { left: 800px; top: 300px; width: 700px; height: 480px; }
.w-msg { left: 1096px; top: 70px; width: 410px; height: 440px; display: flex; flex-direction: column; }
.ico-msg { position: relative; flex: none; display: block; width: 22px; height: 20px; border-radius: 6px; background: #3F8F63; }
.ico-msg::after { content: ""; position: absolute; left: 5px; top: 5px; width: 12px; height: 8px; border-radius: 4px 4px 4px 1px; background: #fff; }
.ms { flex: 1; display: grid; grid-template-columns: 136px 1fr; min-height: 0; background: #fff; }
.ms-side { padding: 8px 6px; background: #F2F0EA; border-right: 1px solid rgba(20, 32, 43, .08); }
.ms-row { display: flex; align-items: center; gap: 7px; margin: 0 0 2px; padding: 7px 6px; border-radius: 8px; }
.ms-row.on { background: #E1E6E2; }
.ms-row .av { width: 26px; height: 26px; }
.ms-row span { display: grid; min-width: 0; }
.ms-row b, .ms-row em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-row b { font-size: 12.5px; font-weight: 600; }
.ms-row em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.ms-chat { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; }
.ms-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; padding-bottom: 9px; border-bottom: 1px solid rgba(20, 32, 43, .08); }
.ms-head b { font: 700 16px/1.2 var(--font-d); }
.ms-head span { font-size: 12px; color: var(--muted); }
.mm { align-self: flex-start; max-width: 88%; margin: 0; padding: 7px 11px 8px; border-radius: 14px 14px 14px 4px; background: #EDF0EE; font-size: 14px; line-height: 1.3; }
.mm b { display: block; font-size: 11px; font-weight: 600; color: #3F8F63; }
.mm.me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: #3F8F63; color: #fff; }
.mm-card { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; background: #fff; border: 1px solid #D9DED9; }
.mm-card svg { width: 58px; height: 36px; flex: none; border-radius: 6px; background: #FBEBDD; }
.mm-card span { display: grid; }
.mm-card b { color: var(--ink); font-size: 13px; }
.mm-card em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.mm-card[data-s="hover"] { background: #F3F6F4; border-color: #3F8F63; }
.notif { position: absolute; left: 1150px; top: 764px; z-index: 6; display: flex; align-items: center; gap: 11px; width: 300px; margin: 0; padding: 11px 14px; border-radius: 10px; background: #fff; box-shadow: var(--shadow); font-size: 14px; line-height: 1.3; }
.notif span { display: grid; }
.notif b { font-size: 12px; font-weight: 600; color: var(--muted); }
.world .notif { visibility: hidden; opacity: 0; }
@media not all and (min-width: 820px) and (min-aspect-ratio: 5/4) {
  .mm { font-size: 17px; }
  .mm b { font-size: 13px; }
  .ms-head b { font-size: 19px; }
  .notif { font-size: 17px; width: 330px; left: 1120px; }
}

/* The opening chat: the typed message wraps; Start is real and shows that it started. */
.ctext:not(:empty) { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.cursor { pointer-events: none; }
#sess-start { cursor: pointer; }
.sb-b, #sess-start[data-s="on"] .sb-a { display: none; }
#sess-start[data-s="on"] .sb-b { display: inline; }
#sess-start[data-s="on"] { background: #DCE8EC; color: var(--petrol-d); }

/* Story mode: the chapter tabs show progress, so the page scrollbar is hidden (scrolling still works).
   static.css shows it again for the plain reading order. */
html { scrollbar-width: none; }

/* ------------------------------------------------------------------ v4: smooth playback, advance cue, firmness */
.cursor { will-change: transform; }
.next { position: relative; }
.next.pulse::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid #F3F0E9; pointer-events: none;
  animation: next-pulse 1.3s cubic-bezier(.2, .6, .3, 1) 1 both;
}
@keyframes next-pulse { from { opacity: .75; transform: scale(1); } to { opacity: 0; transform: scale(1.1, 1.4); } }
.cue {
  position: absolute; left: 50%; bottom: 22px; z-index: 3; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px 0 14px;
  border-radius: 16px; background: rgba(16, 24, 31, .66); color: #F3F0E9; font: 500 .8125rem var(--font-b); cursor: pointer;
  transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s;
}
.cue.on { opacity: 1; visibility: visible; transition: opacity .8s ease .3s, visibility 0s; }
.cue svg { width: 18px; height: 18px; }
.cue.on svg { animation: cue-float 2.6s ease-in-out infinite alternate; }
@keyframes cue-float { from { transform: translateY(-2px); } to { transform: translateY(3px); } }
@media not all and (min-width: 820px) and (min-aspect-ratio: 5/4) {
  .cue { bottom: 34px; }
}
@media (max-width: 359px) {
  .cue { left: auto; right: 24px; transform: none; }
}
.seg { display: flex; padding: 3px; border-radius: 9px; background: #EBE8E1; font-size: 14px; }
.seg label { position: relative; flex: 1; cursor: pointer; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg label span { display: block; padding: 6px 3px; border-radius: 6px; text-align: center; transition: background .2s, box-shadow .2s; }
.seg label:hover span { background: rgba(255, 255, 255, .55); }
.seg input:checked + span { background: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .14); }
.seg input:focus-visible + span { outline: 2px solid var(--petrol); outline-offset: 1px; }
.tg i, .tg i::after { transition: background .25s, border-color .25s, transform .25s; }
.lvl { display: grid; grid-template-columns: 40px 1fr; gap: 6px 10px; align-items: start; margin-top: 16px; }
.lvl-g { width: 40px; height: 32px; margin-top: 4px; }
.lvl-say {
  position: relative; justify-self: start; padding: 9px 13px 10px; border-radius: 12px; background: #fff; color: var(--ink);
  border: 1px solid var(--edge); box-shadow: inset 0 3px 0 var(--amber); font-size: 15px; line-height: 1.35;
}
.lvl-do { grid-column: 2; font-size: 14px; color: var(--muted); }
.h-stack span { display: block; }