/* TAKE IT BACK — guide styles, both directions */

/* ===== DERELICT (default) ===== */
html[data-theme="derelict"]{
  --void:#0a0e0a;
  --void-2:#060906;
  --green:#39ff6a;
  --green-d:#1e7a38;
  --phosphor:#c8d6c8;
  --ember:#ff6a2b;
  --ember-d:#a33c13;
  --ash:#6b786b;
}
html[data-theme="derelict"] *{margin:0;padding:0;box-sizing:border-box}
html[data-theme="derelict"]{scroll-behavior:smooth}
html[data-theme="derelict"] body{
  background:var(--void);
  color:var(--phosphor);
  font-family:'JetBrains Mono','IBM Plex Mono','DejaVu Sans Mono',monospace;
  line-height:1.6;
  overflow-x:hidden;
}
html[data-theme="derelict"] .sans{font-family:'Inter','IBM Plex Sans',system-ui,sans-serif}

/* ---- CRT overlays (decorative) ---- */
html[data-theme="derelict"] .scanlines{position:fixed;inset:0;pointer-events:none;z-index:90;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,rgba(0,0,0,.28) 3px,rgba(0,0,0,0) 4px);
  animation:drift 8s linear infinite;mix-blend-mode:multiply}
@keyframes drift{from{background-position:0 0}to{background-position:0 100px}}
html[data-theme="derelict"] .grain{position:fixed;inset:0;pointer-events:none;z-index:91;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-theme="derelict"] .vignette{position:fixed;inset:0;pointer-events:none;z-index:89;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
html[data-theme="derelict"] .flickerlayer{position:fixed;inset:0;pointer-events:none;z-index:88;background:var(--green);opacity:0;mix-blend-mode:overlay;animation:flick 7s infinite steps(1)}
@keyframes flick{0%,97%,100%{opacity:0}97.3%{opacity:.02}97.6%{opacity:0}98.5%{opacity:.03}98.8%{opacity:0}}
html[data-theme="derelict"] .bezel{position:fixed;inset:10px;border:1px solid var(--green-d);pointer-events:none;z-index:80;opacity:.4}
html[data-theme="derelict"] .bezel::before{content:"";position:absolute;top:-1px;left:-1px;width:14px;height:14px;border:solid var(--ember);border-width:2px 0 0 2px}
html[data-theme="derelict"] .bezel::after{content:"";position:absolute;top:-1px;right:-1px;width:14px;height:14px;border:solid var(--ember);border-width:2px 2px 0 0}
html[data-theme="derelict"] .tick-bl{position:absolute;bottom:-1px;left:-1px;width:14px;height:14px;border:solid var(--ember);border-width:0 0 2px 2px}
html[data-theme="derelict"] .tick-br{position:absolute;bottom:-1px;right:-1px;width:14px;height:14px;border:solid var(--ember);border-width:0 2px 2px 0}

html[data-theme="derelict"] main{max-width:820px;margin:0 auto;padding:0 2rem;position:relative;z-index:10}

/* top bar */
html[data-theme="derelict"] .topbar-wrap{position:sticky;top:0;background:rgba(10,14,10,.9);z-index:50;border-bottom:1px solid rgba(30,122,56,.3)}
html[data-theme="derelict"] .topbar-wrap main{padding-top:0;padding-bottom:0}
html[data-theme="derelict"] .topbar{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 0}
html[data-theme="derelict"] .topbar .home{color:var(--green);text-decoration:none;font-size:.85rem;font-weight:700}
html[data-theme="derelict"] .topbar .home:hover{color:var(--ember);text-shadow:1px 0 var(--green),-1px 0 #f00}
html[data-theme="derelict"] .topbar .home .u{color:var(--ember)}
html[data-theme="derelict"] .topbar .step{font-size:.72rem;color:var(--ash);letter-spacing:.12em}

/* header */
html[data-theme="derelict"] .head{padding:3.5rem 0 2rem}
html[data-theme="derelict"] .crumb{font-size:.72rem;letter-spacing:.14em;color:var(--green-d);margin-bottom:1.6rem}
html[data-theme="derelict"] .crumb .u{color:var(--ember)}
html[data-theme="derelict"] .crumb .path{color:var(--green)}
html[data-theme="derelict"] .head .n{font-size:.9rem;color:var(--ember);font-weight:700;letter-spacing:.1em;display:block;margin-bottom:.6rem}
html[data-theme="derelict"] .head h1{font-size:clamp(2rem,6vw,3.4rem);color:var(--phosphor);font-weight:800;letter-spacing:-.02em;line-height:1;
  position:relative;text-shadow:0 0 14px rgba(57,255,106,.2)}
html[data-theme="derelict"] .head h1 .glitch{position:relative;display:inline-block}
html[data-theme="derelict"] .head h1 .glitch::before,
html[data-theme="derelict"] .head h1 .glitch::after{content:attr(data-text);position:absolute;top:0;left:0;overflow:hidden}
html[data-theme="derelict"] .head h1 .glitch::before{color:var(--ember);animation:gl1 4s infinite steps(2);clip-path:inset(0 0 55% 0);opacity:.55}
html[data-theme="derelict"] .head h1 .glitch::after{color:var(--green);animation:gl2 4.6s infinite steps(2);clip-path:inset(60% 0 0 0);opacity:.45}
@keyframes gl1{0%,92%,100%{transform:translate(0)}93%{transform:translate(-2px,-1px)}96%{transform:translate(2px,1px)}}
@keyframes gl2{0%,90%,100%{transform:translate(0)}91%{transform:translate(2px,1px)}95%{transform:translate(-2px,0)}}
html[data-theme="derelict"] .head .lede{font-family:'Inter',sans-serif;color:var(--green);font-size:1.15rem;margin-top:1.2rem;max-width:60ch}

/* meta strip */
html[data-theme="derelict"] .meta{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2rem;padding:1rem 0;border-top:1px solid rgba(30,122,56,.3);border-bottom:1px solid rgba(30,122,56,.3)}
html[data-theme="derelict"] .meta div{font-size:.78rem}
html[data-theme="derelict"] .meta .k{color:var(--ash);letter-spacing:.08em;display:block;margin-bottom:.25rem}
html[data-theme="derelict"] .meta .v{color:var(--green);font-weight:700}
html[data-theme="derelict"] .meta .v.hard{color:var(--ember)}

/* content */
html[data-theme="derelict"] article{padding:2.5rem 0 1rem}
html[data-theme="derelict"] article h2{font-size:1.5rem;color:var(--green);font-weight:700;margin:2.8rem 0 1rem;letter-spacing:-.01em}
html[data-theme="derelict"] article h2::before{content:"## ";color:var(--ember-d)}
html[data-theme="derelict"] article h3{font-size:1.1rem;color:var(--phosphor);font-weight:700;margin:1.8rem 0 .8rem}
html[data-theme="derelict"] article p{font-family:'Inter',sans-serif;color:var(--phosphor);margin-bottom:1.1rem;font-size:1.02rem}
html[data-theme="derelict"] article p .em{color:var(--ember);font-weight:600}
html[data-theme="derelict"] article p .g{color:var(--green)}
html[data-theme="derelict"] article a.inline{color:var(--green);text-decoration:underline;text-underline-offset:3px}
html[data-theme="derelict"] article a.inline:hover{color:var(--ember)}
html[data-theme="derelict"] article ul,
html[data-theme="derelict"] article ol{font-family:'Inter',sans-serif;color:var(--phosphor);margin:0 0 1.2rem 1.4rem}
html[data-theme="derelict"] article li{margin-bottom:.5rem}
html[data-theme="derelict"] article strong{color:var(--phosphor)}

/* terminal block */
html[data-theme="derelict"] .term{background:var(--void-2);border-top:3px solid var(--ember);padding:1.1rem 1.3rem;font-size:.82rem;line-height:1.85;
  overflow-x:auto;margin:1.2rem 0 1.6rem;font-family:'JetBrains Mono',monospace}
html[data-theme="derelict"] .term .u{color:var(--ember)}
html[data-theme="derelict"] .term .p{color:var(--green)}
html[data-theme="derelict"] .term .c{color:var(--ash)}
html[data-theme="derelict"] .term .o{color:var(--phosphor)}
html[data-theme="derelict"] .term .cap{display:block;font-size:.68rem;color:var(--ash);letter-spacing:.1em;margin-bottom:.7rem;text-transform:uppercase}

/* callout */
html[data-theme="derelict"] .note{border-left:2px solid var(--ember);background:rgba(255,106,43,.05);padding:1rem 1.2rem;margin:1.4rem 0;font-family:'Inter',sans-serif;font-size:.95rem;color:var(--phosphor)}
html[data-theme="derelict"] .note b{color:var(--ember);font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.08em;display:block;margin-bottom:.4rem}
html[data-theme="derelict"] .note.tip{border-color:var(--green-d);background:rgba(57,255,106,.04)}
html[data-theme="derelict"] .note.tip b{color:var(--green)}

/* checklist */
html[data-theme="derelict"] .check{list-style:none;margin-left:0!important}
html[data-theme="derelict"] .check li{padding-left:1.8rem;position:relative}
html[data-theme="derelict"] .check li::before{content:"[ ]";position:absolute;left:0;color:var(--green-d);font-family:'JetBrains Mono',monospace}

/* pager */
html[data-theme="derelict"] .pager{display:flex;gap:1rem;margin:3rem 0;border-top:1px solid rgba(30,122,56,.3);padding-top:2rem;flex-wrap:wrap}
html[data-theme="derelict"] .pager a{flex:1;min-width:220px;text-decoration:none;border:1px solid rgba(30,122,56,.4);padding:1.1rem 1.3rem;transition:border-color .12s}
html[data-theme="derelict"] .pager a:hover{border-color:var(--ember)}
html[data-theme="derelict"] .pager .dir{font-size:.72rem;color:var(--ash);letter-spacing:.1em;display:block;margin-bottom:.4rem}
html[data-theme="derelict"] .pager .lbl{color:var(--green);font-weight:700}
html[data-theme="derelict"] .pager a.next{text-align:right}
html[data-theme="derelict"] .pager a.disabled{opacity:.35;pointer-events:none}

html[data-theme="derelict"] footer{padding:2.5rem 0 4rem;border-top:1px solid rgba(30,122,56,.3);font-size:.78rem;color:var(--ash)}
html[data-theme="derelict"] footer .g{color:var(--green-d)}
html[data-theme="derelict"] footer a{color:var(--green-d)}
html[data-theme="derelict"] footer p{margin-bottom:.5rem}

html[data-theme="derelict"] ::selection{background:var(--ember);color:var(--void)}

@media(prefers-reduced-motion:reduce){
  html[data-theme="derelict"] .scanlines,
html[data-theme="derelict"] .flickerlayer{animation:none}
  html[data-theme="derelict"] .scanlines{opacity:.15}
  html[data-theme="derelict"] .head h1 .glitch::before,
html[data-theme="derelict"] .head h1 .glitch::after{animation:none;opacity:0}
}
@media(max-width:600px){
  html[data-theme="derelict"] main{padding:0 1.2rem}
  html[data-theme="derelict"] .scanlines{opacity:.5}
  html[data-theme="derelict"] .bezel{inset:5px}
  html[data-theme="derelict"] .pager a.next{text-align:left}
}

/* ---- OS tabs ---- */
html[data-theme="derelict"] .ostabs{margin:1.4rem 0 1.6rem;border:1px solid rgba(30,122,56,.4);overflow:hidden}
html[data-theme="derelict"] .ostabs .tabrow{display:flex;background:var(--void-2);border-bottom:1px solid rgba(30,122,56,.4)}
html[data-theme="derelict"] .ostabs .tabrow button{flex:1;background:transparent;border:none;border-right:1px solid rgba(30,122,56,.25);
  color:var(--ash);font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:700;letter-spacing:.05em;
  padding:.7rem .5rem;cursor:pointer;transition:color .12s,background .12s}
html[data-theme="derelict"] .ostabs .tabrow button:last-child{border-right:none}
html[data-theme="derelict"] .ostabs .tabrow button:hover{color:var(--phosphor)}
html[data-theme="derelict"] .ostabs .tabrow button[aria-selected="true"]{color:var(--green);background:rgba(57,255,106,.06);box-shadow:inset 0 -2px 0 var(--ember)}
html[data-theme="derelict"] .ostabs .tabrow button:focus-visible{outline:2px dashed var(--ember);outline-offset:-2px}
html[data-theme="derelict"] .ostabs .panel{display:none;padding:1.2rem 1.3rem}
html[data-theme="derelict"] .ostabs .panel[data-active="true"]{display:block}
html[data-theme="derelict"] .ostabs .panel > .term{margin:0 0 1rem;border-top:3px solid var(--ember)}
html[data-theme="derelict"] .ostabs .panel > p{font-family:'Inter',sans-serif;color:var(--phosphor);font-size:.98rem;margin-bottom:.8rem}
html[data-theme="derelict"] .ostabs .panel > p:last-child,
html[data-theme="derelict"] .ostabs .panel > .term:last-child{margin-bottom:0}
html[data-theme="derelict"] .ostabs .panel .em{color:var(--ember);font-weight:600}
html[data-theme="derelict"] .ostabs .panel .g{color:var(--green)}
html[data-theme="derelict"] .ostabs .panel a.inline{color:var(--green);text-decoration:underline;text-underline-offset:3px}
html[data-theme="derelict"] .ostabs .panel a.inline:hover{color:var(--ember)}


/* ===== BEACON ===== */
html[data-theme="beacon"]{
  --void:#0a0e0a;
  --void-2:#0e140e;
  --green:#39ff6a;
  --green-d:#1e7a38;
  --phosphor:#c8d6c8;
  --ember:#ff6a2b;
  --ember-d:#a33c13;
  --ash:#6b786b;
}
html[data-theme="beacon"] *{margin:0;padding:0;box-sizing:border-box}
html[data-theme="beacon"]{scroll-behavior:smooth}
html[data-theme="beacon"] body{
  background:var(--void);
  color:var(--phosphor);
  font-family:'JetBrains Mono','IBM Plex Mono','DejaVu Sans Mono',monospace;
  line-height:1.6;
  overflow-x:hidden;
  background-image:
    linear-gradient(rgba(30,122,56,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,122,56,.05) 1px,transparent 1px);
  background-size:44px 44px;
}
html[data-theme="beacon"] .sans{font-family:'Inter','IBM Plex Sans',system-ui,sans-serif}

html[data-theme="beacon"] .scan{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.35;
  background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.10) 3px 4px)}
