/* Santa Shuffle. Layout: a night sky fills the window and one lit 3D globe sits on it.
   Type is large and quiet; colour lives in the scene, and the interface keeps to
   near-white on glass with a single champagne-gold accent. */
:root {
  color-scheme: dark;
  --bg: #05070f; --text: #f6f2ea; --soft: #c6cedd; --muted: #98a2b6;
  --line: #ffffff21; --glass: #0a1020b8; --field: #ffffff0f;
  --gold: #f1d08f; --gold-hi: #fbe7bb; --gold-deep: #b78d45; --ink: #1a1305;
  --rose: #ff8f85;
  --aurora: #8fe9cf;
  /* Typeface: Grenze for headings and names, Manuale for text (Omnibus-Type, Open Font License).
     --ds / --us / --ls scale large display, small display and label sizes; the headline is set at 122%. */
  --display: 'Grenze', 'Iowan Old Style', Georgia, serif; --accent: var(--display); --label: var(--display); --num: var(--display);
  --body: 'Manuale', 'Iowan Old Style', Georgia, serif;
  --astyle: normal; --dw: 400; --aw: 400; --lw: 400; --nw: 400;
  --ds: 1.025; --us: 0.89; --ls: 0.89; --ns: 0.89; --as: 1; --dlh: 1; --dtrack: -0.015em; --dvars: normal; --lvars: normal;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; min-height: 100svh; color: var(--text); background: var(--bg); font: 400 1rem/1.55 var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }

