:root{
  --bg0:#060912;
  --bg1:#091227;
  --bg2:#05070f;
  --text:rgba(234,240,255,.92);
  --muted:rgba(234,240,255,.66);
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.06);
  --accent:#7af0ff;
  --accent2:#8cffc1;
  --glow:rgba(122,240,255,.18);
  --shadow:rgba(0,0,0,.55);

  --radius:18px;
  --headerH:120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);

  /* Clean, continuous background gradient (no mid-page seam) */
  background:
    radial-gradient(1100px 650px at 18% 55%, rgba(122,240,255,.18), transparent 60%),
    radial-gradient(900px 580px at 82% 35%, rgba(255,94,160,.10), transparent 62%),
    radial-gradient(700px 520px at 50% 92%, rgba(140,255,193,.08), transparent 65%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 55%, var(--bg2) 100%);
  background-attachment: fixed;
}

/* Subtle vignette/film */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      1400px 900px at 50% 20%,
      rgba(0,0,0,.0),
      rgba(0,0,0,.28) 70%,
      rgba(0,0,0,.45) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.08),
      rgba(0,0,0,.22)
    );

}

/* ---------- HEADER (FIXED / STATIONARY) ---------- */
.top{
  position:fixed;
  left:0; right:0; top:0;
  height:var(--headerH);
  z-index:50;
  background: rgba(10,14,22,.62);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.top__inner{
  height:100%;
  max-width:1200px;
  margin:0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  width:96px;
  height:110px;
  border-radius: 20px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.03);
  box-shadow: 0 12px 26px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.25) inset;
  text-decoration:none;
}

.brand__logo{
 
  height:110px;
  object-fit:contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
}

/* --- Pen mark: unboxed --- */
.brand{
  background: none;
  border: none;
  box-shadow: none;
  width: auto;
  height: auto;
  padding: 0;
}

.brand__logo{
  height: 110px;
  width: auto;
  display: block;
  filter:
    drop-shadow(0 12px 22px rgba(0,0,0,.55))
    drop-shadow(0 0 18px rgba(120,255,190,.25));
}


.top__meta{
  min-width: 220px;
}

.top__kicker{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

.top__title{
  font-size: 18px;
  letter-spacing: .06em;
  font-weight: 750;
  margin-top: 6px;
}

.top__nav{
  margin-left:auto;
  display:flex;
  gap:12px;
}

.nav__link{
  color: var(--muted);
  text-decoration:none;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
}

.nav__link:hover{
  color: var(--text);
  border-color: var(--line2);
  background: rgba(255,255,255,.03);
}

/* ---------- LAYOUT ---------- */
.page{
  position:relative;
  z-index:1;
  padding-top: calc(var(--headerH) + 18px); /* prevents header overlap */
  padding-bottom: 70px;
}

.wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 18px;
}

.hero{
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 18px 18px;
}

.hero__line{
  text-align:center;
  color: var(--muted);
  font-style: italic;
  letter-spacing: .01em;
}
/* ===========================
   FRAME — PHYSICAL CHASSIS
   =========================== */

.frame{
  position: relative;
  padding: 14px; /* thickness of the chassis */
  border-radius: calc(var(--radius) + 6px);

  background:
    linear-gradient(
      180deg,
      rgba(28,30,34,.98),
      rgba(18,20,24,.98)
    );

  /* PATINA LIVES HERE NOW */
  box-shadow:
    inset 0 8px 12px rgba(255,170,90,.16), /* heat at top metal */
    0 26px 60px rgba(0,0,0,.55),
    0 0 60px rgba(122,240,255,.06),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(0,0,0,.6);
}




/* ---------- “SCREEN” POEM DISPLAY ---------- */
.screen{
  margin: 16px auto 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    linear-gradient(
      179deg,
      rgba(22, 24, 30, 0.70) 0%,
      rgba(16, 18, 23, 0.78) 11%,
      rgba(20, 22, 28, 0.74) 19%,
      rgba(12, 14, 18, 0.88) 31%,
      rgba(18, 20, 26, 0.80) 46%,
      rgba(10, 12, 15, 0.94) 62%,
      rgba(17, 19, 24, 0.82) 74%,
      rgba(9, 11, 14, 0.96) 89%,
      rgba(14, 16, 20, 0.90) 100%
    );

box-shadow:
  inset 0 0 0 4px rgba(10,10,10,.95);    /* gasket stays on the display */



  overflow:hidden;
}

