/* ============================================================================
   deck.css — SHARED DESIGN SYSTEM for the OOP-Through-Java class decks
   Extracted verbatim from the locked Class 14 style block so that every
   remaining session (Class 15 → Class 24, Lab 3 → Lab 5) is pixel-identical.

   PER-PAGE OVERRIDE CONTRACT
   Each deck sets its own part palette in a small <style> block AFTER this file:
       :root{ --pb:...; --pb-deep:...; --pb-tint:...; }
   plus .cover / .next-card / .defn gradients and .ex-sheet rule colour.
   Part F sky  #0284C7  (Class 14)
   Part G indigo #4F46E5 (Class 15, 16, Lab 3)
   Nothing else should ever be re-declared.
   ============================================================================ */

:root{
  --java-blue:#5382A1; --java-blue-deep:#1B3A50; --java-orange:#E76F00; --java-orange-deep:#8A4300;
  --ink:#0A0A0A; --ink-60:rgba(10,10,10,.62); --ink-12:rgba(10,10,10,.12); --ink-08:rgba(10,10,10,.08);
  --paper:#FFFFFF; --cream:#FDFBF7;
  --pb:#0284C7; --pb-deep:#075985; --pb-tint:#E0F2FE;           /* default: PART F sky */
  --pd:#C2410C; --pd-tint:#FFF7ED;                              /* Unit-1 back-ref (REVISIT chips only) */
  --teach:#0891B2; --teach-deep:#155E75; --teach-tint:#ECFEFF;
  --learn:#BE185D; --learn-tint:#FDF2F8;
  --lab:#059669; --lab-tint:#ECFDF5;
  --r-lg:20px; --r-md:13px;
  --shadow-1:0 2px 10px rgba(0,0,0,.07),0 10px 34px rgba(0,0,0,.07);
  --shadow-2:0 4px 16px rgba(0,0,0,.11),0 22px 60px rgba(0,0,0,.16);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--cream);color:var(--ink);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
::selection{background:var(--pb);color:#fff;}
.icon{width:1em;height:1em;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12em;display:inline-block;}
.wrap{width:min(1160px,92vw);margin:0 auto;}

.ribbon{height:6px;background:linear-gradient(90deg,var(--pb),var(--java-blue),var(--java-orange),var(--pb));background-size:300% 100%;animation:rib 14s linear infinite;}
@keyframes rib{to{background-position:300% 0;}}

/* ===== reveal engine (FSWD dual-mode pattern) ===== */
.beat{opacity:0;transform:translateY(26px);transition:opacity .6s cubic-bezier(.22,.9,.3,1),transform .6s cubic-bezier(.22,.9,.3,1);scroll-margin-top:92px;}
.beat.on{opacity:1;transform:none;}
body.mode-teaching .beat{display:none;}
body.mode-teaching .beat.on{display:block;}
.beat .st{opacity:0;transform:translateY(14px);}
.beat.on .st{animation:stup .5s cubic-bezier(.22,.9,.3,1) forwards;}
.beat.on .st:nth-child(1){animation-delay:.05s;}.beat.on .st:nth-child(2){animation-delay:.38s;}
.beat.on .st:nth-child(3){animation-delay:.71s;}.beat.on .st:nth-child(4){animation-delay:1.04s;}
.beat.on .st:nth-child(5){animation-delay:1.37s;}.beat.on .st:nth-child(6){animation-delay:1.7s;}
@keyframes stup{to{opacity:1;transform:none;}}
.sr{opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s;}
.sr.on-sr{opacity:1;transform:none;}
.sim-ctl{display:none;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;}
body.mode-learning .sim-ctl{display:flex;}
.sim-ctl button{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.08em;padding:9px 14px;border-radius:9px;border:2px solid var(--pb);background:#fff;color:var(--pb-deep);cursor:pointer;transition:background .2s;}
.sim-ctl button:hover{background:var(--pb-tint);}
.sim-ctl .sc-badge{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink-60);margin-left:auto;}
@media (prefers-reduced-motion:reduce){
  .beat,.beat .st{opacity:1!important;transform:none!important;transition:none!important;animation:none!important;}
  .sr,.cl,.pv-line,.pv-note{transition:none!important;}
  .ribbon{animation:none;}
}

/* ===== top chrome ===== */
.topbar{position:sticky;top:0;z-index:60;background:rgba(253,251,247,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--ink-08);}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;flex-wrap:wrap;}
.back-link{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:clamp(12px,1vw,14px);text-decoration:none;color:var(--ink);padding:7px 14px;border-radius:999px;border:1.5px solid var(--ink-12);transition:border-color .15s,background .15s;}
.back-link:hover{border-color:var(--pb);background:var(--pb-tint);}
.top-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.chip{font-family:'JetBrains Mono',monospace;font-size:clamp(9.5px,.8vw,11px);font-weight:700;border-radius:999px;padding:6px 13px;letter-spacing:.06em;white-space:nowrap;border:1.5px solid var(--ink-12);color:var(--ink-60);}
.chip-solid{background:var(--pb-deep);color:#fff;border-color:var(--pb-deep);}
.chip-teal{background:var(--pb-tint);border-color:var(--pb);color:var(--pb-deep);}
.mode-switch{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--paper);}
.mode-switch button{font-family:'JetBrains Mono',monospace;font-size:clamp(9.5px,.8vw,11px);font-weight:700;letter-spacing:.08em;padding:7px 15px;border:none;background:transparent;color:var(--ink);cursor:pointer;}
.mode-switch button.active{background:var(--ink);color:#fff;}
#pgbar{position:fixed;top:0;left:0;height:4px;background:var(--pb);width:0;z-index:80;transition:width .25s ease;}

#rail{position:fixed;left:clamp(8px,1.4vw,22px);top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:7px;}
#rail a{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink-12);background:var(--paper);display:block;transition:background .2s,border-color .2s,transform .2s;}
#rail a.cur{background:var(--pb);border-color:var(--pb);transform:scale(1.35);}
@media (max-width:900px){#rail{display:none;}}

#hud{position:fixed;right:clamp(10px,1.6vw,26px);bottom:clamp(10px,1.6vw,22px);z-index:55;display:none;flex-direction:column;align-items:flex-end;gap:4px;}
#hud span{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.1em;background:var(--ink);color:#fff;border-radius:999px;padding:6px 14px;}
#hud small{font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:700;letter-spacing:.08em;color:var(--ink-60);}

/* ===== chooser ===== */
#chooser{position:fixed;inset:0;z-index:90;background:rgba(10,10,10,.5);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px;}
#chooser.show{display:flex;}
.ch-in{background:var(--paper);border-radius:26px;max-width:820px;width:100%;padding:clamp(24px,4vw,48px);box-shadow:var(--shadow-2);}
.ch-in h2{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(24px,2.6vw,38px);margin:10px 0 8px;}
.ch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:22px;}
.ch-card{border:2px solid var(--ink-12);border-radius:18px;padding:22px;text-align:left;cursor:pointer;background:var(--paper);transition:border-color .15s,transform .15s,box-shadow .15s;font-family:'Inter',sans-serif;}
.ch-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-1);}
.ch-card b{display:block;font-size:17px;font-weight:800;margin:10px 0 6px;}
.ch-card p{font-size:13.5px;line-height:1.6;color:var(--ink-60);}
.ch-t:hover{border-color:var(--teach);}
.ch-l:hover{border-color:var(--learn);}
.ch-ic{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;}
.ch-t .ch-ic{background:var(--teach-tint);color:var(--teach);}
.ch-l .ch-ic{background:var(--learn-tint);color:var(--learn);}

