/* Mobile-specific focus adjustments: remove default focus rings/tap highlights in ZG UI on touch devices */
@media (hover: none) and (pointer: coarse) {
  .zg-ui * { -webkit-tap-highlight-color: transparent; }
  .zg-ui button:focus,
  .zg-ui [role="button"]:focus,
  .zg-ui a:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  .zg-ui button:focus-visible,
  .zg-ui a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
}

/* Local font faces */
@font-face {
  font-family: 'Victor Mono';
  src: url('/assets/Victor_Mono/VictorMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Victor Mono';
  src: url('/assets/Victor_Mono/VictorMono-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Special Gothic Condensed One';
  src: url('/assets/Special_Gothic_Condensed_One/SpecialGothicCondensedOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Keep visible focus for keyboard users on non-touch devices */
@media (hover: hover) and (pointer: fine) {
  .zg-ui :focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent, #ff8a00) 70%, transparent);
    outline-offset: 2px;
  }
}
/* site.css - clean portfolio layout with subtle ASCII background */
/* THEME TOKENS */
:root {
  /* base dark (default) */
  --mode:dark;
  --bg:#0d0d0d; --bg-alt:#3a3b3b; --bg-soft:#3c3e3f;
  --text:#e6e6e6; --text-dim:#9aa2a0; --text-invert:#060607;
  --border:#1d2021; --border-strong:#2b3031;
  /* accent default (amber / gold) */
  --accent:#ffb347; --accent-rgb:255,179,71; --accent-glow:255,179,71;
  --focus-ring:0 0 0 2px #000,0 0 0 4px rgba(var(--accent-rgb),.55);
  --shadow-elev:0 4px 18px -6px rgba(0,0,0,.65);
  --radius:10px; --transition:.25s cubic-bezier(.4,.2,.2,1); --max-width:1180px;
  --mono:'Victor Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --ascii-opacity:0.90; --ascii-opacity-hover:1.00; --ascii-blur:0px; --grid-gap:1.2rem; --ascii-fg:var(--accent);
  /* Glow stacks (base / bright / ultra / perf-low clamp) */
  --ascii-glow-stack-base:
    0 0 2px rgba(var(--accent-rgb),0.45),
    0 0 4px rgba(var(--accent-rgb),0.45),
    0 0 7px rgba(var(--accent-rgb),0.42),
    0 0 12px rgba(var(--accent-rgb),0.26),
    0 0 22px rgba(var(--accent-rgb),0.24),
    0 0 38px rgba(var(--accent-rgb),0.14);
  --ascii-glow-stack-bright:
    0 0 2px rgba(var(--accent-rgb),0.70),
    0 0 6px rgba(var(--accent-rgb),0.66),
    0 0 12px rgba(var(--accent-rgb),0.54),
    0 0 26px rgba(var(--accent-rgb),0.40),
    0 0 44px rgba(var(--accent-rgb),0.28),
    0 0 70px rgba(var(--accent-rgb),0.18);
  --ascii-glow-stack-ultra:
    0 0 4px rgba(var(--accent-rgb),0.92),
    0 0 10px rgba(var(--accent-rgb),0.86),
    0 0 22px rgba(var(--accent-rgb),0.72),
    0 0 46px rgba(var(--accent-rgb),0.56),
    0 0 80px rgba(var(--accent-rgb),0.40),
    0 0 120px rgba(var(--accent-rgb),0.26);
  --ascii-glow-stack-perf-low:
    0 0 3px rgba(var(--accent-rgb),0.60),
    0 0 10px rgba(var(--accent-rgb),0.45),
    0 0 22px rgba(var(--accent-rgb),0.32);
  --ascii-glow-filter-base:brightness(1.14) saturate(1.35);
  --ascii-glow-filter-bright:brightness(1.26) saturate(1.50);
  --ascii-glow-filter-ultra:brightness(1.42) saturate(1.70);
  --ascii-glow-filter-perf-low:brightness(1.12) saturate(1.25);
  /* contrast tokens */
  --panel-bg:#050607ee; --panel-border:#1f2123; --panel-row:#0c0f12; --panel-row-alt:#111416; --panel-row-hover:#182027; --panel-accent-bg:rgba(var(--accent-rgb),0.14);
  --palette-overlay-alpha:0.48; --palette-overlay-fade:0.0; /* adjust alpha to lighten/darken; fade is end stop */
}

/* Light mode overrides */
[data-color-mode="light"] {
  --mode:light;
  --bg:#ebe9e7; --bg-alt:#e4e2df; --bg-soft:#ddd9d6;
  --text:#151718; --text-dim:#4b5154; --text-invert:#ffffff;
  --border:#cfcac6; --border-strong:#bfb9b4;
  --ascii-opacity:0.85; --ascii-opacity-hover:0.95;
  --shadow-elev:0 4px 18px -6px rgba(0,0,0,.16);
}

/* Canonical accent variants (consolidated): orange (HDR neon orange), gold (HDR gold), green (HDR neon green), frost (HDR white), plain (no glow) */
[data-accent="gold"] { --accent:#ffb347; --accent-rgb:255,179,71; --accent-glow:255,190,104; }
[data-accent="orange"] { --accent:#ff3a00; --accent-rgb:255,58,0; --accent-glow:255,100,34; }
[data-accent="green"] { --accent:#3dff94; --accent-rgb:61,255,148; --accent-glow:61,255,168; }
[data-accent="frost"] { --accent:#f4f7fb; --accent-rgb:244,247,251; --accent-glow:255,255,255; }
[data-accent="black"] { --accent:#000000; --accent-rgb:0,0,0; --accent-glow:255,255,255; }
[data-accent="plain"] { --accent:#999; --accent-rgb:153,153,153; --accent-glow:153,153,153; }
/* New HDR magenta accent */
[data-accent="magenta"] { --accent:#ff2fbf; --accent-rgb:255,47,191; --accent-glow:255,90,210; }
[data-accent="magenta"] #ascii-stage pre#ascii { color:#ff4fc8; text-shadow:
  0 0 3px rgba(255,70,205,0.80),
  0 0 8px rgba(255,70,205,0.62),
  0 0 18px rgba(255,60,195,0.48),
  0 0 36px rgba(255,54,188,0.36),
  0 0 74px rgba(255,68,202,0.26),
  0 0 130px rgba(255,90,215,0.18); filter:brightness(1.20) saturate(1.55); }
[data-accent="magenta"].ascii-bright #ascii-stage pre#ascii { text-shadow:
  0 0 3px rgba(255,80,210,0.90),
  0 0 10px rgba(255,76,208,0.72),
  0 0 22px rgba(255,68,200,0.56),
  0 0 44px rgba(255,62,194,0.44),
  0 0 92px rgba(255,78,206,0.32),
  0 0 160px rgba(255,96,218,0.24); filter:brightness(1.28) saturate(1.65); }
[data-accent="magenta"].ascii-ultra #ascii-stage pre#ascii { text-shadow:
  0 0 4px rgba(255,84,214,0.95),
  0 0 12px rgba(255,80,212,0.82),
  0 0 26px rgba(255,72,204,0.65),
  0 0 54px rgba(255,66,198,0.50),
  0 0 110px rgba(255,84,214,0.38),
  0 0 185px rgba(255,104,224,0.28); filter:brightness(1.34) saturate(1.75); }
[data-accent="magenta"].perf-q-low #ascii-stage pre#ascii { text-shadow:
  0 0 3px rgba(255,70,205,0.75),
  0 0 12px rgba(255,60,195,0.45); filter:brightness(1.12) saturate(1.35); }

/* Gold: push toward richer amber instead of pale yellow */
[data-accent="gold"] #ascii-stage pre#ascii { color:#ffaf2f; text-shadow:
  0 0 3px rgba(255,165,40,0.75),
  0 0 8px rgba(255,160,36,0.60),
  0 0 18px rgba(255,150,28,0.46),
  0 0 36px rgba(255,142,22,0.34),
  0 0 74px rgba(255,158,34,0.24),
  0 0 130px rgba(255,182,70,0.18); }
[data-accent="gold"].ascii-bright #ascii-stage pre#ascii { text-shadow:
  0 0 3px rgba(255,172,52,0.88),
  0 0 10px rgba(255,168,48,0.72),
  0 0 22px rgba(255,158,40,0.56),
  0 0 44px rgba(255,150,34,0.42),
  0 0 92px rgba(255,165,45,0.30),
  0 0 160px rgba(255,190,78,0.22); }
[data-accent="gold"].ascii-ultra #ascii-stage pre#ascii { text-shadow:
  0 0 4px rgba(255,176,60,0.95),
  0 0 12px rgba(255,172,56,0.80),
  0 0 26px rgba(255,162,48,0.62),
  0 0 54px rgba(255,154,42,0.50),
  0 0 110px rgba(255,170,55,0.38),
  0 0 185px rgba(255,196,88,0.26); }
[data-accent="gold"].perf-q-low #ascii-stage pre#ascii { text-shadow:
  0 0 3px rgba(255,172,52,0.75),
  0 0 12px rgba(255,160,40,0.45); }

/* HDR Neon Orange: lean into saturated red-orange distinct from gold */
[data-accent="orange"] #ascii-stage pre#ascii { color:#ff4a12; text-shadow:
  0 0 3px rgba(255,88,32,0.85),
  0 0 8px rgba(255,76,22,0.68),
  0 0 18px rgba(255,68,14,0.52),
  0 0 38px rgba(255,60,8,0.40),
  0 0 78px rgba(255,72,16,0.30),
  0 0 140px rgba(255,98,38,0.22); filter:brightness(1.18) saturate(1.55); }
[data-accent="orange"].ascii-bright #ascii-stage pre#ascii { text-shadow:
  0 0 3px rgba(255,94,40,0.95),
  0 0 10px rgba(255,86,32,0.78),
  0 0 22px rgba(255,78,26,0.60),
  0 0 44px rgba(255,70,20,0.48),
  0 0 92px rgba(255,84,30,0.36),
  0 0 160px rgba(255,110,52,0.26); filter:brightness(1.26) saturate(1.65); }
