/* Bead — shared tokens and components. Warm clay palette, light and dark. */
:root{
  --bg:#F3ECE0; --surface:#F8F2E8; --surface-2:#E8DDCB;
  --fg:#2B2320; --muted:#6B5D54;
  --accent:#A64622; --accent-mid:#DC9068; --accent-soft:#EBC9B2; --on-accent:#FFFFFF;
  --clay-sand:#E6D5BC; --clay-terra:#C9623A; --clay-ochre:#E2A94B; --clay-rose:#DDA79C; --clay-slate:#8EA3B5; --clay-umber:#5C3D2E;
  --sh-d:rgba(122,88,56,.30); --sh-l:rgba(255,255,255,.85);
  --in-l:rgba(255,255,255,.70); --in-d:rgba(122,88,56,.22);
  --cf-s:40%; --cf-l:84%; --cd-l:30%;
  --font-display:Fredoka,"Trebuchet MS",system-ui,sans-serif;
  --font-body:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1D1815; --surface:#27201C; --surface-2:#171210;
  --fg:#F3EADC; --muted:#B8A99A;
  --accent:#E59B73; --accent-mid:#8E5238; --accent-soft:#4C3022; --on-accent:#2A140B;
  --clay-sand:#4A3D31; --clay-terra:#D77A53; --clay-ochre:#E2A94B; --clay-rose:#B77C74; --clay-slate:#6E8396; --clay-umber:#F3EADC;
  --sh-d:rgba(0,0,0,.60); --sh-l:rgba(255,232,205,.05);
  --in-l:rgba(255,232,205,.07); --in-d:rgba(0,0,0,.42);
  --cf-s:24%; --cf-l:27%; --cd-l:82%; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1D1815; --surface:#27201C; --surface-2:#171210;
  --fg:#F3EADC; --muted:#B8A99A;
  --accent:#E59B73; --accent-mid:#8E5238; --accent-soft:#4C3022; --on-accent:#2A140B;
  --clay-sand:#4A3D31; --clay-terra:#D77A53; --clay-ochre:#E2A94B; --clay-rose:#B77C74; --clay-slate:#6E8396; --clay-umber:#F3EADC;
  --sh-d:rgba(0,0,0,.60); --sh-l:rgba(255,232,205,.05);
  --in-l:rgba(255,232,205,.07); --in-d:rgba(0,0,0,.42);
  --cf-s:24%; --cf-l:27%; --cd-l:82%; color-scheme:dark}

[hidden]{display:none!important}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 var(--font-body);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:600;text-wrap:balance}
a{color:inherit}
img,svg{max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:999px;z-index:100;font-weight:700}
.skip:focus{left:16px}

.clay{background:var(--surface);border-radius:28px;
  box-shadow:9px 9px 22px var(--sh-d),-7px -7px 18px var(--sh-l),inset 2px 2px 5px var(--in-l),inset -3px -3px 7px var(--in-d)}
.well{background:var(--surface-2);border-radius:20px;
  box-shadow:inset 5px 5px 11px var(--in-d),inset -5px -5px 10px var(--in-l)}
.pad{padding:22px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.muted{color:var(--muted)}
.small{font-size:14px}
.xs{font-size:12.5px;letter-spacing:.02em}
.label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.btn{min-height:46px;padding:0 20px;border-radius:999px;background:var(--surface);font-weight:600;text-decoration:none;color:var(--fg);
  box-shadow:5px 5px 12px var(--sh-d),-4px -4px 10px var(--sh-l),inset 1px 1px 3px var(--in-l);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s,box-shadow .12s}
.btn:active,.btn[aria-pressed="true"]{box-shadow:inset 4px 4px 9px var(--in-d),inset -4px -4px 8px var(--in-l);transform:scale(.985)}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:active{box-shadow:inset 4px 4px 9px rgba(0,0,0,.28),inset -3px -3px 7px rgba(255,255,255,.18)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.sm{min-height:40px;padding:0 14px;font-size:14px}
.btn.big{min-height:56px;padding:0 30px;font-size:18px}
.btn.icon{width:46px;padding:0}

.field{display:flex;flex-direction:column;gap:6px}
.field input,.field select,.field textarea,.sel{min-height:48px;border-radius:16px;border:0;padding:0 16px;background:var(--surface-2);
  box-shadow:inset 4px 4px 9px var(--in-d),inset -4px -4px 8px var(--in-l);width:100%}
.field textarea{padding:12px 16px;min-height:96px;resize:vertical}
input[type=search]{-webkit-appearance:none;appearance:none}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.grid2>*{min-width:0}

.cat{--c-fill:hsl(var(--h) var(--cf-s) var(--cf-l));--c-deep:hsl(var(--h) 52% var(--cd-l))}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--c-fill);color:var(--c-deep)}
.chip.type{background:var(--surface-2);color:var(--muted);box-shadow:inset 2px 2px 4px var(--in-d),inset -2px -2px 4px var(--in-l)}
.dot{width:12px;height:12px;border-radius:50%;background:var(--c-deep);box-shadow:inset 1px 1px 2px rgba(255,255,255,.5)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.legend div{padding:12px 14px;border-radius:18px;font-size:14px}
.legend b{display:block;font-family:var(--font-display);font-weight:600;font-size:16px}
details{border-radius:16px;padding:12px 14px;background:var(--surface-2);box-shadow:inset 4px 4px 9px var(--in-d),inset -4px -4px 8px var(--in-l)}
summary{font-weight:600;cursor:pointer}
details p{margin-top:8px}
.libitem{padding:14px 16px;border-radius:20px;display:flex;flex-direction:column;gap:4px}
.libitem .pr{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.libitem .pn{font-weight:600;line-height:1.35;min-width:0;overflow-wrap:anywhere}
.libitem .pt{font-size:13px;color:var(--muted)}
.libitem .chip{flex:none}
.board{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
.tile{aspect-ratio:1;max-width:100%;border-radius:12px;font-family:var(--font-display);font-weight:500;font-size:13px;display:flex;align-items:center;justify-content:center;position:relative;
  background:var(--surface-2);color:var(--muted);box-shadow:inset 3px 3px 6px var(--in-d),inset -3px -3px 6px var(--in-l)}
.tile.s1{background:var(--accent-soft);color:var(--fg)}
.tile.s2{background:var(--accent-mid);color:var(--fg)}
.tile.s3{background:var(--accent);color:var(--on-accent)}
.tile.s1,.tile.s2,.tile.s3{box-shadow:3px 3px 7px var(--sh-d),-2px -2px 6px var(--sh-l),inset 1px 1px 2px var(--in-l)}
.tile.ms::after{content:"";position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:var(--fg);box-shadow:0 0 0 3px var(--bg)}
.key{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.key span{display:inline-flex;align-items:center;gap:6px}
.key i{width:16px;height:16px;border-radius:5px;display:inline-block}
.k0{background:var(--surface-2);box-shadow:inset 1px 1px 3px var(--in-d)}
.k1{background:var(--accent-soft);box-shadow:0 0 0 1px var(--in-d)}
.k2{background:var(--accent-mid)}.k3{background:var(--accent)}
@media (max-width:420px){.board{gap:5px}.tile{font-size:11px;border-radius:9px}.pad{padding:18px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}