@charset "UTF-8";
:root {
  color-scheme: dark;
  --bg: #0c0c0c; --panel: #141414; --ink: #f1f1f1;
  --accent: #3ee85f; --soft: #cdcdcd; --muted: #a3a3a3;
  --line: #383838; --faint: #222222; --accent-rgb: 62,232,95;
  --font: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
:root[data-theme="amber"] {
  --bg: #101010; --panel: #181818; --ink: #f5f0e5; --accent: #ffca68;
  --soft: #d1cdc5; --muted: #aaa59b; --line: #403c34; --faint: #26241f; --accent-rgb: 255,202,104;
}
:root[data-theme="ice"] {
  --bg: #0c0e10; --panel: #14181b; --ink: #eff5f8; --accent: #78d5f5;
  --soft: #c9d1d8; --muted: #a1adb5; --line: #343e45; --faint: #20272c; --accent-rgb: 120,213,245;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.7 var(--font); }
::selection { background: var(--accent); color: var(--bg); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; border: 0; background: none; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.site-shell { max-width: 1600px; padding: 0 5%; margin: auto; }
.masthead { min-height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 18px; letter-spacing: .04em; font-size: 14px; font-weight: 600; }
.brand-icon { font-size: 27px; font-weight: 400; color: var(--muted); letter-spacing: -.12em; }
.brand-icon span { color: var(--accent); padding: 0 5px; letter-spacing: -.1em; }
.header-right { display: flex; align-items: center; gap: 32px; }
.online { font-size: 12px; letter-spacing: .05em; color: var(--soft); display: flex; align-items: center; gap: 10px; }
.online i, .status-dot { display: inline-block; height: 6px; width: 6px; border-radius: 50%; background: var(--accent); }
.text-button { font-size: 12px; color: var(--muted); min-height: 44px; padding: 8px 0; white-space: nowrap; }
.text-button:hover { color: var(--accent); }
.hero { display: grid; grid-template-columns: 1fr 1.08fr; gap: 40px; align-items: center; min-height: 590px; padding: 38px 0; }
.intro { padding: 12px 0 20px; min-width: 0; }
.eyebrow { font-size: 12px; letter-spacing: .04em; color: var(--soft); display: flex; gap: 13px; align-items: center; margin-bottom: 32px; }
.tiny-cross { color: var(--accent); font-size: 20px; line-height: 1; }
.hello { font-size: 18px; color: var(--accent); margin: 0 0 14px; }
.hello .muted { margin-right: 8px; }
h1 { font-size: clamp(58px, 5.7vw, 88px); line-height: 1.13; font-weight: 600; letter-spacing: -.065em; margin: 0 0 20px; color: var(--ink); }
.surname { font-size: .78em; letter-spacing: -.07em; }
.block-cursor { font-size: .72em; color: var(--accent); animation: blink 1.2s steps(1) infinite; margin-left: 2px; }
.role { display: flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: .08em; color: var(--accent); margin: 0 0 24px; }
.label-bracket { color: var(--muted); }
.intro-copy { color: var(--soft); font-size: 16px; line-height: 1.85; margin: 0 0 20px; }
.explore-link { display: inline-flex; align-items: center; gap: 13px; font-size: 16px; color: var(--accent); min-height: 44px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.explore-link:hover { border-color: var(--accent); }
.explore-prefix { color: var(--muted); font-size: 17px; }
.arrow { margin-left: 10px; }
.intro-footnote { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.intro-footnote .muted { margin-right: 8px; }
.visual { min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.visual-heading { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; letter-spacing: .06em; color: var(--soft); padding: 0 3px 12px; }
.visual-heading > span:first-child { display: flex; gap: 10px; align-items: center; }
.canvas-wrap { position: relative; height: 400px; overflow: hidden; touch-action: pan-y; }
.canvas-wrap::before, .canvas-wrap::after { content: ""; position: absolute; pointer-events: none; z-index: 0; background: var(--faint); }
.canvas-wrap::before { width: 1px; height: calc(100% - 80px); left: 50%; top: 30px; }
.canvas-wrap::after { height: 1px; width: calc(100% - 50px); top: 45%; left: 25px; }
canvas { width: 100%; height: 100%; display: block; position: relative; z-index: 1; cursor: grab; touch-action: pan-y; }
canvas:active { cursor: grabbing; }
.corner { position: absolute; height: 12px; width: 12px; border-color: var(--line); border-style: solid; z-index: 2; pointer-events: none; }
.corner-tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
.corner-tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.corner-bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.corner-br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.axis { position: absolute; color: var(--muted); font-size: 12px; z-index: 2; pointer-events: none; }
.axis-top { top: 7px; left: calc(50% + 9px); }
.axis-left { left: 5px; top: calc(45% + 6px); }
.axis-right { right: 5px; top: calc(45% + 6px); }
.visual-index, .drag-hint { position: absolute; bottom: 12px; font-size: 12px; z-index: 2; pointer-events: none; }
.visual-index { left: 12px; color: var(--soft); }
.drag-hint { right: 12px; color: var(--muted); }
 .flight-controls { display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; }
.flight-button { min-height:44px; padding:8px 12px; border:1px solid var(--line); font-size:12px; color:var(--soft); }
.flight-button:hover, .flight-button.active { color:var(--accent); border-color:var(--accent); background:rgba(var(--accent-rgb),.045); }
.flight-progress { height:2px; background:var(--line); margin-top:8px; }
.flight-progress[hidden] { display:none; }
.flight-progress span { display:block; width:100%; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; }
.visual-heading { align-items:center; }
.visual-heading .text-button { min-height:28px; padding:0; }
#core-status { margin-left:auto; font-size:11px; text-align:right; }
.canvas-wrap.running canvas { cursor:default; }
.terminal { border: 1px solid var(--line); background: var(--panel); margin-bottom: 30px; }
.terminal-bar { min-height: 50px; border-bottom: 1px solid var(--line); padding: 0 21px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.terminal-bar > div { display: flex; align-items: center; gap: 20px; }
.window-marks { display: flex; gap: 6px; }
.window-marks i { width: 6px; height: 6px; border: 1px solid var(--muted); border-radius: 50%; }
.window-marks i:first-child { background: var(--muted); }
h2 { font-size: 13px; font-weight: 400; color: var(--soft); margin: 0; }
.terminal-bar-note { font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.terminal-body { padding: 19px 24px; max-height: 390px; min-height: 155px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.output-line { font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 25px; line-height: 1.8; }
.output-symbol { color: var(--accent); margin-right: 10px; }
.command-echo { color: var(--muted); margin: 16px 0 4px; }
.command-echo .entered-command { color: var(--ink); }
.output-line a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.terminal-table { display: grid; grid-template-columns: minmax(180px, 230px) 1fr; max-width: 880px; font-size: 14px; gap: 7px 24px; padding: 8px 0; }
.terminal-table dt { color: var(--accent); }
.terminal-table dd { margin: 0; color: var(--soft); }
#terminal-form { display: flex; align-items: center; gap: 11px; margin-top: 12px; min-height: 38px; }
.prompt { font-size: 14px; white-space: nowrap; color: var(--accent); }
.prompt-user { color: var(--soft); }
.prompt-dollar { margin-left: 9px; }
#terminal-input { background: none; border: 0; color: var(--ink); padding: 4px 0; min-width: 0; flex: 1; caret-color: var(--accent); outline: none; font-size: 16px; border-bottom: 1px solid transparent; border-radius: 0; }
#terminal-input:focus { border-bottom-color: var(--line); }
#terminal-input::placeholder { color: var(--muted); opacity: 1; }
.run-button { color: var(--muted); min-width: 34px; min-height: 38px; font-size: 20px; padding: 0 6px; }
.run-button:hover { color: var(--accent); }
.terminal-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; min-height: 50px; padding: 3px 24px; border-top: 1px solid var(--line); font-size: 12px; }
.terminal-suggestions > span:first-child { font-size: 12px; letter-spacing: .08em; }
.terminal-suggestions button { font-size: 13px; color: var(--soft); min-height: 44px; padding: 0; }
.terminal-suggestions button:hover { color: var(--accent); }
.keyboard-hint { margin-left: auto; color: var(--muted); font-size: 12px; }
kbd { font-family: inherit; border: 1px solid var(--line); padding: 1px 5px; margin-right: 6px; font-size: 12px; }
footer { border-top: 1px solid var(--line); min-height: 75px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 12px; }
footer > div { display: flex; gap: 28px; align-items: center; }
.footer-cross { color: var(--accent); margin-right: 10px; }
.footer-year { white-space: nowrap; }
.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; }
.skip { position: fixed; top: -100px; left: 20px; padding: 12px; background: var(--accent); color: var(--bg); z-index: 30; }
.skip:focus { top: 10px; }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 12px 18px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-size: 14px; opacity: 0; pointer-events: none; z-index: 20; max-width: 90vw; text-align: center; }
#toast.visible { opacity: 1; }
.noscript { margin: 20px; padding: 20px; border: 1px solid var(--line); color: var(--ink); }
@keyframes blink { 0%,48% { opacity: 1; } 49%,100% { opacity: 0; } }
@media(min-width:1500px) { .hero { min-height: 640px; } .canvas-wrap { height: 450px; } h1 { font-size: 94px; } }
@media(max-width:1100px) { .hero { gap: 28px; } h1 { font-size: 64px; } .intro-copy { font-size: 16px; } .canvas-wrap { height: 380px; } .terminal-bar-note { display: none; } }
@media(max-width:850px) {
  .masthead { min-height: 80px; } .brand { font-size: 13px; gap: 12px; } .online { font-size: 12px; }
  .header-right { gap: 20px; } .hero { grid-template-columns: 1fr; gap: 28px; padding: 34px 0; }
  .intro { padding: 0; } .eyebrow { margin-bottom: 25px; } h1 { font-size: clamp(58px, 10vw, 86px); }
  .intro-copy { font-size: 16px; } .visual { max-width: 650px; width: 100%; justify-self: center; }
  .canvas-wrap { height: 390px; } .terminal-body { padding: 18px; } .terminal-suggestions { padding: 3px 18px; gap: 5px 20px; }
  .keyboard-hint { display: none; } footer { align-items: flex-start; padding: 17px 0; } footer > div { gap: 18px; }
}
@media(max-width:480px) {
  .site-shell { padding: 0 6%; } .masthead { min-height: 72px; } .online { display: none; }
  .brand { font-size: 12px; gap: 12px; } .brand-icon { font-size: 25px; } .eyebrow { font-size: 12px; gap: 10px; }
  h1 { font-size: clamp(48px, 12.4vw, 61px); } .surname { font-size: .78em; }
  .hello { font-size: 17px; } .role { font-size: 14px; margin-bottom: 20px; }
  .intro-copy { font-size: 16px; } .explore-link { font-size: 16px; } .intro-footnote { font-size: 12px; }
  .hero { gap: 29px; padding-top: 28px; } .visual-heading { font-size: 12px; }
  .canvas-wrap { height: 330px; } 
  .visual-index, .drag-hint { font-size: 12px; }
  .visual-index { left: 9px; } .drag-hint { right: 9px; }
  .terminal-bar { padding: 0 13px; } .terminal-bar > div { gap: 10px; } .window-marks { display: none; }
  h2 { font-size: 12px; } .terminal-body { padding: 16px 13px; } .output-line { font-size: 15px; }
  .terminal-suggestions { padding: 3px 13px; gap: 3px 18px; } .terminal-suggestions button { font-size: 12px; }
  .prompt { font-size: 12px; } .prompt-dollar { margin-left: 6px; } #terminal-form { gap: 7px; }
  .run-button { min-width: 24px; padding: 0; } .terminal-table { grid-template-columns: 1fr; gap: 0; font-size: 13px; }
  .terminal-table dd { margin: 0 0 12px; } footer { font-size: 12px; flex-wrap: wrap; gap: 8px; }
  footer > div { width: 100%; justify-content: space-between; } .text-button { font-size: 12px; }
}
@media(max-width:360px) { .drag-hint { display: none; } .prompt { font-size: 12px; } }
.motion-paused .block-cursor { animation: none; }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; } }

@media(max-width:480px) { .flight-controls {gap:7px;} .flight-button {padding:8px 10px; flex:1 0 auto;} #core-status {font-size:11px; max-width:125px;} .visual-heading {gap:10px;} }

.crash-overlay { position:fixed; inset:0; z-index:1000; background:var(--bg); overscroll-behavior:contain; touch-action:none; }
.crash-overlay > canvas { position:absolute; inset:0; width:100%; height:100%; cursor:default; pointer-events:none; image-rendering:pixelated; }
.crash-toolbar { position:absolute; z-index:2; top:16px; left:24px; right:24px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--accent); font:12px/1.6 var(--font); }
.crash-toolbar > span { padding:5px 9px; background:var(--bg); border:1px solid var(--line); overflow-wrap:anywhere; }
.crash-toolbar button { flex-shrink:0; min-height:44px; padding:8px 12px; background:var(--bg); border:1px solid var(--accent); color:var(--ink); font-size:12px; }
.crash-toolbar button:hover { color:var(--accent); }
@media(max-width:480px) { .crash-toolbar { top:10px; left:12px; right:12px; gap:12px; } .crash-toolbar > span { max-width:55%; font-size:12px; } .crash-toolbar button { padding:8px; } }