/* Agaland
   Layout: before the brand exists the site wears the "Copacabana" birthday look (chosen by Ste
   28 Oct 2026): sand page, the black-and-white wave pavement, flat tropical illustrations, colourful
   letters, envelope card, passport stamp, a trail map across the top of the guide. Once Aga picks
   her brand, app.js overwrites these same tokens with her palette and fonts, so the whole site
   changes with her. One deliberate look per phase, so no dark-mode variant: colours are explicit. */
:root {
  --bg: #FFF4DF;          /* Copacabana sand */
  --surface: #FFFFFF;
  --ink: #1E1A2B;
  --muted: #7A6A58;
  --line: #EAD9BC;
  --pop: #FF3D7F;         /* hibiscus pink */
  --pop-ink: #FFFFFF;
  --sun: #F4B400;
  --sky: #1E5BE0;
  --mint: #00A35C;
  --tang: #FF8A1F;
  /* birthday fonts; none of them is used by the Carnera or Officina brands */
  --display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --body: "Mulish", "Segoe UI", system-ui, sans-serif;
  --hand: "Shadows Into Light", "Segoe Print", cursive;
  --radius: 22px;
  --btn-radius: 999px;
  --shadow: 0 5px 0 var(--ink);
  /* illustration colours */
  --t-ink: #1E1A2B; --t-cream: #FFF4DF; --t-yellow: #FFC928; --t-orange: #FF7A1A; --t-pink: #FF3D7F; --t-red: #E8322E;
  --t-sky: #4FC3F7; --t-leaf: #00874E; --t-leaf2: #3CC37A; --t-purple: #6B2B8F;
  color-scheme: light;
}
.i-k { fill: var(--t-ink); } .i-c { fill: var(--t-cream); } .i-y { fill: var(--t-yellow); } .i-o { fill: var(--t-orange); } .i-p { fill: var(--t-pink); }
.i-r { fill: var(--t-red); } .i-s { fill: var(--t-sky); } .i-g { fill: var(--t-leaf); } .i-g2 { fill: var(--t-leaf2); } .i-pu { fill: var(--t-purple); }
.i-ks { fill: none; stroke: var(--t-ink); } .i-os { fill: none; stroke: var(--t-orange); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  min-height: 100%;
  transition: background-color .6s ease, color .6s ease;
}
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.05; text-wrap: balance; margin: 0; }
p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.narrow { max-width: 760px; }

#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 26px;
  border: 2px solid var(--ink); border-radius: var(--btn-radius);
  background: var(--pop); color: var(--pop-ink);
  font-weight: 800; font-size: 1.05rem; letter-spacing: .01em;
  box-shadow: var(--shadow);
  cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: var(--shadow); }
.btn.big { min-height: 64px; padding: 16px 34px; font-size: 1.25rem; }
.btn.ghost { background: var(--surface); color: var(--ink); }
.btn.small { min-height: 40px; padding: 6px 16px; font-size: .95rem; box-shadow: 0 4px 0 var(--ink); }
.linkish { background: none; border: 0; padding: 4px 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; }
.linkish:hover { color: var(--ink); }

