:root{--paper:#f7f4ee;--card:#fffdf8;--ink:#2c2724;--muted:#6f655d;--line:#e2d9cb;--lilac:#b9a3e0;--lilac-d:#9a83c9;--lilac-l:#efe9fa;--f1:#5b8fd6;--f2:#4fae74;--f3:#e9a23b;--f4:#e0718a;--wood:#efe1c3;--shadow:3px 4px 0 #2c272424;--radius:18px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--paper);color:var(--ink);font-family:var(--font-body), system-ui, sans-serif;margin:0;font-size:17px;line-height:1.55}a{color:inherit}img{max-width:100%;display:block}h1,h2,h3{font-family:var(--font-hand), cursive;margin:0 0 10px;font-weight:700;line-height:1.05}h1{font-size:clamp(44px,7vw,72px)}h2{font-size:clamp(34px,5vw,46px)}h3{font-size:30px}p{margin:0 0 14px}.wrap{max-width:1120px;margin:0 auto;padding:0 16px}.section{padding-top:56px;padding-bottom:56px}.lead{color:var(--muted);max-width:640px;font-size:19px}.muted{color:var(--muted)}.hand{font-family:var(--font-hand), cursive}.site-header{border-bottom:2px solid var(--line);background:var(--paper);z-index:10;padding:10px 0;position:sticky;top:0}.site-header .wrap{justify-content:space-between;align-items:center;gap:16px;display:flex}.logo{font-family:var(--font-hand), cursive;align-items:center;gap:10px;font-size:32px;font-weight:700;text-decoration:none;display:flex}.logo .dots{gap:3px;margin-left:2px;display:inline-flex}.logo .dots i{border:1.5px solid var(--ink);border-radius:50%;width:7px;height:7px}.tagline{font-family:var(--font-hand), cursive;color:var(--muted);font-size:22px}.site-footer{border-top:2px solid var(--line);color:var(--muted);padding:32px 0 48px;font-size:14px}.site-footer .wrap{flex-wrap:wrap;justify-content:space-between;gap:12px 28px;display:flex}.site-footer nav{flex-wrap:wrap;gap:18px;display:flex}.btn{border:2.5px solid var(--ink);background:var(--lilac);color:var(--ink);box-shadow:var(--shadow);cursor:pointer;border-radius:14px;align-items:center;gap:8px;padding:12px 20px;font-family:inherit;font-size:16px;font-weight:800;text-decoration:none;display:inline-flex}.btn:active{transform:translateY(1px);box-shadow:1px 2px #2c272424}.btn.white{background:#fff}.btn.dark{background:var(--ink);color:#fff}.btn[disabled]{opacity:.5;cursor:default}.btn-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.card{background:var(--card);border:2.5px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.grid{gap:18px;display:grid}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.view{flex-direction:column;gap:16px;padding-top:18px;padding-bottom:40px;display:flex}.search{width:100%;max-width:560px;margin:0 auto;position:relative}.search input{border:2.5px solid var(--ink);width:100%;font:inherit;box-shadow:var(--shadow);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%232c2724' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='6'/%3E%3Cpath d='m13 13 5 5'/%3E%3C/svg%3E") 14px no-repeat;border-radius:14px;padding:13px 16px 13px 44px}.search input:focus{outline:3px solid var(--f1);outline-offset:2px}.results{z-index:20;border:2.5px solid var(--ink);box-shadow:var(--shadow);background:#fff;border-radius:14px;max-height:min(60vh,420px);margin:0;padding:6px;list-style:none;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow-y:auto}.results button{text-align:left;width:100%;font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:10px;align-items:baseline;gap:4px;padding:9px 10px;display:flex}.results button.hi{background:var(--lilac-l)}.results button.current b{text-decoration:underline;text-decoration-thickness:2px}.results .str{color:var(--muted);white-space:nowrap;margin-left:auto;padding-left:10px;font-size:13px}.results .empty{padding:10px}.player{flex-direction:column;align-items:center;gap:14px;min-height:300px;display:flex}.player canvas{border-radius:var(--radius);border:2.5px solid var(--ink);background:var(--paper);width:100%;height:auto}.player.reel canvas{width:100%;max-width:480px;height:auto}.player .controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.player select{border:2px solid var(--ink);font:inherit;background:#fff;border-radius:10px;padding:8px 10px}.legend{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:8px 16px;font-size:14px;font-weight:700;display:flex}.legend span{align-items:center;gap:6px;display:inline-flex}.legend i{border:2px solid var(--ink);border-radius:50%;width:13px;height:13px}.prose{max-width:720px}.prose h2{margin-top:32px}.prose ul{padding-left:22px}.prose li{margin-bottom:6px}@media (max-width:600px){.section{padding-top:40px;padding-bottom:40px}.logo{font-size:26px}.tagline{font-size:18px}.view{gap:12px;padding:12px 10px 24px}.player.reel canvas{border-width:2px;border-radius:14px}.btn{padding:10px 16px}}
