/* ═══════════════════════════════════════════════════════════
   CreativeWink — Design System v2
   "Sticker notebook": warm paper, ink outlines, hard shadows.
   ═══════════════════════════════════════════════════════════ */
:root{
  --paper:#FFF8EC; --paper-2:#FFF1DA; --card:#FFFFFF; --ink:#1D1842; --ink-2:#55507A; --ink-3:#8A86A8;
  --line:#1D1842; --soft-line:rgba(29,24,66,.14);
  --brand:#6A2BD9; --brand-2:#8E5CF7; --brand-soft:#EFE7FF;
  --sun:#FFC53D; --sun-soft:#FFF3CC; --coral:#FF6A57; --coral-soft:#FFE4DF;
  --mint:#22B892; --mint-soft:#D8F6EC; --sky:#3B9DFF; --sky-soft:#DDEEFF;
  --pink:#FF73B3; --pink-soft:#FFE3F0; --leaf:#7BC74D;
  --ok:#159F6E; --bad:#E0412E;
  --r-lg:22px; --r:16px; --r-sm:11px;
  --sh:4px 4px 0 var(--line); --sh-lg:6px 6px 0 var(--line); --sh-sm:2px 2px 0 var(--line);
  --f-display:'Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --f-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --maxw:1200px; color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#15122E; --paper-2:#1C1840; --card:#221E4A; --ink:#F4F1FF; --ink-2:#C2BDE6; --ink-3:#8E89B8;
  --line:#5A5299; --soft-line:rgba(244,241,255,.14);
  --brand:#8B5CF6; --brand-2:#A27BFF; --brand-soft:#2E2766;
  --sun-soft:#3A3220; --coral-soft:#3D2230; --mint-soft:#163A36; --sky-soft:#18304F; --pink-soft:#3B2142;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15122E; --paper-2:#1C1840; --card:#221E4A; --ink:#F4F1FF; --ink-2:#C2BDE6; --ink-3:#8E89B8;
    --line:#5A5299; --soft-line:rgba(244,241,255,.14);
    --brand:#8B5CF6; --brand-2:#A27BFF; --brand-soft:#2E2766;
    --sun-soft:#3A3220; --coral-soft:#3D2230; --mint-soft:#163A36; --sky-soft:#18304F; --pink-soft:#3B2142;
    color-scheme:dark;
  }
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);background:var(--paper);color:var(--ink);line-height:1.65;font-size:16px;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:radial-gradient(var(--soft-line) 1px,transparent 1px);background-size:22px 22px;opacity:.55}
main{flex:1}
img,svg,canvas{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.15;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem)} h2{font-size:clamp(1.6rem,3.4vw,2.4rem)} h3{font-size:1.25rem}
p{max-width:70ch}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:6px}
::selection{background:var(--sun);color:#1D1842}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 16px}
@media(min-width:720px){.wrap{padding:0 28px}}
.section{padding:56px 0}
.section-sm{padding:32px 0}
.center{text-align:center} .center p,p.center{margin-left:auto;margin-right:auto}
.muted{color:var(--ink-2)} .tiny{font-size:.82rem} .small{font-size:.92rem}
.stack>*+*{margin-top:12px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row-between{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
.g6{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:28px}.mt-4{margin-top:44px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:28px}
.hide{display:none!important}

/* ── Eyebrow / headings ── */
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--sun);color:#1D1842;border:2px solid var(--line);border-radius:999px;padding:3px 12px;box-shadow:var(--sh-sm);transform:rotate(-1.5deg)}
.sec-head{margin-bottom:28px}
.sec-head h2{margin-top:12px}
.sec-head p{color:var(--ink-2);margin-top:8px}
.scribble{position:relative;white-space:nowrap}
.scribble::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.02em;height:.36em;background:var(--sun);z-index:-1;border-radius:6px;transform:rotate(-1deg)}
.hl-brand{color:var(--brand)}

/* ── Buttons ── */
.btn{--b:var(--card);--c:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  background:var(--b);color:var(--c);border:2px solid var(--line);border-radius:999px;padding:10px 20px;font-weight:800;font-size:.97rem;
  box-shadow:var(--sh);transition:transform .12s,box-shadow .12s,background .2s;text-decoration:none!important;white-space:nowrap;line-height:1.2;min-height:44px}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--line)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--line)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn-primary{--b:var(--brand);--c:#fff}
.btn-sun{--b:var(--sun);--c:#1D1842}
.btn-mint{--b:var(--mint);--c:#fff}
.btn-coral{--b:var(--coral);--c:#fff}
.btn-sky{--b:var(--sky);--c:#fff}
.btn-ghost{--b:transparent;box-shadow:none;border-color:var(--soft-line)}
.btn-ghost:hover{box-shadow:none;border-color:var(--line)}
.btn-sm{padding:6px 14px;font-size:.86rem;min-height:36px;box-shadow:var(--sh-sm)}
.btn-lg{padding:14px 28px;font-size:1.08rem}
.btn-block{width:100%}
.icon-btn{width:42px;height:42px;display:inline-grid;place-items:center;border:2px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;box-shadow:var(--sh-sm);font-size:1.15rem}
.icon-btn:active{transform:translate(2px,2px);box-shadow:none}

/* ── Cards ── */
.card{background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);padding:22px}
.card-flat{background:var(--card);border:2px solid var(--soft-line);border-radius:var(--r-lg);padding:20px}
.tool-card{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:18px;color:var(--ink);text-decoration:none!important;transition:transform .15s,box-shadow .15s;cursor:pointer;text-align:left;width:100%}
.tool-card:hover{transform:translate(-2px,-3px) rotate(-.4deg);box-shadow:7px 8px 0 var(--line)}
.tool-card .tc-icon{width:58px;height:58px;border:2px solid var(--line);border-radius:16px;display:grid;place-items:center;font-size:1.9rem;background:var(--tint,var(--brand-soft))}
.tool-card h3{font-size:1.15rem}
.tool-card p{color:var(--ink-2);font-size:.92rem;line-height:1.5}
.tool-card .tc-foot{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.t-sun{--tint:var(--sun-soft)} .t-coral{--tint:var(--coral-soft)} .t-mint{--tint:var(--mint-soft)} .t-sky{--tint:var(--sky-soft)} .t-pink{--tint:var(--pink-soft)} .t-brand{--tint:var(--brand-soft)}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:.76rem;font-weight:800;padding:2px 10px;border-radius:999px;border:1.5px solid var(--soft-line);background:var(--paper);color:var(--ink-2);white-space:nowrap}
.chip-plus{background:linear-gradient(90deg,#FFD25C,#FFB13D);color:#3A2600;border-color:#1D1842}
.chip-new{background:var(--mint);color:#fff;border-color:var(--line)}
.ribbon{position:absolute;top:12px;right:12px}

/* ── Header ── */
.cw-header{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:2px solid var(--line)}
.cw-header .bar{display:flex;align-items:center;gap:10px;height:66px}
.logo{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none!important;flex-shrink:0}
.logo svg{width:40px;height:40px}
.logo b{font-family:var(--f-display);font-size:1.45rem;letter-spacing:-.02em;line-height:1}
.logo b span{color:var(--brand)}
.nav{display:none;margin-left:14px;gap:2px;align-items:center}
.nav>li{list-style:none;position:relative}
.nav>li>a,.nav>li>button{display:flex;align-items:center;gap:5px;padding:8px 12px;border-radius:12px;font-weight:800;color:var(--ink);background:none;border:none;cursor:pointer;font-size:.97rem;text-decoration:none}
.nav>li>a:hover,.nav>li>button:hover,.nav>li.open>button{background:var(--brand-soft)}
.nav>li>a[aria-current="page"]{background:var(--sun-soft)}
.dd{position:absolute;top:calc(100% + 8px);left:-8px;min-width:290px;background:var(--card);border:2px solid var(--line);border-radius:18px;box-shadow:var(--sh-lg);padding:8px;display:none}
.nav>li.open .dd{display:grid}
.dd a{display:flex;gap:11px;align-items:center;padding:8px 10px;border-radius:12px;color:var(--ink);text-decoration:none!important}
.dd a:hover{background:var(--paper-2)}
.dd a .e{font-size:1.35rem;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--paper-2);flex-shrink:0}
.dd a b{display:block;font-size:.95rem}
.dd a small{display:block;color:var(--ink-3);font-size:.78rem;line-height:1.3}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.xp-pill{display:none;align-items:center;gap:7px;border:2px solid var(--line);border-radius:999px;padding:4px 12px 4px 5px;background:var(--card);font-weight:800;font-size:.85rem;color:var(--ink);text-decoration:none!important;box-shadow:var(--sh-sm)}
.xp-pill .lv{background:var(--brand);color:#fff;border-radius:999px;padding:1px 8px;font-size:.75rem}
.burger{display:inline-grid}
@media(min-width:1040px){.nav{display:flex}.burger{display:none}.xp-pill{display:inline-flex}}
@media(min-width:560px){.xp-pill{display:inline-flex}}
.hdr-plus{display:none}
@media(min-width:760px){.hdr-plus{display:inline-flex}}
/* drawer */
.drawer{position:fixed;inset:0;z-index:120;display:none}
.drawer.open{display:block}
.drawer .scrim{position:absolute;inset:0;background:rgba(20,16,50,.5)}
.drawer .panel{position:absolute;right:0;top:0;bottom:0;width:min(88vw,360px);background:var(--paper);border-left:2px solid var(--line);overflow-y:auto;padding:18px 16px 40px}
.drawer h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:18px 6px 6px}
.drawer a{display:flex;gap:10px;align-items:center;padding:9px 8px;border-radius:12px;color:var(--ink);font-weight:700;text-decoration:none!important}
.drawer a:hover{background:var(--paper-2)}

/* ── Hero ── */
.hero{padding:48px 0 30px;position:relative}
.hero-grid{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero h1 .wave{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(14deg)}20%{transform:rotate(-8deg)}}
.hero p.lead{font-size:1.15rem;color:var(--ink-2);margin-top:16px}
.hero .cta{margin-top:26px}
.hero-art{position:relative;min-height:330px}
.sticker{position:absolute;background:var(--card);border:2px solid var(--line);border-radius:20px;box-shadow:var(--sh);padding:14px 16px;font-weight:800}
.float{animation:float 6s ease-in-out infinite}
.float.d2{animation-delay:-2s}.float.d3{animation-delay:-4s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.page-hero{padding:40px 0 18px}
.page-hero h1{font-size:clamp(1.9rem,4.4vw,3rem)}
.page-hero p{color:var(--ink-2);font-size:1.07rem;margin-top:10px}
.crumbs{font-size:.85rem;color:var(--ink-3);margin-bottom:12px}
.crumbs a{color:var(--ink-2)}

/* ── Streams / age bands ── */
.stream{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px;border:2px solid var(--line);border-radius:var(--r-lg);background:var(--tint,var(--card));box-shadow:var(--sh);color:var(--ink);text-decoration:none!important;transition:transform .15s}
.stream:hover{transform:translateY(-3px) rotate(.6deg)}
.stream .e{font-size:2.2rem}
.stream b{font-family:var(--f-display);font-size:1.15rem}
.stream small{color:var(--ink-2);line-height:1.35}

/* ── Forms ── */
label{font-weight:800;font-size:.9rem;display:block;margin-bottom:5px}
.input,select.input,textarea.input{width:100%;padding:11px 14px;border:2px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font-size:1rem;min-height:44px}
textarea.input{resize:vertical;min-height:120px;line-height:1.6}
.input:focus{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 30%,transparent)}
.field+.field{margin-top:14px}
.seg{display:inline-flex;flex-wrap:wrap;border:2px solid var(--line);border-radius:999px;background:var(--card);padding:3px;gap:2px;box-shadow:var(--sh-sm)}
.seg button{border:none;background:none;padding:7px 14px;border-radius:999px;font-weight:800;cursor:pointer;color:var(--ink-2);font-size:.9rem;min-height:36px}
.seg button.on,.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.tab{border:2px solid var(--line);background:var(--card);padding:8px 16px;border-radius:999px;font-weight:800;cursor:pointer;font-size:.93rem;box-shadow:var(--sh-sm);min-height:40px}
.tab.on,.tab[aria-selected="true"]{background:var(--brand);color:#fff}
.search{position:relative;max-width:420px;width:100%}
.search input{padding-left:42px}
.search::before{content:"🔎";position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:1rem}

/* ── Progress / stats ── */
.bar-track{height:14px;border:2px solid var(--line);border-radius:999px;background:var(--paper-2);overflow:hidden}
.bar-fill{height:100%;background:repeating-linear-gradient(45deg,var(--brand) 0 10px,var(--brand-2) 10px 20px);border-radius:999px;transition:width .4s}
.stat{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-sm)}
.stat b{display:block;font-family:var(--f-display);font-size:1.8rem;line-height:1.1}
.stat span{color:var(--ink-2);font-size:.85rem;font-weight:700}

/* ── Player area (games/quizzes) ── */
.stage{background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:clamp(16px,3vw,30px);position:relative}
.stage-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--paper-2);border:2px solid var(--line);border-radius:999px;padding:4px 12px;font-weight:800;font-size:.88rem}
.opts{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:640px){.opts{grid-template-columns:1fr 1fr}}
.opt{display:flex;gap:12px;align-items:center;text-align:left;width:100%;cursor:pointer;background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:12px 14px;font-weight:700;box-shadow:var(--sh-sm);transition:transform .1s;min-height:54px;font-size:1rem}
.opt:hover{background:var(--paper-2)}
.opt .k{width:30px;height:30px;flex-shrink:0;border-radius:9px;border:2px solid var(--line);display:grid;place-items:center;font-weight:900;font-size:.85rem;background:var(--sun-soft)}
.opt.right{background:var(--mint-soft);border-color:var(--ok)}
.opt.right .k{background:var(--ok);color:#fff}
.opt.wrong{background:var(--coral-soft);border-color:var(--bad);animation:shake .35s}
.opt.wrong .k{background:var(--bad);color:#fff}
.opt[disabled]{cursor:default}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.explain{margin-top:14px;padding:14px 16px;border-radius:var(--r);border:2px dashed var(--line);background:var(--sky-soft);font-size:.95rem}
.q-text{font-family:var(--f-display);font-size:clamp(1.25rem,2.6vw,1.65rem);line-height:1.3;margin-bottom:18px;font-weight:700}
.big-num{font-family:var(--f-display);font-size:clamp(2.4rem,8vw,4rem);font-weight:800;line-height:1}
.result{text-align:center;padding:10px 0}
.result .emoji{font-size:4rem;line-height:1}

/* ── Modal ── */
.modal{position:fixed;inset:0;z-index:150;display:none;align-items:flex-start;justify-content:center;padding:4vh 12px;overflow-y:auto}
.modal.open{display:flex}
.modal .scrim{position:fixed;inset:0;background:rgba(20,16,50,.55)}
.modal .box{position:relative;width:100%;max-width:820px;background:var(--paper);border:2px solid var(--line);border-radius:26px;box-shadow:8px 8px 0 var(--line);padding:clamp(18px,3vw,30px);animation:pop .22s ease-out}
.modal .box.narrow{max-width:520px}
.modal .x{position:absolute;top:12px;right:12px}
@keyframes pop{from{transform:scale(.94) translateY(8px);opacity:0}}

/* ── Toast & confetti ── */
.toasts{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:200;display:grid;gap:8px;width:min(92vw,420px);pointer-events:none}
.toast{background:var(--ink);color:var(--paper);border:2px solid var(--line);border-radius:16px;padding:11px 16px;font-weight:800;box-shadow:var(--sh);animation:pop .25s;display:flex;gap:10px;align-items:center}
.toast.xp{background:var(--sun);color:#1D1842}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:190}

/* ── Plus / RRM ── */
.plus-gate{position:relative;margin:24px 0;padding:28px;border:2px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(135deg,var(--sun-soft),var(--brand-soft));box-shadow:var(--sh-lg);text-align:center}
.plus-gate .e{font-size:3rem}
.plus-gate h2{font-size:1.7rem;margin:6px 0}
.plus-gate p{margin:0 auto 16px;color:var(--ink-2)}
.cw-locked .cw-plus-content{display:none}
.plus-list{list-style:none;display:grid;gap:8px;text-align:left;max-width:420px;margin:14px auto}
.plus-list li::before{content:"✦ ";color:var(--brand);font-weight:900}
button[swg-standard-button]{min-height:44px}
.rrm-note{font-size:.8rem;color:var(--ink-3);margin-top:10px}
.lock-tag{font-size:.75rem}

/* ── Footer ── */
.cw-footer{margin-top:60px;border-top:2px solid var(--line);background:var(--paper-2);padding:40px 0 26px}
.f-grid{display:grid;gap:26px;grid-template-columns:1fr 1fr}
@media(min-width:900px){.f-grid{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}}
.f-brand{grid-column:1/-1}
@media(min-width:900px){.f-brand{grid-column:auto}}
.cw-footer h4{font-size:.95rem;margin-bottom:10px}
.cw-footer ul{list-style:none;display:grid;gap:6px}
.cw-footer a{color:var(--ink-2);font-weight:600;font-size:.93rem}
.f-bottom{margin-top:30px;padding-top:16px;border-top:1.5px dashed var(--soft-line);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.85rem;color:var(--ink-3)}

/* ── Misc ── */
.kbd{font-family:var(--f-mono);font-size:.85em;border:1.5px solid var(--line);border-bottom-width:3px;border-radius:6px;padding:0 6px;background:var(--card)}
.divider{height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px);opacity:.25;margin:28px 0}
.note{border:2px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--sun-soft)}
.prose h2{font-size:1.5rem;margin:28px 0 10px}
.prose h3{margin:20px 0 8px}
.prose p,.prose li{color:var(--ink-2);margin-bottom:10px}
.prose ul,.prose ol{padding-left:22px}
.faq details{border:2px solid var(--line);border-radius:var(--r);background:var(--card);padding:14px 18px;box-shadow:var(--sh-sm)}
.faq details+details{margin-top:12px}
.faq summary{font-weight:800;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::after{content:"＋";font-weight:900}
.faq details[open] summary::after{content:"－"}
.faq details p{margin-top:10px;color:var(--ink-2)}
.marquee{overflow:hidden;border-block:2px solid var(--line);background:var(--brand);color:#fff;padding:10px 0;font-family:var(--f-display);font-weight:800;font-size:1.15rem}
.marquee .track{display:flex;gap:40px;width:max-content;animation:scroll 40s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}
.empty{padding:30px;text-align:center;color:var(--ink-3);border:2px dashed var(--soft-line);border-radius:var(--r-lg)}
.badge-tile{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:14px 8px;border:2px solid var(--line);border-radius:var(--r);background:var(--card)}
.badge-tile .e{font-size:2rem}
.badge-tile.locked{opacity:.38;filter:grayscale(1);border-style:dashed}
.badge-tile b{font-size:.85rem;line-height:1.2}
.badge-tile small{font-size:.72rem;color:var(--ink-3);line-height:1.25}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px;border:2px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--sh-sm)}
.swatch{width:30px;height:30px;border-radius:9px;border:2px solid var(--line);cursor:pointer;flex-shrink:0}
.swatch.on{outline:3px solid var(--sky);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.cw-header,.cw-footer,.no-print,.toasts{display:none!important}body::before{display:none}}
.panel .seg{display:flex;width:100%}
.panel .seg button{flex:1;padding:7px 6px}