/* ===== blocks ===== */
section.blk{padding:clamp(52px,7vw,96px) 0;position:relative;}
section.blk + section.blk{border-top:1px solid var(--ink-08);}
.kick{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--pb-deep);display:inline-flex;align-items:center;gap:10px;}
.kick::before{content:"";width:26px;height:3px;border-radius:2px;background:currentColor;}
h2{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(28px,3.6vw,50px);line-height:1.05;letter-spacing:-.015em;margin:14px 0 12px;}
h3{font-family:'Fraunces',serif;font-weight:800;font-size:clamp(20px,2.1vw,29px);line-height:1.15;margin:0 0 10px;}
.lede{font-size:clamp(15px,1.35vw,18.5px);line-height:1.7;color:var(--ink-60);max-width:64ch;}
.lede code,.idea p code,.story-note code,.warn-note code{font-family:'JetBrains Mono',monospace;font-size:.9em;background:var(--pb-tint);border:1px solid var(--pb);border-radius:6px;padding:1px 6px;color:var(--pb-deep);display:inline-block;white-space:nowrap;max-width:100%;}
.chapno{position:absolute;top:24px;right:4vw;font-family:'Fraunces',serif;font-weight:900;font-size:clamp(60px,8.5vw,120px);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--ink-12);user-select:none;pointer-events:none;}
.body-t{font-size:clamp(14.5px,1.2vw,17px);line-height:1.72;max-width:68ch;}
.body-t + .body-t{margin-top:12px;}
.body-t code{font-family:'JetBrains Mono',monospace;font-size:.88em;background:var(--pb-tint);border:1px solid var(--pb);border-radius:6px;padding:1px 6px;color:var(--pb-deep);white-space:nowrap;}