#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; transform: translateZ(0); }
.no3d #gl { display: none; }
.no3d body { background: radial-gradient(90% 60% at 30% 20%, #16306a55, transparent 70%), radial-gradient(70% 50% at 70% 10%, #1f8a6a33, transparent 70%), var(--bg); }
#glow { position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; z-index: 0; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, #f1d08f1c, transparent); mix-blend-mode: screen; }

/* Phones scroll the page themselves, off the main thread, so a globe that JavaScript keeps moving to follow the
   page always trails it by a frame or two and shivers. There (.flow) the canvas is part of the page instead: one
   screen tall at the top, scrolled by the browser like any picture. Its lower edge fades into a still night sky
   that stays behind the rest of the page. --gl-need is set from app.js if the globe sits lower than one screen. */
.flow #gl { position: absolute; height: max(100vh, var(--gl-need, 0px)); height: max(100lvh, var(--gl-need, 0px)); -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.flow body::before {
  content: ""; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 38px 52px, #ffffffb3 0.8px, transparent 1.6px), radial-gradient(circle at 214px 118px, #ffffff8c 0.7px, transparent 1.5px),
    radial-gradient(circle at 126px 236px, #ffffffa6 0.9px, transparent 1.7px), radial-gradient(circle at 296px 318px, #ffffff80 0.7px, transparent 1.5px),
    radial-gradient(circle at 70px 372px, #ffffff99 0.8px, transparent 1.6px),
    radial-gradient(120% 34% at 24% 30%, #1f7a6a3d, transparent 72%), radial-gradient(110% 30% at 82% 46%, #2a4f8a33, transparent 72%),
    linear-gradient(#0d0f1f, #141a33 55%, #10152b);
  background-size: 340px 410px, 340px 410px, 340px 410px, 340px 410px, 340px 410px, auto, auto, auto;
}

/* GSAP's smooth scrolling moves #smooth-content inside a fixed #smooth-wrapper. position: sticky can't work in
   there, so while it is on (.smooth) the globe column is pinned from app.js instead. */
#smooth-wrapper { position: relative; z-index: 1; }
.smooth .stage { position: static; top: auto; }
.page {
  position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding-block: 20px 96px;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
h1, h2, h3, p { margin: 0; }
h1 { font: var(--dw) calc(clamp(3rem, 6vw, 5.2rem) * var(--ds))/var(--dlh) var(--display); font-variation-settings: var(--dvars); letter-spacing: var(--dtrack); text-wrap: balance; }
h1 em { font-family: var(--accent); font-style: var(--astyle); font-weight: var(--aw); font-size: calc(1em * var(--as)); font-variation-settings: normal; letter-spacing: 0; color: var(--gold); }
h2 { font: var(--lw) calc(2.3rem * var(--ls))/1.1 var(--label); font-variation-settings: var(--lvars); letter-spacing: -0.01em; text-wrap: balance; }
.lede { color: var(--soft); font-size: 1.1rem; max-width: 40ch; text-wrap: pretty; }
.q { font: var(--lw) calc(1.9rem * var(--ls))/1.15 var(--label); font-variation-settings: var(--lvars); letter-spacing: -0.01em; }
.hint { color: var(--muted); font-size: 0.875rem; }
a { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
/* words and letters that rise into place */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.12em 0.08em 0.16em 0; margin: -0.12em -0.08em -0.16em 0; }
.wi, .c { display: inline-block; will-change: transform; }

.bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(18px, 4vh, 44px); }
/* The logo sleeps until the light from the cursor comes near: --near runs from 0 (dark) to 1 (lit) and is set
   from app.js. Where there is no cursor, or it has keyboard focus, it stays lit. */
.wordmark { --lit: var(--near, 1); display: inline-flex; color: color-mix(in oklab, var(--gold) calc(var(--lit) * 100%), #414c63); filter: drop-shadow(0 0 calc(var(--lit) * 16px) #f1d08f73); transition: color 0.45s ease-out, filter 0.45s ease-out; }
.wordmark:hover, .wordmark:focus-visible { --lit: 1; }
.wordmark.dozing { transition-duration: 3s; }
.wordmark svg { display: block; height: clamp(34px, 4.4vw, 46px); width: auto; }
.sound { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #0a102080; color: var(--gold); font-size: 1.05rem; cursor: pointer; transition: border-color 0.2s; }
.sound:hover { border-color: var(--gold); }
.sound[aria-pressed=false] { color: var(--muted); text-decoration: line-through; }

/* ---------- Setup ---------- */
.setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 56px; align-items: start; }
.stage { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; padding-top: clamp(14px, 4.5vh, 46px); }
/* The card: a Christmas-card frame. Deep evergreen glass, and a double gold border. */
.panel {
  position: relative; display: flex; flex-direction: column; padding: 16px 36px 18px; border: 1.5px solid #cfa85e; border-radius: 26px;
  background: linear-gradient(165deg, #11382fd9 0%, #0c2330e0 46%, #0a1526e8 100%);
  backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow: 0 40px 100px -40px #000c, 0 0 70px -24px #f1d08f40, 0 1px 0 #ffffff1f inset;
}
.panel::before { content: ""; position: absolute; inset: 7px; border: 1px solid #f1d08f5c; border-radius: 19px; pointer-events: none; }
.panel .q, .panel h2 { color: var(--gold-hi); }
.field { display: flex; flex-direction: column; gap: 13px; padding: 20px 0; }
.steps { min-width: 0; }
/* Back: a chevron in a circle, used at the top of a step and in the bar. */
.backbtn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: #0a102080; color: var(--text); font-size: 1.4rem; line-height: 1; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.backbtn svg { width: 20px; height: 20px; transition: transform 0.25s; }
.backbtn:hover { border-color: var(--gold); color: var(--gold-hi); background: #f1d08f14; }
.backbtn:hover svg { transform: translateX(-2px); }
.barleft { display: flex; align-items: center; gap: 14px; min-width: 0; }
.field > header.steptop { justify-content: flex-start; align-items: center; gap: 14px; }
.field > header { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* A small "i" that opens a note on hover, focus or tap. */
.qrow { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.tip { position: relative; flex: none; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 600 0.7rem/1 var(--body); transition: border-color 0.2s, color 0.2s; }
.tip::before { content: ""; position: absolute; inset: -12px; }      /* a finger-sized target around a small mark */
.tip:hover, .tip[aria-expanded=true] { border-color: var(--gold); color: var(--gold-hi); }
.tip-text { position: absolute; z-index: 5; left: 0; top: calc(100% + 12px); width: min(300px, 100%); padding: 12px 15px; border-radius: 14px; background: #101a30f7; border: 1px solid var(--line); box-shadow: 0 22px 44px -16px #000; font: 400 0.88rem/1.45 var(--body); color: var(--soft); text-align: left; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.2s, visibility 0.2s, transform 0.2s; pointer-events: none; }
.tip:hover + .tip-text, .tip:focus-visible + .tip-text, .tip[aria-expanded=true] + .tip-text { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 940px) {
  .setup { grid-template-columns: minmax(0, 560px); justify-content: center; gap: 22px; }
  .stage { position: static; align-items: center; text-align: center; }
  .panel { padding: 12px 24px 14px; border-radius: 22px; }
  .panel::before { inset: 6px; border-radius: 16px; }
  .q { font-size: calc(1.72rem * var(--ls)); }
  h2 { font-size: calc(2rem * var(--ls)); }
}
@media (max-height: 800px) { .stage { position: static; } }

/* The globe is drawn on the canvas behind; this is the space it occupies and the handle for shaking it. */
.globe-host { position: relative; width: min(470px, 100%, 47vh); aspect-ratio: 1 / 1.14; align-self: center; margin: -8px 0 -14px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.globe-host:active { cursor: grabbing; }
.no3d .globe-host { aspect-ratio: 1; margin: 12px 0; border-radius: 50%; border: 1px solid var(--line); background: radial-gradient(circle at 34% 26%, #ffffff3a, #2a4a8a55 42%, #0b1222 76%); box-shadow: 0 0 120px #f1d08f33; }
/* What the globe has to say: a small, quiet speech bubble floating beside it, in aurora-tinted glass. */
.bubble {
  position: absolute; left: 73%; top: 1%; z-index: 2; width: max-content; max-width: min(210px, 46vw); margin: 0; padding: 10px 15px 11px;
  font: var(--astyle) var(--aw) calc(1.2rem * var(--us) * var(--as))/1.22 var(--accent); text-align: left; color: #dff7ee;
  background: linear-gradient(135deg, #1d5a6266, #16306a66); border: 1px solid #8fe9cf4d; border-radius: 16px 16px 16px 4px;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 14px 30px -16px #000c;
  pointer-events: none; transform-origin: 0% 100%; animation: bob 4.5s ease-in-out infinite;
}
.bubble::after { content: ""; position: absolute; left: 10px; bottom: -6px; width: 10px; height: 10px; background: #1b4a66; border: solid #8fe9cf4d; border-width: 0 1px 1px 0; transform: rotate(45deg); border-radius: 0 0 3px 0; }
@keyframes bob { 50% { translate: 0 -7px; } }
@media (max-width: 940px) { .globe-host { margin-top: 34px; } .bubble { left: auto; right: -6px; top: -3%; max-width: min(170px, 44%); font-size: calc(1.1rem * var(--us) * var(--as)); padding: 9px 13px 10px; } }

/* ---------- Controls ---------- */
input[type=text] { width: 100%; min-width: 0; height: 50px; padding: 0 16px; font: inherit; color: var(--text); background: var(--field); border: 1px solid transparent; border-radius: 14px; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
input[type=text]::placeholder { color: #808aa0; }
input[type=text]:hover { border-color: var(--line); }
input[type=text]:focus-visible { outline: none; border-color: var(--gold); background: #ffffff14; box-shadow: 0 0 0 4px #f1d08f21; }
button { font: inherit; color: inherit; cursor: pointer; }
button, input, select, summary, a { touch-action: manipulation; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 20px; font-weight: 600; background: transparent; border: 1px solid var(--line); border-radius: 14px; white-space: nowrap; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.btn:hover { border-color: var(--gold); color: var(--gold-hi); background: #f1d08f12; }
.btn svg { width: 16px; height: 16px; }
.btn.small { height: 40px; padding: 0 14px; font-size: 0.9rem; border-radius: 12px; }
.add { display: flex; gap: 8px; }
.people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.people li { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: center; padding: 3px 0; }
.people input[type=text] { height: 38px; padding: 0 10px; font-size: 0.9rem; background: transparent; border-radius: 10px; }
.people input[type=text]:focus-visible { background: var(--field); }
.people input[type=text].who { height: 44px; padding: 0 10px; margin-left: -10px; font: var(--astyle) var(--aw) calc(1.45rem * var(--us) * var(--as))/1.2 var(--accent); background: transparent; border-radius: 10px; text-overflow: ellipsis; }
.x { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.15rem; line-height: 1; transition: background 0.2s, color 0.2s; }
.x:hover { background: #ffffff1a; color: var(--text); }
.note { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.link { background: none; border: 0; padding: 0; color: var(--gold); text-decoration: underline; font-size: 0.875rem; }

.budget { display: flex; align-items: center; gap: 24px; }
.budget output { font: var(--nw) calc(4.2rem * var(--ns))/0.9 var(--num); color: var(--gold-hi); min-width: 2.5ch; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 32px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--gold), #ffffff30); border-radius: 3px; }
input[type=range]::-moz-range-track { height: 3px; background: linear-gradient(90deg, var(--gold), #ffffff30); border-radius: 3px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -11px; border-radius: 50%; border: 0; background: radial-gradient(circle at 35% 30%, #fff8e3, var(--gold) 60%, var(--gold-deep)); box-shadow: 0 0 0 7px #f1d08f24, 0 3px 10px #000a; transition: box-shadow 0.2s; }
input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; border: 0; background: radial-gradient(circle at 35% 30%, #fff8e3, var(--gold) 60%, var(--gold-deep)); box-shadow: 0 0 0 7px #f1d08f24, 0 3px 10px #000a; }
input[type=range]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 11px #f1d08f2e, 0 3px 10px #000a; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 15px; border-radius: 999px; background: #0d1c3399; border: 1px solid var(--line); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); font-weight: 500; font-size: 0.92rem; font-variant-numeric: tabular-nums; transition: background 0.2s, border-color 0.2s, color 0.2s; }
button.chip:hover { border-color: var(--gold); }
.chip[aria-pressed=true] { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 600; }
.chip.pair { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 14px; }
.chip.pair .x { width: 24px; height: 24px; font-size: 1rem; }

summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--gold); font: 400 1.6rem/1 var(--display); }
details[open] summary::after { content: "–"; }
details .inner { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
.apart { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
select { flex: 1 1 130px; min-width: 0; height: 50px; padding: 0 12px; font: inherit; color: var(--text); background: #141c2e; border: 1px solid var(--line); border-radius: 14px; }

.cta {
  position: relative; overflow: hidden; width: 100%; height: 62px; padding: 0 28px; border: 0; border-radius: 999px;
  font: 600 1.1rem/1 var(--body); letter-spacing: 0.01em; color: var(--ink);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #d6b06a);
  box-shadow: 0 1px 0 #fffa inset, 0 14px 44px -10px #f1d08f99; transition: box-shadow 0.3s, filter 0.3s;
}
.cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, #ffffffb0 50%, transparent 65%); transform: translateX(-120%); transition: transform 0.8s cubic-bezier(.2, .7, .2, 1); }
.cta:hover::after { transform: translateX(120%); }
.cta:hover { box-shadow: 0 1px 0 #fffa inset, 0 18px 60px -8px #f1d08fcc; }
.cta:disabled { opacity: 0.6; cursor: progress; }
.error { color: var(--rose); font-weight: 500; }
.go { text-align: center; }

/* ---------- Links, sealed and ready ---------- */
.letters { display: flex; flex-direction: column; gap: 8px; perspective: 900px; }
.letter { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 14px; background: #ffffff0a; border: 1px solid var(--line); border-radius: 18px; }
.mono { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: var(--astyle) var(--aw) calc(1.5rem * var(--us) * var(--as))/1 var(--accent); color: var(--gold-hi); border: 1px solid var(--gold-deep); background: radial-gradient(circle at 35% 30%, #f1d08f40, transparent 70%); }
button.mono { padding: 0; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
button.mono:hover, button.mono:focus-visible { border-color: var(--gold-hi); color: #fff; }
.mono svg { width: 24px; height: 24px; }
.mono .glyph { display: block; line-height: 1; }
.modes { display: flex; align-items: baseline; gap: 2px 14px; flex-wrap: wrap; margin-top: 4px; color: var(--muted); font-size: 0.84rem; }
.opt { padding: 5px 0; border: 0; background: none; color: var(--soft); text-decoration: underline transparent 1px; text-underline-offset: 5px; transition: color 0.2s, text-decoration-color 0.2s; }
.opt:hover, .opt:focus-visible { color: var(--text); outline: none; text-decoration-color: #ffffff59; }
.opt[aria-pressed=true] { color: var(--gold); text-decoration-color: currentColor; }
.letter .to { flex: 1 1 110px; min-width: 0; line-height: 1.15; }
.letter .to b { display: block; font: var(--astyle) var(--aw) calc(1.5rem * var(--us) * var(--as))/1.15 var(--accent); overflow-wrap: anywhere; }
.letter .to small { color: var(--muted); font-size: 0.8rem; }
.letter.copied { border-color: #f1d08f66; }
.letter.copied .to small { color: var(--gold); }
.letter .acts { flex: 1 1 100%; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-left: 58px; }
/* Peek: an eye at the right of the card that opens out to say so on hover. */
.peek { flex: none; margin-left: auto; display: inline-flex; align-items: center; height: 42px; min-width: 42px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.peek svg { flex: none; width: 18px; height: 18px; }
.peek span { max-width: 0; margin-left: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.35s cubic-bezier(.2, .8, .2, 1), margin-left 0.35s cubic-bezier(.2, .8, .2, 1), opacity 0.25s; }
.peek:hover, .peek:focus-visible { border-color: var(--gold); color: var(--gold-hi); background: #f1d08f14; }
.peek:hover span, .peek:focus-visible span, .peek.plain span { max-width: 4em; margin-left: 8px; opacity: 1; }
.letter .acts button, .letter .acts a { display: inline-flex; align-items: center; height: 36px; padding: 0 13px; font-size: 0.85rem; font-weight: 600; color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 11px; text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.letter .acts button { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.letter .acts a:hover { border-color: var(--gold); color: var(--gold-hi); }
.letter input[type=text] { flex: 1 1 100%; height: 36px; font: 0.8rem ui-monospace, monospace; }

/* ---------- Reveal ---------- */
.reveal { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.reveal .top { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.reveal h1 { font-family: var(--accent); font-style: var(--astyle); font-weight: var(--aw); font-size: calc(clamp(3rem, 6vw, 5.2rem) * var(--ds) * var(--as)); font-variation-settings: normal; letter-spacing: -0.01em; }
.reveal .globe-host { width: min(500px, 100%, 52vh); }
.reveal .cta { max-width: 320px; margin-top: 22px; }
.match { display: flex; flex-direction: column; margin-top: clamp(48px, 8vh, 84px); }
.match .who { text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; padding-bottom: 14px; }
.eyebrow { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.match .who b { font: var(--dw) calc(clamp(3.4rem, 11vw, 6.5rem) * var(--ds))/1.05 var(--display); font-variation-settings: var(--dvars); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.match > .field { padding: 22px 0; }

.ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; perspective: 1400px; }
@media (min-width: 620px) { .ideas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.idea { position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #0b1224d9; border: 1px solid var(--line); transform-style: preserve-3d; will-change: transform; transition: border-color 0.3s, box-shadow 0.3s; }
.idea:hover { border-color: #ffffff4d; box-shadow: 0 30px 60px -30px hsl(var(--h) 80% 55% / 0.55); }
/* The picture: painted from the idea's own colour until real product photos are available. */
.art {
  position: relative; aspect-ratio: 16 / 11; display: grid; place-items: center; overflow: hidden; color: #fff; font: 400 3.4rem/1 var(--display);
  background:
    radial-gradient(85% 90% at 14% 6%, hsl(var(--h) 96% 74% / 0.95), transparent 60%),
    radial-gradient(85% 85% at 100% 100%, hsl(calc(var(--h) - 12) 92% 48% / 0.8), transparent 62%),
    linear-gradient(135deg, hsl(var(--h) 72% 36%), hsl(calc(var(--h) - 20) 66% 13%));
}
.art::before { content: ""; position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #ffffff38; box-shadow: 0 0 0 22px #ffffff0f, 0 0 0 46px #ffffff08; }
.art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at var(--gx, 30%) var(--gy, 20%), #ffffff45, transparent 70%); mix-blend-mode: soft-light; }
.art svg { position: relative; width: 42%; max-width: 64px; height: auto; stroke-width: 1.15; filter: drop-shadow(0 8px 16px #0007); }
.idea .body { padding: 13px 15px 16px; font-weight: 600; line-height: 1.28; color: var(--text); text-decoration: none; }
.idea .body small { display: block; margin-top: 4px; color: var(--muted); font-weight: 400; font-size: 0.8rem; }
.idea .body::after { content: ""; position: absolute; inset: 0; }
.save { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #ffffff4d; background: #05070f80; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center; font-size: 1rem; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.save svg { width: 17px; height: 17px; }
.save:hover { border-color: #fff; }
.save[aria-pressed=true] { background: #fff; color: #e5484d; border-color: #fff; }
.save[aria-pressed=true] svg { fill: currentColor; }
.fine { color: var(--muted); font-size: 0.8rem; text-align: center; display: flex; flex-direction: column; gap: 6px; padding-top: 34px; }

.cur { font-size: 0.5em; vertical-align: 0.34em; margin-right: 0.06em; color: var(--gold); }

/* ---------- Phones and tablets ---------- */
@media (max-width: 940px) {
  .page { padding-block: 14px 72px; }
  .bar { margin-bottom: 14px; }
  .stage { padding-top: 22px; }
  .lede { font-size: 1.02rem; }
  .field { padding: 17px 0; }
  .people li { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr) auto; gap: 4px; padding: 1px 0; }
  .people input[type=text]:not(.who) { height: 44px; font-size: 1rem; }      /* 16px keeps iOS from zooming in on focus */
  .x { width: 40px; height: 40px; }
  .chip { padding: 10px 16px; }
  #presets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  #presets .chip { padding: 10px 0; text-align: center; }
  .chip.pair { padding: 2px 2px 2px 14px; }
  .chip.pair .x { width: 34px; height: 34px; }
  .tip { width: 22px; height: 22px; }
  .letter { padding: 14px; }
  .letter .acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; }
  .peek { height: 44px; min-width: 44px; padding: 0 12px; }
  .people input[type=text].who { font-size: calc(1.3rem * var(--us) * var(--as)); }
  .letter .acts button, .letter .acts a { height: 44px; justify-content: center; padding: 0 6px; }
  .save { width: 42px; height: 42px; }
  .match { margin-top: 40px; }
  .ideas { gap: 10px; }
  .idea .body { padding: 11px 12px 14px; font-size: 0.95rem; }
  .btn.small { height: 44px; }
}
/* Blurring two dozen chips over a live 3D scene is heavy for a phone: make them solid instead. */
@media (pointer: coarse) { .chip { background: #0d1c33eb; backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ---------- Welcome curtain, shown on a person's first visit only ---------- */
#intro { display: none; }
.first #intro { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; overflow: hidden; background: radial-gradient(60% 50% at 50% 46%, #15284c, var(--bg) 72%); }
/* The logo, dim, with gold rising inside it: --fill runs from 0 to 1 as the page loads. */
.intro-logo { position: relative; z-index: 1; display: block; width: min(440px, 78vw); height: auto; overflow: visible; filter: drop-shadow(0 0 calc(var(--fill, 0) * 34px) #f1d08f61); }
.intro-logo .dim { fill: #26304a; }
.intro-logo .level { transform: translateY(calc((1 - var(--fill, 0)) * 720px - 40px)); }
.intro-logo .wave { animation: swell 1.7s linear infinite; }
@keyframes swell { to { transform: translateX(-580px); } }
/* Snow: three sheets of dots at different depths, each sliding down by exactly one tile so the loop is seamless.
   The sheets are tilted different ways so their repeats never line up into a grid. */
.first #intro::before, .first #intro::after, .flakes { content: ""; position: absolute; inset: -30%; pointer-events: none; background-size: var(--tw) var(--th); animation: fall var(--secs) linear infinite, sway 6s ease-in-out infinite alternate; }
.first #intro::before { --tw: 370px; --th: 430px; --secs: 26s; rotate: 9deg; opacity: 0.5; background-image: radial-gradient(circle at 24px 30px, #fff 1px, transparent 2px), radial-gradient(circle at 198px 66px, #fff 1px, transparent 2px), radial-gradient(circle at 92px 142px, #fff 1.2px, transparent 2.2px), radial-gradient(circle at 316px 174px, #fff 1px, transparent 2px), radial-gradient(circle at 150px 252px, #fff 0.8px, transparent 1.8px), radial-gradient(circle at 262px 318px, #fff 1.1px, transparent 2.1px), radial-gradient(circle at 48px 356px, #fff 1px, transparent 2px), radial-gradient(circle at 340px 404px, #fff 0.9px, transparent 1.9px); }
.flakes { --tw: 470px; --th: 390px; --secs: 13s; rotate: -7deg; opacity: 0.75; animation-direction: normal, alternate-reverse; background-image: radial-gradient(circle at 40px 60px, #fff 1.6px, transparent 3px), radial-gradient(circle at 310px 120px, #fff 1.8px, transparent 3.2px), radial-gradient(circle at 170px 210px, #fff 1.5px, transparent 3px), radial-gradient(circle at 420px 300px, #fff 1.7px, transparent 3.2px), radial-gradient(circle at 96px 342px, #fff 1.4px, transparent 2.8px); }
.first #intro::after { --tw: 610px; --th: 690px; --secs: 12s; z-index: 2; rotate: 14deg; opacity: 0.8; animation-duration: var(--secs), 4.5s; background-image: radial-gradient(circle at 90px 110px, #ffffffd9 2.4px, transparent 5px), radial-gradient(circle at 430px 300px, #ffffffd9 2.8px, transparent 5.6px), radial-gradient(circle at 250px 560px, #ffffffcc 2.2px, transparent 5px); }
@keyframes fall { to { background-position: 0 var(--th); } }
@keyframes sway { from { translate: -14px 0; } to { translate: 14px 0; } }

/* ---------- Angular: corners are cut, not rounded ----------
   Each shape is clipped to an eight-sided outline and its border is drawn by a small SVG that follows the cut. */
:root {
  --cut: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
  --cut-m: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  --cut-l: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  --line-s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath d='M7.5 .5H16.5L23.5 7.5V16.5L16.5 23.5H7.5L.5 16.5V7.5Z' stroke='%23ffffff' stroke-opacity='.26'/%3E%3C/svg%3E");
  --line-s-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath d='M7.5 .5H16.5L23.5 7.5V16.5L16.5 23.5H7.5L.5 16.5V7.5Z' stroke='%23f1d08f' stroke-opacity='1'/%3E%3C/svg%3E");
  --line-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' fill='none'%3E%3Cpath d='M12.5 .5H23.5L35.5 12.5V23.5L23.5 35.5H12.5L.5 23.5V12.5Z' stroke='%23ffffff' stroke-opacity='.2'/%3E%3C/svg%3E");
  --line-m-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' fill='none'%3E%3Cpath d='M12.5 .5H23.5L35.5 12.5V23.5L23.5 35.5H12.5L.5 23.5V12.5Z' stroke='%23f1d08f' stroke-opacity='.8'/%3E%3C/svg%3E");
  --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' fill='none'%3E%3Cpath d='M18.5 .75H41.5L59.25 18.5V41.5L41.5 59.25H18.5L.75 41.5V18.5Z' stroke='%23cfa85e' stroke-width='1.5'/%3E%3Cpath d='M19.5 7.5H40.5L52.5 19.5V40.5L40.5 52.5H19.5L7.5 40.5V19.5Z' stroke='%23f1d08f' stroke-opacity='.42'/%3E%3C/svg%3E");
}
.panel { isolation: isolate; border: 20px solid transparent; border-image: none; border-radius: 0; padding: 0 17px; box-shadow: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* The card's fill sits on its own layer, cut to the frame, so the ornaments can sit proud of the edge. */
.panel::before { content: ""; position: absolute; inset: -20px; z-index: -1; border: 20px solid transparent; border-image: var(--frame) 20; border-radius: 0; clip-path: var(--cut-l); pointer-events: none; background: linear-gradient(165deg, #0e2529d9 0%, #0b1b2be3 44%, #0a1526ea 100%) border-box; backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%); }
/* Ornaments on the frame: a gold star at the top between two studs, three studs at the foot. */
.panel::after { content: ""; position: absolute; inset: -36.25px 0 -25.25px; z-index: 1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='34' viewBox='0 0 80 34'%3E%3Cg transform='translate(40 17)'%3E%3Cpath transform='rotate(45) scale(.56)' d='M0-15 3.2-3.2 15 0 3.2 3.2 0 15-3.2 3.2-15 0-3.2-3.2Z' fill='%23cfa85e'/%3E%3Cpath d='M0-16 3.2-3.2 16 0 3.2 3.2 0 16-3.2 3.2-16 0-3.2-3.2Z' fill='%23f6dba0'/%3E%3C/g%3E%3Cpath d='M12 13.5 15.5 17 12 20.5 8.5 17ZM68 13.5 71.5 17 68 20.5 64.5 17Z' fill='%23e0bb72'/%3E%3C/svg%3E") top center / 80px 34px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath d='M30 .5 35.5 6 30 11.5 24.5 6ZM14 2.8 17.2 6 14 9.2 10.8 6ZM46 2.8 49.2 6 46 9.2 42.8 6Z' fill='%23e0bb72'/%3E%3C/svg%3E") bottom center / 60px 12px no-repeat; }
.btn, select, input[type=text], .chip, .peek, .letter .acts button, .letter .acts a { border: 8px solid transparent; border-radius: 0; clip-path: var(--cut); }
.btn, select, .chip, .peek, .letter .acts a { border-image: var(--line-s) 8; }
.btn:hover, .btn:focus-visible, button.chip:hover, .chip:focus-visible, .peek:hover, .peek:focus-visible, .letter .acts a:hover, .letter .acts a:focus-visible, select:focus-visible { border-image: var(--line-s-gold) 8; outline: none; }
input[type=text] { padding: 0 8px; }
input[type=text]:hover { border-image: var(--line-s) 8; }
input[type=text]:focus-visible { border-image: var(--line-s-gold) 8; box-shadow: none; }
.people input[type=text], .people input[type=text].who { padding: 0 2px; }
.btn { padding: 0 12px; }
.btn.small { padding: 0 7px; }
select { padding: 0 4px; }
.chip { padding: 1px 8px; }
.chip[aria-pressed=true] { border-image: none; }
.chip.pair { padding: 0 0 0 6px; }
.peek { padding: 0 3px; }
.letter .acts button, .letter .acts a { padding: 0 6px; }
.letter .acts button { border-image: none; }
.letter .acts button:focus-visible { outline: none; filter: brightness(1.15); }
.cta { border-radius: 0; clip-path: var(--cut-m); box-shadow: none; }
.cta:hover { box-shadow: none; filter: brightness(1.07); }
.cta:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ink) inset; }
.letter { border: 12px solid transparent; border-image: var(--line-m) 12; border-radius: 0; clip-path: var(--cut-m); padding: 2px 4px; }
.letter.copied { border-image: var(--line-m-gold) 12; }
.idea { border: 0; border-radius: 0; clip-path: var(--cut-m); }
.idea::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 12px solid transparent; border-image: var(--line-m) 12; pointer-events: none; }
.idea:hover::after { border-image: var(--line-m-gold) 12; }
.idea .body::after { border-radius: 0; }
.bubble { border-radius: 3px; }
.tip-text { border-radius: 3px; }
@media (max-width: 940px) {
  .panel { padding: 0 5px; }
  .chip { padding: 3px 8px; }
  #presets .chip { padding: 3px 0; }
  .chip.pair { padding: 0 0 0 6px; }
  .peek { padding: 0 4px; }
  .letter { padding: 2px 2px; }
  .letter .acts button, .letter .acts a { padding: 0; }
}

/* ---------- Safari ----------
   WebKit flickers when it has to re-blur glass over a 3D scene that redraws every frame, and when it
   blends a layer into one. There the glass is simply more opaque and the cursor's light is laid on plainly. */
.webkit .panel::before, .webkit .bubble, .webkit .chip, .webkit .save, .webkit .sound, .webkit .tip-text { backdrop-filter: none; -webkit-backdrop-filter: none; }
.webkit .panel::before { background: linear-gradient(165deg, #0e2529f7 0%, #0b1b2bf8 44%, #0a1526fa 100%) border-box; }
.webkit .bubble { background: linear-gradient(135deg, #1b4c5af5, #162e66f5); }
.webkit .chip { background: #0d1c33f2; }
.webkit .chip[aria-pressed=true] { background: var(--gold); }
.webkit .save { background: #05070fd9; }
.webkit .save[aria-pressed=true] { background: #fff; }
.webkit #glow { mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }