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

/* ===== DERELICT (default) ===== */

  html[data-theme="derelict"]{
    --void:#0a0e0a;
    --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, aria-hidden) ---- */
  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}
  }

  /* ---- monitor bezel chrome ---- */
  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,
html[data-theme="derelict"] .bezel::after,
html[data-theme="derelict"] .tick-tl,
html[data-theme="derelict"] .tick-tr{content:"";position:absolute;width:14px;height:14px;border-color:var(--ember);border-style:solid}
  html[data-theme="derelict"] .bezel::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
  html[data-theme="derelict"] .bezel::after{top:-1px;right:-1px;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:1000px;margin:0 auto;padding:0 2rem;position:relative;z-index:10}

  /* ---- prompt eyebrow ---- */
  html[data-theme="derelict"] .prompt{font-size:.72rem;letter-spacing:.14em;margin-bottom:1.4rem;color:var(--green-d)}
  html[data-theme="derelict"] .prompt .u{color:var(--ember)}
  html[data-theme="derelict"] .prompt .path{color:var(--green)}
  html[data-theme="derelict"] .prompt .cmd{color:var(--phosphor)}

  /* ---- HERO ---- */
  html[data-theme="derelict"] .hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;position:relative}
  html[data-theme="derelict"] .bootlog{font-size:.8rem;color:var(--green-d);margin-bottom:2rem;min-height:5.5em}
  html[data-theme="derelict"] .bootlog .ok{color:var(--ember)}
  html[data-theme="derelict"] .bootlog .g{color:var(--green)}
  html[data-theme="derelict"] .bootlog span{display:block;white-space:pre;opacity:0}
  html[data-theme="derelict"] .bootlog span.show{opacity:1}

  html[data-theme="derelict"] h1.logo{
    font-size:clamp(3rem,13vw,9rem);
    font-weight:800;letter-spacing:-.04em;line-height:.9;
    color:var(--phosphor);position:relative;
    text-shadow:0 0 18px rgba(57,255,106,.25);
  }
  html[data-theme="derelict"] h1.logo .glitch{position:relative;display:inline-block}
  html[data-theme="derelict"] h1.logo .glitch::before,