/* ---------- birthday (Copacabana) ---------- */
.bday { position: relative; overflow: hidden; padding-block: 0 140px; }
.waves {
  height: 64px; background-color: #FFFFFF; background-size: 96px 64px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="96" height="64"%3E%3Cpath d="M-24 20 C0 0 24 0 48 20 S96 40 120 20 M-24 52 C0 32 24 32 48 52 S96 72 120 52" fill="none" stroke="%231E1A2B" stroke-width="11"/%3E%3C/svg%3E');
}
.waves.bottom { position: absolute; left: 0; right: 0; bottom: 0; }
.bday-inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 30px; text-align: center; padding-top: 44px; }
.sto-lat { font: 800 .8rem/1 var(--body); letter-spacing: .28em; text-transform: uppercase; color: var(--mint); }
.headline { display: grid; gap: 0; justify-items: center; }
.headline .row { display: flex; flex-wrap: wrap; justify-content: center; }
.headline .ch {
  display: inline-block;
  font-family: var(--display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(3rem, 12vw, 7.4rem);
  line-height: 1;
  animation: pop-in .7s cubic-bezier(.2, 1.6, .4, 1) both;
}
.headline .ch.space { width: .3em; }
.headline .row.name .ch { font-size: clamp(4.4rem, 19vw, 11rem); }
@keyframes pop-in { from { transform: translateY(40px) scale(.4) rotate(-20deg); opacity: 0; } }
.headline .ch:nth-child(5n+1) { color: var(--pop); }
.headline .ch:nth-child(5n+2) { color: var(--tang); }
.headline .ch:nth-child(5n+3) { color: var(--mint); }
.headline .ch:nth-child(5n+4) { color: var(--sky); }
.headline .ch:nth-child(5n+5) { color: var(--sun); }
.headline .ch:nth-child(odd) { rotate: -3deg; }
.headline .ch:nth-child(even) { rotate: 2deg; }

/* flat tropical illustrations around the page */
.bday .art { position: absolute; z-index: 1; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .14)); scale: 1.45; }
.bday .sway { animation: sway 7s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes sway { 50% { transform: rotate(4deg) translateY(-6px); } }
@media (max-width: 680px) { .bday .hide-sm { display: none; } .bday .art { scale: .75; top: 70px !important; } .bday-inner { padding-top: 190px; } }

/* envelope + card */
.envelope-zone { display: grid; justify-items: center; gap: 14px; width: 100%; }
.envelope {
  position: relative; width: min(380px, 100%); aspect-ratio: 1.55; max-width: 100%;
  background: var(--mint); border: 0; border-radius: 12px; overflow: hidden;
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .45); cursor: pointer;
  transition: transform .2s ease;
}
.envelope:hover { transform: rotate(-1.5deg) translateY(-3px); }
.envelope .flap { position: absolute; left: 0; right: 0; top: 0; height: 58%; background: #00874E; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.envelope .seal { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; translate: -50% -50%; }
.envelope .to { position: absolute; left: 18px; bottom: 12px; font-family: var(--hand); font-size: 1.35rem; color: #FFF4DF; }
.tap-hint { font: 800 .74rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.card {
  position: relative; width: min(620px, 100%); max-width: 100%;
  background: #FFFDF8; color: #2A2230; border-radius: 4px;
  padding: 40px clamp(22px, 6vw, 56px) 34px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5), 10px 12px 0 #FFD3E2;
  text-align: left; rotate: -1deg;
  animation: card-out .8s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes card-out { from { transform: translateY(120px) scale(.7) rotate(6deg); opacity: 0; } }
.card .letter { display: grid; gap: 12px; font-family: var(--hand); font-size: clamp(1.25rem, 3.6vw, 1.5rem); line-height: 1.5; }
.card .sig { margin-top: 10px; font-family: var(--hand); font-size: 1.4rem; }
.card .sig strong { display: block; font-size: 2.2rem; color: var(--pop); font-weight: 400; rotate: -4deg; width: fit-content; }
.card .ps { font-size: .95rem; line-height: 1.55; color: #6E6274; border-top: 1px dashed #E2D8CF; padding-top: 12px; margin-top: 14px; }
.card .pin { position: absolute; top: -34px; right: -20px; width: 86px; height: auto; rotate: 14deg; }

.welcome { display: grid; justify-items: center; gap: 26px; animation: pop-in .8s .3s cubic-bezier(.2, 1.4, .4, 1) both; }
.stamp {
  display: grid; justify-items: center; gap: 2px;
  padding: 16px 28px; border: 3px double var(--pop); border-radius: 16px;
  color: var(--pop); rotate: -6deg; background: rgba(255, 255, 255, .55);
  text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: .74rem;
}
.stamp .big { font-family: var(--display); font-weight: 800; font-size: clamp(2.1rem, 7vw, 3.2rem); letter-spacing: -.01em; text-transform: none; line-height: 1.05; }
.stamp .est { opacity: .85; }
.bday .btn.big { background: var(--ink); color: var(--bg); border: 0; box-shadow: 0 6px 0 var(--pop); }

/* ---------- top bar + trail ---------- */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); border-bottom: 2px solid var(--line); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 31; background: var(--bg); }
.topbar .wrap { display: flex; align-items: center; gap: 16px; padding-block: 10px; }
.logo-mini { font-family: var(--display); font-size: 1.5rem; color: var(--pop); white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; }
.trail { display: flex; align-items: center; gap: 0; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.trail::-webkit-scrollbar { display: none; }
.trail .stop { display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 6px 4px; background: none; border: 0; cursor: default; color: var(--muted); font-weight: 700; font-size: .85rem; }
.trail .stop .dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; font-size: .78rem; flex: none; }
.trail .stop.done { color: var(--ink); cursor: pointer; }
.trail .stop.done .dot { background: var(--mint); border-color: var(--ink); color: var(--ink); }
.trail .stop.here { color: var(--ink); }
.trail .stop.here .dot { background: var(--pop); border-color: var(--ink); color: var(--pop-ink); }
.trail .path { flex: 1 0 18px; min-width: 18px; height: 0; border-top: 2px dashed var(--line); margin: 0 6px; }
@media (max-width: 720px) { .trail .stop .lbl { display: none; } .trail .stop.here .lbl { display: inline; } }

/* ---------- page sections ---------- */
.page { padding-block: 34px 90px; display: grid; gap: 28px; }
.page-head { display: grid; gap: 10px; }
.eyebrow { font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--pop); }
.page-head h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.page-head .lede { font-size: 1.12rem; max-width: 62ch; color: var(--muted); }
.ai-intro { font-size: 1.12rem; max-width: 66ch; border-left: 4px solid var(--pop); padding-left: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hint { color: var(--muted); font-size: .95rem; }

/* ---------- guide ---------- */
.guide-card {
  background: var(--surface); border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--sun); padding: clamp(20px, 4vw, 40px);
  display: grid; gap: 26px;
}
.step-count { font-weight: 800; color: var(--muted); font-size: .9rem; letter-spacing: .06em; }
.guide-card h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.q { display: grid; gap: 12px; border: 0; padding: 0; margin: 0; min-width: 0; }
.q > legend, .q > label.qlabel { font-weight: 800; font-size: 1.1rem; padding: 0; margin-bottom: 4px; }
.q .sub { color: var(--muted); font-size: .92rem; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  border: 2px solid var(--ink); background: var(--surface); border-radius: 999px;
  padding: 8px 16px; font-weight: 600; cursor: pointer; transition: transform .1s, background-color .15s;
}
.chip:hover { transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.chip.add { border-style: dashed; color: var(--muted); }
.text-in, .text-area {
  width: 100%; border: 2px solid var(--ink); border-radius: 14px; background: var(--surface);
  padding: 12px 14px; font-size: 1rem;
}
.text-area { min-height: 96px; resize: vertical; }
.text-in::placeholder, .text-area::placeholder { color: #B78AA3; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; }

.slider { display: grid; grid-template-columns: 110px 1fr 110px; align-items: center; gap: 14px; }
.slider span { font-weight: 700; font-size: .95rem; }
.slider span:last-child { text-align: right; }
.slider input { width: 100%; accent-color: var(--pop); height: 28px; }
@media (max-width: 520px) { .slider { grid-template-columns: 1fr 1fr; } .slider input { grid-column: 1 / -1; grid-row: 2; } }

.swatch-pick {
  display: grid; gap: 8px; text-align: left; padding: 12px; cursor: pointer;
  border: 2px solid var(--line); border-radius: 16px; background: var(--surface);
  transition: border-color .15s, transform .1s;
}
.swatch-pick:hover { transform: translateY(-2px); }
.swatch-pick[aria-pressed="true"] { border-color: var(--ink); box-shadow: 4px 4px 0 var(--pop); }
.swatch-row { display: flex; height: 46px; border-radius: 10px; overflow: hidden; border: 2px solid var(--ink); }
.swatch-row i { flex: 1; }
.swatch-pick b { font-size: .95rem; }

.type-pick { display: grid; gap: 6px; text-align: left; padding: 14px; cursor: pointer; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); }
.type-pick[aria-pressed="true"] { border-color: var(--ink); box-shadow: 4px 4px 0 var(--sky); }
.type-pick .sample { font-size: 1.9rem; line-height: 1.1; }
.type-pick small { color: var(--muted); font-weight: 600; }

.guide-nav { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.demo-fill { justify-self: start; }

/* ---------- option cards (identities) ---------- */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px; align-items: start; }
.idea {
  background: var(--surface); border: 3px solid var(--ink); border-radius: var(--radius);
  padding: 24px; display: grid; gap: 14px; min-width: 0;
  transition: box-shadow .2s, transform .2s;
}
.idea.loved { box-shadow: 8px 8px 0 var(--pop); transform: translateY(-3px); }
.idea .dots { display: flex; gap: 6px; }
.idea .dots i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); }
.idea h3 { font-size: 1.9rem; }
.idea .tagline { font-weight: 700; font-size: 1.08rem; }
.idea .essence { color: var(--muted); }
.idea .voice { font-family: var(--hand); font-size: 1.25rem; line-height: 1.4; background: var(--bg); border-radius: 12px; padding: 12px 14px; }
.idea dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: .95rem; }
.idea dt { font-weight: 800; }
.idea dd { margin: 0; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { border: 1.5px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: .85rem; font-weight: 600; }
.love-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  border: 2px solid var(--ink); border-radius: 999px; padding: 8px 16px; background: var(--surface);
  font-weight: 800; cursor: pointer;
}
.love-btn svg { width: 20px; height: 20px; }
.love-btn[aria-pressed="true"] { background: var(--pop); color: var(--pop-ink); }
.note-in { width: 100%; border: 2px dashed var(--line); border-radius: 12px; padding: 10px 12px; min-height: 64px; resize: vertical; background: transparent; font-size: .95rem; }
.note-in:focus { border-style: solid; border-color: var(--ink); }

