:root {
  --bg:#f5f8fc; --card:#fff; --ink:#172e4d; --muted:#536177; --line:#d7e0eb;
  --blue:#2455c7; --green:#166a43; --amber:#895009; --red:#b42332; --violet:#6940b8;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --radius:12px;
  color-scheme:light;
}
* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
html { scroll-padding-top:16px; }
body { font:16px/1.6 "Avenir Next",Avenir,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); display:flex; flex-direction:column; }
a { color:var(--blue); text-underline-offset:3px; }
::selection { background:#cdddff; color:#102d60; }
* { scrollbar-width:thin; scrollbar-color:#9eafc7 transparent; }
code,kbd { font-family:var(--mono); font-size:.9em; }
p code,li code,.tip code,.hint code,.result code:not(.r-msg) { background:#edf2fc; padding:1px 4px; border-radius:4px; color:#17459d; overflow-wrap:anywhere; }
kbd { background:#fff; border:1px solid var(--line); border-radius:4px; padding:1px 6px; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.btn,.icon-btn { display:inline-flex; justify-content:center; align-items:center; gap:6px; min-height:44px; font:600 14px/1.35 "Avenir Next",Avenir,"Segoe UI",sans-serif; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:10px; padding:9px 13px; cursor:pointer; text-decoration:none; transition:background .15s ease-out,transform .15s ease-out,box-shadow .15s ease-out; }
.btn:hover:not(:disabled),.icon-btn:hover:not(:disabled) { background:#eeeafa; border-color:#b4a4d5; }
.btn:active:not(:disabled),.icon-btn:active:not(:disabled) { transform:translateY(1px); }
.btn[hidden] { display:none; }
.btn:disabled,.icon-btn:disabled { opacity:.55; cursor:not-allowed; }
.btn.primary { --press:#2c2a86; background:linear-gradient(125deg,#2f62d8,#7448c8); border-color:#3850ae; color:#fff; box-shadow:0 4px 0 var(--press),0 9px 16px -8px #192d55a6; }
.btn.primary:hover:not(:disabled) { background:linear-gradient(125deg,#2455c7,#6940b8); transform:translateY(-1px); box-shadow:0 5px 0 var(--press),0 12px 18px -8px #192d5588; }
.btn.primary:active:not(:disabled) { transform:translateY(4px); box-shadow:0 0 0 var(--press),0 2px 4px -2px #192d5566; transition-duration:.05s; }
#runBtn { --press:#0e5a37; min-width:132px; padding-inline:22px; font-size:15px; letter-spacing:.01em; background:linear-gradient(160deg,#25b06b,#178a52); border-color:#137347; }
#runBtn:hover:not(:disabled) { background:linear-gradient(160deg,#1fa262,#147c49); }
#runBtn::before { content:''; width:0; height:0; border-block:6px solid transparent; border-inline-start:9px solid currentColor; margin-inline-end:2px; }
.btn.primary:disabled { box-shadow:0 4px 0 #9aa6bb; }
.btn.ghost,.icon-btn { background:transparent; border-color:transparent; }
.btn.danger { color:var(--red); }
.icon-btn { min-width:44px; padding:8px; }
:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.skip { position:fixed; top:-100px; left:16px; padding:12px 18px; background:white; z-index:100; }
.skip:focus { top:12px; }
.text-button { border:0; padding:8px 2px; min-height:44px; background:none; color:var(--blue); font:inherit; font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.topbar { display:flex; align-items:center; gap:12px; padding:12px 24px; background:white; border-bottom:1px solid var(--line); flex-shrink:0; }
.logo { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:800; font-size:18px; white-space:nowrap; }
.logo-mark { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; background:linear-gradient(135deg,#2455c7,#6940b8); color:white; border-radius:10px; font:700 19px/1 var(--mono); }
.logo-mark span { color:#ffdc70; }
.stats { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-inline-start:auto; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.level { display:flex; align-items:center; gap:10px; }
.lvl-num { width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; border:4px solid transparent; border-radius:50%; background:linear-gradient(#50308b,#50308b) padding-box,conic-gradient(from var(--ring),#e9ad31,#d75c7c,#8064d2,#448ce3,#e9ad31) border-box; color:white; font-weight:800; font-size:18px; font-variant-numeric:tabular-nums; }
.level.bump .lvl-num { animation:ring-spin 1.1s cubic-bezier(.16,1,.3,1); }
.level.bump #xpText { animation:xp-glow .9s ease-out; }
.game-stat.bump { animation:chip-pop .5s cubic-bezier(.34,1.56,.64,1); }
.streak-stat.bump svg { animation:flame 1s ease-out; transform-origin:50% 90%; }
.level-details { display:grid; gap:3px; }
.level-details b { color:var(--ink); font-size:13px; line-height:1.2; }
#xpText { font-size:12px; }
#xpProgress { display:block; appearance:none; width:140px; height:11px; border:0; border-radius:11px; background:#e3e8f3; color:#2355c7; overflow:hidden; box-shadow:inset 0 1px 2px #172e4d33; }
#xpProgress::-webkit-progress-bar { background:#e3e8f3; border-radius:11px; }
#xpProgress::-webkit-progress-value { background:linear-gradient(180deg,#ffffff55,#fff0 55%),linear-gradient(90deg,#1ba862,#3b82f6 60%,#8b5cf6); border-radius:11px; transition:width .7s cubic-bezier(.16,1,.3,1); }
#xpProgress::-moz-progress-bar { background:linear-gradient(180deg,#ffffff55,#fff0 55%),linear-gradient(90deg,#1ba862,#3b82f6 60%,#8b5cf6); border-radius:11px; }
@property --ring { syntax:'<angle>'; inherits:false; initial-value:200deg; }
.game-counters { display:flex; gap:10px; }
.game-stat { display:grid; grid-template-columns:18px auto; justify-content:center; align-items:center; column-gap:5px; min-width:60px; padding:5px 8px; border-radius:12px; background:#fff5df; color:#865005; border:1px solid #f3dca8; box-shadow:0 2px 0 #f0d394; }
.game-stat svg { width:18px; height:18px; fill:#ffdc70; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.game-stat b { font-size:16px; line-height:1.2; }
.game-stat>span { grid-column:1/-1; font-size:12px; }
.streak-stat { background:#fff0e5; color:#963c1a; border-color:#f6cfb2; box-shadow:0 2px 0 #f2bf9b; }
.streak-stat svg { fill:#ffd3a1; }
.button-icon { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#trophyBtn { color:#63318c; background:#f3edff; border-color:#e0d6f3; }
.cloud-status { padding:6px 24px; background:#f0f4fa; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; flex-shrink:0; }
.layout { flex:1; min-height:0; display:grid; grid-template-columns:minmax(320px,.85fr) minmax(460px,1.35fr); width:100%; }
.lesson { overflow-y:auto; background:white; padding:32px clamp(24px,3vw,48px) 48px; border-inline-end:1px solid var(--line); }
.workspace { overflow-y:auto; min-height:0; min-width:0; padding:24px clamp(20px,3vw,40px) 48px; display:flex; flex-direction:column; gap:16px; scroll-margin-top:12px; background:linear-gradient(180deg,#f6f3ff,#f3f7fd 70%); }
.workspace-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.workspace-heading h2 { margin:0; font-size:20px; letter-spacing:-.02em; }
.py-status { font-size:12px; font-weight:600; padding:5px 10px; border-radius:5px; }
.py-status.loading { background:#fff4d4; color:#79430b; }
.py-status.ready { background:#e7f5ed; color:#1d6242; }
.py-status.error { background:#ffeded; color:#9a182a; }
.sidebar { position:fixed; inset:0 auto 0 0; width:min(360px,94vw); z-index:45; padding:20px 16px 40px; overflow-y:auto; background:white; border-inline-end:1px solid var(--line); transform:translateX(-100%); visibility:hidden; }
.nav-open .sidebar { visibility:visible; transform:none; box-shadow:12px 0 40px -16px #172e4d55; }
.course-map-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.course-map-head h2 { font-size:20px; margin:0; }
.chapter { border-top:1px solid var(--line); padding:8px 0; }
.ch-head { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; min-height:48px; cursor:pointer; }
.ch-head::after { content:'+'; font-size:20px; font-weight:400; color:var(--muted); }
.chapter[open]>.ch-head::after { content:'−'; }
.ch-head::-webkit-details-marker { display:none; }
.ch-num { display:grid; place-items:center; min-width:26px; height:26px; border:1px solid color-mix(in srgb,var(--c,#2455c7) 40%,white); border-radius:8px; font-size:12px; color:color-mix(in srgb,var(--c,#2455c7) 40%,#172e4d); background:color-mix(in srgb,var(--c,#2455c7) 18%,white); }
.ch-progress { display:block; appearance:none; width:calc(100% - 16px); height:5px; border:0; margin:0 8px 10px; background:#e8edf5; color:var(--c,#2455c7); border-radius:5px; overflow:hidden; }
.ch-progress::-webkit-progress-bar { background:#e8edf5; }
.ch-progress::-webkit-progress-value { background:var(--c,#2455c7); border-radius:5px; }
.ch-progress::-moz-progress-bar { background:var(--c,#2455c7); border-radius:5px; }
.ch-title { flex:1; }
.ch-count { font-size:12px; font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums; }
.ls { display:flex; align-items:center; gap:10px; min-height:44px; padding:8px; border-radius:7px; text-decoration:none; color:var(--ink); font-size:14px; }
.ls:hover { background:#f0f4fa; }
.ls.active { background:#e8effd; font-weight:700; }
.ls-dot { flex-shrink:0; width:17px; height:17px; border:1px solid #9babc1; border-radius:50%; display:grid; place-items:center; font-size:12px; }
.ls.done .ls-dot { background:var(--green); border-color:var(--green); color:white; }
.ls-title { flex:1; }
.ls-stars { color:#805006; font-size:12px; white-space:nowrap; }
.paid-label { display:inline-block; color:var(--muted); font-size:12px; font-weight:500; }
.ls[aria-disabled=true] { opacity:.6; cursor:wait; }
.crumb { color:#52378b; font-size:13px; margin-bottom:12px; }
.crumb>span { display:inline-block; background:#efeafa; border:1px solid #e0d5f0; padding:4px 10px; border-radius:20px; }
.lesson h1 { margin:0 0 24px; font-size:clamp(28px,2.6vw,38px); line-height:1.18; letter-spacing:-.03em; text-wrap:balance; }
summary { cursor:pointer; min-height:44px; align-content:center; font-weight:600; }
#lessonExplanation>summary { color:var(--blue); font-size:14px; margin-bottom:16px; }
.learn,.task-content { max-width:70ch; }
.learn p,.task p { margin:0 0 16px; }
.learn ul,.task ul { padding-inline-start:22px; margin:0 0 16px; }
.learn li,.task li { margin-block:4px; }
.code-demo { margin:0 0 20px; padding:16px; border-radius:8px; background:#152f53; color:#f2f6ff; overflow-x:auto; font:14px/1.7 var(--mono); }
.tk-k { color:#dfc4ff; } .tk-s { color:#d1edaa; } .tk-c { color:#b7c5d8; font-style:italic; }
.tk-n { color:#ffc89b; } .tk-b { color:#abcfff; } .tk-f { color:#ffe2a3; }
.tip { padding:14px 16px; margin-bottom:20px; background:#f0ecfc; border:1px solid #d8cdee; border-radius:10px; font-size:14px; }
.start-exercise { margin-top:8px; }
.nav { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; border-top:1px solid var(--line); padding-top:20px; margin-top:32px; }
.nav .btn { font-size:13px; padding-inline:8px; }
.exercise-tabs { display:flex; gap:4px; margin-bottom:12px; }
.exercise-tabs .btn { flex:1; font-size:13px; padding-inline:6px; }
.exercise-tabs .selected { background:#eee7fc; color:#553088; border-color:#bba4e1; box-shadow:0 3px 8px -5px #1a25454d; }
.task { border:1px solid #c2cfee; border-radius:12px; background:#fff; scroll-margin-top:16px; }
.task>summary { background:#eef0ff; padding:12px 16px; font-size:14px; color:#3a438b; border-radius:11px; }
.task>summary span { font-weight:500; font-size:12px; margin-inline-start:12px; }
.task-content { padding:16px 18px; }
.task-content>.btn { margin-bottom:4px; }
.lesson .task { padding:16px 18px; margin-block:20px; }
.task-content .code-demo { font-size:13px; }
.practice-policy { color:var(--muted); font-size:12px; margin:10px 0 0; line-height:1.5; }
.inputs { font-size:14px; margin-bottom:16px; color:var(--muted); }
.downloads { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:16px; font-size:13px; }
.hint { border:1px solid #dfca96; border-radius:7px; padding:12px 16px; margin-bottom:8px; background:#fff9e9; font-size:14px; }
.hint b { color:#7e4907; margin-inline-end:8px; }
#hints:empty { display:none; }
.toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:6px; position:sticky; top:0; z-index:4; background:var(--bg); padding:8px 0; margin-block:-8px; }
.editor-tools { position:relative; margin-inline-start:auto; }
.editor-tools summary { list-style:none; }
.editor-tools summary::-webkit-details-marker { display:none; }
.tool-options { position:absolute; inset:calc(100% + 4px) 0 auto auto; min-width:220px; padding:8px; border:1px solid var(--line); background:white; border-radius:8px; box-shadow:0 10px 24px -8px #172e4d44; display:grid; z-index:6; }
.tool-options .btn { justify-content:flex-start; }
.editor { position:relative; display:flex; flex-shrink:0; height:clamp(220px,28vh,360px); min-height:220px; border-radius:12px; overflow:hidden; background:#282c34; box-shadow:0 8px 20px -12px #13264f80; }
.editor .cm-editor { flex:1; min-width:0; }
.editor .cm-focused { outline:none; }
.editor:focus-within { outline:3px solid #6940b8; outline-offset:3px; }
.editor.passed { animation:editor-pass 1.1s ease-out; }
.exercise-active .workspace-heading h2 { color:#593391; }
.cm-line.trace-current { background:#214f43; box-shadow:inset 2px 0 #8fdbba; }
.cm-line.trace-previous { background:#ffffff0d; }
.cm-line.trace-return { background:#31476a; box-shadow:inset 2px 0 #a8c6ff; }
.cm-line.trace-error { background:#62343f; box-shadow:inset 2px 0 #ffaeb8; }
.result { border:1px solid var(--line); border-radius:8px; padding:14px 16px; font-size:14px; flex-shrink:0; background:white; scroll-margin:70px; }
.result.idle { color:var(--muted); }
.result.running { background:#eaf0fc; color:#17459d; }
.result.error { background:#fff0f1; border-color:#dfabb2; }
.result.fail { background:#fff8e7; border-color:#deca9a; }
.result.fail,.result.error { animation:nudge .4s ease-out; }
.result.pass { background:radial-gradient(120% 140% at 0 0,#d9f6e4,#f3fcf6 60%); border:2px solid #5fbf86; box-shadow:0 4px 0 #b5e3c6,0 12px 24px -14px #166a4366; display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; animation:card-in .45s cubic-bezier(.16,1,.3,1); }
.r-head { font-size:16px; font-weight:800; }
.result.pass .r-head { font-size:22px; letter-spacing:-.01em; }
.combo { display:inline-flex; align-items:center; gap:4px; padding:4px 10px 4px 6px; border-radius:20px; background:#fff0e5; color:#963c1a; font-size:13px; border:1px solid #f6cfb2; }
.combo svg { width:16px; height:16px; fill:#ffb46b; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.celebrate .combo { animation:chip-pop .5s .5s cubic-bezier(.34,1.56,.64,1) both; }
.result.sample-ok { background:#eefaf2; border-color:#9fd6b4; }
.result.sample-ok .r-head { color:var(--green); }
.judge { flex:1 1 100%; margin-top:10px; }
.jt-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.jt { border:1px solid var(--line); border-inline-start:4px solid var(--line); border-radius:8px; padding:8px 10px; background:#ffffffb8; font-size:13px; color:var(--ink); }
.jt.ok { border-inline-start-color:var(--green); }
.jt.bad { border-inline-start-color:var(--red); }
.jt-head { font-weight:700; }
.jt.ok .jt-mark { color:var(--green); }
.jt.bad .jt-mark { color:var(--red); }
.jt-head small { font-weight:400; color:var(--muted); margin-inline-start:6px; }
.jt-call { display:block; margin:4px 0; }
.result .judge .step-through { min-height:32px; margin:6px 0 0; padding:3px 8px; font-size:13px; }
.jt-sum { margin-top:8px; font-weight:600; }
.jt-sum.bad { color:var(--red); }
.result.error .r-head { color:var(--red); }
.result.fail .r-head { color:var(--amber); }
.result.pass .r-head { color:var(--green); }
.r-msg { display:block; margin-top:8px; font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; color:#861d2b; }
.stars-big { color:#99590a; font-size:34px; line-height:1; letter-spacing:3px; white-space:nowrap; }
.stars-big span { display:inline-block; }
.stars-big .on { color:#f2a900; filter:drop-shadow(0 2px 1px #a35e0688); }
.stars-big .off { color:#c3cad6; }
.celebrate .stars-big .on { animation:game-star .6s cubic-bezier(.34,1.56,.64,1) both; animation-delay:calc(200ms + var(--star) * 160ms); }
.celebrate .r-head { animation:earned .35s ease-out; }
.xp-gain { display:inline-block; color:#fff; background:linear-gradient(125deg,#6940b8,#2f62d8); border-radius:20px; padding:3px 12px; font-size:15px; box-shadow:0 2px 0 #3b2585; }
.celebrate .xp-gain { animation:chip-pop .5s .65s cubic-bezier(.34,1.56,.64,1) both; }
.xp-fly { position:fixed; z-index:70; margin:0; pointer-events:none; }
.result.pass .btn { margin-inline-start:auto; }
.step-through { margin-top:8px; }
.result.pass .step-through { margin:0; }
.visualizer { border:1px solid #ddd4ee; padding:12px; border-radius:12px; background:#faf8ff; }
.visualizer>summary { font-size:15px; color:var(--blue); }
.visualizer>summary span { display:inline; font-size:12px; font-weight:400; color:var(--muted); margin-inline-start:8px; }
.stepper { display:flex; align-items:center; flex-wrap:wrap; gap:4px; padding-top:12px; }
.stepper .icon-btn { font-size:12px; border:1px solid var(--line); }
.stepper .play { background:var(--blue); color:white; }
.stepper .play:hover:not(:disabled) { background:#103ba3; }
#stepRange { flex:1; min-width:90px; min-height:44px; accent-color:var(--blue); }
.step-label { font-size:13px; color:var(--muted); margin:8px 0 12px; }
.viz { min-width:0; }
.panel { min-width:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:white; }
.panel-title { padding:10px 16px; font-size:13px; font-weight:700; border-bottom:1px solid var(--line); }
.frames { overflow:auto; max-height:360px; padding:12px; display:flex; flex-direction:column; gap:12px; }
.empty { padding:8px; color:var(--muted); font-size:14px; }
.output { margin:0; padding:14px 16px; min-height:90px; max-height:280px; overflow:auto; font:14px/1.65 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; }
.frame { padding:8px; }
.frame-name { font:600 13px var(--mono); color:var(--muted); margin-bottom:12px; }
.var { display:flex; align-items:flex-start; gap:12px; padding:5px 0; min-width:0; }
.var.changed { animation:flash 1s ease-out; }
.name { font:600 13px var(--mono); background:#e8effd; color:#153d89; padding:4px 8px; border-radius:4px; white-space:nowrap; }
.var.ret .name { background:#e7f5ed; color:var(--green); }
.v { font:13px var(--mono); padding:4px 8px; border-radius:4px; white-space:pre; }
.v-num { background:#fff1df; color:#8c3b12; }
.v-str { background:#e7f5ed; color:#155a36; }
.v-bool { background:#efe8fa; color:#63308b; }
.v-none,.v-other { background:#edf1f6; color:#46586e; }
.v-fn { background:#fff4d4; color:#79430b; }
.box { display:inline-flex; flex-direction:column; gap:5px; max-width:100%; padding:8px; border:1px solid #bbc9da; border-radius:6px; background:white; }
.box.same { outline:2px solid #956708; outline-offset:2px; }
.ref { font:500 12px var(--mono); color:var(--muted); }
.cells { display:flex; flex-wrap:wrap; gap:4px; }
.seq.grid>.cells { flex-direction:column; }
.cell { display:flex; flex-direction:column; align-items:center; gap:4px; }
.seq.grid>.cells>.cell { flex-direction:row; gap:8px; }
.idx { font:600 12px var(--mono); color:var(--blue); }
.t-tuple { border-style:dashed; }
.kv,.attr { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.arrow { color:var(--muted); }
.key { font:600 13px var(--mono); color:#126079; }
.cells-demo { display:flex; flex-wrap:wrap; gap:4px; margin:8px 0 20px; }
.cd { display:flex; flex-direction:column; align-items:center; }
.cd-v { min-width:34px; padding:6px 8px; background:#fff4d4; border:1px solid #d5bb7e; border-radius:5px; font:600 15px var(--mono); }
.cd-i,.cd-n { font:12px var(--mono); color:var(--muted); }
.data-table { max-width:100%; }
.table-scroll { overflow-x:auto; max-width:100%; }
.data-table table { border-collapse:collapse; font:12px/1.6 var(--mono); white-space:nowrap; }
.data-table td,.data-table th { padding:5px 8px; border:1px solid var(--line); text-align:left; }
.data-table th { background:#edf2fc; }
.frames .var>.data-table { min-width:0; }
.figures figure { margin:16px; }
.figures img { display:block; width:100%; height:auto; background:white; }
.figures figcaption { color:var(--muted); font-size:12px; margin-block:6px; }
.figures:empty { display:none; }
.plot-preview { width:min(960px,94vw); }
.plot-preview img { display:block; width:100%; height:auto; }
dialog { width:min(720px,calc(100vw - 32px)); max-height:90dvh; overflow:auto; border:1px solid var(--line); border-radius:12px; padding:24px; color:var(--ink); box-shadow:0 24px 64px -24px #172e4d77; }
dialog::backdrop { background:#11274666; }
.tro-head { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.tro-head h2 { font-size:24px; margin:0; }
.tro-stats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-block:24px; }
.tro-stats div { font-size:12px; color:var(--muted); }
.tro-stats b { display:block; font-size:20px; color:var(--ink); font-variant-numeric:tabular-nums; }
.badges { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin-bottom:24px; }
.badge { border:1px solid var(--line); border-radius:12px; padding:16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; font-size:13px; color:var(--muted); background:#f6f7fb; }
.badge b { color:var(--ink); font-size:15px; }
.badge.got { border-color:#d7b661; background:linear-gradient(160deg,#fff4ce,#fffdf6); }
.b-icon { font-size:30px; line-height:1.4; }
.auth-form { display:grid; gap:16px; }
.auth-form label { display:grid; gap:6px; font-weight:600; }
.auth-form input { font:inherit; width:100%; border:1px solid #9cacc2; border-radius:6px; padding:10px 12px; }
.account-actions { display:flex; flex-wrap:wrap; gap:8px; margin-block:16px; }
.account-section { padding-top:16px; margin-top:24px; border-top:1px solid var(--line); }
.account-section h3 { margin:0 0 8px; }
.account-section .check { display:flex; align-items:center; gap:12px; min-height:44px; }
#accountMessage { overflow-wrap:anywhere; }
.access-notice { border-top:2px solid var(--blue); padding-block:24px; }
.access-notice h2 { font-size:24px; line-height:1.3; margin:0 0 16px; }
.access-notice .btn { margin:8px 8px 8px 0; }
.unavailable>#hints,.unavailable>.toolbar,.unavailable>.editor,.unavailable>.result,.unavailable>.visualizer,.unavailable>.viz,.unavailable .py-status { display:none; }
.review-banner { font-size:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.toasts { position:fixed; right:16px; bottom:16px; max-width:min(400px,calc(100vw - 32px)); display:grid; gap:8px; z-index:50; }
.toast { color:white; background:linear-gradient(120deg,#373887,#63318c); padding:12px 16px; border-radius:12px; font-size:14px; box-shadow:0 8px 24px -8px #172e4d55; transition:opacity .3s ease-out; }
.toast.out { opacity:0; }
.toast { animation:toast-in .35s cubic-bezier(.16,1,.3,1); }
.toast.achievement { display:flex; align-items:center; gap:12px; color:#4a2a05; background:linear-gradient(120deg,#ffe9a8,#fff7dc 55%,#ffe39a); border:1px solid #e3b84f; font-weight:700; box-shadow:0 4px 0 #d9a93a,0 12px 28px -10px #7a4c0866; }
.toast-icon { display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 2px #e3b84f; font-size:22px; animation:chip-pop .6s .15s cubic-bezier(.34,1.56,.64,1) both; }
.level-up { position:fixed; top:84px; left:50%; z-index:65; display:flex; align-items:center; gap:16px; padding:14px 26px 14px 14px; border-radius:999px; color:#fff; background:linear-gradient(120deg,#3d2385,#6940b8 55%,#2f62d8); box-shadow:0 6px 0 #26145a,0 24px 48px -16px #26145acc; cursor:pointer; transform:translateX(-50%); animation:level-drop .7s cubic-bezier(.16,1,.3,1); transition:opacity .4s ease-out,transform .4s ease-in; }
.level-up.out { opacity:0; transform:translate(-50%,-24px); }
.level-up .lvl-num { width:64px; height:64px; font-size:28px; border-width:5px; animation:ring-spin 1.6s .2s cubic-bezier(.16,1,.3,1); }
.level-up-text { display:grid; line-height:1.2; }
.level-up-text small { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:#ffdc70; }
.level-up-text b { font-size:24px; letter-spacing:-.01em; }
#confetti { position:fixed; inset:0; pointer-events:none; z-index:60; }
@keyframes flash { from { background:#fff0b8; } to { background:transparent; } }
@keyframes game-star { 0% { transform:scale(0) rotate(-40deg); opacity:0; } 60% { transform:scale(1.35) rotate(8deg); opacity:1; } 100% { transform:scale(1) rotate(0); } }
@keyframes chip-pop { 0% { transform:scale(.6); opacity:0; } 60% { transform:scale(1.18); opacity:1; } 100% { transform:scale(1); } }
@keyframes card-in { from { transform:translateY(10px) scale(.97); opacity:.4; } to { transform:none; opacity:1; } }
@keyframes nudge { 0%,100% { transform:none; } 25% { transform:translateX(-5px); } 55% { transform:translateX(4px); } 80% { transform:translateX(-2px); } }
@keyframes editor-pass { 0% { box-shadow:0 0 0 0 #25b06b00,0 8px 20px -12px #13264f80; } 25% { box-shadow:0 0 0 4px #25b06bcc,0 8px 30px -6px #25b06b88; } 100% { box-shadow:0 0 0 0 #25b06b00,0 8px 20px -12px #13264f80; } }
@keyframes ring-spin { from { --ring:200deg; } to { --ring:920deg; } }
@keyframes xp-glow { 0%,100% { color:var(--muted); } 30% { color:#6940b8; } }
@keyframes flame { 0%,100% { transform:none; } 25% { transform:scale(1.35) rotate(-8deg); } 55% { transform:scale(1.15) rotate(6deg); } }
@keyframes toast-in { from { transform:translateY(16px) scale(.96); opacity:0; } to { transform:none; opacity:1; } }
@keyframes level-drop { from { transform:translate(-50%,-40px) scale(.8); opacity:0; } to { transform:translateX(-50%); opacity:1; } }
@keyframes earned { from { transform:translateY(5px); } to { transform:translateY(0); } }
@media(max-width:1050px) { .topbar { padding:12px 16px; gap:8px; flex-wrap:wrap; } .stats { font-size:12px; } .layout { grid-template-columns:minmax(290px,.85fr) minmax(390px,1.15fr); } }
@media(max-width:900px) {
  html,body { height:auto; min-height:100%; }
  .layout { display:block; }
  .topbar { gap:4px 8px; }
  .logo { font-size:16px; }
  .stats { flex-basis:100%; order:2; margin-inline-start:0; padding-top:8px; gap:10px; }
  .level { flex:1; min-width:155px; }
  .game-counters { margin-inline-start:auto; }
  #progressSummary { flex-basis:100%; }
  #reviewBtn { margin-inline-start:auto; }
  .topbar .btn { font-size:12px; padding-inline:10px; }
  .cloud-status { padding:8px 16px; }
  .lesson { border-inline-end:0; border-bottom:1px solid var(--line); padding:24px 18px; }
  .lesson h1 { font-size:30px; margin-bottom:16px; }
  .nav { margin-top:20px; padding-top:12px; }
  .workspace { overflow:visible; padding:24px 18px 48px; }
  .task>summary span { display:block; margin-inline-start:16px; }
  .editor { height:270px; }
  .toolbar { scroll-margin-top:16px; }
  .visualizer>summary span { display:block; margin-inline-start:16px; }
  .stepper { gap:4px; } #stepRange { flex-basis:100%; }
  .tro-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  dialog { padding:20px; }
}
@media(max-width:420px) { .logo { flex:1; } #reviewBtn { margin-inline-start:0; } .topbar #accountBtn { margin-inline-start:auto; } .toolbar .btn { padding-inline:10px; } }
@media(min-width:1200px) {
  .layout { grid-template-columns:230px minmax(300px,.9fr) minmax(440px,1.3fr); }
  .sidebar { position:static; width:auto; visibility:visible; transform:none; z-index:auto; border-inline-end:1px solid var(--line); background:#fafbff; }
  .course-map-head h2 { font-size:17px; }
  .course-map-head #closeMap,#menuBtn { display:none; }
  .sidebar>.small { font-size:12px; }
  .lesson { padding-inline:24px; }
  .workspace { padding-inline:20px; }
}
@media(prefers-reduced-motion:reduce) {
  .var.changed { animation:none; background:#fff0b8; }
  .toast,.btn,.icon-btn,#xpProgress::-webkit-progress-value { transition:none; }
  .celebrate .stars-big .on,.celebrate .r-head,.celebrate .combo,.celebrate .xp-gain,.result.pass,.result.fail,.result.error,.toast,.toast-icon,.level-up,.level-up .lvl-num,.game-stat.bump,.streak-stat.bump svg,.level.bump .lvl-num { animation:none; }
  .level-up { transition:opacity .3s; } .level-up.out { transform:translateX(-50%); }
  .btn.primary:active:not(:disabled) { transform:none; }
}

/* "See it run" lesson visual */
.lesson-visual { margin:8px 0 24px; padding:16px; border:1px solid #d8cdee; border-radius:14px; background:linear-gradient(180deg,#faf8ff,#f4f7fd); container-type:inline-size; }
.lv-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.lv-head h2 { margin:0; font-size:18px; letter-spacing:-.01em; }
.lv-count { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.lv-code { list-style:none; margin:0 0 12px; padding:8px 0; border-radius:10px; background:#152f53; color:#f2f6ff; font:13.5px/1.75 var(--mono); overflow-x:auto; }
.lv-code li { position:relative; display:grid; grid-template-columns:34px 1fr auto; align-items:center; padding-inline-end:10px; transition:background .2s ease-out; }
.lv-code code { white-space:pre; font-size:inherit; background:none; color:inherit; padding:0; }
.lv-ln { color:#7f93b3; text-align:right; padding-inline-end:10px; font-size:12px; user-select:none; }
.lv-times { font-size:11px; color:#ffd58a; font-weight:700; }
.lv-code li.ran { background:#1f5a48; box-shadow:inset 3px 0 #6ee7b7; }
.lv-code li.next .lv-ln { color:#ffd58a; }
.lv-code li.next .lv-ln::before { content:'▶'; position:absolute; left:4px; font-size:9px; color:#ffd58a; }
.lv-code li.error { background:#6a2b39; box-shadow:inset 3px 0 #ffaeb8; }
.lv-stage { position:relative; min-height:96px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.lv-view { position:relative; z-index:1; display:grid; gap:18px; align-items:start; }
@container (min-width:300px) { .lv-view:has(.lv-heap) { grid-template-columns:minmax(0,max-content) minmax(0,1fr); gap:18px 40px; } }
@container (min-width:480px) { .lv-view:has(.lv-heap) { gap:18px 64px; } }
.lv-row { min-width:0; }
.lv-arrows { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:visible; }
.lv-arrow { fill:none; stroke:#7c5cc4; stroke-width:2; }
.lv-arrow.hot { stroke:#d97706; stroke-width:2.5; }
.lv-arrows marker path { fill:#7c5cc4; }
.lv-frames { display:grid; gap:10px; min-width:0; }
.lv-frame { padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#f8fafd; }
.lv-frame.top { border-color:#b8a6e0; background:#f6f2ff; }
.lv-frame-name { font:600 12px var(--mono); color:var(--muted); margin-bottom:6px; }
.lv-row { display:flex; align-items:center; gap:10px; padding:3px 4px; border-radius:6px; min-height:32px; }
.lv-row.new,.lv-row.changed { animation:lv-pulse 1.2s ease-out; }
.lv-name { font:600 13px var(--mono); color:#153d89; background:#e8effd; padding:3px 8px; border-radius:5px; white-space:nowrap; }
.lv-row.ret .lv-name { background:#e7f5ed; color:var(--green); }
.lv-v { font:13px var(--mono); padding:3px 8px; border-radius:5px; white-space:pre; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.lv-num { background:#fff1df; color:#8c3b12; } .lv-str { background:#e7f5ed; color:#155a36; } .lv-bool { background:#efe8fa; color:#63308b; } .lv-none,.lv-other { background:#edf1f6; color:#46586e; }
.lv-dot { display:inline-block; width:12px; height:12px; border-radius:50%; background:#7c5cc4; box-shadow:0 0 0 3px #ece6fa; }
.lv-heap { display:grid; gap:12px; min-width:0; justify-items:start; }
.lv-box { display:inline-grid; gap:6px; max-width:100%; padding:8px 10px 10px; border:1.5px solid #b8a6e0; border-radius:8px; background:#fff; overflow-x:auto; }
.lv-type { font:600 11px var(--mono); color:#6940b8; }
.lv-cells { display:flex; flex-wrap:wrap; gap:3px; }
.lv-cell { display:inline-flex; flex-direction:column; align-items:center; gap:2px; min-width:30px; padding:3px 5px 4px; border:1px solid #d5dcea; border-radius:5px; background:#fbfcff; font:13px var(--mono); }
.lv-cell small { font-size:10px; color:var(--blue); font-weight:700; }
.lv-cell.on { border-color:#d97706; background:#fff4d6; box-shadow:0 0 0 2px #fbbf2466; }
.lv-kv { display:flex; align-items:center; gap:6px; }
.lv-attr { font:600 13px var(--mono); color:#126079; }
.lv-to { color:var(--muted); }
.lv-box table,.lv-table { border-collapse:collapse; font:12px/1.5 var(--mono); }
.lv-box th,.lv-box td,.lv-table th,.lv-table td { padding:4px 9px; border:1px solid var(--line); text-align:left; white-space:nowrap; }
.lv-box thead th,.lv-table thead th { background:#edf2fc; }
.lv-table { width:100%; }
.lv-table td:first-child { color:var(--muted); }
.lv-table tr.now { background:#f3eeff; }
.lv-table td.moved { font-weight:700; color:#6940b8; }
.lv-empty { color:var(--muted); font-size:13px; font-family:inherit; }
.lv-caption { min-height:62px; margin:10px 2px 12px; }
.lv-say { margin:0; font-size:15px; line-height:1.55; }
.lv-diff { margin:4px 0 0; font-size:12.5px; color:var(--muted); }
.lv-diff i { font-style:normal; font-weight:700; color:var(--green); }
.lv-ask { margin:0 0 12px; padding:12px 14px; border:1px solid #e3c67a; border-radius:10px; background:#fff9e6; }
.lv-ask p { margin:0; font-size:14.5px; }
.lv-choices { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.lv-right { color:var(--green); } .lv-wrong { color:#8a4b06; }
.lv-out { display:flex; gap:10px; align-items:baseline; margin-top:10px; font-size:12px; color:var(--muted); }
.lv-out pre { flex:1; margin:0; padding:6px 10px; min-height:30px; max-height:120px; overflow:auto; border-radius:6px; background:#fff; border:1px solid var(--line); font:13px/1.5 var(--mono); color:var(--ink); white-space:pre-wrap; }
.lv-controls { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.lv-controls input { flex:1; min-width:100px; min-height:44px; accent-color:#6940b8; }
.lv-controls [data-go=next] { min-width:96px; }
@keyframes lv-pulse { 0% { background:#fff0b8; } 100% { background:transparent; } }
@media(prefers-reduced-motion:reduce) { .lv-row.new,.lv-row.changed { animation:none; background:#fff6d1; } .lv-code li { transition:none; } }

/* Mock tests (/mock/): one scrolling page, no sidebar. */
.mock-page { height:auto; min-height:100%; }
.mock-nav { display:flex; gap:4px; margin-inline-start:12px; }
.mock-nav a { padding:10px 12px; border-radius:8px; color:var(--ink); font-weight:600; font-size:14px; text-decoration:none; }
.mock-nav a:hover { background:#eeeafa; }
.mock-page .appearance-switch { margin-inline-start:auto; }
.mock { flex:1; width:100%; max-width:1280px; margin:0 auto; padding:20px 24px 48px; }
.mock-card { max-width:860px; padding:8px 0; }
.mock-card h1 { margin:0 0 8px; font-size:28px; line-height:1.25; }
.mock-card h2 { font-size:20px; }
.chip { display:inline-block; padding:2px 9px; border-radius:20px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:12px; font-weight:700; vertical-align:middle; }
.mock-rules { padding-inline-start:22px; }
.mock-rules li { margin-block:8px; }
.mock-list { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:12px; }
.mock-item { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; padding:14px 18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
.mock-item p { margin:4px 0 0; max-width:60ch; }
.mock-bar { position:sticky; top:0; z-index:10; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 20px; padding-block:8px; background:var(--bg); }
@media(max-width:600px) { .mock-bar { flex-wrap:nowrap; gap:10px; } .mock-bar>div:first-child { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .mock-bar .muted { display:none; } .mock-bar .mock-timer { font-size:22px; } }
.mock-timer { font:700 30px/1 var(--mono); font-variant-numeric:tabular-nums; }
.mock-timer .low { color:var(--red); }
.mock-note { margin:6px 0 12px; }
.mock-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.mock-tab { display:grid; gap:2px; min-height:44px; padding:8px 12px; text-align:start; font:inherit; font-size:13px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.mock-tab:hover { border-color:#b4a4d5; background:#f7f4fd; }
.mock-tab.active { border-color:var(--violet); box-shadow:inset 0 -3px 0 var(--violet); }
.mock-tab-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.mock-tab .chip { justify-self:start; margin-top:2px; }
.mock-tab.solved .chip { background:#e7f5ed; border-color:#9fd2b6; color:var(--green); }
.mock-tab.part .chip { background:#fff4d4; border-color:#e3cd8c; color:var(--amber); }
.mock-split { display:grid; grid-template-columns:minmax(300px,1fr) minmax(420px,1.2fr); gap:20px; align-items:start; }
.mock-statement { min-width:0; padding:4px 4px 16px; }
.mock-statement h2 { margin:0 0 10px; font-size:20px; }
.mock-work { display:grid; gap:12px; min-width:0; }
.mock-work .toolbar { display:flex; gap:10px; flex-wrap:wrap; }
.mock-work .editor { height:clamp(260px,40vh,420px); }
#editorHost { display:flex; flex:1; min-width:0; width:100%; }
#editorHost[hidden] { display:none; }
.mock-ref { border:1px solid var(--line); border-radius:10px; background:var(--card); }
.mock-ref summary { padding:10px 14px; font-weight:600; font-size:14px; cursor:pointer; }
.ref-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:4px 16px; padding:0 14px 14px; }
.ref-grid h3 { margin:10px 0 4px; font-size:13px; }
.ref-grid pre { margin:0; padding:10px; overflow-x:auto; border-radius:8px; background:#152f53; color:#f2f6ff; font:12px/1.6 var(--mono); }
.mock-headline { font-size:22px; margin:8px 0; }
.mock-table-wrap { overflow-x:auto; margin:12px 0; }
.mock-table { width:100%; border-collapse:collapse; font-size:14px; }
.mock-table th,.mock-table td { padding:9px 12px; text-align:start; border-bottom:1px solid var(--line); }
.mock-table th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.ok-text { color:var(--green); }
.mock-actions { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }
.mock-review details { border:1px solid var(--line); border-radius:10px; margin-block:10px; background:var(--card); }
.mock-review summary { padding:10px 14px; font-weight:600; cursor:pointer; }
.mock-review h3 { margin:6px 14px; font-size:14px; }
.mock-review .code-demo { margin:0 14px 14px; }
@media (max-width:900px) {
  .mock { padding:14px 14px 40px; }
  .mock-split { grid-template-columns:minmax(0,1fr); }
  .mock-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mock-page .topbar { flex-wrap:wrap; padding:10px 14px; }
}
.topbar a.btn { white-space:nowrap; }
@media(max-width:1240px) { .topbar { flex-wrap:wrap; } }
.drill-timer { margin-inline-start:auto; font:600 13px/1.2 var(--mono); font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap; }
.drill-timer.over { color:var(--amber); }
.readiness-next li { margin-block:6px; }

/* Clean look: one thing at a time. Lesson, then exercises, with a single action bar. */
.flow-bar,.learn-bar,.top-menu { display:none; }
html[data-appearance="current"] .topbar { min-height:56px; padding:6px 20px; gap:14px; flex-wrap:nowrap; }
html[data-appearance="current"] .logo { font-size:16px; gap:8px; }
html[data-appearance="current"] .logo-mark { width:32px; height:32px; border-radius:8px; font-size:16px; }
html[data-appearance="current"] .stats { margin-inline-start:12px; flex-wrap:nowrap; flex-basis:auto; order:0; padding:0; gap:12px; }
html[data-appearance="current"] .lvl-num { width:32px; height:32px; border-width:3px; font-size:14px; }
html[data-appearance="current"] .level { min-width:0; flex:none; gap:8px; }
html[data-appearance="current"] #lvlTitle,html[data-appearance="current"] #xpText,html[data-appearance="current"] #progressSummary,html[data-appearance="current"] .game-stat>span { display:none; }
html[data-appearance="current"] #xpProgress { width:96px; height:8px; }
html[data-appearance="current"] .game-counters { margin:0; gap:8px; }
html[data-appearance="current"] .game-stat { min-width:0; padding:0; background:none; border:0; box-shadow:none; color:var(--ink); }
html[data-appearance="current"] .game-stat b { font-size:14px; }
html[data-appearance="current"] .topbar>a.btn { margin-inline-start:auto; }
html[data-appearance="current"] .top-menu { display:block; position:relative; }
html[data-appearance="current"] .top-menu summary { list-style:none; }
html[data-appearance="current"] .top-menu summary::-webkit-details-marker { display:none; }
html[data-appearance="current"] .top-menu-items { position:absolute; inset:calc(100% + 6px) 0 auto auto; z-index:50; display:grid; gap:2px; min-width:220px; padding:8px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 14px 30px -12px #172e4d55; }
html[data-appearance="current"] .top-menu-items .btn { justify-content:flex-start; width:100%; margin:0; }
html[data-appearance="current"] .top-menu-items .appearance-switch { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 13px; font-size:14px; font-weight:600; }
html[data-appearance="current"] .cloud-status:not(.problem) { display:none; }
html[data-appearance="current"] .layout { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); background:#fff; }
html[data-appearance="current"] .flow-bar { display:block; grid-column:-2/-1; padding:16px max(20px,calc((100% - 820px)/2)) 12px; background:#fff; border-bottom:1px solid var(--line); }
.flow-title { margin:0 0 10px; font-size:22px; line-height:1.2; letter-spacing:-.02em; }
.flow-steps { display:flex; gap:6px; }
.flow-seg { flex:1; min-width:0; min-height:44px; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0; border:0; background:none; font:600 12px/1.2 "Avenir Next",Avenir,"Segoe UI",sans-serif; color:var(--muted); text-align:left; cursor:pointer; }
.flow-seg i { display:block; height:6px; border-radius:6px; background:#e3e8f1; transition:background .25s ease-out; }
.flow-seg span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.flow-seg.done i { background:#25a366; }
.flow-seg.on { color:var(--ink); }
.flow-seg.on i { background:var(--blue); }
.flow-seg:hover:not(:disabled) { color:var(--ink); }
.flow-seg:disabled { cursor:default; }
html[data-appearance="current"] .lesson,html[data-appearance="current"] .workspace { grid-column:-2/-1; display:flex; flex-direction:column; padding:0; gap:16px; border:0; background:#fff; overflow-y:auto; min-height:0; }
html[data-appearance="current"]:not([data-step="practice"]) .workspace,html[data-appearance="current"][data-step="practice"] .lesson { display:none; }
html[data-appearance="current"] .lesson>#lesson,html[data-appearance="current"] .workspace>* { width:min(820px,calc(100% - 40px)); margin-inline:auto; flex-shrink:0; }
html[data-appearance="current"] .lesson>#lesson { padding-block:24px; font-size:17px; }
html[data-appearance="current"] #lesson>.crumb,html[data-appearance="current"] #lesson>h1,html[data-appearance="current"] #lessonExplanation>summary,html[data-appearance="current"] #startExercise,html[data-appearance="current"] #lesson>.nav { display:none; }
html[data-appearance="current"] .learn,html[data-appearance="current"] .task-content { max-width:none; }
html[data-appearance="current"] .learn-bar,html[data-appearance="current"] .workspace>.toolbar { position:sticky; bottom:0; top:auto; z-index:5; display:flex; align-items:center; gap:8px; width:100%; margin:auto 0 0; padding:12px max(20px,calc((100% - 820px)/2)); background:#f5f7fb; border-top:1px solid var(--line); }
html[data-appearance="current"] .learn-bar { justify-content:flex-end; }
html[data-appearance="current"] .learn-bar .btn,html[data-appearance="current"] .toolbar>.btn.primary { min-height:48px; min-width:150px; padding-inline:24px; font-size:16px; }
html[data-appearance="current"] .workspace-heading { padding-top:12px; margin-bottom:-12px; }
html[data-appearance="current"] .workspace-heading h2,html[data-appearance="current"] .py-status.ready { display:none; }
html[data-appearance="current"] .workspace-heading:not(:has(.py-status:not(.ready))) { display:none; }
html[data-appearance="current"] .workspace>#exerciseBrief { padding-top:20px; }
html[data-appearance="current"] .exercise-tabs,html[data-appearance="current"] #taskBrief>summary,html[data-appearance="current"] #taskBtn,html[data-appearance="current"] .policy-text,html[data-appearance="current"] .result.idle { display:none; }
html[data-appearance="current"] .practice-policy:not(:has(button)) { display:none; }
html[data-appearance="current"] #taskBrief { border:0; background:none; }
html[data-appearance="current"] #taskBrief .task-content { padding:0; font-size:18px; line-height:1.55; }
html[data-appearance="current"] #taskBrief .task-content p:last-child,html[data-appearance="current"] #taskBrief .task-content ul:last-child { margin-bottom:0; }
html[data-appearance="current"] .editor { order:0; height:clamp(240px,38vh,460px); }
html[data-appearance="current"] .result { scroll-margin-bottom:100px; }
html[data-appearance="current"] .workspace>.viz { order:1; }
html[data-appearance="current"] .workspace>.visualizer { order:2; margin-bottom:8px; }
html[data-appearance="current"] .workspace>.toolbar { order:9; }
html[data-appearance="current"] .workspace:not(.has-run)>.viz,html[data-appearance="current"] .workspace:not(.has-run)>.visualizer { display:none; }
html[data-appearance="current"] .workspace.unavailable>.toolbar { display:none; }
html[data-appearance="current"] .toolbar>#hintBtn { order:1; }
html[data-appearance="current"] .toolbar>.editor-tools { order:2; margin:0; }
html[data-appearance="current"] .toolbar>#drillTimer { order:3; margin-inline-start:auto; }
html[data-appearance="current"] .toolbar>#samplesBtn { order:4; margin-inline-start:auto; }
html[data-appearance="current"] .toolbar>#runBtn { order:5; margin-inline-start:auto; }
html[data-appearance="current"] .toolbar>#drillTimer:not([hidden])~#samplesBtn,html[data-appearance="current"] .toolbar>#drillTimer:not([hidden])~#runBtn { margin-inline-start:0; }
html[data-appearance="current"] .toolbar>#submitBtn { order:6; }
html[data-appearance="current"] .toolbar>#goNext,html[data-appearance="current"] .toolbar>#finishReview { order:7; animation:chip-pop .4s cubic-bezier(.34,1.56,.64,1); }
html[data-appearance="current"] .toolbar:has(#goNext,#finishReview) #runBtn,html[data-appearance="current"] .toolbar:has(#goNext,#finishReview) #submitBtn { --press:#c5cede; background:#fff; color:var(--ink); border-color:var(--line); min-width:0; font-size:14px; min-height:44px; box-shadow:none; }
html[data-appearance="current"] .toolbar:has(#goNext,#finishReview) #runBtn::before { display:none; }
html[data-appearance="current"] .tool-options { inset:auto auto calc(100% + 6px) 0; }
html[data-appearance="current"] .sidebar>.small,html[data-appearance="current"] .ch-progress { display:none; }
@media(min-width:1200px) {
  html[data-appearance="current"] .layout { grid-template-columns:250px minmax(0,1fr); }
  html[data-appearance="current"] .sidebar { grid-column:1; grid-row:1/3; background:#fbfcfe; padding:16px 12px 32px; }
}
@media(max-width:1240px) { html[data-appearance="current"] .topbar { flex-wrap:nowrap; } }
@media(max-width:900px) {
  html[data-appearance="current"] .layout { display:block; }
  html[data-appearance="current"] .lesson,html[data-appearance="current"] .workspace { overflow:visible; }
  html[data-appearance="current"] .lesson>#lesson { padding-block:16px; }
  html[data-appearance="current"] .topbar { padding:6px 12px; gap:8px; }
  html[data-appearance="current"] .stats { margin-inline-start:auto; width:auto; }
  html[data-appearance="current"] .level,html[data-appearance="current"] .star-stat { display:none; }
  html[data-appearance="current"] .flow-seg span { font-size:11px; }
  html[data-appearance="current"] .topbar>a.btn { display:none; }
  html[data-appearance="current"] .topbar>.top-menu { margin-inline-start:0; }
}
@media(max-width:520px) {
  html[data-appearance="current"] .logo { font-size:0; gap:0; flex:none; }
  html[data-appearance="current"] .learn-bar .btn,html[data-appearance="current"] .toolbar>.btn.primary { min-width:0; flex:1; padding-inline:12px; }
  html[data-appearance="current"] .toolbar>#hintBtn,html[data-appearance="current"] .editor-tools summary { padding-inline:10px; }
  html[data-appearance="current"] .toolbar:has(#goNext,#finishReview)>#hintBtn { display:none; }
}
@media(prefers-reduced-motion:reduce) { .flow-seg i { transition:none; } html[data-appearance="current"] .toolbar>#goNext,html[data-appearance="current"] .toolbar>#finishReview { animation:none; } }
html[data-appearance="current"] .result .btn.ghost { border-color:var(--line); background:#fff; }
html[data-appearance="current"] .ls-stars { color:var(--muted); font-weight:500; }
html[data-appearance="current"] .ls.active .ls-stars { color:var(--ink); }
html[data-appearance="current"] .practice-policy .text-button { font-size:13px; font-weight:500; }

.paywall { max-width:560px; margin:8px auto 24px; }
.paywall h2 { margin:0 0 12px; font-size:26px; line-height:1.2; letter-spacing:-.02em; }
.paywall-list { margin:0 0 20px; padding-inline-start:20px; }
.paywall-list li { margin-block:4px; }
.plans { display:grid; gap:8px; margin:0 0 16px; padding:0; border:0; }
.plans legend { padding:0; margin-bottom:8px; font-size:14px; font-weight:700; }
.plan { display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 16px; background:#fff; border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:border-color .15s ease-out,background .15s ease-out; }
.plan:hover { border-color:#9fb2d8; }
.plan:has(input:checked) { border-color:var(--blue); background:#f2f6ff; box-shadow:inset 0 0 0 1px var(--blue); }
.plan input { flex:none; width:18px; height:18px; margin:0; accent-color:var(--blue); }
.plan-name,.plan-price { display:grid; font-weight:700; line-height:1.3; }
.plan-name { flex:1; min-width:0; }
.plan-price { text-align:right; font-size:18px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.plan small { font-size:12.5px; font-weight:500; color:var(--muted); }
.access-notice .btn,.paywall-go { margin:0; }
.paywall-go { width:100%; min-height:50px; font-size:16px; }
.paywall-terms { margin:12px 0 0; font-size:13px; color:var(--muted); }
.paywall-terms .text-button { min-height:0; padding:0; font-size:13px; }
.paywall-free { display:inline-flex; align-items:center; min-height:44px; margin-top:4px; font-size:14px; }
@media(prefers-reduced-motion:reduce) { .plan { transition:none; } }
.plan-status { display:grid; gap:2px; padding:12px 14px; margin-bottom:12px; border:1px solid var(--line); border-radius:10px; background:#f7f9fc; }
.plan-status b { font-size:17px; }
.plan-status.problem { border-color:#dfabb2; background:#fff0f1; }