:root {
  --ink: #090b18;
  --panel: #101426;
  --panel-2: #151a31;
  --line: rgba(186, 199, 255, .15);
  --muted: #9ba5c5;
  --text: #f5f6ff;
  --violet: #9a78ff;
  --violet-2: #6e42e9;
  --cyan: #59d8ff;
  --mint: #71f5be;
  --coral: #ff9f7a;
  --yellow: #ffd96a;
  --radius: 20px;
  --shadow: 0 24px 80px rgba(0,0,0,.32);
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 76% -20%, #21184c 0, transparent 35%), var(--ink); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea { font: inherit; }
button { color: inherit; }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 100; background: var(--text); color: var(--ink); padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { top: 10px; }

.topbar { height: 78px; display: grid; grid-template-columns: 230px 1fr auto; align-items: center; gap: 22px; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgba(9,11,24,.88); backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 30; }
.brand { border: 0; background: none; display: flex; align-items: center; gap: 11px; cursor: pointer; text-align: left; padding: 0; }
.brand-mark { width: 40px; height: 40px; position: relative; display: inline-block; }
.brand-mark i { position: absolute; inset: 5px; border: 2px solid var(--violet); border-radius: 50%; transform: rotate(55deg) scaleX(.55); box-shadow: 0 0 18px rgba(154,120,255,.28); }
.brand-mark i:nth-child(2) { transform: rotate(-55deg) scaleX(.55); }
.brand-mark i:nth-child(3) { transform: rotate(90deg) scaleX(.55); border-color: var(--cyan); }
.brand-copy { display: flex; align-items: baseline; gap: 5px; letter-spacing: -.03em; }
.brand-copy strong { font-size: 18px; }.brand-copy small { color: var(--muted); font-size: 15px; }
.primary-nav { display: flex; align-items: stretch; height: 100%; gap: 8px; }
.nav-button { border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; padding: 0 12px; cursor: pointer; transition: .2s ease; }
.nav-button span { font-size: 10px; color: #697397; margin-right: 6px; }
.nav-button:hover { color: var(--text); background: rgba(255,255,255,.025); }
.nav-button.active { color: var(--text); border-color: var(--violet); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-button, .profile-button { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.035); cursor: pointer; }
.icon-button:hover, .profile-button:hover { border-color: var(--violet); }
.profile-button { border-radius: 50%; background: linear-gradient(135deg, var(--violet-2), #1596c7); font-weight: 800; }
.guide-button { padding: 10px 14px; border: 1px solid rgba(113,245,190,.3); border-radius: 12px; background: rgba(113,245,190,.07); cursor: pointer; }
.pulse-dot { width: 7px; height: 7px; background: var(--mint); border-radius: 50%; display: inline-block; margin-right: 7px; box-shadow: 0 0 0 5px rgba(113,245,190,.09); }

.app-frame { display: grid; grid-template-columns: 72px 1fr; min-height: calc(100vh - 78px); }
.course-rail { border-right: 1px solid var(--line); padding: 24px 9px; display: flex; flex-direction: column; align-items: center; gap: 24px; position: sticky; height: calc(100vh - 78px); top: 78px; background: rgba(9,11,24,.78); z-index: 10; }
.rail-home { width: 38px; height: 38px; border: 1px solid #343c62; border-radius: 12px; display: grid; place-items: center; color: #7e89ae; background: var(--ink); cursor: pointer; font-size: 19px; }
.rail-home:hover,.rail-home.active { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 18px rgba(89,216,255,.18); }
.rail-line { position: absolute; top: 85px; bottom: 80px; width: 1px; background: linear-gradient(var(--violet), var(--line)); z-index: -1; }
.rail-step { width: 50px; border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #626d94; }
.rail-step b { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #343c62; background: var(--ink); border-radius: 50%; font-size: 12px; }
.rail-step span { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.rail-step.active, .rail-step:hover { color: var(--text); }.rail-step.active b { border-color: var(--violet); background: var(--violet-2); box-shadow: 0 0 22px rgba(154,120,255,.3); }
.rail-progress { margin-top: auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--mint) var(--progress, 0%), #202641 0); position: relative; }
.rail-progress::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ink); }.rail-progress span { font-size: 9px; z-index: 1; }

main { min-width: 0; }
.view { display: none; padding: 26px; }.view.active { display: block; animation: reveal .35s ease; }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } }
.home-hero { min-height: 260px; display: grid; grid-template-columns:minmax(0,1fr) 250px; align-items:end; gap:38px; padding:42px; border:1px solid var(--line); border-radius:var(--radius); background:radial-gradient(circle at 78% 18%,rgba(89,216,255,.12),transparent 26%),radial-gradient(circle at 25% 20%,rgba(154,120,255,.19),transparent 35%),linear-gradient(130deg,#151933,#0b0e1d); box-shadow:var(--shadow); overflow:hidden; position:relative; }
.home-hero::after { content:"ψ"; position:absolute; right:29%; top:-60px; color:rgba(255,255,255,.025); font:280px/1 Georgia,serif; pointer-events:none; }
.home-hero h1 { margin:0; max-width:760px; font:500 clamp(46px,6vw,84px)/.98 Georgia,"Times New Roman",serif; letter-spacing:-.045em; }
.home-hero p:not(.eyebrow) { max-width:720px; color:#bcc4df; line-height:1.65; font-size:16px; margin:22px 0 0; }
.home-progress-card { padding:20px; border:1px solid rgba(113,245,190,.22); border-radius:16px; background:rgba(6,12,22,.55); backdrop-filter:blur(10px); position:relative; z-index:1; }
.home-progress-card>span { color:var(--mint); font-size:9px; letter-spacing:.15em; }
.home-progress-card strong { display:block; margin:8px 0; font:42px/1 Georgia,serif; }
.home-progress-card>div { height:6px; border-radius:99px; background:#293049; overflow:hidden; }.home-progress-card i { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--mint),var(--cyan)); transition:width .3s; }
.home-progress-card small { display:block; color:var(--muted); margin-top:9px; }
.module-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px; }
.module-card { min-height:290px; position:relative; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,rgba(20,25,48,.94),rgba(11,14,28,.97)); color:var(--text); text-align:left; cursor:pointer; overflow:hidden; box-shadow:0 18px 48px rgba(0,0,0,.2); transition:transform .2s,border-color .2s; }
.module-card:hover { transform:translateY(-3px); border-color:rgba(154,120,255,.65); }.module-card:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.module-card::after { content:""; position:absolute; width:180px; height:180px; border-radius:50%; right:-70px; bottom:-80px; background:var(--module-glow,rgba(154,120,255,.12)); filter:blur(2px); }
.module-number { position:absolute; right:22px; top:21px; color:#687399; font:11px/1 ui-monospace,monospace; letter-spacing:.1em; }.module-icon { display:grid; place-items:center; width:50px; height:50px; margin-bottom:30px; border:1px solid rgba(154,120,255,.3); border-radius:15px; background:rgba(154,120,255,.09); color:var(--violet); font:24px/1 Georgia,serif; }
.module-card small { color:var(--cyan); font-size:9px; letter-spacing:.15em; }.module-card h2 { margin:8px 0 11px; font:500 28px/1.1 Georgia,serif; }.module-card p { max-width:600px; min-height:66px; color:var(--muted); line-height:1.55; font-size:13px; }.module-card>strong { display:block; margin-top:18px; color:#dcd8f2; font-size:12px; }.module-card>strong i { color:var(--cyan); margin-left:6px; }
.build-card { --module-glow:rgba(89,216,255,.13); }.build-card .module-icon { color:var(--cyan); border-color:rgba(89,216,255,.28); background:rgba(89,216,255,.07); }.math-card { --module-glow:rgba(255,217,106,.12); }.math-card .module-icon { color:var(--yellow); border-color:rgba(255,217,106,.28); background:rgba(255,217,106,.07); }.code-card { --module-glow:rgba(113,245,190,.12); }.code-card .module-icon { color:var(--mint); border-color:rgba(113,245,190,.28); background:rgba(113,245,190,.07); font:15px/1 ui-monospace,monospace; }
.future-modules { display:flex; align-items:center; gap:16px; margin-top:18px; padding:20px 24px; border:1px dashed #343d64; border-radius:16px; color:var(--muted); }.future-modules>span { width:42px; height:42px; display:grid; place-items:center; border:1px dashed #4d5889; border-radius:12px; color:var(--violet); font-size:24px; }.future-modules strong { color:var(--text); }.future-modules p { margin:4px 0 0; font-size:12px; line-height:1.5; }
.course-header, .view-heading { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; padding: 18px 24px; background: linear-gradient(110deg, rgba(23,28,51,.95), rgba(13,16,31,.8)); }
.eyebrow { margin: 0 0 7px; color: var(--cyan); letter-spacing: .16em; font-size: 10px; font-weight: 800; }
.breadcrumb { color: var(--muted); font-size: 14px; }.breadcrumb i { margin: 0 9px; }.breadcrumb strong { color: var(--text); }
.course-meter { min-width: 190px; text-align: right; color: var(--muted); font-size: 12px; }.course-meter b { color: var(--text); }
.course-meter div { height: 5px; margin-top: 8px; background: #272d47; border-radius: 99px; overflow: hidden; }.course-meter i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--violet),var(--cyan)); transition: width .3s; }
.learning-grid { display: grid; grid-template-columns: 248px minmax(380px, 1fr) minmax(390px, .95fr); min-height: calc(100vh - 224px); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }

.lesson-sidebar { border-right: 1px solid var(--line); background: rgba(12,15,29,.8); padding: 17px 12px; overflow: auto; max-height: calc(100vh - 146px); }
.sidebar-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 10px 12px; color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .13em; }.sidebar-heading button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.lesson-list { display: grid; gap: 4px; }
.lesson-sidebar.list-collapsed .lesson-list,
.lesson-sidebar.list-collapsed .text-button { display: none; }
.lesson-item { width: 100%; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid transparent; border-radius: 11px; background: transparent; text-align: left; cursor: pointer; color: var(--muted); }
.lesson-item:hover { background: rgba(255,255,255,.03); color: var(--text); }.lesson-item.active { border-color: rgba(154,120,255,.3); background: linear-gradient(90deg, rgba(110,66,233,.22), transparent); color: var(--text); }
.lesson-item.completed .lesson-index { background: var(--mint); color: #07251b; border-color: var(--mint); }.lesson-item.completed .lesson-index::after { content: "✓"; }.lesson-item.completed .lesson-index span { display: none; }
.lesson-index { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #374064; border-radius: 50%; font-size: 10px; }
.lesson-item strong { font-size: 12px; font-weight: 650; line-height: 1.25; }.lesson-item small { font-size: 9px; color: #657097; }
.text-button { border: 0; background: transparent; color: #707a9d; padding: 16px 10px 4px; cursor: pointer; font-size: 11px; text-decoration: underline; }

.lesson-reading { padding: clamp(28px,4vw,54px); max-height: calc(100vh - 146px); overflow-y: auto; }
.lesson-meta { display: flex; gap: 8px; }.lesson-meta span { font-size: 9px; letter-spacing: .1em; border: 1px solid var(--line); border-radius: 99px; padding: 5px 8px; color: var(--muted); }
.lesson-kicker { color: var(--violet); font-weight: 750; letter-spacing: .05em; margin: 34px 0 8px; font-size: 12px; text-transform: uppercase; }
.lesson-reading h1, .view-heading h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.035em; }
.lesson-reading h1 { margin: 0; font-size: clamp(38px,4vw,62px); line-height: .98; }.lesson-summary { font-size: 19px; line-height: 1.65; color: #c6cbe0; margin: 25px 0 30px; }
.lesson-body { color: var(--muted); font-size: 15px; line-height: 1.75; }.lesson-body h2 { color: var(--text); font-size: 18px; margin: 28px 0 8px; }.lesson-body ul { padding-left: 19px; }.lesson-body li { margin: 7px 0; }.lesson-body code, .formula { font-family: "Cascadia Code", Consolas, monospace; color: var(--cyan); }
.concept-callout { margin: 28px 0; padding: 18px 20px; border: 1px solid rgba(89,216,255,.25); border-left: 3px solid var(--cyan); background: rgba(89,216,255,.055); border-radius: 8px 14px 14px 8px; color: #cdd8ef; line-height: 1.55; }.concept-callout strong { color: var(--cyan); display: block; margin-bottom: 4px; }
.knowledge-check { border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin-top: 34px; background: rgba(255,255,255,.018); }.check-header { display: flex; justify-content: space-between; }.check-header span:first-child { color: var(--violet); font-size: 9px; letter-spacing: .14em; }.check-header h2 { margin: 5px 0 14px; font-size: 19px; }.check-icon { width: 28px; height: 28px; display: grid; place-items: center; background: rgba(154,120,255,.15); border-radius: 50%; color: var(--violet); }.knowledge-check > p { color: #dce0f2; }
.quiz-options { display: grid; gap: 8px; }.quiz-option { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; text-align: left; background: rgba(255,255,255,.02); color: var(--muted); cursor: pointer; }.quiz-option:hover { border-color: var(--violet); color: var(--text); }.quiz-option.correct { border-color: var(--mint); background: rgba(113,245,190,.09); color: var(--mint); }.quiz-option.wrong { border-color: var(--coral); color: var(--coral); }.quiz-feedback { min-height: 22px; font-size: 12px; color: var(--muted); }
.lesson-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.primary-button, .secondary-button, .ghost-button, .measure-button { border-radius: 11px; padding: 11px 15px; border: 1px solid transparent; cursor: pointer; transition: .18s ease; }.primary-button { background: linear-gradient(135deg,var(--violet-2),#8c61f2); box-shadow: 0 10px 26px rgba(110,66,233,.22); }.primary-button:hover { transform: translateY(-1px); filter: brightness(1.1); }.secondary-button { background: rgba(255,255,255,.035); border-color: var(--line); color: #d6daeb; }.secondary-button:hover { border-color: var(--violet); }.secondary-button.compact { padding: 9px 11px; font-size: 11px; }.ghost-button { background: transparent; border-color: transparent; color: var(--muted); }.measure-button { background: rgba(89,216,255,.1); border-color: rgba(89,216,255,.3); color: var(--cyan); }

.apply-panel { border-left: 1px solid var(--line); background: radial-gradient(circle at 50% 28%, rgba(67,50,133,.22), transparent 42%), rgba(10,12,25,.8); padding: 18px 22px 28px; max-height: calc(100vh - 146px); overflow-y: auto; }
.apply-heading { display: flex; justify-content: space-between; align-items: center; color: var(--violet); font-size: 10px; letter-spacing: .14em; }.apply-heading i { width: 7px; height: 7px; background: var(--violet); display: inline-block; border-radius: 50%; margin-right: 7px; }
.bloch-wrap { position: relative; min-height: 330px; }.bloch-wrap canvas { width: 100%; height: auto; display: block; }.axis-label { position: absolute; color: #dce1f3; font-family: Georgia,serif; }.z-plus { left: 51%; top: 9%; }.z-minus { left: 51%; bottom: 11%; }.state-chip { position: absolute; right: 3%; bottom: 8%; background: rgba(8,10,22,.8); border: 1px solid var(--line); padding: 8px 11px; border-radius: 10px; }.state-chip span { display: block; color: var(--muted); font-size: 8px; letter-spacing: .12em; }.state-chip strong { color: var(--cyan); font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; }
.probability-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.probability-grid > div { display: grid; grid-template-columns: 1fr auto; gap: 7px; color: var(--muted); font-size: 10px; }.probability-grid strong { color: var(--text); }.probability-grid i { grid-column: 1/-1; height: 4px; background: #242a45; border-radius: 99px; overflow: hidden; }.probability-grid b { display: block; height: 100%; width: 0; background: var(--cyan); transition: width .25s; }.probability-grid > div:nth-child(2) b { background: var(--violet); }
.angle-controls { margin-top: 20px; }.angle-controls label { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }.angle-controls output { color: var(--text); font-family: monospace; }.angle-controls input, .rotation-row input { width: 100%; accent-color: var(--violet); margin: 8px 0 13px; }
.gate-section { border-top: 1px solid var(--line); padding-top: 17px; }.gate-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; }.gate-label small { color: var(--muted); }.gate-palette { display: grid; grid-template-columns: repeat(6,1fr); gap: 7px; margin-top: 10px; }.gate-palette button, .rotation-row button, .tool-gates button { aspect-ratio: 1; min-width: 0; border: 1px solid rgba(154,120,255,.35); border-radius: 9px; background: linear-gradient(145deg,rgba(154,120,255,.16),rgba(255,255,255,.02)); color: #ded6ff; cursor: pointer; font-family: Georgia,serif; font-size: 16px; }.gate-palette button:hover, .rotation-row button:hover, .tool-gates button:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-1px); }
.rotation-row { display: grid; grid-template-columns: 36px 36px 36px 1fr 46px; align-items: center; gap: 7px; margin-top: 8px; }.rotation-row button { height: 36px; }.rotation-row output { font-size: 10px; color: var(--muted); }
.measurement-row { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }.measurement-result { margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.5; min-height: 34px; }

.view-heading { border-radius: var(--radius); min-height: 150px; padding: 28px 34px; }.view-heading h1 { margin: 0 0 10px; font-size: clamp(38px,5vw,68px); }.view-heading p:last-child { margin: 0; color: var(--muted); }.formula-pill, .sandbox-label { border: 1px solid rgba(89,216,255,.25); border-radius: 99px; padding: 12px 17px; color: var(--cyan); background: rgba(89,216,255,.05); font-family: Georgia,serif; }.sandbox-label { font: 10px/1 ui-sans-serif,system-ui; letter-spacing: .14em; }.sandbox-label span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); margin-right: 7px; }
.lab-layout, .code-layout { display: grid; grid-template-columns: 1.5fr .8fr; gap: 18px; margin-top: 18px; }.circuit-card,.results-card,.editor-card,.console-card,.math-workbench,.challenge-strip,.syntax-reference { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg,rgba(20,25,48,.9),rgba(11,14,28,.92)); box-shadow: var(--shadow); }.circuit-card,.results-card,.console-card,.math-workbench { padding: 22px; }.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }.card-top span { color: var(--violet); font-size: 9px; letter-spacing: .14em; }.card-top h2 { margin: 5px 0 0; font-size: 20px; }.status-badge { border: 1px solid rgba(255,217,106,.3); background: rgba(255,217,106,.08); color: var(--yellow)!important; border-radius: 99px; padding: 6px 9px; letter-spacing: 0!important; }.status-badge.cyan { color: var(--cyan)!important; border-color: rgba(89,216,255,.3); background: rgba(89,216,255,.07); }
.composer-tools { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin: 24px 0; }.target-select { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }.target-select button { padding: 9px 11px; border: 0; color: var(--muted); background: transparent; cursor: pointer; }.target-select button.active { background: var(--violet-2); color: white; }.tool-gates { display: flex; gap: 6px; }.tool-gates button { width: 37px; height: 37px; }.two-gate { padding: 9px 11px; border: 1px solid rgba(89,216,255,.25); border-radius: 9px; background: rgba(89,216,255,.06); color: var(--cyan); cursor: pointer; }
.circuit-board { min-height: 250px; border: 1px solid var(--line); border-radius: 14px; padding: 30px 20px; background: repeating-linear-gradient(90deg,transparent 0,transparent 79px,rgba(255,255,255,.02) 80px); overflow-x: auto; }.wire-row { display: flex; align-items: center; min-width: 650px; height: 80px; position: relative; }.wire-row::before { content:""; position:absolute; left: 42px; right: 0; height: 1px; background:#465072; }.wire-label { width: 42px; z-index: 1; color: var(--muted); font-family: monospace; }.gate-slots { display: grid; grid-auto-flow: column; grid-auto-columns: 58px; gap: 8px; z-index:1; }.circuit-chip { width: 42px; height: 42px; border-radius: 8px; background: #201650; border: 1px solid var(--violet); display: grid; place-items: center; font-family: Georgia,serif; font-weight: 700; }.circuit-chip.empty { background: transparent; border-color: transparent; }.circuit-chip.control { border-radius: 50%; width: 12px; height: 12px; background: var(--cyan); border:0; justify-self:center; }.circuit-chip.target { border-radius:50%; background:transparent; border-color:var(--cyan); color:var(--cyan); }.circuit-actions { display:flex; justify-content:space-between; margin-top:18px; }
.histogram { display:grid; gap:13px; margin:28px 0; }.hist-row { display:grid; grid-template-columns:36px 1fr 48px; align-items:center; gap:10px; font-family:monospace; font-size:12px; }.hist-track { height:18px; background:#222942; border-radius:4px; overflow:hidden; }.hist-fill { height:100%; min-width:1px; background:linear-gradient(90deg,var(--violet),var(--cyan)); border-radius:4px; transition:width .4s; }.state-vector { padding:14px; border:1px solid var(--line); border-radius:12px; }.state-vector span { display:block;color:var(--muted);font-size:9px;letter-spacing:.13em;margin-bottom:7px; }.state-vector code { color:var(--cyan);font-size:12px;white-space:normal; }.insight-card { margin-top:16px;padding:16px;border-left:3px solid var(--mint);background:rgba(113,245,190,.05);border-radius:8px; }.insight-card p { color:var(--muted);font-size:12px;line-height:1.55;margin-bottom:0; }.challenge-strip { margin-top:18px;padding:22px 26px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px; }.challenge-strip span { color:var(--coral);font-size:9px;letter-spacing:.14em; }.challenge-strip h2 { margin:5px 0;font-size:20px; }.challenge-strip p { color:var(--muted);margin:0;font-size:12px; }.challenge-strip > p:last-child { grid-column:1/-1;color:var(--mint); }

.math-layout { display:grid;grid-template-columns:.8fr 1.25fr;gap:18px;margin-top:18px; }.math-topics { display:grid;gap:10px; }.math-topic { width:100%;border:1px solid var(--line);border-radius:14px;padding:16px;background:rgba(18,22,42,.85);text-align:left;cursor:pointer;display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center; }.math-topic:hover,.math-topic.active { border-color:var(--violet);background:linear-gradient(100deg,rgba(110,66,233,.18),rgba(18,22,42,.85)); }.math-symbol { width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:#21184d;color:var(--violet);font-family:Georgia,serif;font-size:20px; }.math-topic strong { display:block;font-size:14px; }.math-topic small { color:var(--muted); }.math-topic > span:last-child { color:var(--muted); }.math-workbench { min-height:470px; }.workbench-copy { color:var(--muted);line-height:1.7; }.formula-display { margin:24px 0;padding:24px;border:1px solid rgba(89,216,255,.22);border-radius:15px;background:rgba(89,216,255,.04);font:24px/1.4 Georgia,serif;color:var(--cyan);text-align:center; }.practice-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }.practice-card { padding:14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02); }.practice-card label { display:block;color:var(--muted);font-size:11px;margin-bottom:7px; }.practice-card input { width:100%;background:#0c1021;border:1px solid var(--line);color:var(--text);padding:10px;border-radius:8px; }.practice-result { margin-top:16px;color:var(--mint);min-height:22px; }

.editor-card { overflow:hidden; }.editor-bar { display:flex;justify-content:space-between;align-items:center;background:#171b31;border-bottom:1px solid var(--line);padding:11px 16px;color:var(--muted);font-size:11px; }.editor-bar button { border:0;background:transparent;color:var(--violet);cursor:pointer;margin-left:8px; }.editor-shell { display:grid;grid-template-columns:46px 1fr;min-height:480px;background:#080b17; }.line-numbers { padding:18px 11px;text-align:right;color:#444e70;font:14px/1.7 "Cascadia Code",Consolas,monospace;border-right:1px solid var(--line);white-space:pre; }.editor-shell textarea { resize:none;border:0;outline:0;padding:18px;background:transparent;color:#d5dcff;font:14px/1.7 "Cascadia Code",Consolas,monospace;tab-size:4; }.editor-actions { display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-top:1px solid var(--line); }.editor-actions span { color:var(--muted);font-size:10px; }.console-card pre { min-height:190px;white-space:pre-wrap;color:#aab4d8;font:12px/1.6 "Cascadia Code",Consolas,monospace;background:#080b17;padding:14px;border:1px solid var(--line);border-radius:11px; }.compact-chart { margin:17px 0; }.code-explainer { border-left:3px solid var(--violet);padding:12px 15px;background:rgba(154,120,255,.05);border-radius:7px; }.code-explainer p { color:var(--muted);font-size:12px;line-height:1.55;margin-bottom:0; }.syntax-reference { margin-top:18px;padding:22px; }.syntax-reference h2 { margin-top:0; }.syntax-reference > div { display:grid;grid-template-columns:repeat(4,1fr);gap:10px; }.syntax-card { padding:14px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.02); }.syntax-card code { color:var(--cyan);font-size:12px; }.syntax-card p { color:var(--muted);font-size:11px;line-height:1.45;margin-bottom:0; }

dialog { color:var(--text);border:1px solid var(--line);border-radius:20px;background:#0e1224;box-shadow:var(--shadow);padding:0; }
dialog:not([open]) { display:none; }
.guide-dialog { width:min(520px,calc(100% - 28px));margin-right:18px;height:calc(100vh - 116px);margin-top:96px; }
.guide-dialog.fallback-open { position:fixed;z-index:90;top:0;right:0;left:auto;bottom:auto;display:block; }
.progress-dialog.fallback-open { position:fixed;z-index:90;left:50%;top:50%;transform:translate(-50%,-50%);display:block; }
body.modal-fallback::after { content:"";position:fixed;inset:0;background:rgba(3,5,13,.72);backdrop-filter:blur(5px);z-index:85; }
.guide-dialog::backdrop,.progress-dialog::backdrop { background:rgba(3,5,13,.7);backdrop-filter:blur(5px); }.guide-shell { height:100%;display:grid;grid-template-rows:auto 1fr auto auto auto; }.guide-header { display:grid;grid-template-columns:44px 1fr auto;gap:11px;align-items:center;padding:18px;border-bottom:1px solid var(--line); }.guide-avatar { width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,var(--violet-2),#1596c7);font-weight:900; }.guide-header span { color:var(--mint);font-size:8px;letter-spacing:.14em; }.guide-header h2 { margin:3px 0 0; }.guide-messages { padding:18px;overflow:auto;display:flex;flex-direction:column;gap:11px; }.guide-message { max-width:86%;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03); }.guide-message.user { margin-left:auto;background:rgba(110,66,233,.18);border-color:rgba(154,120,255,.28); }.guide-message p { color:var(--muted);font-size:12px;line-height:1.55;margin:5px 0 0; }.guide-message a { color:var(--cyan); }.suggested-prompts { display:flex;gap:6px;flex-wrap:wrap;padding:0 18px 11px; }.suggested-prompts button { border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--muted);padding:7px 9px;font-size:10px;cursor:pointer; }.guide-input { display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px 18px;border-top:1px solid var(--line); }.guide-input input { border:1px solid var(--line);background:#090c1a;color:var(--text);border-radius:10px;padding:11px; }.guide-input button { border:0;border-radius:10px;background:var(--violet-2);padding:0 15px;color:white;cursor:pointer; }.guide-disclaimer { margin:0;padding:0 18px 14px;color:#697397;font-size:9px; }.progress-dialog { width:min(520px,calc(100% - 28px)); }.progress-dialog form { padding:28px;position:relative; }.dialog-close { position:absolute;right:18px;top:18px; }.progress-dialog h2 { font:32px/1.1 Georgia,serif; }.big-progress { display:flex;gap:20px;align-items:center;margin:28px 0; }.big-progress > div { width:100px;height:100px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--mint) var(--progress,0%),#232943 0);position:relative; }.big-progress > div::after { content:"";position:absolute;inset:7px;border-radius:50%;background:#0e1224; }.big-progress span { z-index:1;font-size:20px;font-weight:800; }.achievement-list { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }.achievement-list span { padding:11px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:10px; }.credential-note { color:var(--muted);font-size:11px;line-height:1.55;margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line); }
.account-summary { color:var(--muted); font-size:12px; margin:8px 0 0; }.signout-link { display:inline-block; margin-top:17px; padding:0; border:0; background:transparent; color:var(--violet); font-size:11px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.toast { position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);padding:10px 16px;border:1px solid rgba(113,245,190,.35);border-radius:99px;background:#101b1b;color:var(--mint);font-size:12px;opacity:0;pointer-events:none;transition:.25s;z-index:80; }.toast.show { opacity:1;transform:translate(-50%,0); }

/* AI coaching stays visually secondary to the deterministic learning tools. */
.inline-ai-coach { margin-top:18px;padding-top:17px;border-top:1px solid var(--line); }
.ai-coach-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px; }
.ai-coach-heading>div { display:grid;gap:3px; }
.ai-coach-heading span { color:var(--cyan)!important;font-size:8px!important;letter-spacing:.14em; }
.ai-coach-heading strong { font-size:12px; }
.ai-coach-heading small { color:var(--mint);border:1px solid rgba(113,245,190,.22);border-radius:99px;padding:5px 8px;font-size:8px; }
.ai-actions,.practice-actions { display:flex;gap:8px;flex-wrap:wrap; }
.practice-actions { justify-content:flex-end; }
.practice-coach { align-items:start; }
.practice-coach>p,.practice-coach>.ai-question-row,.practice-coach>.ai-response { grid-column:1/-1; }
.practice-coach>p { min-height:18px;color:var(--mint); }
.ai-question-row { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:12px; }
.ai-question-row input { min-width:0;border:1px solid var(--line);background:#090c1a;color:var(--text);border-radius:10px;padding:11px 12px; }
.ai-question-row input:focus { outline:2px solid rgba(89,216,255,.35);border-color:var(--cyan); }
.ai-question-row button { border:0;border-radius:10px;background:linear-gradient(135deg,#126c88,var(--violet-2));color:white;padding:0 16px;cursor:pointer; }
.ai-response { min-height:0;color:var(--muted);font-size:12px;line-height:1.6;white-space:pre-wrap; }
.ai-response:not(:empty) { margin-top:11px;padding:12px 14px;border-left:3px solid var(--cyan);border-radius:7px;background:rgba(89,216,255,.045); }
.thinking-dots { display:inline-flex;align-items:center;gap:5px;min-width:38px;padding:4px 1px; }
.thinking-dots i { width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:thinking-bounce 1s infinite ease-in-out; }
.thinking-dots i:nth-child(2) { animation-delay:.15s; }.thinking-dots i:nth-child(3) { animation-delay:.3s; }
@keyframes thinking-bounce { 0%,60%,100% { transform:translateY(0);opacity:.35; } 30% { transform:translateY(-5px);opacity:1; } }
.primary-button:disabled,.secondary-button:disabled,.ai-question-row button:disabled,.guide-input button:disabled { opacity:.55;cursor:wait;transform:none; }
.math-practice-coach { margin-top:16px;padding-top:16px;border-top:1px solid var(--line); }
.math-practice-coach h3 { margin:4px 0 7px;font-size:16px; }
.math-practice-coach>p { color:var(--muted);font-size:12px;line-height:1.55; }
.practice-source { color:var(--mint);font-size:8px;letter-spacing:.11em;text-transform:uppercase; }

@media (max-width: 1180px) {
  .learning-grid { grid-template-columns:210px 1fr; }.apply-panel { grid-column:1/-1;border-left:0;border-top:1px solid var(--line);max-height:none;display:grid;grid-template-columns:1.1fr 1fr;gap:20px; }.apply-heading { grid-column:1/-1; }.bloch-wrap { grid-row:2/7; }.lab-layout,.code-layout { grid-template-columns:1fr; }.syntax-reference > div { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 780px) {
  .topbar { height:68px;grid-template-columns:1fr auto;padding:0 14px;backdrop-filter:none; }.brand-copy small,.header-actions>.icon-button,.header-actions>.profile-button { display:none; }.primary-nav { position:fixed;left:0;right:0;bottom:0;height:60px;background:#0c1020;border-top:1px solid var(--line);z-index:50;justify-content:space-around; }.nav-button { padding:0 5px;font-size:10px; }.nav-button span { display:block;margin:0 0 3px;}.home-nav { padding-top:11px; }.app-frame { grid-template-columns:1fr; }.course-rail { display:none; }.view { padding:12px 12px 76px; }.home-hero { min-height:0;grid-template-columns:1fr;padding:28px 22px;gap:26px;}.home-hero h1{font-size:49px}.home-progress-card{width:100%}.module-grid{grid-template-columns:1fr}.module-card{min-height:260px;padding:23px}.course-header { border-radius:15px 15px 0 0;padding:14px; }.course-meter { min-width:100px; }.learning-grid { grid-template-columns:1fr; }.lesson-sidebar { max-height:230px;border-right:0;border-bottom:1px solid var(--line); }.lesson-reading { max-height:none;padding:30px 22px; }.apply-panel { display:block;max-height:none;padding:20px 18px; }.view-heading { align-items:flex-start;flex-direction:column;padding:24px 20px; }.view-heading h1 { font-size:42px; }.lab-layout,.code-layout,.math-layout { grid-template-columns:1fr; }.challenge-strip { grid-template-columns:1fr; }.syntax-reference > div { grid-template-columns:1fr; }.practice-grid { grid-template-columns:1fr; }.guide-dialog { margin:74px auto 66px;height:calc(100vh - 154px); }.achievement-list { grid-template-columns:1fr; }
}
@media (max-width: 780px) {
  .practice-actions { justify-content:flex-start; }
  .ai-question-row { grid-template-columns:1fr; }
  .ai-question-row button { min-height:42px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important;transition:none!important;animation:none!important; } }