:root {
  --bg: #161318; --text: #dfd2b9; --cream: #fff2cd; --gold: #ffd16e;
  --accent: #f8922e; --muted: #bba48a; --faint: #a08a72; --rule: #75512d;
  --drawer-handle-height: 34px;
  --crt-curvature: .04;
  --body-font-size: 11px;
  --loading-time-scale: 1.5;
  --window-bg: #0b090c; --window-titlebar-bg: #0c0808;
  --scene-shadow: #541a0e; --scene-ember: #c44213;
  color-scheme: dark; background: var(--bg); color: var(--text);
  font: var(--body-font-size)/1.34 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { position: relative; margin: 0; min-height: 100%; background: var(--bg); }
body { isolation: isolate; }
/* The module prepares both entrances before revealing the first frame. */
html.is-loading .portfolio-window,html.is-loading .settings-drawer,html.is-loading #render-backdrop,html.is-loading .orientation-indicator { visibility:hidden; }
a { color: var(--gold); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
a:hover { color: var(--cream); text-decoration-color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--bg); }

/* An oversized monochrome echo stays clipped to the viewport behind the UI. */
#render-backdrop { position:fixed; inset:0; z-index:0; display:block; width:100%; height:100%; opacity:.11; pointer-events:none; }
.page { position: relative; z-index: 1; min-height: 100svh; width: calc(60% - 126px); margin: 0; padding: 64px 0 64px clamp(24px,3vw,60px); display: flex; flex-direction: column; justify-content: center; }
.portfolio-window { font-size: var(--body-font-size); line-height: 1.35; }
.intro { margin-bottom: 22px; }
.intro-main { min-width: 0; }
.intro h1 { font-weight: 400; margin: 0 0 7px; max-width: 100%; }
.intro p { margin: 0 0 9px; }
.intro .tagline { margin: 0; }
.contact-line a { margin-right: 9px; }
.directory, .content-column, .group, .education-group, .skills { min-width: 0; }
.details { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); gap: 18px; }
.experience { margin-bottom: 20px; }
.group h2 { font-size: inherit; font-weight: 500; color: var(--accent); margin: 0 0 10px; }
.group h3 { font-size: inherit; font-weight: 600; color: var(--cream); margin: 0; }
.group p { margin: 0 0 7px; }
.group article { margin: 0 0 16px; }
.group article p { margin: 3px 0; }
.group .meta { color: var(--muted); font-size: inherit; }
.group em { font-style: normal; }
.experience .role { color: var(--text); font-weight:400; }
.experience .role::before { content:'· '; }
.experience .location::before { content:' · '; }
.degree-list>span { display:block; }
.experience article:last-child { margin-bottom: 0; }
.education p { margin: 4px 0 8px; }
.skill-group { margin-bottom: 9px; }
.skill-group h2 { font-size: inherit; font-weight: 500; color: var(--accent); margin: 0; }
.skill-group p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
footer { flex:0 0 auto; margin-top:20px; width:fit-content; font-size:var(--body-font-size); color:var(--faint); }

