/* A separate appearance layer; business content and saved progress stay independent. */
:root{--scene-rgb:159,130,244;--scene-accent:#c7b4ff;--blue:var(--scene-accent)}
html{background:#0d121d}
body{background:transparent;isolation:isolate}
.ambient-stage{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict;--px:0px;--py:0px}
.ambient-canvas{position:absolute;inset:0;opacity:.92}
.ambient-glow{position:absolute;width:75vw;height:75vw;max-width:1250px;max-height:1250px;border-radius:50%;background:radial-gradient(ellipse,rgba(var(--scene-rgb),.22),rgba(var(--scene-rgb),.065) 35%,transparent 68%);will-change:transform;transition:background .5s ease}
.glow-one{top:-45vw;right:-5vw;transform:translate3d(calc(var(--px) * 1.8),calc(var(--py) * 1.8),0)}
.glow-two{top:38vh;left:16vw;opacity:.65;transform:translate3d(calc(var(--px) * -1.2),calc(var(--py) * -1.2),0)}
.ambient-grain{position:absolute;inset:0;opacity:.15;background-image:radial-gradient(rgba(var(--scene-rgb),.45) .7px,transparent .7px);background-size:7px 7px;mask-image:linear-gradient(transparent,#000 55%,transparent)}
.sidebar{background:rgba(9,14,24,.96)}
.workspace{position:relative;z-index:1}
.topbar,.scopebar{background:rgba(12,17,29,.92)}
.topbar{gap:16px;padding-right:28px}
.top-actions{gap:14px}.topbar .prototype{display:none}
.appearance-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}
.appearance-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:#182133;color:#dce5f6;font-size:12px;white-space:nowrap}
.appearance-button:hover{border-color:var(--scene-accent);background:#232e42}
.appearance-button:disabled{opacity:.65;cursor:default}
.appearance-icon,.motion-icon{font:18px/1 "Segoe UI Symbol","Segoe UI",sans-serif;min-width:19px}
.motion-icon{font-size:14px}.appearance-button:focus-visible{outline:3px solid var(--scene-accent);outline-offset:3px}
.breadcrumb{min-width:0}.breadcrumb strong{white-space:nowrap}
.nav-item.active{border-color:rgba(var(--scene-rgb),.52);background:linear-gradient(90deg,rgba(var(--scene-rgb),.18),rgba(var(--scene-rgb),.035))}
.nav-item.active .nav-icon,.brand-dot,.eyebrow,.card-num,.module-row .number,.phase-date,.source-card .small{color:var(--scene-accent)}
.brand-icon{background:var(--scene-accent);color:#151c2b;box-shadow:0 0 28px rgba(var(--scene-rgb),.2)}
.hero{background:linear-gradient(125deg,rgba(var(--scene-rgb),.13),rgba(17,27,41,.85) 65%);border-color:rgba(var(--scene-rgb),.38);backdrop-filter:blur(3px)}
.path-panel{background:rgba(17,28,44,.72)}
.hero .eyebrow{color:var(--scene-accent)}
.btn:not(.secondary):not(.lime){background:var(--scene-accent);color:#101c2b}
.btn:not(.secondary):not(.lime):hover{filter:brightness(1.08)}
.segments button.selected,.tabs button.selected{background:var(--scene-accent);color:#111d2b;border-color:var(--scene-accent)}
.stat,.card,.module-row,.step,.engine-card,.evolution-card{background:linear-gradient(135deg,rgba(25,34,49,.96),rgba(19,27,41,.97))}
.card,.stat,.module-row,.dev-lesson{box-shadow:0 14px 36px #0000000d}
.page-head .eyebrow:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:10px;vertical-align:middle;background:var(--scene-accent);box-shadow:0 0 16px var(--scene-accent)}
.dev-intro h1 em,.orbit-core{color:var(--scene-accent)}
.dev-config,.dev-launch{background:linear-gradient(120deg,rgba(var(--scene-rgb),.12),rgba(22,32,46,.96));border-color:rgba(var(--scene-rgb),.34)}
.dev-lesson{background:rgba(23,32,47,.96)}
.dev-nav.current{background:rgba(var(--scene-rgb),.1);border-color:rgba(var(--scene-rgb),.45)}
.progress-fill{background:linear-gradient(90deg,var(--scene-accent),#d7fa8a)}
html[data-motion="still"] .ambient-glow{will-change:auto;transition:none}

/* Light mode includes every workspace, form, sidebar, snippet and ambient scene. */
html[data-mode="light"]{color-scheme:light;background:#f4f6f9;--navy:#edf1f7;--ink:#18243a;--muted:#53627a;--line:#cbd5e2;--canvas:#f4f6f9;--pale:#e9edf5;--white:#fff;--lime:#d7efa8}
html[data-mode="light"] .ambient-glow{background:radial-gradient(ellipse,rgba(var(--scene-rgb),.19),rgba(var(--scene-rgb),.04) 42%,transparent 68%)}
html[data-mode="light"] .ambient-canvas{opacity:.72}
html[data-mode="light"] .ambient-grain{opacity:.1}
html[data-mode="light"] .sidebar{background:rgba(250,251,254,.96);color:var(--ink);border-color:#d0d8e5}
html[data-mode="light"] .brand{color:#18243a}
html[data-mode="light"] .brand-icon{color:white}
html[data-mode="light"] .edition,html[data-mode="light"] .nav-group{color:#596980}
html[data-mode="light"] .nav-item{color:#43536d}
html[data-mode="light"] .nav-item.active{color:var(--scene-accent);background:rgba(var(--scene-rgb),.1)}
html[data-mode="light"] .nav-item:hover{background:#e8edf5}
html[data-mode="light"] .side-note{color:#3b5c21}
html[data-mode="light"] .side-bottom p,html[data-mode="light"] .side-bottom small{color:#5c6c85}
html[data-mode="light"] .text-btn.light{color:#394d70}
html[data-mode="light"] .topbar,html[data-mode="light"] .scopebar{background:rgba(251,253,255,.92);border-color:#d0d9e5}
html[data-mode="light"] .appearance-button{background:#fff;color:#25364f;border-color:#c5cfdf}
html[data-mode="light"] .appearance-button:hover{background:#edf1f8;border-color:var(--scene-accent)}
html[data-mode="light"] .scope-audience{color:#5e6c80}
html[data-mode="light"] .segments{background:#e8edf5;border-color:#d0d9e5}
html[data-mode="light"] .segments button{color:#495a76}
html[data-mode="light"] .segments button.selected,html[data-mode="light"] .tabs button.selected{color:white}
html[data-mode="light"] .hero{color:var(--ink);background:linear-gradient(125deg,rgba(var(--scene-rgb),.11),rgba(255,255,255,.9) 68%);border-color:rgba(var(--scene-rgb),.35);box-shadow:0 15px 40px #33466f0a}
html[data-mode="light"] .hero-main>p,html[data-mode="light"] .hero-actions a:not(.btn){color:#425578}
html[data-mode="light"] .path-panel{background:rgba(236,242,249,.85);border-color:#cad6e5}
html[data-mode="light"] .path-panel .eyebrow{color:#55667d}
html[data-mode="light"] .path-node{color:#354d70;border-color:#91a5c0}
html[data-mode="light"] .path-node.selected{color:#263519;border-color:#97b96e;box-shadow:none}
html[data-mode="light"] .path-explain h3{color:#22324e}
html[data-mode="light"] .path-explain p,html[data-mode="light"] .path-foot{color:#50627d}
html[data-mode="light"] .path-foot{border-color:#c6d2e3}
html[data-mode="light"] .btn:not(.secondary):not(.lime){color:#fff}
html[data-mode="light"] .btn.secondary{background:#fff;color:#24344e;border-color:#bdcadc}
html[data-mode="light"] .btn.secondary:hover{background:#e9eff8}
html[data-mode="light"] .btn.lime{color:#27371c}
html[data-mode="light"] .text-btn{color:var(--scene-accent)}
html[data-mode="light"] .stat,html[data-mode="light"] .card,html[data-mode="light"] .module-row,html[data-mode="light"] .step,html[data-mode="light"] .engine-card,html[data-mode="light"] .evolution-card{background:rgba(255,255,255,.96);border-color:#cbd5e2}
html[data-mode="light"] .stat-number{color:var(--scene-accent)}
html[data-mode="light"] .card p,html[data-mode="light"] .step-content p{color:#52617a}
html[data-mode="light"] .card:hover{box-shadow:0 14px 36px #263c5910}
html[data-mode="light"] .module-row:hover,html[data-mode="light"] .source-card:hover{background:#f8faff;border-color:var(--scene-accent)}
html[data-mode="light"] .progress-track{background:#dce4ef}
html[data-mode="light"] .progress-fill{background:linear-gradient(90deg,var(--scene-accent),#668a35)}
html[data-mode="light"] .tag{background:rgba(var(--scene-rgb),.1);color:var(--scene-accent)}
html[data-mode="light"] .tag.gray{background:#e7edf4;color:#4c5d75}
html[data-mode="light"] .tag.green{background:#e2edcc;color:#426025}
html[data-mode="light"] .tag.amber{background:#fff0d3;color:#7c5214}
html[data-mode="light"] .callout,html[data-mode="light"] .funnel-detail,html[data-mode="light"] .check-summary{background:#eaf0f9;border-color:#c4d2e7;color:#374e70}
html[data-mode="light"] .callout p,html[data-mode="light"] .callout.dark p,html[data-mode="light"] .callout.dark strong{color:#3d5272}
html[data-mode="light"] .callout.amber{background:#fff4df;border-color:#e2cfa4}
html[data-mode="light"] .example{background:#eff3f8;color:#314661}
html[data-mode="light"] .step summary .step-num{background:#e7edf7;color:var(--scene-accent)}
html[data-mode="light"] .tabs button{background:#fff;color:#4f607c;border-color:#c4d0e1}
html[data-mode="light"] .field input,html[data-mode="light"] .field textarea,html[data-mode="light"] .field select{background:#fff;color:#203049;border-color:#b6c5d9}
html[data-mode="light"] input::placeholder,html[data-mode="light"] textarea::placeholder{color:#68788e;opacity:1}
html[data-mode="light"] .preview-box{background:#e6edf7;border-color:#bacbe0;color:#243853}
html[data-mode="light"] .preview-box p{color:#4b5e7a}
html[data-mode="light"] .preview-box .eyebrow{color:var(--scene-accent)}
html[data-mode="light"] .preview-sheet{background:#fff;color:#21334f}
html[data-mode="light"] .preview-sheet p,html[data-mode="light"] .preview-sheet h3{color:#263b59}
html[data-mode="light"] .char-count{color:#536a8d}
html[data-mode="light"] .lab-warning{color:#a13b26}
html[data-mode="light"] .engine-letter,html[data-mode="light"] .mono{background:#e8edf6;color:var(--scene-accent)}
html[data-mode="light"] .phase-modules a{background:#eaf0f8}
html[data-mode="light"] .empty{border-color:#aabbcf}
html[data-mode="light"] pre{background:#eef3f8;color:#274664;border-color:#bdccdf}
html[data-mode="light"] .mobile-menu{color:#243954}
html[data-mode="light"] .skip{background:#fff;color:#243954}
html[data-mode="light"] #toast{background:#213753;color:#fff}
html[data-mode="light"] .dev-intro p{color:#4f6078}
html[data-mode="light"] .dev-orbit{background:radial-gradient(ellipse,rgba(var(--scene-rgb),.12),transparent 67%)}
html[data-mode="light"] .orbit-line,html[data-mode="light"] .orbit-line:after{border-color:rgba(var(--scene-rgb),.45)}
html[data-mode="light"] .orbit-core{background:rgba(255,255,255,.55);border-color:rgba(var(--scene-rgb),.5)}
html[data-mode="light"] .orbit-core small{color:#596c8c}
html[data-mode="light"] .orbit-node{background:#f4f7fc;color:#3b5070;border-color:#b4c5dc}
html[data-mode="light"] .orbit-node.o2{background:#e7efda;color:#46642d;border-color:#afc793}
html[data-mode="light"] .dev-config,html[data-mode="light"] .dev-launch{background:linear-gradient(120deg,rgba(var(--scene-rgb),.1),rgba(255,255,255,.96));border-color:rgba(var(--scene-rgb),.35)}
html[data-mode="light"] .dev-launch p{color:#526581}
html[data-mode="light"] .dev-launch .eyebrow{color:var(--scene-accent)}
html[data-mode="light"] .host-picker>span{color:#506581}
html[data-mode="light"] .host-picker select{background:#fff;color:#283c58;border-color:#adbed5}
html[data-mode="light"] .dev-progress span{color:#526987}
html[data-mode="light"] .rail-title,html[data-mode="light"] .dev-phase{color:#5b6b82;border-color:#c8d3e3}
html[data-mode="light"] .rail-title span,html[data-mode="light"] .dev-num{color:var(--scene-accent)}
html[data-mode="light"] .dev-nav{color:#4f617c}
html[data-mode="light"] .dev-nav:hover{background:#e4ebf6}
html[data-mode="light"] .dev-nav.current{color:#263a56;background:rgba(var(--scene-rgb),.1)}
html[data-mode="light"] .dev-nav.current .dev-num,html[data-mode="light"] .dev-nav small{color:#526480}
html[data-mode="light"] .rail-note{color:#41602b;border-color:#bdcbdc}
html[data-mode="light"] .rail-note p{color:#60718a}
html[data-mode="light"] .dev-lesson{background:rgba(255,255,255,.97);border-color:#c2cfdf}
html[data-mode="light"] .lesson-overline,html[data-mode="light"] .micro-label{color:var(--scene-accent)}
html[data-mode="light"] .lesson-overline span:last-child,html[data-mode="light"] .lesson-subtitle{color:#526985}
html[data-mode="light"] .learn-card{border-color:var(--scene-accent)}
html[data-mode="light"] .learn-card p{color:#3e526e}
html[data-mode="light"] .host-route{background:#eff5eb;border-color:#b7c9ad}
html[data-mode="light"] .host-route p{color:#425e48}
html[data-mode="light"] .host-route .mini-head>a,html[data-mode="light"] .host-limits summary{color:#3c602b}
html[data-mode="light"] .host-limits{border-color:#bfd0b5}
html[data-mode="light"] .prerequisite,html[data-mode="light"] .dev-action,html[data-mode="light"] .dev-references,html[data-mode="light"] .lesson-pagination{border-color:#ced8e6}
html[data-mode="light"] .prerequisite>span,html[data-mode="light"] .prerequisite p,html[data-mode="light"] .dev-action p,html[data-mode="light"] .dev-action .check-label{color:#52657f}
html[data-mode="light"] .action-count{color:var(--scene-accent);border-color:#adbed4}
html[data-mode="light"] .code-drawer{background:#f7f9fc;border-color:#bbcbe0}
html[data-mode="light"] .code-drawer summary{color:#243957}
html[data-mode="light"] .code-glyph{color:var(--scene-accent)}
html[data-mode="light"] .code-drawer[open] summary{border-color:#c5d1e2}
html[data-mode="light"] .drawer-hint,html[data-mode="light"] .code-body>p,html[data-mode="light"] .code-body>small,html[data-mode="light"] .code-toolbar label{color:#526782}
html[data-mode="light"] .code-toolbar select{background:#fff;color:#253c5c;border-color:#b4c5db}
html[data-mode="light"] .code-body pre{background:#eaf0f7;color:#214464;border-color:#bdcfe0}
html[data-mode="light"] .verify-card{background:#edf4e5;border-color:#b6cda2}
html[data-mode="light"] .verify-card .micro-label{color:#426126}
html[data-mode="light"] .rollback-card{background:#f2eff9;border-color:#cbc1dc}
html[data-mode="light"] .rollback-card .micro-label{color:#705182}
html[data-mode="light"] .verification-grid p{color:#405775}
html[data-mode="light"] .dev-references p{color:#596d87}
html[data-mode="light"] .status-dot{background:#5b8838;box-shadow:0 0 13px #6e954b50}

@media(max-width:1250px){.topbar .breadcrumb{display:none}.top-actions{flex:1;justify-content:space-between}.topbar{padding-right:24px}.appearance-text,.motion-text{font-size:11px}}
@media(max-width:720px){.topbar{height:auto;min-height:66px;padding:11px 15px;gap:10px}.top-actions{gap:8px}.appearance-text,.motion-text{display:none}.appearance-button{width:36px;min-height:36px;padding:6px}.appearance-controls{gap:5px}.search{flex:1;min-width:0}.search input{width:100%;min-width:55px;padding-left:0}.top-actions .search span{display:none}.mobile-menu{padding:6px}.scopebar{font-size:12px}.ambient-canvas{opacity:.65}.ambient-glow{width:140vw;height:140vw;top:-45vw;right:-40vw}.glow-two{top:55vh;left:-40vw}.appearance-button:disabled{opacity:.65}}
@media(prefers-reduced-motion:reduce){.ambient-glow{will-change:auto;transition:none}html{scroll-behavior:auto!important}}
html[data-motion="still"]{scroll-behavior:auto}
@media print{.ambient-stage,.appearance-controls{display:none!important}html,body{background:white!important}}

/* Keep selected tabs distinct after the generic light-mode button styles. */
html[data-mode="light"] .tabs button.selected{background:var(--scene-accent);color:#fff;border-color:var(--scene-accent)}