.screen__bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  background: transparent;
  border-bottom: 1px solid var(--line2);
  
  /* Metaphor repair: title bar is rendered UI, not chassis */
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.screen__dots{
  display:flex;
  gap:7px;
  margin-right: 6px;
}

/* macOS "gumdrop" stop lights (inactive by default) */
.screen__dots span{
  width: 11px;
  height: 11px;
  border-radius: 50%;

  /* gumdrop colors */
  background: #555;

  /* subtle "candy" depth */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.45) inset,
    0 1px 0 rgba(255,255,255,.10) inset;

  /* inactive windows slightly muted */
  opacity: .38;

  transition: opacity .18s ease, box-shadow .18s ease, filter .18s ease;
}

.screen__dots span:nth-child(1){ background: #ff5f57; } /* red */
.screen__dots span:nth-child(2){ background: #febc2e; } /* yellow */
.screen__dots span:nth-child(3){ background: #28c840; } /* green */

.screen__title{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .06em;
}

.screen__status{
  margin-left:auto;
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(140,255,193,.72);
}

.screen__body{
  position:relative;
  padding: 18px 18px 16px;
}

/* scanlines + subtle noise */
.screen__body::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.05), transparent 22%),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      transparent 2px,
      transparent 6px
    );
  opacity:.07;
  mix-blend-mode: overlay;
}

.poemTitle{
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: .02em;
}

.poemBy{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .08em;
  
}

.poem{
  margin:0;
  padding: 16px;
  border-radius: 16px;
  border: 0;
  background: transparent;
  color: rgba(234,240,255,.90);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;   /* keeps line breaks but wraps on small screens */
  word-break: break-word;
  box-shadow:none;
}

.poem:focus{
  outline: 2px solid rgba(122,240,255,.25);
  outline-offset: 2px;
}

.screen__hint{
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  opacity: .9;
}

/* ---------- PANELS ---------- */
.panel{
  margin: 10px auto 0;
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line2);
  background: rgba(10,12,18,.40);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}

.panel h2{
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.panel p{
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

/* ---------- FOOTER ---------- */
.footer{
  position:relative;
  z-index:1;
  border-top: 1px solid var(--line2);
  background: rgba(8,10,16,.55);
  backdrop-filter: blur(12px);
}

.footer__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 18px 22px;
}

.footer__tagline{
  text-align:center;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 14px;
}

.footer__row{
  display:flex;
  gap:18px;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap: wrap;
}

.footer__name{
  font-weight: 700;
  letter-spacing: .02em;
}

.footer__links{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.footer__links a{
  color: var(--muted);
  text-decoration:none;
  border-bottom: 1px solid transparent;
}
.footer__links a:hover{
  color: var(--text);
  border-bottom-color: rgba(122,240,255,.35);
}

.footer__right{
  color: var(--muted);
  font-size: 13px;
}

.sep{
  margin: 0 8px;
  opacity: .6;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 760px){
  :root{ --headerH: 96px; }

  .top__meta{ display:none; }
  .top__inner{ justify-content:space-between; }

  .poemTitle{ font-size: 20px; }
  .poem{ font-size: 12.5px; }

  .footer__row{ align-items:flex-start; }
}
/* === Boot overlay === */
#bootOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(1200px 800px at 50% 40%, rgba(40,70,90,0.25), rgba(0,0,0,0.92));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 500ms ease;
}

#bootOverlay.is-hiding{ opacity: 0; }

.bootWrap{
  width: min(920px, 92vw);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  overflow: hidden;
}

.bootHeader{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
}

.bootHeader .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(120,255,190,0.9);
  box-shadow: 0 0 18px rgba(120,255,190,0.55);
}

.bootTitle{ flex: 1; }

.bootStatus{
  color: rgba(120,255,190,0.85);
}

.bootText{
  padding: 18px 18px 12px 18px;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(120, 255, 190, 0.78); /* soft terminal green */;
  min-height: 240px;
  white-space: pre-wrap;
  
  
}

