/* =========================================================
   theme.css: light and dark themes, HUD polish, and the
   components added on top of the existing layout.
   Loaded after style.css and mediaqueries.css.
   ========================================================= */

:root {
  --bg: #ffffff;
  --ink: #16202c;
  --muted: #44515f;
  --faint: #7c8894;
  --accent: #ff4f00;
  --accent-soft: rgba(255, 79, 0, 0.14);
  --card: #ffffff;
  --panel: #f5f5f5;
  --line: rgb(163, 163, 163);
  --trace: rgba(22, 32, 44, 0.32);
  --dot: rgba(22, 32, 44, 0.14);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f14;
  --ink: #e8edf2;
  --muted: #a9b4c0;
  --faint: #7d8896;
  --accent: #ff6a2b;
  --accent-soft: rgba(255, 106, 43, 0.18);
  --card: #121820;
  --panel: #1a222c;
  --line: #2f3b4a;
  --trace: rgba(232, 237, 242, 0.32);
  --dot: rgba(232, 237, 242, 0.12);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------- theme toggle ---------------- */
#theme-toggle {
  position: fixed; bottom: 2rem; right: 5.2rem; z-index: 1000;
  width: 50px; height: 50px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgb(163, 163, 163);
  background: rgba(255, 255, 255, 0.9); color: #16202c;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, background 0.3s ease;
}
#theme-toggle:hover { transform: scale(1.1); background: #ffffff; }
#theme-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#theme-toggle .i-sun { display: none; }
html[data-theme="dark"] #theme-toggle .i-sun { display: block; }
html[data-theme="dark"] #theme-toggle .i-moon { display: none; }
html[data-theme="dark"] #theme-toggle { background: rgba(18, 24, 32, 0.92); border-color: #3a4656; color: #e8edf2; }
html[data-theme="dark"] #theme-toggle:hover { background: #1a222c; }

