@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { color-scheme: dark; font-family: 'DM Sans', sans-serif; color: #f1eee3; background: #111c23; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; overflow: hidden; }
#scene { position: fixed; inset: 0; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
header { position: fixed; top: 28px; left: 36px; right: 36px; display: flex; justify-content: space-between; align-items: center; gap: 16px; pointer-events: none; }
a { color: inherit; text-decoration: none; }
.wordmark { pointer-events: auto; font: 600 19px 'Space Grotesk', sans-serif; letter-spacing: -.7px; }
.wordmark span { margin-left: 8px; color: #95a2a5; font-weight: 400; }
.status { display: flex; align-items: center; gap: 9px; border: 1px solid #d9e6da20; border-radius: 100px; padding: 9px 14px; background: #112027ce; font-size: 12px; }
.status i { width: 6px; height: 6px; border-radius: 50%; background: #e9bd78; }
.status[data-state="ready"] i, .status[data-state="immersive"] i { background: #a8dec1; }
.status[data-state="error"] i { background: #f58d79; }
.intro { position: fixed; left: 36px; top: 19%; width: 380px; pointer-events: none; text-shadow: 0 2px 30px #091216; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #a4bdad; }
h1 { font: 500 clamp(35px, 4.3vw, 62px)/1.04 'Space Grotesk', sans-serif; letter-spacing: -3px; margin: 24px 0 18px; }
.description { color: #b7c2bf; font-size: 15px; line-height: 1.65; }
button { pointer-events: auto; cursor: pointer; border: 1px solid #d9e6da30; background: #142329d9; color: #e7ede6; border-radius: 6px; padding: 12px 15px; font: 500 12px 'DM Sans', sans-serif; transition: background .15s, border-color .15s; }
button:hover { background: #263b3e; border-color: #b7d6bf80; }
button:focus-visible, summary:focus-visible { outline: 2px solid #b7e6bc; outline-offset: 4px; }
button:disabled { cursor: default; opacity: .65; }
button span { margin-left: 15px; }
.actions { display: flex; align-items: center; gap: 9px; margin-top: 25px; }
button.primary { min-width: 160px; background: #dce9b9; color: #192a25; border-color: #dce9b9; font-weight: 700; }
button.primary:hover:enabled { background: #edf5d6; }
.hint { max-width: 340px; color: #9badac; font-size: 11px; line-height: 1.7; margin-top: 12px; }
.instructions { position: fixed; right: 36px; bottom: 118px; display: flex; gap: 28px; pointer-events: none; text-shadow: 0 1px 12px #0a111a; }
.instructions span { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; color: #a4bdad; }
.instructions p { font-size: 11px; color: #b9c5c1; line-height: 1.65; }
footer { position: fixed; left: 36px; right: 36px; bottom: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; pointer-events: none; }
.tools { display: flex; gap: 8px; }
#diagnostics { pointer-events: auto; width: 355px; border: 1px solid #d9e6da25; border-radius: 7px; padding: 12px 15px; background: #0f1c24ed; }
summary { cursor: pointer; font-size: 12px; list-style: none; }
summary::before { content: '+'; display: inline-block; width: 18px; color: #b7e6bc; }
details[open] summary::before { content: '−'; }
#metrics { float: right; font-size: 10px; color: #9badac; }
details p { color: #b0bdba; font-size: 11px; line-height: 1.5; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 33svh; overflow: auto; color: #a9c7ba; font: 10px/1.6 monospace; }
#copy-result { font-size: 11px; color: #b7e6bc; margin-left: 8px; }
#boot-error { position: fixed; left: 36px; bottom: 100px; max-width: 500px; padding: 18px; background: #562c29; color: #fff; font-size: 13px; }
body[data-immersive="true"] .intro, body[data-immersive="true"] .instructions { display: none; }
@media (max-width: 760px) {
  header { top: 18px; left: 18px; right: 18px; }
  .wordmark { font-size: 16px; }
  .wordmark span { margin-left: 4px; }
  .status { font-size: 10px; padding: 8px 10px; max-width: 52%; }
  .intro { top: 13%; left: 18px; width: 290px; }
  h1 { font-size: 36px; letter-spacing: -1.8px; margin: 18px 0 12px; }
  .description { font-size: 12px; }
  .actions { margin-top: 18px; }
  button { font-size: 11px; padding: 11px; }
  .hint { font-size: 10px; max-width: 280px; }
  .instructions { display: none; }
  footer { bottom: 18px; left: 18px; right: 18px; flex-wrap: wrap; }
  #diagnostics { width: min(355px, 100%); }
  pre { max-height: 25svh; }
}
@media (max-height: 600px) { .intro { top: 16%; } .description { display: none; } .instructions { display: none; } h1 { font-size: 36px; letter-spacing: -1.8px; } }