:root{--ink:#1c1b19;--muted:#5c574f;--line:#e6e1d8;--paper:#f7f4ee;--panel:#fffcf7;--accent:#2f4a3c;--accent-soft:#dfe8e2;--warn:#6b4f2a;--max:720px;--font:"Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;--sans:"Avenir Next", "Segoe UI", sans-serif}*{box-sizing:border-box}html,body,#root{background:radial-gradient(1200px 600px at 10% -10%, #efe8dc 0%, transparent 55%), radial-gradient(900px 500px at 100% 0%, #e7eee8 0%, transparent 50%), var(--paper);min-height:100%;color:var(--ink);font-family:var(--sans);margin:0;line-height:1.55}button,textarea,input{font:inherit}.app{max-width:var(--max);margin:0 auto;padding:2.5rem 1.25rem 4rem}.brand{font-family:var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2rem;font-size:.85rem}.hook h1{font-family:var(--font);margin:0 0 1rem;font-size:clamp(2rem,5vw,2.75rem);font-weight:500;line-height:1.2}.hook .sub{color:var(--muted);max-width:34rem;margin-bottom:2rem}.actions{flex-wrap:wrap;gap:.75rem;margin-top:1.5rem;display:flex}.btn{border:1px solid var(--ink);background:var(--ink);color:var(--panel);cursor:pointer;letter-spacing:.02em;padding:.8rem 1.2rem}.btn.secondary{color:var(--ink);background:0 0}.btn.ghost{border-color:var(--line);color:var(--muted);background:0 0}.btn:disabled{opacity:.45;cursor:not-allowed}.panel{background:var(--panel);border:1px solid var(--line);margin-top:1.25rem;padding:1.5rem}.panel h2,.section h3{font-family:var(--font);letter-spacing:.02em;margin:0 0 .75rem;font-size:1.05rem;font-weight:500}.section{border-top:1px solid var(--line);margin-top:1.5rem;padding-top:1.25rem}.section:first-of-type{border-top:0;margin-top:0;padding-top:0}.muted{color:var(--muted);font-size:.95rem}.list{margin:0;padding-left:1.1rem}.list li{margin:.35rem 0}textarea{border:1px solid var(--line);resize:vertical;background:#fff;width:100%;min-height:8rem;padding:.9rem 1rem}.banner{background:var(--accent-soft);border-left:3px solid var(--accent);margin:1rem 0;padding:1rem 1.1rem}.banner.warn{border-left-color:var(--warn);background:#f3ead8}.banner strong{letter-spacing:.08em;margin-bottom:.4rem;font-size:.78rem;display:block}.example-grid{grid-template-columns:1fr;gap:1rem;display:grid}@media (width>=720px){.example-grid{grid-template-columns:1fr 1fr}}.card{border:1px solid var(--line);background:var(--panel);padding:1.25rem}.card h3{font-family:var(--font);margin:0 0 .5rem;font-weight:500}.footer-note{color:var(--muted);margin-top:2rem;font-size:.85rem}details.why{margin-top:.75rem}details.why summary{cursor:pointer;color:var(--muted);font-size:.9rem}.method-line{margin:.4rem 0;font-size:.95rem}.think{font-family:var(--font);color:var(--accent);margin-top:1.25rem;font-size:1.15rem}.cases{border-top:1px solid var(--line);margin-top:2.5rem;padding-top:1.5rem}.cases summary{cursor:pointer;color:var(--muted)}.case-row{border-bottom:1px solid var(--line);justify-content:space-between;gap:1rem;padding:.4rem 0;font-size:.9rem;display:flex}.pass{color:var(--accent)}.fail{color:#8a2f2f}.nav-back{color:var(--muted);cursor:pointer;background:0 0;border:none;margin-bottom:1.25rem;padding:0}