:root{--color-primary: #6B46C1;--color-primary-dark: #553C9A;--color-surface: #ffffff;--color-surface-2: #F7FAFC;--color-border: #E2E8F0;--color-text: #1A202C;--color-text-muted: #718096;--radius: 8px;--shadow: 0 1px 3px rgba(0,0,0,.1)}@media (prefers-color-scheme: dark){:root{--color-surface: #1A202C;--color-surface-2: #2D3748;--color-border: #4A5568;--color-text: #F7FAFC;--color-text-muted: #A0AEC0}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,sans-serif;background:var(--color-surface-2);color:var(--color-text);line-height:1.6}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:var(--color-primary);color:#fff;padding:0 1.5rem;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}.logo{font-size:1.4rem;font-weight:700}.logo-x{color:#f6e05e}.app-nav{display:flex;gap:.25rem}.app-nav a{color:#fffc;text-decoration:none;padding:.4rem .75rem;border-radius:var(--radius);font-size:.9rem;transition:all .15s}.app-nav a:hover{color:#fff;background:#ffffff1a}.app-nav a.active{color:#fff;background:#fff3}.app-main{flex:1;padding:1.5rem;max-width:900px;margin:0 auto;width:100%}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow)}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:var(--radius);border:none;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .15s;text-decoration:none}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-dark)}.btn-secondary{background:var(--color-surface-2);color:var(--color-text);border:1px solid var(--color-border)}.rating-buttons{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}.btn-again{background:#fed7d7;color:#c53030}.btn-hard{background:#feebc8;color:#c05621}.btn-good{background:#c6f6d5;color:#276749}.btn-easy{background:#bee3f8;color:#2b6cb0}@keyframes blink{0%,to{opacity:1}50%{opacity:.1}}.note-active use,.note-active path{fill:#d97706!important}.note-active{color:#d97706}