html[data-theme="beacon"] .orb{position:fixed;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none;opacity:.16}
html[data-theme="beacon"] .orb.g{width:460px;height:460px;background:var(--green);top:-180px;right:-140px}
html[data-theme="beacon"] .orb.e{width:320px;height:320px;background:var(--ember);bottom:8%;left:-160px;opacity:.12}

html[data-theme="beacon"] main{max-width:820px;margin:0 auto;padding:0 2rem;position:relative;z-index:10}

/* top bar */
html[data-theme="beacon"] .topbar-wrap{position:sticky;top:0;background:rgba(10,14,10,.85);backdrop-filter:blur(8px);z-index:50;
  border-bottom:1px solid rgba(30,122,56,.25)}
html[data-theme="beacon"] .topbar-wrap main{padding-top:0;padding-bottom:0}
html[data-theme="beacon"] .topbar{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 0}
html[data-theme="beacon"] .topbar .home{color:var(--green);text-decoration:none;font-size:.85rem;font-weight:700}
html[data-theme="beacon"] .topbar .home:hover{text-shadow:0 0 14px rgba(57,255,106,.5)}
html[data-theme="beacon"] .topbar .home .u{color:var(--ember)}
html[data-theme="beacon"] .topbar .step{font-size:.72rem;color:var(--ash);letter-spacing:.12em}