.bootHint{
  padding: 10px 18px 16px 18px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  border-top: 1px solid rgba(255,255,255,0.08);
}
/* === Boot splash === */
.bootSplash{
  position: relative;
  padding: 26px 18px 18px 18px;
  display: grid;
  place-items: center;
  background: radial-gradient(900px 260px at 50% 40%, rgba(120,255,190,0.10), rgba(0,0,0,0));
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.bootLogo{
  width: min(220px, 52vw);
  height: auto;
  display: block;
  filter:
    drop-shadow(0 14px 28px rgba(0,0,0,0.65))
    drop-shadow(0 0 18px rgba(120,255,190,0.22));
  opacity: 0.92;
  transform: translateZ(0);
}

/* subtle “scan” pass */
.bootScan{
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(120,255,190,0.00) 0%,
    rgba(120,255,190,0.12) 45%,
    rgba(120,255,190,0.00) 70%
  );
  mix-blend-mode: screen;
  opacity: 0.55;
  transform: translateY(-110%);
  animation: bootScanPass 1.35s ease-in-out 1;
}

@keyframes bootScanPass{
  to { transform: translateY(110%); }
}
.site-footer{
  position: fixed;
  bottom: 16px;
  right: 18px;
  z-index: 20;
  pointer-events: none;
}

.copyright{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.45);
  opacity: 0.65;
}

.eyeguy-mark{
  width: 40px;
  height: auto;
  opacity: 0.8;
  filter:
    drop-shadow(0 0 6px rgba(120,255,190,0.25));
}
/* OFFLINE status treatment */
.screen__status--offline{
  color: rgba(255,255,255,.42);
  letter-spacing: .18em;
  opacity: .9;
}

/* Optional: keep the two windows nicely spaced (stacks by default) */
.screens{
  display: grid;
  gap: 18px;
}
/* Terminal window sizing — restore proper proportions */
.screen{
  width: 100%;
  max-width: 920px;     /* feels like a real terminal */
  min-width: 640px;     /* prevents phone-column collapse */
}
@media (max-width: 720px){
  .screen{
    min-width: unset;
    max-width: 94vw;
  }
}
.terminal-content em,
.terminal-text em {
  font-style: italic;
  opacity: 0.9;
}
.footer__name a{
  color: inherit;
  text-decoration: none;
}

.footer__name a:hover{
  text-decoration: underline;
}
/* Bio intro layout: circular portrait at start of bio */
.bioIntro{
  display:flex;
  align-items:flex-start;
  gap:16px;
}

.bioPortraitCircle{
  width:92px;
  height:92px;
  flex:0 0 auto;
  border-radius:50%;
  object-position: center 10%;
  object-fit:cover;
  border:1px solid var(--line2);
  background: rgba(0,0,0,.25);
  box-shadow:
    0 14px 34px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.35) inset;
  filter: saturate(.92) contrast(1.05);
  margin-top: 6px;
}

/* Keep links inside terminal text on-brand */
.poem a{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(122,240,255,.35);
  text-underline-offset: 3px;
}
.poem a:hover{
  text-decoration-color: rgba(122,240,255,.65);
}

/* Mobile: stack image above bio text */
@media (max-width: 640px){
  .bioIntro{ flex-direction: column; }
  .bioPortraitCircle{ margin-top: 0; }
}

/* active window stop lights — stronger Apple gumdrop glow */
.screen.is-active .screen__dots span{
  opacity: 1;
  filter: saturate(1.15);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 1px 0 rgba(255,255,255,.18) inset,
    0 0 12px rgba(255,255,255,.18);
}
.screen.is-active .screen__dots span{
  transition:
    opacity .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}

.screen.is-active .screen__dots span:nth-child(1){
  background: #ff5f57;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 1px 0 rgba(255,255,255,.18) inset,
    0 0 18px rgba(255,95,87,.70);
}

.screen.is-active .screen__dots span:nth-child(2){
  background: #febc2e;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 1px 0 rgba(255,255,255,.18) inset,
    0 0 18px rgba(254,188,46,.70);
}

.screen.is-active .screen__dots span:nth-child(3){
  background: #28c840;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 1px 0 rgba(255,255,255,.18) inset,
    0 0 18px rgba(40,200,64,.70);
}

.themeToggle{
  margin-left: auto;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line2);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
}
.themeToggle:hover{
  color: var(--text);
  border-color: var(--line);
}
/* tame browser focus outline */
.themeToggle:focus{ outline: none; }
.themeToggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(120,255,190,.12);
}


