@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --ink: #eef4ec;
  --muted: #829592;
  --line: rgba(186, 226, 214, .13);
  --panel: #0d1b1b;
  --panel-raised: #122323;
  --aqua: #27d5b3;
  --aqua-light: #9afce8;
  --amber: #f0b674;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #081313; }
body { min-height: 100dvh; margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(circle at 75% -20%, #183631 0, transparent 32rem), #081313; font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; }
button, a { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100dvh; max-width: 1280px; margin: 0 auto; padding: 30px clamp(22px, 5vw, 72px) 34px; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; gap: 11px; align-items: center; color: var(--ink); text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.brand-mark { display: flex; align-items: end; gap: 2px; width: 22px; height: 19px; }
.brand-mark i { display: block; width: 6px; border-radius: 4px 4px 1px 1px; background: var(--aqua); }
.brand-mark i:nth-child(1) { height: 10px; opacity: .6; }.brand-mark i:nth-child(2) { height: 16px; }.brand-mark i:nth-child(3) { height: 13px; opacity: .8; }
.topbar-meta, .eyebrow, .card-topline, .footer-note, .footer-label, .mode-number, .mode-note { font-family: 'DM Mono', monospace; }
.topbar-meta { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(240, 182, 116, .1); }
.intro { max-width: 680px; padding: clamp(58px, 9vw, 118px) 0 42px; }
.eyebrow { margin: 0 0 18px; color: var(--aqua); font-size: 10px; letter-spacing: .14em; }.eyebrow span { color: var(--muted); margin: 0 7px; }
h1 { margin: 0; font-size: clamp(58px, 10vw, 124px); line-height: .84; letter-spacing: -.075em; font-weight: 600; }.intro h1 em { color: var(--aqua); font-style: normal; }
.lede { max-width: 410px; margin: 30px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.controls { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 28px; }.mode-switch { display: flex; gap: 8px; }
.mode-button { display: grid; grid-template-columns: auto auto; grid-template-rows: 1fr auto; gap: 4px 13px; min-width: 158px; padding: 13px 15px 12px; border: 1px solid var(--line); border-radius: 3px; background: transparent; cursor: pointer; text-align: left; font-size: 13px; transition: .2s ease; }.mode-button:hover { border-color: rgba(154, 252, 232, .35); }.mode-button.is-active { background: var(--panel-raised); border-color: rgba(39, 213, 179, .6); box-shadow: inset 3px 0 var(--aqua); }.mode-number { grid-row: 1 / 3; padding-top: 2px; color: var(--aqua); font-size: 10px; }.mode-note { color: var(--muted); font-size: 9px; letter-spacing: .04em; }
.button-row { display: flex; gap: 9px; align-items: center; }.action-button, .reset-button { border: 1px solid var(--line); border-radius: 2px; padding: 13px 15px; background: rgba(13, 27, 27, .62); cursor: pointer; font-size: 12px; }.action-button { min-width: 124px; text-align: left; }.action-button span { float: right; color: var(--aqua); font-size: 16px; line-height: 11px; }.action-button.primary { border-color: var(--aqua); color: var(--aqua-light); }.action-button:active, .reset-button:active { transform: translateY(1px); }.reset-button { min-width: 42px; padding: 13px; text-align: center; font-size: 18px; color: var(--aqua); }
.lab-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 26px; align-items: start; }.simulation-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 22px 70px rgba(0, 0, 0, .18); }.card-topline { display: flex; justify-content: space-between; gap: 12px; padding: 17px 19px; color: var(--muted); font-size: 10px; letter-spacing: .08em; }.color-chip { color: var(--aqua); }.color-chip i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--aqua); }
.canvas-wrap { position: relative; height: clamp(390px, 58vw, 650px); overflow: hidden; background: linear-gradient(145deg, #102423 0%, #0a1818 68%); }.canvas-wrap::after { position: absolute; inset: 0; content: ''; pointer-events: none; background: linear-gradient(110deg, rgba(255,255,255,.06), transparent 18%, transparent 76%, rgba(39,213,179,.04)); }.canvas-wrap canvas { display: block; width: 100%; height: 100%; }
.canvas-hint, .empty-state { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(223, 255, 246, .78); text-align: center; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .12em; line-height: 1.8; pointer-events: none; transition: opacity .4s ease; }.canvas-hint span, .empty-state span { color: var(--muted); font-size: 9px; letter-spacing: .06em; }.canvas-hint.is-hidden { opacity: 0; }.empty-state { color: var(--aqua); }
.card-footer { display: flex; justify-content: space-between; padding: 15px 19px 17px; border-top: 1px solid var(--line); }.card-footer > div { display: grid; gap: 7px; }.footer-label { color: var(--muted); font-size: 9px; letter-spacing: .1em; }.card-footer strong { font-size: 12px; font-weight: 500; }
.side-notes { display: grid; gap: 30px; padding-top: 52px; }.note-block { display: grid; grid-template-columns: 27px 1fr; gap: 12px; padding-top: 13px; border-top: 1px solid var(--line); }.note-index { color: var(--aqua); font-family: 'DM Mono', monospace; font-size: 11px; }.note-block h2 { margin: 0 0 8px; font-size: 13px; font-weight: 500; }.note-block p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }.tilt-callout { display: flex; gap: 13px; align-items: center; padding: 17px 0; color: var(--aqua-light); font-family: 'DM Mono', monospace; font-size: 10px; line-height: 1.5; }.arrow { color: var(--amber); font-size: 28px; }
.footer-note { display: flex; justify-content: space-between; padding-top: 28px; color: #47645e; font-size: 9px; letter-spacing: .1em; }
@media (max-width: 760px) { .app-shell { padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(22px, env(safe-area-inset-bottom)); }.intro { padding: 56px 0 34px; }.controls { display: grid; align-items: stretch; }.mode-switch { width: 100%; }.mode-button { flex: 1; min-width: 0; }.button-row { display: grid; grid-template-columns: 1fr 1fr 44px; }.action-button { min-width: 0; }.lab-grid { grid-template-columns: 1fr; }.side-notes { grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 2px; }.tilt-callout { grid-column: 1 / -1; }.canvas-wrap { height: min(118vw, 590px); } }
@media (max-width: 420px) { .topbar-meta { font-size: 8px; }.mode-button { padding: 11px 10px; gap: 4px 8px; font-size: 12px; }.button-row { gap: 6px; }.action-button, .reset-button { padding-left: 10px; padding-right: 10px; font-size: 11px; }.card-topline, .card-footer { padding-left: 13px; padding-right: 13px; }.card-footer strong { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }

/* Immersive glass view */
html, body { overflow: hidden; background: #050706; }
.app-shell { width: 100%; max-width: none; height: 100dvh; min-height: 100dvh; padding: 0; }
.simulation-card { position: relative; width: 100%; height: 100dvh; min-height: 100dvh; border: 0; background: #050706; box-shadow: none; }
.canvas-wrap { position: absolute; inset: 0; width: 100%; height: 100%; background: #050706; }
.controls { position: absolute; z-index: 3; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); left: max(18px, env(safe-area-inset-left)); display: flex; align-items: end; justify-content: space-between; pointer-events: none; }
.controls > * { pointer-events: auto; }
.mode-switch { gap: 6px; }
.mode-button { min-width: 92px; padding: 11px 13px; border-color: rgba(186, 226, 214, .22); background: rgba(5, 7, 6, .72); backdrop-filter: blur(12px); }
.mode-button.is-active { border-color: rgba(39, 213, 179, .8); box-shadow: inset 3px 0 var(--aqua); }
.mode-button span { grid-column: 1 / -1; }
.button-row { gap: 7px; }
.action-button, .reset-button { min-width: 0; padding: 11px 13px; background: rgba(5, 7, 6, .72); backdrop-filter: blur(12px); }
.action-button.primary { border-color: var(--aqua); }
.reset-button { min-width: 40px; }
@media (max-width: 600px) {
  .controls { display: grid; gap: 8px; align-items: stretch; }
  .mode-switch, .button-row { width: 100%; }
  .mode-button { flex: 1; }
  .button-row { display: grid; grid-template-columns: 1fr 1fr 40px; }
  .action-button { width: 100%; }
}