/* 👁️ Alani's patch tracker. Playful, but the site's habits: tokens for light + dark, Tabler icons, solid cards. */
:root {
  --bg:#f6f1ff; --bg2:#fff4fa; --card:#ffffff; --ink:#22183a; --muted:#6c6387; --faint:#a59dbd;
  --line:rgba(76,29,149,.10); --line2:rgba(76,29,149,.18); --hover:rgba(76,29,149,.06);
  --shadow:0 1px 2px rgba(60,20,120,.05), 0 6px 18px -8px rgba(60,20,120,.18);
  --b1:#7c3aed; --b2:#db2777; --b-soft:#efe7ff; --b-ink:#5b21b6;
  --gold:#f5b301; --gold2:#ffd54a; --gold-ink:#7a4f00; --gold-soft:#fff5d6;
  --ok:#15803d; --no:#dc2626; --part:#f59e0b;
  --font:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) {
  --bg:#110c1d; --bg2:#1a0f22; --card:#1c1530; --ink:#f4effe; --muted:#a99fc6; --faint:#6e6589;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16); --hover:rgba(255,255,255,.06);
  --shadow:0 1px 3px rgba(0,0,0,.5);
  --b1:#9b6bff; --b2:#f0569f; --b-soft:#2a1f47; --b-ink:#c9b2ff;
  --gold:#fbbf24; --gold2:#fde68a; --gold-ink:#fde68a; --gold-soft:#2f2612;
  --ok:#4ade80; --no:#f87171; --part:#fbbf24;
}}
:root[data-theme="dark"] {
  --bg:#110c1d; --bg2:#1a0f22; --card:#1c1530; --ink:#f4effe; --muted:#a99fc6; --faint:#6e6589;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16); --hover:rgba(255,255,255,.06);
  --shadow:0 1px 3px rgba(0,0,0,.5);
  --b1:#9b6bff; --b2:#f0569f; --b-soft:#2a1f47; --b-ink:#c9b2ff;
  --gold:#fbbf24; --gold2:#fde68a; --gold-ink:#fde68a; --gold-soft:#2f2612;
  --ok:#4ade80; --no:#f87171; --part:#fbbf24;
}
* {box-sizing:border-box;}
html {-webkit-text-size-adjust:100%;}
body {margin:0;min-height:100vh;color:var(--ink);font-family:var(--font);letter-spacing:-.005em;
  background:radial-gradient(1200px 600px at 10% -10%,var(--bg2),transparent 60%),var(--bg);background-attachment:fixed;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;}
button, input, select {font:inherit;color:inherit;}
.ti {flex:none;vertical-align:-.14em;}
.wrap {max-width:760px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom));}
.card {background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:20px;margin:0 0 14px;}
h2 {font-size:1.12rem;margin:0 0 12px;display:flex;align-items:center;gap:8px;letter-spacing:-.015em;}
h2 .ti {color:var(--b1);}
.muted {color:var(--muted);}

/* ---------- top bar */
.top {display:flex;align-items:center;gap:12px;margin:4px 2px 16px;}
.mark {width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:24px;flex:none;
  background:linear-gradient(135deg,var(--b1),var(--b2));box-shadow:0 4px 12px -4px rgba(124,58,237,.6);}
.top .t {font-weight:800;font-size:1.2rem;letter-spacing:-.02em;line-height:1.15;}
.top .d {color:var(--muted);font-size:.9rem;}
.icb {margin-left:auto;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;color:var(--muted);cursor:pointer;font-size:19px;box-shadow:var(--shadow);}

/* ---------- today */
.hero {padding:22px 20px 20px;position:relative;overflow:hidden;}
.hero::before {content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--b1),var(--b2));}
.hi {font-size:clamp(1.7rem,6vw,2.3rem);font-weight:850;letter-spacing:-.03em;line-height:1.1;}
.msg {color:var(--muted);font-size:1.05rem;margin:6px 0 18px;min-height:1.4em;}
.msg b {color:var(--ink);}
.hours {display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px;}
.hb {position:relative;aspect-ratio:1/1;max-height:150px;border-radius:22px;border:2.5px dashed var(--line2);background:var(--b-soft);
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;
  color:var(--b-ink);transition:transform .15s ease, background .2s ease, border-color .2s ease;touch-action:manipulation;}
.hb .ic {font-size:clamp(1.6rem,7vw,2.4rem);line-height:1;}
.hb .l {font-weight:750;font-size:clamp(.82rem,3vw,1rem);}
.hb .v {font-size:.78rem;opacity:.75;font-weight:600;}
.hb:active {transform:scale(.95);}
.hb.on {border:2.5px solid transparent;color:#fff;background:linear-gradient(140deg,var(--b1),var(--b2));
  box-shadow:0 8px 18px -8px rgba(219,39,119,.65);}
.hb.on .v {opacity:.9;}
.hb.pop {animation:pop .45s cubic-bezier(.3,1.6,.5,1);}
@keyframes pop {0% {transform:scale(.85);} 60% {transform:scale(1.08);} 100% {transform:scale(1);}}
.hb:focus-visible {outline:3px solid var(--b1);outline-offset:3px;}
.tbar {height:12px;border-radius:99px;background:var(--hover);margin:18px 0 8px;overflow:hidden;}
.tbar i {display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--gold2));
  transition:width .5s cubic-bezier(.3,1.2,.5,1);}
.tline {display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.92rem;}
.tline b {color:var(--ink);}
.done-banner {display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border-radius:16px;font-weight:700;
  background:var(--gold-soft);color:var(--gold-ink);}
