/* Shared stylesheet for Expert Algo Lab demo animations (enlarged scale) */
:root{
  --bg:#0a0c14; --panel:#111524; --panel2:#0d1120; --line:#222c44;
  --ink:#eaf0fb; --dim:#8593b2; --dim2:#5f6c8a;
  --accent:#5ad1ff; --accent2:#8b7bff; --accent3:#5be0c8; --gold:#ffd166;
  --good:#5be7a9; --bad:#ff6b8a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(1200px 700px at 72% -10%, #16203a 0%, var(--bg) 55%);
  color:var(--ink);
  font-family:"Pretendard",-apple-system,system-ui,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  -webkit-font-smoothing:antialiased;font-synthesis:none;
}
.wrap{display:grid;grid-template-columns:360px 1fr;grid-template-rows:auto 1fr auto;height:100vh}
.wrap3{display:grid;grid-template-columns:340px 1fr 380px;grid-template-rows:auto 1fr auto;height:100vh}
.wrap3 header.bar{grid-column:1/4}
.wrap3 footer.ctrl{grid-column:1/4}
/* substep sidebar */
aside.chapters{border-right:1px solid var(--line);background:var(--panel2);overflow-y:auto;padding:14px 12px}
.chap{border-radius:12px;margin-bottom:7px;overflow:hidden;border:1px solid transparent}
.chap.active{border-color:var(--accent);background:#141b30}
.chap-head{cursor:pointer;padding:12px 14px;transition:.15s}
.chap-head:hover{background:#172037}
.chap-head .n{font-size:12.5px;color:var(--accent3);font-weight:800;letter-spacing:.4px}
.chap-head .t{font-size:15.5px;font-weight:700;margin-top:2px}
.substeps{display:none;padding:3px 9px 9px}
.chap.active .substeps{display:block}
.substep{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--dim);padding:6px 8px;border-radius:8px;cursor:pointer;transition:.12s;line-height:1.4}
.substep:hover{background:#1a2138;color:var(--ink)}
.substep.cur{background:#1d2742;color:var(--ink)}
.substep.why{color:#ffb0c0}
.substep .si{font-variant-numeric:tabular-nums;color:var(--gold);font-weight:700;flex:0 0 auto;min-width:30px;font-size:13px}
.substep.cur .si{color:var(--accent)}
.substep.why .si{color:var(--bad)}
/* code panel */
aside.code{border-left:1px solid var(--line);background:#0a0d18;overflow-y:auto;padding:18px;font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}
aside.code h3{font-size:12.5px;color:var(--dim2);letter-spacing:1.5px;font-weight:700;margin:0 0 10px;text-transform:uppercase}
aside.code .codefn{font-size:13.5px;color:#5be0c8;margin-bottom:10px}
aside.code pre.code{margin:0;font-size:13.5px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
aside.code pre.code .ln{display:block;padding:2px 8px;border-radius:5px;color:#9aa7c6;border-left:3px solid transparent}
aside.code pre.code .ln.hot{background:rgba(90,209,255,.14);border-left-color:var(--accent);color:#eaf0fb}
aside.code .codenote{margin-top:15px;font-size:14px;line-height:1.6;color:#bcc8e2;font-family:"Pretendard",system-ui,sans-serif;border-top:1px solid var(--line);padding-top:13px}
aside.code .codenote b{color:var(--gold)}
.stageTitle .small{max-width:64%}
.narr.why{border-color:var(--bad);background:rgba(40,16,24,.85)}
.narr.why b{color:var(--bad)}
.tick.why{background:rgba(255,107,138,.55)}
.tick.major{width:2px;background:rgba(255,209,102,.5)}
@media (max-width:1100px){ .wrap3{grid-template-columns:300px 1fr} aside.code{display:none} }
header.bar{grid-column:1/3;display:flex;align-items:center;gap:18px;padding:16px 26px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#101627,transparent)}
header.bar .home{font-size:13px;color:var(--dim);font-weight:700;letter-spacing:1px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;transition:.15s;text-decoration:none}
header.bar .home:hover{color:var(--accent);border-color:var(--accent)}
header.bar h1{font-size:19.5px;margin:0;font-weight:700}
header.bar .sub{font-size:14px;color:var(--dim)}
.tag{font-size:13px;color:#06121c;padding:3px 11px;border-radius:999px;font-weight:800}
aside{border-right:1px solid var(--line);background:var(--panel2);overflow-y:auto;padding:16px 14px}
.chap{cursor:pointer;border:1px solid transparent;border-radius:13px;padding:14px 15px;margin-bottom:9px;transition:.18s}
.chap:hover{background:#161c34}
.chap.active{background:linear-gradient(180deg,#1b2540,#141b30);border-color:var(--accent);box-shadow:0 0 0 1px rgba(90,209,255,.2) inset}
.chap .n{font-size:13px;color:var(--accent3);font-weight:800;letter-spacing:.4px}
.chap .t{font-size:16.5px;font-weight:700;margin-top:3px}
.chap .d{font-size:13.5px;color:var(--dim);margin-top:5px;line-height:1.5}
.chap.active .d{color:#bcc6e4}
main{position:relative;overflow:hidden;display:flex;flex-direction:column}
.stageTitle{position:absolute;top:16px;left:24px;z-index:5;max-width:66%}
.stageTitle .big{font-size:24px;font-weight:800}
.stageTitle .small{font-size:15px;color:var(--dim);margin-top:4px;line-height:1.5}
svg.stage{flex:1;width:100%;height:100%}
.hud{position:absolute;right:22px;top:16px;z-index:5;text-align:right;font-variant-numeric:tabular-nums}
.hud .row{font-size:14px;color:var(--dim);margin-bottom:3px}
.hud .row b{color:var(--ink);font-weight:700}
.hud .score{font-size:32px;font-weight:800;color:var(--gold)}
.hud .sub2{font-size:15px;color:var(--accent)}
.narr{position:absolute;left:24px;bottom:98px;z-index:5;max-width:620px;background:rgba(11,14,26,.85);border:1px solid var(--line);border-radius:13px;padding:15px 18px;font-size:15.5px;line-height:1.6;color:#dde6f5;backdrop-filter:blur(6px)}
.narr b{color:var(--accent)}
footer.ctrl{grid-column:1/3;border-top:1px solid var(--line);background:var(--panel);padding:13px 22px;display:flex;align-items:center;gap:15px}
button{background:#1b2440;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 18px;font-size:15px;cursor:pointer;font-weight:700;transition:.15s}
button:hover{background:#243358;border-color:var(--accent)}
button.primary{background:var(--accent);color:#04121c;border-color:var(--accent)}
.speed{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--dim)}
.tlbar{flex:1;height:14px;background:#0c1120;border:1px solid var(--line);border-radius:999px;overflow:hidden;position:relative;cursor:pointer}
.tlbar .fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--accent),var(--accent3));width:0%}
.ticks{position:absolute;inset:0;pointer-events:none}
.tick{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.18)}
.time{font-size:14px;color:var(--dim);font-variant-numeric:tabular-nums;min-width:108px;text-align:right}
.legend{position:absolute;left:24px;bottom:24px;z-index:5;display:flex;gap:16px;font-size:13.5px;color:var(--dim);flex-wrap:wrap;max-width:64%}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:6px;vertical-align:-2px}
.legend i.dot{border-radius:50%}
.pill{font-size:13px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:3px 11px}
.kbd{font-size:13px;color:var(--dim)}
.kbd b{color:#aeb9d6}
@media (max-width:760px){ .wrap{grid-template-columns:1fr} aside{display:none} }
/* audio toggle buttons */
button.aud{font-size:13px;padding:9px 13px;opacity:.55}
button.aud.on{opacity:1;border-color:var(--accent3);color:var(--accent3)}
/* ---- interactive flowchart mini-map (3-way sync) ---- */
header .fcbtn{font-size:13px;font-weight:700;letter-spacing:.4px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:#141b30;color:var(--dim);cursor:pointer;margin-left:auto;transition:.15s}
header .fcbtn:hover{color:var(--accent);border-color:var(--accent)}
header .fcbtn.on{color:#04121c;background:var(--accent);border-color:var(--accent)}
.flowmap{position:absolute;top:14px;right:14px;bottom:78px;z-index:7;width:236px;
  background:rgba(11,14,23,.93);border:1px solid var(--line);border-radius:14px;
  padding:12px 10px 14px;overflow-y:auto;backdrop-filter:blur(8px);box-shadow:0 24px 60px -22px rgba(0,0,0,.7);display:none}
.flowmap.show{display:block}
.flowmap .fchead{display:flex;align-items:center;justify-content:space-between;margin:0 4px 8px}
.flowmap .fctitle{font-size:12px;font-weight:800;letter-spacing:.8px;color:var(--accent);text-transform:uppercase}
.flowmap .fcclose{background:none;border:none;color:var(--dim2);font-size:16px;cursor:pointer;padding:0 4px;line-height:1}
.flowmap .fcclose:hover{color:var(--ink)}
.fcnode{position:relative;display:block;width:100%;text-align:left;cursor:pointer;font-family:inherit;
  border:1.5px solid #283758;background:#101728;color:var(--dim);border-radius:9px;
  padding:8px 10px;font-size:12.5px;line-height:1.35;font-weight:600;transition:.14s}
.fcnode:hover{border-color:var(--accent);color:var(--ink);background:#16203a}
.fcnode.cur{border-color:var(--accent);background:rgba(90,209,255,.16);color:#eaf0fb;box-shadow:0 0 0 1px var(--accent),0 6px 18px -8px rgba(90,209,255,.6)}
.fcnode .fctag{display:block;font-size:10px;font-weight:800;letter-spacing:.5px;color:var(--accent2);margin-bottom:2px;text-transform:uppercase}
.fcnode.cur .fctag{color:var(--accent)}
.fcnode.dia{border-radius:9px;border-style:dashed;border-color:#5b6c8f;background:#13182a}
.fcnode.dia .fctag{color:var(--gold)}
.fcnode.dia.cur{border-color:var(--gold);background:rgba(255,209,102,.14);box-shadow:0 0 0 1px var(--gold),0 6px 18px -8px rgba(255,209,102,.55)}
.fcnode.dia.cur .fctag{color:var(--gold)}
.fcnode.vrf{border-color:#2e5848;background:#0f1c19}
.fcnode.vrf .fctag{color:var(--good)}
.fcnode.vrf.cur{border-color:var(--good);background:rgba(91,231,169,.14);box-shadow:0 0 0 1px var(--good),0 6px 18px -8px rgba(91,231,169,.5)}
.fcnode.vrf.cur .fctag{color:var(--good)}
.fcedge{display:flex;justify-content:center;color:var(--dim2);font-size:13px;line-height:1;margin:2px 0;user-select:none}
.fcbranch{display:flex;gap:7px;margin:2px 0}
.fcbranch .fcnode{flex:1;padding:7px 8px;font-size:11.5px}
.fcbranch-lbl{display:flex;gap:7px;margin:1px 0 0}
.fcbranch-lbl span{flex:1;text-align:center;font-size:10px;color:var(--dim2);font-weight:700}
@media (max-width:1100px){ .flowmap{display:none!important} }