:root {
  color-scheme:light;
  --navy:#030d1d;
  --brand-gold:#c98218;
  --panel:#ffffff;
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; max-width:100%; overflow-x:hidden; }
body { background:#fff; color:#07101e; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,select,input { font:inherit; }
.app { width:100vw; min-height:100svh; display:grid; place-items:center; padding:0; overflow:hidden; }
.motion-shell {
  --logo-color:var(--navy);
  position:relative; isolation:isolate; width:100vw; max-width:none; height:100svh; aspect-ratio:auto; overflow:hidden;
  color:var(--logo-color); background:var(--panel); box-shadow:none;
}
.motion-shell[data-final-background="transparent"] { --panel:transparent; }
#motionLogo { display:block; width:100%; height:100%; overflow:visible; shape-rendering:geometricPrecision; text-rendering:geometricPrecision; }
.letter,.glitchSlice,#taglinePath { fill:var(--logo-color); }
#goldLines { fill:var(--brand-gold); }
#construction { opacity:0; }
#scanSystem { opacity:0; }
#microFragments,#dither { opacity:0; }
#dither { fill:currentColor; }
#darkWipe,#lightWipe { opacity:0; pointer-events:none; }
.glitchSlice { opacity:0; pointer-events:none; }

.controls {
  position:absolute; z-index:20; left:50%; bottom:clamp(12px,2.4vw,28px); transform:translateX(-50%);
  display:flex; align-items:center; gap:6px; width:max-content; max-width:calc(100% - 20px); padding:6px;
  color:currentColor; border:1px solid color-mix(in srgb,currentColor 14%,transparent); border-radius:999px;
  background:color-mix(in srgb,var(--panel) 82%,transparent); box-shadow:0 8px 30px rgba(0,0,0,.08); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); transition:opacity .2s ease;
}
.controls { display:none!important; }
.controls button,.controls label,.controls select {
  min-height:34px; border:0; border-radius:999px; color:inherit; background:transparent; font-size:10px; font-weight:750; letter-spacing:.08em; text-transform:uppercase;
}
.controls button { padding:0 13px; cursor:pointer; }
.controls button:hover { background:color-mix(in srgb,currentColor 9%,transparent); }
.controls label { display:flex; align-items:center; gap:5px; padding:0 8px; white-space:nowrap; }
.controls input { accent-color:var(--brand-gold); }
.controls select { max-width:92px; padding:0 6px; outline:none; cursor:pointer; }
.motion-shell.is-playing .controls { opacity:.42; }
.motion-shell.is-playing .controls:hover { opacity:1; }

@media(max-width:620px) {
  .app { place-items:start center; padding:0; background:#fff; }
  .motion-shell { width:100vw; max-width:none; height:100svh; box-shadow:none; }
  .controls { bottom:10px; gap:2px; padding:4px; }
  .controls button { padding:0 9px; }
  .controls label { padding:0 4px; }
  .mode span { display:none; }
}
@media(max-width:410px) {
  .controls button,.controls label,.controls select { font-size:8.5px; letter-spacing:.04em; }
  .controls select { max-width:76px; }
}
@media(prefers-reduced-motion:reduce) {
  .controls { opacity:1!important; }
}