html[data-theme="derelict"] h1.logo .glitch::after{
    content:attr(data-text);position:absolute;top:0;left:0;overflow:hidden;
  }
  html[data-theme="derelict"] h1.logo .glitch::before{color:var(--ember);animation:gl1 4s infinite steps(2);clip-path:inset(0 0 55% 0);opacity:.6}
  html[data-theme="derelict"] h1.logo .glitch::after{color:var(--green);animation:gl2 4.6s infinite steps(2);clip-path:inset(60% 0 0 0);opacity:.5}
  @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"] h1.logo .glitch+.glitch{margin-left:.28em}
  html[data-theme="derelict"] .subtitle{font-size:clamp(1rem,2.2vw,1.5rem);color:var(--ember);margin-top:1.1rem;font-weight:700;letter-spacing:-.01em;text-shadow:0 0 14px rgba(255,106,43,.25)}
  html[data-theme="derelict"] .thesis{font-size:clamp(1rem,2vw,1.35rem);color:var(--green);margin-top:1rem;max-width:32ch}
  html[data-theme="derelict"] .thesis .em{color:var(--ember);font-weight:700}
  html[data-theme="derelict"] .cursor{display:inline-block;width:.6em;height:1.05em;background:var(--ember);vertical-align:-2px;margin-left:.15em;animation:blink .53s step-end infinite}
  @keyframes blink{50%{opacity:0}}

  html[data-theme="derelict"] .cta-row{margin-top:2.6rem;display:flex;gap:1rem;flex-wrap:wrap}
  html[data-theme="derelict"] .btn{
    font-family:inherit;font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;
    background:transparent;border:1px solid var(--ember);color:var(--ember);
    padding:.85rem 1.6rem;cursor:pointer;text-decoration:none;display:inline-block;
    transition:background .12s,color .12s;position:relative;
  }
  html[data-theme="derelict"] .btn::before{content:"> "}
  html[data-theme="derelict"] .btn:hover{background:var(--ember);color:var(--void);text-shadow:1px 0 var(--green),-1px 0 #f00}
  html[data-theme="derelict"] .btn:focus-visible{outline:2px dashed var(--ember);outline-offset:3px}
  html[data-theme="derelict"] .btn.ghost{border-color:var(--green-d);color:var(--green-d)}
  html[data-theme="derelict"] .btn.ghost::before{content:""}
  html[data-theme="derelict"] .btn.ghost:hover{background:transparent;color:var(--green);text-shadow:none;border-color:var(--green)}

  html[data-theme="derelict"] .scrollhint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);font-size:.7rem;color:var(--ash);letter-spacing:.2em;animation:pulse 2s infinite}
  @keyframes pulse{50%{opacity:.3}}

  /* ---- MANIFESTO ---- */
  html[data-theme="derelict"] section{padding:6rem 0;border-top:1px solid rgba(30,122,56,.3)}
  html[data-theme="derelict"] .sec-label{font-size:.72rem;letter-spacing:.14em;color:var(--green-d);margin-bottom:2.5rem}
  html[data-theme="derelict"] .sec-label .u{color:var(--ember)}
  html[data-theme="derelict"] .sec-label .path{color:var(--green)}

  html[data-theme="derelict"] .decl{margin-bottom:3rem;max-width:60ch}
  html[data-theme="derelict"] .decl .tag{font-size:.72rem;color:var(--ember-d);letter-spacing:.1em;display:block;margin-bottom:.6rem}
  html[data-theme="derelict"] .decl h3{font-size:clamp(1.4rem,3.5vw,2.2rem);color:var(--green);font-weight:700;letter-spacing:-.01em;margin-bottom:.7rem;line-height:1.1}
  html[data-theme="derelict"] .decl p{font-family:'Inter',system-ui,sans-serif;color:var(--phosphor);font-size:1.05rem}
  html[data-theme="derelict"] .decl p .em{color:var(--ember)}

  /* ---- THE LADDER ---- */
  html[data-theme="derelict"] .rung{border-bottom:1px solid rgba(30,122,56,.25);padding:1.6rem 0}
  html[data-theme="derelict"] .rung summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:1.2rem}
  html[data-theme="derelict"] .rung summary::-webkit-details-marker{display:none}
  html[data-theme="derelict"] .rung .n{color:var(--ember);font-size:1.3rem;font-weight:700;min-width:2.5ch}
  html[data-theme="derelict"] .rung .title{color:var(--green);font-size:1.25rem;font-weight:700;flex:1}
  html[data-theme="derelict"] .rung .what{font-family:'Inter',sans-serif;color:var(--ash);font-size:.85rem;margin-left:auto;text-align:right}
  html[data-theme="derelict"] .rung .pm{color:var(--ash);font-size:1.1rem}
  html[data-theme="derelict"] .rung[open] .pm{color:var(--ember)}
  html[data-theme="derelict"] .rung .body{padding:1.2rem 0 .4rem calc(2.5ch + 1.2rem)}
  html[data-theme="derelict"] .rung .body p{font-family:'Inter',sans-serif;color:var(--phosphor);max-width:60ch;margin-bottom:1rem;font-size:1rem}
  html[data-theme="derelict"] .howto{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;color:var(--ember);
    text-decoration:none;font-size:.85rem;font-weight:700;letter-spacing:.03em;border:1px solid var(--ember);
    padding:.6rem 1.1rem;transition:background .12s,color .12s}
  html[data-theme="derelict"] .howto::before{content:"> "}
  html[data-theme="derelict"] .howto:hover{background:var(--ember);color:var(--void);text-shadow:1px 0 var(--green),-1px 0 #f00}
  html[data-theme="derelict"] .howto:focus-visible{outline:2px dashed var(--ember);outline-offset:3px}
  html[data-theme="derelict"] .term{background:#060906;border-top:3px solid var(--ember);padding:1.1rem 1.3rem;font-size:.82rem;line-height:1.9;overflow-x:auto}
  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)}

  /* ---- JOIN ---- */
  html[data-theme="derelict"] .join{border:1px solid var(--ember);padding:3rem 2rem;text-align:center;background:linear-gradient(rgba(255,106,43,.04),transparent)}
  html[data-theme="derelict"] .join h2{color:var(--ember);font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:1rem}
  html[data-theme="derelict"] .join p{font-family:'Inter',sans-serif;color:var(--phosphor);max-width:44ch;margin:0 auto 2rem}
  html[data-theme="derelict"] .field{display:flex;gap:0;max-width:420px;margin:0 auto;border-bottom:1px solid var(--green-d)}
  html[data-theme="derelict"] .field input{flex:1;background:transparent;border:none;color:var(--green);font-family:inherit;font-size:.95rem;padding:.7rem .2rem;outline:none}
  html[data-theme="derelict"] .field input::placeholder{color:var(--ash)}
  html[data-theme="derelict"] .field input:focus{border-color:var(--green)}
  html[data-theme="derelict"] .field button{background:transparent;border:none;color:var(--ember);font-family:inherit;cursor:pointer;padding:0 .5rem;font-size:.95rem}

  html[data-theme="derelict"] footer{padding:3rem 0 5rem;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"] h1.logo .glitch::before,
html[data-theme="derelict"] h1.logo .glitch::after{animation:none;opacity:0}
    html[data-theme="derelict"] .cursor,
html[data-theme="derelict"] .scrollhint{animation:none}
    html[data-theme="derelict"] .bootlog span{opacity:1}
  }
  @media(max-width:600px){
    html[data-theme="derelict"] main{padding:0 1.2rem}
    html[data-theme="derelict"] .scanlines{opacity:.5}
    html[data-theme="derelict"] .rung .what{display:none}
    html[data-theme="derelict"] .bezel{inset:5px}
  }


