@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --text: #f2f3ef;
  --muted: #a4aba4;
  --accent: #dfedc3;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --edge: 32px;
  --screen-radius: 12px;
  --view-clearance: 180px;
  --controls-bottom: max(24px, env(safe-area-inset-bottom));
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #131514; color: var(--text); }
body {
  height: 100dvh;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
  background: transparent;
}
button, a, input { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.brand {
  position: fixed; bottom: var(--controls-bottom); left: var(--edge); z-index: 5;
  display: flex; align-items: center; height: 36px;
  font-family: "Manrope", var(--font-ui); font-size: 27px; line-height: 1;
  font-weight: 650; letter-spacing: -1.1px;
}
.theater {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 76px 0 var(--edge);
}
.screen-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .289fr);
  gap: 18px; width: 100%; max-width: calc((100dvh - var(--view-clearance)) * 2.062 + 18px); align-items: center;
}
.screen { position: relative; min-width: 0; }
.video-mount {
  width: 100%; aspect-ratio: 1440 / 900; overflow: hidden;
  background: transparent; border: 0; border-radius: var(--screen-radius);
  box-shadow: none;
}
.mobile-screen .video-mount { aspect-ratio: 390 / 844; }
.video-mount video, .video-mount img { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.material {
  position: fixed; top: max(25px, env(safe-area-inset-top)); left: var(--edge); z-index: 3;
  display: flex; align-items: baseline; gap: 12px;
  max-width: calc(100vw - 2 * var(--edge));
}
.material h1 {
  min-width: 0; margin: 0; font-size: 22px; line-height: 1.25; font-weight: 550; letter-spacing: -.45px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.material #domain { min-width: 0; flex: 0 1 auto; color: var(--muted); font-size: 12px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timeline {
  position: fixed; z-index: 8; right: max(8px, env(safe-area-inset-right)); top: var(--timeline-top, 0px);
  width: 40px; height: var(--timeline-height, 0px);
}
.timeline input {
  display: block; appearance: none; writing-mode: vertical-lr; direction: ltr;
  width: 40px; height: 100%; margin: 0; border: 0; border-radius: 2px;
  background: linear-gradient(to bottom, var(--accent) 0 var(--progress, 0%), #e8efd840 var(--progress, 0%) 100%) center / 2px 100% no-repeat;
  cursor: pointer; accent-color: var(--accent);
}
.timeline input::-webkit-slider-thumb { appearance: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.timeline input::-moz-range-thumb { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--accent); }
.dock {
  position: fixed; z-index: 10; bottom: var(--controls-bottom); left: 50%; transform: translateX(-50%);
}
.dock-controls { display: flex; align-items: center; justify-content: center; gap: 6px; }
.dock-controls button, .dock-controls a {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid #ffffff26; border-radius: 12px; color: #e9eee5;
  background: linear-gradient(135deg, #dfe6dd24, #e0e8e00b), #1b201a70;
  backdrop-filter: blur(24px) saturate(120%); -webkit-backdrop-filter: blur(24px) saturate(120%);
  box-shadow: inset 0 1px 0 #ffffff0d, 0 6px 20px #0003;
  transition: background .15s ease, border-color .15s ease;
}
.dock-controls button:hover, .dock-controls a:hover { background-color: #ffffff20; border-color: #ffffff45; }
.dock-controls .play { color: var(--accent); background-color: #d8efaf24; border-color: #d8efaf45; }
.dock-controls .play:hover { background-color: #d8efaf38; }
.dock-controls svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.dock-controls .play-icon { fill: currentColor; stroke: none; margin-left: -3px; }
.dock .pause-icon { display: none; }
.dock .playing .play-icon { display: none; }
.dock .playing .pause-icon { display: block; stroke-width: 3; }
#external[aria-disabled=true] { opacity: .3; pointer-events: none; }
.message {
  position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 6;
  max-width: 80vw; padding: 10px 16px; background: #1d231cf0; border: 1px solid #ffffff1a; border-radius: 10px;
  color: #e3e7d7; font-size: 12px; line-height: 18px; text-align: center;
}
.message:empty { display: none; }
.retry {
  position: fixed; left: 50%; top: 48%; transform: translate(-50%, -50%); z-index: 20;
  border: 1px solid #ffffff44; border-radius: 25px; background: var(--accent); color: #243119; padding: 13px 22px;
}
.retry[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1000px) {
  :root { --edge: 24px; }
  .screen-grid { gap: 14px; }
}
@media (max-width: 550px) {
  :root { --edge: 16px; }
  .brand { font-size: 24px; }
  .timeline { right: env(safe-area-inset-right, 0px); width: 40px; }
  .theater { padding-left: 12px; padding-right: 56px; }
  .screen-grid { gap: 8px; }
  .material h1 { font-size: 20px; }
  .message { top: 90px; }
}
@media (max-width: 440px) {
  .brand { font-size: 22px; }
  .dock { left: auto; right: var(--edge); transform: none; }
  .dock-controls { gap: 6px; }
}
@media (max-height: 600px) and (min-width: 700px) {
  :root { --controls-bottom: max(16px, env(safe-area-inset-bottom)); }
  .screen-grid { max-width: calc((100dvh - var(--view-clearance)) * 2.062 + 14px); }
  .material { top: 16px; }
  .material h1 { font-size: 18px; }
  .message { top: 70px; }
}
@media (prefers-reduced-motion: reduce) { .dock-controls button, .dock-controls a { transition: none; } }

/* Ambient light is sampled from the visible desktop frame, without another decoder. */
#ambient { position: fixed; inset: -80px; width: calc(100% + 160px); height: calc(100% + 160px); object-fit: cover; filter: blur(64px) brightness(.66) saturate(1.1); pointer-events: none; z-index: -1; }
.brand, .material { text-shadow: 0 1px 8px #0009; }
.material #domain { color: #e4e7df; }


/* Viewport size controls composition; input capability controls hover behavior. */
.dock-controls { transform-origin: center bottom; transition: opacity .25s ease, transform .25s ease; }
#fullscreen .collapse-icon { display: none; }
.full-view #fullscreen .expand-icon { display: none; }
.full-view #fullscreen .collapse-icon { display: block; }
.full-view { --view-clearance: 112px; }
.full-view .brand { display: none; }
.full-view .material { top: max(12px, env(safe-area-inset-top)); }
@media (hover: hover) and (pointer: fine) {
  .timeline input::-webkit-slider-thumb { opacity: 0; transition: opacity .15s; }
  .timeline input::-moz-range-thumb { opacity: 0; transition: opacity .15s; }
  .timeline:hover input::-webkit-slider-thumb, .timeline input:focus-visible::-webkit-slider-thumb { opacity: 1; }
  .timeline:hover input::-moz-range-thumb, .timeline input:focus-visible::-moz-range-thumb { opacity: 1; }
  .is-playing .dock-controls { opacity: .3; transform: scale(.92); }
  .dock:hover .dock-controls, .dock:focus-within .dock-controls { opacity: 1; transform: scale(1.12); }
}
@media (pointer: coarse), (hover: none) {
  .dock-controls button, .dock-controls a { width: 44px; height: 44px; }
  .brand { height: 44px; }
}
@media (max-width: 767px) and (orientation: portrait) {
  .desktop-screen { display: none; }
  .theater { padding: 0 48px; }
  .screen-grid { grid-template-columns: minmax(0, 1fr); max-width: calc((100dvh - var(--view-clearance)) * 390 / 844); }
  .timeline input::-webkit-slider-thumb { opacity: 1; }
  .timeline input::-moz-range-thumb { opacity: 1; }
  .dock { left: 50%; right: auto; transform: translateX(-50%); }
  .brand { bottom: calc(var(--controls-bottom) + 52px); height: 20px; font-size: 18px; }
  .dock-controls, .is-playing .dock-controls, .dock:hover .dock-controls { opacity: 1; transform: none; }
}
@media (orientation: landscape) and (max-height: 600px) {
  :root { --view-clearance: 148px; --controls-bottom: max(12px, env(safe-area-inset-bottom)); }
  .material { top: max(10px, env(safe-area-inset-top)); }
  .material h1 { font-size: 16px; margin-bottom: 0; }
  .material #domain { font-size: 10px; }
  .brand { font-size: 20px; }
  .theater { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(56px, calc(env(safe-area-inset-right) + 48px)); }
}
@media (prefers-reduced-motion: reduce) { .dock-controls { transition: none; } }

/* Hybrid touch devices keep controls explicit even when a mouse is connected. */
@media (any-pointer: coarse) {
  .is-playing .dock-controls, .dock:hover .dock-controls, .dock:focus-within .dock-controls { opacity: 1; transform: none; }
  .timeline input::-webkit-slider-thumb { opacity: 1; }
  .timeline input::-moz-range-thumb { opacity: 1; }
  .dock-controls button, .dock-controls a { width: 44px; height: 44px; }
  .brand { height: 44px; }
}