/* 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; }

.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: center; gap: 8px; flex-wrap: wrap; }
.modes .chip { font-size: 0.85rem; }
.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; } }

/* ---------- 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; } }