:root {
  --bg: #0d1117; --panel: #151b23; --panel-2: #1c242e; --line: #2a333f; --line-bright: #3a4655;
  --text: #e6edf3; --muted: #8b98a5; --dim: #5a6673;
  --pass: #3fb950; --pass-dim: #1f6f2e; --run: #d29922; --fail: #f85149; --accent: #58a6ff; --java: #e76f00;
  --mono: 'JetBrains Mono', ui-monospace, monospace; --disp: 'Space Grotesk', system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--disp); line-height: 1.55; -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(circle at 15% -10%, rgba(88,166,255,0.06), transparent 40%), radial-gradient(circle at 90% 5%, rgba(231,111,0,0.05), transparent 35%); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 800px; margin: 0 auto; padding: 0 24px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* topbar */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(13,17,23,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pass); box-shadow: 0 0 12px var(--pass); }
.brand .cursor { color: var(--pass); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.track-chip { font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.track-chip .jdot { width: 8px; height: 8px; border-radius: 2px; background: var(--java); }
.progress-mini { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.progress-mini .bar { width: 110px; height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; border: 1px solid var(--line); }
.progress-mini .fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--pass-dim), var(--pass)); transition: width 0.4s ease; }

/* generic */
.eyebrow { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.eyebrow::before { content: "$"; color: var(--pass); }
h1 { font-size: clamp(34px, 5.5vw, 60px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; }
h2 { font-size: 28px; letter-spacing: -0.02em; margin-bottom: 14px; }
.section-label { font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.block { padding: 40px 0; border-top: 1px solid var(--line); }
.prose { color: var(--muted); font-size: 16px; }
.prose p { margin-bottom: 14px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose h3 { color: var(--text); font-size: 19px; margin: 28px 0 10px; letter-spacing: -0.01em; }
.prose ul, .prose ol { margin: 0 0 14px 22px; }
.prose li { margin-bottom: 6px; }
.prose code { font-family: var(--mono); font-size: 13px; background: var(--panel-2); padding: 2px 6px; border-radius: 4px; color: var(--accent); }

/* buttons */
.btn { font-family: var(--mono); font-size: 13px; padding: 12px 20px; border-radius: 8px; cursor: pointer; border: 1px solid var(--line-bright); background: var(--panel); color: var(--text); transition: all 0.16s; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.btn:hover { border-color: var(--muted); transform: translateY(-1px); text-decoration: none; }
.btn.primary { background: var(--pass); border-color: var(--pass); color: #0d1117; font-weight: 700; }
.btn.primary:hover { background: #4cc961; }

/* code blocks */
.code { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 18px 0; }
.code-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.code-head .rl { width:10px; height:10px; border-radius:50%; background:#ff5f57; flex-shrink: 0; }
.code-head .fn { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-left: 6px; }
.code pre { padding: 18px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.75; }
.code .cm { color: var(--dim); } .code .kw { color: #ff7b72; } .code .ty { color: #79c0ff; }
.code .st { color: #a5d6ff; } .code .an { color: var(--java); } .code .mt { color: #d2a8ff; } .code .nm { color: #f2cc60; }

/* callouts */
.callout { border-left: 3px solid var(--accent); background: rgba(88,166,255,0.06); padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 18px 0; font-size: 14.5px; color: var(--muted); }
.callout b { color: var(--text); }
.callout.warn { border-left-color: var(--run); background: rgba(210,153,34,0.06); }
.callout.good { border-left-color: var(--pass); background: rgba(63,185,80,0.06); }

/* manual->auto framing box */
.framing { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; margin: 24px 0; }
.framing .side { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--panel); }
.framing .side .lbl { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.framing .manual .lbl { color: var(--muted); }
.framing .auto .lbl { color: var(--pass); }
.framing .side p { font-size: 14px; color: var(--muted); }
.framing .arrow { display: flex; align-items: center; color: var(--pass); font-family: var(--mono); font-size: 20px; }

/* exercise box */
.exercise { border: 1px dashed var(--line-bright); border-radius: 12px; margin: 28px 0; overflow: hidden; }
.exercise-head { padding: 12px 18px; background: var(--panel-2); font-family: var(--mono); font-size: 13px; color: var(--run); border-bottom: 1px dashed var(--line-bright); }
.exercise-body { padding: 18px; font-size: 15px; color: var(--muted); }
.exercise-body p { margin-bottom: 10px; }
.exercise-body ol, .exercise-body ul { margin-left: 22px; margin-bottom: 10px; }
.exercise-body li { margin-bottom: 6px; }
.exercise-body code { font-family: var(--mono); font-size: 13px; background: var(--panel-2); padding: 2px 6px; border-radius: 4px; color: var(--accent); }
details.solution { margin-top: 12px; }
details.solution summary { cursor: pointer; font-family: var(--mono); font-size: 12.5px; color: var(--accent); }
details.solution[open] summary { margin-bottom: 10px; }

/* takeaways */
.takeaways { background: var(--panel); border: 1px solid var(--pass-dim); border-radius: 12px; padding: 18px 20px; margin: 28px 0; }
.takeaways .tk-head { font-family: var(--mono); font-size: 12px; color: var(--pass); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.takeaways ul { list-style: none; }
.takeaways li { padding: 5px 0 5px 24px; position: relative; font-size: 14.5px; color: var(--muted); }
.takeaways li::before { content: "\2713"; position: absolute; left: 0; color: var(--pass); font-family: var(--mono); }

/* lesson header + nav */
.lesson-head { padding: 44px 0 8px; }
.lesson-meta { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-top: 12px; display: flex; gap: 16px; flex-wrap: wrap; }
.lesson-meta .suite-tag { color: var(--java); }
.lesson-nav { display: flex; justify-content: space-between; gap: 12px; padding: 32px 0 60px; border-top: 1px solid var(--line); margin-top: 40px; flex-wrap: wrap; }
.complete-row { display: flex; justify-content: center; padding: 8px 0 24px; }
.btn.done-state { background: var(--pass); border-color: var(--pass); color: #0d1117; font-weight: 700; }

/* suites on index */
.suite { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; overflow: hidden; background: var(--panel); transition: border-color 0.18s; }
.suite:hover { border-color: var(--line-bright); }
.suite-head { display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; user-select: none; }
.suite-check { width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--line-bright); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; color: var(--dim); transition: all 0.2s; }
.suite.done .suite-check { background: var(--pass); border-color: var(--pass); color: #0d1117; }
.suite.optional .suite-check { border-style: dashed; }
.suite-index { font-family: var(--mono); font-size: 12px; color: var(--dim); width: 34px; flex-shrink: 0; }
.suite-title { flex: 1; }
.suite-title .name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.suite-title .desc { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.tag { font-family: var(--mono); font-size: 10px; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.tag.opt { color: var(--accent); border-color: rgba(88,166,255,0.3); }
.tag.soon { color: var(--dim); }
.chev { color: var(--dim); font-family: var(--mono); transition: transform 0.2s; flex-shrink: 0; }
.suite.open .chev { transform: rotate(90deg); }
.specs { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.suite.open .specs { max-height: 800px; border-top: 1px solid var(--line); }
a.spec { display: flex; align-items: center; gap: 14px; padding: 12px 20px 12px 62px; font-family: var(--mono); font-size: 13px; border-bottom: 1px solid var(--line); color: var(--muted); transition: background 0.15s; }
a.spec:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
a.spec:last-child { border-bottom: none; }
a.spec .s-status { color: var(--dim); }
a.spec.pass .s-status { color: var(--pass); }
a.spec .s-name { flex: 1; }
a.spec .s-time { color: var(--dim); font-size: 11px; }
a.spec.stub { opacity: 0.55; pointer-events: none; }

footer { border-top: 1px solid var(--line); padding: 40px 0; color: var(--dim); font-family: var(--mono); font-size: 12px; margin-top: 40px; }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

@media (max-width: 720px) {
  .framing { grid-template-columns: 1fr; }
  .framing .arrow { transform: rotate(90deg); justify-content: center; }
  .track-chip { display: none; }
  .suite-index { display: none; }
  a.spec { padding-left: 20px; }
}

/* output blocks */
.code.output { border-color: var(--pass-dim); }
.code.output .code-head { background: rgba(63,185,80,0.07); border-bottom-color: var(--pass-dim); }
.code.output .code-head .fn { color: var(--pass); }
.code-head .gl { width:10px; height:10px; border-radius:50%; background: var(--pass); box-shadow: 0 0 6px var(--pass); flex-shrink: 0; }
.code.output pre { color: var(--muted); }

/* references */
.refs { margin: 28px 0 8px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.refs-head { font-family: var(--mono); font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.refs ul { list-style: none; }
.refs li { padding: 4px 0 4px 20px; position: relative; font-size: 14px; }
.refs li::before { content: "\2197"; position: absolute; left: 0; color: var(--dim); font-family: var(--mono); font-size: 12px; }

footer .heart { color: var(--fail); }

.nav-link { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.nav-link:hover { color: var(--text); text-decoration: none; }
.res-card { display: flex; align-items: center; gap: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 20px 22px; margin-bottom: 14px; transition: border-color 0.18s; }
.res-card:hover { border-color: var(--line-bright); }
.res-main { flex: 1; }
.res-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.res-desc { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.res-meta { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.res-card .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 620px) { .res-card { flex-direction: column; align-items: flex-start; } }

/* --- production pass: a11y, downloads pill, footer links, print --- */
button.suite-head { width: 100%; background: none; border: none; color: inherit; font: inherit; text-align: left; }
.suite-title { display: block; }
.suite-title .name, .suite-title .desc { display: block; }
.suite-check { display: flex; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.suite-head:focus-visible { outline-offset: -2px; }

.nav-link.dl-pill { color: var(--pass); border: 1px solid var(--pass-dim); background: rgba(63,185,80,0.08); padding: 7px 14px; border-radius: 8px; font-weight: 700; transition: all 0.16s; }
.nav-link.dl-pill:hover { background: rgba(63,185,80,0.16); border-color: var(--pass); color: var(--pass); }

.foot-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.foot-links a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-bright); text-underline-offset: 3px; }
.foot-links a:hover { color: var(--accent); }
.foot-links .sep { color: var(--dim); }

@media print {
  .topbar, .lesson-nav, .complete-row, footer, .btn { display: none !important; }
  body { background: #fff; color: #111; }
  .prose, .prose p, .exercise-body, .takeaways li, .callout, .framing .side p { color: #222; }
  .code, .code pre, .exercise, .takeaways, .refs, .callout, .framing .side { background: #fff; border-color: #bbb; }
  .code pre, .code .cm, .code .kw, .code .ty, .code .st, .code .an, .code .mt, .code .nm { color: #111; }
  a { color: #0a4fa0; }
}

/* --- scroll animations (landing page) --- */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s); will-change: opacity, transform; }
html.js .reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
html.js .reveal-right { opacity: 0; transform: translateX(36px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
html.js .reveal.visible, html.js .reveal-left.visible, html.js .reveal-right.visible { opacity: 1; transform: none; }

/* hero entrance on load */
html.js .hero .hero-in { opacity: 0; transform: translateY(22px); animation: heroUp .7s cubic-bezier(.16,1,.3,1) forwards; }
html.js .hero .hi-1 { animation-delay: .05s; }
html.js .hero .hi-2 { animation-delay: .18s; }
html.js .hero .hi-3 { animation-delay: .32s; }
html.js .hero .hi-4 { animation-delay: .46s; }
@keyframes heroUp { to { opacity: 1; transform: none; } }

/* the strike-through draws itself across "click" */
html.js h1 .strike::after { transform: rotate(-2deg) scaleX(0); transform-origin: left center; animation: strikeDraw .5s cubic-bezier(.6,0,.3,1) 1.05s forwards; }
@keyframes strikeDraw { to { transform: rotate(-2deg) scaleX(1); } }

/* green word pulses alive just after the strike lands */
html.js h1 .green { animation: greenGlow 1.2s ease 1.35s; }
@keyframes greenGlow { 0% { text-shadow: none; } 35% { text-shadow: 0 0 22px rgba(63,185,80,.75); } 100% { text-shadow: none; } }

/* topbar gains depth once you scroll */
.topbar { transition: box-shadow .3s ease, border-color .3s ease; }
.topbar.scrolled { box-shadow: 0 8px 24px rgba(0,0,0,.35); border-bottom-color: var(--line-bright); }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .reveal-left, html.js .reveal-right,
  html.js .hero .hero-in { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  html.js h1 .strike::after { animation: none !important; transform: rotate(-2deg) scaleX(1) !important; }
  html.js h1 .green { animation: none !important; }
}

/* --- robot companion (landing page, wide screens) --- */
#robot-companion { position: fixed; top: 50%; transform: translateY(-50%); right: max(28px, calc((100vw - 1080px)/2 - 190px)); width: 170px; z-index: 5; pointer-events: none; }
#robot-companion svg { width: 100%; height: auto; display: block; }
#robot-companion .r-status { font-family: var(--mono); font-size: 11px; color: var(--dim); text-align: center; margin-top: 10px; transition: color .5s; }
@media (max-width: 1379px) { #robot-companion { display: none; } }

/* parts: smooth mechanical glide between formations */
#robot-companion .r-part { transform-box: fill-box; transform-origin: center; }
#robot-companion .r-eye, #robot-companion .r-led, #robot-companion .r-tip { transition: fill .6s ease, filter .6s ease; }
#robot-companion .r-check { opacity: 0; transition: opacity .5s ease .3s; }
#robot-companion .r-shadow { transform-box: fill-box; transform-origin: center; }

/* states 2+ — assembled; eye/LED colors tell the story */
.rstate-2 .r-eye, .rstate-2 .r-led, .rstate-2 .r-tip { fill: var(--run); }
.rstate-3 .r-eye, .rstate-3 .r-led,
.rstate-4 .r-eye, .rstate-4 .r-led { fill: var(--pass); filter: drop-shadow(0 0 4px rgba(63,185,80,.9)); }
.rstate-3 .r-tip, .rstate-4 .r-tip { fill: var(--pass); }
.rstate-3 .r-check, .rstate-4 .r-check { opacity: 1; }
.rstate-3 .r-bob, .rstate-4 .r-bob { animation: rBob 3.2s ease-in-out infinite; }
@keyframes rBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* state 4 — the wave (about section) */
.rstate-4 .r-armR { transform-origin: 50% 12%; animation: rWave 1.6s ease-in-out infinite; }
@keyframes rWave { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-135deg); } 45% { transform: rotate(-115deg); } 60% { transform: rotate(-135deg); } }
.rstate-3 .r-status, .rstate-4 .r-status { color: var(--pass); }
.rstate-2 .r-status { color: var(--run); }

@media (prefers-reduced-motion: reduce) {
  #robot-companion .r-part, #robot-companion .r-shadow { transition: none !important; transform: none !important; opacity: 1 !important; }
  .rstate-3 .r-bob, .rstate-4 .r-bob, .rstate-4 .r-armR { animation: none !important; }
}

/* --- robot v2: living details --- */
#robot-companion .r-pupil { transition: none; }
#robot-companion .r-lid { transform: scaleY(0); transform-box: fill-box; transform-origin: center top; transition: transform .09s ease; }
#robot-companion .blink .r-lid { transform: scaleY(1); }

/* antenna radar ping — visible once systems come online */
#robot-companion .r-ping { opacity: 0; transform-box: fill-box; transform-origin: center; }
.rstate-2 .r-ping, .rstate-3 .r-ping, .rstate-4 .r-ping { animation: rPing 2.4s ease-out infinite; }
.rstate-2 .r-ping2, .rstate-3 .r-ping2, .rstate-4 .r-ping2 { animation-delay: 1.2s; }
@keyframes rPing { 0% { opacity: .8; transform: scale(.3); } 70% { opacity: 0; transform: scale(2.4); } 100% { opacity: 0; transform: scale(2.4); } }

/* chest screen activity bars — idle, then working, then green */
#robot-companion .r-line { transform: scaleX(.35); transform-box: fill-box; transform-origin: left center; fill: #2a333f; transition: fill .5s; }
.rstate-2 .r-line { fill: var(--run); }
.rstate-3 .r-line, .rstate-4 .r-line { fill: var(--pass); }
.rstate-2 .r-line, .rstate-3 .r-line, .rstate-4 .r-line { animation: rBar 1.5s ease-in-out infinite; }
#robot-companion .r-l2 { animation-delay: .25s !important; }
#robot-companion .r-l3 { animation-delay: .5s !important; }
@keyframes rBar { 0%,100% { transform: scaleX(.35); } 50% { transform: scaleX(1); } }

/* power-up spark burst */
#robot-companion .r-spark { opacity: 0; transform-box: fill-box; transform-origin: center; }
#robot-companion.burst .r-spark { animation: rSpark .85s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes rSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(2px) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(40px) scale(.4); } }

/* status line pulse on change */
#robot-companion .r-status.changed { animation: statusPop .45s ease; }
@keyframes statusPop { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .rstate-2 .r-ping, .rstate-3 .r-ping, .rstate-4 .r-ping,
  .rstate-2 .r-line, .rstate-3 .r-line, .rstate-4 .r-line,
  #robot-companion.burst .r-spark { animation: none !important; }
}

/* ============ locator sandbox ============ */
.sandbox { border: 1px solid var(--line-bright); border-radius: 14px; overflow: hidden; margin: 26px 0; background: var(--panel); }
.sb-head { padding: 12px 18px; background: var(--panel-2); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 13px; color: var(--pass); display: flex; justify-content: space-between; align-items: center; }
.sb-score { color: var(--muted); font-size: 12px; }

/* the fake page under test */
.sb-stage { padding: 18px; background: #10161d; border-bottom: 1px solid var(--line); }
.sb-stage * { margin: 0; font-family: var(--disp); }
.sb-site { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #0d1117; }
.sb-site header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sb-site .logo { font-weight: 700; font-size: 15px; color: var(--text); }
.sb-site .cart-link { position: relative; color: var(--muted); font-size: 18px; text-decoration: none; }
.sb-site .cart-link .badge { position: absolute; top: -8px; right: -12px; background: var(--fail); color: #fff; font-size: 10px; font-family: var(--mono); border-radius: 8px; padding: 1px 6px; }
.sb-site .banner { padding: 8px 16px; background: rgba(63,185,80,0.08); border-bottom: 1px solid var(--line); color: var(--pass); font-size: 12.5px; font-family: var(--mono); }
.sb-site .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
.sb-site .product { border: 1px solid var(--line); border-radius: 9px; padding: 12px; background: var(--panel); }
.sb-site .product.sale { border-color: rgba(231,111,0,0.5); }
.sb-site .product-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.sb-site .product-price { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.sb-site .sale-flag { display: inline-block; font-family: var(--mono); font-size: 10px; color: var(--java); border: 1px solid rgba(231,111,0,0.5); border-radius: 4px; padding: 1px 6px; margin-left: 6px; }
.sb-site .add-btn { font-family: var(--mono); font-size: 12px; padding: 7px 12px; border-radius: 7px; border: 1px solid var(--line-bright); background: var(--panel-2); color: var(--text); cursor: pointer; }
.sb-site .add-btn:hover { border-color: var(--pass); }
@media (max-width: 560px) { .sb-site .grid { grid-template-columns: 1fr; } }

/* live match highlight */
.sb-hit { outline: 2px solid var(--pass) !important; outline-offset: 2px; background: rgba(63,185,80,0.10) !important; border-radius: 4px; box-shadow: 0 0 14px rgba(63,185,80,0.25); }

/* controls */
.sb-controls { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.sb-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.sb-tabs button { font-family: var(--mono); font-size: 12px; padding: 6px 14px; border-radius: 7px; border: 1px solid var(--line-bright); background: none; color: var(--muted); cursor: pointer; }
.sb-tabs button.active { background: var(--pass); border-color: var(--pass); color: #0d1117; font-weight: 700; }
#sb-input { width: 100%; font-family: var(--mono); font-size: 14px; padding: 12px 14px; border-radius: 9px; border: 1px solid var(--line-bright); background: #0d1117; color: var(--text); outline: none; }
#sb-input:focus { border-color: var(--accent); }
.sb-result { margin-top: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--dim); min-height: 18px; }
.sb-result.ok { color: var(--pass); }
.sb-result.err { color: var(--fail); }

/* challenges */
.sb-challenges { padding: 14px 18px 18px; }
.sb-ch-title { font-family: var(--mono); font-size: 12px; color: var(--run); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.sb-ch { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sb-ch:last-child { border-bottom: none; }
.sb-ch .st { font-family: var(--mono); color: var(--dim); flex-shrink: 0; width: 18px; text-align: center; }
.sb-ch.done .st { color: var(--pass); }
.sb-ch .q { flex: 1; font-size: 14px; color: var(--muted); }
.sb-ch.done .q { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--pass-dim); }
.sb-ch .q details { margin-top: 4px; }
.sb-ch .q summary { font-family: var(--mono); font-size: 11.5px; color: var(--accent); cursor: pointer; }
.sb-ch .q details[open] p { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-top: 4px; }
.sb-ch .check { font-family: var(--mono); font-size: 11.5px; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--line-bright); background: none; color: var(--muted); cursor: pointer; flex-shrink: 0; }
.sb-ch .check:hover { border-color: var(--pass); color: var(--pass); }
.sb-ch.done .check { visibility: hidden; }
.sb-all-done { margin-top: 12px; font-family: var(--mono); font-size: 13px; color: var(--pass); display: none; }

/* predict-the-output toggle */
details.predict > summary { cursor: pointer; font-family: var(--mono); font-size: 12.5px; color: var(--run); padding: 10px 14px; border: 1px dashed rgba(210,153,34,0.5); border-radius: 10px; margin: 18px 0; list-style: none; }
details.predict > summary::before { content: "\25B8 "; }
details.predict[open] > summary { color: var(--dim); border-color: var(--line); margin-bottom: 0; }
details.predict[open] > summary::before { content: "\25BE "; }
details.predict > summary::-webkit-details-marker { display: none; }

/* keep prose styles from leaking into the sandbox stage */
.prose .sb-site h3 { margin: 0 0 4px; font-size: 14px; color: var(--text); }
.prose .sb-site p, .prose .sb-stage p { margin: 0; }
.prose .sb-ch .q details p { margin-top: 4px; margin-bottom: 0; }

/* ============ diagrams & screenshot slots ============ */
figure.diagram { margin: 22px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
figure.diagram .dg-head { padding: 10px 16px; background: var(--panel-2); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--accent); }
figure.diagram .dg-body { padding: 14px; }
figure.diagram svg { width: 100%; height: auto; display: block; }

figure.shot { margin: 22px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
figure.shot img { width: 100%; display: block; }
figure.shot figcaption { padding: 10px 16px; font-family: var(--mono); font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }
figure.shot .shot-ph { display: none; }
/* no image file yet -> the whole figure stays invisible; drop a PNG into
   images/ (same filename) and it appears automatically with its caption */
figure.shot.missing { display: none; }

/* ============ suite quizzes ============ */
.qz-q { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 18px 20px; margin: 16px 0; }
.qz-q.correct { border-color: var(--pass-dim); }
.qz-q.wrong { border-color: rgba(248,81,73,0.5); }
.qz-text { font-size: 15.5px; color: var(--text); margin-bottom: 12px; }
.qz-text .qn { font-family: var(--mono); color: var(--dim); margin-right: 8px; }
.qz-opts { display: flex; flex-direction: column; gap: 8px; }
.qz-opt { text-align: left; font-family: var(--disp); font-size: 14px; padding: 11px 14px; border-radius: 9px; border: 1px solid var(--line-bright); background: var(--panel-2); color: var(--muted); cursor: pointer; transition: all .14s; }
.qz-opt:hover { border-color: var(--muted); color: var(--text); }
.qz-opt.sel { border-color: var(--accent); color: var(--text); background: rgba(88,166,255,0.08); }
.qz-q.graded .qz-opt { cursor: default; pointer-events: none; }
.qz-q.graded .qz-opt.right { border-color: var(--pass); color: var(--pass); background: rgba(63,185,80,0.08); }
.qz-q.graded .qz-opt.sel.miss { border-color: var(--fail); color: var(--fail); background: rgba(248,81,73,0.06); }
.qz-exp { display: none; margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--accent); background: rgba(88,166,255,0.05); font-size: 13.5px; color: var(--muted); border-radius: 0 8px 8px 0; }
.qz-q.graded .qz-exp { display: block; }
.qz-controls { display: flex; gap: 12px; align-items: center; margin: 24px 0; flex-wrap: wrap; }
.qz-summary { font-family: var(--mono); font-size: 14px; padding: 14px 18px; border-radius: 10px; display: none; margin: 8px 0 24px; }
.qz-summary.pass { display: block; border: 1px solid var(--pass); color: var(--pass); background: rgba(63,185,80,0.07); }
.qz-summary.fail { display: block; border: 1px solid var(--fail); color: var(--fail); background: rgba(248,81,73,0.06); }
.qz-note { font-family: var(--mono); font-size: 12px; color: var(--dim); }
a.spec.quizrow .s-status { color: var(--run); }
a.spec.quizrow.pass .s-status { color: var(--pass); }
a.spec.quizrow .s-name { color: var(--run); }
a.spec.quizrow.pass .s-name { color: var(--muted); }

/* ============ when it breaks ============ */
.wib { border: 1px solid rgba(248,81,73,0.35); border-radius: 12px; margin: 26px 0; overflow: hidden; background: var(--panel); }
.wib-head { padding: 12px 18px; background: rgba(248,81,73,0.07); border-bottom: 1px solid rgba(248,81,73,0.25); font-family: var(--mono); font-size: 12.5px; color: var(--fail); }
.wib-item { border-bottom: 1px solid var(--line); }
.wib-item:last-child { border-bottom: none; }
.wib-item summary { cursor: pointer; padding: 12px 18px; font-size: 14.5px; color: var(--text); list-style: none; }
.wib-item summary::before { content: "\25B8 "; color: var(--fail); font-family: var(--mono); }
.wib-item[open] summary::before { content: "\25BE "; }
.wib-item summary::-webkit-details-marker { display: none; }
.wib-item summary:hover { background: var(--panel-2); }
.wib-err { margin: 0 18px 10px; padding: 12px 14px; background: #0d1117; border: 1px solid var(--line); border-radius: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--fail); overflow-x: auto; }
.wib-fix { margin: 0 18px 14px; font-size: 14px; color: var(--muted); }
.wib-fix strong { color: var(--pass); }

/* ============ glossary ============ */
#gl-search { width: 100%; font-family: var(--mono); font-size: 14px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line-bright); background: var(--panel); color: var(--text); outline: none; margin: 8px 0 24px; }
#gl-search:focus { border-color: var(--accent); }
.gl-letters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.gl-letters a { font-family: var(--mono); font-size: 12px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); }
.gl-letters a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.gl-letter { font-family: var(--mono); font-size: 14px; color: var(--pass); border-bottom: 1px solid var(--line); padding-bottom: 6px; margin: 26px 0 6px; }
.gl-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.gl-item:last-child { border-bottom: none; }
.gl-term { font-family: var(--mono); font-size: 14.5px; color: var(--text); font-weight: 700; margin-bottom: 4px; }
.gl-def { font-size: 14px; color: var(--muted); }
.gl-empty { display: none; font-family: var(--mono); font-size: 13px; color: var(--dim); padding: 20px 0; }

/* ============ cheatsheets ============ */
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0 50px; }
.cs-card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; break-inside: avoid; }
.cs-card .cs-t { padding: 10px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--pass); }
.cs-card pre { padding: 12px 14px; font-family: var(--mono); font-size: 11.5px; line-height: 1.65; color: var(--muted); overflow-x: auto; }
.cs-card ul { list-style: none; padding: 10px 14px; }
.cs-card li { font-size: 12.5px; color: var(--muted); padding: 3px 0 3px 16px; position: relative; }
.cs-card li::before { content: "\203A"; position: absolute; left: 2px; color: var(--pass); font-family: var(--mono); }
@media (max-width: 700px) { .cs-grid { grid-template-columns: 1fr; } }
@media print {
  .cs-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cs-card, .cs-card .cs-t, .cs-card pre { background: #fff; color: #111; border-color: #999; }
  .cs-card li { color: #222; }
}
.cs-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 40px; }
.cs-hub a { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 14px 16px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); transition: all .15s; }
.cs-hub a:hover { border-color: var(--pass); color: var(--pass); text-decoration: none; }
.cs-hub a .n { display: block; color: var(--dim); font-size: 10.5px; margin-bottom: 4px; }
@media (max-width: 640px) { .cs-hub { grid-template-columns: 1fr; } }

/* ============ diagnostic ============ */
.diag { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; margin-top: 34px; max-width: 720px; }
.diag-head { padding: 14px 20px; background: var(--panel-2); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 13px; color: var(--accent); }
.diag-body { padding: 18px 20px; }
.dq { margin-bottom: 16px; }
.dq .dq-t { font-size: 14.5px; color: var(--text); margin-bottom: 8px; }
.dq-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.dq-opts button { font-family: var(--mono); font-size: 12px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line-bright); background: var(--panel-2); color: var(--muted); cursor: pointer; transition: all .13s; }
.dq-opts button:hover { border-color: var(--muted); color: var(--text); }
.dq-opts button.sel { border-color: var(--accent); background: rgba(88,166,255,0.1); color: var(--text); }
.diag-result { display: none; border-top: 1px solid var(--line); padding: 16px 20px; }
.diag-result.show { display: block; }
.diag-result .verdict { font-size: 15px; color: var(--text); margin-bottom: 8px; }
.diag-result .chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.diag-result .chip { font-family: var(--mono); font-size: 11.5px; padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(88,166,255,0.4); color: var(--accent); }
.diag-reset { font-family: var(--mono); font-size: 11.5px; color: var(--dim); cursor: pointer; background: none; border: none; margin-top: 10px; }
.diag-reset:hover { color: var(--muted); }

/* ============ certificate v2 ============ */
.cert { position: relative; border: 1px solid var(--line-bright); border-radius: 18px; padding: 6px; margin: 30px 0;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(63,185,80,0.10), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(88,166,255,0.06), transparent 55%),
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(58,70,85,0.16) 39px, rgba(58,70,85,0.16) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(58,70,85,0.16) 39px, rgba(58,70,85,0.16) 40px),
    var(--panel); }
.cert-inner { border: 1px solid var(--line); border-radius: 13px; padding: 46px 44px 34px; text-align: center; }
.cert .cb { position: absolute; width: 26px; height: 26px; border: 2px solid var(--pass); }
.cert .cb.tl { top: 16px; left: 16px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.cert .cb.tr { top: 16px; right: 16px; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.cert .cb.bl { bottom: 16px; left: 16px; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.cert .cb.br { bottom: 16px; right: 16px; border-left: none; border-top: none; border-radius: 0 0 6px 0; }
.cert .c-brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--disp); font-weight: 700; font-size: 18px; color: var(--text); margin-bottom: 22px; }
.cert .c-brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pass); box-shadow: 0 0 10px var(--pass); }
.cert .c-brand .cursor { color: var(--pass); }
.cert .c-eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--muted); margin-bottom: 30px; }
.cert .c-name { font-family: var(--disp); font-size: clamp(30px, 5vw, 46px); font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin-bottom: 8px; line-height: 1.1; }
.cert .c-body { font-size: 14.5px; color: var(--muted); max-width: 560px; margin: 14px auto 22px; line-height: 1.7; }
.cert .c-track { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; margin-bottom: 14px; }
.cert .c-stats { font-family: var(--mono); font-size: 13px; color: var(--pass); margin-bottom: 34px; }
.cert .c-foot { display: flex; align-items: flex-end; justify-content: space-between; max-width: 640px; margin: 0 auto; gap: 20px; }
.cert .c-col { flex: 1; display: flex; flex-direction: column; gap: 5px; font-family: var(--mono); font-size: 12.5px; color: var(--text); border-top: 1px solid var(--line-bright); padding-top: 10px; }
.cert .c-col .c-lbl { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.cert .c-seal { flex-shrink: 0; width: 128px; margin: 0 4px -6px; }
.cert .c-seal svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 14px rgba(63,185,80,0.25)); }
.cert .c-hash { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 26px; }
.cert .c-hash b { color: var(--muted); font-weight: 400; }
.cert-actions { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 22px 0 20px; flex-wrap: wrap; }
#cert-name-input { font-family: var(--disp); font-size: 15px; padding: 11px 16px; border-radius: 9px; border: 1px solid var(--line-bright); background: var(--panel); color: var(--text); outline: none; min-width: 280px; }
#cert-name-input:focus { border-color: var(--accent); }
.cert-locked { border: 1px dashed var(--line-bright); border-radius: 14px; padding: 40px 30px; text-align: center; margin: 30px 0 50px; }
.cert-locked .big { font-family: var(--mono); font-size: 26px; color: var(--run); margin-bottom: 10px; }
.cert-locked p { color: var(--muted); font-size: 14.5px; max-width: 480px; margin: 0 auto 20px; }
@media (max-width: 640px) {
  .cert .c-foot { flex-direction: column; align-items: stretch; }
  .cert .c-seal { margin: 10px auto; }
}
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .cert-page .topbar, .cert-page footer, .cert-page .cert-actions, .cert-page .lesson-head, .cert-page .cert-note { display: none !important; }
  .cert { background: #fff !important; border-color: #555; }
  .cert-inner { border-color: #999; }
  .cert .cb { border-color: #1a7f37; }
  .cert .c-brand, .cert .c-name { color: #111; }
  .cert .c-brand .dot { box-shadow: none; background: #1a7f37; }
  .cert .c-brand .cursor, .cert .c-stats { color: #1a7f37; }
  .cert .c-eyebrow, .cert .c-body { color: #333; }
  .cert .c-track { color: #0a4fa0; }
  .cert .c-col { color: #111; border-top-color: #999; }
  .cert .c-col .c-lbl, .cert .c-hash { color: #666; }
  .cert .c-seal svg { filter: none; }
}

/* certificate v3 details + verify page */
.cert .c-meta { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--text); border: 1px solid var(--line-bright); display: inline-block; padding: 7px 16px; border-radius: 8px; background: rgba(88,166,255,0.05); margin-bottom: 30px; }
.cert .c-meta b { color: var(--accent); font-weight: 700; }
.cert .c-verify { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 24px; }
.cert .c-verify b { color: var(--accent); font-weight: 400; }
.vf { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 20px; margin-top: 18px; }
.vf-l { display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); margin: 12px 0 6px; }
.vf-l:first-child { margin-top: 0; }
.vf input { width: 100%; font-family: var(--mono); font-size: 14px; padding: 11px 14px; border-radius: 9px; border: 1px solid var(--line-bright); background: #0d1117; color: var(--text); outline: none; }
.vf input:focus { border-color: var(--accent); }
.vf-result { display: none; margin-top: 16px; padding: 14px 16px; border-radius: 10px; font-family: var(--mono); font-size: 13px; }
.vf-result.ok { display: block; border: 1px solid var(--pass); color: var(--pass); background: rgba(63,185,80,0.07); }
.vf-result.bad { display: block; border: 1px solid var(--fail); color: var(--fail); background: rgba(248,81,73,0.06); }
@media print { .cert .c-verify b { color: #0a4fa0; } .cert .c-meta { border-color: #999; background: #fff; } .cert .c-meta b { color: #0a4fa0; } }