/* ===== 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}

  /* one faint static scanline, no drift */
  html[data-theme="beacon"] .scan{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.4;
    background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.10) 3px 4px)}

  /* ambient glow orbs */
  html[data-theme="beacon"] .orb{position:fixed;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none;opacity:.22}
  html[data-theme="beacon"] .orb.g{width:520px;height:520px;background:var(--green);top:-160px;right:-120px;animation:float1 14s ease-in-out infinite}
  html[data-theme="beacon"] .orb.e{width:360px;height:360px;background:var(--ember);bottom:10%;left:-140px;opacity:.16;animation:float2 18s ease-in-out infinite}
  @keyframes float1{50%{transform:translate(-40px,60px)}}
  @keyframes float2{50%{transform:translate(50px,-40px)}}

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

  html[data-theme="beacon"] .prompt{font-size:.72rem;letter-spacing:.14em;margin-bottom:1.4rem;color:var(--green-d)}
  html[data-theme="beacon"] .prompt .u{color:var(--ember)}
  html[data-theme="beacon"] .prompt .path{color:var(--green)}
  html[data-theme="beacon"] .prompt .cmd{color:var(--phosphor)}

  /* ---- HERO ---- */
  html[data-theme="beacon"] .hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;position:relative}
  html[data-theme="beacon"] .status{display:inline-flex;align-items:center;gap:.6rem;font-size:.72rem;letter-spacing:.12em;
    color:var(--green);border:1px solid var(--green-d);border-radius:2px;padding:.4rem .8rem;margin-bottom:2rem;width:max-content}
  html[data-theme="beacon"] .status .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:beat 2s infinite}
  @keyframes beat{50%{opacity:.4;box-shadow:0 0 4px var(--green)}}

  html[data-theme="beacon"] h1.logo{
    font-size:clamp(3rem,13vw,9rem);font-weight:800;letter-spacing:-.04em;line-height:.9;
    color:var(--phosphor);
    text-shadow:0 0 30px rgba(57,255,106,.45),0 0 60px rgba(57,255,106,.15);
    opacity:0;transform:translateY(14px);
    animation:rise .8s cubic-bezier(.2,.8,.2,1) .1s forwards;
  }
  @keyframes rise{to{opacity:1;transform:none}}

  html[data-theme="beacon"] .subtitle{font-size:clamp(1rem,2.2vw,1.5rem);color:var(--ember);margin-top:1.1rem;font-weight:700;letter-spacing:-.01em;
    text-shadow:0 0 18px rgba(255,106,43,.3);opacity:0;animation:rise .8s cubic-bezier(.2,.8,.2,1) .3s forwards}
  html[data-theme="beacon"] .thesis{font-size:clamp(1rem,2vw,1.35rem);color:var(--green);margin-top:1rem;max-width:32ch;
    opacity:0;animation:rise .8s cubic-bezier(.2,.8,.2,1) .45s forwards}
  html[data-theme="beacon"] .thesis .em{color:var(--ember);font-weight:700}
  html[data-theme="beacon"] .cursor{display:inline-block;width:.6em;height:1.05em;background:var(--ember);vertical-align:-2px;margin-left:.15em;
    box-shadow:0 0 10px var(--ember);animation:blink .53s step-end infinite}
  @keyframes blink{50%{opacity:0}}

  html[data-theme="beacon"] .cta-row{margin-top:2.6rem;display:flex;gap:1rem;flex-wrap:wrap;opacity:0;animation:rise .8s cubic-bezier(.2,.8,.2,1) .55s forwards}
  html[data-theme="beacon"] .btn{font-family:inherit;font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;
    background:transparent;border:1px solid var(--ember);color:var(--ember);
    padding:.85rem 1.6rem;cursor:pointer;text-decoration:none;display:inline-block;border-radius:2px;
    transition:background .12s,color .12s,box-shadow .12s}
  html[data-theme="beacon"] .btn::before{content:"> "}
  html[data-theme="beacon"] .btn:hover{background:var(--ember);color:var(--void);box-shadow:0 0 24px rgba(255,106,43,.5)}
  html[data-theme="beacon"] .btn:focus-visible{outline:2px dashed var(--ember);outline-offset:3px}
  html[data-theme="beacon"] .btn.ghost{border-color:var(--green-d);color:var(--green)}
  html[data-theme="beacon"] .btn.ghost::before{content:""}
  html[data-theme="beacon"] .btn.ghost:hover{background:transparent;color:var(--green);border-color:var(--green);box-shadow:0 0 24px rgba(57,255,106,.35)}

  html[data-theme="beacon"] .scrollhint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);font-size:.7rem;color:var(--ash);letter-spacing:.2em}

  /* ---- reveal on scroll ---- */
  html[data-theme="beacon"] .reveal{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
  html[data-theme="beacon"] .reveal.in{opacity:1;transform:none}

  html[data-theme="beacon"] section{padding:6rem 0;border-top:1px solid rgba(30,122,56,.25)}
  html[data-theme="beacon"] .sec-label{font-size:.72rem;letter-spacing:.14em;color:var(--green-d);margin-bottom:2.5rem}
  html[data-theme="beacon"] .sec-label .u{color:var(--ember)}
  html[data-theme="beacon"] .sec-label .path{color:var(--green)}

  html[data-theme="beacon"] .decl{margin-bottom:2.4rem;max-width:62ch;border-left:1px solid var(--green-d);padding-left:1.5rem;transition:border-color .3s}
  html[data-theme="beacon"] .decl:hover{border-color:var(--ember)}
  html[data-theme="beacon"] .decl .tag{font-size:.72rem;color:var(--ember-d);letter-spacing:.1em;display:block;margin-bottom:.6rem}
  html[data-theme="beacon"] .decl h3{font-size:clamp(1.4rem,3.5vw,2.2rem);color:var(--green);font-weight:700;letter-spacing:-.01em;margin-bottom:.7rem;line-height:1.1}
  html[data-theme="beacon"] .decl p{font-family:'Inter',sans-serif;color:var(--phosphor);font-size:1.05rem}
  html[data-theme="beacon"] .decl p .em{color:var(--ember)}

  html[data-theme="beacon"] .rung{border-bottom:1px solid rgba(30,122,56,.2);padding:1.6rem 0}
  html[data-theme="beacon"] .rung summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:1.2rem}
  html[data-theme="beacon"] .rung summary::-webkit-details-marker{display:none}
  html[data-theme="beacon"] .rung .n{color:var(--ember);font-size:1.3rem;font-weight:700;min-width:2.5ch}
  html[data-theme="beacon"] .rung .title{color:var(--green);font-size:1.25rem;font-weight:700;flex:1;transition:text-shadow .2s}
  html[data-theme="beacon"] .rung summary:hover .title{text-shadow:0 0 16px rgba(57,255,106,.45)}
  html[data-theme="beacon"] .rung .what{font-family:'Inter',sans-serif;color:var(--ash);font-size:.85rem;margin-left:auto;text-align:right}
  html[data-theme="beacon"] .rung .pm{color:var(--ash);font-size:1.1rem}
  html[data-theme="beacon"] .rung[open] .pm{color:var(--ember)}
  html[data-theme="beacon"] .rung .body{padding:1.2rem 0 .4rem calc(2.5ch + 1.2rem)}
  html[data-theme="beacon"] .rung .body p{font-family:'Inter',sans-serif;color:var(--phosphor);max-width:60ch;margin-bottom:1rem;font-size:1rem}
  html[data-theme="beacon"] .howto{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;color:var(--ember);
    text-decoration:none;font-size:.85rem;font-weight:700;letter-spacing:.03em;border:1px solid var(--ember);
    border-radius:2px;padding:.6rem 1.1rem;transition:background .12s,color .12s,box-shadow .12s}
  html[data-theme="beacon"] .howto::before{content:"> "}
  html[data-theme="beacon"] .howto:hover{background:var(--ember);color:var(--void);box-shadow:0 0 22px rgba(255,106,43,.4)}
  html[data-theme="beacon"] .howto:focus-visible{outline:2px dashed var(--ember);outline-offset:3px}
  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.9;overflow-x:auto}
  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"] .join{border:1px solid var(--ember);border-radius:3px;padding:3rem 2rem;text-align:center;
    background:radial-gradient(ellipse at top,rgba(255,106,43,.08),transparent 70%);box-shadow:0 0 60px rgba(255,106,43,.08) inset}
  html[data-theme="beacon"] .join h2{color:var(--ember);font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:1rem;text-shadow:0 0 24px rgba(255,106,43,.35)}
  html[data-theme="beacon"] .join p{font-family:'Inter',sans-serif;color:var(--phosphor);max-width:44ch;margin:0 auto 2rem}
  html[data-theme="beacon"] .field{display:flex;gap:0;max-width:420px;margin:0 auto;border-bottom:1px solid var(--green-d);transition:border-color .2s}
  html[data-theme="beacon"] .field:focus-within{border-color:var(--green);box-shadow:0 1px 12px rgba(57,255,106,.25)}
  html[data-theme="beacon"] .field input{flex:1;background:transparent;border:none;color:var(--green);font-family:inherit;font-size:.95rem;padding:.7rem .2rem;outline:none}
  html[data-theme="beacon"] .field input::placeholder{color:var(--ash)}
  html[data-theme="beacon"] .field button{background:transparent;border:none;color:var(--ember);font-family:inherit;cursor:pointer;padding:0 .5rem;font-size:.95rem}

  html[data-theme="beacon"] footer{padding:3rem 0 5rem;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,
html[data-theme="beacon"] .status .dot,
html[data-theme="beacon"] .cursor{animation:none}
    html[data-theme="beacon"] h1.logo,
html[data-theme="beacon"] .thesis,
html[data-theme="beacon"] .cta-row{animation:none;opacity:1;transform:none}
    html[data-theme="beacon"] .reveal{opacity:1;transform:none;transition:none}
  }
  @media(max-width:600px){
    html[data-theme="beacon"] main{padding:0 1.2rem}
    html[data-theme="beacon"] .rung .what{display:none}
    html[data-theme="beacon"] body{background-size:30px 30px}
  }

