/* Wob brand tokens and core components.
   Extracted from docs/brand/brand-book.html (brand book v0.1). Edit the book first, then re-extract.
   Fonts: load https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=Fredoka:wght@500;600;700&family=VT323&display=swap
*/
:root{
  --paper:#FFF8EC; --paper-2:#F5E9D3; --card:#FFFFFF;
  --ink:#1B1A2E; --ink-soft:#4C4867; --rule:#D9CDB6;
  --purple:#6B2FD9; --teal:#18C3B8; --magenta:#FF2E93; --lime:#D7FF2F; --sun:#FFB627;
  --display:'Fredoka','Nunito',ui-rounded,'Arial Rounded MT Bold',system-ui,sans-serif;
  --body:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pixel:'VT323',ui-monospace,'Courier New',monospace;
  --confetti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M18 34l14-22 14 22z' fill='%23FF2E93' stroke='%231B1A2E' stroke-width='2'/%3E%3Cpath d='M70 24q8-10 16 0t16 0t16 0' fill='none' stroke='%2318C3B8' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='132' cy='72' r='10' fill='%236B2FD9'/%3E%3Cpath d='M18 112l10-10 10 10 10-10 10 10' fill='none' stroke='%23FFB627' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='96' y='112' width='16' height='16' fill='%23D7FF2F' stroke='%231B1A2E' stroke-width='2' transform='rotate(20 104 120)'/%3E%3Ccircle cx='72' cy='80' r='3.5' fill='%231B1A2E'/%3E%3Ccircle cx='142' cy='142' r='3.5' fill='%231B1A2E'/%3E%3Ccircle cx='40' cy='70' r='3.5' fill='%23FF2E93'/%3E%3C/svg%3E");
  --zigzag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 10L6 2L12 10L18 2L24 10' fill='none' stroke='%231B1A2E' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --zigzag-neon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%236B2FD9'/%3E%3Cpath d='M0 14L10 4L20 14L30 4L40 14' fill='none' stroke='%23D7FF2F' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M0 34L10 24L20 34L30 24L40 34' fill='none' stroke='%23FF2E93' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --knit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect width='32' height='32' fill='%236B2FD9'/%3E%3Cpath d='M8 2l6 6-6 6-6-6z' fill='%23FF2E93'/%3E%3Cpath d='M24 2l6 6-6 6-6-6z' fill='%2318C3B8'/%3E%3Cpath d='M24 18l6 6-6 6-6-6z' fill='%23FFB627'/%3E%3Cpath d='M8 18l6 6-6 6-6-6z' fill='%23D7FF2F'/%3E%3Crect x='14' y='6' width='4' height='4' fill='%23FFF8EC'/%3E%3Crect x='14' y='22' width='4' height='4' fill='%23FFF8EC'/%3E%3C/svg%3E");
  --swoosh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='130' viewBox='0 0 300 130'%3E%3Cpath d='M14 76C62 26 112 112 168 56S256 34 288 62' fill='none' stroke='%2318C3B8' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M34 104C84 80 140 124 198 92S258 86 280 100' fill='none' stroke='%236B2FD9' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  --stars:radial-gradient(1.5px 1.5px at 20px 30px,#fff 50%,transparent 51%),radial-gradient(1px 1px at 70px 80px,#fff 50%,transparent 51%),radial-gradient(2px 2px at 120px 20px,#D7FF2F 50%,transparent 51%),radial-gradient(1px 1px at 150px 120px,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 40px 140px,#18C3B8 50%,transparent 51%),radial-gradient(1px 1px at 100px 160px,#fff 50%,transparent 51%);
  --construct:repeating-linear-gradient(45deg,#FFB627 0 12px,#1B1A2E 12px 24px);
  color-scheme:light;
}

/* Base */
body.wob-brand{background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;text-wrap:balance}

/* Components */
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px;border-radius:6px}
.tab{display:inline-block;font-family:var(--pixel);font-size:1.25rem;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--lime);padding:2px 10px 0;border-radius:4px;line-height:1.3}
.stk{background:var(--card);border:2.5px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink)}
.btn{font:700 1rem/1 var(--body);display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border:2.5px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink);box-shadow:3px 3px 0 var(--ink);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.primary{background:var(--purple);color:#fff}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.wordmark{font-family:var(--display);font-weight:700;letter-spacing:-.04em;line-height:.9;display:inline-flex;align-items:flex-end;color:var(--ink)}
.wordmark .o{width:.66em;height:.66em;margin:0 .02em .02em;transform:translateY(-.06em) rotate(-8deg);overflow:visible}
.wobert{--wob-body:var(--purple);overflow:visible}
.wobble{animation:wobble 1.1s ease-in-out infinite;transform-origin:50% 90%}
.bounce{animation:bounce 1.6s cubic-bezier(.3,1.6,.5,1) infinite}
.btn88{display:inline-flex;align-items:stretch;width:88px;height:31px;border:2px solid var(--ink);font-family:var(--pixel);font-size:15px;line-height:1;text-transform:uppercase;background:var(--card);box-shadow:none;overflow:hidden;color:var(--ink);flex:none}
.btn88 .l{background:var(--purple);color:var(--lime);display:grid;place-items:center;width:31px;font-family:var(--display);font-weight:700;font-size:15px;text-transform:none}
.btn88 .r{display:grid;place-items:center;flex:1;text-align:center;padding:0 2px;line-height:.85}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:2px solid var(--ink);border-radius:999px;background:var(--card);font-weight:700;font-size:.92rem}
.chip b{font-family:var(--display);font-weight:600}
@keyframes wobble{0%,100%{transform:rotate(0) scale(1,1)}20%{transform:rotate(-7deg) scale(1.04,.96)}45%{transform:rotate(6deg) scale(.97,1.03)}70%{transform:rotate(-3deg) scale(1.02,.98)}}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-10px)}}