/* ---------------- dark theme: existing UI, same layout ---------------- */
html[data-theme="dark"] body { background: #0b0f14; color: #e8edf2; }
html[data-theme="dark"] .gold-background {
  background:
    linear-gradient(rgba(150, 180, 230, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 180, 230, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(150, 180, 230, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 180, 230, 0.03) 1px, transparent 1px),
    radial-gradient(ellipse 130% 90% at 15% -10%, #131b25 0%, #0d1219 55%, #090c11 100%);
  background-size: 140px 140px, 140px 140px, 28px 28px, 28px 28px, 100% 100%;
}
html[data-theme="dark"] p,
html[data-theme="dark"] .section__text__p1 { color: var(--muted); }
html[data-theme="dark"] a { color: var(--ink); }
html[data-theme="dark"] a:hover { color: #8f9cab; }
html[data-theme="dark"] .section__text__p1 a { color: var(--muted) !important; }
html[data-theme="dark"] .title,
html[data-theme="dark"] .experience-sub-title,
html[data-theme="dark"] .project-title { color: var(--ink) !important; }
html[data-theme="dark"] #research > h2 { color: var(--muted) !important; }
html[data-theme="dark"] .nav-links a.nav-active,
html[data-theme="dark"] .menu-links a.nav-active { border-color: var(--ink); }
html[data-theme="dark"] .hamburger-icon span { background-color: var(--ink); }
html[data-theme="dark"] .menu-links { background-color: var(--card); box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .menu-links a { color: var(--ink); border-bottom-color: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .menu-links a:hover { background-color: rgba(255, 255, 255, 0.06); color: #ffffff; }
html[data-theme="dark"] .btn-color-1 { background: var(--ink); color: var(--bg); border-color: var(--ink); }
html[data-theme="dark"] .btn-color-1:hover { background: #ffffff; }
html[data-theme="dark"] .btn-color-2,
html[data-theme="dark"] .project-btn { color: var(--ink); border-color: var(--line); background: none; }
html[data-theme="dark"] .btn-color-2:hover,
html[data-theme="dark"] .project-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
html[data-theme="dark"] .details-container,
html[data-theme="dark"] .color-container,
html[data-theme="dark"] .contact-info-upper-container { background: var(--card); border-color: var(--line); }
html[data-theme="dark"] .article-container,
html[data-theme="dark"] .details-container .article-container { background: var(--panel) !important; }
html[data-theme="dark"] .details-container p { color: var(--muted) !important; }
html[data-theme="dark"] .highlights-caption,
html[data-theme="dark"] .details-gallery figcaption { color: var(--muted); }
html[data-theme="dark"] .icon { filter: invert(0.92); }
html[data-theme="dark"] .arrow { filter: invert(0.92); }
html[data-theme="dark"] .about-drone { filter: invert(0.9); }
html[data-theme="dark"] footer p { color: var(--faint); }
html[data-theme="dark"] .highlights-grid-item img,
html[data-theme="dark"] .highlights-grid-item video { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] #music-toggle { background: rgba(18, 24, 32, 0.92) !important; border-color: #3a4656 !important; color: #e8edf2; }
html[data-theme="dark"] #discord-invite-modal { background: var(--card) !important; border-color: var(--line) !important; }
html[data-theme="dark"] #discord-invite-modal input,
html[data-theme="dark"] #discord-invite-modal textarea { background: var(--panel); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] #details-modal-content { background: var(--card) !important; border-color: var(--line) !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6) !important; }
html[data-theme="dark"] #details-modal-title { color: var(--ink) !important; }
html[data-theme="dark"] #details-modal-subtitle { color: var(--faint) !important; }
html[data-theme="dark"] #details-modal-list { color: #c2ccd6 !important; }
html[data-theme="dark"] #details-modal-list li { color: #c2ccd6; }
html[data-theme="dark"] #details-modal-list li[style*="font-weight: bold"],
html[data-theme="dark"] #details-modal-list li[style*="font-weight:bold"] { color: var(--ink) !important; }
html[data-theme="dark"] #close-details-modal { color: var(--faint) !important; }

/* ---------------- campaign HUD polish ---------------- */
html[data-theme="dark"] .campaign-hud,
html[data-theme="dark"] .hud-phase-name,
html[data-theme="dark"] .hud-scrollcue { color: var(--ink); }
html[data-theme="dark"] .hud-corner,
html[data-theme="dark"] .hud-phase-copy { color: var(--muted); }
html[data-theme="dark"] .hud-telemetry { background: rgba(18, 24, 32, 0.6); border-color: rgba(232, 237, 242, 0.2); }
html[data-theme="dark"] .hud-telemetry .tl-row span:first-child { color: var(--faint); }
html[data-theme="dark"] .hud-timeline-bar { background: rgba(232, 237, 242, 0.18); }
html[data-theme="dark"] .campaign-story {
  background: linear-gradient(90deg, rgba(11, 15, 20, 0.96) 0%, rgba(11, 15, 20, 0.85) 48%, rgba(11, 15, 20, 0.05) 88%);
}
html[data-theme="dark"] .story-greet { color: var(--muted); }
html[data-theme="dark"] .story-name { color: var(--ink); }
html[data-theme="dark"] .story-text p { color: #b3bec9; }
html[data-theme="dark"] .story-btn { border-color: var(--ink); color: var(--ink); }
html[data-theme="dark"] .story-btn:hover { background: var(--ink); color: var(--bg); }
html[data-theme="dark"] .story-btn-solid { background: var(--ink); color: var(--bg); }
html[data-theme="dark"] .story-btn-solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-theme="dark"] .story-photo { border-color: rgba(232, 237, 242, 0.2); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5); }
@media screen and (max-width: 760px) {
  html[data-theme="dark"] .campaign-story { background: rgba(11, 15, 20, 0.94); }
}

.hud-telemetry::before {
  content: "LIVE TELEMETRY";
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 0.45rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.hud-telemetry .tl-row span:last-child { font-variant-numeric: tabular-nums; }

.hud-timeline-labels {
  position: relative;
  display: block;
  height: 1.7rem;
  pointer-events: auto;
}
.hud-chip {
  position: absolute;
  left: calc(var(--p) * 100%);
  top: 0.45rem;
  background: none;
  border: 0;
  padding: 0.2rem 0 0.2rem 0.4rem;
  font: inherit;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--faint);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.hud-chip::before {
  content: "";
  position: absolute;
  left: 0; top: -0.7rem;
  width: 1px; height: 0.55rem;
  background: currentColor;
  opacity: 0.55;
}
.hud-chip .n { color: var(--accent); margin-right: 0.35em; }
.hud-chip:hover, .hud-chip.is-on { color: var(--ink); }
.hud-chip:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.hud-skip {
  position: absolute;
  right: 4vw;
  bottom: 11vh;
  pointer-events: auto;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  transition: opacity 0.4s ease, background 0.2s ease, color 0.2s ease;
}
.hud-skip:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.hud-skip.is-hidden { opacity: 0; pointer-events: none; }
.model-credit {
  position: absolute;
  left: 4vw;
  bottom: 1.2vh;
  font-size: 0.54rem;
  letter-spacing: 0.1em;
  color: var(--faint);
}
@media screen and (max-width: 760px) {
  .hud-timeline-labels span:nth-child(even) { display: block; }
  .hud-chip .l { display: none; }
  .hud-chip { font-size: 0.6rem; }
  .hud-skip { bottom: 13vh; right: 6vw; }
  .model-credit { font-size: 0.5rem; }
}

/* ---------------- flip word swap ---------------- */
.flip-swap {
  display: inline-flex;
  align-items: baseline;
  cursor: pointer;
  white-space: pre;
  outline-offset: 5px;
}
.flip-stack { display: inline-grid; transition: width 0.4s ease; overflow: visible; perspective: 520px; }
.flip-run { grid-area: 1 / 1; display: inline-flex; width: max-content; white-space: pre; }
.flip-char {
  display: inline-block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  transform-origin: 50% 55%;
}
.flip-a .flip-char { transform: rotateX(0deg); }
.flip-b .flip-char { transform: rotateX(-180deg); }
.flip-swap.is-flipped .flip-a .flip-char { transform: rotateX(180deg); }
.flip-swap.is-flipped .flip-b .flip-char { transform: rotateX(0deg); }
@media (prefers-reduced-motion: reduce) {
  .flip-char { transition: none !important; }
}

/* ---------------- test campaign circuit board ---------------- */
.test-loop-wrap {
  position: relative;
  max-width: 980px;
  margin: 3rem auto 1.5rem;
  padding: 1.4rem 1.6rem 1.1rem;
  color: #2b2620;
  transform: rotate(-0.4deg);
  background-color: #efe9db;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='420'><filter id='c' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.011 0.016' numOctaves='5' seed='11'/><feDiffuseLighting lighting-color='%23f6f1e4' surfaceScale='3.2'><feDistantLight azimuth='235' elevation='55'/></feDiffuseLighting></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>");
  background-size: cover;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 14px 26px rgba(0,0,0,0.22);
  clip-path: polygon(0.4% 1.2%, 18% 0%, 41% 1%, 63% 0.2%, 86% 1.1%, 99.6% 0.4%, 100% 34%, 99.3% 71%, 100% 98.6%, 78% 100%, 52% 99%, 27% 100%, 0.6% 99%, 0% 63%, 0.7% 30%);
}
.test-loop-head {
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 0.95rem;
  color: #3a332a;
  margin-bottom: 0.3rem;
}
.test-loop { padding: 0 0.2rem 0.4rem; }
.tl-svg { display: block; width: 100%; height: auto; }
.tl-trace { fill: none; stroke: #3a332a; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tl-node { fill: rgba(255,255,255,0.35); stroke: #3a332a; stroke-width: 1.7; }
.tl-num { font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: 15px; fill: #2b2620; }
.tl-title { font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: 13px; fill: #2b2620; }
.tl-desc { font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: 10.5px; fill: #5b5346; }
@media (prefers-reduced-motion: reduce) { .tl-node { animation: none; } }

/* ---------------- orbit card stack ---------------- */
.orbit-stack {
  position: relative;
  height: 450px;
  max-width: 980px;
  margin: 2.2rem auto 1rem;
  perspective: 1200px;
}
.orbit-card {
  position: absolute;
  left: 50%;
  top: 40px;
  width: 260px;
  height: 340px;
  margin-left: -130px;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(22, 32, 44, 0.12);
  transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.24, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  will-change: transform;
  text-decoration: none;
}
html[data-theme="dark"] .orbit-card { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); }
.orbit-card.is-active { border-color: var(--ink); box-shadow: 0 26px 50px rgba(22, 32, 44, 0.24); }
html[data-theme="dark"] .orbit-card.is-active { box-shadow: 0 26px 50px rgba(0, 0, 0, 0.7); }
.orbit-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.oc-media {
  height: 150px;
  flex: 0 0 150px;
  background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.oc-media img { width: 100%; height: 100%; object-fit: cover; }
.oc-glyph { font-family: var(--mono); font-size: 2.3rem; letter-spacing: 0.06em; color: var(--accent); }
.oc-body { padding: 0.95rem 1.1rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.oc-tag { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.oc-body h3 { font-size: 0.98rem; line-height: 1.25; font-weight: 600; color: var(--ink); margin: 0; }
.oc-body p { font-size: 0.78rem; line-height: 1.5; color: var(--muted) !important; margin: 0; }
.oc-link { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--accent); align-self: flex-start; margin-top: 0.15rem; }
@media (max-width: 640px) {
  .orbit-stack { height: 430px; }
  .orbit-card { width: 232px; margin-left: -116px; height: 330px; }
}
@media (prefers-reduced-motion: reduce) { .orbit-card { transition: none; } }

/* ---------------- photo editor (local only) ---------------- */
.pe-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; justify-content: center;
  margin: 1rem auto; padding: 0.7rem 1rem;
  border: 1px dashed var(--accent);
  font-family: var(--mono); font-size: 0.68rem; max-width: 980px;
}
.pe-toolbar[hidden] { display: none; }
.pe-btn, .pe-mini {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
  padding: 0.45rem 0.85rem; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.pe-btn:hover, .pe-mini:hover { background: var(--ink); color: var(--bg); }
.pe-mini { padding: 0.25rem 0.55rem; font-size: 0.62rem; }
.pe-danger { border-color: #c0392b; color: #c0392b; }
.pe-danger:hover { background: #c0392b; color: #fff; }
.pe-status { color: var(--muted); }
.pe-status.bad { color: #c0392b; }
.pe-note { color: var(--faint); font-size: 0.62rem; }
.pe-ctl { display: flex; gap: 0.35rem; justify-content: center; margin-top: 0.45rem; }
.pe-editing [contenteditable="true"] { outline: 1px dashed var(--accent); padding: 0.2rem 0.3rem; min-width: 8ch; cursor: text; }
.pe-empty { color: var(--faint); text-align: center; grid-column: 1 / -1; }

/* ---------------- footer credit ---------------- */
.site-credit { font-size: 0.7rem; margin-top: 0.3rem; }

/* dark HUD contrast */
html[data-theme="dark"] .hud-phase-copy { color: #d3dbe4 !important; }
html[data-theme="dark"] .hud-phase-label, html[data-theme="dark"] .hud-phase-num { color: #b9c4d0 !important; }

/* ---------------- campaign projects ---------------- */
.campaign-group {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2rem 0 0.4rem;
  text-align: center;
  font-weight: 500;
}
#web-applications .details-container { border-radius: 0; border: 1px solid var(--line); box-shadow: none; background: var(--card); }
#web-applications .project-img, #web-applications .web-apps-media { border-radius: 0; }
#web-applications .btn { border-radius: 0; }

/* ---------------- drone that hovers over every page ---------------- */
.site-drone {
  position: fixed; left: 0; top: 0; width: 84px; height: 84px;
  z-index: 40; pointer-events: none; opacity: 0.8;
  animation: site-drone-path 38s ease-in-out infinite;
  filter: drop-shadow(0 8px 6px rgba(0,0,0,0.18));
}
.site-drone img { width: 100%; height: 100%; object-fit: contain; animation: site-drone-bob 2.4s ease-in-out infinite; }
html[data-theme="dark"] .site-drone img { filter: invert(0.9); }
@keyframes site-drone-path {
  0%, 100% { transform: translate(12vw, 26vh) rotate(-4deg); }
  16% { transform: translate(72vw, 16vh) rotate(6deg); }
  33% { transform: translate(84vw, 58vh) rotate(-3deg); }
  50% { transform: translate(52vw, 80vh) rotate(5deg); }
  68% { transform: translate(20vw, 70vh) rotate(-6deg); }
  84% { transform: translate(6vw, 44vh) rotate(3deg); }
}
@keyframes site-drone-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 760px) { .site-drone { width: 56px; height: 56px; opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .site-drone, .site-drone img { animation: none; } .site-drone { transform: translate(80vw, 78vh); } }

/* ---------------- description under the hero object ---------------- */
.hud-about {
  position: absolute; left: 57px; bottom: 118px; max-width: 430px;
  padding: 0.9rem 1.1rem;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--line);
  backdrop-filter: blur(4px);
  font-size: 0.8rem; line-height: 1.6; color: var(--muted);
  opacity: 1; transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.hud-about p { margin: 0 0 0.55rem; }
.hud-about p:last-child { margin: 0; }
.hud-about.is-off { opacity: 0; transform: translateY(10px); }
html[data-theme="dark"] .hud-about { background: rgba(18,24,32,0.7); color: #d3dbe4; }
@media (max-width: 900px) { .hud-about { left: 6vw; right: 6vw; max-width: none; bottom: 104px; font-size: 0.72rem; } .hud-about p:nth-child(n+2) { display: none; } }
#web-applications .web-apps-containers { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; }
#web-applications .web-apps-card { width: min(600px, 92vw); flex: 0 1 600px; }
.hud-about { font-size: 0.74rem; max-width: 440px; bottom: 112px; }
.test-loop-wrap { width: min(980px, 92vw); box-sizing: border-box; }
#web-applications .web-apps-card { width: auto !important; max-width: 600px !important; flex: 1 1 100% !important; margin: 0 auto; }
html[data-theme="dark"] .site-drone img { filter: brightness(1.9) saturate(0.9); }

/* description under the profile picture, above the animation */
.about-intro { width: 100%; max-width: 1500px; margin: 0 auto; padding: 1rem 6vw 2.4rem; text-align: left; box-sizing: border-box; }
.about-intro p { font-size: clamp(1.02rem, 1.1vw + 0.6rem, 1.3rem); line-height: 1.75; color: var(--muted); margin: 0 0 0.9rem; }
.about-intro p:first-child { color: var(--ink); }
.hud-about { display: none !important; }

/* paper notes below the campaign */
.paper-notes { padding: 2rem 0 3rem; }
.paper-notes .test-loop-wrap { margin: 1.4rem auto; }
.paper-notes .test-loop-wrap:nth-child(2) { transform: rotate(0.35deg); }
.v-scroll { overflow-x: auto; }
.v-scroll .tl-svg { min-width: 680px; }
.tl-dash { fill: none; stroke: #8a8172; stroke-width: 1.3; stroke-dasharray: 6 6; stroke-linecap: round; }
.v-note { font-size: 0.82rem; margin: 0.2rem 0 0; }

/* campaign guide card and modal */
#web-applications .web-apps-card { flex: 1 1 340px !important; max-width: 520px !important; }
.guide-card { display: flex; align-items: center; justify-content: center; min-height: 260px; }
.guide-body { text-align: center; padding: 1.4rem; max-width: 380px; }
.guide-body .oc-tag { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.5rem; }
.guide-text { font-size: 0.9rem; line-height: 1.5; color: var(--muted); margin: 0.6rem 0 1rem; }
.cg-modal { position: fixed; inset: 0; z-index: 10002; background: rgba(8,12,18,0.78); overflow-y: auto; padding: 4vh 3vw; }
.cg-modal[hidden] { display: none; }
.cg-panel { position: relative; max-width: 1040px; margin: 0 auto; background: var(--bg); border: 1px solid var(--line); padding: 2rem 1.6rem 1rem; }
.cg-close { position: absolute; top: 0.6rem; right: 0.9rem; background: none; border: 0; font-size: 2rem; line-height: 1; color: var(--muted); cursor: pointer; }
.cg-kicker { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0; }
.cg-panel h2 { font-size: 1.6rem; margin: 0.3rem 0 0.6rem; color: var(--ink); }
.cg-lead { max-width: 720px; font-size: 0.95rem; line-height: 1.65; color: var(--muted); margin: 0 0 0.6rem; }
.cg-panel .paper-notes { padding: 0.4rem 0 1.4rem; }
.tl-nodeg.is-picked .tl-node { fill: #e9b48d; }
.v-wrap .tl-nodeg:hover .tl-node { fill: rgba(233,180,141,0.55); }

/* stealth project card */
.stealth-card { text-align: center; }
.stealth-thumb {
  display: block; width: 100%; padding: 0.6rem; border: 0; cursor: pointer;
  background-color: #efe9db;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='300'><filter id='c' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.011 0.016' numOctaves='5' seed='11'/><feDiffuseLighting lighting-color='%23f6f1e4' surfaceScale='3.2'><feDistantLight azimuth='235' elevation='55'/></feDiffuseLighting></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>");
  background-size: cover;
}
.stealth-thumb svg { display: block; width: 100%; height: auto; pointer-events: none; }
.stealth-thumb .tl-title { font-size: 0; }
.stealth-card .guide-text { margin: 0.5rem 1rem 0.8rem; }
#zip-loop-store[hidden] { display: none; }
#details-modal .test-loop-wrap { margin: 0.4rem 0 1.4rem; width: 100%; }
.stealth-card .oc-tag { margin: 0.8rem 0 0.2rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }

/* Journey card (flight status style) */
.journey-card{margin:1.6rem 0 0;max-width:980px;background:var(--card);border:1px solid var(--line);border-radius:0;padding:1.2rem 1.4rem;color:var(--ink)}
.jc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;font-size:.85rem;color:var(--muted)}
.jc-title{letter-spacing:.08em;text-transform:uppercase}
.jc-live{display:inline-flex;align-items:center;gap:.4rem;color:var(--accent)}
.jc-live i{width:8px;height:8px;background:var(--accent);border-radius:50%;animation:jcPulse 1.6s ease-in-out infinite}
.jc-route{display:grid;grid-template-columns:1fr minmax(120px,1.2fr) 1fr;gap:1rem;align-items:center}
.jc-end b{display:block;font-weight:600;font-size:1.05rem;margin-top:.55rem}
.jc-end span{display:block;color:var(--muted);font-size:.82rem;line-height:1.4}
.jc-right{text-align:right}.jc-right .jc-code{justify-content:flex-end}
.jc-code{display:flex;gap:.9rem}
.jc-glyph{display:grid;grid-template-columns:repeat(5,7px);grid-auto-rows:7px;gap:2px}
.jc-glyph i{background:var(--dot);border-radius:50%}
.jc-glyph i.on{background:var(--ink);animation:jcDot .5s ease both}
.jc-mid{text-align:center;color:var(--muted);font-size:.8rem}
.jc-bar{position:relative;height:6px;background:var(--panel);border:1px solid var(--line);margin-bottom:.5rem}
.jc-bar i{position:absolute;left:0;top:0;bottom:0;width:55%;background:var(--accent)}
.jc-bar em{position:absolute;left:55%;margin-left:-8px;top:-11px;font-style:normal;color:var(--accent);font-size:1rem;line-height:1}
.jc-foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.jc-foot span{display:block;color:var(--faint);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.jc-foot b{font-weight:500;font-size:.92rem}
@keyframes jcPulse{50%{opacity:.35}}
@keyframes jcDot{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes jcRun{to{background-position:24px 0}}
@media(max-width:640px){.jc-route{grid-template-columns:1fr;text-align:left}.jc-right{text-align:left}.jc-right .jc-code{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.jc-live i,.jc-glyph i.on{animation:none}}

.jc-desc{margin-top:1.2rem;padding-top:0;border-top:0}
.jc-desc p{font-family:inherit;font-size:clamp(.92rem,.3vw + .82rem,1.02rem);line-height:1.7;color:var(--muted);margin:0 0 .85rem}
.jc-desc p:first-child{color:var(--ink)}
.journey-card{max-width:none;width:100%;background:transparent;border:0;padding:0;margin:.4rem 0 0}
.journey-card .jc-top{padding-bottom:.6rem}
.jc-title,.jc-live{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase}
.jc-title{color:var(--accent)}
.jc-end b{font-family:inherit;font-weight:500;font-size:1rem}
.jc-desc p{font-family:inherit;font-size:.95rem;line-height:1.7;color:var(--muted);margin:0 0 .8rem}
.jc-desc p:first-child{color:var(--ink)}