:root{--color-bg: #eaf6ff;--color-bg-soft: #f5fbff;--color-surface: #ffffff;--color-primary: #4dabf7;--color-primary-dark: #1c7ed6;--color-primary-soft: #d0ebff;--color-accent: #ffd43b;--color-text: #2b3a4a;--color-text-muted: #6b8299;--color-success: #40c057;--color-danger: #fa5252;--radius-lg: 22px;--radius-md: 14px;--shadow-soft: 0 6px 16px rgba(77, 171, 247, .18);--font-heading: "Fredoka", "Nunito", system-ui, sans-serif;--font-body: "Nunito", system-ui, sans-serif}body{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg)}h1,h2,h3{font-family:var(--font-heading)}.controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:24px}.controls input[type=text]{font-family:var(--font-body);font-size:18px;padding:8px 14px;border:2px solid var(--color-primary-soft);border-radius:var(--radius-md)}.controls input[type=text]:focus{outline:none;border-color:var(--accent, var(--color-primary))}.controls button{font-family:var(--font-body);font-weight:700;font-size:16px;padding:10px 18px;border:none;border-radius:var(--radius-md);background:var(--accent, var(--color-primary));color:#fff;cursor:pointer;transition:background-color .15s ease,transform .15s ease}.controls button:hover:not(:disabled){background:var(--accent-dark, var(--color-primary-dark));transform:translateY(-1px)}.controls button:disabled{background:#cbd5e1;cursor:not-allowed}.trace-card{background:var(--color-surface);border-radius:var(--radius-lg);padding:20px;box-shadow:0 6px 16px color-mix(in srgb,var(--accent, var(--color-primary)) 20%,transparent)}.checkbox-label{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:600}.feedback{display:inline-block;font-size:18px;font-weight:800;margin-top:16px;color:var(--accent-dark, var(--color-primary-dark));animation:pop-in .25s ease}.feedback--celebrate{padding:8px 18px;border-radius:var(--radius-md);background:var(--accent-soft, var(--color-primary-soft));animation:celebrate-in .4s cubic-bezier(.34,1.56,.64,1)}@keyframes pop-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes celebrate-in{0%{opacity:0;transform:scale(.7) rotate(-2deg)}60%{opacity:1;transform:scale(1.08) rotate(1deg)}to{transform:scale(1) rotate(0)}}