/* header */
html[data-theme="beacon"] .head{padding:3.5rem 0 2rem}
html[data-theme="beacon"] .crumb{font-size:.72rem;letter-spacing:.14em;color:var(--green-d);margin-bottom:1.6rem}
html[data-theme="beacon"] .crumb .u{color:var(--ember)}
html[data-theme="beacon"] .crumb .path{color:var(--green)}
html[data-theme="beacon"] .head .n{font-size:.9rem;color:var(--ember);font-weight:700;letter-spacing:.1em;display:block;margin-bottom:.6rem}
html[data-theme="beacon"] .head h1{font-size:clamp(2rem,6vw,3.4rem);color:var(--phosphor);font-weight:800;letter-spacing:-.02em;line-height:1;
  text-shadow:0 0 26px rgba(57,255,106,.25)}
html[data-theme="beacon"] .head .lede{font-family:'Inter',sans-serif;color:var(--green);font-size:1.15rem;margin-top:1.2rem;max-width:60ch}

/* difficulty / meta strip */
html[data-theme="beacon"] .meta{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2rem;padding:1rem 0;
  border-top:1px solid rgba(30,122,56,.25);border-bottom:1px solid rgba(30,122,56,.25)}
html[data-theme="beacon"] .meta div{font-size:.78rem}
html[data-theme="beacon"] .meta .k{color:var(--ash);letter-spacing:.08em;display:block;margin-bottom:.25rem}
html[data-theme="beacon"] .meta .v{color:var(--green);font-weight:700}
html[data-theme="beacon"] .meta .v.hard{color:var(--ember)}