.done-banner .ti {font-size:1.5rem;color:var(--gold);}

/* ---------- money jar */
.bank {display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;}
.bank .lbl {font-weight:700;color:var(--muted);font-size:.95rem;display:flex;align-items:center;gap:6px;}
.bank .lbl .ti {color:var(--gold);font-size:1.2rem;}
.amt {font-size:clamp(2.6rem,12vw,3.8rem);font-weight:850;letter-spacing:-.04em;line-height:1;margin:6px 0 4px;
  font-variant-numeric:tabular-nums;color:var(--gold-ink);}
:root:not([data-theme="dark"]) .amt {background:linear-gradient(180deg,#e0a100,#b06d00);-webkit-background-clip:text;background-clip:text;color:transparent;}
@media (prefers-color-scheme:dark) {:root:not([data-theme="light"]) .amt {background:none;color:var(--gold);-webkit-text-fill-color:var(--gold);}}
.amt.bump {animation:bump .5s ease;}
@keyframes bump {40% {transform:scale(1.08);}}
.bank .sub {color:var(--muted);font-size:.9rem;}
.pile {grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 2px;}
.coin {width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:900;color:#8a5a00;
  background:radial-gradient(circle at 35% 30%,#fff3b0,#ffd54a 45%,#e6a400);box-shadow:inset 0 -2px 0 rgba(138,90,0,.35), 0 1px 2px rgba(0,0,0,.15);}
.coin.part {background:conic-gradient(#ffd54a calc(var(--p)*1turn),var(--hover) 0);color:transparent;box-shadow:none;}
.coin.new {animation:drop .5s cubic-bezier(.3,1.4,.5,1) both;}
@keyframes drop {from {transform:translateY(-18px) scale(.6);opacity:0;}}
.pile .more {align-self:center;color:var(--muted);font-weight:700;font-size:.85rem;margin-left:4px;}
.btn {display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 18px;border-radius:14px;cursor:pointer;
  border:1px solid var(--line2);background:var(--card);font-weight:700;}
.btn.primary {border:0;color:#fff;background:linear-gradient(135deg,var(--b1),var(--b2));box-shadow:0 6px 16px -8px rgba(124,58,237,.8);}
.btn.gold {border:0;color:#5a3a00;background:linear-gradient(135deg,#ffe27a,#f5b301);}
.btn.quiet {border-color:transparent;background:var(--hover);}
.btn.danger {color:var(--no);}
.btn:disabled {opacity:.45;cursor:default;}
.bank .btn {align-self:start;}

/* ---------- stat tiles */
.stats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px;}
.stat {background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:14px 12px;text-align:center;}
.stat .ic {font-size:1.6rem;line-height:1;}
.stat .n {font-size:1.6rem;font-weight:850;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums;}
.stat .k {color:var(--muted);font-size:.8rem;font-weight:650;}
.stat .s {color:var(--faint);font-size:.72rem;margin-top:2px;}
.ic.flame {color:#f97316;} .ic.star {color:var(--gold);} .ic.clock {color:var(--b1);} .ic.coins {color:#d99a00;}

/* ---------- sticker calendar */
.calh {display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.calh h2 {margin:0;}
.calh .nav {margin-left:auto;display:flex;gap:6px;}
.calh .nav button {width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer;
  display:grid;place-items:center;font-size:18px;}
.calh .nav button:disabled {opacity:.35;cursor:default;}
.wd, .grid {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;}
.wd span {text-align:center;font-size:.72rem;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;}
.grid {margin-top:6px;}
.day {aspect-ratio:1/1;border-radius:14px;border:1px solid var(--line);background:none;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;cursor:pointer;padding:2px;position:relative;min-width:0;}
.day .num {font-size:.74rem;font-weight:700;color:var(--muted);}
.day .stk {font-size:clamp(1.05rem,4.6vw,1.55rem);line-height:1;}
.day.full {background:var(--gold-soft);border-color:transparent;}
.day.full .stk {color:var(--gold);filter:drop-shadow(0 1px 1px rgba(138,90,0,.25));}
.day.part .stk {color:var(--part);}
.day.none .stk {color:var(--faint);}
.day.today {outline:2.5px solid var(--b1);outline-offset:-1px;}
.day.blank {border:0;cursor:default;}
.day.future {cursor:default;opacity:.35;}
.halfstar {position:relative;display:inline-block;width:1em;height:1em;}
.halfstar > * {position:absolute;inset:0;}
.halfstar .f {clip-path:inset(0 calc(100% - var(--p)*100%) 0 0);color:var(--gold);}
.halfstar .o {color:var(--faint);}
.legend {display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:.82rem;}
.legend span {display:inline-flex;align-items:center;gap:5px;}

/* ---------- badges */
.badges {display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;}
.badge {border-radius:18px;padding:12px 6px 10px;text-align:center;border:1px solid var(--line);}
.badge .md {width:52px;height:52px;margin:0 auto 6px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;
  background:var(--hover);color:var(--faint);}
.badge.got .md {color:#fff;background:linear-gradient(140deg,var(--gold2),var(--gold) 55%,#d98a00);box-shadow:0 6px 14px -6px rgba(217,138,0,.7);}
.badge.got.k-hours .md {background:linear-gradient(140deg,#c4a6ff,var(--b1) 55%,var(--b2));box-shadow:0 6px 14px -6px rgba(124,58,237,.7);}
.badge .n {font-weight:800;font-size:.92rem;}
.badge .k {font-size:.74rem;color:var(--muted);}
.badge:not(.got) .n {color:var(--muted);}

/* ---------- grown-ups */
details.grown > summary {list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:750;font-size:1.05rem;}
details.grown > summary::-webkit-details-marker {display:none;}
details.grown > summary .ti {color:var(--muted);}
details.grown > summary .chev {margin-left:auto;transition:transform .2s ease;}
details.grown[open] > summary .chev {transform:rotate(90deg);}
.gsec {margin-top:18px;padding-top:16px;border-top:1px solid var(--line);}
.gsec h3 {margin:0 0 10px;font-size:.98rem;display:flex;align-items:center;gap:8px;}
.gsec h3 .btn {margin-left:auto;height:36px;padding:0 12px;font-size:.88rem;}
.row {display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.93rem;}
.row:last-child {border-bottom:0;}
.row .grow {flex:1;min-width:0;}
.row .sm {color:var(--muted);font-size:.82rem;}
.row .amtc {font-weight:800;font-variant-numeric:tabular-nums;}
.row .x {width:34px;height:34px;border-radius:10px;border:0;background:none;color:var(--faint);cursor:pointer;display:grid;place-items:center;font-size:17px;}
.row .x:hover {color:var(--no);background:var(--hover);}
.pill {display:inline-block;padding:1px 8px;border-radius:99px;background:var(--b-soft);color:var(--b-ink);font-size:.75rem;font-weight:700;}
.form {display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;}
.form label {display:flex;flex-direction:column;gap:5px;font-size:.84rem;font-weight:650;color:var(--muted);min-width:0;}
.form .wide {grid-column:1/-1;}
input, select {height:44px;border-radius:12px;border:1px solid var(--line2);background:var(--bg);padding:0 12px;font-size:1rem;
  width:100%;min-width:0;-webkit-appearance:none;appearance:none;}
select {background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px;}
input:focus, select:focus {outline:2px solid var(--b1);outline-offset:0;border-color:transparent;}
.hint {color:var(--muted);font-size:.82rem;margin:8px 0 0;}
.actions {display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap;}

/* ---------- dialogs */
dialog {border:0;border-radius:26px;padding:22px;background:var(--card);color:var(--ink);width:min(460px,calc(100vw - 24px));
  box-shadow:0 30px 60px -20px rgba(30,10,60,.5);}
dialog::backdrop {background:rgba(20,10,40,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
dialog h2 {font-size:1.25rem;}
dialog .hours {margin-top:6px;}
dialog .hb {max-height:110px;border-radius:18px;}
.err {color:var(--no);font-weight:650;font-size:.9rem;margin-top:10px;min-height:1.2em;}

/* ---------- fun */
.fly {position:fixed;z-index:50;pointer-events:none;font-weight:900;color:var(--gold-ink);font-size:1.3rem;
  display:flex;align-items:center;gap:4px;animation:fly 1.1s cubic-bezier(.2,.7,.3,1) forwards;}
.fly .coin {width:28px;height:28px;}
@keyframes fly {0% {transform:translate(-50%,0) scale(.6);opacity:0;} 15% {opacity:1;transform:translate(-50%,-10px) scale(1.1);}
  100% {transform:translate(-50%,-90px) scale(1);opacity:0;}}
.confetti {position:fixed;top:-12px;z-index:60;pointer-events:none;width:10px;height:14px;border-radius:3px;
  animation:fall linear forwards;}
@keyframes fall {to {transform:translate(var(--dx),105vh) rotate(var(--r));}}
.toast {position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;
  background:var(--ink);color:var(--card);padding:12px 18px;border-radius:14px;font-weight:700;box-shadow:var(--shadow);
  animation:toast 3s ease forwards;max-width:calc(100vw - 32px);}
@keyframes toast {0% {opacity:0;transform:translate(-50%,10px);} 10%,85% {opacity:1;transform:translate(-50%,0);} 100% {opacity:0;}}
@media (prefers-reduced-motion:reduce) {*, *::before, *::after {animation:none !important;transition:none !important;}}

/* ---------- password page */
.login {max-width:400px;margin:12vh auto 0;text-align:center;padding:30px 24px;}
.login-ic {width:64px;height:64px;margin:0 auto 12px;border-radius:20px;display:grid;place-items:center;color:#fff;font-size:34px;
  background:linear-gradient(135deg,var(--b1),var(--b2));}
.login h1 {font-size:1.4rem;margin:0 0 6px;letter-spacing:-.02em;}
.login p {color:var(--muted);margin:0 0 18px;}
.login form {display:flex;flex-direction:column;gap:10px;}
.login button {height:48px;border:0;border-radius:14px;color:#fff;font-weight:750;cursor:pointer;font-size:1.05rem;
  background:linear-gradient(135deg,var(--b1),var(--b2));}
.login .login-err {color:var(--no);font-weight:650;margin:12px 0 0;}

/* ---------- phones */
@media (max-width:560px) {
  .card {padding:16px;border-radius:22px;}
  .hours {gap:8px;}
  .hb {border-radius:18px;}
  .stats {grid-template-columns:repeat(2,minmax(0,1fr));}
  .bank {grid-template-columns:1fr;}
  .bank .btn {justify-self:start;}
  .day {border-radius:10px;}
  .form {grid-template-columns:1fr;}
  .wd, .grid {gap:4px;}
}
.badge .md .ti {display:block;}
@media (min-width:561px) {.day {aspect-ratio:5/4;}}
dialog .actions {flex-wrap:nowrap;}
dialog .actions .btn {padding:0 14px;}
dialog .actions #dzero {margin-right:auto;}

/* ---------- two sides: header tools, tabs, requests */
.top .tools {margin-left:auto;display:flex;gap:8px;align-items:center;}
.top .tools .icb {margin-left:0;}
.icb.wide {width:auto;padding:0 12px;gap:6px;display:inline-flex;font-size:.88rem;font-weight:700;color:var(--b-ink);}
.icb.wide .ti {font-size:1.05rem;}
.tabs {display:flex;gap:6px;margin:0 0 14px;padding:5px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);}
.tab {flex:1;display:flex;align-items:center;justify-content:center;gap:7px;height:44px;border-radius:13px;text-decoration:none;
  color:var(--muted);font-weight:750;font-size:1rem;position:relative;}
.tab .ti {font-size:1.2rem;}
.tab.on {color:#fff;background:linear-gradient(135deg,var(--b1),var(--b2));box-shadow:0 4px 12px -6px rgba(124,58,237,.8);}
.tab .dot {min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--no);color:#fff;font-size:.72rem;display:grid;place-items:center;}
.inbox {border:2px solid var(--b1);}
.req {display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap;}
.req:first-of-type {border-top:0;}
.req .grow {flex:1;min-width:180px;}
.req .sm, .row .sm {color:var(--muted);font-size:.82rem;}
.rbtn {display:flex;gap:8px;}
.askrow {display:flex;gap:10px;flex-wrap:wrap;}
.pill.wait {background:var(--gold-soft);color:var(--gold-ink);}
.pill.yes {background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);}
.pill.nope {background:var(--hover);color:var(--muted);}
.pill {display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
textarea {width:100%;border-radius:12px;border:1px solid var(--line2);background:var(--bg);padding:10px 12px;font:inherit;font-size:1rem;color:inherit;resize:vertical;}
textarea:focus {outline:2px solid var(--b1);border-color:transparent;}

/* ---------- games */
.tip-patch {display:flex;align-items:center;gap:8px;justify-content:center;color:var(--muted);font-size:.88rem;margin:4px 0 14px;text-align:center;}
.tip-patch .ti {color:var(--b1);}
.ggrid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.gcard {display:flex;flex-direction:column;gap:6px;padding:20px 18px;border-radius:24px;text-decoration:none;color:#fff;min-height:170px;
  box-shadow:var(--shadow);transition:transform .15s ease;}
.gcard:active {transform:scale(.97);}
.gcard .gic {width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:30px;background:rgba(255,255,255,.22);}
.gcard .gname {font-size:1.3rem;font-weight:850;letter-spacing:-.02em;margin-top:auto;}
.gcard .gsub {font-size:.86rem;opacity:.9;line-height:1.3;}
.gcard.g-c4 {background:linear-gradient(140deg,#7c3aed,#4f46e5);}
.gcard.g-ttt {background:linear-gradient(140deg,#db2777,#f97316);}
.gcard.g-letters {background:linear-gradient(140deg,#0891b2,#10b981);}
.gcard.g-story {background:linear-gradient(140deg,#d97706,#e11d48);}
.gback {display:inline-flex;align-items:center;gap:4px;color:var(--b-ink);font-weight:750;text-decoration:none;margin:0 0 10px 2px;}
.game h2 {justify-content:flex-start;}
.center {text-align:center;justify-content:center;}
h2.center {justify-content:center;}
.actions.center {justify-content:center;}
.actions.spread {justify-content:space-between;}
.setup {display:flex;flex-wrap:wrap;gap:8px 14px;margin:0 0 12px;}
.chips {display:flex;gap:6px;flex-wrap:wrap;}
.chip {height:38px;padding:0 14px;border-radius:99px;border:1px solid var(--line2);background:var(--card);cursor:pointer;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;color:var(--muted);}
.chip.on {border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--b1),var(--b2));}
.score {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-radius:16px;background:var(--hover);font-weight:700;}
.score .who {display:flex;align-items:center;gap:7px;min-width:0;}
.score b {font-size:1.3rem;}
.score .ties {color:var(--muted);font-size:.85rem;}
.tok {display:inline-block;width:16px;height:16px;border-radius:50%;flex:none;vertical-align:-.15em;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);}
.gstatus {text-align:center;font-weight:800;font-size:1.15rem;margin:14px 0 12px;min-height:1.6em;display:flex;align-items:center;justify-content:center;gap:8px;}
.gstatus .ti {color:var(--gold);font-size:1.3rem;}
/* connect four */
.c4wrap {display:flex;justify-content:center;}
.c4 {position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(4px,1.4vw,8px);padding:clamp(6px,2vw,12px);
  border-radius:22px;background:linear-gradient(180deg,#5b21b6,#4c1d95);width:min(100%,520px);box-shadow:0 10px 24px -12px rgba(76,29,149,.8);}
.c4cell {aspect-ratio:1/1;border-radius:50%;background:var(--bg);box-shadow:inset 0 3px 6px rgba(0,0,0,.25);position:relative;overflow:hidden;}
.disc {position:absolute;inset:6%;border-radius:50%;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.35);}
.disc.drop {animation:c4drop calc(.12s + var(--rows) * .06s) cubic-bezier(.5,0,1,1);}
@keyframes c4drop {from {transform:translateY(calc(var(--rows) * -118%));}}
.disc.win {animation:winpulse 1s ease-in-out infinite alternate;box-shadow:0 0 0 3px #fff, 0 0 14px 4px rgba(255,255,255,.7);}
@keyframes winpulse {to {transform:scale(.86);}}
.c4cols {position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);}
.c4cols button {border:0;background:none;cursor:pointer;border-radius:14px;}
@media (hover:hover) {.c4cols button:hover {background:color-mix(in srgb,var(--turn) 22%,transparent);}}
/* tic-tac-toe */
.t3 {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,360px);margin:0 auto;}
.t3c {aspect-ratio:1/1;border-radius:22px;border:2px solid var(--line2);background:var(--b-soft);cursor:pointer;display:grid;place-items:center;
  font-size:clamp(3rem,16vw,5rem);padding:0;}
.t3c:disabled {cursor:default;}
.t3c.win {background:var(--gold-soft);border-color:var(--gold);}
.mk {display:grid;place-items:center;}
.mk .ti {stroke-width:3;}
.mk.x {color:#db2777;} .mk.o {color:#7c3aed;}
.t3c.new .mk {animation:pop .35s cubic-bezier(.3,1.6,.5,1);}
/* tiny letters */
.lhead {display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.hrt {font-size:1.5rem;color:var(--faint);} .hrt.on {color:#e11d48;}
.lscore {color:var(--muted);font-weight:700;}
.lcard {height:170px;display:grid;place-items:center;border-radius:20px;background:#fff;border:1px solid var(--line);overflow:hidden;}
.lword {color:#111;font-weight:700;letter-spacing:.02em;line-height:1;font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;}
.lchoices {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.lch {height:62px;border-radius:16px;border:2px solid var(--line2);background:var(--card);font-size:1.35rem;font-weight:800;cursor:pointer;}
.lch.right {background:color-mix(in srgb,var(--ok) 18%,var(--card));border-color:var(--ok);}
.lch.wrong {background:color-mix(in srgb,var(--no) 14%,var(--card));border-color:var(--no);animation:shake .35s;}
@keyframes shake {25% {transform:translateX(-6px);} 75% {transform:translateX(6px);}}
.lmsg {text-align:center;font-weight:750;min-height:1.5em;margin-top:12px;color:var(--b-ink);}
.big {font-size:4rem;font-weight:900;letter-spacing:-.04em;color:var(--b1);line-height:1;}
.newbest {color:var(--gold-ink);font-weight:800;display:flex;gap:6px;align-items:center;justify-content:center;}
.newbest .ti {color:var(--gold);}
/* story time */
.slist {display:flex;flex-direction:column;gap:8px;}
.sitem {display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:0 16px;border-radius:16px;
  border:1px solid var(--line2);background:var(--card);font-size:1.05rem;font-weight:750;cursor:pointer;text-align:left;}
.sdone {color:var(--gold);font-size:1.3rem;}
.shead {display:flex;align-items:flex-start;gap:10px;}
.shead h2 {flex:1;}
.ssize {display:flex;gap:6px;}
.ssize .chip {padding:0 12px;}
.sdots {display:flex;gap:5px;margin:4px 0 6px;}
.sdots i {flex:1;height:6px;border-radius:99px;background:var(--hover);}
.sdots i.done {background:var(--b1);} .sdots i.on {background:var(--gold);}
.sline {min-height:7em;display:flex;align-items:center;line-height:1.4;font-weight:600;margin:16px 0;letter-spacing:.005em;overflow-wrap:anywhere;}
@media (max-width:560px) {
  .ggrid {gap:10px;}
  .gcard {min-height:150px;padding:16px 14px;}
  .gcard .gname {font-size:1.12rem;}
  .icb.wide span {display:none;}
  .icb.wide {width:40px;padding:0;justify-content:center;}
  .t3 {gap:8px;}
}

/* ---------- flashcards */
.gcard.g-math {background:linear-gradient(140deg,#2563eb,#7c3aed);}
.gcard.g-words {background:linear-gradient(140deg,#16a34a,#0d9488);}
.mlbl {font-weight:750;font-size:.9rem;color:var(--muted);margin:16px 0 8px;}
.opchip {min-width:56px;justify-content:center;font-size:1.35rem;height:48px;}
.btn.big {height:54px;padding:0 34px;font-size:1.15rem;}
.mtop {display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-weight:700;}
.mtop > span {display:flex;align-items:center;gap:6px;}
.mright .ti {color:var(--gold);}
.fcard {margin:14px 0 8px;padding:22px 14px;border-radius:22px;background:var(--b-soft);display:flex;flex-direction:column;align-items:center;gap:10px;
  animation:cardin .3s ease;}
@keyframes cardin {from {transform:translateY(8px) scale(.98);opacity:.4;}}
.fcard.good {background:color-mix(in srgb,var(--ok) 18%,var(--card));animation:pop .4s ease;}
.fcard.bad {animation:shake .35s;}
.fcard.shown {background:var(--gold-soft);}
.prob {font-size:clamp(2.4rem,11vw,3.6rem);font-weight:850;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;text-align:center;}
.ans {min-width:3.2ch;padding:2px 14px;border-radius:16px;background:var(--card);border:2px solid var(--line2);font-size:clamp(2.2rem,10vw,3.2rem);
  font-weight:850;text-align:center;font-variant-numeric:tabular-nums;color:var(--b-ink);}
.ans.empty {color:var(--faint);}
.mmsg {text-align:center;font-weight:750;min-height:1.5em;color:var(--b-ink);margin-bottom:6px;}
.pad {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:360px;margin:0 auto;}
.pad button {height:clamp(54px,14vw,66px);border-radius:16px;border:1px solid var(--line2);background:var(--card);font-size:1.6rem;font-weight:800;
  cursor:pointer;display:grid;place-items:center;touch-action:manipulation;}
.pad button:active {transform:scale(.95);background:var(--hover);}
.pad button.ok {border:0;color:#fff;background:linear-gradient(135deg,var(--b1),var(--b2));}
.stars3 {display:flex;justify-content:center;gap:6px;font-size:2.6rem;color:var(--faint);margin:4px 0 8px;}
.stars3 .on {color:var(--gold);}
.missed {display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 6px;}
.missed span {padding:6px 12px;border-radius:12px;background:var(--hover);font-weight:650;font-size:1.05rem;}
.wcard {min-height:200px;justify-content:center;background:#fff;border:1px solid var(--line);}
.wword {color:#111;font-weight:750;line-height:1.1;text-align:center;overflow-wrap:anywhere;font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;}
.wbtns {display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:6px;}
.wbtns .btn {height:58px;padding:0 8px;font-size:1rem;}
.btn.practice {background:var(--gold-soft);color:var(--gold-ink);border-color:transparent;}
.btn.gotit {border:0;color:#fff;background:linear-gradient(135deg,#16a34a,#0d9488);}
.wlv {align-items:center;}
.wlv > span:first-child {display:flex;flex-direction:column;gap:6px;flex:1;font-weight:600;}
.wbar {display:block;height:6px;border-radius:99px;background:var(--hover);overflow:hidden;width:100%;}
.wbar i {display:block;height:100%;background:linear-gradient(90deg,#16a34a,#0d9488);}
.wm {color:var(--muted);font-weight:700;font-size:.9rem;min-width:44px;text-align:right;}
.wm .ti {color:var(--gold);font-size:1.3rem;}
@media (max-width:560px) {.wbtns .btn {font-size:.92rem;gap:4px;}}

/* ---------- quiz tac toe */
.gcard.g-qttt {background:linear-gradient(140deg,#c026d3,#2563eb);}
details.qset {border:1px solid var(--line);border-radius:16px;padding:10px 14px;margin:0 0 12px;}
details.qset > summary {cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--muted);font-weight:600;list-style:none;}
details.qset > summary::-webkit-details-marker {display:none;}
details.qset > summary b {color:var(--ink);}
details.qset[open] > summary {margin-bottom:10px;}
.qpanel {border-radius:20px;padding:14px;margin:0 0 14px;background:var(--b-soft);display:flex;flex-direction:column;gap:8px;}
.qpanel.cpu, .qpanel.good, .qpanel.bad {flex-direction:row;align-items:center;justify-content:center;font-weight:750;font-size:1.05rem;text-align:center;}
.qpanel.good {background:color-mix(in srgb,var(--ok) 16%,var(--card));color:var(--ok);}
.qpanel.bad {background:color-mix(in srgb,var(--no) 12%,var(--card));color:var(--no);}
.qwho {font-weight:750;color:var(--b-ink);text-align:center;}
.qtext {font-size:clamp(2.2rem,10vw,3.2rem);font-weight:850;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.qpanel .fcard {margin:0;}
.t3.placing .t3c:not(:disabled) {border-color:var(--b1);border-style:dashed;animation:glow 1.2s ease-in-out infinite alternate;}
@keyframes glow {to {background:color-mix(in srgb,var(--b1) 16%,var(--b-soft));}}
.t3c:disabled:not(.win) {opacity:1;}

/* ---------- story maker card (the app itself lives at /stories: storybook/static/story.css) */
.gcard.wide {grid-column:1/-1;min-height:150px;position:relative;}
.gcard.g-write {background:linear-gradient(140deg,#f43f5e,#a855f7 55%,#6366f1);}
.gcard .idea {position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:99px;
  background:rgba(255,255,255,.95);color:#9d174d;font-weight:800;font-size:.82rem;}
.gcard .idea .ti {color:#f5b301;}
.grow {flex:1;}
a.btn {text-decoration:none;color:inherit;}
a.btn.primary {color:#fff;}
/* ---------- the games page: two groups (shared with /play) */
.ggroup {margin:0 0 22px;}
.gh {display:flex;align-items:center;gap:8px;font-size:1.25rem;margin:6px 2px 2px;}
.gh .ti {color:var(--gold);}
.ggroup:nth-of-type(2) .gh .ti {color:var(--b1);}
.gsubh {margin:0 2px 12px;}

/* ======================================================================== 📖 Story Maker (on top of patch/static/app.css) */
.shelf {display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.bk {display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left;font:inherit;}
.bkcover {aspect-ratio:3/4;border-radius:6px 16px 16px 6px;background:linear-gradient(140deg,#c4b5fd,#f9a8d4);display:grid;place-items:center;overflow:hidden;
  font-size:2.6rem;color:#fff;box-shadow:inset 6px 0 0 rgba(0,0,0,.12), var(--shadow);position:relative;}
.bkcover img {width:100%;height:100%;object-fit:cover;}
.bk.new .bkcover {background:var(--b-soft);color:var(--b1);border:2.5px dashed var(--line2);box-shadow:none;}
.bkt {font-weight:800;font-size:1.02rem;line-height:1.2;margin-top:4px;overflow-wrap:anywhere;}
.bks {color:var(--muted);font-size:.8rem;}
.btitle {font-size:1.5rem;font-weight:850;height:54px;border-radius:14px;letter-spacing:-.02em;}
.pbar {display:flex;align-items:center;gap:8px;margin:12px 0 10px;}
.pbar .chip:disabled {opacity:.35;cursor:default;}
.pnum {font-weight:800;}
.ptext {min-height:240px;line-height:1.5;padding:14px 16px;border-radius:18px;background:#fff;color:#1f1535;font-family:var(--font);}
.pmeta {display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.84rem;margin:6px 2px 14px;}
.saved {display:inline-flex;align-items:center;gap:4px;font-weight:700;}
.saved .ti {color:var(--ok);}
.ppic img {display:block;width:100%;border-radius:18px;border:1px solid var(--line);background:#fff;}
.ppic .actions {margin-top:8px;}
.drawbig {display:flex;align-items:center;justify-content:center;gap:10px;height:110px;border-radius:20px;border:2.5px dashed var(--b1);
  background:var(--b-soft);color:var(--b-ink);font-weight:800;font-size:1.15rem;text-decoration:none;}
.drawbig .ti {font-size:1.6rem;}
.wfoot {display:flex;justify-content:space-between;gap:10px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);}
.linkbtn {background:none;border:0;color:var(--faint);font-weight:650;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:4px;font-size:.86rem;}
.linkbtn:hover {color:var(--no);}
.linkbtn:disabled {opacity:.4;cursor:default;}
.cvwrap {border-radius:18px;overflow:hidden;border:1px solid var(--line2);box-shadow:var(--shadow);background:#fff;}
#cv {display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;}
.dtools {display:flex;flex-direction:column;gap:10px;margin:12px 0 4px;}
.swatches {display:flex;flex-wrap:wrap;gap:8px;}
.sw {width:40px;height:40px;border-radius:50%;border:3px solid var(--card);box-shadow:0 0 0 1px var(--line2);cursor:pointer;padding:0;}
.sw.on {box-shadow:0 0 0 3px var(--b1);transform:scale(1.08);}
.dsizes {display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.dz {width:44px;height:40px;border-radius:12px;border:1px solid var(--line2);background:var(--card);display:grid;place-items:center;cursor:pointer;}
.dz i {display:block;border-radius:50%;box-shadow:0 0 0 1px var(--line2);}
.dz.on {border:2px solid var(--b1);}
.rbook {padding-bottom:16px;}
.rtop {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.rpage {min-height:52vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:18px;border-radius:22px;
  background:#fffdf7;color:#1f1535;border:1px solid var(--line);box-shadow:inset 0 0 40px rgba(180,140,60,.08);position:relative;}
.rpic {width:100%;max-width:640px;border-radius:14px;border:1px solid rgba(0,0,0,.08);}
.rtext {margin:0;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;width:100%;max-width:640px;font-weight:550;}
.rnum {position:absolute;bottom:8px;right:14px;color:#9a8f7a;font-weight:700;font-size:.9rem;}
.rcover {display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;}
.rcover img {width:min(100%,520px);border-radius:12px;}
.rcic {font-size:4rem;color:#a855f7;}
.rtitle {font-size:clamp(1.8rem,7vw,2.8rem);font-weight:900;letter-spacing:-.02em;text-align:center;}
.rby {color:#7c6f5a;font-weight:700;font-size:1.1rem;}
.rend {text-align:center;}
@media (max-width:560px) {.shelf {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} .sw {width:36px;height:36px;} .ptext {min-height:200px;}}
.bkcover:has(img) {background:#fff;border:1px solid var(--line);}
.bkcover img {object-fit:contain;}
.shelf {margin-top:12px;}

/* ---------- header + people */
.mark.story {background:linear-gradient(135deg,#f43f5e,#a855f7);text-decoration:none;}
.login-ic.story {background:linear-gradient(135deg,#f43f5e,#a855f7);}
.whobtn {text-decoration:none;}
.av {display:inline-grid;place-items:center;border-radius:50%;color:#fff;flex:none;width:30px;height:30px;font-size:17px;}
.av.sm {width:24px;height:24px;font-size:14px;}
.av.lg {width:84px;height:84px;font-size:44px;box-shadow:0 8px 18px -8px rgba(0,0,0,.4);}
.av.add {background:var(--b-soft);color:var(--b1);border:2.5px dashed var(--line2);box-shadow:none;}
.people {display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;}
.person {position:relative;}
.person .pick {width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 8px 14px;border-radius:22px;
  border:2px solid var(--line);background:var(--card);cursor:pointer;}
.person.on .pick {border-color:var(--b1);box-shadow:0 0 0 3px color-mix(in srgb,var(--b1) 25%,transparent);}
.person .pn {font-weight:800;font-size:1.1rem;}
.person .pedit {position:absolute;top:6px;right:6px;}
.flabel {display:flex;flex-direction:column;gap:6px;font-weight:700;color:var(--muted);font-size:.88rem;margin:12px 0 6px;}
.icons {display:grid;grid-template-columns:repeat(8,1fr);gap:6px;}
.ip {aspect-ratio:1/1;border-radius:12px;border:1px solid var(--line2);background:var(--card);display:grid;place-items:center;font-size:1.3rem;cursor:pointer;color:var(--muted);}
.ip.on {background:var(--pc);color:#fff;border-color:transparent;}

/* ---------- covers */
.cover {--bc:#7c3aed;position:relative;aspect-ratio:3/4;border-radius:6px 16px 16px 6px;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:2px;padding:10px 10px 12px 18px;color:#fff;text-align:center;
  background:linear-gradient(160deg,color-mix(in srgb,var(--bc) 82%,#fff),var(--bc) 60%,color-mix(in srgb,var(--bc) 75%,#000));
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.12);}
.cover .spine {position:absolute;left:0;top:0;bottom:0;width:9px;background:rgba(0,0,0,.18);box-shadow:1px 0 0 rgba(255,255,255,.25);}
.cover img {position:absolute;left:18px;right:10px;top:10px;width:calc(100% - 28px);height:58%;object-fit:contain;background:#fff;border-radius:8px;}
.cover .cic {position:absolute;top:22%;left:50%;transform:translateX(-50%);font-size:2.6rem;opacity:.85;}
.cover .ct {font-weight:900;font-size:1rem;line-height:1.15;letter-spacing:-.01em;overflow-wrap:anywhere;text-shadow:0 1px 2px rgba(0,0,0,.25);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.cover .ca {font-size:.75rem;opacity:.9;font-weight:650;}
.cover.add {--bc:#e9e3fb;background:var(--b-soft);color:var(--b1);border:2.5px dashed var(--line2);box-shadow:none;justify-content:center;}
.cover.add .cic {position:static;transform:none;font-size:2.6rem;}
.cover.add .spine {display:none;}
.cover.lg {width:min(100%,360px);margin:0 auto;padding:16px 16px 22px 30px;border-radius:10px 24px 24px 10px;}
.cover.lg .spine {width:16px;}
.cover.lg img {left:30px;right:16px;top:16px;width:calc(100% - 46px);height:60%;border-radius:12px;}
.cover.lg .cic {font-size:5rem;}
.cover.lg .ct {font-size:clamp(1.4rem,6vw,2rem);-webkit-line-clamp:4;}
.cover.lg .ca {font-size:1.05rem;margin-top:4px;}
.bk .cover {width:100%;}
.cedit {display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:20px;align-items:start;margin-top:6px;}
.cform .flabel:first-child {margin-top:0;}
.cform .saved {margin-top:12px;color:var(--muted);}
.btop {display:flex;align-items:center;gap:8px;color:var(--muted);}
.minicov {width:14px;height:18px;border-radius:2px 5px 5px 2px;background:var(--bc);flex:none;}
.rcover {width:100%;}
@media (max-width:560px) {.cedit {grid-template-columns:1fr;} .cedit .cover.lg {width:min(100%,260px);} .people {grid-template-columns:repeat(2,minmax(0,1fr));}
  .icb.whobtn span:not(.av) {display:none;} .icb.whobtn {width:40px;padding:0;justify-content:center;}}
@media (max-width:560px) {.icb.whobtn span.av {display:inline-grid;}}

/* ---------- PINs */
.plock {display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:700;color:var(--muted);background:var(--hover);
  padding:2px 9px;border-radius:99px;margin-top:-4px;}
.person .preset {width:100%;height:36px;margin-top:6px;font-size:.85rem;}
.pinbox {display:flex;flex-direction:column;align-items:center;gap:6px;}
.pinbox h2 {margin:8px 0 4px;}
.pindots {display:flex;gap:12px;margin:6px 0 2px;min-height:22px;}
.pindots i {width:18px;height:18px;border-radius:50%;border:2.5px solid var(--b1);}
.pindots i.on {background:var(--b1);}
.pindots.shake {animation:shake .35s;}
.pinpad {width:100%;max-width:300px;margin-top:6px;}
.err.center {text-align:center;}
.chk {display:flex;align-items:center;gap:8px;font-weight:650;color:var(--muted);margin:4px 0 6px;}
.chk input {-webkit-appearance:checkbox;appearance:auto;width:20px;height:20px;padding:0;}
.person .pedit {width:34px;height:34px;border-radius:10px;border:0;background:var(--hover);display:grid;place-items:center;color:var(--muted);cursor:pointer;font-size:16px;}

/* ---------- my books / library tabs */
.tabs .tab {text-decoration:none;}
.av.xs {width:20px;height:20px;font-size:12px;}
.libchips {margin:0 0 14px;}
.libchips .chip {text-decoration:none;gap:6px;}
.chip .cnt {font-size:.78rem;opacity:.75;font-weight:700;}
.libteaser {display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;}
.libteaser .lt-ic {width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:24px;color:#fff;flex:none;
  background:linear-gradient(135deg,#0ea5e9,#6366f1);}
.libteaser .lt-t {flex:1;display:flex;flex-direction:column;gap:2px;}
.libteaser .lt-t .hint {margin:0;}
.libteaser > .ti {color:var(--muted);font-size:1.3rem;}

/* ---------- cover picture: the same 4:3 shape as the drawing paper, so a picture fills it edge to edge */
.cover img {height:auto;aspect-ratio:4/3;object-fit:cover;}
.cover.lg img {height:auto;aspect-ratio:4/3;}

/* ---------- drawing tools */
.dtoolbar {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0 0 10px;}
.dt {display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border-radius:14px;border:1px solid var(--line2);
  background:var(--card);cursor:pointer;font-size:.78rem;font-weight:700;color:var(--muted);}
.dt .ti {font-size:1.5rem;}
.dt.on {border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--b1),var(--b2));}
.stamps {display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px;margin:10px 0 0;padding:8px;border-radius:16px;background:var(--hover);}
.stamps[hidden] {display:none;}
.st {aspect-ratio:1/1;border-radius:12px;border:2px solid transparent;background:var(--card);display:grid;place-items:center;font-size:1.6rem;cursor:pointer;}
.st.on {border-color:var(--b1);box-shadow:0 0 0 2px color-mix(in srgb,var(--b1) 25%,transparent);}
.sw[data-c="#ffffff"] {box-shadow:0 0 0 1px var(--line2), inset 0 0 0 1px rgba(0,0,0,.12);}
.dsizes .chip {gap:5px;}
@media (max-width:560px) {.dt span {font-size:.68rem;} .dt .ti {font-size:1.3rem;}}