.terminal-window { border: 1px solid color-mix(in srgb,var(--rule) 72%,var(--bg)); border-radius: 0; background: var(--window-bg); overflow: hidden; }
.window-titlebar { position:relative; display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 12px; border-bottom: 1px solid color-mix(in srgb,var(--rule) 55%,var(--bg)); background: var(--window-titlebar-bg); font-size: 10px; line-height: 1; color: var(--faint); user-select: none; }
.window-title { color:var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terminal-body { padding: 20px 18px 16px; }
.ascii-name { display: block; width: 100%; max-width: 620px; color: var(--accent); }
#ascii-name-canvas { display: block; width: 100%; height: clamp(84px,8vw,108px); }
#ascii-name-canvas[hidden] { display: none; }
.name-fallback { font: 600 clamp(30px,5vw,64px)/1.1 ui-monospace,monospace; letter-spacing: -.06em; }
.name-ready .name-fallback { display: none; }

#tesseract-scene { position: fixed; right: 1.5vw; top: 50svh; transform: translateY(-50%); width: calc(40% + 84px); height: min(900px,calc(100svh - 90px)); margin: 0; isolation: isolate; }
#tesseract { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
#tesseract.is-dragging { cursor: grabbing; }
#tesseract.is-following-mouse { cursor: default; }
.scene-fallback { position: absolute; top: 35%; left: 10%; right: 10%; color: var(--muted); text-align: center; }

/* A quiet four-axis viewport instrument, using the terminal's warm palette. */
.orientation-indicator { position:absolute; z-index:1; top:12px; right:12px; width:116px; border:1px solid color-mix(in srgb,var(--rule) 65%,var(--bg)); background:var(--window-bg); color:var(--muted); font-size:9px; line-height:1.2; pointer-events:none; user-select:none; }
.orientation-indicator[hidden] { display:none; }
.orientation-heading { height:28px; gap:4px; padding:0 6px; }
.orientation-indicator .orientation-diagram { display:block; width:100%; height:76px; padding:4px 8px; overflow:visible; }
.orientation-indicator .orientation-diagram text { font:10px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; text-anchor:middle; dominant-baseline:central; }
.orientation-axis { stroke:currentColor; stroke-width:1; }
.orientation-negative { stroke-dasharray:1 4; opacity:.35; }
.orientation-w { stroke-dasharray:2 2; }
.orientation-readout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:10px; row-gap:4px; padding:0 10px 10px; font-size:8px; font-variant-numeric:tabular-nums; }
.orientation-readout>span { display:flex; justify-content:center; gap:8px; }
.orientation-readout output { color:var(--muted); }
.orientation-indicator.is-compact { top:0; right:0; width:min(100%,234px); }
.orientation-indicator.is-compact .orientation-heading,.orientation-indicator.is-compact .orientation-diagram { display:none; }
.orientation-indicator.is-compact .orientation-readout { grid-template-columns:repeat(4,minmax(0,1fr)); padding:10px 14px 12px; column-gap:10px; }