/* ===================================================================
   THEME TOGGLE + cross-theme element visibility
   =================================================================== */

/* --- overlays: only show the ones belonging to the active theme --- */
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}

/* --- hero: boot-log is derelict-only, status pill is beacon-only --- */
html[data-theme="derelict"] .status{display:none}
html[data-theme="beacon"] .bootlog{display:none}

/* --- beacon needs its grid background on body --- */
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 must not render under beacon --- */
html[data-theme="beacon"] h1.logo .glitch::before,
html[data-theme="beacon"] h1.logo .glitch::after{display:none}
html[data-theme="beacon"] h1.logo .glitch+.glitch{margin-left:.28em}

/* --- the toggle button itself --- */
.themetoggle{
  position:fixed;top:26px;right:26px;z-index:95;
  display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(10,14,10,.82);
  border:1px solid var(--green-d);
  color:var(--green);
  font-family:'JetBrains Mono','DejaVu Sans Mono',monospace;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;
  padding:.55rem .9rem;cursor:pointer;
  transition:border-color .12s,color .12s,box-shadow .12s;
  backdrop-filter:blur(6px);
}
.themetoggle .tt-dot{
  width:7px;height:7px;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 20px rgba(255,106,43,.35)}
html[data-theme="beacon"] .themetoggle .tt-dot{box-shadow:0 0 8px var(--ember)}
html[data-theme="derelict"] .themetoggle:hover{text-shadow:1px 0 var(--green),-1px 0 #f00}

@media(max-width:600px){
  .themetoggle{top:16px;right:16px;font-size:.62rem;padding:.45rem .7rem}
}