:root {
  color-scheme: dark;
  --ink: #eef4ff;
  --muted: #7e8aab;
  --dim: #4b5676;
  --cyan: #4ff5df;
  --cyan-soft: rgba(79, 245, 223, 0.16);
  --violet: #9c79ff;
  --coral: #ff657f;
  --panel: rgba(8, 13, 38, 0.78);
  --line: rgba(151, 177, 237, 0.14);
  --page: #040617;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--page); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(67, 93, 216, 0.14), transparent 32rem),
    radial-gradient(circle at 88% 88%, rgba(120, 50, 201, 0.11), transparent 34rem),
    var(--page);
  overflow-x: hidden;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.noise {
  position: fixed;
  inset: 0;
  z-index: 30;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

.topbar {
  width: min(1540px, calc(100% - 48px));
  height: 94px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.brand > span:last-child { display: grid; gap: 3px; }
.brand b { font-size: 14px; letter-spacing: 0.24em; font-weight: 650; }
.brand small, .eyebrow { color: var(--muted); font-size: 9px; letter-spacing: 0.22em; }
.brand-mark { position: relative; width: 38px; height: 38px; display: block; }
.brand-mark::before, .brand-mark::after, .brand-mark i {
  content: "";
  position: absolute;
  border: 1px solid var(--cyan);
  transform: rotate(45deg);
}
.brand-mark::before { inset: 3px; opacity: 0.26; }
.brand-mark::after { inset: 10px; box-shadow: 0 0 18px rgba(79, 245, 223, 0.48); }
.brand-mark i { width: 3px; height: 3px; border: 0; border-radius: 50%; background: var(--cyan); }
.brand-mark i:nth-child(1) { left: 1px; top: 18px; }
.brand-mark i:nth-child(2) { right: 1px; top: 18px; }
.brand-mark i:nth-child(3) { left: 18px; top: 1px; }

.topbar-meta { display: flex; align-items: center; gap: 30px; }
.status { display: flex; align-items: center; gap: 9px; font-size: 9px; letter-spacing: 0.17em; color: #a9b3ce; }
.status i, .live-dot, .neural-widget footer p i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan); animation: pulse 1.8s ease-in-out infinite;
}
.portfolio-link { color: var(--muted); text-decoration: none; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; transition: color .2s; }
.portfolio-link:hover { color: var(--ink); }

.experience {
  width: min(1540px, calc(100% - 48px));
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 18px;
  align-items: start;
  transition: grid-template-columns .35s ease;
}
.experience[data-xray="off"] { grid-template-columns: minmax(0, 1fr) 0; }

.stage-card, .neural-widget {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(22px);
}

.stage-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #09112f;
  isolation: isolate;
}
#game-canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; }
.stage-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px rgba(1, 3, 16, .58); z-index: 2; }
.stage-hud { position: absolute; inset: 25px 28px auto 28px; display: flex; justify-content: space-between; z-index: 3; pointer-events: none; }
.score-cluster { display: flex; gap: 12px; align-items: flex-start; }
.score-cluster span, .run-data, .mode-badge small { font-size: 8px; letter-spacing: .2em; color: rgba(226, 236, 255, .62); }
.score-cluster strong { margin-top: -8px; font-size: clamp(32px, 4vw, 58px); font-weight: 250; letter-spacing: -.06em; text-shadow: 0 0 28px rgba(113, 255, 242, .32); }
.run-data { display: flex; gap: 20px; }
.run-data b { color: #f1f6ff; font-weight: 560; }
.mode-badge { position: absolute; z-index: 4; left: 28px; bottom: 24px; display: flex; align-items: center; gap: 11px; padding: 9px 13px; border: 1px solid rgba(79,245,223,.27); background: rgba(5,10,30,.55); backdrop-filter: blur(10px); }
.mode-badge > span:last-child { display: grid; gap: 2px; }
.mode-badge b { font-size: 9px; letter-spacing: .16em; }
.mode-eye { width: 22px; height: 13px; border: 1px solid var(--cyan); border-radius: 80% 10%; transform: rotate(45deg); box-shadow: 0 0 10px rgba(79,245,223,.26); }
.mode-eye::after { content:""; display: block; width: 5px; height: 5px; margin: 3px auto; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.mode-badge.human { border-color: rgba(255,101,127,.4); }
.mode-badge.human .mode-eye { border-color: var(--coral); }
.mode-badge.human .mode-eye::after { background: var(--coral); box-shadow: 0 0 9px var(--coral); }

.loading-screen { position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; background: rgba(3,6,24,.88); transition: opacity .5s, visibility .5s; }
.loading-screen.ready { display: none; }
.loading-screen p { margin: 22px 0 6px; font-size: 10px; letter-spacing: .24em; }
.loading-screen small { color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.loader-orbit { width: 52px; height: 52px; position: relative; animation: spin 4s linear infinite; }
.loader-orbit::before, .loader-orbit::after { content:""; position:absolute; inset:0; border: 1px solid rgba(79,245,223,.2); transform: rotate(45deg); }
.loader-orbit::after { inset: 10px; border-color: var(--cyan); }
.loader-orbit i { position:absolute; width:4px; height:4px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.loader-orbit i:nth-child(1){top:0;left:24px}.loader-orbit i:nth-child(2){bottom:4px;left:4px}.loader-orbit i:nth-child(3){right:0;bottom:16px}
.crash-label { position:absolute; inset:0; z-index:7; display:grid; place-content:center; justify-items:center; opacity:0; visibility:hidden; pointer-events:none; text-shadow:0 2px 26px #02030e; }
.crash-label.visible { opacity:1; visibility:visible; animation: glitchIn .25s ease-out; }
.crash-label b { font-size: clamp(18px, 3vw, 34px); letter-spacing:.22em; color:#fff; }
.crash-label span { margin-top:8px; font-size:9px; color:#cbd4ef; letter-spacing:.18em; }

.control-deck { min-height: 82px; display: flex; align-items: stretch; padding: 13px; gap: 8px; border-top: 1px solid var(--line); background: rgba(3,6,22,.68); }
.control { min-width: 132px; padding: 0 14px; border: 1px solid var(--line); color: var(--ink); background: rgba(255,255,255,.018); display:flex; align-items:center; gap:10px; cursor:pointer; transition: border-color .2s, background .2s, transform .15s; }
.control:hover { border-color: rgba(79,245,223,.35); background: var(--cyan-soft); }
.control:active { transform: translateY(1px); }
.control.primary { border-color: rgba(79,245,223,.32); background: linear-gradient(135deg, rgba(79,245,223,.12), rgba(82,95,255,.06)); }
.control > span:last-child { display:grid; gap:3px; text-align:left; }
.control small, .speed-control > small { color: var(--muted); font-size:7px; letter-spacing:.18em; }
.control b { font-size:9px; letter-spacing:.12em; font-weight:600; }
.control-icon { color:var(--cyan); font-size:20px; font-weight:200; }
.speed-control { flex:1; min-width:150px; padding: 7px 12px; border:1px solid var(--line); display:grid; align-content:center; gap:6px; }
.speed-control > div { display:grid; grid-template-columns: repeat(3,1fr); gap:4px; }
.speed-control button { border:0; padding:6px 4px; color:var(--muted); background:transparent; font-size:10px; cursor:pointer; }
.speed-control button.active { color:var(--cyan); background:var(--cyan-soft); box-shadow: inset 0 -1px var(--cyan); }
.keyboard-hint { margin:0; padding: 0 16px 12px; color:var(--dim); background:rgba(3,6,22,.68); text-align:center; font-size:8px; letter-spacing:.08em; }
kbd { font: inherit; color:#8f9ab9; border:1px solid rgba(151,177,237,.18); padding:2px 5px; }

.neural-widget { min-width: 0; overflow:hidden; transition: opacity .28s, transform .35s; }
.experience[data-xray="off"] .neural-widget { opacity:0; pointer-events:none; transform:translateX(24px); }
.neural-widget > header { height:76px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.neural-widget h1 { margin:5px 0 0; font-size:14px; letter-spacing:.2em; font-weight:550; }
.decision-card { padding:17px 20px 15px; border-bottom:1px solid var(--line); }
.decision-heading { display:flex; justify-content:space-between; align-items:center; font-size:8px; letter-spacing:.18em; color:var(--muted); }
.decision-heading b { color:var(--cyan); font-size:11px; }
.decision-heading b.flap { color:var(--coral); text-shadow:0 0 12px rgba(255,101,127,.55); }
.decision-meter { height:5px; margin-top:12px; position:relative; background:rgba(139,161,218,.12); overflow:visible; }
.decision-meter i { display:block; width:0%; height:100%; background:linear-gradient(90deg,var(--cyan),#65a9ff,var(--coral)); box-shadow:0 0 14px rgba(79,245,223,.38); transition:width .06s linear; }
.decision-meter em { position:absolute; top:-4px; bottom:-4px; left:50%; border-left:1px solid rgba(255,255,255,.64); }
.decision-scale { display:flex; justify-content:space-between; margin-top:7px; color:var(--dim); font-size:7px; letter-spacing:.08em; }
.compact-wave { display:none; height:58px; margin-top:10px; }
.compact-wave canvas { width:100%; height:58px; display:block; }
.network-visual { padding:12px 14px 8px; border-bottom:1px solid var(--line); background:radial-gradient(circle at 55% 50%,rgba(83,76,216,.07),transparent 65%); }
.network-visual canvas { display:block; width:100%; height:250px; }
.layer-labels { display:flex; justify-content:space-between; padding:0 5px 3px; color:var(--dim); font-size:6px; letter-spacing:.12em; }
.sensor-list { padding:10px 20px 13px; border-bottom:1px solid var(--line); display:grid; gap:7px; }
.sensor-row { display:grid; grid-template-columns: 1fr 70px 42px; gap:8px; align-items:center; }
.sensor-row span { color:#a5afca; font-size:8px; letter-spacing:.07em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sensor-track { height:3px; background:rgba(132,155,213,.12); position:relative; }
.sensor-track::after { content:""; position:absolute; left:50%; top:-2px; bottom:-2px; border-left:1px solid rgba(255,255,255,.12); }
.sensor-track i { display:block; position:absolute; top:0; height:100%; width:0; background:var(--cyan); box-shadow:0 0 6px rgba(79,245,223,.45); }
.sensor-row code { color:#dbe4ff; font-family:"Cascadia Code",Consolas,monospace; font-size:8px; text-align:right; }
.neural-widget footer { padding:14px 20px 16px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.neural-widget footer div { display:grid; gap:4px; }
.neural-widget footer span { color:var(--dim); font-size:7px; letter-spacing:.17em; }
.neural-widget footer b { font-size:8px; color:#aeb8d3; letter-spacing:.07em; font-weight:520; }
.neural-widget footer p { grid-column:1/-1; display:flex; align-items:center; gap:8px; margin:0; color:var(--dim); font-size:7px; letter-spacing:.04em; }
.neural-widget footer p i { flex:0 0 auto; width:4px; height:4px; }

.experience[data-xray="compact"] { grid-template-columns:minmax(0,1fr) 300px; }
.experience[data-xray="compact"] .full-only { display:none; }
.experience[data-xray="compact"] .compact-wave { display:block; }
.experience[data-xray="compact"] .neural-widget footer { grid-template-columns:1fr; }
.experience[data-xray="compact"] .neural-widget footer div:nth-child(2) { display:none; }
.experience[data-xray="compact"] .neural-widget { align-self:start; }

.page-footer { width:min(1540px,calc(100% - 48px)); min-height:78px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; color:var(--dim); font-size:8px; letter-spacing:.09em; }
.page-footer span { color:var(--violet); margin-right:10px; }

@keyframes pulse { 50% { opacity:.38; box-shadow:0 0 4px currentColor; } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes glitchIn { 0%{transform:translateX(-12px);filter:blur(5px)} 50%{transform:translateX(7px)} 100%{transform:none;filter:none} }

@media (max-width: 1120px) {
  .experience, .experience[data-xray="compact"] { grid-template-columns:minmax(0,1fr) 330px; }
  .control { min-width:112px; padding:0 10px; }
  .icon-only { display:none; }
}

@media (max-width: 880px) {
  .topbar, .experience, .page-footer { width:min(100% - 24px, 720px); }
  .topbar { height:76px; }
  .portfolio-link { display:none; }
  .experience, .experience[data-xray="compact"], .experience[data-xray="off"] { grid-template-columns:1fr; }
  .experience[data-xray="off"] .neural-widget { display:none; }
  .neural-widget { width:100%; }
  .experience[data-xray="compact"] .neural-widget footer { grid-template-columns:1fr 1fr; }
  .experience[data-xray="compact"] .neural-widget footer div:nth-child(2) { display:grid; }
  .control-deck { flex-wrap:wrap; }
  .control { min-height:54px; flex:1 1 125px; }
  .speed-control { min-height:54px; order:5; flex-basis:100%; }
  .keyboard-hint { display:none; }
  .page-footer { padding:22px 0; gap:16px; }
}

@media (max-width: 560px) {
  .brand b { font-size:11px; }
  .brand small { font-size:7px; }
  .status span { display:none; }
  .experience { margin-top:12px; }
  .stage-hud { inset:16px 16px auto; }
  .run-data { gap:10px; }
  .score-cluster strong { font-size:34px; }
  .mode-badge { left:15px; bottom:15px; }
  .control-deck { padding:8px; gap:6px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .control { min-width:0; min-height:48px; width:100%; }
  .speed-control { grid-column:1/-1; min-width:0; }
  .control-icon { font-size:16px; }
  .page-footer { display:grid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}