:root {
  color-scheme: dark;
  --bg: #101210;
  --panel: #191c19;
  --panel-2: #222622;
  --line: #303630;
  --text: #f3f5ee;
  --muted: #929b90;
  --acid: #3fb0ff;
  --acid-dark: #08243a;
  --danger: #ff593f;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
  width: 100%;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

body {
  width: 100%;
  height: 100%;
  min-width: 320px;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  color: var(--text);
  background:
    radial-gradient(circle at 90% -10%, rgba(63, 176, 255, .09), transparent 35rem),
    var(--bg);
}

button { font: inherit; }

.shell {
  width: min(100%, 1440px);
  height: 100svh;
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.topbar, .brand, .connection, .topbar-actions, .section-heading, .transport, footer {
  display: flex;
  align-items: center;
}

.topbar { justify-content: space-between; gap: 20px; }
.brand { gap: 12px; }
.brand h1, .now-playing h2, .section-heading h2, p { margin: 0; }
.brand h1 { font-size: 1.25rem; letter-spacing: -.03em; }

.brand-logo {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.eyebrow {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.connection {
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}
.connection-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #f1b34c;
  box-shadow: 0 0 0 4px rgba(241, 179, 76, .1);
}
.connection.online .connection-dot { background: var(--acid); box-shadow: 0 0 0 4px rgba(63, 176, 255, .1); }
.connection.offline .connection-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(255, 89, 63, .1); }

.topbar-actions { gap: 9px; }
.interface-switch {
  display: flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #151815;
}
.interface-mode {
  min-height: 31px;
  padding: 0 11px;
  border: 0;
  border-radius: 99px;
  color: var(--muted);
  background: transparent;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
}
.interface-mode.active { color: var(--text); background: var(--panel-2); }

.mode-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-top: 24px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #151815;
}
.mode-tab {
  min-height: 43px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}
.mode-tab.active { color: var(--text); background: var(--panel-2); box-shadow: 0 1px 7px rgba(0,0,0,.25); }
.experience-tabs { display: none; }
.view-hidden { display: none !important; }

.now-playing {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 152px;
  margin: 28px 0 32px;
  padding: 26px;
  overflow: hidden;
  border: 1px solid #394035;
  border-radius: 22px;
  background:
    linear-gradient(100deg, rgba(63, 176, 255, .16), transparent 58%),
    repeating-linear-gradient(120deg, transparent 0 28px, rgba(255,255,255,.018) 29px 30px),
    var(--panel);
}
.now-playing h2 { margin-top: 8px; font-size: clamp(1.85rem, 5vw, 2.6rem); letter-spacing: -.055em; }
.now-playing p:last-child { margin-top: 7px; color: var(--muted); font-size: .85rem; }
.signal { display: flex; align-items: flex-end; gap: 4px; height: 46px; }
.signal i { width: 4px; border-radius: 4px; background: var(--acid); animation: signal 1.15s ease-in-out infinite alternate; }
.signal i:nth-child(1) { height: 20%; }
.signal i:nth-child(2) { height: 52%; animation-delay: -.6s; }
.signal i:nth-child(3) { height: 100%; animation-delay: -.3s; }
.signal i:nth-child(4) { height: 68%; animation-delay: -.8s; }
.signal i:nth-child(5) { height: 32%; animation-delay: -.45s; }

@keyframes signal { to { transform: scaleY(.35); opacity: .5; } }

.section-heading { justify-content: space-between; margin-bottom: 15px; }
.section-heading h2 { font-size: 1rem; letter-spacing: -.02em; }
.section-heading p { color: var(--muted); font-size: .75rem; }
.content-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }

.content-card {
  position: relative;
  min-height: 142px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  color: var(--text);
  text-align: left;
  background: var(--panel);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.content-card:active { transform: scale(.975); }
.content-card:focus-visible { outline: 3px solid rgba(63,176,255,.5); outline-offset: 3px; }
.content-card.active { border-color: var(--acid); background: #20251a; }
.card-number {
  position: relative; z-index: 2;
  color: var(--muted);
  font-size: .7rem; font-weight: 800; letter-spacing: .08em;
}
.card-label {
  position: absolute; z-index: 2; left: 13px; bottom: 13px;
  font-size: .83rem; font-weight: 750;
}
.live-pill {
  display: none;
  position: absolute; z-index: 3; top: 10px; right: 10px;
  padding: 4px 7px; border-radius: 99px;
  color: #111; background: var(--acid);
  font-size: .58rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.content-card.active .live-pill { display: block; }
.card-art { position: absolute; inset: 0; opacity: .7; }
.art-one { background: radial-gradient(circle at 70% 45%, var(--acid) 0 4%, transparent 5%), repeating-radial-gradient(circle at 70% 45%, transparent 0 13px, rgba(63,176,255,.2) 14px 15px); }
.art-two { background: radial-gradient(circle at 76% 30%, #3fb0ff 0 2px, transparent 3px), radial-gradient(circle at 58% 55%, #8fbdff 0 2px, transparent 3px), radial-gradient(circle at 85% 73%, #ff8a75 0 3px, transparent 4px), radial-gradient(circle at 45% 20%, #fff 0 1px, transparent 2px); background-size: 33px 31px, 41px 39px, 55px 49px, 29px 37px; }
.art-three { background: linear-gradient(120deg, transparent 45%, rgba(63,176,255,.45) 46% 47%, transparent 48%), linear-gradient(50deg, transparent 55%, rgba(119,170,255,.35) 56% 57%, transparent 58%); }
.art-four { background: radial-gradient(circle at 70% 45%, rgba(255,99,73,.8), transparent 18%), radial-gradient(circle at 48% 55%, rgba(117,98,255,.7), transparent 24%), radial-gradient(circle at 82% 70%, rgba(63,176,255,.5), transparent 20%); filter: blur(5px); }
.art-five { background: repeating-linear-gradient(112deg, transparent 0 13px, rgba(63,176,255,.13) 14px 15px), linear-gradient(90deg, transparent, rgba(96,171,255,.3)); }
.art-six { background: conic-gradient(from 200deg at 70% 50%, transparent, rgba(63,176,255,.45), transparent 45%, rgba(255,105,75,.4), transparent); }

.transport { gap: 11px; margin-top: 22px; }
.transport-button, .blackout-button {
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--text);
  background: var(--panel-2);
  cursor: pointer;
  touch-action: manipulation;
}
.transport-button {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 50%; min-height: 54px; font-weight: 750;
}
.transport-button.next { color: #111; border-color: var(--acid); background: var(--acid); }
.transport-button:active, .blackout-button:active { transform: scale(.985); }

.blackout-button {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 68px;
  margin-top: 11px;
  padding: 13px 16px;
  text-align: left;
}
.blackout-icon {
  width: 36px; height: 36px; border: 2px solid var(--muted); border-radius: 50%;
  box-shadow: inset 0 0 0 7px var(--panel-2), inset 0 0 0 20px var(--muted);
}
.blackout-button strong, .blackout-button small { display: block; }
.blackout-button strong { font-size: .9rem; }
.blackout-button small { margin-top: 3px; color: var(--muted); }
.blackout-button.active { color: #111; border-color: var(--danger); background: var(--danger); }
.blackout-button.active small { color: rgba(0,0,0,.65); }
.blackout-button.active .blackout-icon { border-color: #111; box-shadow: inset 0 0 0 7px var(--danger), inset 0 0 0 20px #111; }

.drawing-section { margin-top: 28px; }
.drawing-heading, .drawing-toolbar, .draw-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.drawing-heading h2 {
  margin: 7px 0 0;
  font-size: clamp(1.65rem, 4.5vw, 2.25rem);
  letter-spacing: -.05em;
}
.input-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 750;
}
.input-badge i, .readout-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 4px rgba(63,176,255,.1);
}
.drawing-toolbar { margin: 22px 0 12px; }
.color-options { display: flex; gap: 8px; }
.color-swatch {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: inset 0 0 0 5px var(--bg);
  cursor: pointer;
}
.color-swatch.cyan { background: #54e6ff; }
.color-swatch.coral { background: #ff6b87; }
.color-swatch.white { background: #f4f5ee; }
.color-swatch.active { border-color: currentColor; }
.clear-button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: var(--panel);
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}
.canvas-frame {
  position: relative;
  height: min(62svh, 620px);
  min-height: 410px;
  overflow: hidden;
  border: 1px solid #3b4238;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 50%, rgba(63,176,255,.045), transparent 52%),
    #0b0d0b;
  box-shadow: inset 0 0 60px rgba(0,0,0,.5);
}
#drawCanvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}
.experience-preview-video,
.experience-preview-shade {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.experience-preview-video { z-index: 0; object-fit: cover; background: #080a09; }
.experience-preview-shade {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4,8,10,.06), rgba(4,8,10,.24));
}
.experience-microphone,
.experience-motion-start { display: none; }
.canvas-grid {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: .32;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
}
.draw-hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity .25s ease;
}
.draw-hint.hidden { opacity: 0; }
.draw-hint-ring {
  width: 58px;
  height: 58px;
  margin-bottom: 15px;
  border: 1px solid rgba(63,176,255,.45);
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(63,176,255,.04), 0 0 35px rgba(63,176,255,.16);
}
.draw-hint strong { font-size: .88rem; }
.draw-hint small { margin-top: 5px; color: var(--muted); font-size: .7rem; }
.draw-readout {
  padding: 13px 3px 0;
  color: #6f786d;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .66rem;
  letter-spacing: .03em;
}
.draw-readout span:first-child { display: flex; align-items: center; gap: 8px; }
.draw-readout b { color: var(--muted); font-weight: 650; }
.draw-readout.active .readout-dot {
  background: #ff6b87;
  box-shadow: 0 0 0 4px rgba(255,107,135,.1);
}

body.experience-mode .mode-tabs { display: none; }
body.experience-mode .experience-tabs {
  display: grid;
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #151815;
}
.experience-tab {
  min-height: clamp(34px, 5.5vh, 43px);
  border: 0;
  border-radius: 10px;
  color: var(--text);
  background: var(--panel-2);
  font-weight: 800;
}
body.experience-mode .drawing-section {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 9px;
}
body.experience-mode .drawing-heading,
body.experience-mode .drawing-toolbar,
body.experience-mode .draw-readout { display: none; }
body.experience-mode .canvas-frame {
  width: min(100%, calc(100dvh - 205px));
  height: auto;
  aspect-ratio: 1;
  justify-self: center;
  align-self: center;
  border-color: rgba(63,176,255,.42);
  background: #080a09;
  box-shadow: 0 0 40px rgba(0,147,255,.08), inset 0 0 50px rgba(0,0,0,.22);
}
body.experience-mode .experience-preview-video,
body.experience-mode .experience-preview-shade { display: block; }
body.experience-mode .canvas-grid { opacity: .12; }
body.experience-mode .experience-motion-start {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 18px;
  display: block;
  min-height: 42px;
  padding: 0 18px;
  transform: translateX(-50%);
  border: 1px solid rgba(63,176,255,.55);
  border-radius: 99px;
  color: var(--text);
  background: rgba(8,12,14,.86);
  font-weight: 800;
  backdrop-filter: blur(10px);
}
body.experience-mode .experience-motion-start.hidden { display: none; }
body.experience-mode .experience-actions {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 62px;
}
body.experience-mode .experience-microphone {
  display: grid;
  grid-template-columns: 40px 0;
  align-items: center;
  gap: 0;
  width: 62px;
  height: 62px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 31px;
  color: var(--text);
  text-align: left;
  background: var(--panel);
  cursor: pointer;
  transition: width .25s ease, border-color .2s ease, background .2s ease;
}
body.experience-mode .experience-microphone .microphone-icon {
  margin-inline: auto;
  transform: translateY(-4px);
}
body.experience-mode .experience-microphone.active {
  grid-template-columns: 40px minmax(100px, 1fr);
  gap: 12px;
  width: min(100%, 340px);
  border-color: rgba(63,176,255,.65);
  background: linear-gradient(90deg, rgba(0,147,255,.12), var(--panel));
}
.experience-microphone-label { display: none; }
#experienceAudioWaveform { display: none; width: 100%; height: 40px; }
body.experience-mode .experience-microphone.active #experienceAudioWaveform { display: block; }

.sensor-section { margin-top: 28px; }
.sensor-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
}
.sensor-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #747c72;
}
.sensor-status.active i {
  background: var(--acid);
  box-shadow: 0 0 0 5px rgba(63,176,255,.1);
}
.sensor-status.error i { background: var(--danger); }
.secure-notice {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid rgba(255,89,63,.35);
  border-radius: 14px;
  background: rgba(255,89,63,.07);
}
.secure-notice strong { color: #ff9a8d; font-size: .82rem; }
.secure-notice p { margin-top: 6px; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.gyro-visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 285px;
  margin: 20px 0 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: radial-gradient(circle at 50% 48%, rgba(63,176,255,.11), transparent 34%), #131613;
  perspective: 800px;
}
.gyro-orbit {
  position: absolute;
  width: 230px;
  height: 100px;
  border: 1px solid rgba(63,176,255,.18);
  border-radius: 50%;
}
.orbit-one { transform: rotate(-18deg); }
.orbit-two { transform: rotate(70deg); }
.phone-model {
  position: relative;
  z-index: 2;
  width: 87px;
  height: 165px;
  border: 2px solid #899283;
  border-radius: 18px;
  background: linear-gradient(145deg, #30362f, #171a17);
  box-shadow: 18px 25px 45px rgba(0,0,0,.42), inset 0 0 0 4px #111411;
  transform-style: preserve-3d;
  transition: transform .09s linear;
}
.phone-camera {
  position: absolute;
  top: 11px;
  left: 50%;
  width: 23px;
  height: 5px;
  border-radius: 8px;
  background: #080a08;
  transform: translateX(-50%);
}
.phone-axis {
  position: absolute;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  color: #111;
  font-size: .6rem;
  font-weight: 900;
}
.axis-x { right: -34px; top: 71px; background: #ff6b87; }
.axis-y { left: 31px; top: -34px; background: var(--acid); }
.axis-z { left: 31px; bottom: -34px; background: #54e6ff; }
.sensor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.sensor-card {
  min-width: 0;
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.sensor-card span, .sensor-card small { display: block; color: var(--muted); font-size: .61rem; }
.sensor-card strong {
  display: inline-block;
  margin-top: 9px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: clamp(1rem, 4vw, 1.35rem);
  letter-spacing: -.05em;
}
.sensor-card small { display: inline; margin-left: 2px; }
.axis-card-x { border-top-color: #ff6b87; }
.axis-card-y { border-top-color: var(--acid); }
.axis-card-z { border-top-color: #54e6ff; }
.orientation-readout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 9px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #151815;
}
.orientation-readout div { padding: 12px; text-align: center; }
.orientation-readout div + div { border-left: 1px solid var(--line); }
.orientation-readout span, .orientation-readout b { display: block; }
.orientation-readout span { color: var(--muted); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; }
.orientation-readout b { margin-top: 5px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; }
.sensor-button {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 68px;
  margin-top: 12px;
  padding: 13px 16px;
  border: 1px solid var(--acid);
  border-radius: 15px;
  color: #111;
  text-align: left;
  background: var(--acid);
  cursor: pointer;
}
.sensor-button-icon {
  width: 34px;
  height: 34px;
  border: 2px solid #111;
  border-radius: 50%;
  box-shadow: inset 0 0 0 7px var(--acid), inset 0 0 0 18px #111;
}
.sensor-button strong, .sensor-button small { display: block; }
.sensor-button strong { font-size: .88rem; }
.sensor-button small { margin-top: 3px; color: rgba(0,0,0,.62); }
.sensor-button.active { color: var(--text); border-color: #4a5147; background: var(--panel-2); }
.sensor-button.active .sensor-button-icon { border-color: var(--danger); box-shadow: inset 0 0 0 7px var(--panel-2), inset 0 0 0 18px var(--danger); }
.sensor-button.active small { color: var(--muted); }
.sensor-button:disabled { cursor: not-allowed; opacity: .48; }
.sensor-footnote { margin-top: 11px; color: #697167; font-size: .65rem; text-align: center; }

.audio-section { margin-top: 28px; }
.audio-monitor {
  position: relative;
  height: 270px;
  margin: 20px 0 12px;
  overflow: hidden;
  border: 1px solid #384035;
  border-radius: 22px;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(63,176,255,.06), transparent 55%),
    #0b0d0b;
  background-size: 32px 32px, 32px 32px, auto, auto;
}
#audioWaveform { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; }
.audio-center-line {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px dashed rgba(63,176,255,.15);
}
.audio-level {
  position: absolute;
  z-index: 3;
  left: 14px;
  bottom: 14px;
  width: 5px;
  height: 80px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
}
.audio-level span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  border-radius: inherit;
  background: linear-gradient(to top, var(--acid), #ffb94f, var(--danger));
  transition: height .08s linear;
}
.audio-monitor-label {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 13px;
  color: #596157;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .62rem;
  letter-spacing: .08em;
}
.audio-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.audio-stats div { min-width: 0; padding: 13px 11px; }
.audio-stats div + div { border-left: 1px solid var(--line); }
.audio-stats span, .audio-stats strong { display: block; }
.audio-stats span { color: var(--muted); font-size: .58rem; text-transform: uppercase; letter-spacing: .07em; }
.audio-stats strong { margin-top: 6px; font-size: .75rem; }
.microphone-icon {
  position: relative;
  width: 22px;
  height: 31px;
  margin: 0 6px;
  border: 2px solid currentColor;
  border-radius: 13px;
}
.microphone-icon::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -8px;
  height: 17px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 16px 16px;
}
.microphone-icon::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: -14px;
  width: 2px;
  height: 7px;
  background: currentColor;
}
.microphone-button.active { border-color: var(--danger); }

.preview-section { margin-top: 28px; }
.video-monitor {
  position: relative;
  min-height: 0;
  aspect-ratio: 16 / 9;
  margin: 14px 0 11px;
  overflow: hidden;
  border: 1px solid #384035;
  border-radius: 20px;
  background: #050605;
}
.video-monitor video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  padding: 24px;
  text-align: center;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(63,176,255,.08), transparent 56%),
    #0b0d0b;
  background-size: 32px 32px, 32px 32px, auto, auto;
  transition: opacity .18s ease;
}
.video-placeholder.hidden { opacity: 0; pointer-events: none; }
.video-placeholder strong { margin-top: 8px; font-size: .9rem; }
.video-placeholder small { color: var(--muted); font-size: .68rem; }
.preview-pulse {
  width: 24px;
  height: 24px;
  border: 2px solid var(--acid);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(63,176,255,.35);
  animation: preview-pulse 1.35s ease-out infinite;
}
@keyframes preview-pulse { to { box-shadow: 0 0 0 18px rgba(63,176,255,0); opacity: .55; } }
.video-live-badge {
  position: absolute;
  top: 11px;
  left: 11px;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 99px;
  color: #fff;
  background: rgba(8,10,8,.72);
  backdrop-filter: blur(8px);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .09em;
}
.preview-section:has(#previewStatus.active) .video-live-badge { display: flex; }
.video-live-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.preview-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.preview-stats div { min-width: 0; padding: 12px 9px; }
.preview-stats div + div { border-left: 1px solid var(--line); }
.preview-stats span, .preview-stats strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-stats span { color: var(--muted); font-size: .55rem; text-transform: uppercase; letter-spacing: .06em; }
.preview-stats strong { margin-top: 5px; font-size: .7rem; }
.preview-reconnect { margin-top: 11px; }
.preview-reconnect-icon {
  width: 28px;
  height: 28px;
  margin: 0 4px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}
.preview-reconnect-icon::after { content: ""; display: block; width: 7px; height: 7px; margin: -2px 0 0 18px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(18deg); }

footer {
  justify-content: space-between;
  gap: 15px;
  margin-top: 24px;
  color: #697167;
  font-size: .68rem;
}
.footer-logo {
  display: block;
  width: auto;
  height: 2.16rem;
  object-fit: contain;
  opacity: .52;
  filter: brightness(.68) saturate(.82);
}

.toast {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 20;
  max-width: calc(100% - 36px);
  padding: 11px 16px;
  border: 1px solid var(--line); border-radius: 99px;
  color: var(--text); background: rgba(31,35,31,.94);
  font-size: .78rem; font-weight: 700;
  opacity: 0; transform: translate(-50%, 16px);
  pointer-events: none;
  transition: .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Kiosk layout: every mode is constrained to the visible viewport. */
.shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(7px, 1.4vh, 14px);
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(9px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  overflow: hidden;
}

.mode-tabs {
  width: min(100%, 560px);
  min-height: 0;
  margin: 0 auto;
  padding: 4px;
}
.mode-tab { min-height: clamp(34px, 5.5vh, 43px); }
footer { margin: 0; }

#controlView,
.drawing-section,
.sensor-section,
.audio-section,
.preview-section {
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.preview-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: 0;
}
.preview-section .video-monitor { width: min(100%, calc((100dvh - 260px) * 16 / 9)); max-height: 100%; margin-inline: auto; }

#controlView {
  display: grid;
  grid-template-rows: minmax(64px, .55fr) minmax(0, 2fr) auto auto;
  gap: clamp(6px, 1.2vh, 11px);
}
.now-playing {
  min-height: 0;
  margin: 0;
  padding: clamp(13px, 2.4vh, 22px);
  border-radius: 16px;
}
.now-playing h2 { font-size: clamp(1.25rem, 4vh, 2.2rem); }
.content-section {
  display: flex;
  min-height: 0;
  flex-direction: column;
}
.section-heading { flex: 0 0 auto; margin-bottom: 6px; }
.content-grid {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.content-card {
  min-height: 0;
  padding: 9px;
  border-radius: 12px;
}
.card-label { left: 9px; bottom: 8px; }
.transport { gap: 7px; margin: 0; }
.transport-button { min-height: clamp(37px, 6vh, 48px); }
.blackout-button {
  min-height: clamp(44px, 7vh, 58px);
  margin: 0;
  padding-block: 8px;
}
.blackout-icon { width: 30px; height: 30px; }

.drawing-section {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 7px;
}
.drawing-toolbar { margin: 0; }
.canvas-frame {
  width: 100%;
  height: auto;
  min-height: 0;
  border-radius: 16px;
}
.draw-readout { padding-top: 0; }

.sensor-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
  gap: 7px;
}
.secure-notice { margin: 0; padding: 10px 12px; }
.gyro-visual {
  height: auto;
  min-height: 0;
  margin: 0;
  border-radius: 16px;
}
.sensor-card { padding: 8px 9px; }
.sensor-card strong { margin-top: 4px; }
.orientation-readout { margin: 0; }
.orientation-readout div { padding: 8px; }
.sensor-button {
  min-height: clamp(48px, 7.5vh, 60px);
  margin: 0;
  padding-block: 8px;
}
.sensor-footnote { margin: 0; }
.sensor-section:has(.secure-notice:not(.view-hidden)) .gyro-visual { display: none; }

.audio-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: 7px;
}
.audio-monitor {
  height: auto;
  min-height: 0;
  margin: 0;
  border-radius: 16px;
}
.audio-section:has(.secure-notice:not(.view-hidden)) .sensor-footnote { display: none; }

@media (min-width: 640px) {
  .shell { padding-inline: clamp(18px, 3vw, 42px); }
  .brand-logo { width: 44px; height: 44px; }

  #controlView {
    grid-template-columns: minmax(190px, .78fr) minmax(360px, 1.72fr);
    grid-template-rows: minmax(78px, 1fr) auto auto;
    column-gap: clamp(12px, 2vw, 24px);
  }
  .now-playing { grid-column: 1; grid-row: 1; }
  .content-section { grid-column: 2; grid-row: 1 / 4; }
  .content-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 1vw, 14px);
  }
  .transport { grid-column: 1; grid-row: 2; }
  .blackout-button { grid-column: 1; grid-row: 3; }

  .sensor-section,
  .audio-section {
    grid-template-columns: minmax(270px, 1fr) minmax(320px, 1.25fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    column-gap: clamp(12px, 2vw, 24px);
  }
  .sensor-section > .drawing-heading,
  .audio-section > .drawing-heading { grid-column: 1 / -1; }
  .sensor-section > .secure-notice,
  .audio-section > .secure-notice { grid-column: 2; }
  .gyro-visual,
  .audio-monitor { grid-column: 1; grid-row: 2 / 5; }
  .sensor-grid,
  .audio-stats { grid-column: 2; grid-row: 2; align-self: end; }
  .orientation-readout { grid-column: 2; grid-row: 3; }
  .sensor-section > .sensor-button,
  .audio-section > .sensor-button { grid-column: 2; grid-row: 4; }
  .sensor-footnote { display: none; }
  .sensor-section:has(.secure-notice:not(.view-hidden)) .gyro-visual { display: grid; }
}

@media (max-height: 560px) {
  .shell { gap: 6px; padding-block: 7px; }
  .brand-logo { width: 32px; height: 32px; }
  .brand .eyebrow, footer { display: none; }
  .brand h1 { font-size: 1.05rem; }
  .connection { padding-block: 6px; }
  .mode-tab { min-height: 32px; }
  .drawing-heading h2 { margin-top: 2px; font-size: 1.25rem; }
  .drawing-heading .eyebrow { display: none; }
  .color-swatch { width: 27px; height: 27px; }
  .clear-button { min-height: 30px; }
}

@media (max-width: 480px) {
  .topbar { gap: 8px; }
  .brand { gap: 7px; }
  .brand-logo { width: 32px; height: 32px; }
  .brand .eyebrow { display: none; }
  .brand h1 { font-size: 1rem; }
  .topbar-actions { gap: 5px; }
  .interface-mode { min-height: 29px; padding-inline: 7px; font-size: .61rem; }
  .connection { padding: 8px; }
  #connectionText { display: none; }
  body.experience-mode .experience-microphone {
    grid-template-columns: 40px 0;
  }
  body.experience-mode .experience-microphone.active { grid-template-columns: 40px minmax(80px, 1fr); gap: 9px; }
  body.experience-mode .experience-microphone .microphone-icon {
    transform: translateY(-4px) scale(.78);
    transform-origin: center;
  }
}

@media (max-width: 639px) and (max-height: 650px) {
  .now-playing p:last-child, .section-heading p, .sensor-footnote { display: none; }
  .now-playing h2 { margin-top: 3px; }
  .section-heading { margin-bottom: 4px; }
  .card-label { font-size: .72rem; }
}

@media (orientation: landscape) {
  body.experience-mode .shell {
    position: relative;
    display: block;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    padding: 0;
  }
  body.experience-mode .topbar {
    position: fixed;
    z-index: 20;
    top: max(8px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    pointer-events: none;
    text-shadow: 0 1px 8px rgba(0,0,0,.9);
  }
  body.experience-mode .topbar-actions { pointer-events: auto; }
  body.experience-mode .experience-tabs {
    position: fixed;
    z-index: 21;
    top: 50%;
    left: max(10px, env(safe-area-inset-left));
    display: flex;
    width: clamp(82px, calc((100vw - 100dvh) / 2 - 18px), 150px);
    margin: 0;
    padding: 4px;
    flex-direction: column;
    gap: 5px;
    transform: translateY(-50%);
  }
  body.experience-mode .experience-tab {
    width: 100%;
    min-height: 48px;
    padding: 9px 7px;
    line-height: 1.15;
    white-space: normal;
  }
  body.experience-mode .drawing-section {
    position: fixed;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100vw;
    height: 100dvh;
  }
  body.experience-mode .canvas-frame {
    position: absolute;
    top: 12px;
    left: 50%;
    width: calc(100dvh - 24px);
    max-width: none;
    height: calc(100dvh - 24px);
    max-height: none;
    border-radius: 16px;
    transform: translateX(-50%);
  }
  body.experience-mode .experience-actions {
    position: fixed;
    z-index: 21;
    top: 50%;
    left: calc(50% + 50dvh);
    width: clamp(62px, calc((100vw - 100dvh) / 2 - 10px), 340px);
    min-height: 62px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    transform: translateY(-50%);
  }
  body.experience-mode .experience-microphone.active { width: 100%; }
  body.experience-mode footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}