:root{--bg: #0b2545;--surface-1: #123a63;--surface-2: #1b4b7a;--text: #eaf2fb;--text-muted: #8fb0d1;--accent: #4fd1ff;--accent-support: #ffb454;--success: #6ee7a0;--danger: #ff6b6b;--font-display: "Space Grotesk", "Segoe UI", system-ui, 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: 40px;--radius: 4px;--glow-accent: 0 0 0 1px rgba(79, 209, 255, .4), 0 0 18px rgba(79, 209, 255, .25);--ease-ui: .18s ease-out}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%}body{background:linear-gradient(rgba(79,209,255,.05) 1px,transparent 1px) 0 0 / 32px 32px,linear-gradient(90deg,rgba(79,209,255,.05) 1px,transparent 1px) 0 0 / 32px 32px,radial-gradient(ellipse at top,#10305a 0%,var(--bg) 60%);color:var(--text);font-family:var(--font-mono);min-height:100%}#app{display:flex;flex-direction:column;min-height:100vh;padding:var(--space-4);gap:var(--space-3)}.topbar{display:flex;flex-direction:column;gap:var(--space-1)}.topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}.wordmark{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,5vw,3.25rem);letter-spacing:.04em;margin:0;color:var(--text)}.wordmark span{display:inline-block;color:var(--text-muted);animation:trace-light 2.4s ease-in-out infinite;animation-delay:calc(var(--i, 0) * 90ms)}.wordmark span:nth-child(1){--i: 0}.wordmark span:nth-child(2){--i: 1}.wordmark span:nth-child(3){--i: 2}.wordmark span:nth-child(4){--i: 3}.wordmark span:nth-child(5){--i: 4}.wordmark span:nth-child(6){--i: 5}.wordmark span:nth-child(7){--i: 6}.wordmark span:nth-child(8){--i: 7}.wordmark span:nth-child(9){--i: 8}.wordmark span:nth-child(10){--i: 9}.wordmark span:nth-child(11){--i: 10}@keyframes trace-light{0%,70%,to{color:var(--text-muted);text-shadow:none}10%{color:var(--accent);text-shadow:0 0 12px rgba(79,209,255,.8)}}.tagline{color:var(--text-muted);margin:0;font-size:.9rem}.layout{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:var(--space-4);min-height:0}@media (max-width: 900px){.layout{grid-template-columns:1fr}}.board-pane{display:flex;flex-direction:column;gap:var(--space-2);min-height:60vh}.level-strip{display:flex;flex-direction:column;gap:2px}.level-title{font-family:var(--font-display);font-size:1.25rem;margin:0}.level-description{color:var(--text-muted);margin:0;font-size:.85rem}.share-target{margin:2px 0 0;font-size:.8rem;color:var(--accent-support)}.board-shell{position:relative;flex:1;min-height:60vh;border-radius:var(--radius);border:1px solid var(--surface-2);background:var(--surface-1);box-shadow:var(--glow-accent);overflow:hidden;display:flex}#board{width:100%;height:100%;display:block}.side-pane{display:flex;flex-direction:column;gap:var(--space-3);min-height:0}.panel{background:var(--surface-1);border:1px solid var(--surface-2);border-radius:var(--radius);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}.panel-header{display:flex;align-items:center;justify-content:space-between;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.editor{width:100%;min-height:140px;resize:vertical;background:#0e2c4f;color:var(--text);border:1px solid var(--surface-2);border-radius:var(--radius);padding:var(--space-2);font-family:var(--font-mono);font-size:.9rem;line-height:1.5;transition:border-color var(--ease-ui),box-shadow var(--ease-ui)}.editor:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--glow-accent)}.editor[readonly]{color:var(--text-muted);background:#0b2545}.error-list{margin:0;padding:var(--space-2) var(--space-3);list-style:none;background:#ff6b6b1a;border:1px solid rgba(255,107,107,.4);border-radius:var(--radius);color:var(--danger);font-size:.8rem;display:flex;flex-direction:column;gap:var(--space-1)}.controls{display:flex;gap:var(--space-2);flex-wrap:wrap}.btn{font-family:var(--font-mono);font-weight:600;font-size:.85rem;min-height:44px;padding:var(--space-2) var(--space-3);border-radius:var(--radius);border:1px solid var(--surface-2);background:var(--surface-2);color:var(--text);cursor:pointer;transition:transform .15s ease-out,box-shadow var(--ease-ui),background var(--ease-ui),color var(--ease-ui)}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:active:not(:disabled){transform:translateY(1px) scale(.98)}.btn:focus-visible{outline:none;box-shadow:var(--glow-accent)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);color:#06213f;border-color:var(--accent)}.btn-primary:hover:not(:disabled){box-shadow:0 0 16px #4fd1ff73}.btn-secondary{background:var(--surface-2);color:var(--text)}.btn-ghost{background:transparent;color:var(--text-muted)}.btn-small{min-height:36px;padding:var(--space-1) var(--space-2);font-size:.75rem}.listing{margin:0;padding:0;list-style:none;max-height:200px;overflow-y:auto;font-size:.8rem}.listing-line{display:flex;gap:var(--space-2);padding:2px var(--space-1);border-radius:2px;transition:background var(--ease-ui)}.listing-line.current{background:#4fd1ff2e;box-shadow:inset 2px 0 0 var(--accent)}.listing-num{color:var(--text-muted);min-width:1.6em;text-align:right;-webkit-user-select:none;user-select:none}.listing-code{white-space:pre;color:var(--text)}.registers{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2) var(--space-3)}.registers>div{display:flex;flex-direction:column;gap:2px}.registers dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.registers dd{margin:0;font-size:1rem;font-weight:600}.fail-reason{margin:0;color:var(--danger);font-size:.8rem;border-top:1px solid var(--surface-2);padding-top:var(--space-2)}.status-badge{font-size:.7rem;font-weight:700;letter-spacing:.06em;padding:2px var(--space-2);border-radius:999px;border:1px solid currentColor}.status-idle{color:var(--text-muted)}.status-running{color:var(--accent)}.status-pass{color:var(--success)}.status-fail{color:var(--danger)}.win-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0b2545b8;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:overlay-in .2s ease-out}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.win-card{background:var(--surface-1);border:1px solid var(--accent);box-shadow:var(--glow-accent);border-radius:var(--radius);padding:var(--space-4);display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center}.win-heading{margin:0;font-family:var(--font-display);font-size:1.75rem;color:var(--success);letter-spacing:.08em}.win-stats{margin:0;display:flex;gap:var(--space-4)}.win-stats dt{font-size:.7rem;text-transform:uppercase;color:var(--text-muted)}.win-stats dd{margin:0;font-size:1.4rem;font-weight:700}.win-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center}.win-share-status{margin:0;min-height:1.1em;font-size:.75rem;color:var(--success)}.level-select-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:#0b2545d1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:overlay-in .2s ease-out}.level-select-card{width:min(720px,100%);max-height:min(80vh,720px);background:var(--surface-1);border:1px solid var(--accent);box-shadow:var(--glow-accent);border-radius:var(--radius);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);overflow:hidden}.level-select-header{display:flex;align-items:center;justify-content:space-between}.level-select-heading{margin:0;font-family:var(--font-display);font-size:1.4rem}.level-select-progress{margin:2px 0 0;font-size:.8rem;color:var(--text-muted)}.level-list{margin:0;padding:0;list-style:none;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-3)}.level-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);width:100%;text-align:left;background:var(--surface-2);border:1px solid var(--surface-2);border-radius:var(--radius);padding:var(--space-3);color:var(--text);cursor:pointer;font-family:var(--font-mono);transition:transform .15s ease-out,box-shadow var(--ease-ui),border-color var(--ease-ui)}.level-card:hover,.level-card:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--glow-accent)}.level-card:active{transform:translateY(1px) scale(.99)}.level-card.current{border-color:var(--accent-support)}.level-card-title{display:flex;align-items:center;gap:var(--space-1);font-weight:700}.level-card-check{color:var(--success)}.level-card-desc{color:var(--text-muted);font-size:.8rem}.level-card-meta{display:flex;gap:var(--space-3);font-size:.75rem;color:var(--text-muted)}.level-card-meta strong{color:var(--text)}.about{max-width:70ch;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4) 0 var(--space-3);line-height:1.6;color:var(--text-muted)}.about p{margin:0}.about-heading{font-family:var(--font-display);font-size:1.35rem;color:var(--text);margin:0}.about-subheading{font-family:var(--font-display);font-size:1.1rem;color:var(--text);margin:var(--space-2) 0 0}.about code{color:var(--accent);background:#4fd1ff1a;padding:0 4px;border-radius:3px}.about strong{color:var(--text)}.faq{margin:0;display:flex;flex-direction:column;gap:var(--space-2)}.faq dt{color:var(--text);font-weight:700;margin-top:var(--space-2)}.faq dd{margin:0}.site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--surface-2);font-size:.8rem}.footer-link{color:var(--text-muted);text-decoration:none;border-bottom:1px solid transparent;transition:color var(--ease-ui),border-color var(--ease-ui)}.footer-link:hover,.footer-link:focus-visible{outline:none;color:var(--accent);border-bottom-color:var(--accent)}@media (max-width: 480px){#app{padding:var(--space-3)}.board-shell{min-height:45vh}.win-stats{gap:var(--space-3)}.topbar-row{flex-direction:column;align-items:stretch}.level-list{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){.wordmark span{animation:none;color:var(--accent)}.win-overlay,.level-select-overlay{animation:none}}