/* ---------- SIGNAL SUBSCRIBE ---------- */
.screen--signal{
  box-shadow:
    0 22px 50px rgba(0,0,0,.45),
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 0 40px rgba(140,255,193,.05);
}

.signalText{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.signalForm{
  display:flex;
  gap:10px;
  align-items:center;
}

.signalForm input{
  flex:1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: rgba(4,6,12,.55);
  color: var(--text);
  font-family: ui-monospace, monospace;
  font-size: 13px;
}

.signalForm input::placeholder{
  color: rgba(234,240,255,.45);
}

.signalForm input:focus{
  outline: none;
  border-color: rgba(122,240,255,.45);
  box-shadow: 0 0 0 2px rgba(122,240,255,.15);
}

.signalForm button{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: rgba(120,255,190,.10);
  color: var(--text);
  font-size: 12px;
  letter-spacing: .18em;
  cursor: pointer;
}

.signalForm button:hover{
  background: rgba(120,255,190,.18);
  box-shadow: 0 0 16px rgba(120,255,190,.25);
}

.signalHint{
  margin-top: 10px;
  font-size: 11px;
  color: rgba(234,240,255,.50);
}
/* ---------- SIGNAL SUBSCRIBE: console typography alignment ---------- */
.screen--signal .screen__body{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
}

.signalText{
  font-size: 13px;          /* match .poem */
  line-height: 1.55;       /* match .poem */
  color: rgba(234,240,255,.90);
}

.signalHint{
  font-size: 12px;          /* same scale as .screen__hint */
  line-height: 1.5;
}
/* ================================
   THEME: LIGHT MODE (FOGGY TERMINAL)
   Paste this whole block at the VERY BOTTOM of styles.css
   ================================ */

body.theme-light{
  /* “foggy terminal” background: light, but not white */
  --bg0:#cfd6dd;
  --bg1:#d9e1e8;
  --bg2:#bfc7cf;

  /* deep green-black text */
  --text:rgba(10,18,16,.92);
  --muted:rgba(10,18,16,.62);

  --line:rgba(0,0,0,.12);
  --line2:rgba(0,0,0,.08);

  /* keep TechnoTruant green identity, restrained */
  --accent:#0a9d86;
  --accent2:#1aa36a;
  --glow:rgba(10,157,134,.12);
  --shadow:rgba(0,0,0,.16);

  /* CRT tuning in light mode */
  --crt-vignette: 0.12;
  --crt-glass: 0.07;
  --crt-scan: 0.03;
}

/* soften the heavy film/vignette so it reads “mist,” not “spotlight” */
body.theme-light::before{
  background:
    radial-gradient(
      1400px 900px at 50% 20%,
      rgba(255,255,255,.00),
      rgba(0,0,0,.06) 72%,
      rgba(0,0,0,.14) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.06),
      rgba(0,0,0,.05)
    );
}

/* optional: header glass in light mode */
body.theme-light .top{
  background: rgba(245,248,252,.62);
  border-bottom: 1px solid rgba(0,0,0,.10);
}

/* ==========================================
   READABLE TEXT (fixes accidental white text)
   ========================================== */
body.theme-light .poem,
body.theme-light pre.poem,
body.theme-light .terminal-text{
  color: rgba(10,18,16,.92) !important;
  text-shadow: none !important;
}

body.theme-light .poemBy{
  color: rgba(10,18,16,.58);
}

body.theme-light .screen__hint{
  color: rgba(10,18,16,.55);
}

body.theme-light .screen__title{
  color: rgba(10,18,16,.58);
}

body.theme-light .screen__status{
  color: rgba(10,157,134,.60);
  text-shadow: 0 0 10px rgba(0,140,95,.14);
}

/* ================================
   FRAME = chassis (skin only)
   IMPORTANT: do not change sizing/margins here.
   Let the base/dark structure stay consistent.
   ================================ */
body.theme-light .frame{
  background: linear-gradient(
    180deg,
    rgba(241,245,249,.96),
    rgba(226,232,238,.94)
  );

  box-shadow:
    inset 0 10px 18px rgba(80,140,255,.14),
    inset 2px 0 10px rgba(80,140,255,.06),
    0 26px 60px rgba(0,0,0,.18),
    0 0 60px rgba(10,157,134,.06),
    inset 0 1px 0 rgba(255,255,255,.60),
    inset 0 -1px 0 rgba(0,0,0,.14);
}

