:root{--surface-card:#181b20;--surface-0:#0d1013;--surface-raised:#20242b;--text-primary:#e6e9ee;--text-muted:#8b93a0;--border-subtle:#2a2f37;--accent:#8f9bff;--warning:#e3a24a;--pill-text:#12141a;--bg-success:#15271a;--border-success:#3f9a49;--text-success:#7ddc8c;--bg-danger:#2b1517;--border-danger:#d9564e;--text-danger:#ff9c92;--primary-action-bg:#8f9bff;--primary-action-border:#6672e0;--primary-action-text:#12141a;--syntax-keyword:#ff7b72;--syntax-string:#7ee787;--syntax-function:#d2a8ff;--syntax-type:#ffa657;--syntax-literal:#79c0ff;--syntax-meta:#56d4dd;--shadow-card:0 1px 3px #00000073, 0 1px 2px #0000004d;--space-px:.0625rem;--space-1:.25rem;--space-1-5:.375rem;--space-2:.5rem;--space-2-5:.625rem;--space-3:.75rem;--space-3-5:.875rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--font-size-xs:.75rem;--font-size-sm:.8125rem;--font-size-base:.875rem;--font-size-md:.9375rem;--font-size-lg:1rem;--font-size-xl:1.125rem;--font-size-2xl:1.25rem;--radius-sm:.5rem;--radius-md:12px;--radius-lg:16px;--radius-full:999px;--tap-target-min:44px;--nav-rail-width:240px;--sidebar-width:320px;--content-width-mobile:480px;--content-width-desktop:720px}@media (prefers-color-scheme:light){:root{--surface-card:#fff;--surface-0:#f4f5f7;--surface-raised:#eceef2;--text-primary:#24272d;--text-muted:#5b6270;--border-subtle:#dde1e7;--accent:#8f9bff;--warning:#e3a24a;--bg-success:#e4f5e7;--border-success:#2f7d3b;--text-success:#1f6b2a;--bg-danger:#fbe5e3;--border-danger:#c73a30;--text-danger:#a2261d;--primary-action-bg:#8f9bff;--primary-action-border:#6672e0;--primary-action-text:#12141a;--syntax-keyword:#cf222e;--syntax-string:#116329;--syntax-function:#6639ba;--syntax-type:#953800;--syntax-literal:#0550ae;--syntax-meta:#0e7490;--shadow-card:0 1px 3px #0f172a1a, 0 1px 2px #0f172a0f}}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*{box-sizing:border-box}body{min-height:100vh;margin:0}.puzzle-card{gap:var(--space-4);width:100%;max-width:var(--content-width-mobile);padding:var(--space-4);box-sizing:border-box;flex-direction:column;margin:0 auto;display:flex}.puzzle-card__prompt{text-align:center;font-size:var(--font-size-xl);color:var(--text-primary);margin:0;font-weight:600}.puzzle-card__interaction{flex-direction:column;display:flex}.code-snippet{background:var(--surface-0);border-radius:var(--radius-md);padding:var(--space-2-5) 0;font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:calc(var(--font-size-sm) * var(--code-snippet-font-scale,1));line-height:1.5;position:relative;overflow-x:auto}.code-snippet--scrollable:after{content:"";width:var(--space-6);background:linear-gradient(to right, transparent, var(--surface-0));pointer-events:none;border-radius:0 var(--radius-md) var(--radius-md) 0;position:absolute;top:0;bottom:0;right:0}.code-snippet__line{align-items:center;gap:var(--space-3);width:100%;padding:var(--space-px) var(--space-4);white-space:pre;text-align:left;color:var(--text-primary);font:inherit;background:0 0;border:none;display:flex}.code-snippet__line--interactive{cursor:pointer;min-height:var(--tap-target-min)}.code-snippet__line-number{min-width:var(--space-6);text-align:right;color:var(--text-muted);-webkit-user-select:none;user-select:none;flex-shrink:0}.code-snippet__line-code{white-space:pre}.code-snippet__line--wrong{background:var(--bg-danger)}.code-snippet__line--reveal-correct{background:var(--bg-success)}.token.keyword{color:var(--syntax-keyword)}.token.string{color:var(--syntax-string)}.token.function{color:var(--syntax-function)}.token.class-name,.token.builtin{color:var(--syntax-type)}.token.number,.token.boolean,.token.constant,.token.property,.token.literal-property{color:var(--syntax-literal)}.token.comment{color:var(--text-muted);font-style:italic}.token.punctuation,.token.operator{color:var(--text-muted)}.token.parameter,.token.annotation,.token.macro,.token.directive,.token.directive-hash,.token.generics{color:var(--syntax-meta)}.mcq-choices{gap:var(--space-2);flex-direction:column;display:flex}.mcq-choice{min-height:var(--tap-target-min);width:100%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:2px solid var(--border-subtle);background:var(--surface-card);color:var(--text-primary);font-size:var(--font-size-md);text-align:left;cursor:pointer}.mcq-choice:disabled{cursor:default}.mcq-choice--correct,.mcq-choice--reveal-correct{border-color:var(--border-success);background:var(--bg-success);color:var(--text-success)}.mcq-choice--wrong{border-color:var(--border-danger);background:var(--bg-danger);color:var(--text-danger)}.swipe-fallback{gap:var(--space-3);flex-direction:column;display:flex}.swipe-fallback__hint{text-align:center;font-size:var(--font-size-sm);color:var(--text-muted);margin:0}.swipe-fallback__card{gap:var(--space-3);touch-action:pan-y;flex-direction:column;display:flex}.swipe-fallback__buttons{gap:var(--space-3);display:flex}.swipe-fallback__button{min-height:var(--tap-target-min);padding:var(--space-3) var(--space-2);border-radius:var(--radius-md);border:2px solid var(--border-subtle);background:var(--surface-card);color:var(--text-primary);font-weight:600;font-size:var(--font-size-md);cursor:pointer;flex:1}.swipe-fallback__button:disabled{cursor:default}.swipe-fallback__button--left{border-color:var(--border-danger)}.swipe-fallback__button--right{border-color:var(--border-success)}.swipe-fallback__button--correct,.swipe-fallback__button--reveal-correct{border-color:var(--border-success);background:var(--bg-success);color:var(--text-success)}.swipe-fallback__button--wrong{border-color:var(--border-danger);background:var(--bg-danger);color:var(--text-danger)}.swipe-fallback__button--previewing.swipe-fallback__button--left{background:var(--bg-danger)}.swipe-fallback__button--previewing.swipe-fallback__button--right{background:var(--bg-success)}.feedback-panel{border-radius:16px;flex-direction:column;gap:.75rem;padding:1rem;animation:.18s ease-out feedback-panel-slide-in;display:flex}@keyframes feedback-panel-slide-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.feedback-panel--correct{background:var(--bg-success)}.feedback-panel--wrong{background:var(--bg-danger)}.feedback-panel__header{align-items:center;gap:.5rem;display:flex}.feedback-panel--correct .feedback-panel__icon,.feedback-panel--correct .feedback-panel__verdict,.feedback-panel--correct .feedback-panel__delta{color:var(--text-success)}.feedback-panel--wrong .feedback-panel__icon,.feedback-panel--wrong .feedback-panel__verdict,.feedback-panel--wrong .feedback-panel__delta{color:var(--text-danger)}.feedback-panel__icon{font-size:1.25rem;line-height:1}.feedback-panel__verdict{flex:1;font-size:1rem;font-weight:700}.feedback-panel__delta{font-variant-numeric:tabular-nums;font-weight:700}.feedback-panel__explanation{color:var(--text-primary);margin:0;font-size:.9375rem;line-height:1.45}.feedback-panel__continue{border:none;border-bottom:4px solid var(--primary-action-border);background:var(--primary-action-bg);width:100%;min-height:44px;color:var(--primary-action-text);cursor:pointer;border-radius:12px;padding:.875rem 1rem;font-size:1rem;font-weight:700;transition:transform 50ms ease-out,border-bottom-width 50ms ease-out,margin-bottom 50ms ease-out}.feedback-panel__continue:active{border-bottom-width:1px;margin-bottom:3px;transform:translateY(3px)}.practice-page{gap:var(--space-4);width:100%;max-width:var(--content-width-mobile);padding:calc(var(--space-4) + env(safe-area-inset-top)) var(--space-4) var(--space-4);box-sizing:border-box;flex-direction:column;margin:0 auto;display:flex}@media (width>=1024px){.practice-page{max-width:var(--content-width-desktop)}}.practice-page__status{text-align:center;color:var(--text-muted);padding:2rem 0}.practice-page__filter-banner{justify-content:space-between;align-items:center;gap:var(--space-2);font-size:var(--font-size-base);color:var(--text-muted);display:flex}.practice-page__nav{gap:var(--space-3);justify-content:center;display:flex}.practice-page__link{min-height:var(--tap-target-min);padding:var(--space-2) var(--space-3);color:var(--accent);font-size:var(--font-size-md);cursor:pointer;background:0 0;border:none;font-weight:600}.practice-page__version{text-align:center;font-size:var(--font-size-xs);color:var(--text-muted);margin:0}.status-bar{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.status-bar__pill{align-items:center;gap:var(--space-1-5);min-height:var(--tap-target-min);padding:var(--space-1-5) var(--space-3);border-radius:var(--radius-full);font-variant-numeric:tabular-nums;color:var(--pill-text);font-weight:700;display:flex}.status-bar__pill--rating{background:var(--accent)}.status-bar__pill--streak{background:var(--warning)}.status-bar__solved{align-items:center;gap:var(--space-1-5);color:var(--text-muted);font-size:var(--font-size-sm);display:flex}.status-bar__combo{align-items:center;gap:var(--space-1-5);min-height:var(--tap-target-min);padding:var(--space-1-5) var(--space-3);border-radius:var(--radius-full);background:var(--bg-success);color:var(--text-success);font-weight:700;animation:.18s ease-out combo-badge-pop;display:flex}@keyframes combo-badge-pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.pattern-picker{gap:var(--space-3);flex-direction:column;display:flex}.pattern-picker__header{align-items:center;gap:var(--space-2);display:flex}.pattern-picker__title{font-size:var(--font-size-xl);margin:0}.pattern-picker__all{min-height:var(--tap-target-min);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:2px solid var(--border-success);background:var(--bg-success);color:var(--text-success);cursor:pointer;font-weight:700}.pattern-picker__grid{gap:var(--space-2);flex-direction:column;display:flex}.pattern-picker__button{min-height:var(--tap-target-min);width:100%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:2px solid var(--border-subtle);background:var(--surface-card);color:var(--text-primary);text-align:left;font-size:var(--font-size-md);cursor:pointer}.mastery-view{gap:var(--space-3);flex-direction:column;display:flex}.mastery-view__header{align-items:center;gap:var(--space-2);display:flex}.mastery-view__title{font-size:var(--font-size-xl);margin:0}.mastery-view__list{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.mastery-row{justify-content:space-between;align-items:center;gap:var(--space-2);min-height:var(--tap-target-min);width:100%;padding:var(--space-2-5) var(--space-4);border-radius:var(--radius-md);background:var(--surface-0);display:flex}button.mastery-row{font:inherit;text-align:left;color:inherit;cursor:pointer;border:none}.mastery-row__label{color:var(--text-primary);font-size:var(--font-size-base);flex:1}.mastery-row__accuracy{color:var(--text-primary);font-variant-numeric:tabular-nums;font-weight:700}.mastery-row__count{color:var(--text-muted);font-size:var(--font-size-xs)}.practice-page__sidebar,.daily-page__sidebar{gap:var(--space-4);padding:var(--space-6) var(--space-4);box-shadow:var(--shadow-card);border-radius:var(--radius-lg);background:var(--surface-raised);flex-direction:column;align-self:start;display:flex}.daily-page{gap:var(--space-4);width:100%;max-width:var(--content-width-mobile);padding:calc(var(--space-4) + env(safe-area-inset-top)) var(--space-4) var(--space-4);box-sizing:border-box;flex-direction:column;margin:0 auto;display:flex}@media (width>=1024px){.daily-page{max-width:var(--content-width-desktop)}}.daily-page__status{text-align:center;color:var(--text-muted);padding:2rem 0}.daily-page__link{min-height:var(--tap-target-min);padding:var(--space-2) var(--space-3);color:var(--accent);font-size:var(--font-size-md);cursor:pointer;background:0 0;border:none;font-weight:600}.daily-page__heading{text-align:center;font-size:var(--font-size-xl);color:var(--text-primary);margin:0;font-weight:700}.share-card{gap:var(--space-2);padding:var(--space-3-5) var(--space-4);border-radius:var(--radius-md);background:var(--surface-card);border:1px solid var(--border-subtle);flex-direction:column;display:flex}.share-card__text{font-size:var(--font-size-md);color:var(--text-primary);white-space:pre-wrap;word-break:break-word;margin:0}.share-card__button{min-height:var(--tap-target-min);border-radius:var(--radius-sm);background:var(--primary-action-bg);border:none;border-bottom:3px solid var(--primary-action-border);color:var(--primary-action-text);cursor:pointer;font-weight:700}.update-prompt,.ios-install-sheet{z-index:100;box-sizing:border-box;padding:var(--space-3-5) var(--space-4) calc(var(--space-3-5) + env(safe-area-inset-bottom));background:var(--surface-card);border-top:1px solid var(--border-subtle);position:fixed;bottom:0;left:0;right:0}.update-prompt{justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.update-prompt__message{color:var(--text-primary);font-size:var(--font-size-md);font-weight:600}.update-prompt__actions{align-items:center;gap:var(--space-2);display:flex}.update-prompt__refresh{min-height:var(--tap-target-min);padding:var(--space-2-5) var(--space-5);border:none;border-bottom:4px solid var(--primary-action-border);border-radius:var(--radius-md);background:var(--primary-action-bg);color:var(--primary-action-text);font-size:var(--font-size-md);cursor:pointer;font-weight:700;transition:transform 50ms ease-out,border-bottom-width 50ms ease-out,margin-bottom 50ms ease-out}.update-prompt__refresh:active{border-bottom-width:1px;margin-bottom:3px;transform:translateY(3px)}.update-prompt__refresh:disabled{opacity:.7;cursor:default}.update-prompt__dismiss{min-height:var(--tap-target-min);padding:var(--space-2-5) var(--space-3);color:var(--text-muted);font-size:var(--font-size-md);cursor:pointer;background:0 0;border:none;font-weight:600}.ios-install-sheet{gap:var(--space-3);flex-direction:column;display:flex}.ios-install-sheet__header{justify-content:space-between;align-items:flex-start;gap:var(--space-3);display:flex}.ios-install-sheet__title{color:var(--text-primary);font-size:var(--font-size-lg);margin:0;font-weight:700}.ios-install-sheet__close{min-width:var(--tap-target-min);min-height:var(--tap-target-min);color:var(--text-muted);font-size:var(--font-size-2xl);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;line-height:1;display:flex}.ios-install-sheet__steps{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.ios-install-sheet__step{align-items:center;gap:var(--space-2-5);color:var(--text-primary);font-size:var(--font-size-md);line-height:1.4;display:flex}.ios-install-sheet__step-icon{font-size:var(--font-size-xl);flex:none}.mode-switcher{gap:var(--space-2);padding:calc(var(--space-2) + env(safe-area-inset-top)) var(--space-4) 0;flex-wrap:wrap;justify-content:center;display:flex}.mode-switcher__tab{min-height:var(--tap-target-min);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);color:var(--text-muted);font-size:var(--font-size-md);cursor:pointer;background:0 0;border:none;font-weight:600}.mode-switcher__tab--active{background:var(--surface-card);color:var(--text-primary)}.mode-switcher__tab--disabled,.mode-switcher__tab--disabled:disabled{color:var(--text-muted);opacity:.55;cursor:default}.app-shell__rail{display:none}.app-shell__mobile-nav{display:block}@media (width>=1024px){.app-shell{grid-template-columns:var(--nav-rail-width) 1fr;min-height:100vh;display:grid}.app-shell__mobile-nav{display:none}.app-shell__rail{display:block}.app-shell__content{grid-template-columns:1fr var(--sidebar-width);grid-template-areas:"main sidebar";align-items:start;display:grid}.app-shell__main{grid-area:main}.app-shell__sidebar{grid-area:sidebar}}.nav-rail{gap:var(--space-2);padding:var(--space-6) var(--space-4);box-sizing:border-box;background:var(--surface-raised);border-right:1px solid var(--border-subtle);height:100%;box-shadow:var(--shadow-card);flex-direction:column;display:flex}.nav-rail__logo{margin:0 0 var(--space-4);font-size:var(--font-size-xl);color:var(--text-primary);font-weight:700}.nav-rail__item{min-height:var(--tap-target-min);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);color:var(--text-muted);font-size:var(--font-size-md);text-align:left;cursor:pointer;background:0 0;border:none;font-weight:600}.nav-rail__item--active{background:var(--surface-card);color:var(--text-primary)}.nav-rail__item--disabled,.nav-rail__item--disabled:disabled{color:var(--text-muted);opacity:.55;cursor:default}