:root {
  --bg: #faf9f6; --panel: #ffffff; --ink: #1d1b26; --muted: #6f6a78; --faint: #a7a2b0;
  --line: #e8e4dd; --accent: #ff6b4a; --accent-ink: #fff; --ok: #1f8a5b; --warn: #b26b00;
  --radius: 14px; --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #15141a; --panel: #1e1c24; --ink: #efedf3; --muted: #a29dab; --faint: #6c6775;
    --line: #2e2b35; --ok: #4cc38a; --warn: #f0a640; color-scheme: dark; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.02em; }
h1 { font-size: 30px; font-weight: 800; }
h2 { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 40px 0 14px; }
p { margin: 0; }
code, pre { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
pre { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; overflow: auto; max-height: 420px; }

.top { border-bottom: 1px solid var(--line); background: var(--panel); }
.top-in { max-width: 1100px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 22px; }
.brand { font-weight: 800; text-decoration: none; font-size: 17px; letter-spacing: -.02em; }
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand .logo { width: 30px; height: 30px; display: block; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.brand:hover .logo { transform: rotate(-12deg) scale(1.08); }
.brand .logo svg, .mascot svg, .mascot img { width: 100%; height: 100%; display: block; }
.nav { display: flex; gap: 18px; flex: 1; }
.nav a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 14px; }
.nav a:hover, .nav a.on { color: var(--ink); }
.me { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.me img { width: 26px; height: 26px; border-radius: 50%; }

main { max-width: 1100px; margin: 0 auto; padding: 32px 20px 80px; }
.lede { color: var(--muted); margin-top: 6px; max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }

.btn { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
  border-radius: 99px; font: 700 14px var(--font); text-decoration: none; background: var(--ink); color: var(--bg); }
.btn.accent { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.danger { background: transparent; color: #d33; box-shadow: inset 0 0 0 1.5px #d334; }
.btn.sm { padding: 6px 12px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }

/* Test thumbnails: a 240×150 scene that fills the frame. Older square pictures sit centred on a soft backdrop
   picked from the slug. */
.thumb { display: block; aspect-ratio: 8 / 5; overflow: hidden; border-bottom: 1px solid var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .35s ease; }
.thumb.sm { width: 96px; height: 60px; aspect-ratio: auto; border-radius: 10px; border: 1px solid var(--line); flex: none; }
.tint0 { background: #FFE3D8; } .tint1 { background: #DDF1FF; } .tint2 { background: #E2F6DA; }
.tint3 { background: #FFF1C9; } .tint4 { background: #ECE3FF; } .tint5 { background: #FFE0EC; }
@media (prefers-color-scheme: dark) {
  .tint0 { background: #3A2620; } .tint1 { background: #1D2F3D; } .tint2 { background: #22331F; }
  .tint3 { background: #3A3220; } .tint4 { background: #2B2440; } .tint5 { background: #3A2230; }
}
@media (prefers-reduced-motion: reduce) { .thumb img, .brand .logo { transition: none; } }

.login .mascot { width: min(100%, 300px); aspect-ratio: 660 / 470; margin: 0 auto 12px; }

/* Rendered Markdown (the guidance page). */
.prose h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; text-transform: none; color: var(--ink); margin: 0 0 10px; }
.prose h3 { font-size: 18px; font-weight: 800; margin: 28px 0 8px; }
.prose p { margin: 10px 0; }
.prose ul, .prose ol { margin: 8px 0; padding-left: 22px; }
.prose li { margin: 4px 0; }
.prose li.more { list-style: none; }
.prose code { background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; font-size: 12.5px; }
.prose pre { white-space: pre-wrap; word-break: break-all; }

.pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--line); color: var(--muted); }
.pill.listed { background: #1f8a5b22; color: var(--ok); }
.pill.link { background: #3d7bff22; color: #3d7bff; }
.pill.hidden { background: var(--line); color: var(--muted); }
.pill.done { background: #1f8a5b22; color: var(--ok); }
.pill.prog { background: #b26b0022; color: var(--warn); }

table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
tr:last-child td { border-bottom: 0; }
/* Short one-line cells (the Manage list) sit mid-row; tables with long text stay top-aligned. */
table.mid td { vertical-align: middle; }
.tbl-wrap { overflow-x: auto; }
/* Admin tables: Data and History open a full-width row under their own row, so the columns never move. */
.opener { appearance: none; background: none; border: 0; padding: 0; margin-right: 14px; font: inherit; color: var(--ink); cursor: pointer; }
.opener::after { content: ' ▸'; color: var(--muted); }
.opener[aria-expanded="true"]::after { content: ' ▾'; }
td.opens { white-space: nowrap; }
tr.more > td { background: var(--bg); }
/* The opened row's contents don't count toward the columns' widths, so opening one never shifts the table. */
tr.more > td > * { width: 0; min-width: 100%; }
/* Wrap long lines (e.g. a test's whole state saved as one string) so they can't widen the table. */
tr.more pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.history summary { cursor: pointer; font-size: 14px; }
.history pre { margin-top: 6px; }
.history .kind { font-weight: 600; }
.history .sub { font-size: 13px; color: var(--muted); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { display: block; font-size: 13px; font-weight: 700; margin: 12px 0 4px; }
input[type=text], input[type=url], select, textarea { width: 100%; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: 14px var(--font); }
textarea { min-height: 90px; resize: vertical; }
textarea.code { font: 13px/1.5 ui-monospace, Menlo, monospace; min-height: 60vh; }
.copy { display: flex; gap: 8px; }
.copy input { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }

.stars { color: var(--accent); letter-spacing: 1px; }

.login { max-width: 420px; margin: 12vh auto; text-align: center; }
.login .panel { padding: 36px; }
.gbtn { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; }

/* test player */
body.player { overflow: hidden; }
.pbar { height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--ink); font-family: var(--font); }
.pbar .t { font-weight: 800; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbar .t small { font-weight: 600; color: var(--muted); margin-left: 6px; }
.pbar a.back { text-decoration: none; font-weight: 700; color: var(--muted); }
.saved { font-size: 12px; color: var(--faint); min-width: 60px; text-align: right; }
iframe.test { display: block; width: 100%; height: calc(100vh - 52px); height: calc(100dvh - 52px); border: 0; background: #fff; }
/* Admin bar: its own dark strip with an amber edge, so it never reads as part of the test or its theme. */
.adminbar { --ab-h: 40px; --ab-amber: #ffc247; color-scheme: dark; box-sizing: border-box; height: var(--ab-h); display: flex; align-items: center; gap: 12px; padding: 0 14px; background: #17151f; border-bottom: 2px solid var(--ab-amber); color: #f1eff6; font: 600 13px var(--font); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.adminbar::-webkit-scrollbar { display: none; }
.adminbar > * { flex: none; }
.ab-tag { padding: 3px 8px; border-radius: 5px; background: var(--ab-amber); color: #17151f; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.adminbar .pill { padding: 3px 10px; background: #ffffff1f; color: #f1eff6; }
.adminbar .pill.listed { background: #4cc38a33; color: #7fe3b2; }
.adminbar .pill.link { background: #3d7bff40; color: #b4cbff; }
.ab-ver { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: #c3bfcd; font: inherit; }
.adminbar select { width: auto; height: 28px; padding: 0 26px 0 10px; border: 1px solid #ffffff40; border-radius: 7px; color: #fff; font: 600 13px var(--font); cursor: pointer; appearance: none; -webkit-appearance: none;
  background: #ffffff14 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 9px center; }
.adminbar select:hover { border-color: #ffffff80; }
.adminbar select:focus-visible, .ab-manage:focus-visible { outline: 2px solid var(--ab-amber); outline-offset: 1px; }
.ab-warn { color: var(--ab-amber); }
.adminbar .ab-meta { flex: 1 0 auto; display: flex; justify-content: flex-end; gap: 16px; color: #c3bfcd; font-weight: 500; }
.ab-manage { padding: 5px 11px; border-radius: 7px; background: #fff; color: #17151f; font-weight: 700; text-decoration: none; }
.ab-manage:hover { background: var(--ab-amber); }
iframe.test.full { height: 100vh; height: 100dvh; }
body.has-adminbar iframe.test { height: calc(100vh - 92px); height: calc(100dvh - 92px); }

dialog { border: 0; border-radius: 18px; padding: 24px; width: min(480px, calc(100vw - 32px)); background: var(--panel); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0,0,0,.4); }
dialog::backdrop { background: rgba(20,18,30,.45); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 99px; font-weight: 700; font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.on { opacity: 1; }

@media (max-width: 720px) {
  .top-in { padding: 10px 16px; gap: 14px; }
  .me span { display: none; }
  main { padding: 22px 16px 60px; }
  .grid2 { grid-template-columns: 1fr; }
  .pbar .saved { display: none; }
  .adminbar { gap: 8px; padding: 0 10px; }
  .adminbar select { padding-right: 22px; background-position: right 7px center; }
  .adminbar .ab-meta, .ab-more { display: none; }
  .ab-manage { margin-left: auto; position: sticky; right: 0; box-shadow: -8px 0 0 #17151f; }
}

/* setup page */
.tabs { display: flex; gap: 4px; margin-top: 24px; border-bottom: 1px solid var(--line); }
.tabs button { appearance: none; border: 0; background: none; cursor: pointer; padding: 10px 16px; font: 700 15px var(--font); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--ink); border-color: var(--accent); }
.say { margin: 8px 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--panel); border-radius: 0 10px 10px 0; font-size: 15px; }
.steps { padding-left: 20px; }
.steps li { margin-bottom: 14px; }
.steps li::marker { font-weight: 800; color: var(--muted); }

/* admin test page */
.warn { color: var(--warn); font-weight: 700; }
.stats { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 18px; padding: 14px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.stats > div { font-weight: 600; }
.stats > div > span:first-child { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* versions table: links to go somewhere, one button (Make live) to change something */
/* Make live is sized like the live pill it turns into: same height and type, outlined instead of filled. */
.makelive { display: inline; }
.makelive button { appearance: none; cursor: pointer; display: inline-block; padding: 1px 8px; border-radius: 99px; font: 700 12px var(--font);
  background: transparent; color: var(--ink); border: 1px solid var(--line); line-height: inherit; }
.makelive button:hover { border-color: var(--ink); }
/* Under the live pill when the test is set to Admins only: the live version is up, but nobody else can open it. */
.livenote { font-size: 12px; color: var(--warn); margin-top: 4px; }
/* Same size as other small links on the page (e.g. Export JSON). */
.vlinks a { display: block; white-space: nowrap; font-size: 13px; }
.vlinks a + a { margin-top: 2px; }

/* manifest page: answer options listed under the question's answer type */
.opts { margin: 4px 0 0; padding-left: 16px; }
.opts li { margin: 1px 0; }

/* build section */
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.subnav a { text-decoration: none; padding: 6px 14px; border-radius: 99px; font-weight: 700; font-size: 14px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); }
.subnav a:hover { color: var(--ink); }
.subnav a.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.flow { list-style: none; padding: 0; margin: 0; counter-reset: flow; }
.flow li { counter-increment: flow; position: relative; padding: 0 0 18px 40px; }
.flow li::before { content: counter(flow); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 13px; }
.flow li:not(:last-child)::after { content: ''; position: absolute; left: 12px; top: 30px; bottom: 2px; width: 2px; background: var(--line); }
.flow b { display: block; }
.flow span { color: var(--muted); font-size: 14px; }
/* sharing */
.sharecode { font: 800 28px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; margin: 2px 0 10px; }
.friend { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.friend:first-child { border-top: 0; }
@media (max-width: 420px) {
  .pbar { gap: 8px; padding: 0 10px; }
  .pbar .t small { display: none; }
  .pbar .btn.sm { padding: 6px 9px; }
  .adminbar .pill { display: none; }
}
/* groups (public/people.js) */
.guestbar { background: #3d7bff14; border-bottom: 1px solid var(--line); padding: 8px 20px; font-size: 13.5px; text-align: center; }
dialog.wide { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.circle { margin-bottom: 16px; }
.circle h3 { font-size: 18px; }
.members { margin-top: 10px; }
.member { padding: 12px 0; border-top: 1px solid var(--line); }
.mhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mfields { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mfields select, .mfields input[type=text] { width: auto; flex: 1 1 140px; padding: 7px 10px; }
.member .copy { margin-top: 8px; }
.copy.fresh input { border-color: var(--accent); }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 12px; }
.pairs { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.pairs summary { cursor: pointer; }
.pair { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pair select { width: auto; padding: 4px 8px; }
.newc h3 { font-size: 17px; }
.joined { margin-bottom: 14px; }
/* The Your people page: each group as a picture (public/pebbles.js draws the scene, public/people.js the card).
   The scene keeps the home page art's light colours in both themes. */
.pcard { background: var(--tile); border: 3px solid var(--stick); border-radius: 26px; box-shadow: 5px 5px 0 var(--stick); overflow: hidden; margin-bottom: 28px; }
.pcard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 18px 22px 12px; }
.pcard-head h3 { font: 600 24px 'Fredoka', var(--font); }
.kind-tag { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 99px; border: 2.5px solid var(--stick); font: 600 13px 'Fredoka', var(--font); color: var(--stick); background: #FFE27A; transform: rotate(-3deg); }
.kind-tag.family { background: #FFB8C9; } .kind-tag.team { background: #9BE3B0; } .kind-tag.couple { background: #C8B6FF; }
.pcard-pairs { padding: 0 22px 12px; }
.pcard-pairs .pairs { margin-top: 0; }
.pcard-scene { background: #FFF8EE; border-top: 3px solid var(--stick); line-height: 0; }
.pp-scene { display: block; width: 100%; height: auto; }
.pp-name { font: 600 13.5px var(--tg-font, 'Fredoka'), var(--font); fill: var(--tg-name, #1d1b26); }
.pp-rel { font: 500 11px var(--font); fill: var(--tg-rel, #4f5a4c); }
.pp-scene.snug .pp-name { font-size: 12px; }
.pp-scene.snug .pp-rel { font-size: 10px; }
.pp-faint { fill: var(--tg-rel, #4f5a4c); }
.pp-plus { fill: #5E8C6A; font-weight: 600; }
.pp-person, .pp-add { cursor: pointer; }
.pp-lift { transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.pp-person:hover .pp-lift, .pp-person:focus-visible .pp-lift { transform: translateY(-5px); }
/* Keyboard focus: no box, just a lift and a glow that follows the pebble's shape. */
.pp-person:focus, .pp-add:focus { outline: none; }
.pp-person:focus-visible .pp-lift, .pp-add:focus-visible { filter: drop-shadow(0 0 4px #FF7A59) drop-shadow(0 0 2px #FF7A59); }
.pp-scene .breathe { animation: pp-breathe 6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.pp-scene .sway { animation: pp-sway 7s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.pp-scene .float { animation: pp-float 8s ease-in-out infinite; }
@keyframes pp-breathe { 50% { transform: scaleY(1.015); } }
@keyframes pp-sway { 50% { transform: rotate(3deg); } }
@keyframes pp-float { 50% { transform: translateY(-6px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .pp-scene .breathe, .pp-scene .sway, .pp-scene .float { animation: none; } .pp-lift { transition: none; } }
.pcard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 4px 22px 18px; background: #1B1530; color: #FFF8EE; }
.pcard-foot .lbl { font: 600 14px 'Fredoka', var(--font); opacity: .75; }
.pcard-foot .none { opacity: .7; font-size: 14px; }
.pcard-foot .tag { padding: 3px 11px; border-radius: 99px; border: 2.5px solid #FFF8EE; font: 600 13.5px 'Fredoka', var(--font); color: #1B1530; background: #FFE27A; text-decoration: none; }
.pcard-foot .tag:nth-of-type(even) { background: #9BE3B0; transform: rotate(-2deg); }
dialog.pp-dlg { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border: 3px solid var(--stick); border-radius: 26px; box-shadow: 6px 6px 0 var(--stick); padding: 20px 22px 22px; }
.pp-dlg h3 { font: 600 24px 'Fredoka', var(--font); }
.pp-dlg-top { display: flex; gap: 14px; align-items: center; margin-bottom: 4px; }
.pp-portrait { width: 84px; height: 96px; flex: none; background: #FFF8EE; border-radius: 18px; }
.pp-field { display: grid; gap: 4px; margin-top: 12px; }
.pp-field > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.pp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-status { margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: var(--cream); border: 1px solid var(--line); }
.pp-acts { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 480px) { .pp-two { grid-template-columns: 1fr; } .pcard-head { padding: 16px 16px 10px; } .pcard-foot { padding: 4px 16px 16px; } }

/* ---------- The pages people use (home, People): body.fun ----------
   Casual and playful: no header bar, a sky-coloured hero with a wavy edge, big tilted scene tiles. */
body.fun { --sky: #CFEFFF; --cream: #FFF8EE; --pop: #FF7A59; --stick: #1B1530; --tile: #fff; background: var(--cream); }
@media (prefers-color-scheme: dark) { body.fun { --sky: #1E2547; --cream: #15141F; --tile: #211F2C; } }
.fun h1, .fun h2, .fun h3, .fun .brand, .fun .cta, .fun .pills a { font-family: 'Fredoka', var(--font); letter-spacing: 0; }

.hdr { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; max-width: 1100px; margin: 0 auto; padding: 16px 20px; }
.hdr .brand { font-size: 21px; font-weight: 700; }
.hdr .brand .logo { width: 38px; height: 38px; }
.pills { display: flex; gap: 6px; flex: 1; justify-content: flex-end; }
.pills a { text-decoration: none; font-weight: 600; font-size: 16px; padding: 7px 14px; border-radius: 99px; color: var(--ink); }
.pills a:hover { background: rgba(255,255,255,.6); }
.pills a.on { background: var(--stick); color: #fff; }
@media (prefers-color-scheme: dark) { .pills a:hover { background: rgba(255,255,255,.08); } .pills a.on { background: #fff; color: var(--stick); } }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--stick); overflow: hidden; display: grid; place-items: center; background: #FFD166; color: var(--stick); font: 700 17px 'Fredoka', var(--font); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary img { width: 100%; height: 100%; object-fit: cover; }
.menu > div { position: absolute; right: 0; top: 50px; min-width: 220px; background: var(--tile); border: 3px solid var(--stick); border-radius: 18px; padding: 8px; box-shadow: 4px 4px 0 var(--stick); }
.menu a { display: block; padding: 9px 12px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.menu a:hover { background: var(--cream); }
.menu .who { padding: 8px 12px 10px; font-weight: 700; border-bottom: 2px dashed var(--line); margin-bottom: 6px; }
.menu .who span { font-weight: 400; font-size: 13px; color: var(--muted); }

.sky .hdr-wrap, .hero { background: var(--sky); }
.hero-in { max-width: 1100px; margin: 0 auto; padding: 12px 20px 24px; display: flex; align-items: center; gap: 24px; }
.hello { flex: 1; min-width: 0; }
.wave { font: 600 19px 'Fredoka', var(--font); }
.wave span { display: inline-block; animation: wave 2.4s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-8deg); } }
.hero h1 { font-size: clamp(38px, 6vw, 62px); font-weight: 700; line-height: 1.02; margin-top: 6px; max-width: 13ch; }
.hero .sub { font-size: 18px; margin-top: 14px; max-width: 42ch; color: var(--ink); opacity: .78; }
.cta { display: inline-flex; gap: 8px; align-items: center; margin-top: 22px; margin-right: 10px; padding: 13px 24px; border-radius: 99px; background: var(--pop); color: #fff; text-decoration: none; font-weight: 600; font-size: 19px; border: 3px solid var(--stick); box-shadow: 4px 4px 0 var(--stick); transition: transform .15s, box-shadow .15s; }
.cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--stick); }
.cta:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--stick); }
.cta.alt { background: var(--tile); color: var(--ink); }
.hero-art { width: clamp(320px, 52vw, 620px); flex: none; margin: 0 -20px -40px 0; }
.hero-art img { width: 100%; height: auto; display: block; }
.wave-edge { display: block; width: 100%; height: 44px; margin-bottom: -1px; }
.wave-edge path { fill: var(--cream); }

.fun-main { padding-top: 8px; }
.shelf { margin-top: 28px; }
.shelf h2 { font-size: 30px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0 0 22px; display: inline-block; }
.squiggle { display: block; width: 100%; max-width: 140px; height: 10px; color: var(--pop); margin-top: 2px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 30px 26px; }
.tile { display: flex; flex-direction: column; text-decoration: none; background: var(--tile); border: 3px solid var(--stick); border-radius: 26px; overflow: hidden; box-shadow: 5px 5px 0 var(--stick); transition: transform .2s cubic-bezier(.3,1.5,.5,1), box-shadow .2s; }
.tile.tilt-r { transform: rotate(.8deg); }
.tile.tilt-l { transform: rotate(-.8deg); }
.tile:hover { transform: translate(-3px, -4px) rotate(0); box-shadow: 8px 9px 0 var(--stick); }
.tile .pic { position: relative; aspect-ratio: 8 / 5; box-sizing: content-box; border-bottom: 3px solid var(--stick); }
.tile .pic img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .4s ease; }
.tile:hover .pic img { transform: scale(1.04); }
.tile .pic { overflow: hidden; }
.sticker { position: absolute; top: 12px; left: 12px; padding: 4px 11px; border-radius: 99px; border: 2.5px solid var(--stick); font: 600 13.5px 'Fredoka', var(--font); color: var(--stick); transform: rotate(-4deg); max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticker.new { background: #FFE27A; }
.sticker.prog { background: #FFB8C9; }
.sticker.done { background: #9BE3B0; }
.tile .words { padding: 16px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.tile h3 { font-size: 24px; font-weight: 600; }
.tile p { color: var(--muted); font-size: 15px; margin-top: 6px; }
.tile .with { font-weight: 700; color: var(--ink); font-size: 14px; }
.tile .go { margin-top: auto; padding-top: 14px; font: 600 17px 'Fredoka', var(--font); color: var(--pop); }
.tile:hover .go { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.empty { font: 500 20px 'Fredoka', var(--font); color: var(--muted); margin-top: 24px; }
.site-foot { margin-top: 72px; }
.site-foot img { display: block; width: 100%; height: clamp(130px, 18vw, 260px); object-fit: cover; object-position: center bottom; margin-bottom: -1px; }
.foot-bar { background: var(--stick); color: #FFF8EE; }
.foot-in { max-width: 1100px; margin: 0 auto; padding: 14px 20px 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.foot-in .brand { display: inline-flex; align-items: center; gap: 10px; font: 700 20px 'Fredoka', var(--font); }
.foot-in .logo { width: 34px; height: 34px; }
.foot-in .logo svg { width: 100%; height: 100%; display: block; }
.foot-note { flex: 1; min-width: 220px; opacity: .75; font-size: 15px; }
.foot-in nav { display: flex; gap: 6px; }
.foot-in nav a { color: #FFF8EE; text-decoration: none; font-weight: 600; padding: 6px 12px; border-radius: 99px; }
.foot-in nav a:hover { background: rgba(255,255,255,.12); }
.fun main > h1 { font-size: 40px; font-weight: 700; }

@media (max-width: 640px) {
  .hdr { padding: 12px 16px; gap: 10px; }
  .hdr .brand .name { display: none; }
  .pills a { font-size: 15px; padding: 6px 11px; }
  .hero-in { flex-direction: column-reverse; align-items: flex-start; gap: 4px; padding: 8px 16px 26px; }
  .hero-art { width: calc(100% + 16px); margin: 0 -8px 8px; }
  .hero .sub { font-size: 16px; }
  .tiles { grid-template-columns: 1fr; }
  .tile.tilt-r, .tile.tilt-l { transform: none; }
}
@media (max-width: 420px) {
  .pills .your { display: none; }
  .pills a { padding: 6px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .wave span { animation: none; }
  .tile, .tile .pic img, .cta { transition: none; }
}

/* Group links and Who's playing (public/picker.js) */
.invite { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--cream); border: 1px solid var(--line); }
.invite .copy { margin-top: 8px; }
form.inline { display: inline; }
.linkish { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; }
.pbar .who { display: inline-flex; align-items: center; gap: 6px; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whodot { width: 10px; height: 13px; flex: none; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; background: #E07A5F; box-shadow: 0 2px 0 -1px #FF7A5980; }
.pk-name { font: 600 18px 'Fredoka', var(--font); margin: 14px 0 6px; }
.pk-scene { background: var(--tg-scene, #FFF8EE); border-radius: 18px; overflow: hidden; line-height: 0; }
.pcard-scene .pk-scene { border-radius: 0; }
/* Schema coverage strip: one group per life area (--n families, colour --c), one segment per family. The compact
   strip is one line of small text tall (3 + 14 + 2.5 px = 13px × 1.5), so it lines up with the cells beside it. Its areas
   touch as rounded capsules, pinching where they meet like a chromosome; the big one keeps gaps so the areas read apart. */
.cstrip { display: flex; width: 150px; margin: 3px 0 2.5px; }
.vstrip .cstrip { width: 200px; }
.cstrip.big { width: 100%; gap: 8px; margin-top: 0; }
.stats > .sfull { flex-basis: 100%; font-weight: 400; }
.sfull .cstrip { margin: 4px 0 6px; }
.carea { flex: var(--n, 1); min-width: 0; }
.cname { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.csegs { display: flex; gap: 1px; height: 14px; background: var(--line); border-radius: 7px; overflow: hidden; }
.big .csegs { border-radius: 4px; }
.csegs i { flex: 1; background: var(--c); }

/* Legal and account pages */
.legal { max-width: 760px; }
.legal h2 { margin-top: 28px; }
.legal p, .legal ul { margin-top: 10px; }
.legal ul { padding-left: 22px; }
.legal li { margin-top: 6px; }

/* Playing together (public/together.js) */
.faces { display: flex; align-items: center; flex: none; max-width: 42vw; overflow-x: auto; padding: 3px 2px; }
.face { flex: none; width: 32px; height: 32px; margin-left: -5px; border-radius: 50%; border: 2px solid var(--panel); background: #F2D9B8; color: #5B4632; font: 700 14px 'Fredoka', var(--font); cursor: pointer; position: relative; }
.face:first-child { margin-left: 0; }
.face.done { background: #A9D8B0; }
.face.done::after { content: '✓'; position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; background: #3E9B57; color: #fff; font-size: 10px; line-height: 14px; }
.face.me { box-shadow: 0 0 0 2.5px var(--accent); z-index: 1; }
.face.add { background: transparent; border: 2px dashed var(--line); color: var(--muted); margin-left: 4px; }
.tg { position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: var(--tg-bg, #FFF8EE); color: var(--ink); font-family: var(--font); }
.tg[hidden], .tg-bar[hidden], .faces[hidden] { display: none; }
.tg-in { max-width: 520px; min-height: 100%; margin: 0 auto; padding: 28px 20px 36px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.tg h1 { font: 700 30px/1.15 var(--tg-font, 'Fredoka'), var(--font); text-align: center; }
.tg-sub { color: var(--muted); text-align: center; margin-top: 8px; }
.tg-mid { text-align: center; }
.tg-art img { display: block; width: min(100%, 300px); height: auto; margin: 0 auto 16px; border-radius: 18px; }
.tg-face { width: 150px; margin: 0 auto 14px; }
.tg-face svg { width: 100%; height: auto; display: block; }
.tg-go { display: block; width: 100%; margin-top: 12px; padding: 15px 20px; font-size: 17px; justify-content: center; }
.tg-go:disabled { opacity: .45; cursor: default; }
.tg-go.alt { background: var(--panel); color: inherit; box-shadow: inset 0 0 0 1.5px var(--line); }
.tg-mid .tg-go:first-of-type { margin-top: 24px; }
.tg-ask { margin-top: 22px; font-size: 18px; text-transform: none; letter-spacing: 0; color: inherit; }
.tg-row { margin-top: 10px; text-align: left; }
.tg-pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; min-height: 62px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--line); color: inherit; text-decoration: none; }
.tg-pick:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.tg-pick-t { min-width: 0; }
.tg-pick-t b { display: block; font-size: 17px; overflow-wrap: anywhere; }
.tg-pick-t small { color: var(--muted); font-size: 14px; }
.tg-faces { display: flex; flex: none; align-items: center; }
.tg-faces .face { display: grid; place-items: center; cursor: inherit; }
.tg-more { margin-left: 5px; color: var(--muted); font-size: 13px; }
.tg-plus { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2px dashed var(--line); color: var(--muted); font-size: 18px; line-height: 27px; text-align: center; }
.tg-pick.off { background: none; box-shadow: inset 0 0 0 1.5px var(--line); opacity: .6; }
.tg-pick.off:hover { box-shadow: inset 0 0 0 1.5px var(--line); }
.tg-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.tg-acts.end { justify-content: flex-end; margin-top: 6px; }
.tg-note { margin-top: 14px; color: var(--muted); font-size: 14px; }
.tg-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--panel); color: var(--ink); display: grid; place-items: center; text-decoration: none; font-size: 22px; line-height: 1; cursor: pointer; }
.tg-scene { margin-top: 18px; }
.tg-add { margin-top: 18px; }
.tg-add label { display: block; font-weight: 700; margin-bottom: 6px; }
.tg-types { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tg-type { border: 0; border-radius: 99px; padding: 9px 14px; background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); font: 600 15px var(--font); cursor: pointer; }
.tg-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40; width: min(460px, calc(100vw - 32px)); display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 99px; background: var(--panel); box-shadow: 0 8px 30px #0003; }
.tg-bar .btn { flex: 1; justify-content: center; }
.tg-bar span { flex: 1; padding-left: 12px; font-weight: 600; }
.tg-x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; font-size: 20px; color: var(--muted); cursor: pointer; }
.tg-add input { width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); font: inherit; font-size: 17px; }

/* Profiles (src/profileView.js). --c: the area's colour (the coverage strip's), --soft: a tint of it. */
.pf-main { max-width: 900px; }
.pf-areas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.pf-areas a { border: 2.5px solid var(--stick); border-radius: 99px; padding: 6px 14px; font: 600 14px 'Fredoka', var(--font); color: var(--ink); text-decoration: none; background: var(--tile); box-shadow: 2px 2px 0 var(--stick); }
.pf-areas a::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-right: 7px; vertical-align: -1px; }
.pf-dev { margin-top: 8px; }
.pf-area { --soft: color-mix(in srgb, var(--c) 14%, var(--tile)); margin-top: 44px; scroll-margin-top: 16px; }
.pf-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.pf-scene { width: 200px; max-width: 100%; height: auto; flex: none; border: 3px solid var(--stick); border-radius: 18px; box-shadow: 4px 4px 0 var(--stick); background: var(--soft); }
.pf-area h2 { font-size: 30px; font-weight: 700; margin: 0; }
.pf-area .squiggle { color: var(--c); }
.pf-head > div { flex: 1 1 280px; min-width: 0; }
.pf-lead { color: var(--muted); margin: 8px 0 2px; }
.pf-about { font-size: 15px; line-height: 1.5; max-width: 640px; margin: 8px 0 10px; }
.pf-known { font: 600 13px 'Fredoka', var(--font); color: var(--c); margin: 0; }
.pf-card { background: var(--tile); border: 3px solid var(--stick); border-radius: 26px; padding: 18px 22px 8px; margin: 20px 0 26px; box-shadow: 5px 5px 0 var(--stick); }
.pf-card summary { list-style: none; cursor: pointer; }
.pf-card summary::-webkit-details-marker { display: none; }
.pf-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-card h3 { margin: 0; font-size: 24px; font-weight: 600; }
.pf-head-r { display: flex; align-items: center; gap: 12px; }
.pf-ev { display: inline-block; padding: 3px 11px; border-radius: 99px; border: 2.5px solid var(--stick); font: 600 13px 'Fredoka', var(--font); color: var(--stick); transform: rotate(-3deg); }
.pf-ev.good { background: #9BE3B0; } .pf-ev.some { background: #FFE27A; } .pf-ev.little { background: #FFB8C9; } .pf-ev.none { background: #eee; color: #6f6a78; }
.pf-learn { font: 600 15px 'Fredoka', var(--font); color: var(--c); }
.pf-learn::before { content: '+ '; }
details.pf-fam[open] .pf-learn::before { content: '– '; }
details.pf-fam[open] + .pf-blurb { display: none; }
.pf-blurb { margin: 2px 0 10px; color: var(--muted); font-size: 14px; }
.pf-fam-panel { background: var(--soft); border-radius: 16px; padding: 10px 14px; margin: 10px 0 4px; font-size: 14px; }
.pf-fam-panel p, .pf-panel p { margin: 4px 0; }
.pf-con { padding: 10px 0 8px; border-top: 2px dashed var(--line); }
.pf-con.gap .pf-name { color: var(--muted); }
details.pf-con > summary:hover .pf-name { color: var(--c); }
.pf-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.pf-name { font-weight: 600; }
.pf-band { font-size: 13px; color: var(--muted); }
.pf-band b { color: var(--ink); font-weight: 700; }
.pf-chev { display: inline-block; width: 8px; height: 8px; border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted); transform: rotate(45deg); margin: 0 2px 3px 10px; transition: transform .15s; }
details.pf-con[open] .pf-chev, details.pf-noev[open] > summary .pf-chev { transform: rotate(-135deg); margin-bottom: -2px; }
.pf-noev > summary { padding: 10px 0 8px; border-top: 2px dashed var(--line); color: var(--muted); font-size: 14px; }
.pf-noev > summary a { color: var(--c); font-weight: 600; }
.pf-line { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(150px, 3fr) minmax(80px, 1fr); gap: 10px; align-items: center; margin: 6px 0 2px; }
.pf-pole { font-size: 12px; color: var(--muted); text-align: right; }
.pf-pole.r { text-align: left; }
.pf-track { position: relative; height: 14px; border: 2.5px solid var(--stick); border-radius: 99px; background: var(--tile); }
.pf-con.gap .pf-track { border-color: var(--line); background: transparent; }
.pf-track::after { content: ''; position: absolute; left: 50%; top: 1px; width: 2px; height: 7px; background: var(--line); }
.pf-dot { position: absolute; z-index: 1; top: -7px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--c); border: 2.5px solid var(--stick); }
.pf-panel { padding: 6px 0 8px; font-size: 14px; }
.pf-def { margin: 2px 0 6px; font-size: 13.5px; color: var(--muted); }
details.pf-con:not([open]) .pf-def { display: none; }
.pf-ends { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: 13px; margin: 12px 0 6px; }
.pf-ends span { position: relative; border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 11px; background: var(--tile); }
.pf-ends b { display: none; }
.pf-ends span.other { border-style: dashed; color: var(--muted); }
.pf-ends span.you.strong { background: var(--soft); border: 2px solid var(--c); }
.pf-ends span.you.lean, .pf-ends span.you.sofar { background: color-mix(in srgb, var(--soft) 55%, var(--tile)); border: 1.5px solid var(--c); }
.pf-ends em { position: absolute; top: -10px; right: 10px; font: 600 11px 'Fredoka', var(--font); font-style: normal; background: var(--c); color: #fff; border-radius: 99px; padding: 1px 8px; }
.pf-ends span.you.lean em, .pf-ends span.you.sofar em { background: var(--tile); color: var(--c); border: 1.5px solid var(--c); }
/* A notch on each box's top edge, pointing at its end of the track. */
.pf-caret { position: absolute; top: -8px; width: 12px; height: 12px; background: inherit; border-left: inherit; border-top: inherit; transform: rotate(45deg); }
.pf-ends span:first-of-type .pf-caret { left: calc(40% - 6px); }
.pf-ends span:last-of-type .pf-caret { right: calc(40% - 6px); }
/* In the middle: one pill across the gap between the two boxes. */
.pf-ends em.pf-mid { z-index: 1; white-space: nowrap; left: 50%; right: auto; transform: translateX(-50%); background: var(--tile); color: var(--c); border: 1.5px solid var(--c); }
details.pf-research { margin: 8px 0 2px; font-size: 13px; }
details.pf-research > summary { color: var(--c); font-weight: 600; }
details.pf-research > summary::before { content: '▸ '; }
details.pf-research[open] > summary::before { content: '▾ '; }
details.pf-research ul { margin: 6px 0 0 18px; padding: 0; color: var(--muted); }
details.pf-research li { margin: 2px 0; }
details.pf-research b { color: var(--ink); font-weight: 600; }
.pf-src { font-size: 13px; }
.pf-admin { margin: 10px 0 2px; padding: 10px 14px 12px; background: var(--cream); border: 2px dashed #c9c4bd; border-radius: 16px; }
.pf-adm-tag { display: inline-block; background: #e8e4dd; color: var(--stick); border: 2.5px solid var(--stick); border-radius: 99px; padding: 2px 10px; font: 600 13px 'Fredoka', var(--font); transform: rotate(-2deg); margin-bottom: 6px; }
.pf-hide-admin .pf-admin { display: none; }
.pf-admin-switch { position: fixed; z-index: 5; right: 16px; bottom: 16px; background: #e8e4dd; color: var(--stick); border: 2.5px solid var(--stick); border-radius: 99px; padding: 6px 14px; font: 600 14px 'Fredoka', var(--font); box-shadow: 3px 3px 0 var(--stick); cursor: pointer; }
.pf-admin-switch[aria-pressed="true"] { background: var(--stick); color: #fff; }
.pf-adm-line { font-size: 13px; }
.pf-adm-tbl { overflow-x: auto; }
.pf-adm-tbl table { border-collapse: collapse; width: 100%; font-size: 12.5px; margin-top: 4px; }
.pf-adm-tbl td, .pf-adm-tbl th { text-align: left; padding: 3px 8px 3px 0; border-top: 1px solid var(--line); vertical-align: top; }
.pf-adm-tbl th { color: var(--muted); font-weight: 500; border: 0; }
.pf-bars { display: flex; gap: 4px; }
.pf-bar { display: flex; flex: none; width: calc(var(--n) * 1.6px); height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--c) 18%, transparent); overflow: hidden; }
.pf-bar i { display: block; height: 100%; background: var(--c); }
.pf-bar i.some { background: color-mix(in srgb, var(--c) 45%, transparent); }
@media (max-width: 520px) {
  .pf-line { grid-template-columns: 1fr; gap: 4px; }
  .pf-pole { text-align: left; }
  .pf-pole.r { text-align: right; }
  .pf-card { padding: 16px 16px 6px; }
  .pf-ends { grid-template-columns: 1fr; gap: 10px; }
  .pf-ends b { display: inline; margin-right: 6px; }
  .pf-caret { display: none; }
  .pf-ends em.pf-mid { top: 50%; transform: translate(-50%, -50%); }
  .pf-head-r { width: 100%; justify-content: space-between; }
  .pf-adm-tbl table { min-width: 460px; }
}