/* ================================
   SCREEN = glass (skin only)
   Gasket is drawn with ::after so it stays uniform
   even across the title bar.
   ================================ */
body.theme-light .screen{
  background:
    linear-gradient(
      177deg,
      rgba(238, 244, 236, 0.90) 0%,
      rgba(222, 230, 222, 0.96) 12%,
      rgba(232, 238, 230, 0.94) 21%,
      rgba(210, 220, 210, 0.98) 33%,

      rgba(226, 234, 226, 0.95) 47%,
      rgba(224, 232, 224, 0.96) 51%,

      rgba(200, 210, 200, 0.99) 61%,
      rgba(218, 226, 218, 0.96) 73%,
      rgba(198, 208, 198, 0.99) 88%,
      rgba(212, 220, 212, 0.97) 100%
    );
    linear-gradient(
      180deg,
      rgba(210,218,224,.92),
      rgba(198,206,212,.96)
    );

  border-color: rgba(0,0,0,.12);

  /* remove base gasket so we can overlay a uniform gasket */
  box-shadow: none !important;
}

/* Uniform gasket overlay (top/sides/bottom match) */
body.theme-light .screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 4px rgba(10,10,10,.30);
}

/* Make the title bar corners curve with the screen */
body.theme-light .screen__bar{
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  overflow: hidden;
}


/* ==========================================
   KILL “SECOND SCREEN” (LIGHT ONLY)
   The culprit is .poem being its own panel.
   ========================================== */
body.theme-light .poem{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important; /* spacing comes from .screen__body */
}

/* Keep the glass feeling inside the body, without making a second panel */
body.theme-light .screen__body{
  background: transparent !important;
  box-shadow: none !important;
}

/* ===========================
   SIGNAL SUBSCRIBE (LIGHT MODE)
   =========================== */
body.theme-light .signalText{
  color: rgba(10,18,16,.74);
}

body.theme-light .signalForm input[type="email"]{
  color: rgba(10,18,16,.86);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    inset 0 10px 20px rgba(0,0,0,.06);
}

body.theme-light .signalForm input[type="email"]::placeholder{
  color: rgba(10,18,16,.40);
}

body.theme-light .signalForm input[type="email"]:focus{
  border-color: rgba(10,157,134,.30);
  box-shadow:
    0 0 0 3px rgba(10,157,134,.12),
    inset 0 1px 0 rgba(255,255,255,.60),
    inset 0 10px 20px rgba(0,0,0,.06);
}

body.theme-light .signalForm button{
  border: 1px solid rgba(10,157,134,.24);
  background:
    linear-gradient(
      180deg,
      rgba(10,157,134,.10),
      rgba(255,255,255,.58)
    );
  color: rgba(10,18,16,.70);
  box-shadow:
    0 14px 26px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(255,255,255,.55);
}

body.theme-light .signalForm button:hover{
  border-color: rgba(10,157,134,.34);
  box-shadow:
    0 16px 30px rgba(0,0,0,.16),
    0 0 18px rgba(10,157,134,.10),
    inset 0 0 0 1px rgba(255,255,255,.55);
}

body.theme-light .signalHint{
  color: rgba(10,18,16,.52);
}

/* ==========================================
   LIGHT MODE — gasket belongs to the SCREEN
   Paste at VERY BOTTOM of styles.css
   ========================================== */

/* Make sure the chassis/frame does NOT look like it has a gasket */
body.theme-light .frame{
  box-shadow:
    inset 0 10px 18px rgba(80,140,255,.14),
    inset 2px 0 10px rgba(80,140,255,.06),
    0 26px 60px rgba(0,0,0,.18),
    0 0 60px rgba(10,157,134,.06),
    inset 0 1px 0 rgba(255,255,255,.60),
    inset 0 -1px 0 rgba(0,0,0,.14);
}

/* SCREEN owns the gasket */
body.theme-light .screen{
  position: relative; /* required for ::after */
  box-shadow: none !important; /* remove any base gasket */
}

/* Uniform rubber gasket on the screen edge */
body.theme-light .screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 4px rgba(10,10,10,.30);
}