[data-accent="orange"].ascii-ultra #ascii-stage pre#ascii { text-shadow:
  0 0 4px rgba(255,98,46,0.96),
  0 0 12px rgba(255,92,40,0.84),
  0 0 26px rgba(255,84,34,0.66),
  0 0 54px rgba(255,74,26,0.52),
  0 0 110px rgba(255,92,40,0.40),
  0 0 185px rgba(255,118,60,0.28); filter:brightness(1.34) saturate(1.75); }
[data-accent="orange"].perf-q-low #ascii-stage pre#ascii { text-shadow:
  0 0 3px rgba(255,88,32,0.78),
  0 0 12px rgba(255,72,20,0.48); filter:brightness(1.12) saturate(1.38); }

/* Light-mode tuning for HDR orange to keep contrast against pale base */
[data-color-mode="light"][data-accent="orange"] { --accent:#b54000; --accent-rgb:181,64,0; --accent-glow:221,112,36; }
[data-color-mode="light"][data-accent="orange"] #ascii-stage pre#ascii { color:#c24600; text-shadow:
  0 0 2px rgba(207,80,14,0.65),
  0 0 6px rgba(204,78,13,0.46),
  0 0 14px rgba(204,74,12,0.34),
  0 0 28px rgba(204,70,10,0.24),
  0 0 52px rgba(210,86,22,0.18),
  0 0 88px rgba(216,104,32,0.14);
  filter:brightness(1.08) saturate(1.32);
}
[data-color-mode="light"][data-accent="orange"].ascii-bright #ascii-stage pre#ascii { text-shadow:
  0 0 3px rgba(212,84,16,0.78),
  0 0 10px rgba(210,82,16,0.58),
  0 0 22px rgba(210,78,15,0.42),
  0 0 46px rgba(210,74,13,0.30),
  0 0 92px rgba(216,90,24,0.22),
  0 0 150px rgba(222,110,36,0.18);
  filter:brightness(1.14) saturate(1.42);
}
[data-color-mode="light"][data-accent="orange"].ascii-ultra #ascii-stage pre#ascii { text-shadow:
  0 0 4px rgba(216,86,18,0.86),
  0 0 12px rgba(214,84,18,0.68),
  0 0 26px rgba(214,80,16,0.50),
  0 0 54px rgba(214,76,15,0.36),
  0 0 110px rgba(220,94,26,0.26),
  0 0 185px rgba(228,116,40,0.20);
  filter:brightness(1.20) saturate(1.52);
}
[data-color-mode="light"][data-accent="orange"].perf-q-low #ascii-stage pre#ascii { text-shadow:
  0 0 3px rgba(207,80,14,0.60),
  0 0 12px rgba(210,88,20,0.34);
  filter:brightness(1.05) saturate(1.22);
}

/* Removed standalone 'neon' accent: merged into enhanced orange styling below */

