/* DragShift · The Form: one full-screen desk at night, the words on top, the app's real ring. */
:root {
  --bg: #fff5f0;
  --ink: #24131c;
  --ink-2: #6f5e66;
  --line: #ecd8cf;
  --hot-a: #ff8c38;
  --hot-b: #ff3d6e;
  --red: #c8291f;
  --green: #12804a;
  --blue: #0a64d8;
  --font: -apple-system, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

/* The loader: the app's own ring. Its petals light up in turn (fast to 90 %, then a creep near the end that never
   stops, a quick finish when the page is ready); a soft sheen runs backwards over the lit ones; at 100 % the hub turns
   green with a tick, and the ring lifts away.
   Smooth on every device: each moving part is its own layer and only its opacity or transform is animated, by CSS
   (boot.js only finishes them). The browser runs those on the compositor, so the ring keeps moving even while the
   page is busy building the 3D (that used to freeze it for 100-200 ms at a time on a Mac, longer on phones).
   The petals' timing is the curve in boot.js (`shownAt`): 0.9 × (1 − e^(−t/0.55)) from 0.1 s, so the number agrees. */
.loader { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: grid; place-items: center; transition: opacity 420ms ease-out, visibility 0s 420ms; }
html:not(.is-loading) .loader { opacity: 0; visibility: hidden; pointer-events: none; }
html:not(.is-loading) .loader-ring { transform: scale(1.06); }
html:not(.is-loading) .lr-sheen i { animation-play-state: paused; }
.loader-box { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.loader-ring { position: relative; width: min(190px, 46vw); aspect-ratio: 1; isolation: isolate; transition: transform 420ms cubic-bezier(0.3, 1.4, 0.5, 1); }
.loader-ring > * { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lr-base { filter: drop-shadow(0 18px 30px rgba(120, 40, 50, 0.16)); }
.lr-disc { fill: #fcfbfa; }
.lr-body { fill: #f0eeee; stroke: #f0eeee; stroke-width: 18; stroke-linejoin: round; }
.lr-petal { opacity: 0; will-change: opacity; animation: lr-lit linear both; }
.lr-petal > * { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lr-hot path { stroke-width: 18; stroke-linejoin: round; }
.lr-sheen { opacity: 0.9; mix-blend-mode: soft-light; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.lr-sheen i { position: absolute; display: block; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0)); will-change: transform; animation: lr-sweep 1.1s cubic-bezier(0.15, 0.7, 0.35, 1) infinite; }
@keyframes lr-lit { from { opacity: 0; } to { opacity: 1; } }
/* the last petal: lit to 0.27 when the fast part reaches 90 %, then the creep (never quite full until the end) */
@keyframes lr-last { 0% { opacity: 0; } 10% { opacity: 0.27; } 30% { opacity: 0.56; } 60% { opacity: 0.76; } 100% { opacity: 0.86; } }
@keyframes lr-sweep { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
.lr-petal:nth-of-type(1) { animation-delay: 0.100s; animation-duration: 0.095s; }
.lr-petal:nth-of-type(1) .lr-sheen { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-170 -170 340 340'%3E%3Cpath d='M-50.68 -129.43A139 139 0 0 1 50.68 -129.43L21.88 -69.64A73 73 0 0 0 -21.88 -69.64Z' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-170 -170 340 340'%3E%3Cpath d='M-50.68 -129.43A139 139 0 0 1 50.68 -129.43L21.88 -69.64A73 73 0 0 0 -21.88 -69.64Z' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lr-petal:nth-of-type(1) .lr-sheen i { left: 32.45%; top: 6.47%; width: 35.11%; height: 26.18%; }
.lr-petal:nth-of-type(2) { animation-delay: 0.195s; animation-duration: 0.115s; }
.lr-petal:nth-of-type(2) .lr-sheen { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-170 -170 340 340'%3E%3Cpath d='M69.60 -120.32A139 139 0 0 1 132.79 -41.08L68.09 -26.31A73 73 0 0 0 40.80 -60.53Z' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-170 -170 340 340'%3E%3Cpath d='M69.60 -120.32A139 139 0 0 1 132.79 -41.08L68.09 -26.31A73 73 0 0 0 40.80 -60.53Z' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lr-petal:nth-of-type(2) .lr-sheen i { left: 58.10%; top: 11.96%; width: 33.60%; height: 34.34%; }
.lr-petal:nth-of-type(3) { animation-delay: 0.310s; animation-duration: 0.146s; }
.lr-petal:nth-of-type(3) .lr-sheen { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-170 -170 340 340'%3E%3Cpath d='M137.46 -20.61A139 139 0 0 1 114.91 78.21L63.03 36.83A73 73 0 0 0 72.77 -5.84Z' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-170 -170 340 340'%3E%3Cpath d='M137.46 -20.61A139 139 0 0 1 114.91 78.21L63.03 36.83A73 73 0 0 0 72.77 -5.84Z' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lr-petal:nth-of-type(3) .lr-sheen i { left: 65.10%; top: 41.29%; width: 28.43%; height: 34.36%; }
.lr-petal:nth-of-type(4) { animation-delay: 0.456s; animation-duration: 0.199s; }
.lr-petal:nth-of-type(4) .lr-sheen { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-170 -170 340 340'%3E%3Cpath d='M101.82 94.63A139 139 0 0 1 10.50 138.60L10.50 72.24A73 73 0 0 0 49.93 53.25Z' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-170 -170 340 340'%3E%3Cpath d='M101.82 94.63A139 139 0 0 1 10.50 138.60L10.50 72.24A73 73 0 0 0 49.93 53.25Z' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lr-petal:nth-of-type(4) .lr-sheen i { left: 48.97%; top: 61.97%; width: 33.62%; height: 31.44%; }
.lr-petal:nth-of-type(5) { animation-delay: 0.654s; animation-duration: 0.314s; }
.lr-petal:nth-of-type(5) .lr-sheen { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-170 -170 340 340'%3E%3Cpath d='M-10.50 138.60A139 139 0 0 1 -101.82 94.63L-49.93 53.25A73 73 0 0 0 -10.50 72.24Z' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-170 -170 340 340'%3E%3Cpath d='M-10.50 138.60A139 139 0 0 1 -101.82 94.63L-49.93 53.25A73 73 0 0 0 -10.50 72.24Z' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lr-petal:nth-of-type(5) .lr-sheen i { left: 17.41%; top: 61.97%; width: 33.62%; height: 31.44%; }
.lr-petal:nth-of-type(6) { animation-delay: 0.968s; animation-duration: 0.806s; }
.lr-petal:nth-of-type(6) .lr-sheen { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-170 -170 340 340'%3E%3Cpath d='M-114.91 78.21A139 139 0 0 1 -137.46 -20.61L-72.77 -5.84A73 73 0 0 0 -63.03 36.83Z' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-170 -170 340 340'%3E%3Cpath d='M-114.91 78.21A139 139 0 0 1 -137.46 -20.61L-72.77 -5.84A73 73 0 0 0 -63.03 36.83Z' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lr-petal:nth-of-type(6) .lr-sheen i { left: 6.47%; top: 41.29%; width: 28.43%; height: 34.36%; }
.lr-petal:nth-of-type(7) { animation-name: lr-last; animation-delay: 1.774s; animation-duration: 12s; }
.lr-petal:nth-of-type(7) .lr-sheen { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-170 -170 340 340'%3E%3Cpath d='M-132.79 -41.08A139 139 0 0 1 -69.60 -120.32L-40.80 -60.53A73 73 0 0 0 -68.09 -26.31Z' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-170 -170 340 340'%3E%3Cpath d='M-132.79 -41.08A139 139 0 0 1 -69.60 -120.32L-40.80 -60.53A73 73 0 0 0 -68.09 -26.31Z' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lr-petal:nth-of-type(7) .lr-sheen i { left: 8.30%; top: 11.96%; width: 33.60%; height: 34.34%; }
.lr-hub-ring { fill: #e9e7e7; }
.lr-hub { fill: #f8f7f7; transition: fill 220ms; }
.lr-pct { font: 800 26px var(--font); letter-spacing: -0.02em; text-anchor: middle; fill: var(--ink); font-variant-numeric: tabular-nums; }
.lr-tick { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 260ms ease-out 60ms; }
.loader.done .lr-hub { fill: var(--green); }
.loader.done .lr-pct { opacity: 0; }
.loader.done .lr-tick { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .lr-sheen { display: none; } }
.loader-line { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); min-height: 1.3em; }
.framed-note { display: none; }
html.framed body > * { display: none !important; }
html.framed body > .framed-note { display: grid !important; place-items: center; position: fixed; inset: 0; font-weight: 700; color: var(--blue); }

.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); }
.brand { display: flex; align-items: center; gap: 9px; min-height: 44px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.brand svg { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.brand svg circle + circle { fill: var(--hot-b); stroke: none; }
.nav-right { display: flex; align-items: center; gap: 24px; }
.nav-link { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.pill { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; font-weight: 600; background: var(--brand, var(--ink)); color: #fff; padding: 0 16px; border-radius: 999px; }
/* a bigger touch area than it looks */
.pill { position: relative; }
.pill::after { content: ""; position: absolute; inset: -5px -4px; }

.film { position: relative; }
/* the stage is the large viewport, so a phone's sliding toolbar never resizes the 3D */
.stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* one tall track under the sticky stage: its height (set by the script) is the whole film's scroll */
.film .track { margin-top: -100vh; margin-top: -100lvh; height: 900vh; }

/* "Scroll" until you do */
.hint { position: absolute; left: 50%; bottom: calc(26px + 100lvh - 100svh); z-index: 6; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); transition: opacity 400ms; pointer-events: none; }
.hint i { width: 2px; height: 22px; border-radius: 2px; background: linear-gradient(var(--ink-2), transparent); animation: drip 1.6s ease-in-out infinite; transform-origin: top; }
.hint.gone { opacity: 0; transition-duration: 90ms; }
@keyframes drip { 0% { transform: scaleY(0.2); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1) translateY(10px); opacity: 0; } }

/* The words: the time, one heading and one line per stop, centred at the top. */
.words { position: absolute; z-index: 3; top: 84px; left: 50%; transform: translateX(-50%); width: min(980px, calc(100% - 2 * var(--gutter))); text-align: center; pointer-events: none; }
.words .get { pointer-events: auto; }
.clock { margin: 0 0 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.clock i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(200, 41, 31, 0.14); animation: beat 1.2s ease-in-out infinite; }
.clock b { display: inline-block; color: var(--ink); font-weight: 700; min-width: 4.6em; text-align: right; }
.clock span::before { content: "·"; margin-right: 8px; color: #b9b6b0; }
.clock.done i { background: var(--green); box-shadow: 0 0 0 3px rgba(18, 128, 74, 0.14); animation: none; }
.clock.done span { color: var(--green); }
@keyframes beat { 50% { opacity: 0.35; } }
h1 { margin: 0; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.04; font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; }
.sub { margin: 12px auto 0; max-width: 44ch; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.35; color: var(--ink-2); text-wrap: pretty; }
.get { display: flex; justify-content: center; gap: 10px; margin-top: 22px; visibility: hidden; opacity: 0; }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 600; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.primary { background: var(--brand, var(--ink)); color: #fff; box-shadow: none; }
.btn.quiet { box-shadow: none; background: transparent; color: var(--blue); }
.btn:active { transform: scale(0.97); }
/* the file's size, the way Finder and Explorer show it (scripts/package-release.sh keeps it true) */
.btn .size { margin-left: 8px; font-weight: 500; opacity: 0.72; font-variant-numeric: tabular-nums; }

/* The size, next to the thing being uploaded: big red numbers that count down and turn green under the limit. */
.meter {
  position: absolute; z-index: 4; left: 0; top: 0; visibility: hidden; opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 249, 247, 0.92));
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.07), 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 40px -16px rgba(40, 30, 20, 0.45), 0 3px 8px -4px rgba(40, 30, 20, 0.18);
  will-change: transform, opacity;
}
.meter > div { display: flex; flex-direction: column; gap: 3px; }
.meter b { font-size: clamp(28px, 3.1vw, 44px); line-height: 1; font-weight: 750; letter-spacing: -0.03em; color: var(--red); font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.meter.good b { color: var(--green); }
/* the icon: a soft tinted tile with a fine line drawing (a file, a lock that opens, stacked pages) */
.mi { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--red);
  background: radial-gradient(120% 100% at 30% 20%, #fff3f1, #fbe1dd); box-shadow: inset 0 0 0 0.5px rgba(200, 41, 31, 0.18), inset 0 -2px 6px rgba(200, 41, 31, 0.08); }
.meter.good .mi { color: var(--green); background: radial-gradient(120% 100% at 30% 20%, #f0fbf4, #d9f1e2); box-shadow: inset 0 0 0 0.5px rgba(18, 128, 74, 0.2), inset 0 -2px 6px rgba(18, 128, 74, 0.08); }
.mi svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mi svg .fill { fill: currentColor; stroke: none; }
.mi svg .shackle { transition: transform 260ms cubic-bezier(0.3, 1.6, 0.5, 1); transform-origin: 8.5px 11px; }
.meter[data-icon="unlock"] .mi svg .shackle { transform: translateY(-2.2px) rotate(-28deg); }

/* The crop, the way a phone draws it: the edges dimmed, a white frame with a thirds grid and thick corner handles. */
.crop { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; visibility: hidden; }
.crop-dim { fill: rgba(12, 10, 14, 0.5); fill-rule: evenodd; }
.crop-flash { fill: #fff; }
.crop-grid { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.9; }
.crop-frame { fill: none; stroke: #fff; stroke-width: 1.4; }
.crop-handles { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }

/* The keystroke, like a screen recording that shows the keys pressed. */
.keycap {
  position: absolute; left: 50%; bottom: calc(22px + 100lvh - 100svh); z-index: 6; display: flex; align-items: center; gap: 8px;
  padding: 9px 18px 9px 14px; border-radius: 12px; font-weight: 600; font-size: 16px; color: #1d1d1f;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 3px 0 #d6d6dc, 0 14px 30px -12px rgba(0, 0, 0, 0.35);
  transform: translateX(-50%); opacity: 0;
}
.keycap span { font-size: 18px; }
.keycap b { font-weight: 600; }
.keycap.down { transform: translate(-50%, 2px); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 0 #d6d6dc, 0 8px 18px -10px rgba(0, 0, 0, 0.35); background: #f2f2f4; }

/* The app's own "Unlock PDF" window (PasswordSheet.swift): file, "Type the current password", the field, Unlock. */
.pw {
  position: absolute; z-index: 5; left: 0; top: 0; width: 300px; visibility: hidden; opacity: 0; pointer-events: none;
  border-radius: 12px; background: #f6f6f7; padding: 0 16px 16px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 24px 60px -18px rgba(20, 20, 40, 0.45), 0 8px 18px -10px rgba(20, 20, 40, 0.25);
  font-size: 13px; color: #1d1d1f; will-change: transform, opacity;
}
.pw-bar { position: relative; height: 30px; display: flex; align-items: center; gap: 7px; }
.pw-bar i { width: 11px; height: 11px; border-radius: 50%; background: #dcdce0; }
.pw-bar span { position: absolute; left: 0; right: 0; text-align: center; font-weight: 600; font-size: 12.5px; color: #4a4a50; }
.pw-file { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.pw-file b { display: block; font-size: 13px; }
.pw-file span { display: block; font-size: 12px; color: #86868b; margin-top: 1px; }
.pw-field { height: 30px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px #d2d2d7, 0 0 0 3px rgba(10, 100, 216, 0.22); display: flex; align-items: center; padding: 0 10px; gap: 1px; }
.pw-field span { font-size: 15px; letter-spacing: 2px; color: #1d1d1f; line-height: 1; }
.pw-field i { width: 1.5px; height: 16px; background: #0a64d8; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.pw-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.pw-cancel { padding: 5px 14px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 1px 1px rgba(0, 0, 0, 0.06); font-weight: 500; }
.pw-go { padding: 5px 16px; border-radius: 7px; color: #fff; font-weight: 700; background: linear-gradient(120deg, var(--hot-a), var(--hot-b)); box-shadow: 0 4px 10px -4px rgba(255, 61, 110, 0.6); transition: transform 80ms; }
.pw-go.on { transform: scale(0.94); filter: brightness(0.92); }

/* The ring, as the app draws it. */
.ring-host { position: absolute; z-index: 5; width: 360px; height: 360px; left: 0; top: 0; visibility: hidden; filter: drop-shadow(0 18px 30px rgba(20, 20, 40, 0.22)); pointer-events: none; }
.ring-svg { width: 100%; height: 100%; overflow: visible; }
.ring-svg .disc { fill: #fbfbfb; }
.ring-svg .petal .body { fill: #f2f2f3; stroke: #f2f2f3; stroke-width: 18; stroke-linejoin: round; }
.ring-svg .petal .hot { fill: url(#hot); stroke: url(#hot); stroke-width: 18; stroke-linejoin: round; opacity: 0; }
.ring-svg .petal.on .hot { opacity: 1; }
.ring-svg .name { font: 800 9.6px var(--font); letter-spacing: 0.35px; fill: #2c2c30; text-anchor: middle; }
.ring-svg .name.small { font-size: 8.2px; }
.ring-svg .icon { fill: none; stroke: #2c2c30; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ring-svg .icon .dot { fill: #2c2c30; stroke: none; }
.ring-svg .petal.on .name { fill: #fff; }
.ring-svg .petal.on .icon { stroke: #fff; }
.ring-svg .petal.on .icon .dot { fill: #fff; }
.ring-svg .hub-ring { fill: #e9e9eb; }
.ring-svg .hub-face { fill: #f7f7f8; }
.ring-svg .hub-title { font: 700 10.5px var(--font); fill: #1d1d20; text-anchor: middle; }
.ring-svg .hub-sub { font: 600 9px var(--font); fill: #8a8a90; text-anchor: middle; }
.ring-tabs { position: absolute; left: 50%; top: calc(50% + 184px); transform: translateX(-50%); display: flex; gap: 6px; }
.ring-tabs span { width: 70px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: #6b6b72; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 4px 10px -6px rgba(0, 0, 0, 0.25); }
.ring-tabs span.on { color: var(--ink); background: linear-gradient(120deg, var(--hot-a), var(--hot-b)); box-shadow: none; }
.ring-hint { display: none; }

.pointer { position: absolute; z-index: 7; left: 0; top: 0; width: 22px; height: 33px; margin: -2px 0 0 -2px; pointer-events: none; visibility: hidden; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }


/* The app's own colours: a blush-white page, the ring's orange-to-pink on the buttons and running into the end of
   every heading. */
.pill, .btn.primary { background: linear-gradient(120deg, var(--hot-a), var(--hot-b)); box-shadow: 0 8px 20px -10px rgba(255, 61, 110, 0.7); }
/* dark ink on the gradient, like the app's buttons: white on orange was 2.3:1, this is 5.2–7.7:1 (the size too) */
.pill, .btn.primary, .pw-go { color: var(--ink); }
.btn.primary .size { opacity: 1; font-weight: 500; }
h1, .get-it h2 { background: linear-gradient(100deg, var(--ink) 55%, #d6336c); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Skip link: only seen when it has keyboard focus. */
.skip { position: fixed; z-index: 60; left: 12px; top: 12px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; transform: translateY(-160%); transition: transform 160ms; }
.skip:focus { transform: none; outline: 3px solid var(--blue); outline-offset: 2px; }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 999px; }

/* The story in words and pictures: read out by screen readers always, shown only when there's no 3D. */
.story { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.story ol { list-style: none; margin: 0; padding: 0; }

/* After the film: the download, then a quiet footer. */
.get-it { padding: 120px var(--gutter) 64px; text-align: center; }
.get-it h2 { margin: 0; font-size: clamp(30px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
.get-it > p { margin: 14px auto 0; max-width: 46ch; color: var(--ink-2); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.4; }
.get-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.trust li::before { content: "✓"; margin-right: 6px; color: var(--green); }
.on-phone { margin: 22px auto 0; }
.on-phone p { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--ink); text-wrap: balance; }
.on-phone + .get-row { margin-top: 14px; }
.first-open { margin: 14px auto 0; max-width: 56ch; font-size: 13.5px; color: #6a5a62; line-height: 1.5; text-align: left; }
.first-open summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.first-open p { margin: 6px 0 0; }
.get-it .small { margin: 18px auto 0; font-size: 13px; color: #6a5a62; max-width: 56ch; line-height: 1.45; }
.foot { padding: 36px var(--gutter) 56px; text-align: center; font-size: 13px; color: #6a5a62; border-top: 1px solid #f0ddd4; }
.foot p { margin: 4px 0; }
.foot a { display: inline-block; padding: 14px 2px; margin: -14px 0; min-height: 44px; box-sizing: border-box; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* No 3D (or no script): the film steps aside and the story shows as pictures and words. */
:is(html.no-gl, html:not(.js)) .film { display: none; }
:is(html.no-gl, html:not(.js)) .loader { display: none; }
:is(html.no-gl, html:not(.js)) .story { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; padding: 96px var(--gutter) 0; max-width: 820px; margin: 0 auto; }
:is(html.no-gl, html:not(.js)) .story-lead { font-size: clamp(34px, 5vw, 60px); letter-spacing: -0.035em; line-height: 1.04; margin: 0 0 40px; text-align: center; }
:is(html.no-gl, html:not(.js)) .story li { margin: 0 0 56px; }
:is(html.no-gl, html:not(.js)) .story figure { margin: 0 0 18px; border-radius: 18px; overflow: hidden; background: #e9e5de; aspect-ratio: 1200 / 750; }
:is(html.no-gl, html:not(.js)) .story img { display: block; width: 100%; height: 100%; object-fit: cover; }
:is(html.no-gl, html:not(.js)) .story h3 { margin: 0; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.025em; }
:is(html.no-gl, html:not(.js)) .story p { margin: 8px 0 0; color: var(--ink-2); font-size: 17px; line-height: 1.45; }

/* Stills for the fallback story and the share picture: just the scene. */
html.shot .nav, html.shot .hint, html.shot .keycap, html.shot .skip { display: none !important; }
html.shot.still .words { display: none; }
html.shot.og .get, html.shot.og .sub { display: none !important; }

@media (max-width: 760px) {
  .nav { height: 54px; }
  .nav-link { display: none; }
  .words { top: 64px; }
  .clock { font-size: 12px; margin-bottom: 8px; gap: 6px; }
  .clock span::before { margin-right: 6px; }
  h1 { font-size: clamp(28px, 8vw, 34px); }
  .sub { font-size: 15.5px; margin-top: 8px; }
  .get { flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .get .btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
  .get .btn.quiet { display: none; }
  .keycap { bottom: calc(16px + 100lvh - 100svh); font-size: 14px; padding: 7px 14px 7px 11px; }
  .ring-tabs { display: none; }
  .get-it { padding-top: 88px; }
  .meter { padding: 7px 12px 8px 11px; border-radius: 13px; }
  .meter b { font-size: 26px; }
  .mi { width: 40px; height: 40px; border-radius: 12px; }
  .mi svg { width: 22px; height: 22px; }
  .meter { gap: 10px; padding: 8px 14px 8px 8px; }
  .pw { width: 270px; padding: 0 14px 14px; }
  .meter span { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .clock i, .hint i { animation: none; }
}