/* The prototype's page styles. Written by port-engine.mjs. */
@font-face { font-family: "ND"; src: url("/a/NewsreaderDisplay-latin.268e8b86f3.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "SG"; src: url("/a/SchibstedGrotesk-latin.3db1e48b02.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "MN"; src: url("/a/MonaspaceNeon-latin.cd9b4427a1.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "MD"; src: url("/a/MrDafoe-latin.9ee576503f.woff2") format("woff2"); font-weight: 400; font-display: block; }
:root { --bg0: #101c31; --bg1: #14233b; --bg2: #1a2d4b; --acc: #f0b429; --acc-hi: #ffd166; --mute: #a9b9d3; --gen1: #3c5f94; --gen2: #0e1a2e; --shop1: #6f95cc; --shop2: #34578f; --thread: #1b3358; --tag-edge: #6c9bd6; --star: #f0b429; --star-d: #9a6a08; --chip-d: #1a2d4b; --glow-gen: #f3d58a;
  --p-edge: #2f5d94; --p-edge-2: #6c9bd6; --p-script: #1b3358; --p-script-2: #2c4c80; --p-script-edge: #12264a; --p-stitch: #1b3358; }
/* The first look, pine and lime, is still here: add ?look=pine to the address. It has no depth layers. */
:root[data-look="pine"] { --bg0: #12261f; --bg1: #18332a; --bg2: #1f3f34; --acc: #befb37; --acc-hi: #d9ff7a; --mute: #a3bcae; --gen1: #3a6b58; --gen2: #12261f; --shop1: #5f9079; --shop2: #2f5c4b; --thread: #1f3f34; --tag-edge: #befb37; --star: #befb37; --star-d: #5f8a10; --chip-d: #1f3f34; --glow-gen: #cdeb8a;
  --p-edge: #8fc41a; --p-edge-2: #befb37; --p-script: #1f3f34; --p-script-2: #2f5c4b; --p-script-edge: #16302a; --p-stitch: #1f3f34; }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg0); scroll-behavior: smooth; }
body { font-family: "SG", -apple-system, system-ui, sans-serif; color: #f2f3ef; background: var(--bg1); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.bar { position: fixed; z-index: 50; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 7px 12px 7px 18px; padding-top: max(7px, env(safe-area-inset-top)); transition: background 0.35s, box-shadow 0.35s, backdrop-filter 0.35s; }
.bar.solid { background: color-mix(in srgb, var(--bg0) 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 rgba(242,243,239,0.1); }
.brand { display: inline-flex; align-items: baseline; gap: 5px; color: #f2f3ef; text-decoration: none; line-height: 1; }
.brand .g { font-family: "ND", Georgia, serif; font-weight: 500; font-size: 21px; letter-spacing: -0.01em; }
.brand .s { color: var(--acc); font-size: 12px; transform: translateY(-3px); }
.brand .m { font-family: "MD", cursive; font-size: 27px; transform: translateY(2px); -webkit-text-stroke: 0.35px currentColor; }
.btx { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 5px 0 13px; border-radius: 999px; background: rgba(242,243,239,0.1); box-shadow: inset 0 0 0 1px rgba(242,243,239,0.22); color: #f2f3ef; font-weight: 700; font-size: 13.500px; text-decoration: none; white-space: nowrap; transition: background 0.3s, color 0.3s, transform 0.3s cubic-bezier(0.3, 1.7, 0.5, 1); }
.btx i { width: 24px; height: 24px; border-radius: 50%; background: var(--acc); color: #111614; display: grid; place-items: center; font-style: normal; font-size: 13px; }
.btx:active { transform: scale(0.95); }

.scene { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 16px 26px; overflow: hidden; --bgc: var(--bg2); background: var(--bgc); --pu: 1px; --su: 1px; }
.scene.alt { --bgc: var(--bg1); }
.scene.hero { --bgc: var(--bg0); }
.scene::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 44%; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 12%, transparent), transparent); pointer-events: none; }
.scene.hero::before { top: 30%; width: 760px; height: 760px; margin: -380px 0 0 -380px; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 16%, transparent), transparent); }
.kick { position: relative; font-family: "MN", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.kick b { color: var(--acc); font-weight: 600; }
.kick i { font-style: normal; margin-left: 8px; padding: 3px 8px 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mute) 50%, transparent); font-size: 10.500px; letter-spacing: 0.06em; }
.beat { position: relative; width: 100%; }
.cam { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; grid-template-areas: "h" "rig" "slot" "line"; }
.cam h2 { grid-area: h; align-self: end; }
h1, h2 { font-family: "ND", Georgia, serif; font-weight: 500; letter-spacing: -0.022em; line-height: 1; text-align: center; text-wrap: balance; font-size: clamp(34px, 9.6vw, 62px); margin-top: 8px; }
.scene.hero h1 { font-size: clamp(44px, 12.4vw, 80px); margin-top: 26px; max-width: 11em; }
h2 em.on { background-size: 100% 0.13em; }
.ptilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
/* The phone is cut just under its typing line. The line itself stays sharp: only the last few pixels fade. */
.rig { grid-area: rig; margin-top: 18px; width: 550px !important; padding: 0 120px; height: calc(var(--msgs, 262px) + 174px); overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 12px), transparent); mask-image: linear-gradient(#000 calc(100% - 12px), transparent); }
.scene .msgs { flex: none; height: var(--msgs, 262px); }
.scene .glow { top: 250px; height: 250px; opacity: 0.32; }
.slot { grid-area: slot; position: relative; z-index: 4; min-height: var(--pay, 76px); margin-top: -54px; display: flex; justify-content: center; align-items: flex-start; }
.pcam .slot { margin-top: 24px; min-height: 62px; }
.line { grid-area: line; margin-top: 14px; font-size: 17px; line-height: 1.25; color: var(--mute); text-align: center; text-wrap: balance; max-width: 320px; min-height: 22px; }
.line b { color: #f2f3ef; font-weight: 600; }
.scene.hero .line { font-size: 18px; margin-top: 16px; }
.duo { position: relative; margin-top: 18px; font-family: "MN", monospace; font-size: 12px; letter-spacing: 0.04em; color: var(--mute); text-align: center; }
.duo b { color: #f2f3ef; font-weight: 600; }
.replay { position: absolute; z-index: 6; right: 14px; bottom: 18px; width: 34px; height: 34px; border-radius: 50%; background: rgba(242,243,239,0.14); color: #f2f3ef; display: grid; place-items: center; opacity: 0; transition: opacity 0.3s; }
.scene.done .replay { opacity: 1; }

.ticker { position: absolute; left: 0; right: 0; bottom: 20px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.ticker div { display: inline-flex; white-space: nowrap; font-family: "MN", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); animation: tick 36s linear infinite; }
.ticker span { padding: 0 13px; } .ticker i { color: var(--acc); font-style: normal; }
@keyframes tick { to { transform: translateX(-50%); } }

.scene.paper { --bgc: #f2f3ef; color: #111614; margin: 0 8px; border-radius: 36px; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.5); z-index: 1; }
.scene.paper::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 34%, transparent), transparent); top: 52%; }
.scene.paper .kick { color: #5b6560; } .scene.paper .kick b { color: var(--bg2); }
.scene.paper .line { color: #5b6560; margin-top: 26px; } .scene.paper .line b { color: #111614; }
.scene.paper .replay { background: rgba(17,22,20,0.1); color: #111614; }

.picks { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(100%, 360px); }
.pick { position: relative; text-align: left; border-radius: 16px; padding: 14px 14px 14px 44px; min-height: 62px; font-size: 15px; line-height: 1.18; font-weight: 600; color: #f2f3ef; background: rgba(242,243,239,0.08); border: 1.5px solid rgba(242,243,239,0.2); transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.28s cubic-bezier(0.3, 1.7, 0.5, 1); }
.pick:active { transform: scale(0.94); }
.pick::before { content: ""; position: absolute; left: 13px; top: 50%; width: 20px; height: 20px; margin-top: -11px; border-radius: 6px; border: 2px solid var(--mute); }
.pick.on { background: var(--acc); color: #111614; border-color: var(--acc); }
.pick.on::before { border-color: #111614; background: #111614; }
.pick.on::after { content: ""; position: absolute; left: 20px; top: 50%; width: 6px; height: 11px; margin-top: -8.500px; border: solid var(--acc); border-width: 0 2.600px 2.600px 0; border-radius: 1px; transform: rotate(42deg); }
.wishes { margin-top: 18px; display: flex; gap: 12px; justify-content: center; }
.wishes i { font-style: normal; font-size: 24px; line-height: 1; color: rgba(242,243,239,0.2); transition: color 0.25s, transform 0.5s cubic-bezier(0.3, 2.1, 0.5, 1), text-shadow 0.3s; }
.wishes i.on { color: var(--acc); transform: scale(1.3) rotate(90deg); text-shadow: 0 0 18px color-mix(in srgb, var(--acc) 70%, transparent); }
.go { margin-top: 14px; display: inline-flex; align-items: center; gap: 12px; background: rgba(242,243,239,0.12); color: var(--mute); font-weight: 700; font-size: 18px; border-radius: 999px; padding: 16px 18px 16px 26px; text-decoration: none; transition: background 0.3s, color 0.3s, transform 0.4s cubic-bezier(0.3, 1.7, 0.5, 1), box-shadow 0.3s; pointer-events: none; }
.go i { width: 36px; height: 36px; border-radius: 50%; background: rgba(17,22,20,0.4); color: var(--mute); display: grid; place-items: center; font-style: normal; transition: background 0.3s, color 0.3s; }
.go.ready { background: var(--acc); color: #111614; pointer-events: auto; transform: scale(1.04); box-shadow: 0 18px 44px -10px color-mix(in srgb, var(--acc) 55%, transparent); } .go.ready i { background: #111614; color: var(--acc); }
.ortext { color: #dfe6e0; font-size: 13.500px; font-weight: 600; }
.next { position: relative; margin-top: 20px; max-width: 330px; font-size: 14.500px; line-height: 1.35; color: var(--mute); text-align: center; text-wrap: balance; } .next b { color: #f2f3ef; font-weight: 600; }
.sign { margin-top: 20px; font-size: 15px; line-height: 1.35; text-align: center; text-wrap: balance; } .fine { margin-top: 10px; font-size: 12px; color: var(--mute); text-align: center; }

.bar .btx { transition: opacity 0.3s, transform 0.4s cubic-bezier(0.3, 1.7, 0.5, 1), background 0.3s; }
.bar.quiet .btx { opacity: 0; transform: translateY(-8px) scale(0.94); pointer-events: none; }
.wishes i.next { color: color-mix(in srgb, var(--acc) 55%, transparent); animation: wish 1.6s ease-in-out infinite; }
@keyframes wish { 50% { transform: scale(1.22); color: color-mix(in srgb, var(--acc) 90%, transparent); } }
.nametag { position: relative; margin-top: 18px; display: grid; justify-items: center; gap: 9px; }
.nametag span { font-family: "MN", monospace; font-size: 11.500px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.nametag input { width: 272px; height: 50px; border-radius: 12px; border: 4px solid var(--tag-edge); outline: 1.500px dashed color-mix(in srgb, var(--thread) 50%, transparent); outline-offset: -8px; background: repeating-linear-gradient(128deg, #f3efe2 0 2.600px, #e9e3d2 2.600px 3.600px); color: var(--thread); font: 800 17px "SG", Arial, sans-serif; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; box-shadow: 0 16px 30px -14px rgba(0,0,0,0.65); transition: transform 0.35s cubic-bezier(0.3, 1.7, 0.5, 1), border-color 0.2s; -webkit-appearance: none; appearance: none; }
.nametag input::placeholder { color: color-mix(in srgb, var(--thread) 40%, transparent); }
.nametag input:focus { border-color: var(--acc-hi); outline-color: var(--thread); transform: scale(1.03) rotate(-1deg); }
/* What happens after the text: three short steps on one line. */
.path { position: relative; list-style: none; margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); width: min(100%, 352px); font-size: 13px; line-height: 1.22; font-weight: 600; color: var(--mute); text-align: center; text-wrap: balance; }
.path li { position: relative; padding: 20px 6px 0; } .path li.on { color: #f2f3ef; }
.path li::before { content: ""; position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--bg1); box-shadow: inset 0 0 0 2px var(--mute); z-index: 1; }
.path li.on::before { background: var(--acc); box-shadow: 0 0 12px color-mix(in srgb, var(--acc) 70%, transparent); }
.path li + li::after { content: ""; position: absolute; right: 50%; top: 4px; width: 100%; height: 2px; background: color-mix(in srgb, var(--mute) 45%, transparent); }
/* The band that says what she plugs into. Shorter than a scene: it is one thought. */
.scene.fitband { min-height: 0; padding: 84px 16px 70px; --bgc: var(--bg0); }
.scene.fitband .line { margin-top: 30px; }
/* A heading that is a scene's own child stays inside the thread's frame. */
.scene > h2 { max-width: 13em; }
.filmband { background: #f2f3ef; color: #111614; padding: 44px 0 50px; }
.filmband h2 { font-size: 40px; letter-spacing: -0.02em; text-align: left; padding: 0 20px; margin-top: 0; }
.film { margin: 16px 20px 0; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 30px rgba(17,22,20,0.22); background: #0e1a15; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.foot { background: var(--bg0); padding: 40px 20px 46px; display: grid; gap: 8px; justify-items: center; text-align: center; font-size: 12px; line-height: 1.35; color: var(--mute); }
.foot .brand { margin-bottom: 2px; } .foot .tag { font-family: "ND", Georgia, serif; font-size: 22px; letter-spacing: -0.01em; color: #f2f3ef; margin-bottom: 8px; }
/* Depth. None of it should be noticed on its own. Still layers first. Every dark section has the same cloth and is
   darkest where it meets the next one and lightest in its middle, so the join between two sections does not show.
   The cloth has a twill weave and a little grain. */
:root:not([data-look="pine"]) .scene:not(.paper) { --bgc: var(--bg1); background:
  linear-gradient(180deg, rgba(4,7,24,0.36), rgba(4,7,24,0) 30%, rgba(4,7,24,0) 70%, rgba(4,7,24,0.36)),
  radial-gradient(120% 64% at 50% 50%, rgba(104,146,230,0.075), rgba(104,146,230,0) 62%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.72 0 0 0 0 0.82 0 0 0 0 1 0 0 0 0.5 -0.17'/%3E%3C/filter%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.012' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.75 0 0 0 0 0.85 0 0 0 0 1 0 0 0 0.42 -0.16'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='0.3'/%3E%3Crect width='220' height='220' filter='url(%23s)' opacity='0.17'/%3E%3C/svg%3E") 0 0 / 220px 220px,
  repeating-linear-gradient(128deg, rgba(196,216,255,0.024) 0 1px, rgba(196,216,255,0) 1px 3.500px),
  repeating-linear-gradient(38deg, rgba(0,3,18,0.055) 0 1px, rgba(0,3,18,0) 1px 4.500px),
  var(--bgc); }
/* Then light that moves: the warm lamp (the halo every scene has) and three cool pools of different hue behind it. */
:root:not([data-look="pine"]) .scene:not(.paper)::after { content: ""; position: absolute; z-index: -1; inset: -10% -8%; pointer-events: none; background-repeat: no-repeat; background-image:
  radial-gradient(40% 22% at 22% 58%, rgba(64,124,230,0.22), rgba(64,124,230,0) 70%),
  radial-gradient(34% 20% at 82% 40%, rgba(124,104,224,0.15), rgba(124,104,224,0) 70%),
  radial-gradient(30% 16% at 64% 64%, rgba(36,168,184,0.09), rgba(36,168,184,0) 70%); }
:root:not([data-look="pine"]) .scene.alt:not(.paper)::after { background-image:
  radial-gradient(40% 22% at 78% 60%, rgba(64,124,230,0.22), rgba(64,124,230,0) 70%),
  radial-gradient(34% 20% at 18% 40%, rgba(124,104,224,0.15), rgba(124,104,224,0) 70%),
  radial-gradient(30% 16% at 36% 66%, rgba(36,168,184,0.09), rgba(36,168,184,0) 70%); }
/* On the opening the pools lean a little with the pointer (the page script sets --mx and --my). */
:root:not([data-look="pine"]) .scene.hero::after { background-position: calc(var(--mx, 0) * 26px) calc(var(--my, 0) * 18px), calc(var(--mx, 0) * -34px) calc(var(--my, 0) * -16px), calc(var(--mx, 0) * 14px) 0; }
/* Only a scene on screen moves (the page script adds .inview). Each layer has two clocks of different length, so the
   light never visibly repeats. Where the browser can tie motion to the scroll, the light also lags behind the page. */
:root:not([data-look="pine"]) .scene.inview:not(.paper)::before { animation: gm-lamp 41s ease-in-out infinite alternate, gm-breathe 17s ease-in-out infinite alternate; }
:root:not([data-look="pine"]) .scene.inview:not(.paper)::after { animation: gm-pool 59s ease-in-out infinite alternate, gm-hue 43s ease-in-out infinite alternate; }
@keyframes gm-lamp { 0% { transform: translate3d(-5%, 3%, 0) scale(1); } 35% { transform: translate3d(4%, -4%, 0) scale(1.12); } 70% { transform: translate3d(7%, 5%, 0) scale(0.94); } 100% { transform: translate3d(-3%, -6%, 0) scale(1.08); } }
@keyframes gm-breathe { from { opacity: 0.62; } to { opacity: 1; } }
@keyframes gm-pool { 0% { transform: translate3d(2.500%, -2%, 0) scale(1); } 30% { transform: translate3d(-2.500%, 2.500%, 0) scale(1.05); } 65% { transform: translate3d(-1%, -2.500%, 0) scale(1.08); } 100% { transform: translate3d(2.500%, 2.500%, 0) scale(1.02); } }
@keyframes gm-hue { from { filter: hue-rotate(-14deg) saturate(0.9); } to { filter: hue-rotate(18deg) saturate(1.3); } }
@keyframes gm-far { from { translate: 0 -4%; } to { translate: 0 4%; } }
@keyframes gm-near { from { translate: 0 -46px; } to { translate: 0 46px; } }
@supports (animation-timeline: view()) {
  /* The scene itself is the clock: a scene clips its own overflow, so its layers cannot watch the page scroll on their own. */
  :root:not([data-look="pine"]) .scene:not(.paper) { view-timeline: --gm-scene block; }
  :root:not([data-look="pine"]) .scene.inview:not(.paper)::before { animation: gm-lamp 41s ease-in-out infinite alternate, gm-breathe 17s ease-in-out infinite alternate, gm-near linear both; animation-timeline: auto, auto, --gm-scene; }
  :root:not([data-look="pine"]) .scene.inview:not(.paper)::after { animation: gm-pool 59s ease-in-out infinite alternate, gm-hue 43s ease-in-out infinite alternate, gm-far linear both; animation-timeline: auto, auto, --gm-scene; }
}
/* One thread ties the dark sections together (the page script draws it). Chalk dots mark where it will go, gold
   stitches show where the star has sewn, and a rivet sets at each turn. It lies on the cloth and under the paper card. */
.thr { position: absolute; left: 0; top: 0; width: 100%; height: 0; pointer-events: none; }
.thr svg { position: absolute; left: 0; display: block; overflow: visible; }
.thr-ch, .thr-sh, .thr-st { fill: none; stroke-linecap: round; }
.thr-ch { stroke: rgba(214,228,255,0.15); stroke-width: 1.100; stroke-dasharray: 0.100 7.400; }
.thr-sh { stroke: rgba(2,4,16,0.5); stroke-width: 2; stroke-dasharray: 9 6; }
.thr-st { stroke: var(--acc); stroke-width: 1.800; stroke-dasharray: 9 6; opacity: 0.8; }
.thr-rv { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.55s cubic-bezier(0.3, 1.9, 0.5, 1); }
.thr-rv.on { transform: scale(1); }
.thr-star path, .thr-mote { fill: var(--star); }
.thr-halo { fill: var(--star); opacity: 0.2; filter: blur(6px); }
.thr-star.home .thr-halo { animation: gm-twinkle 2.300s ease-in-out infinite alternate; }
@keyframes gm-twinkle { from { opacity: 0.14; } to { opacity: 0.55; } }
/* When the thread reaches the text button, the button answers once. */
.go.sewn { animation: gm-sewn 0.800s ease-out 1; }
@keyframes gm-sewn { 30% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--acc) 30%, transparent), 0 18px 44px -10px color-mix(in srgb, var(--acc) 55%, transparent); } }
/* A section that leaves falls a little behind the page and dims, so the next one slides over it like a second
   panel of cloth. The seam of that panel is the thread's run along the join. */
@keyframes gm-leave { 40% { opacity: 1; } to { translate: 0 18svh; opacity: 0.4; } }
@supports (animation-timeline: view()) {
  .scene { view-timeline: --gm-scene block; }
  .scene:not(.ask) > :not(.replay) { animation: gm-leave linear both; animation-timeline: --gm-scene; animation-range: exit 0% exit 100%; }
}
/* The thread keeps 14 px plus its reach from any text (the page script, threadclear.mjs). The last section holds still
   as it leaves, because the thread ends inside it beside the text button. On a phone the thread is a hem 6 px from the
   edge, so the dark sections keep their words 28 px in, and a replay button sits inside the hem. */
@media (max-width: 959px) { .scene:not(.hero):not(.paper) { padding-left: 28px; padding-right: 28px; } .scene:not(.hero):not(.paper) h2 { padding: 0 4px; } .replay { right: 34px; } }
@media (min-width: 960px) and (max-width: 1099px) { .replay { right: calc((100% - 900px) / 2 + 40px); } }
/* The opening shows her desk without a scroll, so on a short screen the patch and the headline get smaller. */
@media (max-width: 899px) and (max-height: 780px) { .scene.hero { --pu: 0.86px; padding-top: 54px; padding-bottom: 16px; } .scene.hero h1 { margin-top: 18px; } }
@media (min-width: 900px) and (max-height: 880px) { .scene.hero h1 { font-size: 68px; margin-top: 20px; } }
@media (min-width: 900px) { .scene { --pu: 1.2px; --su: 1.2px; } .scene.hero, .scene.paper { --pu: 1.55px; } .scene.hero { --su: 1.35px; } .scene.hero .line { font-size: 21px; max-width: 520px; } .scene.paper .line { font-size: 20px; margin-top: 34px; } .duo { font-size: 13px; margin-top: 22px; } .rig { width: calc(310px * 1.2 + 240px) !important; height: calc((var(--msgs, 262px) + 174px) * 1.2); } .slot { margin-top: -65px; } .pcam .slot { margin-top: 24px; } .scene .msgs { height: calc(var(--msgs, 262px) * 1.2); } .slot { min-height: calc(var(--pay, 76px) * 1.2); } .film, .filmband h2 { max-width: 900px; margin-left: auto; margin-right: auto; } .bar { padding-left: 28px; padding-right: 24px; } .line { max-width: 420px; } }
@media (min-width: 900px) and (max-width: 1399px) { .scene.paper { --pu: 1.3px; } }
@media (min-width: 900px) and (max-height: 880px) { .scene.hero { --pu: 1.2px; padding-bottom: 20px; } }
@media (min-width: 900px) and (max-height: 740px) { .scene.hero { --pu: 1.05px; --su: 1.2px; padding-top: 52px; } .scene.hero h1 { font-size: 58px; margin-top: 14px; } .scene.hero .line { font-size: 19px; margin-top: 12px; } }
@media (prefers-reduced-motion: reduce) { .ticker div { animation: none; } html { scroll-behavior: auto; } .scene::before, .scene::after, .scene > *, .go.sewn, .thr-star.home .thr-halo { animation: none !important; } .thr-rv { transition: none; } }

/* The site's own rules. The prototype's rules are in proto.css, which the build puts first. */
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.foot { position: relative; margin-top: 18px; display: grid; gap: 5px; font-size: 12px; line-height: 1.3; color: var(--mute); text-align: center; }
.ortext { position: relative; margin-top: 14px; }
.foot a { color: inherit; text-underline-offset: 3px; display: inline-block; padding: 12px 6px; margin: -12px 0; }

/* The film, on paper, between the last example and the picks. */
.filmband { background: #f2f3ef; color: #111614; padding: 44px 0 50px; }
.filmband h2 { font-size: 40px; letter-spacing: -0.02em; text-align: left; padding: 0 20px; margin-top: 0; }
.film video { aspect-ratio: 16 / 9; }

/* The plain pages: privacy and not found. */
.plain { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; }
.plain .copy { margin-top: 22px; max-width: 420px; display: grid; gap: 14px; font-size: 17px; line-height: 1.4; color: #dfe6e0; }
.plain .copy a, .plain .back { color: var(--acc); text-underline-offset: 3px; }
.plain .back { margin-top: 26px; font-weight: 700; font-size: 16px; }
.plain .foot { margin-top: 34px; }

@media (min-width: 900px) { .filmband h2 { padding: 0; } }