/* Accessibility note: orange & gold already tuned for light mode; no separate neon variant */
* { box-sizing:border-box; }
/* Fluid root font-size for better scaling across viewports */
html { font-size: clamp(15px, 1.6vw + 10px, 18px); }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased; transition:background .6s, color .6s; }
body { min-height:100dvh; overflow-x:hidden; user-select: none; -webkit-user-select: none; }
/* Allow text selection in content regions */
.console-output, .proj-window iframe, .proj-window .pw-body, .pw-fallback, .block, p, h1, h2, h3, pre, code { user-select: text; -webkit-user-select: text; }
/* Scroll lock when sheets/modals open on mobile */
body.scroll-locked { overflow:hidden; height:100dvh; touch-action:none; }
/* Console Launcher */
#console-launcher { position:fixed; top:.9rem; left:calc(1rem + 165px); z-index:60; display:flex; align-items:center; width:280px; background:#0b0d0f; border:1px solid #1e2224; border-radius:14px; padding:.4rem .7rem; box-shadow:0 4px 14px -6px #000; transition:width .35s ease, background .4s; }
body.console-active #console-launcher { opacity:0; pointer-events:none; }
#console-launcher-input { flex:1; background:transparent; border:0; outline:none; font:600 .72rem var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); caret-color:var(--accent); }
#console-launcher-input::placeholder { color:var(--text-dim); letter-spacing:.12em; }
@media (max-width:680px){ #console-launcher { left:1rem; width:220px; } }

/* Modal expansion context adjustments */
body.console-active #console-window { animation:consolePop .35s ease; }
@keyframes consolePop { 0%{ transform:translateY(-6px) scale(.98); opacity:0; } 100%{ transform:translateY(0) scale(1); opacity:1; } }

/* Remove global ascii-wrapper styles; hero-specific handled inline */
#ascii-wrapper { filter:none; }
#ascii-wrapper pre#ascii { opacity:var(--ascii-opacity); transition:opacity .6s ease, filter .6s ease; filter:blur(var(--ascii-blur)); line-height:1; }
body[data-state="ready"] #ascii-wrapper:hover pre#ascii { opacity:var(--ascii-opacity-hover); }

/* HERO TEXT (single column now) */
.hero-split { position:relative; display:block; width:100%; max-width:var(--max-width); margin:0 auto; padding:clamp(1.2rem,3vw,2rem) clamp(1rem,5vw,3rem) 3.5rem; }
.hero-split .hero-text { position:relative; z-index:10; max-width:clamp(340px,48vw,640px); }
.hero-split h1 { margin:0 0 1rem; font-size:clamp(3rem,7.2vw,5.2rem); line-height:1.02; letter-spacing:.01em; font-weight:700; }
.hero-split p.lead { margin:0 0 1.6rem; font-size:clamp(1rem,1.6vw,1.25rem); line-height:1.5; color:var(--text-dim); max-width:62ch; }

/* FIXED ASCII STAGE */
/* CSS variable for dynamic header height (set via JS) */
:root { --header-height: 64px; --footer-height: 2.5rem; }
#ascii-stage { 
  position: fixed; 
  top: var(--header-height, 64px); 
  left: 0; 
  right: 0; 
  bottom: var(--footer-height, 2.5rem); 
  width: 100%; 
  height: calc(100dvh - var(--header-height, 64px) - var(--footer-height, 2.5rem));
  z-index: 0; 
  overflow: hidden; 
  pointer-events: none; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 0;
}
/* Inner full height container anchored center both axes */
#ascii-stage-inner { 
  position: relative; 
  flex: 1 1 auto; 
  width: 100%; 
  min-width: 100%; 
  height: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin: 0; 
}
/* Ensure ASCII stays visible in light mode */
body[data-color-mode="light"] #ascii-stage { mix-blend-mode:normal; opacity:1; }
#ascii-stage #ascii-wrapper { position:absolute; inset:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
#ascii-stage pre#ascii { opacity:var(--ascii-opacity); font-weight:400; color:var(--ascii-fg); text-shadow:none !important; filter:none !important; transition:opacity .6s ease, text-shadow 1s ease, filter 1s ease, color .6s ease; will-change:contents,filter,opacity; font-family:var(--mono); font-variant-ligatures:none; -webkit-font-smoothing:antialiased; max-width:none; }
/* Remove default pre spacing and ensure it can overflow container if needed */
#ascii-stage pre#ascii { margin:0; padding:0; }
/* Global glow kill switches (manual or while typing) */
body.glow-off #ascii-stage pre#ascii,
body.glow-off-typing #ascii-stage pre#ascii { text-shadow:none !important; filter:none !important; }
/* Inline command results now flow inside header; keep visual chips */
.command-results { display:none; align-items:center; gap:.35rem; flex-wrap:wrap; font:600 .55rem var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.command-results .result-line { background:#090b0c; border:1px solid #141618; padding:.35rem .5rem; border-radius:6px; color:var(--accent); box-shadow:0 2px 4px -2px #000; }
.command-results .result-line:nth-child(even){ background:#0d1012; }
.command-results .result-line:hover { background:#101417; }
/* Content modal tweaks */
#console-window.content-modal { top:5.2rem; left:1rem; right:auto; width:60%; max-width:840px; opacity:0; pointer-events:none; }
body.console-active #console-window.content-modal[data-state="expanded"] { opacity:1; pointer-events:auto; }
/* Safety: ensure hidden attribute always enforces invisibility */
#console-window[hidden] { display:none !important; }
@media (max-width:880px){ #console-window.content-modal { width:86%; } }
body[data-state="ready"] #ascii-stage:hover pre#ascii { opacity:var(--ascii-opacity-hover); }

/* Brightness tiers */
body.ascii-bright #ascii-stage pre#ascii { opacity:0.88; text-shadow:none !important; filter:none !important; }
body.ascii-ultra #ascii-stage pre#ascii { opacity:1.00; text-shadow:none !important; filter:none !important; }
/* Performance safeguard for bright / ultra under low perf */
body.perf-q-low.ascii-ultra #ascii-stage pre#ascii,
body.perf-q-low.ascii-bright #ascii-stage pre#ascii { opacity:calc(var(--ascii-opacity)*1.1); text-shadow:var(--ascii-glow-stack-perf-low); filter:var(--ascii-glow-filter-perf-low); }

/* Performance quality tiers (default high) */
/* Performance tiers only affect base brightness state */
body.perf-q-high:not(.ascii-bright):not(.ascii-ultra) #ascii-stage pre#ascii { text-shadow:none !important; filter:none !important; }
body.perf-q-med:not(.ascii-bright):not(.ascii-ultra) #ascii-stage pre#ascii { text-shadow:none !important; filter:none !important; }
body.perf-q-low:not(.ascii-bright):not(.ascii-ultra) #ascii-stage pre#ascii { text-shadow:none !important; filter:none !important; }
/* Remove dynamic blend modes to keep consistent appearance */
body.perf-q-low #ascii-stage,
body.perf-q-med #ascii-stage,
body.perf-q-high #ascii-stage { mix-blend-mode:normal !important; }

/* Kill expensive shadows entirely on lowest tier for maximal FPS */
body.perf-q-low #ascii-stage pre#ascii { text-shadow:none !important; filter:none !important; }

/* Clamp bright/ultra even on medium perf to simpler glow */
body.perf-q-med.ascii-bright #ascii-stage pre#ascii,
body.perf-q-med.ascii-ultra #ascii-stage pre#ascii { text-shadow:var(--ascii-glow-stack-perf-low) !important; filter:var(--ascii-glow-filter-perf-low) !important; opacity:calc(var(--ascii-opacity)*1.15); }
/* On low perf, disable heavy glow entirely for max FPS */
body.perf-q-low #ascii-stage pre#ascii { text-shadow:none !important; filter:none !important; }

/* Ensure glow kill switches still win over accent-specific overrides */
body.glow-off [data-accent] #ascii-stage pre#ascii,
body.glow-off-typing [data-accent] #ascii-stage pre#ascii { text-shadow:none !important; filter:none !important; }

/* Larger scaling multiplier (font-size handled via autoScale; add boost) */
/* Stage layout variants: always keep everything centered (vertical-only scaling) */
body.stage-right #ascii-stage,
body.stage-right #ascii-stage-inner,
body.stage-right #ascii-stage #ascii-wrapper { 
  justify-content: center !important; /* Force center for vertical-only scaling */
  align-items: center !important;
}
body.stage-right #ascii-stage pre#ascii { transform:none; transform-origin:center center; }
/* Keep previous centering fallback below 880px */

/* At truly small viewports: center, lower opacity for legibility behind content */
@media (max-width:880px){
  #ascii-stage,
  #ascii-stage-inner { justify-content:center; }
  body.has-ascii-stage.stage-right #ascii-stage pre#ascii { transform:translateX(0); }
}

/* Layout variants - all keep everything centered with vertical-only scaling */
body.stage-center #ascii-stage,
body.stage-center #ascii-stage-inner,
body.stage-center #ascii-stage #ascii-wrapper { 
  justify-content: center !important; 
  align-items: center !important;
  padding: 0; 
}
body.stage-center #ascii-stage pre#ascii { transform:translateX(0); transform-origin:center center; }
body.stage-left #ascii-stage,
body.stage-left #ascii-stage-inner,
body.stage-left #ascii-stage #ascii-wrapper { 
  justify-content: center !important; 
  align-items: center !important;
  padding: 0; 
}
body.stage-left #ascii-stage pre#ascii { transform:translateX(0); transform-origin:center center; }
/* Debug helpers */
body.debug-ascii #ascii-stage { outline:1px solid rgba(var(--accent-rgb),.6); }
body[data-ascii-visible="force"] #ascii-stage pre#ascii { opacity:0.6 !important; }
body[data-ascii-state="missing"] #ascii-stage::after { content:"(ascii load issue)"; position:absolute; top:8px; left:8px; font:600 .6rem var(--mono); color:#f55; background:#000a; padding:.25rem .4rem; border:1px solid #400; border-radius:4px; }
@media (max-width:640px){ .hero-split { padding-top:2rem; } .hero-split h1 { font-size:clamp(2.2rem,9.5vw,3.4rem);} }


/* Layout */
.site-shell { position:relative; z-index:10; display:flex; flex-direction:column; min-height:100dvh; }
.site-header {
  padding:1rem clamp(.9rem,4vw,2rem);
  display:flex;
  align-items:center;
  gap:2rem;
  position:sticky;
  top:0;
  z-index:90;
  background:transparent;
  border-bottom:none;
}
body[data-color-mode="light"] .site-header {
  background:transparent;
  border-bottom:none;
}
/* Shared inline command layout */
:root { --command-bar-h: 64px; }
.is-mobile .inline-command { flex:1; min-width:0; }

/* Ensure suggestions sheet sits above the bottom bar */
/* handled in main sheet block below */
.brand { font-size:1.15rem; font-weight:600; letter-spacing:.04em; font-family:var(--mono); }
/* Inline command input (seamless, no borders) */
input.cmd-inline { background:transparent !important; border:none !important; outline:none !important; color:var(--text); font:600 1.15rem var(--mono); letter-spacing:.04em; width:100%; padding:.05rem .2rem .1rem; border-radius:0; caret-color:transparent; box-shadow:none !important; /* hide native caret (we draw custom) */ }
/* Larger tap target on mobile */
.is-mobile input.cmd-inline { font-size:1.125rem; padding:.25rem .25rem; }
input.cmd-inline:focus { outline:none !important; box-shadow:none !important; border:none !important; }
input.cmd-inline:focus-visible { outline:none !important; box-shadow:none !important; border:none !important; }
input.cmd-inline::placeholder { color:var(--text-dim); opacity:.28; text-transform:lowercase; }
/* When placeholder is removed, ensure min inline width still feels interactive */
input.cmd-inline { min-width:12ch; }
/* Mobile-specific: ensure input container is flexible */
@media (max-width: 680px) {
  .inline-command { min-width: 0 !important; max-width: 100%; }
}
/* Custom caret system */
.cmd-measure, .cmd-caret { position:absolute; top:50%; transform:translateY(-50%); left:.25rem; font:600 1.15rem var(--mono); letter-spacing:.04em; white-space:pre; pointer-events:none; }
.cmd-measure { visibility:hidden; }
.cmd-caret { color:var(--accent); display:none; animation:cmdCaretBlink 1.08s steps(1,end) infinite; mix-blend-mode:plus-lighter; }
@keyframes cmdCaretBlink { 0%,58% { opacity:1; } 60%,100% { opacity:0; } }
/* Show custom caret when focused */
input.cmd-inline:focus ~ .cmd-caret { display:block; }

@keyframes blink-caret { 0%,55% { opacity:1; } 56%,100% { opacity:.15; } }
nav.primary { margin-left:auto; display:flex; gap:1.2rem; }
nav.primary a { text-decoration:none; font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim); font-weight:600; position:relative; }
nav.primary a:hover, nav.primary a:focus-visible { color:var(--text); }
nav.primary a.active::after { content:''; position:absolute; left:0; bottom:-6px; width:100%; height:2px; background:var(--accent); border-radius:2px; }

.hero { padding:2.5rem clamp(1rem,5vw,3rem) 1.5rem; max-width:var(--max-width); width:100%; margin:0 auto; }
.hero h1 { margin:0 0 .85rem; font-size:clamp(2.4rem,7vw,4.2rem); line-height:1.05; letter-spacing:.02em; font-weight:700; }
.hero p.lead { margin:0 0 2rem; font-size:clamp(1rem,1.9vw,1.25rem); line-height:1.35; max-width:62ch; color:var(--text-dim); }

/* Optional fluid text utilities (site-wide) */
.text-fluid-sm { font-size: clamp(.9rem, .6rem + .8vw, 1.05rem); line-height: 1.35; }
.text-fluid-lg { font-size: clamp(1.3rem, 1rem + 1.8vw, 2rem); line-height: 1.15; }

.actions { display:flex; gap:.9rem; flex-wrap:wrap; }
.actions a.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.15rem; border-radius:var(--radius); text-decoration:none; font:600 .82rem var(--sans); text-transform:uppercase; letter-spacing:.12em; background:linear-gradient(135deg,rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),.05)); color:var(--accent); border:1px solid rgba(var(--accent-rgb),.35); box-shadow:0 2px 4px -2px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--accent-rgb),.15) inset; }
.actions a.btn:hover { background:linear-gradient(135deg,rgba(var(--accent-rgb),.28),rgba(var(--accent-rgb),.08)); }
.actions a.btn.secondary { background:#181818; color:var(--text); border:1px solid #222; }
.actions a.btn.secondary:hover { background:#202020; }

.section { padding:1.5rem clamp(1rem,5vw,3rem) 3rem; width:100%; max-width:var(--max-width); margin:0 auto; }
.section h2 { margin:0 0 1.25rem; font-size:1.55rem; letter-spacing:.02em; font-weight:600; }

.grid-projects { display:grid; gap:var(--grid-gap); grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); }
.project { position:relative; background:var(--bg-alt); border:1px solid var(--border); padding:1rem .95rem 1.15rem; border-radius:12px; display:flex; flex-direction:column; gap:.75rem; overflow:hidden; isolation:isolate; transition:background .4s,border-color .4s; }
.project::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 40% 35%, rgba(var(--accent-rgb),.12), transparent 70%); opacity:0; transition:opacity var(--transition); pointer-events:none; }
.project:hover::before { opacity:1; }
.project h3 { margin:0; font-size:1rem; font-weight:600; letter-spacing:.04em; font-family:var(--mono); color:var(--text); }
.project p { margin:0; font-size:.75rem; line-height:1.35; color:var(--text-dim); }
.tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:auto; }
.tags span { font-size:.62rem; padding:.25rem .45rem; background:#1d1d1d; border:1px solid #262626; border-radius:4px; letter-spacing:.08em; font-family:var(--mono); color:#b8b8b8; transition:background .4s,border-color .4s,color .4s; }
body[data-color-mode="light"] .tags span { background:#e2e6e8; border-color:#c9d0d3; color:#00b8fb; }
.project a.more { margin-top:.6rem; font-size:.63rem; text-transform:uppercase; letter-spacing:.15em; text-decoration:none; color:var(--accent); font-weight:600; }
.project a.more:hover { text-decoration:underline; }

.footer { margin-top:auto; padding:2.5rem 1rem 2.5rem; text-align:center; font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim); }
.footer a { color:var(--accent); text-decoration:none; }
.footer a:hover { text-decoration:underline; }


/* ===== Unified Console Window ===== */
#console-window { position:fixed; left:1rem; bottom:0.85rem; width:50%; max-width:720px; min-width:340px;
  background:linear-gradient( to bottom right, rgba(10,12,14,0.48), rgba(10,12,14,0.30) );
  border:1px solid rgba(255,255,255,0.05);
  border-radius:1px; z-index:80; display:flex; flex-direction:column;
  box-shadow: 0 10px 40px -14px rgba(0,0,0,0.7), 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 0 0 1px rgba(0,0,0,0.55);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  font-family:var(--mono); transition:box-shadow .35s, background .4s, border-color .4s, backdrop-filter .35s; resize:both; overflow:hidden; min-height:220px; }
