:root{--cream:#f0eee9;--card-bg:#fff;--ink:#1a1a1a;--ink-muted:#666460;--green:#8fd9a8;--green-dark:#4f9b63;--border:#1a1a1ab3;--shadow-soft:0 2px 0 #1a1a1ae6;--font-display:"Fraunces", Georgia, serif;--font-body:"Inter", system-ui, sans-serif;font:17px/1.6 var(--font-body);color:var(--ink)}*{box-sizing:border-box}body{background-color:var(--cream);margin:0}h1,h2,h3{font-family:var(--font-display);color:var(--ink);margin:0;font-weight:600}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}textarea,select{font:inherit}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.page{max-width:1100px;margin:0 auto;padding:32px 20px 56px;position:relative}.topbar{flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:12px;display:flex}.topbar h1{flex:1;font-size:26px;display:inline-block;position:relative}.title-swirl{width:140px;height:12px;margin-top:2px;display:block}.logo-lockup{flex-shrink:0;align-items:center;gap:10px;display:flex}.logo-word{font-family:var(--font-display);color:var(--ink);font-size:18px;font-weight:600}.logo-mark{background:var(--ink);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.logo-mark span{font-family:var(--font-display);color:var(--cream);font-size:16px;font-weight:700}.dropdown{color:var(--ink-muted);background:var(--green);border:1.5px solid var(--ink);border-radius:6px;align-items:center;gap:8px;margin-bottom:28px;padding:6px 14px;font-size:14px;display:inline-flex;position:relative}.dropdown-trigger{border:1.5px solid var(--ink);background:var(--card-bg);color:var(--ink);font-family:var(--font-body);border-radius:4px;align-items:center;gap:6px;padding:4px 10px;font-size:14px;display:inline-flex}.dropdown-chevron{color:var(--ink);font-size:11px}.dropdown-list{z-index:10;background:var(--card-bg);border:1.5px solid var(--ink);min-width:220px;box-shadow:var(--shadow-soft);border-radius:6px;margin:0;padding:6px;list-style:none;position:absolute;top:calc(100% + 6px);left:0}.dropdown-option{font-family:var(--font-body);color:var(--ink);cursor:pointer;border-radius:4px;padding:8px 12px}.dropdown-option:hover{background:var(--green)}.dropdown-option--selected{font-weight:700}.error{color:var(--ink);background:var(--card-bg);border:1.5px solid var(--ink);border-radius:4px;margin-bottom:16px;padding:8px 12px;font-size:14px}.practice-layout{grid-template-columns:2fr 3fr;gap:32px;display:grid}@media (width<=800px){.practice-layout{grid-template-columns:1fr;gap:24px}}.question-panel,.answer-panel,.feedback-dump{background-color:var(--card-bg);border:1.5px solid var(--ink);border-radius:8px;padding:24px}.question-panel{position:relative}.question-tag{font-family:var(--font-body);letter-spacing:.4px;text-transform:uppercase;color:var(--ink);background:var(--green);border-radius:4px;align-items:center;margin-bottom:14px;padding:4px 10px;font-size:12px;font-weight:600;display:inline-flex}.question-panel h2{margin-bottom:10px;font-size:20px}.question-panel p{color:var(--ink-muted);white-space:pre-wrap}.answer-panel textarea{border:1.5px solid var(--ink);resize:vertical;background:var(--cream);width:100%;color:var(--ink);font-family:var(--font-body);border-radius:4px;margin-bottom:14px;padding:12px;font-size:16px}.answer-panel button{background:var(--green);color:var(--ink);border:1.5px solid var(--ink);font-size:15px;font-weight:600;font-family:var(--font-body);box-shadow:var(--shadow-soft);border-radius:6px;padding:11px 20px;transition:transform .15s,box-shadow .15s,background .15s}.answer-panel button:not(:disabled):hover{background:var(--green-dark);color:var(--cream);transform:translate(-1px,-1px);box-shadow:3px 3px #1a1a1ae6}.answer-panel button:not(:disabled):active{transform:translate(0);box-shadow:0 0 #1a1a1ae6}.feedback-dump{margin-top:24px}.feedback-dump h3{color:var(--ink-muted);margin-bottom:10px;font-size:14px;font-weight:500}.feedback-dump pre{background:var(--cream);border:1.5px solid var(--ink);white-space:pre-wrap;color:var(--ink);border-radius:4px;padding:12px;font-family:ui-monospace,monospace;font-size:12px;overflow-x:auto}.doodle{pointer-events:none;transform-origin:50%;animation:4s ease-in-out infinite shimmy}@keyframes shimmy{0%,to{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}.doodle--corner{opacity:.85;width:32px;height:32px;position:absolute;top:-6px;right:8px}.reveal{opacity:0;transition:opacity .5s,transform .5s;transform:translateY(16px)}.reveal--visible{opacity:1;transform:translateY(0)}