/* content */
html[data-theme="beacon"] article{padding:2.5rem 0 1rem}
html[data-theme="beacon"] article h2{font-size:1.5rem;color:var(--green);font-weight:700;margin:2.8rem 0 1rem;letter-spacing:-.01em}
html[data-theme="beacon"] article h2::before{content:"## ";color:var(--ember-d)}
html[data-theme="beacon"] article h3{font-size:1.1rem;color:var(--phosphor);font-weight:700;margin:1.8rem 0 .8rem}
html[data-theme="beacon"] article p{font-family:'Inter',sans-serif;color:var(--phosphor);margin-bottom:1.1rem;font-size:1.02rem}
html[data-theme="beacon"] article p .em{color:var(--ember);font-weight:600}
html[data-theme="beacon"] article p .g{color:var(--green)}
html[data-theme="beacon"] article a.inline{color:var(--green);text-decoration:underline;text-underline-offset:3px}
html[data-theme="beacon"] article a.inline:hover{color:var(--ember)}
html[data-theme="beacon"] article ul,
html[data-theme="beacon"] article ol{font-family:'Inter',sans-serif;color:var(--phosphor);margin:0 0 1.2rem 1.4rem}
html[data-theme="beacon"] article li{margin-bottom:.5rem}
html[data-theme="beacon"] article strong{color:var(--phosphor)}

