/* ════════════════════════════════════════════════════════════════
   Light theme. Default is dark (each page's own CSS); these rules
   apply only under html[data-theme="light"] and override it.
   Loaded on every page after the page's inline <style>.
   Canvas "display panels" (lab demos, the CV map) intentionally stay
   dark in light mode — like a screen inset on a bright page.
   ════════════════════════════════════════════════════════════════ */

/* ── theme toggle button (both modes) ─────────────────────────── */
.theme-toggle {
  position: fixed; top: 1.13rem; right: 7.4rem; z-index: 51;
  width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center; cursor: none; padding: 0;
  background: rgba(190,215,255,.07); border: 1px solid rgba(190,215,255,.16);
  color: rgba(210,228,255,.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.theme-toggle:hover { color: #fff; border-color: rgba(190,220,255,.45); transform: translateY(-1px); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.theme-toggle.solo { right: 1.2rem; top: 1.15rem; }
@media (max-width: 560px) { .theme-toggle { right: 1rem; } }
@media (hover: none),(pointer: coarse) { .theme-toggle { cursor: auto; } }

/* light-mode look of the toggle itself */
html[data-theme="light"] .theme-toggle {
  background: rgba(255,255,255,.72); border-color: rgba(40,70,130,.16); color: rgba(40,60,100,.78);
}
html[data-theme="light"] .theme-toggle:hover { color: #14233f; border-color: rgba(30,90,190,.42); }

/* ── responsive nav (mode-agnostic): keep the centered nav clear of the
   corner toggles at every width, even with 6 items. Loaded after each
   page's own CSS, so these win at equal specificity. ── */
@media (max-width: 980px){ .tab-nav a{ padding:.42rem .66rem; letter-spacing:.14em; } }
@media (max-width: 860px){ .tab-nav a{ padding:.38rem .5rem; letter-spacing:.1em; font-size:.6rem; } }
@media (max-width: 740px){ .tab-nav a{ padding:.34rem .38rem; letter-spacing:.05em; font-size:.56rem; } }
@media (max-width: 620px){ .tab-nav{ padding:3px; } .tab-nav a{ padding:.32rem .32rem; letter-spacing:.02em; font-size:.53rem; } }
@media (max-width: 470px){ .tab-nav a{ padding:.3rem .26rem; letter-spacing:0; font-size:.5rem; } }

/* ═══════════════ LIGHT MODE ═══════════════ */
html[data-theme="light"] body { background: #eef3fc; color: rgba(26,40,72,.92); }
html[data-theme="light"] ::selection { background: rgba(20,120,200,.18); }

/* full-page background canvas: on some pages (#bg) it paints an opaque
   dark atmosphere (CV's "dive", etc.) — hide it in light mode so the
   light body + soft aurora form the background instead. */
html[data-theme="light"] #bg { display: none; }

/* aurora + vignette: soften to gentle tints on white */
html[data-theme="light"] .aurora { opacity: .55; }
html[data-theme="light"] .blob { mix-blend-mode: multiply; }
html[data-theme="light"] .vignette {
  background: radial-gradient(120% 90% at 50% 30%, transparent 62%, rgba(40,80,160,.05) 100%);
}

/* custom cursor */
html[data-theme="light"] #cv-dot { background: #16294d; box-shadow: 0 0 12px rgba(40,90,180,.4); }
html[data-theme="light"] #cv-ring { border-color: rgba(30,70,140,.5); }
html[data-theme="light"] #cv-ring.hover { border-color: rgba(20,90,200,.85); }
html[data-theme="light"] .cursor-dot, html[data-theme="light"] #dot { background: #16294d !important; }
html[data-theme="light"] .cursor-ring, html[data-theme="light"] #ring { border-color: rgba(30,70,140,.5) !important; }

/* nav (shared + scene variants) */
html[data-theme="light"] .tab-nav {
  background: rgba(255,255,255,.72); border-color: rgba(40,70,130,.16);
}
html[data-theme="light"] .tab-nav a { color: rgba(45,65,105,.64); }
html[data-theme="light"] .tab-nav a:hover { color: #17273f; }
html[data-theme="light"] .tab-nav a.active { background: rgba(40,90,200,.12); color: #14233f; }

/* lang toggle */
html[data-theme="light"] .lang-toggle { background: rgba(255,255,255,.72); border-color: rgba(40,70,130,.16); }
html[data-theme="light"] .lang-toggle button { color: rgba(45,65,105,.64); }
html[data-theme="light"] .lang-toggle button.active { background: rgba(40,90,200,.12); color: #14233f; }

/* back link */
html[data-theme="light"] .backlink {
  background: rgba(255,255,255,.72); border-color: rgba(40,70,130,.16); color: rgba(45,65,105,.74);
}
html[data-theme="light"] .backlink:hover { color: #14233f; border-color: rgba(30,90,190,.5); }

/* footer + impressum corner links */
html[data-theme="light"] .foot-small { color: rgba(64,84,124,.5); }
html[data-theme="light"] .foot-small a { border-bottom-color: rgba(40,70,130,.3); }
html[data-theme="light"] .legal { color: rgba(60,80,120,.55); }

/* ── shared hero / typography ─────────────────────────────────── */
html[data-theme="light"] .hero-eyebrow { color: rgba(48,90,150,.7); }
html[data-theme="light"] .hero-eyebrow::before { background: linear-gradient(90deg,#0e96c9,transparent); }
html[data-theme="light"] .hero-name #name-paulina { text-shadow: 0 0 30px rgba(70,120,220,.18); }

/* gradient accent text (hero names + page/section titles) */
html[data-theme="light"] .hero-name em,
html[data-theme="light"] .page-title,
html[data-theme="light"] .hero-title em {
  background: linear-gradient(110deg,#1486c4 0%,#4f5fd0 35%,#8a46c8 60%,#1486c4 100%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
}

html[data-theme="light"] .hero-role { color: rgba(48,68,108,.82); }
html[data-theme="light"] .hero-role b { color: rgba(20,34,62,.96); }
html[data-theme="light"] .hero-bio { color: rgba(56,76,116,.74); }
html[data-theme="light"] .hero-sub { color: rgba(50,70,110,.78); }
html[data-theme="light"] .hero-sub b { color: rgba(20,34,62,.95); }

/* chips & pills */
html[data-theme="light"] .chip {
  background: rgba(40,90,200,.07); border-color: rgba(40,70,130,.2); color: rgba(40,60,100,.82);
}
html[data-theme="light"] .link-pill {
  background: rgba(14,150,201,.1); border-color: rgba(14,150,201,.32); color: #0c6f97;
}
html[data-theme="light"] .link-pill:hover { background: rgba(14,150,201,.18); border-color: rgba(14,150,201,.6); }

/* ── explore cards (home) ─────────────────────────────────────── */
html[data-theme="light"] .ecard {
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(245,249,255,.6));
  border-color: rgba(40,70,130,.14);
}
html[data-theme="light"] .ecard:hover { border-color: rgba(30,90,190,.42); box-shadow: 0 22px 54px rgba(40,90,180,.16); }
html[data-theme="light"] .ecard::before { background: radial-gradient(440px circle at var(--mx,50%) var(--my,50%), rgba(40,120,220,.1), transparent 60%); }
html[data-theme="light"] .ecard::after { background: linear-gradient(90deg,#0e96c9,#7a44c8); }
html[data-theme="light"] .ec-num { color: rgba(40,90,180,.35); }
html[data-theme="light"] .ecard:hover .ec-num { color: rgba(30,90,190,.6); }
html[data-theme="light"] .ec-icon {
  background: linear-gradient(135deg, rgba(14,150,201,.16), rgba(122,68,200,.16));
  border-color: rgba(40,70,130,.2);
}
html[data-theme="light"] .ec-icon svg { stroke: #1a4a78; }
html[data-theme="light"] .ec-title { color: rgba(20,34,62,.96); }
html[data-theme="light"] .ec-desc { color: rgba(56,76,116,.74); }
html[data-theme="light"] .ec-cta { color: #0c83b8; }

/* ── lab index cards ──────────────────────────────────────────── */
html[data-theme="light"] .lab-card {
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(245,249,255,.6));
  border-color: rgba(40,70,130,.14); color: inherit;
}
html[data-theme="light"] a.lab-card:hover { border-color: rgba(30,90,190,.45); box-shadow: 0 22px 54px rgba(40,90,180,.16); }
html[data-theme="light"] .lc-num { color: rgba(40,90,180,.5); }
/* canvas preview panel stays DARK */
html[data-theme="light"] .lc-canvas-wrap { border-bottom-color: rgba(40,70,130,.14); }
html[data-theme="light"] .lc-title { color: rgba(20,34,62,.96); }
html[data-theme="light"] .lc-desc { color: rgba(56,76,116,.74); }
html[data-theme="light"] .lc-hint { color: rgba(50,80,140,.6); }
html[data-theme="light"] .lc-cta { color: #0c83b8; }

/* secret terminal — keep a dark inset so the mono output reads */
html[data-theme="light"] .lab-card.secret .term { background: rgba(10,18,38,.92); border-radius: 16px; }
html[data-theme="light"] .lab-card.secret .lc-body { border-left-color: rgba(40,70,130,.14); }
@media (max-width: 640px) { html[data-theme="light"] .lab-card.secret .lc-body { border-top-color: rgba(40,70,130,.14); } }

/* ── lab dedicated pages ──────────────────────────────────────── */
html[data-theme="light"] .page-intro { color: rgba(50,70,110,.82); }
html[data-theme="light"] .page-intro b { color: rgba(20,34,62,.95); }
/* big canvas viewport stays DARK */
html[data-theme="light"] .stage { border-color: rgba(40,70,130,.16); box-shadow: 0 24px 60px rgba(40,90,180,.16); }
html[data-theme="light"] .explain h2 { color: rgba(20,34,62,.94); }
html[data-theme="light"] .steps li { color: rgba(50,70,110,.82); }
html[data-theme="light"] .steps li::before { border-color: rgba(14,150,201,.5); color: #0c83b8; }
html[data-theme="light"] .tie {
  background: linear-gradient(90deg, rgba(14,150,201,.1), transparent);
  border-left-color: #0e96c9; color: rgba(40,60,100,.86);
}

/* ════════════ content pages (cv / ma / ba / projects / legal) ════════════ */

/* gradient-clipped titles everywhere */
html[data-theme="light"] h1 em,
html[data-theme="light"] .foot-big,
html[data-theme="light"] .sec-num {
  background: linear-gradient(110deg,#1486c4 0%,#4f5fd0 35%,#8a46c8 60%,#1486c4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* generic heads/subs */
html[data-theme="light"] .head-eyebrow { color: rgba(48,90,150,.7); }
html[data-theme="light"] .head-eyebrow::before { background: linear-gradient(90deg,#0e96c9,transparent); }
html[data-theme="light"] .head-sub { color: rgba(56,76,116,.74); }
html[data-theme="light"] .hero-typewriter { color: rgba(50,72,116,.66); }
html[data-theme="light"] .hero-typewriter::after { color: #0e96c9; }
html[data-theme="light"] .hero-scroll { color: rgba(60,90,150,.5); }
html[data-theme="light"] #name-heine .letter { text-shadow: 0 0 26px rgba(70,120,220,.18); }

/* glass panels (cv .glass, ma/ba .glass, legal .card) */
html[data-theme="light"] .glass,
html[data-theme="light"] .card {
  background: rgba(255,255,255,.72); border-color: rgba(40,70,130,.14);
}
html[data-theme="light"] .glass::before,
html[data-theme="light"] .pcard::before,
html[data-theme="light"] .pub-card::before {
  background: radial-gradient(440px circle at var(--mx,50%) var(--my,50%), rgba(40,120,220,.1), transparent 62%);
}

/* sections */
html[data-theme="light"] .sec-title { color: rgba(20,34,62,.96); }
html[data-theme="light"] .sec-line { background: linear-gradient(90deg, rgba(40,90,180,.32), transparent); }
html[data-theme="light"] .sec-text { color: rgba(50,70,110,.82); }
html[data-theme="light"] .sec-text b { color: rgba(20,34,62,.95); }

/* CV: scroll progress, depth gauge, ticker */
html[data-theme="light"] #prog { box-shadow: 0 0 12px rgba(60,140,230,.5); }
html[data-theme="light"] .dg-label { color: rgba(60,90,150,.45); }
html[data-theme="light"] .dg-track { background: rgba(40,80,160,.14); }
html[data-theme="light"] .dg-depth { color: rgba(50,75,120,.7); }
html[data-theme="light"] .ticker {
  border-color: rgba(40,80,160,.12); background: rgba(40,90,200,.04);
}
html[data-theme="light"] .ticker-group span { color: rgba(50,80,140,.7); }
html[data-theme="light"] .ticker-group i { color: #0c83b8; }

/* CV: timeline + entries */
html[data-theme="light"] .timeline-line { background: rgba(40,90,180,.16); }
html[data-theme="light"] .entry:hover { border-color: rgba(30,90,190,.34); box-shadow: 0 10px 34px rgba(40,110,230,.12); }
html[data-theme="light"] .entry::before { background: rgba(60,110,200,.5); border-color: rgba(40,90,180,.4); }
html[data-theme="light"] .entry.open::before, html[data-theme="light"] .entry:hover::before { background: #1486c4; box-shadow: 0 0 12px rgba(40,120,220,.55); }
html[data-theme="light"] .entry.lit::before { background: #1486c4; box-shadow: 0 0 12px rgba(40,120,220,.6); }
html[data-theme="light"] .entry-title { color: rgba(20,34,62,.96); }
html[data-theme="light"] .entry-date { color: rgba(40,70,120,.9); background: rgba(40,90,200,.08); border-color: rgba(40,70,130,.18); }
html[data-theme="light"] .entry-place { color: rgba(60,90,140,.78); }
html[data-theme="light"] .ma-link { color: #0c83b8; border-bottom-color: rgba(12,131,184,.4); }
html[data-theme="light"] .ma-link:hover { color: #064c6e; border-bottom-color: rgba(12,131,184,.8); }
html[data-theme="light"] .expand-hint { color: rgba(70,100,160,.5); }
html[data-theme="light"] .entry-body ul { color: rgba(56,76,116,.74); }
html[data-theme="light"] .entry-body ul li::before { color: #0e96c9; }

/* CV: map tooltip, languages, publication, modal */
html[data-theme="light"] .map-tooltip { background: rgba(255,255,255,.96); border-color: rgba(40,70,130,.2); color: #16294d; }
html[data-theme="light"] .tt-role { color: rgba(40,90,180,.85); }
html[data-theme="light"] .tt-year { color: rgba(60,90,140,.7); }
html[data-theme="light"] .lang-name { color: rgba(24,40,72,.9); }
html[data-theme="light"] .lang-bar-bg { background: rgba(40,90,180,.12); }
html[data-theme="light"] .lang-level { color: rgba(60,90,140,.7); }
html[data-theme="light"] .pub-card, html[data-theme="light"] .paper, html[data-theme="light"] .proj-modal { background: rgba(255,255,255,.82); }
html[data-theme="light"] .pub-title, html[data-theme="light"] .paper-title, html[data-theme="light"] .pm-title { color: rgba(20,34,62,.96); }
html[data-theme="light"] .pub-venue, html[data-theme="light"] .paper-sub, html[data-theme="light"] .pm-sub { color: rgba(60,90,140,.78); }
html[data-theme="light"] .pm-desc { color: rgba(50,70,110,.82); }
html[data-theme="light"] .pm-kicker { color: #0c83b8; }
html[data-theme="light"] .pm-close { background: rgba(40,90,200,.08); border-color: rgba(40,70,130,.22); color: rgba(40,60,100,.85); }
html[data-theme="light"] .pm-close:hover { background: rgba(40,90,200,.16); }
html[data-theme="light"] .proj-overlay { background: rgba(180,200,240,.5); }
html[data-theme="light"] .canvas-hint { color: rgba(70,100,160,.5); }

/* MA/BA: formulas, readouts, buttons, score chips, alpha slider, paper, badge */
html[data-theme="light"] .formula { background: rgba(40,90,200,.06); border-color: rgba(40,70,130,.16); color: rgba(28,44,78,.92); }
html[data-theme="light"] .formula .fa { color: #0c83b8; }
html[data-theme="light"] .formula .near { color: #c0395a; }
html[data-theme="light"] .formula .val { color: #7a44c8; }
html[data-theme="light"] .readout { color: rgba(56,76,116,.78); }
html[data-theme="light"] .readout strong { color: #16294d; }
html[data-theme="light"] .readout .ro-label { color: rgba(60,90,150,.55); }
html[data-theme="light"] .btn { background: rgba(40,90,200,.08); border-color: rgba(40,70,130,.22); color: rgba(30,55,100,.92); }
html[data-theme="light"] .btn:hover { background: rgba(40,90,200,.16); border-color: rgba(30,90,190,.45); }
html[data-theme="light"] .alpha-box { background: rgba(255,255,255,.7); border-color: rgba(40,70,130,.14); }
html[data-theme="light"] .alpha-box label { color: rgba(50,72,116,.78); }
html[data-theme="light"] .alpha-box input[type=range] { accent-color: #0e96c9; }
html[data-theme="light"] .alpha-val { color: #0c83b8; }
html[data-theme="light"] .sc-you, html[data-theme="light"] .sc-ogr { border-color: rgba(14,150,201,.5); color: #0b6f97; }
html[data-theme="light"] .sc-near, html[data-theme="light"] .sc-og { border-color: rgba(200,60,90,.45); color: #b03350; }
html[data-theme="light"] .sc-val { border-color: rgba(122,68,200,.5); color: #6b34b8; }
html[data-theme="light"] .sc-chip.winner { box-shadow: 0 0 18px rgba(201,137,10,.3); border-color: rgba(201,137,10,.6); }
html[data-theme="light"] .paper a { color: rgba(30,55,100,.92); border-color: rgba(40,70,130,.3); }
html[data-theme="light"] .paper a:hover { background: rgba(40,90,200,.1); border-color: rgba(30,90,190,.5); }
html[data-theme="light"] .badge { background: rgba(201,137,10,.12); border-color: rgba(201,137,10,.4); color: #8a6206; }

/* projects: heads themed; cards keep their dark scene preview, just lighten the frame border */
html[data-theme="light"] .pcard { background: rgba(255,255,255,.5); border-color: rgba(40,70,130,.16); }
html[data-theme="light"] .pcard:hover { border-color: rgba(30,90,190,.4); box-shadow: 0 18px 50px rgba(40,90,180,.16); }

/* legal document */
html[data-theme="light"] body.legal-body, html[data-theme="light"] .legal-body { background: linear-gradient(180deg,#f4f7fd,#e8eff9); }
html[data-theme="light"] .legal-h2, html[data-theme="light"] .card h2 { color: #0c6f97; }
html[data-theme="light"] .card h3 { color: rgba(20,34,62,.95); }
html[data-theme="light"] .card p, html[data-theme="light"] .card li { color: rgba(50,70,110,.82); }
html[data-theme="light"] .card p b, html[data-theme="light"] .card li b { color: rgba(20,34,62,.95); }
html[data-theme="light"] .card a { color: #0c7eb0; border-bottom-color: rgba(12,126,176,.35); }
html[data-theme="light"] .card a:hover { color: #064c6e; }
html[data-theme="light"] .muted { color: rgba(70,95,150,.55); }

/* ── contact page ── */
html[data-theme="light"] .crow { background: rgba(255,255,255,.72); border-color: rgba(40,70,130,.14); }
html[data-theme="light"] a.crow:hover { border-color: rgba(30,90,190,.42); box-shadow: 0 16px 42px rgba(40,90,180,.16); }
html[data-theme="light"] .crow-icon { color:#1a4a78; background:linear-gradient(135deg, rgba(14,150,201,.16), rgba(122,68,200,.16)); border-color: rgba(40,70,130,.2); }
html[data-theme="light"] .crow-label { color: rgba(20,34,62,.96); }
html[data-theme="light"] .crow-sub { color: rgba(56,76,116,.7); }
html[data-theme="light"] .crow-arr { color: #0c83b8; }
html[data-theme="light"] .crow-note { color: rgba(70,95,150,.6); }
html[data-theme="light"] .crow-note a { color:#0c7eb0; border-bottom-color: rgba(12,126,176,.35); }
html[data-theme="light"] .mail-btn { color:#0c6f97; background:rgba(14,150,201,.1); border-color:rgba(14,150,201,.32); }
html[data-theme="light"] .mail-btn:hover { background:rgba(14,150,201,.18); border-color:rgba(14,150,201,.6); }
html[data-theme="light"] .mail-addr { color:#14233f; border-bottom-color: rgba(12,126,176,.45); }
html[data-theme="light"] .mail-copy { color: rgba(40,60,100,.8); background:rgba(40,90,200,.08); border-color: rgba(40,70,130,.2); }
html[data-theme="light"] .mail-copy:hover { background:rgba(40,90,200,.16); }

/* ════════════ creative scenes — captions / HUD legible on a light (day) scene ════════════ */
html[data-theme="light"] .caption { text-shadow: 0 1px 10px rgba(255,255,255,.55); }
html[data-theme="light"] .cap-kanji { color: rgba(40,38,52,.82); }
html[data-theme="light"] .cap-title { color: rgba(70,62,82,.72); }
html[data-theme="light"] .cap-hint  { color: rgba(80,72,92,.62); }
html[data-theme="light"] .nowplaying { color: rgba(70,62,90,.62); text-shadow: 0 1px 8px rgba(255,255,255,.55); }
html[data-theme="light"] .eq span { background: rgba(80,110,180,.7); }
html[data-theme="light"] .wx-panel { background: rgba(255,255,255,.74); border-color: rgba(40,70,130,.16); }
html[data-theme="light"] .wx-track { background: rgba(40,90,180,.14); }
html[data-theme="light"] .wx-knob { background: #1486c4; box-shadow: 0 0 10px rgba(40,120,220,.6); }
html[data-theme="light"] .wx-fill { background: linear-gradient(90deg,rgba(60,140,230,.6),rgba(140,90,220,.65)); }
html[data-theme="light"] .wx-label { color: rgba(60,80,130,.68); }
html[data-theme="light"] .wx-icons button { color: rgba(40,55,90,.85); }
html[data-theme="light"] .toast { background: rgba(255,255,255,.74); border-color: rgba(40,70,130,.16); color: rgba(40,55,90,.85); }