:root{font-family:Space Grotesk,system-ui,sans-serif;color:#f5f3ef;background:radial-gradient(circle at top left,rgba(255,126,95,.28),transparent 35%),radial-gradient(circle at top right,rgba(28,147,153,.2),transparent 30%),linear-gradient(180deg,#16181d,#0d1014);line-height:1.5;font-weight:500;--panel: rgba(17, 21, 27, .92);--panel-border: rgba(255, 255, 255, .09);--editor: #10141b;--editor-border: rgba(255, 255, 255, .08);--text-soft: rgba(245, 243, 239, .76);--accent: #ff7e5f;--accent-soft: rgba(255, 126, 95, .18);--blue: #69b7ff;--green: #64d2a1;--yellow: #ffcf6e;--gray: #d2dae6;--red: #ff6b6b}*{box-sizing:border-box}body{margin:0;min-width:320px}button{font:inherit}#root{min-height:100vh}.app-shell{min-height:100vh;padding:1.25rem}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:1.5rem;background:#05080cb3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:50}.success-modal{width:min(32rem,100%);padding:1.4rem;border-radius:20px;background:#11151bf7;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 90px #00000059}.success-modal h2,.success-modal p{margin:0}.ascii-art{margin:1rem 0;padding:1rem;border-radius:14px;background:#ffffff08;color:#8cd39ff2;font-family:Fira Code,monospace;font-size:1rem;line-height:1.2;white-space:pre}.modal-copy{color:var(--text-soft)}.modal-actions{display:flex;gap:.75rem;margin-top:1rem}.mobile-blocker{display:none}.mobile-blocker-card{max-width:32rem;margin:0 auto;padding:1.5rem;border-radius:20px;background:var(--panel);border:1px solid var(--panel-border);box-shadow:0 18px 80px #0000003d}.sidebar,.editor-panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:20px;box-shadow:0 18px 80px #0000003d}.ide-shell{display:grid;gap:1rem;min-height:calc(100vh - 2.5rem)}.ide-shell.sidebar-open{grid-template-columns:300px minmax(0,1fr)}.ide-shell.sidebar-closed{grid-template-columns:minmax(0,1fr)}.sidebar{padding:1rem;display:grid;align-content:start;gap:1rem}.editor-panel{overflow:hidden;display:flex;flex-direction:column}.sidebar-header,.editor-toolbar,.bottom-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.sidebar-label{margin:0 0 .25rem;color:var(--text-soft);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}.sidebar-header h2{margin:0}.icon-button{border:1px solid rgba(255,255,255,.08);background:#ffffff0a;color:inherit;border-radius:12px;cursor:pointer}.icon-button{width:2.25rem;height:2.25rem;font-size:1.2rem}.reload-button{width:auto;height:auto;min-width:0;padding:.3rem .65rem;border-radius:999px;font-size:.9rem;line-height:1}.section-heading h2,.section-heading p,.brief-card h3,.brief-card p,.legend-card h3,.legend-card ul{margin:0}.section-heading p,.brief-card p,.legend-card li{color:var(--text-soft)}.difficulty-picker{display:grid;gap:.75rem}.example-list{display:grid;gap:.6rem}.example-group{display:grid;gap:.45rem}.example-group-label{margin:.25rem 0 0;color:var(--yellow);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.structure-card{border-radius:14px;padding:.75rem .9rem;background:#ffffff08;border:1px solid rgba(255,255,255,.06)}.structure-card summary{cursor:pointer;color:var(--yellow);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}.structure-card p{margin:.75rem 0 0;color:var(--text-soft);font-family:Fira Code,monospace;font-size:.9rem}.difficulty-button{border:1px solid rgba(255,255,255,.08);background:#ffffff0a;color:inherit;border-radius:18px;padding:.9rem 1rem;text-align:left;display:grid;gap:.18rem;cursor:pointer}.difficulty-button.active{border-color:#ff7e5f8c;background:var(--accent-soft)}.difficulty-button small{color:var(--text-soft)}.example-button{border:1px solid rgba(255,255,255,.06);background:#ffffff06;color:inherit;border-radius:10px;padding:.5rem .7rem;text-align:left;display:flex;align-items:center;cursor:pointer;font-size:.92rem;line-height:1.2}.example-button.active{border-color:#69b7ff73;background:#69b7ff1f}.brief-card,.status-card,.legend-card{border-radius:20px;padding:1rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.06)}.brief-label,.hint-label{margin:0 0 .4rem;color:var(--yellow);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.actions{display:flex;gap:.75rem;margin:1rem 0}.primary-button,.ghost-button{border-radius:999px;padding:.8rem 1rem;border:none;cursor:pointer}.primary-button{background:var(--accent);color:#101318;font-weight:700}.ghost-button{background:#ffffff14;color:inherit}.status-card.success{border-color:#64d2a173;background:#64d2a11f}.status-card.warning{border-color:#ff6b6b66;background:#ff6b6b1f}.editor-toolbar{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;background:#ffffff08;border-bottom:1px solid var(--editor-border)}.editor-toolbar-left,.editor-toolbar-right{display:flex;align-items:center;gap:.55rem}.traffic{width:.8rem;height:.8rem;border-radius:999px}.traffic.red{background:#ff5f56}.traffic.amber{background:#ffbd2e}.traffic.green{background:#27c93f}.filename{margin-left:.65rem;color:var(--text-soft);font-size:.9rem}.mode-pill{border-radius:999px;padding:.3rem .65rem;background:#ffffff12;color:#f5f3ef;font-size:.78rem}.mode-pill.subtle{color:var(--text-soft)}.editor-main{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;flex:1}.editor-body{padding:1rem 0;background:linear-gradient(180deg,#ffffff03,#fff0),var(--editor);min-height:0}.editor-line{display:grid;grid-template-columns:28px 44px minmax(0,1fr);align-items:center;min-height:3.2rem;padding-right:1rem}.comment-line{align-items:start;min-height:2.75rem;padding-top:.65rem;padding-bottom:.65rem}.editor-line.has-error{background:#ff6b6b0f}.intro-line{min-height:2.5rem}.gutter-spacer{width:28px}.error-gutter{display:grid;place-items:center;border:none;background:transparent;cursor:pointer;opacity:0}.error-gutter.visible{opacity:1}.error-dot{width:.9rem;height:.9rem;border-radius:999px;background:var(--red);box-shadow:0 0 0 6px #ff6b6b1f}.line-number{color:#ffffff57;font-family:Fira Code,monospace;font-size:.9rem}.starter-code,.code-line,.instruction-comment{font-family:Fira Code,monospace}.starter-code{color:#ffffff73}.instruction-comment{color:#8cd39fd1;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}.code-line{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;width:100%}.slot{min-width:3.25rem;min-height:2.2rem;border-radius:14px;border:1px dashed rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;padding:.2rem;transition:border-color .15s ease,background .15s ease,transform .15s ease}.slot.wrong,.slot.missing{border-color:#ff6b6bcc;background:#ff6b6b1f}.slot-placeholder{color:#ffffff52;font-size:.85rem}.token-drawer{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}.token{display:inline-flex;align-items:center;gap:.5rem;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:#ffffff0f;color:inherit;padding:.6rem .78rem;cursor:grab}.token.keyword{color:var(--blue)}.token.function{color:var(--green)}.token.value{color:#f7f7f7}.token.operator{color:var(--yellow)}.token.symbol{color:var(--gray)}.token-kind{color:#ffffff52;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}.editor-bottom{border-top:1px solid var(--editor-border);background:#0d1117f5;padding:1rem}.bottom-header p{margin:0;color:var(--text-soft)}.bottom-header .success-copy{color:var(--green)}.bottom-actions{display:flex;gap:.75rem;align-items:center}.legend-card ul{padding-left:1.1rem;margin-top:.7rem}@media (max-width: 680px){.app-shell{display:grid;place-items:center}.mobile-blocker{display:block}.ide-shell{display:none}}