/* ---------- design boards ---------- */
.boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; align-items: start; }
.boards.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.board {
  border: 3px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: var(--surface);
  display: grid; min-width: 0;
}
.board.picked { box-shadow: 10px 10px 0 var(--mint); }
.scope { background: var(--b-bg); color: var(--b-text); font-family: var(--b-body); }
.board .cover { position: relative; padding: 28px 22px 24px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.board .cover .pattern { position: absolute; inset: 0; opacity: .32; pointer-events: none; }
.board .cover > *:not(.pattern) { position: relative; }
.emblem { width: 92px; height: 92px; display: block; }
.wordmark { font-family: var(--b-display); font-size: 2.6rem; line-height: 1; color: var(--b-text); overflow-wrap: anywhere; }
.board .cover .b-tagline { font-size: .98rem; opacity: .85; }
.board .body { padding: 20px 22px 22px; display: grid; gap: 16px; border-top: 3px solid var(--ink); background: var(--surface); color: var(--ink); font-family: var(--body); min-width: 0; }
.board .title { font-family: var(--display); font-size: 1.6rem; }
.board .why { color: var(--muted); font-size: .97rem; }
.part { display: grid; gap: 8px; }
.part-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.part-head b { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; }
.palette { display: flex; border-radius: 12px; overflow: hidden; border: 2px solid var(--ink); }
.palette div { flex: 1; min-width: 0; height: 64px; display: flex; align-items: flex-end; padding: 4px; }
.palette div span { font-size: .62rem; font-weight: 700; background: rgba(255,255,255,.85); color: #222; border-radius: 4px; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.type-spec { background: var(--b-bg); color: var(--b-text); border-radius: 12px; padding: 14px; display: grid; gap: 4px; }
.type-spec .aa { font-family: var(--b-display); font-size: 2.2rem; line-height: 1.1; }
.type-spec p { font-family: var(--b-body); font-size: .95rem; }
.type-spec small { font-family: var(--body); font-size: .75rem; opacity: .75; font-weight: 600; }
.motif-strip { height: 54px; border-radius: 12px; border: 2px solid var(--ink); }
.ui-sample { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--b-bg); padding: 14px; border-radius: 12px; }
.b-btn { font-family: var(--b-body); font-weight: 700; padding: 10px 18px; border-radius: var(--b-btn-radius); border: 2px solid var(--b-primary); background: var(--b-primary); color: var(--b-on-primary); font-size: .9rem; }
.b-btn.outline { background: transparent; color: var(--b-text); }
.b-card { font-family: var(--b-body); background: var(--b-surface); color: var(--b-text); border-radius: var(--b-radius); padding: 10px 14px; font-size: .85rem; border: 1px solid color-mix(in srgb, var(--b-text) 15%, transparent); }
.part-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.takes { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .95rem; }
.past-mark { font-size: .9rem; color: var(--muted); border-top: 2px dashed var(--line); padding-top: 10px; }
.overall { background: var(--surface); border: 3px solid var(--ink); border-radius: var(--radius); padding: 22px; display: grid; gap: 14px; }
.overall h3 { font-size: 1.5rem; }
.round-tabs { display: flex; flex-wrap: wrap; gap: 8px; }

/* phone mockup */
.mock-row { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
@media (max-width: 560px) { .mock-row { grid-template-columns: 1fr; justify-items: center; } }
.phone {
  width: 236px; max-width: 100%; aspect-ratio: 236 / 480; border: 3px solid var(--ink); border-radius: 30px; overflow: hidden;
  position: relative; background: var(--b-bg); color: var(--b-text); font-family: var(--b-body);
  box-shadow: 6px 6px 0 var(--ink); display: flex; flex-direction: column;
}
.phone .notch { position: absolute; top: 6px; left: 50%; translate: -50% 0; width: 70px; height: 16px; border-radius: 10px; background: var(--ink); z-index: 3; }
.phone .scr { flex: 1; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.phone .pnav { display: flex; justify-content: space-between; align-items: center; padding: 30px 14px 8px; font-family: var(--b-display); font-size: 1rem; }
.phone .pnav .burger { display: grid; gap: 3px; } .phone .pnav .burger i { width: 16px; height: 2px; background: var(--b-text); display: block; }
.phone .hero { position: relative; padding: 14px; display: grid; gap: 8px; }
.phone .hero .pattern { position: absolute; inset: 0; opacity: .45; }
.phone .hero > *:not(.pattern) { position: relative; }
.phone .hero h4 { font-family: var(--b-display); font-weight: 400; font-size: 1.35rem; line-height: 1.08; margin: 0; }
.phone .hero p { font-size: .72rem; opacity: .85; }
.phone .hero .emblem { width: 58px; height: 58px; }
.phone .hero.centered { justify-items: center; text-align: center; padding-top: 18px; }
.phone .hero.split { grid-template-columns: 1fr 70px; align-items: center; }
.phone .hero.split .side { background: var(--b-primary); border-radius: var(--b-radius); aspect-ratio: .8; display: grid; place-items: center; grid-row: 1 / 4; grid-column: 2; }
.phone .hero.split .side .emblem { width: 48px; height: 48px; }
.phone .hero.collage { min-height: 150px; padding-top: 96px; }
.phone .hero.collage .blob { position: absolute; border-radius: var(--b-radius); }
.phone .hero.collage .blob.a { width: 74px; height: 74px; right: 18px; top: 4px; background: var(--b-primary); rotate: 8deg; }
.phone .hero.collage .blob.b { width: 52px; height: 52px; right: 82px; top: 26px; background: var(--b-accent); rotate: -10deg; border-radius: 50%; }
.phone .hero.collage .blob.c { width: 46px; height: 46px; left: 16px; top: 8px; background: var(--b-secondary); rotate: -4deg; display: grid; place-items: center; }
.phone .hero.collage .blob.c .emblem { width: 34px; height: 34px; }
.phone .pbtn { justify-self: start; font-weight: 700; font-size: .68rem; padding: 6px 12px; border-radius: var(--b-btn-radius); background: var(--b-primary); color: var(--b-on-primary); border: 2px solid var(--b-primary); }
.phone .pbtn.outline { background: transparent; color: var(--b-text); }
.phone .hero.centered .pbtn { justify-self: center; }
.phone .rooms { display: grid; gap: 8px; padding: 12px 14px 48px; }
.phone .room { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; background: var(--b-surface); border-radius: var(--b-radius); padding: 8px; font-size: .68rem; line-height: 1.25; }
.phone .room b { display: block; font-size: .74rem; }
.phone .room .ic { width: 30px; height: 30px; border-radius: calc(var(--b-radius) * .7); background: var(--b-accent); display: grid; place-items: center; color: var(--b-on-accent); }
.phone .room .ic svg { width: 16px; height: 16px; }
.phone .pill-nav { position: absolute; bottom: 12px; left: 50%; translate: -50% 0; display: flex; gap: 12px; padding: 7px 14px; border-radius: 999px; background: var(--b-text); }
.phone .pill-nav i { width: 8px; height: 8px; border-radius: 50%; background: var(--b-bg); opacity: .6; } .phone .pill-nav i:first-child { opacity: 1; background: var(--b-accent); }
.phone.side-nav .scr { padding-left: 26px; }
.phone .rail { position: absolute; left: 0; top: 0; bottom: 0; width: 26px; background: var(--b-primary); display: grid; align-content: center; justify-items: center; gap: 10px; z-index: 2; }
.phone .rail i { width: 8px; height: 8px; border-radius: 50%; background: var(--b-on-primary); opacity: .6; }
.app-notes { display: grid; gap: 8px; font-size: .95rem; min-width: 0; }
.app-notes ul { margin: 0; padding-left: 18px; color: var(--muted); }

/* ---------- brand book ---------- */
.book { display: grid; gap: 28px; }
.book-cover {
  position: relative; overflow: hidden; border-radius: var(--radius); border: 3px solid var(--ink);
  padding: clamp(36px, 8vw, 80px) clamp(20px, 5vw, 56px); display: grid; justify-items: center; text-align: center; gap: 14px;
}
.book-cover .pattern { position: absolute; inset: 0; opacity: .28; }
.book-cover > *:not(.pattern) { position: relative; }
.book-cover .emblem { width: 120px; height: 120px; }
.book-cover .wordmark { font-size: clamp(3rem, 12vw, 6.4rem); }
.book-cover .b-tagline { font-size: 1.2rem; }
.book-sec { display: grid; gap: 14px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 4vw, 34px); }
.book-sec h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.book-sec .num { font-family: var(--body); font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pop); }
.book-sec p.big { font-size: 1.15rem; max-width: 66ch; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.cols > div { min-width: 0; }
.value { border-top: 3px solid var(--pop); padding-top: 10px; display: grid; gap: 4px; }
.value b { font-family: var(--display); font-size: 1.3rem; font-weight: 400; }
.do-dont { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.do-dont ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.do-dont h3 { font-family: var(--body); font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.sample-line { border-left: 4px solid var(--pop); padding: 4px 0 4px 14px; display: grid; gap: 2px; }
.sample-line small { color: var(--muted); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 14px; }
.swatch { border: 2px solid var(--ink); border-radius: 16px; overflow: hidden; display: grid; background: var(--surface); }
.swatch .chip-c { height: 92px; }
.swatch .meta { padding: 10px 12px; display: grid; gap: 2px; font-size: .85rem; }
.swatch .meta b { font-size: .98rem; }
.swatch .meta code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .8rem; color: var(--muted); }
.specimen { display: grid; gap: 10px; }
.specimen .d { font-family: var(--display); font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1; }
.specimen .b { font-family: var(--body); font-size: 1.05rem; max-width: 60ch; }
.specimen small { color: var(--muted); font-weight: 700; }
.logo-uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 14px; }
.logo-uses .tile { border-radius: 16px; border: 2px solid var(--ink); aspect-ratio: 1.3; display: grid; place-items: center; gap: 6px; padding: 12px; }
.logo-uses .tile .emblem { width: 64px; height: 64px; }
.logo-uses .tile .wm { font-family: var(--display); font-size: 1.6rem; }

/* ---------- world ---------- */
.world-hero { position: relative; overflow: hidden; border-radius: var(--radius); border: 3px solid var(--ink); padding: clamp(36px, 8vw, 90px) clamp(20px, 5vw, 56px); display: grid; gap: 18px; justify-items: center; text-align: center; background: var(--surface); }
.world-hero .pattern { position: absolute; inset: 0; opacity: .22; }
.world-hero > *:not(.pattern) { position: relative; }
.world-hero h1 { font-size: clamp(2.4rem, 8vw, 5rem); }
.world-hero .emblem { width: 110px; height: 110px; }
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px; }
.room-card { border: 2px solid var(--ink); border-radius: var(--radius); padding: 20px; display: grid; gap: 8px; background: var(--surface); }
.room-card .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--pop); color: var(--pop-ink); }
.room-card .ic svg { width: 24px; height: 24px; }
.room-card h3 { font-size: 1.4rem; }
.room-card .soon { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.welcome-msg { font-size: 1.15rem; max-width: 62ch; text-align: center; }

/* ---------- loader / toast / demo ---------- */
#loader { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(4px); padding: 16px; }
.loader-card { background: var(--surface); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 8px 8px 0 var(--pop); padding: 32px 28px; width: min(420px, 100%); display: grid; gap: 10px; justify-items: center; text-align: center; }
.loader-title { font-family: var(--display); font-size: 1.7rem; line-height: 1.1; }
.loader-line { font-family: var(--hand); font-size: 1.35rem; min-height: 2.2em; }
.loader-note { color: var(--muted); font-size: .9rem; }
.loader-orbit { position: relative; width: 70px; height: 70px; animation: spin 2.4s linear infinite; }
.loader-orbit span { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); }
.loader-orbit span:nth-child(1) { background: var(--pop); left: 24px; top: 0; }
.loader-orbit span:nth-child(2) { background: var(--sun); left: 0; bottom: 4px; }
.loader-orbit span:nth-child(3) { background: var(--sky); right: 0; bottom: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }
#toast { position: fixed; z-index: 55; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; max-width: min(520px, calc(100% - 32px)); background: var(--ink); color: var(--surface); border-radius: 14px; padding: 12px 18px; font-weight: 600; box-shadow: 0 6px 0 var(--pop); }
.demo-bar {
  position: fixed; z-index: 40; right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: calc(100% - 24px);
  background: #1E1B24; color: #F4EEF8; border-radius: 14px; padding: 8px 10px; font: 600 12px/1.2 "Figtree", system-ui, sans-serif;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
.demo-bar b { color: #FFC23A; letter-spacing: .08em; }
.demo-bar button { background: #3A3446; color: #F4EEF8; border: 0; border-radius: 8px; padding: 6px 9px; font: inherit; cursor: pointer; }
.demo-bar button:hover { background: #57506A; }
.demo-bar.min button:not(.tog) { display: none; }
/* ---------- marking (playbook: This is me / Keep parts / Not me + why) ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.how { background: var(--surface); border: 2px dashed var(--line); border-radius: 14px; padding: 12px 16px; max-width: 80ch; }
.how-tag { display: inline-block; margin-right: 8px; font-weight: 800; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; background: var(--sun); color: var(--ink); border-radius: 6px; padding: 2px 8px; }
.round { display: grid; gap: 18px; }
.round-head { display: flex; align-items: center; gap: 12px; }
.round-head h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
.new { background: var(--pop); color: var(--pop-ink); border-radius: 999px; padding: 2px 10px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.marker { display: grid; gap: 10px; border-top: 2px dashed var(--line); padding-top: 14px; }
.verdicts { display: flex; flex-wrap: wrap; gap: 8px; }
.vbtn { border: 2px solid var(--ink); background: var(--surface); border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: .9rem; cursor: pointer; }
.vbtn.me[aria-pressed="true"] { background: var(--pop); color: var(--pop-ink); }
.vbtn.parts[aria-pressed="true"] { background: var(--mint); color: var(--ink); }
.vbtn.no[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.keep { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.keep-opt { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .95rem; cursor: pointer; }
.keep-opt input { width: 18px; height: 18px; accent-color: var(--pop); }
.why-in { font-size: .95rem; padding: 9px 12px; }
.idea.dimmed { opacity: .72; }
.named-pal { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.np { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.np i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
.id-head { display: grid; gap: 4px; }
.lens { font-style: italic; color: var(--muted); }
.idea .why { display: grid; gap: 6px; font-size: .95rem; }
.idea .why ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.src { display: inline-block; font-size: .7rem; font-weight: 800; border-radius: 6px; padding: 0 6px; background: color-mix(in srgb, var(--mint) 35%, var(--surface)); white-space: nowrap; }
.src.check { background: color-mix(in srgb, var(--sun) 45%, var(--surface)); }
.scales { display: grid; gap: 6px; }
.scale { display: grid; grid-template-columns: 70px 1fr 70px; gap: 10px; align-items: center; font-size: .8rem; font-weight: 700; color: var(--muted); }
.scale span:last-child { text-align: right; }
.scale .bar { position: relative; height: 6px; border-radius: 3px; background: var(--line); }
.scale .bar i { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--pop); border: 2px solid var(--ink); translate: -50% -50%; }
.watch { font-size: .92rem; color: var(--muted); }
.watch b { color: var(--ink); }
/* identity cards wear their own direction (colours, type, pattern, mark) */
.idea.scope { padding: 0; gap: 0; overflow: hidden; background: var(--b-bg); color: var(--b-text); font-family: var(--b-body); }
.idea .id-cover { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; padding: 26px 20px 22px; border-bottom: 2px solid color-mix(in srgb, var(--b-text) 18%, transparent); }
.idea .id-cover .pattern { position: absolute; inset: 0; opacity: .3; pointer-events: none; }
.idea .id-cover > *:not(.pattern) { position: relative; }
.options.ids { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 26px; }
.idea .id-cover { padding: 36px 20px 30px; }
.idea .id-cover .emblem { width: 104px; height: 104px; }
.idea .id-cover .wordmark { font-size: clamp(2.4rem, 6vw, 3.4rem); color: var(--b-text); }
.idea .id-cover .tagline { font-size: 1.1rem; }
.idea .id-cover .wm-wrap { max-width: 100%; }
.idea .eyebrow .world { opacity: .75; font-weight: 600; }
/* cover layouts, chosen by Claude per direction */
.idea .id-cover.lay-poster { justify-items: start; text-align: left; padding: 30px 22px 26px; min-height: 250px; align-content: end; }
.idea .id-cover.lay-poster .emblem { position: absolute; top: 18px; right: 18px; width: 76px; height: 76px; }
.idea .id-cover.lay-poster .wordmark { font-size: clamp(3.2rem, 9vw, 4.6rem); line-height: .9; }
.idea .id-cover.lay-poster .pattern { opacity: .5; }
.idea .id-cover.lay-stacked { grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: left; column-gap: 16px; }
.idea .id-cover.lay-stacked .emblem { grid-row: span 2; width: 88px; height: 88px; }
.idea .id-cover.lay-stacked .tagline { grid-column: 2; }
.idea .id-cover.lay-badge .emblem { width: 120px; height: 120px; padding: 14px; border-radius: 50%; background: var(--b-bg); border: 3px solid var(--b-text); box-shadow: 0 0 0 6px var(--b-primary); }
.idea .id-cover.lay-badge .wm-wrap { background: var(--b-text); color: var(--b-bg); padding: 4px 18px 6px; border-radius: var(--b-btn-radius); }
.idea .id-cover.lay-badge .wordmark { color: var(--b-bg); font-size: clamp(2rem, 5vw, 2.8rem); }
.idea .id-cover.lay-split { grid-template-columns: 38% 1fr; justify-items: start; align-items: center; text-align: left; padding: 0; column-gap: 18px; background: linear-gradient(90deg, var(--b-secondary) 38%, transparent 38%); }
.idea .id-cover.lay-split .pattern { right: auto; width: 38%; opacity: .45; }
.idea .id-cover.lay-split .emblem { grid-row: span 2; justify-self: center; margin: 30px 0; width: 92px; height: 92px; }
.idea .id-cover.lay-split .wm-wrap { align-self: end; padding-top: 26px; padding-right: 14px; }
.idea .id-cover.lay-split .wordmark { font-size: clamp(2.1rem, 5vw, 2.9rem); }
.idea .id-cover.lay-split .tagline { align-self: start; padding-right: 14px; padding-bottom: 22px; }
.idea .id-cover.lay-marquee { padding-left: 0; padding-right: 0; }
.idea .id-cover.lay-marquee .wm-wrap { width: 100%; background: var(--b-primary); color: var(--b-on-primary); border-block: 3px solid var(--b-text); padding: 8px 12px; }
.idea .id-cover.lay-marquee .wordmark { color: var(--b-on-primary); font-size: clamp(2.6rem, 8vw, 3.8rem); }
.idea .id-cover.lay-marquee .tagline { padding: 0 20px; }
/* mock-ups: welcome screen, postcard, sticker */
.id-mocks { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 18px; padding: 22px 16px 18px; background: color-mix(in srgb, var(--b-text) 6%, var(--b-bg)); border-bottom: 2px solid color-mix(in srgb, var(--b-text) 14%, transparent); }
.id-mocks figure { margin: 0; display: grid; justify-items: center; gap: 6px; }
.id-mocks figcaption { font: 700 .68rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--b-text) 60%, var(--b-bg)); }
.m-phone { width: 112px; aspect-ratio: 112 / 214; border: 3px solid var(--b-text); border-radius: 18px; background: var(--b-bg); overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px; box-shadow: 4px 4px 0 color-mix(in srgb, var(--b-text) 25%, transparent); }
.m-wm { font-family: var(--b-display); font-size: .8rem; color: var(--b-text); }
.m-band { position: relative; width: 100%; height: 66px; border-radius: 10px; background: var(--b-secondary); display: grid; place-items: center; overflow: hidden; }
.m-band .pattern { position: absolute; inset: 0; opacity: .45; }
.m-band .emblem { position: relative; width: 44px; height: 44px; }
.m-head { font-family: var(--b-display); font-size: .66rem; line-height: 1.2; text-align: center; color: var(--b-text); flex: 1; overflow: hidden; }
.m-btn { font-family: var(--b-body); font-weight: 700; font-size: .56rem; padding: 4px 10px; border-radius: var(--b-btn-radius, 999px); background: var(--b-primary); color: var(--b-on-primary); }
.m-card { position: relative; width: 176px; aspect-ratio: 1.48; border-radius: calc(var(--b-radius, 12px) / 2); background: var(--b-primary); color: var(--b-on-primary); padding: 14px; display: grid; align-content: space-between; overflow: hidden; rotate: -3deg; box-shadow: 4px 5px 0 color-mix(in srgb, var(--b-text) 25%, transparent); }
.m-card .pattern { position: absolute; inset: 0; opacity: .18; }
.m-card > span { position: relative; }
.m-line { font-family: var(--b-display); font-size: 1.05rem; line-height: 1.12; }
.m-from { justify-self: end; font: 700 .6rem/1 var(--b-body); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.m-sticker { width: 86px; height: 86px; border-radius: 50%; background: var(--b-bg); border: 4px solid #FFFFFF; box-shadow: 0 0 0 2px var(--b-text), 3px 4px 0 2px color-mix(in srgb, var(--b-text) 30%, transparent); display: grid; place-items: center; rotate: 8deg; }
.m-sticker .emblem { width: 70px; height: 70px; }
.example-note { background: var(--sun); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; padding: 10px 14px; font-weight: 700; max-width: 80ch; }
.loader-progress { font-weight: 800; min-height: 1.4em; }
.demo-bar .mode { background: #2E6B4F; border-radius: 6px; padding: 3px 7px; }
.demo-bar .sep { opacity: .7; margin-left: 4px; }
.idea .id-cover .tagline { font-family: var(--b-body); font-weight: 700; }
.idea .id-body { display: grid; gap: 14px; padding: 20px 22px 22px; min-width: 0; }
.idea.scope h3 { font-family: var(--b-display); }
.idea.scope .eyebrow { color: var(--b-primary); }
.idea.scope .lens, .idea.scope .essence, .idea.scope dd, .idea.scope .watch, .idea.scope .np, .idea.scope .scale { color: color-mix(in srgb, var(--b-text) 74%, var(--b-bg)); }
.idea.scope .watch b { color: var(--b-text); }
.idea.scope .np i { border-color: color-mix(in srgb, var(--b-text) 40%, transparent); }
.idea.scope .voice { font-family: var(--b-display); font-size: 1.12rem; background: color-mix(in srgb, var(--b-text) 7%, var(--b-bg)); }
.idea.scope .src { background: color-mix(in srgb, var(--b-primary) 22%, var(--b-bg)); color: var(--b-text); }
.idea.scope .src.check { background: color-mix(in srgb, var(--b-secondary) 34%, var(--b-bg)); }
.idea.scope .scale .bar { background: color-mix(in srgb, var(--b-text) 18%, var(--b-bg)); }
.idea.scope .scale .bar i { background: var(--b-primary); border-color: var(--b-text); }
.idea.scope .marker { border-top-color: color-mix(in srgb, var(--b-text) 25%, transparent); }
.idea.scope .vbtn { background: transparent; color: var(--b-text); border-color: var(--b-text); font-family: var(--body); }
.idea.scope .vbtn.me[aria-pressed="true"] { background: var(--b-primary); color: var(--b-on-primary); border-color: var(--b-primary); }
.idea.scope .vbtn.parts[aria-pressed="true"] { background: color-mix(in srgb, var(--b-secondary) 45%, var(--b-bg)); }
.idea.scope .vbtn.no[aria-pressed="true"] { background: var(--b-text); color: var(--b-bg); }
.idea.scope .keep-opt input { accent-color: var(--b-primary); }
.idea.scope .text-in, .idea.scope .note-in { background: transparent; color: var(--b-text); border-color: color-mix(in srgb, var(--b-text) 35%, transparent); }
.idea.scope .note-in::placeholder, .idea.scope .text-in::placeholder { color: color-mix(in srgb, var(--b-text) 50%, transparent); }

.earlier { border-top: 2px dashed var(--line); padding-top: 18px; }
.earlier summary { cursor: pointer; font-weight: 800; }
.earlier .round { margin-top: 18px; }

/* ---------- brand book extras ---------- */
.tile { display: grid; gap: 4px; border: 2px solid var(--line); border-radius: 14px; padding: 14px; }
.tile small { color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; }
.mini-h { font-family: var(--body); font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.plain { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.prop { display: flex; height: 34px; border-radius: 10px; overflow: hidden; border: 2px solid var(--ink); }
.scroll-x { overflow-x: auto; }
.wcag { border-collapse: collapse; width: 100%; min-width: 440px; font-size: .95rem; font-variant-numeric: tabular-nums; }
.wcag th, .wcag td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.wcag th { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pair { display: inline-block; padding: 4px 10px; border-radius: 6px; font-weight: 700; border: 1px solid var(--line); }
.tag.strike { text-decoration: line-through; color: var(--muted); }
.bios { display: grid; gap: 12px; }
.in-use { display: grid; gap: 16px; min-width: 0; }
.postcard { position: relative; overflow: hidden; aspect-ratio: 1.5; max-width: 100%; border: 2px solid var(--ink); border-radius: 8px; background: var(--b-bg); color: var(--b-text); padding: 18px; display: grid; align-content: space-between; }
.postcard .pattern { position: absolute; inset: 0; opacity: .35; }
.postcard > *:not(.pattern) { position: relative; }
.pc-line { font-family: var(--b-display); font-size: clamp(1.2rem, 4vw, 1.8rem); line-height: 1.15; max-width: 16ch; }
.pc-sign { font-family: var(--b-display); justify-self: end; color: var(--b-primary); font-size: 1.1rem; }
.post { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; background: var(--b-surface); color: var(--b-text); font-family: var(--b-body); border: 2px solid var(--ink); border-radius: var(--b-radius); padding: 14px; }
.post .emblem { width: 56px; height: 56px; }
.tokens { margin: 0; overflow-x: auto; background: var(--ink); color: var(--bg); border-radius: 12px; padding: 16px; font: .85rem/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; }
.finale { display: grid; justify-items: center; gap: 18px; text-align: center; padding-block: 36px; }
.finale h2 { font-size: clamp(2rem, 6vw, 3.4rem); max-width: 18ch; }

.footer-note { text-align: center; color: var(--muted); font-size: .9rem; padding-bottom: 24px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}