/* terminal / code block */
html[data-theme="beacon"] .term{background:var(--void-2);border:1px solid rgba(30,122,56,.4);border-top:2px solid var(--ember);border-radius:3px;
  padding:1.1rem 1.3rem;font-size:.82rem;line-height:1.85;overflow-x:auto;margin:1.2rem 0 1.6rem;
  font-family:'JetBrains Mono',monospace}
html[data-theme="beacon"] .term .u{color:var(--ember)}
html[data-theme="beacon"] .term .p{color:var(--green)}
html[data-theme="beacon"] .term .c{color:var(--ash)}
html[data-theme="beacon"] .term .o{color:var(--phosphor)}
html[data-theme="beacon"] .term .cap{display:block;font-size:.68rem;color:var(--ash);letter-spacing:.1em;margin-bottom:.7rem;text-transform:uppercase}

/* callout */
html[data-theme="beacon"] .note{border-left:2px solid var(--ember);background:rgba(255,106,43,.05);padding:1rem 1.2rem;margin:1.4rem 0;
  font-family:'Inter',sans-serif;font-size:.95rem;color:var(--phosphor)}
html[data-theme="beacon"] .note b{color:var(--ember);font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.08em;display:block;margin-bottom:.4rem}
html[data-theme="beacon"] .note.warn{border-color:var(--ember);background:rgba(255,106,43,.07)}
html[data-theme="beacon"] .note.tip{border-color:var(--green-d);background:rgba(57,255,106,.04)}
html[data-theme="beacon"] .note.tip b{color:var(--green)}

