:root{color-scheme:dark;--bg: #0b2545;--surface-1: #123a63;--surface-2: #1b4b7a;--text: #eaf2ff;--text-muted: #9db8d9;--accent: #5ec8f2;--accent-support: #ffb454;--success: #6ee7a8;--danger: #ff6b6b;--font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--space-1: 4px;--space-2: 8px;--space-3: 16px;--space-4: 24px;--space-5: 32px;--space-6: 48px;--space-7: 64px;--radius: 8px;--ease-out: cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{font-family:var(--font-mono);background:var(--bg);background-image:linear-gradient(rgba(94,200,242,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(94,200,242,.07) 1px,transparent 1px);background-size:32px 32px;color:var(--text);min-height:100vh}#app{min-height:100vh;display:flex;flex-direction:column}a{color:var(--accent)}button{font-family:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.site-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid rgba(94,200,242,.2)}.wordmark{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:.02em;text-transform:lowercase;color:var(--text);text-decoration:none}.wordmark-glyph{color:var(--accent);margin-right:var(--space-1)}.main-nav{display:flex;align-items:center;gap:var(--space-2)}.nav-link{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-3);border-radius:var(--radius);border:1px solid transparent;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);text-decoration:none;transition:background-color .16s var(--ease-out),border-color .16s var(--ease-out),color .16s var(--ease-out)}.nav-link:hover{color:var(--text);background:var(--surface-2)}.nav-link:active{transform:scale(.98)}.nav-link--active{color:var(--accent);border-color:#5ec8f266;background:#5ec8f21a}.header-controls{display:flex;align-items:center;gap:var(--space-3)}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(94,200,242,.35);background:var(--surface-1);font-size:1.1rem;cursor:pointer;transition:background-color .16s var(--ease-out),transform .12s var(--ease-out)}.icon-button:hover{background:var(--surface-2)}.icon-button:active{transform:scale(.94)}.icon-button[aria-pressed=true]{color:var(--text-muted);border-color:#9db8d966}.repo-link{color:var(--text-muted);text-decoration:none}.repo-link:hover{color:var(--accent)}.streak-badge{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--surface-1);border:1px solid rgba(255,180,84,.35);border-radius:999px;padding:var(--space-1) var(--space-3);font-weight:700;color:var(--accent-support)}.streak-flame{font-size:.95rem}.board{flex:1;display:flex;justify-content:center;align-items:center;padding:var(--space-5);background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(94,200,242,.1),transparent 70%)}.puzzle-card{position:relative;width:100%;max-width:760px;background:var(--surface-1);border-radius:var(--radius);padding:var(--space-6) var(--space-5);box-shadow:0 1px #5ec8f240 inset,0 24px 48px -24px #0009}.puzzle-card:before,.puzzle-card:after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--accent);opacity:.6}.puzzle-card:before{top:-1px;left:-1px;border-right:none;border-bottom:none}.puzzle-card:after{bottom:-1px;right:-1px;border-left:none;border-top:none}.practice-badge{display:inline-flex;align-items:center;margin:0 0 var(--space-3);padding:var(--space-1) var(--space-3);border-radius:999px;border:1px solid rgba(255,180,84,.4);background:#ffb4541a;color:var(--accent-support);font-size:.75rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}.puzzle-meta{display:flex;gap:var(--space-2);margin-bottom:var(--space-3)}.puzzle-meta span{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);background:var(--surface-2);border-radius:999px;padding:var(--space-1) var(--space-3)}.puzzle-meta .puzzle-number{color:var(--accent-support);border:1px solid rgba(255,180,84,.4)}.puzzle-title{font-family:var(--font-display);font-size:1.75rem;margin:0 0 var(--space-2)}.puzzle-instructions{color:var(--text-muted);margin:0 0 var(--space-4)}.code-panel{display:flex;flex-direction:column;gap:2px;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(94,200,242,.2)}.code-line{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:44px;padding:var(--space-2) var(--space-3);background:#0b254599;border:none;border-left:3px solid transparent;text-align:left;font-family:var(--font-mono);font-size:.95rem;line-height:1.6;cursor:pointer;transition:background-color .16s var(--ease-out),border-color .16s var(--ease-out),transform .12s var(--ease-out)}.code-line:hover:not(:disabled){background:var(--surface-2);border-left-color:var(--accent)}.code-line:active:not(:disabled){transform:scale(.995)}.code-line:disabled{cursor:default}.code-line:disabled:not(.code-line--correct):not(.code-line--incorrect):not(.code-line--revealed){opacity:.55}.line-number{color:var(--text-muted);min-width:2ch;text-align:right;-webkit-user-select:none;user-select:none}.line-code{white-space:pre-wrap;overflow-wrap:anywhere}.token-keyword{color:var(--accent);font-weight:700}.token-string{color:var(--accent-support)}.token-number{color:var(--success)}.token-comment{color:var(--text-muted);font-style:italic}@keyframes line-flash-success{0%{background-color:#6ee7a88c}to{background-color:#6ee7a82e}}@keyframes line-flash-danger{0%{background-color:#ff6b6b8c}to{background-color:#ff6b6b2e}}.code-line--correct{border-left-color:var(--success);background-color:#6ee7a82e;animation:line-flash-success .5s var(--ease-out)}.code-line--incorrect{border-left-color:var(--danger);background-color:#ff6b6b2e;animation:line-flash-danger .5s var(--ease-out)}.code-line--revealed{border-left-color:var(--success);background-color:#6ee7a82e}.attempts-indicator{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-4) 0 0;color:var(--text-muted);font-size:.875rem}.attempt-pips{display:inline-flex;gap:var(--space-2)}.attempt-pip{width:10px;height:10px;border-radius:50%;background:var(--surface-2);border:1px solid rgba(94,200,242,.3);transition:background-color .16s var(--ease-out)}.attempt-pip--used{background:var(--accent-support);border-color:var(--accent-support)}.explanation-panel{position:relative;margin-top:var(--space-4);padding:var(--space-4);border-radius:var(--radius);border-left:3px solid var(--success);background:#6ee7a81a;animation:panel-in .14s var(--ease-out)}.explanation-panel--danger{border-left-color:var(--danger);background:#ff6b6b1a}.explanation-verdict{font-family:var(--font-display);font-weight:700;font-size:1.1rem;margin:0 0 var(--space-2)}.explanation-panel--success .explanation-verdict{color:var(--success)}.explanation-panel--danger .explanation-verdict{color:var(--danger)}.explanation-text{margin:0;color:var(--text);line-height:1.6}@keyframes panel-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.share-panel{margin-top:var(--space-4);padding:var(--space-4);border-radius:var(--radius);background:var(--surface-2);border:1px dashed rgba(94,200,242,.35);animation:panel-in .16s var(--ease-out)}.share-label{margin:0 0 var(--space-2);color:var(--text-muted);font-size:.875rem}.share-text{margin:0 0 var(--space-3);padding:var(--space-3);background:var(--bg);border-radius:var(--radius);color:var(--text);font-family:var(--font-mono);white-space:pre-wrap;line-height:1.5}.copy-button{min-height:44px;padding:var(--space-2) var(--space-4);border-radius:var(--radius);border:1px solid var(--accent);background:transparent;color:var(--accent);font-weight:700;cursor:pointer;transition:background-color .16s var(--ease-out),color .16s var(--ease-out),transform .12s var(--ease-out)}.copy-button:hover{background:var(--accent);color:var(--bg)}.copy-button:active{transform:scale(.97)}.copy-button.copy-button--success{border-color:var(--success);background:var(--success);color:var(--bg)}.copy-button.copy-button--error{border-color:var(--danger);background:var(--danger);color:var(--bg)}.back-to-archive{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--space-4);color:var(--accent);font-weight:700;text-decoration:none;transition:color .16s var(--ease-out)}.back-to-archive:hover{color:var(--accent-support)}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.confetti-piece{position:absolute;top:-10px;width:6px;height:12px;border-radius:1px;animation:confetti-fall .9s var(--ease-out) forwards;animation-delay:var(--confetti-delay, 0s);opacity:0}@keyframes confetti-fall{0%{opacity:0;transform:translate(0) rotate(0)}15%{opacity:1}to{opacity:0;transform:translate(var(--confetti-drift, 0px),140px) rotate(220deg)}}.archive-panel{position:relative;width:100%;max-width:880px;background:var(--surface-1);border-radius:var(--radius);padding:var(--space-6) var(--space-5);box-shadow:0 1px #5ec8f240 inset,0 24px 48px -24px #0009}.archive-panel:before,.archive-panel:after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--accent);opacity:.6}.archive-panel:before{top:-1px;left:-1px;border-right:none;border-bottom:none}.archive-panel:after{bottom:-1px;right:-1px;border-left:none;border-top:none}.archive-title{font-family:var(--font-display);font-size:1.75rem;margin:0 0 var(--space-2)}.archive-subtitle{color:var(--text-muted);margin:0 0 var(--space-5)}.archive-controls{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}.filter-label{font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}.category-filter{min-height:44px;padding:0 var(--space-3);border-radius:var(--radius);border:1px solid rgba(94,200,242,.35);background:var(--surface-2);color:var(--text);font-family:var(--font-mono);font-size:.9rem;cursor:pointer;transition:border-color .16s var(--ease-out)}.category-filter:hover{border-color:var(--accent)}.archive-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-3);list-style:none;margin:0;padding:0}.archive-entry{display:flex;flex-direction:column;gap:var(--space-2);min-height:44px;padding:var(--space-3);border-radius:var(--radius);border:1px solid rgba(94,200,242,.2);background:#0b254599;color:var(--text);text-decoration:none;transition:background-color .16s var(--ease-out),border-color .16s var(--ease-out),transform .12s var(--ease-out)}.archive-entry:hover{background:var(--surface-2);border-color:var(--accent);transform:translateY(-2px)}.archive-entry:active{transform:translateY(0) scale(.99)}.archive-entry-date{font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-support)}.archive-entry-title{font-family:var(--font-display);font-weight:700}.archive-entry-tags{display:flex;gap:var(--space-2)}.archive-tag{font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);background:var(--surface-2);border-radius:999px;padding:2px var(--space-2)}.archive-empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-6) var(--space-4);border-radius:var(--radius);border:1px dashed rgba(94,200,242,.35);background:#0b254566}.archive-empty-text{margin:0;color:var(--text-muted)}.archive-empty-link{min-height:44px;display:inline-flex;align-items:center;color:var(--accent);font-weight:700;text-decoration:none}.archive-empty-link:hover{color:var(--accent-support)}.onboarding-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;justify-content:center;align-items:center;padding:var(--space-4);background:#061426bf;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:panel-in .16s var(--ease-out)}.onboarding-card{position:relative;width:100%;max-width:440px;background:var(--surface-1);border-radius:var(--radius);padding:var(--space-5);box-shadow:0 1px #5ec8f240 inset,0 24px 48px -24px #000000b3}.onboarding-title{font-family:var(--font-display);font-size:1.4rem;margin:0 0 var(--space-4);color:var(--accent)}.onboarding-steps{margin:0 0 var(--space-5);padding-left:var(--space-4);color:var(--text);line-height:1.6}.onboarding-steps li+li{margin-top:var(--space-2)}.onboarding-dismiss{min-height:44px;width:100%;padding:var(--space-2) var(--space-4);border-radius:var(--radius);border:1px solid var(--accent);background:var(--accent);color:var(--bg);font-weight:700;cursor:pointer;transition:background-color .16s var(--ease-out),transform .12s var(--ease-out)}.onboarding-dismiss:hover{background:var(--accent-support);border-color:var(--accent-support)}.onboarding-dismiss:active{transform:scale(.97)}.page-info{border-top:1px solid rgba(94,200,242,.2);background:#0b254599;padding:var(--space-7) var(--space-5)}.page-info-inner{max-width:680px;margin:0 auto;color:var(--text-muted);line-height:1.7}.page-info-inner p{margin:0 0 var(--space-4)}.page-info-title{font-family:var(--font-display);font-size:1.5rem;color:var(--text);margin:0 0 var(--space-4)}.page-info-subtitle{font-family:var(--font-display);font-size:1.1rem;color:var(--accent);margin:var(--space-6) 0 var(--space-3)}.page-info-steps{margin:0;padding-left:var(--space-4)}.page-info-steps li+li{margin-top:var(--space-2)}.faq{margin:0}.faq dt{font-weight:700;color:var(--text);margin-top:var(--space-4)}.faq dd{margin:var(--space-1) 0 0}.site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-5);border-top:1px solid rgba(94,200,242,.2)}.footer-cta{min-height:44px;display:inline-flex;align-items:center;padding:0 var(--space-4);border-radius:var(--radius);border:1px solid var(--accent);color:var(--accent);font-weight:700;text-decoration:none;transition:background-color .16s var(--ease-out),color .16s var(--ease-out)}.footer-cta:hover{background:var(--accent);color:var(--bg)}.footer-portfolio{color:var(--text-muted);font-size:.85rem;text-decoration:none;transition:color .16s var(--ease-out)}.footer-portfolio:hover{color:var(--accent)}@media (prefers-reduced-motion: reduce){.code-line--correct,.code-line--incorrect,.explanation-panel,.share-panel,.onboarding-overlay{animation:none}.confetti{display:none}.code-line,.icon-button,.copy-button,.nav-link,.archive-entry,.onboarding-dismiss{transition:none}}@media (max-width: 768px){.site-header{padding:var(--space-3) var(--space-4)}.board{padding:var(--space-4) var(--space-3)}.puzzle-card,.archive-panel{padding:var(--space-4)}.puzzle-title,.archive-title{font-size:1.5rem}.archive-list{grid-template-columns:1fr}}@media (max-width: 480px){.site-header{flex-direction:column;align-items:flex-start;gap:var(--space-3)}.header-controls{width:100%;justify-content:space-between}.main-nav{width:100%}.nav-link{flex:1;justify-content:center}.archive-controls{flex-wrap:wrap}.category-filter{flex:1}.code-line{font-size:.8rem;gap:var(--space-2);padding:var(--space-2)}.puzzle-meta{flex-wrap:wrap}.attempts-indicator{flex-wrap:wrap;gap:var(--space-2)}.site-footer{flex-direction:column;align-items:flex-start}}