body.console-size-small #console-window { width:36%; max-width:540px; }
body.console-size-medium #console-window { width:50%; max-width:720px; }
body.console-size-wide #console-window { width:64%; max-width:880px; }
body.console-size-full #console-window { left:0.75rem; right:0.75rem; width:auto; max-width:none; }
#console-window.collapsed #console-body { display:none; }
#console-window.collapsed { backdrop-filter:blur(0); }
.console-header { display:flex; align-items:center; gap:.65rem; padding:.55rem .75rem; background:linear-gradient(180deg, rgba(255,255,255,0.048), rgba(255,255,255,0.016)); border-bottom:1px solid rgba(255,255,255,0.05); cursor:grab; user-select:none; font:600 .62rem var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--accent); border-top-left-radius:1px; border-top-right-radius:1px; }
.console-header:active { cursor:grabbing; }
.console-header .drag-handle { font-weight:600; opacity:.8; }
.console-title { flex:1; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; color:var(--accent); }
.console-actions button { background:transparent; border:0; color:var(--text-dim); font:600 .8rem var(--mono); width:28px; height:28px; padding:0; border-radius:4px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.console-actions button:hover { color:var(--text); background:transparent; }
.console-actions button:active { transform:scale(0.96); }
.console-actions button:focus-visible { outline:none; box-shadow:var(--focus-ring); }
/* Light-mode close button styling */
[data-color-mode="light"] .console-actions button { background:transparent; border:none; color:#6a7176; box-shadow:none; }
[data-color-mode="light"] .console-actions button:hover { background:transparent; color:#1f2326; }
.console-body { display:flex; flex-direction:column; flex:1 1 auto; min-height:240px; height:auto; }
.console-output { flex:1; overflow:auto; max-height:calc(100vh - 12rem); padding:.75rem .85rem 1rem; font:.7rem/1.45 var(--mono); color:var(--text); }
.console-output h1,.console-output h2 { font:600 .85rem var(--mono); margin:0 0 .8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); position:relative; }
.console-output h1::before,.console-output h2::before { content:""; position:absolute; left:-.55rem; top:50%; width:3px; height:60%; background:var(--accent); border-radius:2px; transform:translateY(-50%); }
.console-output p { margin:.25rem 0 .85rem; color:var(--text-dim); }
.console-output ul.list { list-style:none; margin:.2rem 0 1rem; padding:0; }
.console-output ul.list li { margin:0 0 .45rem; }
.console-output a { color:var(--accent); text-decoration:none; }
.console-output a:hover { text-decoration:underline; }
.console-output img.md-img { display:inline-block; max-width:140px; width:auto; height:auto; border-radius:8px; border:1px solid var(--border); margin:.15rem .6rem .35rem 0; vertical-align:middle; }
.console-input-row { display:flex; align-items:center; gap:.45rem; padding:.4rem .6rem .55rem; border-top:1px solid rgba(255,255,255,0.05); background:linear-gradient(180deg, rgba(255,255,255,0.016), rgba(255,255,255,0.008)); }
.console-input-row .prompt-label { color:var(--accent); font:600 .75rem var(--mono); }
#console-input { flex:1; background:transparent; border:0; outline:0; font:600 .8rem var(--mono); color:var(--text); caret-color:var(--accent); }
#console-input::placeholder { color:var(--text-dim); }
/* Command suggestions dropdown - default styling for desktop (>700px) */
/* =====================================================
   COMMAND SUGGESTIONS DROPDOWN
   Single-column stacked layout across ALL viewports
   ===================================================== */
.console-suggestions { 
  margin: 0; 
  padding: .35rem 0 .55rem; 
  list-style: none; 
  font-family: var(--mono);
  background: linear-gradient(to bottom right, rgba(10,12,14,0.50), rgba(10,12,14,0.32));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 2px;
  box-shadow: 0 12px 40px -14px rgba(0,0,0,0.8), 0 1px 0 0 rgba(255,255,255,0.05) inset;
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  position: absolute;
  top: 100%;
  margin-top: 0.75rem;
  left: -0.25rem;
  z-index: 60;
  min-width: 400px;
  max-width: 540px;
  width: auto;
  max-height: 70vh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

/* Hide scrollbar for Chrome/Safari/Opera */
.console-suggestions::-webkit-scrollbar {
  display: none;
}

/* Single-column stacked layout for ALL list items */
.console-suggestions li { 
  padding: .75rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  cursor: pointer; 
  background: transparent; 
  border: 0; 
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
  transition: background 0.15s ease, transform 0.1s ease;
  overflow: hidden;
  max-width: 100%;
}

.console-suggestions li + li { 
  border-top: 1px solid rgba(255,255,255,0.04);
}

.console-suggestions li .cmd-name { 
  font-size: .84rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .06em;
  line-height: 1.35;
  transition: color 0.15s ease;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  max-width: 100%;
}

.console-suggestions li .cmd-desc { 
  font-size: .71rem;
  font-weight: 400;
  color: var(--text-dim);
  opacity: .88;
  line-height: 1.5;
  letter-spacing: .015em;
  transition: opacity 0.15s ease;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  max-width: 100%;
}

.console-suggestions li:hover,
.console-suggestions li[aria-selected="true"] { 
  background: rgba(var(--accent-rgb), 0.09);
  transform: translateX(2px);
}

.console-suggestions li:hover .cmd-name,
.console-suggestions li[aria-selected="true"] .cmd-name {
  color: var(--accent);
}

.console-suggestions li:hover .cmd-desc,
.console-suggestions li[aria-selected="true"] .cmd-desc {
  opacity: 1;
  color: var(--text);
}

/* Flip above input if needed (when near bottom of viewport) */
.console-suggestions.drop-up { 
  top: auto !important; 
  bottom: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0.8rem !important;
}

/* Narrow viewports: center and fill width */
@media (max-width: 700px) {
  .console-suggestions {
    left: 50%;
    transform: translateX(-50%);
    min-width: calc(100vw - 2rem);
    max-width: calc(100vw - 2rem);
    width: calc(100vw - 2rem);
    padding: .4rem 0 .6rem;
  }
  
  .console-suggestions li {
    padding: .8rem 1rem;
    text-align: left;
  }
  
  .console-suggestions li:hover,
  .console-suggestions li[aria-selected="true"] {
    transform: translateX(0);
  }
  
  .console-suggestions li .cmd-name {
    font-size: .86rem;
    text-align: left;
  }
  
  .console-suggestions li .cmd-desc {
    font-size: .72rem;
    text-align: left;
  }
}
.console-hint { padding:.35rem .65rem .55rem; font:400 mvar(--palette-overlay-fade) var(--mono); text-transform:uppercase; letter-spacing:.18em; color:var(--text-dim); background:#060708f2; border-top:1px solid #151718; }

/* Bottom sheet presentation for suggestions on mobile */
.is-mobile .inline-command { align-items:stretch; }
.is-mobile .console-suggestions.sheet {
  position:fixed !important;
  left:0 !important; 
  right:0 !important; 
  top:calc(var(--command-bar-h, 64px) + env(safe-area-inset-top));
  bottom:auto !important;
  min-width:0 !important; 
  max-width:none !important;
  width:100vw !important;
  /* Fallback for browsers without dvh */
  max-height:calc(72vh - env(safe-area-inset-bottom) - var(--command-bar-h, 64px) - env(safe-area-inset-top));
  /* Override with dvh where supported */
  max-height:calc(72dvh - env(safe-area-inset-bottom) - var(--command-bar-h, 64px) - env(safe-area-inset-top));
  overflow:auto;
  border-radius:16px 16px 0 0;
  padding-top:.3rem;
  padding-left: max(1rem, env(safe-area-inset-left)) !important;
  padding-right: max(1rem, env(safe-area-inset-right)) !important;
  z-index:130 !important; /* above overlay (40), bottom bar (85), and floating windows (120) */
  margin:0 !important; /* defeat inline styles */
  margin-left:0 !important;
  margin-right:0 !important;
  overscroll-behavior:contain;
  transform: none !important; /* Override any translateX from narrow viewport rule */
}
.is-mobile .console-suggestions.sheet { 
  -webkit-backdrop-filter: blur(12px) saturate(1.05) !important; 
  backdrop-filter: blur(12px) saturate(1.05) !important; 
  background: linear-gradient( to bottom right, rgba(10,12,14,0.70), rgba(10,12,14,0.45) ) !important; 
}
.is-mobile .console-suggestions.sheet li { padding:.8rem 1rem; font-size:.95rem; line-height:1.35; text-align:left; }
.is-mobile .console-suggestions.sheet li .cmd-name { text-align:left; }
.is-mobile .console-suggestions.sheet li .cmd-desc { text-align:left; }
.is-mobile .console-suggestions.sheet { --label-col:34vw; }

/* Global overlay for sheets/modals */
#ui-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.35); backdrop-filter:saturate(1.1) blur(2px); -webkit-backdrop-filter:saturate(1.1) blur(2px); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:40; }
#ui-overlay.visible { opacity:1; pointer-events:auto; }
.is-mobile #ui-overlay { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:rgba(0,0,0,0.18) !important; }

/* Floating project windows layer (above console) */
#proj-win-layer { position:fixed; inset:0; pointer-events:none; z-index:120; }
#proj-win-layer.has-open { pointer-events:auto; }
.proj-window { position:absolute; top:10vh; left:calc(50% - 40vw); width:80vw; max-width:1100px; height:70vh; max-height:86vh; min-width:200px; min-height:160px; display:flex; flex-direction:column; background:linear-gradient( to bottom right, rgba(10,12,14,0.48), rgba(10,12,14,0.30) ); border:1px solid rgba(255,255,255,0.05); border-radius:10px; box-shadow:0 12px 44px -16px rgba(0,0,0,0.75), 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 0 0 1px rgba(0,0,0,0.55); backdrop-filter: blur(16px) saturate(1.05); -webkit-backdrop-filter: blur(16px) saturate(1.05); pointer-events:auto; overflow:hidden; }
.proj-window .pw-header { display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; background:linear-gradient(180deg, rgba(255,255,255,0.048), rgba(255,255,255,0.016)); border-bottom:1px solid rgba(255,255,255,0.05); cursor:grab; user-select:none; font:600 .62rem var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--accent); }
.pa-sticker .pa-header { display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; background:linear-gradient(180deg, rgba(255,255,255,0.048), rgba(255,255,255,0.016)); border-bottom:1px solid rgba(255,255,255,0.05); user-select:none; font:600 .62rem var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--accent); cursor:grab; }
.proj-window .pw-actions-left { display:flex; gap:.35rem; align-items:center; }
.proj-window .pw-actions-left .pw-close,
.proj-window .pw-actions-left .pw-help { width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.12); border-radius:6px; color:var(--text-dim); background:transparent; cursor:pointer; }
.pa-sticker .pa-close { width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.12); border-radius:6px; color:var(--text-dim); background:transparent; cursor:pointer; }
.proj-window .pw-actions-left .pw-help { font-weight:700; font-family: var(--mono); }
.proj-window .pw-actions-left .pw-close:hover,
.proj-window .pw-actions-left .pw-help:hover { color:var(--text); background:rgba(255,255,255,0.05); }
.pa-sticker .pa-close:hover { color:var(--text); background:rgba(255,255,255,0.05); }
.proj-window .pw-title { flex:1; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font:inherit; color:var(--accent); }
.proj-window .pw-actions { display:flex; gap:.35rem; }
.proj-window .pw-actions a, .proj-window .pw-actions button { background:transparent; border:1px solid rgba(255,255,255,0.08); color:var(--text-dim); font:600 .72rem var(--mono); padding:.3rem .5rem; border-radius:6px; cursor:pointer; text-decoration:none; }
.proj-window .pw-actions a:hover, .proj-window .pw-actions button:hover { color:var(--text); background:rgba(255,255,255,0.04); }
.proj-window .pw-body { flex:1; display:flex; }
.proj-window iframe { flex:1; width:100%; height:100%; border:0; background:#000; }
.proj-window .pw-fallback { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem; padding:1rem; text-align:center; color:var(--text-dim); }
.proj-window .pw-fallback-thumb { max-width:60%; height:auto; border-radius:8px; border:1px solid rgba(255,255,255,0.08); }
.proj-window .pw-fallback-desc { max-width:80%; }
.proj-window .pw-fallback-link { color:var(--accent); text-decoration:none; border-bottom:1px dashed var(--accent); }
/* Dragging state */
.proj-window.dragging { opacity:0.92; transition:opacity .12s ease; }
.proj-window.dragging .pw-header { cursor:grabbing; }
.proj-window.dragging iframe { pointer-events:none; }
/* Resizing state */
.proj-window.resizing { opacity:0.95; transition:opacity .08s ease; }
.proj-window.resizing iframe { pointer-events:none; }
/* Active window indicator - subtle glow on border */
.proj-window { transition:box-shadow .2s ease, border-color .2s ease; }
.proj-window:hover { border-color:rgba(255,255,255,0.08); }
/* Active window gets enhanced border glow based on accent color */
.proj-window.active { border-color:rgba(var(--accent-rgb, 255, 100, 50), 0.3); box-shadow:0 16px 52px -18px rgba(0,0,0,0.85), 0 1px 0 0 rgba(255,255,255,0.06) inset, 0 0 0 1px rgba(var(--accent-rgb, 255, 100, 50), 0.2), 0 0 20px 0 rgba(var(--accent-rgb, 255, 100, 50), 0.12); }
.proj-window.active .pw-header { background:linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025)); border-bottom-color:rgba(var(--accent-rgb, 255, 100, 50), 0.15); }
.proj-window.mobile-full { position:fixed; left:0 !important; right:0 !important; top:calc(var(--command-bar-h, 64px) + env(safe-area-inset-top)); width:100vw !important; max-width:none; height:calc(100vh - var(--command-bar-h, 64px) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height:calc(100dvh - var(--command-bar-h, 64px) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height:none; border-radius:0; box-shadow:0 -6px 28px -16px rgba(0,0,0,0.75), 0 12px 44px -20px rgba(0,0,0,0.75); }
.proj-window.mobile-full .pw-header { cursor:default; padding:.75rem 1rem; }
.proj-window.mobile-full .pw-body { flex:1; min-height:0; }
.proj-window.mobile-full iframe { border-radius:0; }
/* Resize handles for floating windows (desktop only) */
.proj-window .resize-handle { position:absolute; z-index:3; background:transparent; }
.proj-window .resize-handle.left, .proj-window .resize-handle.right { top:0; bottom:0; width:8px; cursor:ew-resize; }
.proj-window .resize-handle.left { left:-3px; }
.proj-window .resize-handle.right { right:-3px; }
.proj-window .resize-handle.bottom { left:0; right:0; bottom:-3px; height:8px; cursor:ns-resize; }
.proj-window .resize-handle.corner { right:-4px; bottom:-4px; width:12px; height:12px; cursor:nwse-resize; }
.proj-window .resize-handle.top { left:0; right:0; top:-3px; height:8px; cursor:ns-resize; }
/* Hide resize handles on mobile */
.is-mobile .proj-window .resize-handle { display:none; }
.is-mobile #console-window .resize-handle { display:none; }
@media (max-width:880px){ .proj-window { left:4vw; width:92vw; height:64vh; top:8vh; } }

/* Console becomes bottom sheet on mobile */
.is-mobile #console-window { left:0 !important; right:0 !important; bottom:0 !important; width:auto !important; max-width:none !important; min-width:0 !important; border-radius:14px 14px 0 0; box-shadow:0 -10px 46px -16px rgba(0,0,0,0.7), 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 0 0 1px rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); }
.is-mobile #console-window .console-body { height:min(58vh, 70dvh); max-height:70dvh; }
.is-mobile #console-window .console-header { justify-content:center; position:relative; }
.is-mobile #console-window .console-header .drag-handle { position:relative; padding-top:.4rem; }
.is-mobile #console-window .console-header .drag-handle::before { content:""; position:absolute; top:-.15rem; left:50%; transform:translateX(-50%); width:36px; height:4px; border-radius:4px; background:rgba(255,255,255,0.28); }
.is-mobile body.console-active #console-window { animation:mobileSheetIn .22s ease; }
@keyframes mobileSheetIn { from{ transform:translateY(12px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

/* Safe-area padding */
.site-header { padding-top:calc(1rem + env(safe-area-inset-top)); }
.is-mobile #console-window { margin-bottom:env(safe-area-inset-bottom); }

/* Prevent accidental page panning while interacting with sheets */
.is-mobile .console-suggestions.sheet,
.is-mobile #console-window { touch-action:pan-y; }
body.proj-window-active.is-mobile { overflow:hidden; }

/* Scrollbars */
.console-output::-webkit-scrollbar, .console-suggestions::-webkit-scrollbar { width:6px; }
.console-output::-webkit-scrollbar-thumb, .console-suggestions::-webkit-scrollbar-thumb { background:linear-gradient(var(--accent),rgba(var(--accent-rgb),.3)); border-radius:8px; }

/* Light mode */
[data-color-mode="light"] #console-window { background:linear-gradient( to bottom right, rgba(255,255,255,0.66), rgba(255,255,255,0.54) ); border-color:rgba(0,0,0,0.06); box-shadow:0 10px 32px -16px rgba(0,0,0,0.18), 0 1px 0 0 rgba(255,255,255,0.65) inset, 0 0 0 1px rgba(0,0,0,0.05); }
[data-color-mode="light"] .console-header { background:linear-gradient(180deg, rgba(255,255,255,0.56), rgba(255,255,255,0.32)); border-bottom-color:rgba(0,0,0,0.06); }
[data-color-mode="light"] .console-input-row { background:linear-gradient(180deg, rgba(255,255,255,0.46), rgba(255,255,255,0.29)); border-top-color:rgba(0,0,0,0.08); }
[data-color-mode="light"] .console-output p { color:#4d5558; }
[data-color-mode="light"] .console-suggestions {
  background:linear-gradient( to bottom right, rgba(255,255,255,0.66), rgba(255,255,255,0.54) );
  border-color:rgba(0,0,0,0.06);
  border-radius:1px;
  box-shadow:0 10px 32px -16px rgba(0,0,0,0.18), 0 1px 0 0 rgba(255,255,255,0.65) inset, 0 0 0 1px rgba(0,0,0,0.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
}
[data-color-mode="light"] .console-suggestions li + li { border-top:1px solid rgba(0,0,0,0.08); }
[data-color-mode="light"] .console-hint { background:#f3f5f7; border-top-color:#e0e5ea; }

/* Mobile adjustments: constrain height only on small screens */
@media (max-width:680px){
  .console-body { height:46vh; }
}
/* On larger screens, let the modal's height be flexible for proper resizing */
@media (min-width:681px){
  .console-body { height:auto; max-height:calc(100vh - 8rem); }
}

/* Subtle visual affordance for the native resize corner */
#console-window::after {
  content:"";
  position:absolute; right:2px; bottom:2px; width:14px; height:14px;
  background:conic-gradient(from 45deg, transparent 0 75%, rgba(var(--accent-rgb),.22) 0 100%);
  pointer-events:none;
}

/* Project iframe layout: fill modal */
.project-iframe-wrap { display:flex; flex-direction:column; gap:.5rem; height:100%; }
.project-iframe-wrap .project-bar { display:flex; align-items:center; gap:.6rem; font:600 .72rem var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.project-iframe-wrap .project-bar .spacer { flex:1; }
.project-iframe-wrap .project-bar .btn-open { color:var(--accent); text-decoration:none; border:1px solid rgba(var(--accent-rgb),.35); padding:.35rem .55rem; border-radius:6px; }
.project-iframe-wrap .project-frame { flex:1; width:100%; height:100%; border:1px solid var(--border); background:#000; border-radius:4px; }

/* When in project mode, ensure the output scrolls the iframe, not the page */
body.console-active #console-window .console-output:has(.project-iframe-wrap) { padding:.6rem .7rem .8rem; overflow:hidden; }

/* High contrast mode adjustments */
body.contrast-high #console-window { background:var(--panel-bg); border-color:var(--panel-border); }
body.contrast-high .console-header { background:#090c0f; border-bottom-color:#202325; }
body.contrast-high .console-input-row { background:#090c0f; border-top-color:#202325; }
body.contrast-high .console-suggestions li { color:#c4c9cb; }
body.contrast-high .console-suggestions li[aria-selected="true"], body.contrast-high .console-suggestions li:hover { background:var(--panel-accent-bg); color:var(--text); }
body.contrast-high .console-help { background:#090c0f; border-top:1px solid #121518; }
body.contrast-high #tty-visor { background:#06080af2; border-color:#232629; }
body.contrast-high #tty-visor .visor-header { background:#090c0f; border-bottom-color:#202325; }
body.ui-flat #tty-visor .visor-scroll h1::before,
body.ui-flat #tty-visor .visor-scroll h2::before { background:var(--accent); }
body.ui-flat #cmd-palette #cp-list::-webkit-scrollbar-thumb,
body.ui-flat #tty-visor .visor-scroll::-webkit-scrollbar-thumb { background:rgba(var(--accent-rgb),0.5); }
body.ui-flat .project { background:var(--bg-alt); }
body.ui-flat .project:hover { background:var(--bg-alt); }
body.ui-flat .project h3 { text-shadow:none; }
body.ui-flat .hero-split h1, body.ui-flat .hero h1 { background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--text); }
body.ui-flat #cmd-palette .cp-help { background:#050607ea; }
body.ui-flat .tags span { background:#1f1f1f; }
body.ui-flat #cmd-palette #cp-list li { background:none; }
body.ui-flat #cmd-palette #cp-list li .cmd-key { background:#222; }
body.ui-flat #tty-visor { background:rgba(8,10,12,0.6); }
body.ui-flat #tty-visor .visor-header { background:rgba(10,12,14,0.6); }
body.ui-flat #ascii-stage pre#ascii { text-shadow:none; filter:brightness(10) saturate(1.15); }
body.ui-flat.ascii-bright #ascii-stage pre#ascii { text-shadow:none; }
body.ui-flat.ascii-ultra #ascii-stage pre#ascii { text-shadow:none; }
/* Plain accent removes glow regardless of tier */
[data-accent="plain"] { --ascii-fg:#aaa; }
[data-accent="plain"] #ascii-stage pre#ascii { text-shadow:none !important; filter:brightness(1) saturate(1) !important; }
/* Neutralize tier & perf interactions when plain */
[data-accent="plain"].ascii-bright #ascii-stage pre#ascii,
[data-accent="plain"].ascii-ultra #ascii-stage pre#ascii,
[data-accent="plain"].perf-q-low #ascii-stage pre#ascii,
[data-accent="plain"].perf-q-med #ascii-stage pre#ascii,
[data-accent="plain"].perf-q-high #ascii-stage pre#ascii { text-shadow:none !important; filter:none !important; }
/* Maintain opacity scaling for plain (no glow) */
[data-accent="plain"].ascii-bright #ascii-stage pre#ascii { opacity:calc(var(--ascii-opacity)*1.6) !important; }
[data-accent="plain"].ascii-ultra #ascii-stage pre#ascii { opacity:calc(var(--ascii-opacity)*2.2) !important; }

/* Frost accent adjustments: ensure contrast in light mode by reducing internal fill brightness but keeping halo subtle */
[data-color-mode="light"][data-accent="frost"] { --ascii-fg:#e2e7ec; }
[data-color-mode="light"][data-accent="frost"] #ascii-stage pre#ascii { filter:brightness(1.05) saturate(1.1); }

/* Light-mode legibility: use a dark accent color when accent=frost (white) so UI affordances remain visible */
[data-color-mode="light"][data-accent="frost"] {
  --accent:#151718; /* match light-mode text for maximum contrast */
  --accent-rgb:21,23,24;
  --accent-glow:21,23,24;
}

/* Improve GREEN in light mode: use deeper teal-green for UI tokens; keep ASCII bright */
[data-color-mode="light"][data-accent="green"] {
  --accent:#006b45; /* much darker jade for strong contrast */
  --accent-rgb:0,107,69;
  --accent-glow:0,168,107;
  --ascii-fg:#007a4d; /* darker green that's still vivid */
}

/* Magenta in light mode needs deeper saturation for contrast */
[data-color-mode="light"][data-accent="magenta"] {
  --accent:#a00078; /* much deeper magenta */
  --accent-rgb:160,0,120;
  --accent-glow:255,47,191;
  --ascii-fg:#a00078; /* strong magenta */
}

/* Gold in light mode - ensure warm tone distinct from plain yellow */
[data-color-mode="light"][data-accent="gold"] {
  --accent:#b37000; /* much darker amber/gold */
  --accent-rgb:179,112,0;
  --accent-glow:255,179,71;
  --ascii-fg:#c27d00;
}

/* Frost and orange explicit ASCII fg coloring */
[data-accent="frost"] { --ascii-fg:#ffffff; }
[data-accent="black"] { --ascii-fg:#000000; }
[data-accent="orange"] { --ascii-fg:#ff4400; }
[data-color-mode="light"][data-accent="orange"] { --ascii-fg:#b54000; }
/* Frost accent softens ultra for readability */
[data-accent="frost"].ascii-ultra #ascii-stage pre#ascii { filter:brightness(1.15) saturate(1.1); }
/* Keep performance tier shadows off in flat mode */
body.ui-flat.perf-q-high #ascii-stage pre#ascii,
body.ui-flat.perf-q-med #ascii-stage pre#ascii,
body.ui-flat.perf-q-low #ascii-stage pre#ascii { text-shadow:none; }

/* --- Forced vivid GREEN glow overrides (ensure not yellow) --- */
[data-accent="green"] #ascii-stage pre#ascii { color:#3dff94; text-shadow:
  0 0 2px rgba(61,255,148,0.85),
  0 0 6px rgba(61,255,148,0.70),
  0 0 14px rgba(61,255,158,0.55),
  0 0 28px rgba(61,255,168,0.40),
  0 0 54px rgba(61,255,178,0.30),
  0 0 100px rgba(61,255,190,0.22); filter:brightness(1.20) saturate(1.55); }
[data-accent="green"].ascii-bright #ascii-stage pre#ascii { text-shadow:
  0 0 2px rgba(61,255,148,0.95),
  0 0 8px rgba(61,255,148,0.80),
  0 0 18px rgba(61,255,158,0.60),
  0 0 36px rgba(61,255,170,0.45),
  0 0 70px rgba(61,255,182,0.34),
  0 0 130px rgba(61,255,195,0.26); filter:brightness(1.28) saturate(1.65); }
[data-accent="green"].ascii-ultra #ascii-stage pre#ascii { text-shadow:
  0 0 3px rgba(61,255,148,0.95),
  0 0 10px rgba(61,255,150,0.85),
  0 0 24px rgba(61,255,160,0.70),
  0 0 48px rgba(61,255,172,0.55),
  0 0 92px rgba(61,255,185,0.40),
  0 0 150px rgba(61,255,200,0.30); filter:brightness(1.34) saturate(1.75); }
[data-accent="green"].perf-q-low #ascii-stage pre#ascii { text-shadow:
  0 0 2px rgba(61,255,148,0.75),
  0 0 10px rgba(61,255,160,0.45); filter:brightness(1.12) saturate(1.35); }

/* --- Global: remove ALL glow site-wide --- */
#ascii-stage pre#ascii,
[data-accent] #ascii-stage pre#ascii,
body.ascii-bright #ascii-stage pre#ascii,
body.ascii-ultra #ascii-stage pre#ascii { text-shadow:none !important; filter:none !important; }

/* In dark mode, 'black' accent gets an inverted white halo (minimal layers) */
body[data-color-mode="dark"][data-accent="black"] #ascii-stage pre#ascii { color:#000 !important; text-shadow: 0 0 2px rgba(255,255,255,0.45), 0 0 6px rgba(255,255,255,0.25) !important; filter:none !important; }
body[data-color-mode="dark"][data-accent="black"].ascii-bright #ascii-stage pre#ascii { text-shadow: 0 0 3px rgba(255,255,255,0.55), 0 0 10px rgba(255,255,255,0.32) !important; }
body[data-color-mode="dark"][data-accent="black"].ascii-ultra #ascii-stage pre#ascii { text-shadow: 0 0 4px rgba(255,255,255,0.62), 0 0 14px rgba(255,255,255,0.38) !important; }
/* Perf clamps still reduce the halo cost */
body[data-color-mode="dark"].perf-q-low[data-accent="black"] #ascii-stage pre#ascii { text-shadow: 0 0 2px rgba(255,255,255,0.36) !important; }

/* ===== Light mode color overrides (must come AFTER global glow removal) ===== */
/* These need !important to override the global text-shadow:none and filter:none rules above */
[data-color-mode="light"][data-accent="green"] #ascii-stage pre#ascii {
  color:#007a4d !important;
  filter:brightness(0.90) saturate(1.40) !important;
}
[data-color-mode="light"][data-accent="magenta"] #ascii-stage pre#ascii {
  color:#a00078 !important;
  filter:brightness(0.92) saturate(1.45) !important;
}
[data-color-mode="light"][data-accent="gold"] #ascii-stage pre#ascii {
  color:#c27d00 !important;
  filter:brightness(0.90) saturate(1.35) !important;
}

/* ===== Epilepsy modal (session-based) ===== */
.epi-modal { width:min(720px, 92vw); height:auto; min-height:0; }
.epi-modal .pw-header { background:linear-gradient(180deg, rgba(255,255,255,0.048), rgba(255,255,255,0.016)); border-bottom:1px solid rgba(255,255,255,0.05); }
.epi-modal .pw-title { color:var(--accent); font-weight:700; letter-spacing:.12em; }
.epi-modal .pw-body { display:block; padding:1rem 1.1rem 1.15rem; }
.epi-content { display:flex; flex-direction:column; gap:1rem; padding:.25rem; }
.epi-line { margin:0; color:var(--text); font:600 .9rem/1.35 var(--sans); letter-spacing:.02em; text-transform:none; }
/* New structured copy */
.epi-lead { margin:0; color:var(--accent); font:800 .8rem/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.epi-copy { margin:0; color:var(--text); font:600 .92rem/1.5 var(--sans); letter-spacing:.02em; }
.epi-list { margin:.25rem 0 .25rem 1.1rem; padding:0; color:var(--text-dim); font:600 .85rem/1.45 var(--sans); }
.epi-list li { margin:.25rem 0; }
.epi-note { margin: .25rem 0 0; color:var(--text-dim); font:600 .75rem/1.35 var(--mono); letter-spacing:.08em; text-transform:uppercase; opacity:.9; }
.epi-actions { display:flex; gap:.6rem; flex-wrap:wrap; }
.epi-actions .btn-primary, .epi-actions .btn-secondary { appearance:none; border:1px solid rgba(var(--accent-rgb),.35); color:var(--accent); background:linear-gradient(135deg,rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),.05)); padding:.55rem .8rem; border-radius:8px; font:700 .72rem var(--mono); letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.epi-actions .btn-primary:hover { background:linear-gradient(135deg,rgba(var(--accent-rgb),.28),rgba(var(--accent-rgb),.08)); }
.epi-actions .btn-secondary { border-color:#2a2f31; color:var(--text); background:#181a1c; }
.epi-actions .btn-secondary:hover { background:#202427; }
.epi-modal[hidden] { display:none !important; }

/* Fit-to-content helper for fallback windows */
.proj-window.fit-content { height:auto; }
.proj-window.fit-content .pw-body { height:auto; }

/* Mobile tweaks for epilepsy modal */
@media (max-width: 560px){
  .epi-modal { width:92vw; left:4vw !important; }
  .epi-copy { font-size:.9rem; }
  .epi-list { font-size:.82rem; margin-left:.95rem; }
  .epi-actions { gap:.5rem; }
  .epi-actions .btn-primary, .epi-actions .btn-secondary { width:100%; justify-content:center; font-size:.7rem; padding:.55rem .7rem; }
}

/* Accessible only-text helper */
.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; }

/* ===== Parental Advisory sticker ===== */
/* Always positioned in bottom left corner, responsive sizing */
.pa-sticker { 
  position: fixed !important; 
  left: 1rem !important; 
  bottom: calc(2.5rem + 1.6rem) !important; /* Footer height + spacing */
  z-index: 105; /* Above footer (100) and proj windows (120) */
  display: flex; 
  align-items: flex-start;
}
.pa-sticker[hidden]{ display:none !important; }

.pa-sticker .pa-modal{ 
  display: flex; 
  flex-direction: column; 
  min-width: 220px; 
  max-width: min(88vw, 300px); 
  border-radius: 10px; 
  overflow: hidden; 
  box-shadow: 0 12px 44px -16px rgba(0,0,0,0.75), 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 0 0 1px rgba(0,0,0,0.55); 
  backdrop-filter: blur(16px) saturate(1.05); 
  -webkit-backdrop-filter: blur(16px) saturate(1.05); 
  border: 1px solid rgba(255,255,255,0.06);
}

.pa-sticker .pa-header{ 
  display: flex; 
  align-items: center; 
  gap: .6rem; 
  padding: .55rem .7rem; 
  background: linear-gradient(180deg, rgba(255,255,255,0.048), rgba(255,255,255,0.016)); 
  border-bottom: 1px solid rgba(255,255,255,0.05); 
  user-select: none; 
  font: 600 .62rem var(--mono); 
  letter-spacing: .15em; 
  text-transform: uppercase; 
  color: var(--accent); 
  cursor: grab;
}
.pa-sticker.dragging .pa-header{ cursor: grabbing; }

.pa-sticker .pa-actions-left{ display: flex; gap: .35rem; align-items: center; }

.pa-sticker .pa-close{ 
  width: 22px; 
  height: 22px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border: 1px solid rgba(255,255,255,0.12); 
  border-radius: 6px; 
  color: var(--text-dim); 
  background: transparent; 
  cursor: pointer;
  transition: all 0.2s ease;
}
.pa-sticker .pa-close:hover{ 
  color: var(--text); 
  background: rgba(255,255,255,0.05);
}

.pa-sticker .pa-title{ 
  flex: 1; 
  text-overflow: ellipsis; 
  overflow: hidden; 
  white-space: nowrap; 
  font: inherit; 
  color: var(--accent);
}

.pa-sticker .pa-sticker-inner{ 
  display: flex; 
  flex-direction: column; 
  align-items: stretch; 
  justify-content: center; 
  line-height: 1; 
  user-select: none; 
  -webkit-user-select: none;
}

.pa-sticker .pa-line{ 
  font-family: 'Special Gothic Condensed One', Impact, sans-serif; 
  font-weight: 600; 
  text-transform: uppercase; 
  display: flex; 
  align-items: baseline; 
  justify-content: center; 
  gap: .28em; 
  padding: .36rem .55rem; 
  letter-spacing: 0; 
  word-spacing: 0; 
  font-kerning: normal; 
  text-rendering: optimizeLegibility; 
  font-feature-settings: "kern" 1;
}

/* ensure spans inherit font and participate in flex gap-based kerning */
.pa-sticker .pa-line span { font: inherit; display: inline-block; }

/* per-line kerning tuning to better match original sticker */
/* PARENTAL: expand kerning to match bottom width (values can be tuned via CSS vars) */
.pa-sticker .pa-top{ 
  background: #000; 
  color: #fff; 
  font-size: var(--size, 2rem); 
  border: 3px solid #000; 
  border-bottom: 0; 
  gap: var(--gap, .46em);
}

/* ADVISORY: tighten by default; this sets the canonical total width */
.pa-sticker .pa-mid{ 
  background: #fff; 
  color: #000; 
  font-size: calc(var(--size, 1.24rem) * 2); 
  border: 3px solid #000; 
  border-top: 0; 
  border-bottom: 0; 
  gap: var(--gap, .30em); 
  letter-spacing: 0;
}

.pa-sticker .pa-bot{ 
  background: #000; 
  color: #fff; 
  font-size: var(--size, 1.18rem); 
  border: 3px solid #000; 
  border-top: 0; 
  gap: var(--gap, .30em);
}

/* widen the inter-word spacing specifically on the bottom line */
.pa-sticker .pa-bot span.spc { width: var(--spc, 1.08em); }
.pa-sticker .pa-line::before, 
.pa-sticker .pa-line::after{ content: ""; }

/* Light mode */
[data-color-mode="light"] .pa-sticker .pa-top{ background: #000; color: #fff; border-color: #000; }
[data-color-mode="light"] .pa-sticker .pa-mid{ background: #fff; color: #000; border-color: #000; }
[data-color-mode="light"] .pa-sticker .pa-bot{ background: #000; color: #fff; border-color: #000; }

/* Responsive sizing for smaller viewports */
@media (max-width: 900px) {
  .pa-sticker .pa-modal {
    max-width: min(90vw, 300px);
    min-width: 240px;
  }
}

@media (max-width: 700px) { 
  .pa-sticker { 
    left: 0.8rem !important; 
    bottom: calc(0.8rem + env(safe-area-inset-bottom)) !important;
  }
  .pa-sticker .pa-modal {
    max-width: min(88vw, 280px);
    min-width: 220px;
  }
}

/* iPhone Plus / similar narrow viewports (430px) */
@media (max-width: 450px) {
  .pa-sticker { 
    left: 0.65rem !important; 
    bottom: calc(0.65rem + env(safe-area-inset-bottom)) !important;
    --size: 1.4rem !important;
  }
  .pa-sticker .pa-modal {
    max-width: min(86vw, 250px);
    min-width: 190px;
  }
  .pa-sticker .pa-header {
    padding: .46rem .62rem;
    font-size: .57rem;
  }
  .pa-sticker .pa-line {
    padding: .31rem .47rem;
  }
}

@media (max-width: 500px) {
  .pa-sticker { 
    left: 0.7rem !important; 
    bottom: calc(0.7rem + env(safe-area-inset-bottom)) !important;
    --size: 1.5rem !important;
  }
  .pa-sticker .pa-modal {
    max-width: min(85vw, 240px);
    min-width: 180px;
  }
  .pa-sticker .pa-header {
    padding: .45rem .6rem;
    font-size: .58rem;
  }
  .pa-sticker .pa-line {
    padding: .32rem .48rem;
  }
}

@media (max-width: 380px) {
  .pa-sticker { 
    left: 0.55rem !important; 
    bottom: calc(0.55rem + env(safe-area-inset-bottom)) !important;
    --size: 1.35rem !important;
  }
  .pa-sticker .pa-modal {
    max-width: min(80vw, 220px);
    min-width: 170px;
  }
  .pa-sticker .pa-header {
    padding: .42rem .58rem;
    font-size: .55rem;
  }
  .pa-sticker .pa-line {
    padding: .3rem .46rem;
  }
}
/* Perf clamps still reduce the halo cost */
body[data-color-mode="dark"].perf-q-low[data-accent="black"] #ascii-stage pre#ascii { text-shadow: 0 0 2px rgba(255,255,255,0.36) !important; }

/* ===== Epilepsy modal (session-based) ===== */
.epi-modal { width:min(720px, 92vw); height:auto; min-height:0; }
.epi-modal .pw-header { background:linear-gradient(180deg, rgba(255,255,255,0.048), rgba(255,255,255,0.016)); border-bottom:1px solid rgba(255,255,255,0.05); }
.epi-modal .pw-title { color:var(--accent); font-weight:700; letter-spacing:.12em; }
.epi-modal .pw-body { display:block; padding:1rem 1.1rem 1.15rem; }
.epi-content { display:flex; flex-direction:column; gap:1rem; padding:.25rem; }
.epi-line { margin:0; color:var(--text); font:600 .9rem/1.35 var(--sans); letter-spacing:.02em; text-transform:none; }
/* New structured copy */
.epi-lead { margin:0; color:var(--accent); font:800 .8rem/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.epi-copy { margin:0; color:var(--text); font:600 .92rem/1.5 var(--sans); letter-spacing:.02em; }
.epi-list { margin:.25rem 0 .25rem 1.1rem; padding:0; color:var(--text-dim); font:600 .85rem/1.45 var(--sans); }
.epi-list li { margin:.25rem 0; }
.epi-note { margin: .25rem 0 0; color:var(--text-dim); font:600 .75rem/1.35 var(--mono); letter-spacing:.08em; text-transform:uppercase; opacity:.9; }
.epi-actions { display:flex; gap:.6rem; flex-wrap:wrap; }
.epi-actions .btn-primary, .epi-actions .btn-secondary { appearance:none; border:1px solid rgba(var(--accent-rgb),.35); color:var(--accent); background:linear-gradient(135deg,rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),.05)); padding:.55rem .8rem; border-radius:8px; font:700 .72rem var(--mono); letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.epi-actions .btn-primary:hover { background:linear-gradient(135deg,rgba(var(--accent-rgb),.28),rgba(var(--accent-rgb),.08)); }
.epi-actions .btn-secondary { border-color:#2a2f31; color:var(--text); background:#181a1c; }
.epi-actions .btn-secondary:hover { background:#202427; }
.epi-modal[hidden] { display:none !important; }

/* Fit-to-content helper for fallback windows */
.proj-window.fit-content { height:auto; }
.proj-window.fit-content .pw-body { height:auto; }

/* Mobile tweaks for epilepsy modal */
@media (max-width: 560px){
  .epi-modal { width:92vw; left:4vw !important; }
  .epi-copy { font-size:.9rem; }
  .epi-list { font-size:.82rem; margin-left:.95rem; }
  .epi-actions { gap:.5rem; }
  .epi-actions .btn-primary, .epi-actions .btn-secondary { width:100%; justify-content:center; font-size:.7rem; padding:.55rem .7rem; }
}

/* Accessible only-text helper */
.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; }

/* =====================================================
   EXPANDABLE FOOTER
   ===================================================== */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(to bottom right, rgba(10,12,14,0.95), rgba(10,12,14,0.88));
  border-top: 1px solid rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  backdrop-filter: blur(20px) saturate(1.1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--mono);
}

.footer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem clamp(1rem, 5vw, 2rem);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  min-height: 2.5rem;
}

.footer-toggle,
.footer-expanded-content {
  width: min(960px, calc(100% - 2rem));
  margin: 0 auto;
}

.footer-toggle:hover {
  background: rgba(255,255,255,0.02);
}

.footer-collapsed-content {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.25;
}

.footer-brand {
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.11em;
  font-size: 0.6rem;
}

.footer-separator {
  color: var(--text-dim);
  opacity: 0.3;
  font-weight: 300;
  font-size: 0.45rem;
}

.footer-copyright {
  color: var(--text-dim);
  opacity: 0.5;
  font-weight: 500;
  letter-spacing: 0.12em;
  font-size: 0.56rem;
}

.footer-expand-icon {
  font-size: 0.85rem;
  color: var(--text-dim);
  opacity: 0.7;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
}

.footer-toggle:hover .footer-expand-icon {
  opacity: 1;
}

.site-footer:not(.collapsed) .footer-expand-icon {
  transform: rotate(180deg);
}

.footer-expanded-content {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 clamp(1.2rem, 5vw, 2.3rem);
}

.site-footer:not(.collapsed) .footer-expanded-content {
  max-height: 400px;
  opacity: 1;
  padding: 1rem clamp(1rem, 5vw, 2rem) 1.4rem;
}

.site-footer:not(.collapsed) .footer-expanded-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  column-gap: 1.8rem;
  row-gap: 1.2rem;
}

.footer-section {
  margin: 0;
}

.footer-section h3 {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.95;
}

.footer-section h3::before {
  content: '::';
  color: var(--accent);
  margin-right: 0.35rem;
  font-weight: 600;
}

.footer-section p {
  font-size: 0.6rem;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.55;
  letter-spacing: 0.02em;
  opacity: 0.8;
  font-weight: 500;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
}

.footer-links a {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: color 0.2s, opacity 0.2s, transform 0.2s;
  display: inline-block;
  position: relative;
  padding-left: 1.05rem;
}

.footer-links a::before {
  content: '>';
  position: absolute;
  left: 0;
  color: var(--text-dim);
  opacity: 0.7;
  transition: opacity 0.2s;
}

.footer-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s;
}

.footer-links a:hover {
  color: var(--text);
  opacity: 1;
  transform: translateY(-1px);
}

.footer-links a:hover::after {
  opacity: 0.4;
}

.footer-links a:hover::before {
  opacity: 1;
  color: var(--accent);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  font-size: 0.52rem;
  color: var(--text-dim);
  opacity: 0.45;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.4;
}

/* Light mode adjustments */
[data-color-mode="light"] .site-footer {
  background: linear-gradient(to bottom right, rgba(245,243,241,0.95), rgba(245,243,241,0.88));
  border-top-color: rgba(0,0,0,0.08);
}

[data-color-mode="light"] .footer-toggle:hover {
  background: rgba(0,0,0,0.02);
}

/* Mobile responsive */
@media (max-width: 700px) {
  .footer-collapsed-content {
    font-size: 0.62rem;
    gap: 0.7rem;
    letter-spacing: 0.06em;
  }
  
  .footer-brand {
    letter-spacing: 0.08em;
  }
  
  .footer-copyright {
    font-size: 0.6rem;
  }
  
  .footer-section h3 {
    font-size: 0.82rem;
    letter-spacing: 0.1em;
  }
  
  .footer-section p {
    font-size: 0.68rem;
    line-height: 1.5;
  }
  
  .site-footer:not(.collapsed) .footer-expanded-content {
    grid-template-columns: 1fr;
  }

  .footer-links {
    flex-direction: column;
    gap: 0.6rem;
  }
  
  .footer-links a {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    padding-left: 0.9rem;
  }
  
  .footer-legal {
    font-size: 0.58rem;
    gap: 0.6rem;
    line-height: 1.35;
  }
}