/* checklist */
html[data-theme="beacon"] .check{list-style:none;margin-left:0!important}
html[data-theme="beacon"] .check li{padding-left:1.8rem;position:relative}
html[data-theme="beacon"] .check li::before{content:"[ ]";position:absolute;left:0;color:var(--green-d);font-family:'JetBrains Mono',monospace}

/* prev/next nav */
html[data-theme="beacon"] .pager{display:flex;gap:1rem;margin:3rem 0;border-top:1px solid rgba(30,122,56,.25);padding-top:2rem;flex-wrap:wrap}
html[data-theme="beacon"] .pager a{flex:1;min-width:220px;text-decoration:none;border:1px solid rgba(30,122,56,.4);border-radius:3px;
  padding:1.1rem 1.3rem;transition:border-color .2s,box-shadow .2s}
html[data-theme="beacon"] .pager a:hover{border-color:var(--ember);box-shadow:0 0 24px rgba(255,106,43,.12)}
html[data-theme="beacon"] .pager .dir{font-size:.72rem;color:var(--ash);letter-spacing:.1em;display:block;margin-bottom:.4rem}
html[data-theme="beacon"] .pager .lbl{color:var(--green);font-weight:700}
html[data-theme="beacon"] .pager a.next{text-align:right}
html[data-theme="beacon"] .pager a.disabled{opacity:.35;pointer-events:none}

html[data-theme="beacon"] footer{padding:2.5rem 0 4rem;border-top:1px solid rgba(30,122,56,.25);font-size:.78rem;color:var(--ash)}
html[data-theme="beacon"] footer .g{color:var(--green-d)}
html[data-theme="beacon"] footer a{color:var(--green-d)}
html[data-theme="beacon"] footer p{margin-bottom:.5rem}

html[data-theme="beacon"] ::selection{background:var(--green);color:var(--void)}

@media(prefers-reduced-motion:reduce){html[data-theme="beacon"] .orb{animation:none}}
@media(max-width:600px){
  html[data-theme="beacon"] main{padding:0 1.2rem}
  html[data-theme="beacon"] body{background-size:30px 30px}
  html[data-theme="beacon"] .pager a.next{text-align:left}
}

/* ---- OS tabs ---- */
html[data-theme="beacon"] .ostabs{margin:1.4rem 0 1.6rem;border:1px solid rgba(30,122,56,.4);border-radius:3px;overflow:hidden}
html[data-theme="beacon"] .ostabs .tabrow{display:flex;background:var(--void-2);border-bottom:1px solid rgba(30,122,56,.4)}
html[data-theme="beacon"] .ostabs .tabrow button{flex:1;background:transparent;border:none;border-right:1px solid rgba(30,122,56,.25);
  color:var(--ash);font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:700;letter-spacing:.05em;
  padding:.7rem .5rem;cursor:pointer;transition:color .12s,background .12s}