/* One nonmodal drawer: all settings enter and leave together. */
/* Keep the filtered surface stationary, but only as tall as the open drawer. */
.settings-surface { position:absolute; z-index:5; bottom:0; height:calc(var(--drawer-height,400px) + var(--screen-height) * .026); right:calc(3.5vw + 4.2px); width:calc(36% + 75.6px); pointer-events:none; display:flex; flex-direction:column; justify-content:flex-end; }
.settings-drawer { position:relative; flex:0 0 auto; margin-bottom:calc(var(--screen-height) * .026 - var(--drawer-height,400px) + var(--drawer-handle-height)); width:100%; pointer-events:auto; border-bottom: 0; font-size: var(--body-font-size); line-height: 1.4; color: var(--muted); }
.settings-drawer.is-open { margin-bottom:calc(var(--screen-height) * .026); }
.drawer-toggle { appearance: none; width: 100%; height: calc(var(--drawer-handle-height) - 1px); border: 0; border-bottom: 1px solid color-mix(in srgb,var(--rule) 55%,var(--bg)); border-radius: 0; font-family: inherit; text-align: left; cursor: pointer; }
.drawer-toggle:hover { color: var(--gold); }
.drawer-toggle:focus-visible { outline-offset: -4px; }
.drawer-content { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; padding: 13px 16px 17px; max-height: calc(75svh - var(--drawer-handle-height)); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--rule) var(--bg); }
.settings-section { border-left: 1px solid color-mix(in srgb,var(--rule) 55%,var(--bg)); padding-left: 18px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; color: var(--accent); min-height: 18px; }
.panel-heading>span { font-weight:500; }
.panel-actions { display: flex; align-items: center; gap: 8px; color: var(--rule); }
.panel-actions button { appearance: none; border: 0; border-bottom: 1px solid transparent; padding: 2px 0; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.panel-actions button:hover { color: var(--gold); border-color: var(--rule); }
.angle-controls,.display-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 16px; }
.angle-controls .setting-heading { gap:6px; }
.display-controls .setting { display:grid; grid-template-rows:1fr 24px; }
.display-controls .setting-heading { gap:4px; }
.display-controls .setting-heading>span { min-width:0; overflow-wrap:anywhere; }
.display-controls .setting output { min-width:0; }
.settings-section>.panel-heading { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; }
@media(min-width:901px) { .settings-surface { min-width:560px; } }
.setting { display: block; min-width: 0; }
.setting-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setting-heading>span { color: var(--muted); }
.setting output { color: var(--text); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.setting input { display: block; appearance: none; -webkit-appearance: none; width: 100%; height:24px; margin:-1px 0 1px; padding:0; border:0; border-radius: 0; background:transparent; cursor:ew-resize; touch-action:none; accent-color: var(--accent); }
.setting input:hover { border-color: var(--accent); }
.setting input::-webkit-slider-runnable-track { height:12px; border:1px solid var(--rule); border-radius:0; background:linear-gradient(to right,color-mix(in srgb,var(--accent) 72%,var(--bg)) 0 var(--fill,0%),color-mix(in srgb,var(--bg) 90%,var(--accent)) var(--fill,0%) 100%); }
.setting input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 1px; height: 10px; margin: 0; border: 0; border-radius: 0; background: transparent; }
.setting input::-moz-range-track { height:12px; border:1px solid var(--rule); border-radius:0; background:linear-gradient(to right,color-mix(in srgb,var(--accent) 72%,var(--bg)) 0 var(--fill,0%),color-mix(in srgb,var(--bg) 90%,var(--accent)) var(--fill,0%) 100%); }
.setting input::-moz-range-progress { height: 10px; background: transparent; }
.setting input::-moz-range-thumb { width: 1px; height: 10px; border: 0; border-radius: 0; background: transparent; }
.setting input:focus { outline:none; }
.setting:has(input:disabled) { --accent:var(--rule); }
.setting:has(input:disabled) .setting-heading>span,.setting:has(input:disabled) output { color:var(--rule); }
.setting input:disabled { cursor:default; }
body:not(.crt-disabled) #screen-viewport * { text-shadow:0 0 calc(1px + var(--crt-glow,.035) * 2px) color-mix(in srgb,currentColor calc(var(--crt-glow,.035) * 100%),transparent); }
.rotation-speed { margin-top:6px; }
.rotation-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 16px; margin-top:8px; }
.seed-control { margin-top:5px; }
.seed-control>label { display:block; margin-bottom:6px; }
.seed-row { display:flex; align-items:stretch; gap:8px; }
.seed-row input { min-width:0; flex:1; width:0; height:26px; border:1px solid var(--rule); border-radius:0; padding:4px 6px; background:var(--bg); color:var(--gold); font:inherit; }
.seed-row button { appearance:none; border:1px solid var(--rule); border-radius:0; padding:4px 8px; background:var(--window-titlebar-bg); color:var(--muted); font:inherit; cursor:pointer; }
.seed-row button:hover { color:var(--gold); border-color:var(--accent); }
.seed-row input:focus-visible { outline:1px solid var(--gold); outline-offset:3px; }
.checkbox-setting { display:flex; align-items:center; gap:8px; width:fit-content; margin:0; cursor:pointer; }
.checkbox-setting input { appearance:none; width:12px; height:12px; margin:0; border:1px solid var(--rule); border-radius:0; background:var(--bg); cursor:pointer; }
.checkbox-setting input:checked { background:var(--accent); box-shadow:inset 0 0 0 2px var(--bg); }
.checkbox-setting:hover input { border-color:var(--accent); }
.checkbox-setting input:focus-visible { outline:1px solid var(--gold); outline-offset:3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media(min-width:1800px) { .settings-surface { right:6.4vw; width:43.2%; } #tesseract-scene { right: 4vw; width: 48%; height: min(900px,calc(100svh - 90px)); } .page { max-width: 850px; } }
@media(max-width:1100px) and (min-width:901px) { .page { width: 49%; padding-left: 28px; } .terminal-body { padding: 19px 15px 15px; } .details { gap: 14px; } }
@media(max-width:900px) {
  :root { --drawer-handle-height:42px; --mobile-scene-height:clamp(320px,70vw,460px); }
  body.settings-open { padding-bottom:calc(var(--open-drawer-height,360px) - var(--drawer-handle-height)); }
  .page { width:100%; min-height:auto; padding:24px 24px calc(var(--drawer-handle-height) + 24px + env(safe-area-inset-bottom,0px)); }
  .terminal-body { padding:20px; }
  #ascii-name-canvas { height:96px; }
  .contact-line { display:flex; flex-wrap:wrap; column-gap:16px; row-gap:4px; }
  .contact-line a { margin-right:0; padding:3px 0; }
  .intro p.contact-line { margin-bottom:10px; }
  #tesseract-scene { position:relative; right:auto; top:auto; transform:none; width:100%; height:var(--mobile-scene-height); margin:24px auto 0; }
  body.settings-open #tesseract-scene { height:min(var(--mobile-scene-height),max(48px,calc(100svh - var(--open-drawer-height,360px) - 80px))); }
  footer { position:static; margin-top:16px; }
  .settings-surface { right:auto; left:50%; width:min(520px,calc(100% - 48px)); transform:translateX(-50%); }
  .drawer-content { padding:16px; gap:16px; }
  .settings-section { padding-left:16px; }
}
@media(max-width:650px) {
  :root { --mobile-scene-height:clamp(280px,95vw,390px); }
  .page { padding-top:16px; padding-left:16px; padding-right:16px; }
  .portfolio-window { line-height:1.5; }
  .terminal-body { padding:18px 16px 20px; }
  .intro { margin-bottom:24px; }
  .intro h1 { margin-bottom:8px; }
  #ascii-name-canvas { height:84px; }
  .contact-line { column-gap:14px; }
  .intro .tagline { text-wrap:pretty; }
  .details { display:block; }
  .experience { margin-bottom:24px; }
  .group h2 { margin-bottom:10px; }
  .group article { margin-bottom:20px; }
  .experience .role { display:block; font-size:11px; margin-top:2px; }
  .experience .role::before,.experience .location::before { content:none; }
  .experience .location { display:block; }
  .group article p { margin:6px 0 0; }
  .group .meta { font-size:11px; line-height:1.5; }
  .education-group { margin-bottom:24px; }
  .education p { margin:6px 0 0; }
  .education .degree-list { display:grid; gap:8px; margin:12px 0; }
  .degree-list em { display:block; font-size:11px; color:var(--muted); }
  .skill-group { margin-bottom:16px; }
  .skill-group:last-child { margin-bottom:0; }
  .skill-group h2 { margin-bottom:4px; }
  #tesseract-scene { margin-top:20px; }
  .orientation-indicator { width:108px; top:4px; right:4px; font-size:8px; }
  .orientation-indicator .orientation-diagram { height:68px; }
  .orientation-heading.window-titlebar { gap:3px; padding:0 3px; font-size:9px; }
  .window-titlebar { padding:0 11px; }
  .drawer-content { grid-template-columns:minmax(0,1fr); gap:16px; padding:16px; }
  .settings-section { border-left:0; border-top:1px solid color-mix(in srgb,var(--rule) 55%,var(--bg)); padding-left:0; padding-top:16px; }
  .angle-controls,.display-controls,.rotation-options,.settings-section>.panel-heading { column-gap:18px; }
  .angle-controls,.display-controls { row-gap:6px; }
  .setting input { margin-top:0; margin-bottom:3px; }
  .checkbox-setting { min-height:24px; }
}
@media(min-width:901px) and (max-height:850px) { .page { padding-top:32px; padding-bottom:32px; } }
@media(min-width:901px) and (max-width:1100px) and (max-height:850px) { .page { padding-top:12px; padding-bottom:36px; } }

/* Corner sparks and traced edges assemble the same frame as the 4-D scene. */
.portfolio-window { position:relative; }
.is-assembling { overflow:visible; }
:is(.terminal-window,.orientation-indicator):has(>.ascii-frame) { border-color:transparent; }
:is(.terminal-window,.orientation-indicator):has(>.ascii-frame)>.window-titlebar { border-bottom-color:transparent; }
/* The canvas owns frame glyphs and titles; native text remains accessible. */
:is(.terminal-window,.orientation-indicator):has(>.ascii-frame)>.window-titlebar { background:transparent; }
:is(.terminal-window,.orientation-indicator):has(>.ascii-frame) .window-title { color:transparent; }
.ascii-frame { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; font:var(--body-font-size)/1.2 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; }
/* Keep the settings control in place while the whole drawer frame traces. */
.drawer-toggle { position:relative; }


/* One screen coordinate system for GPU artwork and native HTML surfaces. */
html,body { height:100%; overflow:hidden; background:#000; }
#screen-viewport {
  position:fixed; inset:clamp(12px,3vh,36px) clamp(12px,3.2vw,64px);
  overflow:visible; background:var(--bg);
  transform:translateZ(0); isolation:isolate;
  --screen-height:94svh;
}
#screen-glass { position:absolute; inset:0; background:var(--bg); }
#page-scroll { position:absolute; inset:0; overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--rule) var(--bg); }
#page-scroll>.page { min-height:var(--screen-height); }
#render-backdrop { position:absolute; }
body.crt-disabled #screen-viewport { inset:0; clip-path:none; border-radius:0; box-shadow:none; --screen-height:100svh; }
@media(max-width:900px) {
  #page-scroll>.page { min-height:0; }
  #page-scroll { padding-bottom:var(--drawer-handle-height); }
  body.settings-open #page-scroll { padding-bottom:calc(var(--open-drawer-height,360px) - var(--drawer-handle-height)); }
  body.settings-open { padding-bottom:0; }
  body.settings-open #tesseract-scene { height:min(var(--mobile-scene-height),max(48px,calc(var(--screen-height) - var(--open-drawer-height,360px) - 80px))); }
}

/* All animated sources feed the dedicated WebGL pass beneath native HTML. */
#screen-glass { z-index:1; background:transparent; }
#screen-viewport { background:var(--bg); }
#screen-viewport>#tesseract-scene { position:absolute; z-index:2; top:50%; height:min(900px,calc(var(--screen-height) - 90px)); }
#tesseract-position { display:none; }
@media(max-width:900px) {
  #tesseract-position { display:block; width:100%; height:var(--mobile-scene-height); margin:24px auto 0; }
  body.settings-open #tesseract-position { height:min(var(--mobile-scene-height),max(48px,calc(var(--screen-height) - var(--open-drawer-height,360px) - 80px))); }
}
@media(max-width:650px) { #tesseract-position { margin-top:20px; } }
/* The screen clips the GPU canvas, native content, UI and textures together. */
#screen-viewport>[data-crt-generated] { pointer-events:none!important; }


/* The actual picture opens from a thin beam; it is never replaced by static. */
#screen-startup { position:fixed; inset:0; }
html.crt-booting #screen-startup { visibility:hidden; }
html.crt-powering #screen-startup {
  visibility:visible; will-change:clip-path;
  animation:screen-power-on 1.35s cubic-bezier(.4,0,.2,1) both;
}
#screen-power { display:none; position:fixed; z-index:2147483645; inset:0; background:#000; pointer-events:none; }
html.crt-booting #screen-power { display:block; }
html.crt-powering #screen-power { background:transparent; }
#screen-power::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); opacity:0; }
#screen-power::after { width:90%; height:85%; background:radial-gradient(ellipse,#de9b4218,transparent 65%); }
html.crt-powering #screen-power::after { animation:screen-start-bloom 1.35s ease-in-out both; }
@keyframes screen-power-on {
  0% { clip-path:inset(49.95% 26%); }
  12% { clip-path:inset(49.85% 1%); }
  100% { clip-path:inset(0); }
}
@keyframes screen-start-bloom {
  0%,20% { opacity:0; transform:translate(-50%,-50%) scaleY(.02); }
  37% { opacity:.45; transform:translate(-50%,-50%) scaleY(.75); }
  54% { opacity:.3; transform:translate(-50%,-50%) scaleY(1); }
  100% { opacity:0; }
}
@media(prefers-reduced-motion:reduce) {
  html.crt-booting #screen-startup { visibility:visible; animation:none!important; }
  #screen-power { display:none; }
}

/* The shared cached aperture is a compositor layer. CSS clipping an animated
   WebGL canvas forces an expensive offscreen composition in Firefox. */

.drawer-content[inert] { visibility:hidden; }
.drawer-content:not([inert]) { visibility:visible; }

/* Let the glass settle for one second before starting the content entrances. */
html.content-hold :is(.portfolio-window,.settings-drawer,.orientation-indicator,footer),
html.content-hold :is(.portfolio-window,.settings-drawer,.orientation-indicator,footer) * { visibility:hidden!important; }


.crt-setting { display:flex; align-items:center; gap:8px; color:var(--muted); }
.repo-link { font-size:10px; white-space:nowrap; }