/* cover */
.cover{background:linear-gradient(135deg,#082F49 0%,var(--pb-deep) 45%,var(--pb) 100%);color:#fff;border-radius:var(--r-lg);padding:clamp(28px,4.5vw,60px);box-shadow:var(--shadow-2);position:relative;overflow:hidden;margin-top:clamp(28px,4vw,48px);}
.cover::after{content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);}
.cov-inst{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:clamp(9.5px,.85vw,12px);letter-spacing:.2em;color:#BAE6FD;text-transform:uppercase;}
.cover h1{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(32px,4.4vw,60px);line-height:1.04;letter-spacing:-.02em;margin:20px 0 14px;position:relative;z-index:1;}
.cover h1 em{font-style:italic;color:#E0F2FE;}
.cov-tag{font-size:clamp(14px,1.25vw,17.5px);line-height:1.68;color:#D9EEF9;max-width:70ch;position:relative;z-index:1;}
.cov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:26px;position:relative;z-index:1;}
.cov-cell{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:13px;padding:13px 15px;}
.cov-cell .k{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.16em;color:#BAE6FD;}
.cov-cell .v{display:block;font-weight:800;font-size:14px;margin-top:5px;line-height:1.4;}
.cov-cell .v small{display:block;font-weight:500;font-size:11.5px;color:#BAE6FD;margin-top:3px;line-height:1.5;}
.r24{margin-top:24px;background:rgba(255,255,255,.09);border:2px dashed rgba(186,230,253,.55);border-radius:15px;padding:16px 20px;position:relative;z-index:1;}
.r24-k{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.16em;color:#BAE6FD;}
.r24-q{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:clamp(14px,1.4vw,18.5px);line-height:1.55;color:#F0F9FF;margin-top:9px;}

/* opener (§6.7 contract) */
.op-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;margin-top:20px;align-items:start;}
@media (max-width:900px){.op-grid{grid-template-columns:1fr;}}
.op-card{background:#fff;border:2px solid var(--ink);border-radius:var(--r-lg);box-shadow:6px 6px 0 var(--ink);padding:clamp(16px,2vw,24px);}
.op-cap{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--pb-deep);display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.op-cap .icon{width:14px;height:14px;}
.oc-list{list-style:none;display:flex;flex-direction:column;gap:9px;}
.oc-list li{position:relative;padding-left:26px;font-size:clamp(13px,1.1vw,15px);line-height:1.6;}
.oc-list li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:11px;border-radius:3px;background:var(--pb-tint);border:2px solid var(--pb);}
.oc-list li b{color:var(--pb-deep);}
.oc-list li code{font-family:'JetBrains Mono',monospace;font-size:.9em;background:var(--pb-tint);border:1px solid var(--pb);border-radius:6px;padding:1px 6px;color:var(--pb-deep);white-space:nowrap;}
.tp-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--ink-12);}
.tp-row:last-child{border-bottom:none;}
.tp-ic{width:28px;height:28px;border-radius:8px;background:var(--pb-tint);border:1.5px solid var(--pb);display:inline-flex;align-items:center;justify-content:center;color:var(--pb-deep);flex:0 0 auto;}
.tp-ic .icon{width:15px;height:15px;}
.tp-t{font-size:clamp(12.5px,1.05vw,14.5px);line-height:1.5;min-width:0;}
.tp-t code{font-family:'JetBrains Mono',monospace;font-size:.9em;background:var(--pb-tint);border:1px solid var(--pb);border-radius:5px;padding:0 5px;color:var(--pb-deep);white-space:nowrap;}
.tp-pyq{font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:700;letter-spacing:.09em;background:#FFF7ED;border:1.5px solid var(--java-orange);color:var(--java-orange-deep);border-radius:999px;padding:3px 8px;white-space:nowrap;}
.tp-ss{font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:700;letter-spacing:.09em;background:var(--pb-tint);border:1.5px dashed var(--pb);color:var(--pb-deep);border-radius:999px;padding:3px 8px;white-space:nowrap;}
.nav-chips{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.nv{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.55;background:var(--cream);border:1.5px solid var(--ink-12);border-radius:11px;padding:9px 13px;}
.nv code{font-family:'JetBrains Mono',monospace;font-size:.9em;background:#fff;border:1px solid var(--ink-12);border-radius:5px;padding:0 5px;white-space:nowrap;}
.nv-k{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.1em;border-radius:999px;padding:3px 9px;white-space:nowrap;flex:0 0 auto;margin-top:1px;}
.nv.back .nv-k{background:var(--pd-tint);border:1.5px solid var(--pd);color:var(--pd);}
.nv.fwd .nv-k{background:var(--pb-tint);border:1.5px solid var(--pb);color:var(--pb-deep);}
.op-foot{margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--ink-60);border-top:2px solid var(--ink-12);padding-top:12px;}

/* ===== code panels (deck standard: one line per press, VS-Code colours, WHITE editor) ===== */
.pane{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start;margin-top:14px;}
.pane .code-panel{min-width:0;}
.pane-side{min-width:0;}
@media (max-width:920px){.pane{grid-template-columns:1fr;}}
.code-panel{border:2px solid var(--ink);border-radius:14px;overflow:hidden;background:#fff;box-shadow:6px 6px 0 var(--ink);}
.cp-head{background:#ECECEC;border-bottom:1px solid #D0D0D0;padding:10px 15px;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:#333;display:flex;gap:9px;align-items:center;}
.cp-head .icon{width:14px;height:14px;}
.cp-body{padding:14px 0;max-height:430px;overflow:auto;font-family:'JetBrains Mono',monospace;font-size:clamp(11.5px,1vw,13.5px);line-height:1.8;}
.cl{display:flex;gap:14px;padding:1px 16px;opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s;white-space:pre;}
.cl.show{opacity:1;transform:none;}
.cl .ln{color:#237893;min-width:2ch;text-align:right;user-select:none;flex:0 0 auto;}
.cl.hot{background:#E0F2FE;}
.cl.bad{background:#FEE2E2;}
.cl.good{background:#ECFDF5;}
.cl code{font-family:inherit;font-size:inherit;line-height:inherit;color:var(--ink);font-weight:600;background:none;border:none;padding:0;white-space:pre;}
.kw{color:#0000FF;font-weight:700;}
.ty{color:#2B91AF;}
.stl{color:#A31515;}
.num{color:#098658;}
.cm{color:#008000;font-style:italic;}
.mth{color:#795E26;font-weight:700;}
.vr{color:#001080;}
.brc{color:#C2410C;font-weight:700;}
.ann{color:#94A3B8;font-style:italic;}
.cp-ctl{display:none;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 15px;border-top:1px solid #D0D0D0;background:#F7F7F7;}
body.mode-learning .cp-ctl{display:flex;}
body.mode-learning .code-panel{overflow:clip;}
body.mode-learning .cp-ctl{position:sticky;bottom:0;z-index:6;}
.cp-ctl button{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:8px 13px;border-radius:8px;border:2px solid var(--pb);background:#fff;color:var(--pb-deep);cursor:pointer;}
.cp-ctl button:disabled{opacity:.4;cursor:default;}
.cp-ctl button.ghost{border-color:var(--ink-12);color:var(--ink-60);}
.cp-ctl .cp-slide{flex:1 1 90px;accent-color:var(--pb);}
.cp-ctl .cp-count{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--ink-60);margin-left:auto;}
.prev-panel{background:#0C0C0C;color:#CCC;border:2px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);overflow:hidden;}
.pv-head{background:#1F1F1F;color:#A3A3A3;padding:10px 15px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.14em;display:flex;align-items:center;gap:9px;}
.pv-head .icon{width:14px;height:14px;}
.pv-body{padding:16px 18px;font-family:'JetBrains Mono',monospace;font-size:clamp(11px,.95vw,12.5px);line-height:2;overflow-x:auto;}
.pv-body .pv-line{white-space:nowrap;}
.pv-body .pv-note{white-space:normal;}
.pv-line,.pv-note{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;}
.pv-line.show,.pv-note.show,.pv-line.on-sr,.pv-note.on-sr{opacity:1;transform:none;}
.pv-line .t-p{color:#4ADE80;}
.pv-out{color:#E5E5E5;}
.pv-err{color:#FCA5A5;}
.pv-ok{color:#4ADE80;}
.pv-warn{color:#FCD34D;}
.pv-dim{color:#737373;}
.pv-note{font-size:11px;color:#8A8A8A;border-top:1px dashed #333;margin-top:8px;padding-top:8px;line-height:1.7;}
.side-note{background:#fff;border:1px solid var(--ink-08);border-left:5px solid var(--pb);border-radius:0 12px 12px 0;box-shadow:var(--shadow-1);padding:15px 18px;margin-top:14px;font-size:13px;line-height:1.65;color:var(--ink-60);}
.side-note b{color:var(--ink);}
.side-note code{font-family:'JetBrains Mono',monospace;font-size:.9em;background:var(--pb-tint);border:1px solid var(--pb);border-radius:6px;padding:1px 6px;color:var(--pb-deep);display:inline-block;white-space:nowrap;max-width:100%;}

/* mini problem frame (rule 1x) */
.mini-frame{margin-top:20px;border:2px solid var(--ink);border-radius:14px;overflow:hidden;background:#fff;box-shadow:4px 4px 0 var(--ink);max-width:760px;}
.mf-head{background:var(--ink);color:#fff;padding:10px 16px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.16em;display:flex;align-items:center;gap:9px;}
.mf-head .icon{width:14px;height:14px;}
.mf-row{display:grid;grid-template-columns:132px 1fr;border-top:1px solid var(--ink-08);}
.mf-row:first-of-type{border-top:none;}
.mf-k{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.1em;color:var(--pb-deep);background:var(--pb-tint);padding:12px;display:flex;align-items:flex-start;}
.mf-v{padding:11px 15px;font-size:clamp(12.5px,1.1vw,14.5px);line-height:1.65;}
.mf-v code{font-family:'JetBrains Mono',monospace;font-size:.9em;background:var(--pb-tint);border:1px solid var(--pb);border-radius:6px;padding:1px 6px;color:var(--pb-deep);display:inline-block;white-space:nowrap;max-width:100%;}
@media (max-width:560px){.mf-row{grid-template-columns:1fr;}.mf-k{padding-bottom:2px;}}

/* step cards */
.step-card{background:#fff;border:2px solid var(--ink);border-radius:13px;box-shadow:5px 5px 0 var(--ink);padding:14px 18px;margin-top:12px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;max-width:80ch;}
.step-card.err{border-color:#DC2626;box-shadow:5px 5px 0 #DC2626;background:#FEF2F2;}
.step-card.fix{border-color:var(--lab);box-shadow:5px 5px 0 var(--lab);background:var(--lab-tint);}
.step-no{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.1em;background:var(--pb);color:#fff;border-radius:7px;padding:3px 9px;white-space:nowrap;margin-top:2px;}
.step-card.err .step-no{background:#DC2626;}
.step-card.fix .step-no{background:var(--lab);}
.step-body{min-width:0;display:flex;flex-direction:column;gap:10px;}
.step-card p{font-size:clamp(13px,1.1vw,15px);line-height:1.65;min-width:0;}
.step-card p code{font-family:'JetBrains Mono',monospace;font-size:.9em;background:var(--pb-tint);border:1px solid var(--pb);border-radius:6px;padding:1px 6px;color:var(--pb-deep);white-space:nowrap;display:inline-block;max-width:100%;}
.step-card.err p code{background:#FEE2E2;border-color:#DC2626;color:#B91C1C;}
/* ===== .step-code — inline Java snippet inside a step card / activity card =====
   LOCKED rules: every Java snippet on the deck is (a) syntax-coloured with the deck
   token palette (.kw .ty .vr .mth .stl .num .cm .brc) and (b) written in ALLMAN brace
   style — every { and } alone on its own line, never trailing another statement. */
.step-code{font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.8;background:#FFFFFF;border:1.5px solid rgba(10,10,10,.18);border-radius:9px;padding:11px 14px;overflow-x:auto;box-shadow:2px 2px 0 rgba(0,0,0,.05);}
.step-code div{white-space:pre;min-width:0;}
.step-card.err .step-code{border-color:#DC2626;background:#FFFBFB;}
.step-card.fix p code{background:#D1FAE5;border-color:var(--lab);color:#065F46;}

/* idea / warn cards */
.idea{background:#fff;border:2px solid var(--ink);border-radius:var(--r-lg);box-shadow:6px 6px 0 var(--ink);padding:clamp(16px,2vw,26px);margin-top:16px;max-width:82ch;}
.idea .i-cap{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--pb-deep);display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.idea .i-cap .icon{width:15px;height:15px;}
.idea p{font-size:clamp(13.5px,1.15vw,16px);line-height:1.7;}
.idea p + p{margin-top:10px;}
.idea ul,.idea ol{margin:10px 0 0 20px;font-size:clamp(13px,1.1vw,15px);line-height:1.7;}
.idea li + li{margin-top:6px;}
.warn-note{background:#FEF2F2;border:2px solid #DC2626;border-radius:var(--r-lg);padding:clamp(15px,1.9vw,24px);margin-top:16px;max-width:82ch;}
.warn-note .i-cap{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.16em;color:#B91C1C;display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.warn-note .i-cap .icon{width:15px;height:15px;}
.warn-note p{font-size:clamp(13.5px,1.15vw,16px);line-height:1.7;}
.warn-note p + p{margin-top:10px;}
.warn-note code{background:#FEE2E2;border-color:#DC2626;color:#B91C1C;}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:16px;}
.card{background:#fff;border:1.5px solid var(--ink-12);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:16px 19px;}
.card b{display:block;font-size:15px;font-weight:800;margin:8px 0 6px;}
.card p{font-size:13px;line-height:1.65;color:var(--ink-60);}
.card p + p{margin-top:8px;}
.card .p-ic{width:26px;height:26px;color:var(--pb);}
.card code{font-family:'JetBrains Mono',monospace;font-size:.88em;background:var(--pb-tint);border:1px solid var(--pb);border-radius:5px;padding:1px 5px;color:var(--pb-deep);white-space:nowrap;}

/* diagrams */
.uml-svg{width:100%;max-width:680px;height:auto;display:block;margin:4px auto 0;}
.uml-fig{margin-top:14px;border:2px solid var(--ink);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-1);padding:clamp(14px,2vw,24px);}
.fig-cap{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--ink-60);text-align:center;margin-top:12px;}

/* drill rows */
.ov-grid{margin-top:14px;display:grid;gap:12px;}
.ov-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;border:2px solid var(--ink-12);border-radius:14px;background:#fff;padding:14px 18px;}
.ov-call{font-family:'JetBrains Mono',monospace;font-size:clamp(11.5px,1.1vw,14px);font-weight:700;line-height:1.6;}
.ov-why{font-size:12px;color:var(--ink-60);margin-top:5px;line-height:1.5;font-family:'Inter',sans-serif;font-weight:500;}
.ov-ans{font-family:'JetBrains Mono',monospace;font-size:clamp(10.5px,.95vw,12.5px);font-weight:800;letter-spacing:.05em;border:2.5px solid var(--pb);color:var(--pb-deep);background:var(--pb-tint);border-radius:10px;padding:8px 14px;transform:rotate(-3deg);white-space:nowrap;}
.ov-ans.err{border-color:#DC2626;color:#B91C1C;background:#FEF2F2;transform:rotate(2.5deg);}
.ov-ans.ok{border-color:var(--lab);color:var(--lab);background:var(--lab-tint);}
@media (max-width:560px){.ov-row{grid-template-columns:1fr;}.ov-ans{justify-self:start;}}
.math-note{margin-top:14px;font-family:'Caveat',cursive;font-size:clamp(17px,1.9vw,21px);font-weight:700;color:var(--pb-deep);}

/* ===== PYQ exam sheet (ruled notebook, pens, model program) ===== */
.exam{margin-top:30px;border:2px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:6px 6px 0 var(--ink);background:var(--paper);max-width:900px;}
.ex-cap{background:var(--pb-deep);color:#fff;padding:12px 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.18em;}
.ex-cap .icon{width:16px;height:16px;}
.ex-pill{border:1.5px solid #fff;border-radius:999px;padding:3px 10px;font-size:9.5px;letter-spacing:.1em;white-space:nowrap;}
.ex-sheet{position:relative;padding:34px 28px 30px 66px;background:repeating-linear-gradient(180deg, transparent 0px, transparent 30px, rgba(2,132,199,.16) 30px, rgba(2,132,199,.16) 31px);}
.ex-sheet::before{content:"";position:absolute;top:0;bottom:0;left:46px;width:2px;background:rgba(234,88,12,.45);}
.ex-q{font-family:'Caveat',cursive;font-weight:700;font-size:25px;line-height:31px;color:var(--pb-deep);}
.ex-q .ex-marks{font-family:'Caveat',cursive;font-weight:700;color:var(--java-orange-deep);}
.ex-a{margin-top:15px;}
.ex-a p{font-family:'Caveat',cursive;font-weight:600;font-size:21px;line-height:31px;color:#1E3A8A;max-width:64ch;}
.ex-a p b{font-weight:700;color:#1E3A8A;border-bottom:2px solid rgba(30,64,175,.35);}
.ex-under{background:linear-gradient(180deg,transparent 62%,rgba(234,88,12,.35) 62%);font-weight:700;padding:0 2px;}
.ex-margin-note{position:absolute;right:18px;top:8px;transform:rotate(-4deg);font-family:'Caveat',cursive;font-weight:700;font-size:19px;color:var(--java-orange-deep);border:1.5px dashed var(--java-orange);border-radius:10px;padding:2px 12px;background:#FFF7ED;}
.ex-tail{margin-top:14px;font-family:'Caveat',cursive;font-weight:600;font-size:21px;line-height:31px;color:var(--pb);}
.hl-term{background:#DCFCE7;color:#14532D;border-bottom:2.5px solid #16A34A;padding:0 4px;border-radius:4px 4px 0 0;font-weight:700;}
.hl-warn{background:#FEE2E2;color:#991B1B;border-bottom:2.5px solid #DC2626;padding:0 4px;border-radius:4px 4px 0 0;font-weight:700;}
.ex-line{opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s;}
.ex-line.on-sr{opacity:1;transform:none;}
.ex-a p b.bk{color:#1A1A1A;border-bottom-color:rgba(26,26,26,.35);}
.ex-code{font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.85;background:#fff;border:1.5px solid rgba(10,10,10,.18);border-radius:9px;padding:12px 15px;margin:11px 0;overflow-x:auto;box-shadow:2px 2px 0 rgba(0,0,0,.05);}
.ex-code div{white-space:pre;}

/* ===== PYQ answer sheets step ONE POINT PER PRESS (LOCKED pyq-format rule) =====
   The engine (deck-engine.js) auto-numbers every answer point inside an .ex-sheet and
   toggles .on-sr / .show one at a time. These rules cover the non-.ex-line dialects
   (.ex-a / .ex-tail / .ex-pt) so they hide until their press lands, exactly like .ex-line. */
.pyq-sheet .ex-a[data-st],
.pyq-sheet .ex-pt[data-st],
.pyq-sheet .ex-tail[data-st]{opacity:0;transform:translateY(9px);transition:opacity .45s cubic-bezier(.22,.9,.3,1),transform .45s cubic-bezier(.22,.9,.3,1);}
.pyq-sheet .ex-a[data-st].show,
.pyq-sheet .ex-pt[data-st].show,
.pyq-sheet .ex-tail[data-st].show{opacity:1;transform:none;}
/* per-sheet controls — LEARNING mode only; in teaching mode the global Next drives them */
.ex-ctl{display:none;align-items:center;gap:10px;padding:10px 18px;border-top:2px solid var(--ink);background:var(--pb-tint,#E0F2FE);flex-wrap:wrap;}
body.mode-learning .ex-ctl{display:flex;}
.ex-ctl button{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px;letter-spacing:.08em;border:2px solid var(--ink);border-radius:999px;padding:8px 16px;cursor:pointer;background:var(--ink);color:#fff;transition:transform .14s;}
.ex-ctl button:hover:not(:disabled){transform:translateY(-2px);}
.ex-ctl button.ghost{background:#fff;color:var(--ink);}
.ex-ctl button:disabled{opacity:.35;cursor:default;}
.ex-ctl .ex-count{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--pb-deep,#075985);white-space:nowrap;}
@media (prefers-reduced-motion:reduce){
  .pyq-sheet .ex-a[data-st],.pyq-sheet .ex-pt[data-st],.pyq-sheet .ex-tail[data-st]{transition:none;}
}
.ex-fig{margin:12px 0 4px;border:1.5px solid rgba(10,10,10,.14);border-radius:10px;background:#fff;padding:12px 12px 8px;box-shadow:2px 2px 0 rgba(0,0,0,.06);max-width:700px;}
.ex-fig svg{display:block;width:100%;height:auto;}
.ex-fig-cap{margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--ink-60);text-align:center;}

/* activity / solution */
.act{background:linear-gradient(180deg,var(--lab-tint),#fff 92%);border:2px solid var(--lab);border-radius:var(--r-lg);padding:clamp(17px,2.1vw,27px);margin-top:16px;max-width:86ch;}
.act-cap{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.16em;color:#065F46;display:flex;align-items:center;gap:8px;margin-bottom:11px;}
.act-cap .icon{width:15px;height:15px;}
.act p{font-size:clamp(13.5px,1.15vw,15.5px);line-height:1.7;}
.act p + p{margin-top:9px;}
.act code{font-family:'JetBrains Mono',monospace;font-size:.88em;background:#D1FAE5;border:1px solid var(--lab);border-radius:6px;padding:1px 6px;color:#065F46;white-space:nowrap;}
.act ol,.act ul{margin:9px 0 0 20px;font-size:clamp(13px,1.1vw,15px);line-height:1.7;}
.act li + li{margin-top:6px;}
/* activity + solution machinery (LOCKED: engine binds .sol-btn[data-sol] -> #id.sol-frame.sol-open) */
.act-card{margin-top:26px;background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);padding:22px 26px;max-width:80ch;}
.act-card p{font-size:clamp(13.5px,1.2vw,15.5px);line-height:1.75;margin-top:10px;}
.act-card p:first-child{margin-top:0;}
.act-card p code,.act-card li code{font-family:'JetBrains Mono',monospace;font-size:.9em;background:var(--pb-tint);border:1px solid var(--pb);border-radius:6px;padding:1px 6px;color:var(--pb-deep);display:inline-block;white-space:nowrap;max-width:100%;}
.act-card .ac-k{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.14em;color:#fff;background:var(--pb);border-radius:7px;padding:3px 10px;margin-right:8px;white-space:nowrap;}
.ac-list{margin:10px 0 0 20px;font-size:clamp(13px,1.1vw,15px);line-height:1.7;}
.ac-list li + li{margin-top:7px;}
.ac-list code{font-family:'JetBrains Mono',monospace;font-size:.9em;background:var(--pb-tint);border:1px solid var(--pb);border-radius:6px;padding:1px 6px;color:var(--pb-deep);white-space:nowrap;}
.sol-lock{margin-top:22px;text-align:center;}
.sol-btn{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.14em;border-radius:999px;padding:12px 26px;border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:background .15s,color .15s,transform .14s;}
.sol-btn .icon{width:14px;height:14px;}
.sol-btn:hover{transform:translateY(-2px);background:var(--ink);color:#fff;}
.sol-note{font-family:'Caveat',cursive;font-weight:600;font-size:clamp(17px,1.6vw,21px);color:var(--java-orange-deep);margin-top:10px;}
.sol-frame{display:none;margin-top:24px;}
.sol-frame.sol-open{display:block;}
.sol-bar{background:var(--java-orange-deep);color:#fff;border-radius:14px 14px 0 0;padding:11px 18px;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.16em;display:flex;align-items:center;gap:9px;}
.sol-bar .icon{width:15px;height:15px;}
.sol-inner{border:2px solid var(--ink);border-top:none;border-radius:0 0 14px 14px;background:var(--cream);padding:20px;}
.key-list{list-style:none;}
.key-list li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:9px 0;border-top:1px dashed var(--ink-12);font-size:clamp(12.5px,1.05vw,14px);line-height:1.6;}
.key-list li:first-child{border-top:none;}
.key-list li code{font-family:'JetBrains Mono',monospace;font-size:.9em;background:var(--pb-tint);border:1px solid var(--pb);border-radius:6px;padding:1px 6px;color:var(--pb-deep);display:inline-block;white-space:nowrap;max-width:100%;}
.kl{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.03em;background:var(--pb-tint);border:1.5px solid var(--pb);color:var(--pb-deep);border-radius:999px;padding:4px 11px;white-space:nowrap;}
.slip{margin-top:22px;background:#FFF7ED;border:1.5px dashed var(--java-orange);border-radius:14px;padding:16px 20px;max-width:70ch;}
.slip .s-cap{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--java-orange-deep);display:flex;align-items:center;gap:8px;}
.slip .s-cap .icon{width:14px;height:14px;}
.slip p{font-size:clamp(13px,1.1vw,15px);line-height:1.65;margin-top:8px;}
.slip code{font-family:'JetBrains Mono',monospace;font-size:.9em;background:#fff;border:1px solid var(--java-orange);border-radius:6px;padding:1px 6px;color:var(--java-orange-deep);white-space:nowrap;}

/* close card */
.next-card{display:block;margin-top:30px;border-radius:var(--r-lg);background:linear-gradient(135deg,#082F49,#0284C7);color:#fff;padding:clamp(24px,3.6vw,44px);box-shadow:var(--shadow-2);position:relative;overflow:hidden;text-decoration:none;transition:transform .16s ease;}
.next-card:hover{transform:translateY(-4px);}
.next-card::after{content:"";position:absolute;right:-70px;bottom:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.13),transparent 70%);}
.nx-k{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.2em;color:#BAE6FD;}
.next-card h3{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(22px,2.6vw,34px);line-height:1.1;margin:10px 0 8px;color:#fff;}
.next-card p{font-size:clamp(13.5px,1.2vw,16px);line-height:1.65;color:rgba(255,255,255,.9);max-width:60ch;}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.cta{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.08em;text-decoration:none;border-radius:999px;padding:11px 20px;border:2px solid var(--ink);color:var(--ink);transition:background .15s,color .15s;}
.cta:hover{background:var(--ink);color:#fff;}

/* sim caption */
.sim-cap{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--ink-60);margin:26px 0 12px;display:flex;align-items:center;gap:9px;}
.sim-cap .icon{width:15px;height:15px;color:var(--pb);}
.sim{position:relative;}
.enc-svg{width:100%;max-width:820px;height:auto;display:block;margin:0 auto;}

/* save strip + real-file discipline */
.save-strip{margin-top:16px;display:flex;gap:13px;align-items:center;background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:13px 18px;max-width:680px;}
.save-strip .sv-ic{width:34px;height:34px;border-radius:10px;background:var(--pb-tint);border:1.5px solid var(--pb);color:var(--pb-deep);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.save-strip .sv-ic .icon{width:55%;height:55%;}
.save-strip .sv-k{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.16em;color:var(--pb-deep);}
.save-strip .sv-path{display:block;font-family:'JetBrains Mono',monospace;font-size:clamp(10.5px,1vw,13px);font-weight:700;margin-top:3px;overflow-wrap:anywhere;}
.save-strip .sv-path b{background:#E0F2FE;border-radius:5px;padding:1px 6px;}

/* micro-example ladder (tiny before/after stories) */
.micro-lad{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:16px;}
.micro-card{background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--ink);overflow:hidden;min-width:0;}
.micro-card.mc-good{border-color:var(--lab);box-shadow:5px 5px 0 var(--lab);}
.micro-card.mc-bad{border-color:#DC2626;box-shadow:5px 5px 0 #DC2626;}
.mc-cap{padding:9px 14px;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.12em;background:var(--ink);color:#fff;display:flex;align-items:center;gap:8px;}
.mc-cap .icon{width:13px;height:13px;}
.mc-good .mc-cap{background:var(--lab);}
.mc-bad .mc-cap{background:#DC2626;}
.mc-code{font-family:'JetBrains Mono',monospace;font-size:clamp(11px,.95vw,13px);line-height:1.85;padding:12px 16px;overflow-x:auto;background:#fff;}
.mc-code div{white-space:pre;}
.mc-note{font-size:12.5px;line-height:1.6;color:var(--ink-60);border-top:1px dashed var(--ink-12);padding:10px 16px;background:var(--cream);}
.mc-note b{color:var(--ink);}
.mc-note code{font-family:'JetBrains Mono',monospace;font-size:.9em;background:#fff;border:1px solid var(--ink-12);border-radius:5px;padding:0 5px;white-space:nowrap;}

/* definition card — the sentence an examiner accepts */
.defn{margin-top:20px;background:linear-gradient(135deg,#082F49,var(--pb-deep));color:#fff;border-radius:var(--r-lg);padding:clamp(18px,2.4vw,30px);box-shadow:var(--shadow-2);max-width:84ch;}
.defn .d-k{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.18em;color:#BAE6FD;display:flex;align-items:center;gap:8px;}
.defn .d-k .icon{width:14px;height:14px;}
.defn .d-q{font-family:'Fraunces',serif;font-weight:700;font-size:clamp(17px,1.9vw,25px);line-height:1.4;margin-top:11px;}
.defn .d-q em{font-style:italic;color:#E0F2FE;}
.defn .d-s{font-size:clamp(12.5px,1.05vw,14.5px);line-height:1.7;color:#D9EEF9;margin-top:12px;border-top:1px dashed rgba(186,230,253,.5);padding-top:12px;}
.defn .d-s code{font-family:'JetBrains Mono',monospace;font-size:.9em;background:rgba(255,255,255,.14);border:1px solid rgba(186,230,253,.5);border-radius:5px;padding:1px 6px;color:#F0F9FF;white-space:nowrap;}

/* reference table */
.ref-tbl{width:100%;border-collapse:collapse;margin-top:20px;background:#fff;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-1);font-size:clamp(12px,1.05vw,14.5px);}
.ref-tbl th{background:var(--pb-deep);color:#fff;text-align:left;padding:11px 14px;font-family:'JetBrains Mono',monospace;font-size:clamp(9.5px,.85vw,11px);font-weight:700;letter-spacing:.1em;}
.ref-tbl td{padding:10px 14px;border-top:1px solid var(--ink-08);line-height:1.55;vertical-align:top;}
.ref-tbl td:first-child{font-weight:700;white-space:nowrap;}
.ref-tbl td code{font-family:'JetBrains Mono',monospace;font-size:.92em;background:var(--pb-tint);border:1px solid var(--pb);border-radius:5px;padding:0 5px;color:var(--pb-deep);white-space:nowrap;display:inline-block;}
.ref-tbl td .yes{font-family:'JetBrains Mono',monospace;font-weight:800;color:var(--lab);white-space:nowrap;}
.ref-tbl td .no{font-family:'JetBrains Mono',monospace;font-weight:800;color:#B91C1C;white-space:nowrap;}
.ref-tbl .no{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.06em;background:#FEE2E2;border:1.5px solid #DC2626;color:#991B1B;border-radius:999px;padding:2px 9px;white-space:nowrap;}
.ref-tbl.tight td:first-child{white-space:normal;}

/* inline keyboard key */
.kbd-inline{font-family:'JetBrains Mono',monospace;font-size:.85em;font-weight:700;background:#fff;border:1.5px solid var(--ink);border-bottom-width:3px;border-radius:5px;padding:1px 6px;white-space:nowrap;}

/* ============================================================================
   ECLIPSE MOCK CHROME — sample screens (rule: Eclipse from Lab 2 onwards).
   Used to show students exactly where a file lives and what the IDE looks like.
   ============================================================================ */
.ecl{margin-top:16px;border:2px solid var(--ink);border-radius:12px;overflow:hidden;box-shadow:6px 6px 0 var(--ink);background:#F2F1F0;max-width:860px;}
.ecl-bar{background:linear-gradient(180deg,#F7F7F7,#E4E3E1);border-bottom:1px solid #C8C6C4;padding:8px 13px;display:flex;align-items:center;gap:9px;}
.ecl-dot{width:11px;height:11px;border-radius:50%;background:#C8C6C4;flex:0 0 auto;}
.ecl-title{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;color:#3B3B3B;margin-left:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ecl-menu{background:#EFEEEC;border-bottom:1px solid #D5D3D1;padding:5px 13px;display:flex;gap:16px;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;color:#4B4B4B;flex-wrap:wrap;}
.ecl-menu span.hi{background:var(--pb-tint);border:1px solid var(--pb);color:var(--pb-deep);border-radius:4px;padding:0 5px;margin:-1px -5px;}
.ecl-body{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:180px;}
@media (max-width:640px){.ecl-body{grid-template-columns:1fr;}}
.ecl-tree{background:#FBFBFA;border-right:1px solid #D5D3D1;padding:10px 0;font-family:'Inter',sans-serif;font-size:11.5px;color:#2B2B2B;}
.ecl-tree .t-hd{font-size:9.5px;font-weight:700;letter-spacing:.13em;color:#7A7A7A;padding:0 12px 8px;font-family:'JetBrains Mono',monospace;}
.ecl-tree .t-row{display:flex;align-items:center;gap:7px;padding:3px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ecl-tree .t-row .icon{width:13px;height:13px;flex:0 0 auto;color:var(--java-blue);}
.ecl-tree .t-row.d1{padding-left:26px;}
.ecl-tree .t-row.d2{padding-left:40px;}
.ecl-tree .t-row.d3{padding-left:54px;}
.ecl-tree .t-row.sel{background:var(--pb-tint);font-weight:700;color:var(--pb-deep);box-shadow:inset 3px 0 0 var(--pb);}
.ecl-tree .t-row.new{color:var(--lab);font-weight:700;}
.ecl-editor{background:#fff;min-width:0;display:flex;flex-direction:column;}
.ecl-tabs{display:flex;background:#EFEEEC;border-bottom:1px solid #D5D3D1;overflow-x:auto;}
.ecl-tab{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;padding:6px 14px;border-right:1px solid #D5D3D1;color:#5B5B5B;white-space:nowrap;display:flex;align-items:center;gap:6px;}
.ecl-tab .icon{width:12px;height:12px;color:var(--java-blue);}
.ecl-tab.on{background:#fff;color:var(--ink);border-bottom:2px solid var(--pb);}
.ecl-code{font-family:'JetBrains Mono',monospace;font-size:clamp(10.5px,.95vw,12.5px);line-height:1.85;padding:11px 14px;overflow-x:auto;flex:1 1 auto;}
.ecl-code div{white-space:pre;}
.ecl-code .ln{color:#237893;user-select:none;display:inline-block;min-width:2.4ch;text-align:right;margin-right:11px;}
.ecl-cap{background:var(--ink);color:#fff;padding:9px 14px;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.12em;line-height:1.6;}
.ecl-cap b{color:#BAE6FD;}
.ecl-con{background:#0C0C0C;color:#E5E5E5;border-top:1px solid #333;padding:10px 14px;font-family:'JetBrains Mono',monospace;font-size:clamp(10.5px,.95vw,12px);line-height:1.9;overflow-x:auto;}
.ecl-con .c-hd{font-size:9px;font-weight:700;letter-spacing:.14em;color:#8A8A8A;margin-bottom:5px;}
.ecl-con div{white-space:pre;}

footer{border-top:1px solid var(--ink-08);}
.end-foot{display:flex;justify-content:space-between;gap:14px;padding:22px 0 38px;font-family:'JetBrains Mono',monospace;font-size:clamp(9px,.8vw,10.5px);font-weight:700;letter-spacing:.18em;color:var(--ink-60);flex-wrap:wrap;}