html[data-theme="beacon"] .ostabs .tabrow button:last-child{border-right:none}
html[data-theme="beacon"] .ostabs .tabrow button:hover{color:var(--phosphor)}
html[data-theme="beacon"] .ostabs .tabrow button[aria-selected="true"]{color:var(--green);background:rgba(57,255,106,.06);box-shadow:inset 0 -2px 0 var(--ember)}
html[data-theme="beacon"] .ostabs .tabrow button:focus-visible{outline:2px dashed var(--ember);outline-offset:-2px}
html[data-theme="beacon"] .ostabs .panel{display:none;padding:1.2rem 1.3rem}
html[data-theme="beacon"] .ostabs .panel[data-active="true"]{display:block}
html[data-theme="beacon"] .ostabs .panel > .term{margin:0 0 1rem;border:none;border-top:2px solid var(--ember);border-radius:0}
html[data-theme="beacon"] .ostabs .panel > p{font-family:'Inter',sans-serif;color:var(--phosphor);font-size:.98rem;margin-bottom:.8rem}
html[data-theme="beacon"] .ostabs .panel > p:last-child,
html[data-theme="beacon"] .ostabs .panel > .term:last-child{margin-bottom:0}
html[data-theme="beacon"] .ostabs .panel .em{color:var(--ember);font-weight:600}
html[data-theme="beacon"] .ostabs .panel .g{color:var(--green)}
html[data-theme="beacon"] .ostabs .panel a.inline{color:var(--green);text-decoration:underline;text-underline-offset:3px}
html[data-theme="beacon"] .ostabs .panel a.inline:hover{color:var(--ember)}

/* ===================================================================
   THEME TOGGLE + cross-theme element visibility
   =================================================================== */
html[data-theme="beacon"] .scanlines,
html[data-theme="beacon"] .grain,
html[data-theme="beacon"] .vignette,
html[data-theme="beacon"] .flickerlayer,
html[data-theme="beacon"] .bezel{display:none}

html[data-theme="derelict"] .scan,
html[data-theme="derelict"] .orb{display:none}

html[data-theme="beacon"] body{
  background-image:
    linear-gradient(rgba(30,122,56,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,122,56,.05) 1px,transparent 1px);
  background-size:44px 44px;
}

/* derelict glitch clones off under beacon */
html[data-theme="beacon"] .head h1 .glitch::before,
html[data-theme="beacon"] .head h1 .glitch::after{display:none}

/* toggle sits inside the sticky topbar on guide pages */
.themetoggle{
  display:inline-flex;align-items:center;gap:.5rem;
  background:transparent;
  border:1px solid var(--green-d);
  color:var(--green);
  font-family:'JetBrains Mono','DejaVu Sans Mono',monospace;
  font-size:.62rem;font-weight:700;letter-spacing:.13em;
  padding:.4rem .7rem;cursor:pointer;
  transition:border-color .12s,color .12s,box-shadow .12s;
}
.themetoggle .tt-dot{width:6px;height:6px;border-radius:50%;background:var(--ember);flex:none}
.themetoggle:hover{border-color:var(--ember);color:var(--ember)}
.themetoggle:focus-visible{outline:2px dashed var(--ember);outline-offset:3px}
html[data-theme="beacon"] .themetoggle{border-radius:3px}
html[data-theme="beacon"] .themetoggle:hover{box-shadow:0 0 18px rgba(255,106,43,.3)}
html[data-theme="beacon"] .themetoggle .tt-dot{box-shadow:0 0 7px var(--ember)}
html[data-theme="derelict"] .themetoggle:hover{text-shadow:1px 0 var(--green),-1px 0 #f00}

.topbar .right{display:flex;align-items:center;gap:1rem}
@media(max-width:600px){
  .topbar .step{display:none}
  .themetoggle{font-size:.58rem;padding:.35rem .6rem}
}