:root {
  --ink: #101112;
  --ink-soft: #181a19;
  --paper: #ece9dd;
  --muted: #a8aaa2;
  --acid: #d9ff45;
  --acid-deep: #b6dd24;
  --apricot: #ff8b68;
  --moss: #9abe72;
  --line: rgba(236, 233, 221, 0.2);
  --glass: rgba(236, 233, 221, 0.07);
  --glass-strong: rgba(236, 233, 221, 0.12);
  --shadow: 0 26px 80px rgba(0, 0, 0, 0.24);
  --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --display: "Arial Narrow", "Aptos Narrow", "Roboto Condensed", "Liberation Sans Narrow", "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-liquid: cubic-bezier(.22, .61, .36, 1);
  --page-pad: clamp(1.25rem, 3.4vw, 4.75rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--ink); }
body { margin: 0; color: var(--paper); background: var(--ink); font-family: var(--mono); font-size: 14px; line-height: 1.45; overflow-x: hidden; }
body.is-locked { overflow: hidden; }
body.motion-reduced *, body.motion-reduced *::before, body.motion-reduced *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
button, a, input { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button, [role="button"] { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--acid); outline-offset: 5px; }

.skip-link { position: fixed; z-index: 1000; left: 1rem; top: -5rem; padding: .65rem .9rem; border-radius: .25rem; color: var(--ink); background: var(--acid); transition: top .2s ease; }
.skip-link:focus { top: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#field-canvas { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; opacity: .52; pointer-events: none; }
main, .site-header, .site-footer { position: relative; z-index: 1; }
.site-header { position: fixed; z-index: 20; top: 0; left: 0; width: 100%; padding: 1.25rem var(--page-pad); display: flex; justify-content: space-between; align-items: center; mix-blend-mode: normal; }
.brand { display: inline-flex; gap: .65rem; align-items: center; font-size: .76rem; letter-spacing: .09em; font-weight: 700; }
.brand__orbital { width: 1.7rem; height: 1.7rem; display: inline-block; position: relative; border: 1px solid var(--paper); border-radius: 50%; transform: rotate(-30deg); }
.brand__orbital i { position: absolute; left: .19rem; right: .19rem; top: 50%; height: 1px; background: var(--paper); transform-origin: center; }
.brand__orbital i:nth-child(2) { transform: rotate(60deg); }
.brand__orbital i:nth-child(3) { transform: rotate(120deg); }
.brand__orbital.small { transform: scale(.72) rotate(-30deg); transform-origin: left; margin-right: -.3rem; }
.command-trigger { position: relative; display: flex; align-items: center; gap: .48rem; padding: .45rem .5rem .45rem .65rem; border: 1px solid var(--line); border-radius: 99px; background: rgba(16,17,18,.45); backdrop-filter: blur(10px); font-size: .66rem; letter-spacing: .04em; transition: border-color .25s, background .25s; }
.command-trigger:hover { border-color: rgba(217,255,69,.78); background: rgba(217,255,69,.09); }
.command-trigger kbd { padding: .16rem .32rem; border-radius: .22rem; background: rgba(236,233,221,.12); color: var(--muted); font-size: .59rem; }
.command-trigger__dot, .status-dot { width: .42rem; height: .42rem; display: inline-block; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 .18rem rgba(217,255,69,.1); }
.status-dot { margin-right: .45rem; vertical-align: .08em; }

.scene { min-height: 100svh; padding-left: var(--page-pad); padding-right: var(--page-pad); }
.scene-meta { display: flex; justify-content: space-between; gap: 2rem; color: var(--muted); font-size: .61rem; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow, .panel-label { margin: 0; color: var(--muted); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.glass-panel { border: 1px solid var(--line); background: linear-gradient(130deg, rgba(236,233,221,.12), rgba(236,233,221,.025)); box-shadow: var(--shadow); backdrop-filter: blur(20px); }
.text-button { border: 0; padding: 0; color: var(--muted); background: transparent; text-decoration: underline; text-decoration-color: rgba(236,233,221,.3); text-underline-offset: .25rem; font-size: .66rem; }
.text-button:hover { color: var(--acid); text-decoration-color: currentColor; }
.underlined-link { font-size: .7rem; text-decoration: underline; text-underline-offset: .3rem; text-decoration-color: rgba(236,233,221,.4); }
.underlined-link span { color: var(--acid); }

.cursor { position: fixed; z-index: 200; top: 0; left: 0; display: none; width: 1.8rem; height: 1.8rem; border: 1px solid rgba(217,255,69,.92); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); transition: width .25s var(--ease-out), height .25s var(--ease-out), border-color .25s, background .25s; mix-blend-mode: screen; }
.cursor span { position: absolute; top: 50%; left: 50%; width: .24rem; height: .24rem; border-radius: 50%; background: var(--acid); transform: translate(-50%,-50%); }
.cursor b { position: absolute; top: calc(100% + .45rem); left: 50%; color: var(--acid); font-size: .48rem; font-weight: 400; white-space: nowrap; opacity: 0; transform: translateX(-50%); transition: opacity .2s; }
.cursor.is-active { width: 3.75rem; height: 3.75rem; border-color: var(--acid); background: rgba(217,255,69,.08); }
.cursor.is-active b { opacity: 1; }

.loader { position: fixed; z-index: 100; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.15rem; background: var(--ink); transition: opacity .65s var(--ease-out), visibility .65s; }
.loader.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.loader p { margin: 0; color: var(--paper); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.loader__dots { color: var(--acid); }
.loader__orbit { position: relative; width: 6rem; height: 6rem; animation: loader-spin 4s linear infinite; }
.loader__orbit i { position: absolute; inset: 0; border: 1px solid rgba(217,255,69,.78); border-radius: 50%; transform: rotate(0deg) scaleY(.4); }
.loader__orbit i:nth-child(2) { transform: rotate(60deg) scaleY(.4); }
.loader__orbit i:nth-child(3) { transform: rotate(120deg) scaleY(.4); }
.loader__orbit::after { content: ''; position: absolute; inset: 43%; border-radius: 50%; background: var(--apricot); box-shadow: 0 0 24px rgba(255,139,104,.6); }
.loader__skip { margin-top: .7rem; }
@keyframes loader-spin { to { transform: rotate(360deg); } }

.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 2rem; padding: 2rem var(--page-pad) 2.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .63rem; }
.site-footer > div { display: flex; align-items: start; gap: .15rem; }
.site-footer p { margin: 0; line-height: 1.65; }
.site-footer p span { color: rgba(236,233,221,.45); }
.footer-socials { display: flex; gap: .55rem; flex-wrap: wrap; justify-content: center; }
.footer-socials button { padding: .15rem 0; border: 0; color: var(--paper); background: transparent; font-size: .63rem; text-decoration: underline; text-decoration-color: rgba(236,233,221,.3); text-underline-offset: .28rem; }
.footer-socials button:hover { color: var(--acid); }
.footer-socials span { color: var(--acid); }
.footer-status { justify-self: end; text-align: right; }

.command-palette { width: min(34rem, calc(100vw - 2rem)); padding: 0; border: 1px solid rgba(236,233,221,.32); border-radius: .85rem; color: var(--paper); background: rgba(21,23,22,.92); box-shadow: 0 24px 80px rgba(0,0,0,.55); backdrop-filter: blur(30px); }
.command-palette::backdrop { background: rgba(0,0,0,.56); backdrop-filter: blur(8px); }
.command-palette__top { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); }
.command-palette__top p { margin: 0; font-size: .7rem; }
.command-palette__top button { width: 1.75rem; height: 1.75rem; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 1.25rem; line-height: 1; }
.command-palette__top button:hover { border-color: var(--acid); color: var(--acid); }
.command-list { padding: .5rem; }
.command-list a { display: grid; grid-template-columns: 1.4rem 1fr auto; align-items: center; gap: .75rem; padding: .95rem .8rem; border-radius: .45rem; color: var(--paper); transition: color .2s, background .2s; }
.command-list a:hover, .command-list a:focus-visible { color: var(--ink); background: var(--acid); outline: none; }
.command-list b { font-size: .82rem; font-weight: 500; }
.command-list small, .command-list kbd { color: var(--muted); font-size: .59rem; }
.command-list a:hover small, .command-list a:hover kbd { color: rgba(16,17,18,.65); }
.command-settings { display: grid; gap: .45rem; padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--line); }
.setting-row { display: flex; justify-content: space-between; align-items: center; padding: .28rem 0; font-size: .7rem; }
.setting-row input { position: absolute; opacity: 0; }
.setting-row i { width: 2rem; height: 1rem; position: relative; display: inline-block; border-radius: 1rem; background: rgba(236,233,221,.18); transition: background .2s; }
.setting-row i::after { content: ''; position: absolute; top: .16rem; left: .16rem; width: .68rem; height: .68rem; border-radius: 50%; background: var(--paper); transition: transform .2s var(--ease-out); }
.setting-row input:checked + i { background: var(--acid); }
.setting-row input:checked + i::after { transform: translateX(1rem); background: var(--ink); }
.setting-row input:focus-visible + i { outline: 2px solid var(--apricot); outline-offset: 3px; }
.toast { position: fixed; z-index: 120; bottom: 1.25rem; left: 50%; padding: .65rem .85rem; border: 1px solid var(--line); border-radius: .3rem; color: var(--paper); background: rgba(25,27,26,.92); box-shadow: var(--shadow); font-size: .67rem; opacity: 0; pointer-events: none; transform: translate(-50%, 1rem); transition: opacity .25s, transform .25s var(--ease-out); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

[data-reveal] { opacity: 1; transform: none; }
body.has-scroll-effects [data-reveal] { opacity: 0; transform: translateY(1.2rem); }

@media (pointer: fine) { .cursor { display: block; } }
@media (max-width: 760px) {
  .site-header { padding-top: 1rem; }
  .command-trigger kbd { display: none; }
  .scene-meta { font-size: .55rem; }
  .site-footer { grid-template-columns: 1fr; align-items: start; gap: 1.25rem; }
  .footer-socials { justify-content: start; }
  .footer-status { justify-self: start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .loader { display: none; }
  [data-reveal] { opacity: 1; transform: none; }
}