:root {
  color-scheme: light;
  font:
    14px system-ui,
    sans-serif;
  color: #34332f;
  background: #eeeae0;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
#toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 24px;
  min-height: 45px;
  border-bottom: 1px solid #dad5c8;
  background: #f5f2e9;
}
#menus {
  display: flex;
  gap: 8px;
  flex: 1;
}
#menus details {
  position: relative;
}
#menus summary {
  cursor: pointer;
  padding: 4px 10px;
}
#menus .items {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  min-width: 180px;
  background: #fffdf6;
  padding: 6px;
  box-shadow: 0 4px 16px #0003;
  border-radius: 6px;
}
#menus .items button {
  display: block;
  width: 100%;
  text-align: left;
  margin: 2px 0;
}
#connection {
  font-size: 12px;
  color: #716f65;
}
#viewport {
  width: 100%;
  height: calc(100vh - 45px);
  overflow: auto;
}
#ui {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ui-node {
  box-sizing: border-box;
}
.ui-node[data-kind="text"] {
  user-select: none;
}
.ui-node[data-kind="text"],
.ui-node[data-kind="selectable"],
.ui-node[data-kind="editor"] {
  display: block !important;
  white-space: pre-wrap;
  line-height: 1.4;
  max-width: 100%;
}
.ui-node[data-kind="selectable"] {
  user-select: text;
}
.ui-node[data-kind="text"],
.ui-node[data-kind="selectable"] {
  line-height: normal;
}
.ui-node[data-kind="editor"] {
  user-select: text;
  outline: none;
  overflow: auto !important;
  cursor: text;
  overflow-wrap: break-word;
  min-width: 40px;
}
.ui-node[data-kind="editor"]:focus {
  outline: 2px solid #8b9eab;
  outline-offset: 4px;
}
.ui-node[data-kind="panel"] {
  box-shadow: inset 0 0 0 1px var(--panel-border);
  border-radius: 10px;
}
.ui-node[data-kind="toggle"] {
  align-items: center !important;
  flex-direction: row !important;
  gap: 7px !important;
}
.ui-node[data-kind="slider"] {
  accent-color: #697b6c;
}
input.ui-node[type="range"] {
  display: block !important;
  align-items: normal !important;
  margin: 0;
}
.ui-node[data-kind="timeline"] {
  accent-color: #e4b88e;
  cursor: pointer;
  touch-action: none;
}
button,
select,
input {
  font: inherit;
  color: inherit;
}
button,
select {
  background: #fffdf6;
  border: 1px solid #c9c5ba;
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
}
button:hover {
  background: #f0ebdf;
}
button:focus-visible,
select:focus-visible {
  outline: 2px solid #687f8c;
  outline-offset: 2px;
}
.ui-node[data-kind="button"] {
  align-items: center !important;
  justify-content: center !important;
}
.word {
  white-space: nowrap;
}
.glyph {
  display: inline-block;
  position: relative;
  white-space: pre;
  vertical-align: baseline;
}
.glyph > span {
  display: inline-block;
  transform-origin: left bottom;
}
body.debug .ui-node {
  outline: 1px solid #bd665a66;
}
dialog {
  border: 1px solid #ccc5b5;
  border-radius: 12px;
  padding: 24px;
  max-width: min(480px, 90vw);
  box-shadow: 0 16px 60px #0003;
  background: #fffdf6;
}
dialog::backdrop {
  background: #0003;
}
dialog form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
dialog h2,
dialog p {
  margin: 0;
}
dialog .actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
#downloads {
  position: fixed;
  bottom: 12px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#downloads a {
  background: #fffdf6;
  padding: 8px 14px;
  border: 1px solid #dad5c8;
  border-radius: 6px;
  color: inherit;
  font-size: 12px;
}

body.dark #connection {
  color: #9caac0;
}
body.dark dialog,
body.dark #menus .items {
  background: #191c23;
  border-color: #343843;
  color: #f0eeeb;
}
.ui-node[data-kind="input"] {
  padding: 8px 12px !important;
}
.ui-node[data-kind="choice"] {
  display: block !important;
  padding: 8px 12px !important;
}
.ui-node[data-kind="media-button"] {
  align-items: center !important;
  justify-content: center !important;
}
.ui-node[data-kind="image"] {
  border-radius: 9px;
  overflow: hidden !important;
}
.ui-node[data-kind="video"] {
  position: relative;
  background: black;
  border-radius: 8px;
  overflow: hidden !important;
}

/* A playback boundary keeps application navigation outside browser fullscreen. */
.ui-node[data-kind="video-frame"] {
  background: #08090b;
  border-radius: 12px;
  overflow: hidden;
}
.ui-node[data-kind="video-frame"]:fullscreen {
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0;
}
.ui-node[data-kind="video-frame"] [data-kind="video"] {
  border-radius: 0;
}
.ui-node[data-kind="progress"] {
  appearance: none;
  border: 0;
  border-radius: 99px;
  overflow: hidden;
  background: #303138;
  accent-color: #d2ab87;
}
.ui-node[data-kind="progress"]::-webkit-progress-bar {
  background: #303138;
}
.ui-node[data-kind="progress"]::-webkit-progress-value {
  background: #d2ab87;
  border-radius: 99px;
  transition: width 0.3s;
}
.ui-node[data-kind="progress"]::-moz-progress-bar {
  background: #d2ab87;
}
.ui-node[data-kind="progress"]:indeterminate,
.ui-node[data-kind="progress"]:indeterminate::-webkit-progress-bar {
  background: linear-gradient(90deg, #303334 25%, #dce0d9 50%, #303334 75%);
  background-size: 240% 100%;
  animation: patina-progress 1.8s ease-in-out infinite;
}
@keyframes patina-progress {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-node[data-kind="progress"]:indeterminate,
  .ui-node[data-kind="progress"]:indeterminate::-webkit-progress-bar {
    animation: none;
  }
}
body.dark {
  color-scheme: dark;
  color: #f0eeeb;
}
body.dark #toolbar {
  background: #141519;
  border-color: #28292f;
}
body.dark button,
body.dark select,
body.dark input {
  background: #24252b;
  border: 1px solid #3b3c44;
  border-radius: 8px;
  color: #f0eeeb;
}
body.dark button {
  transition:
    background 0.15s,
    border-color 0.15s;
}
body.dark button:hover {
  background: #34353d;
  border-color: #67636a;
}
body.dark button:focus-visible,
body.dark select:focus-visible,
body.dark input:focus-visible {
  outline: 2px solid #ddba95;
  outline-offset: 3px;
}
body.dark [data-kind="slider"] {
  accent-color: #d2ab87;
}
body.dark [data-kind="media-button"] {
  border-color: #706052;
  background: #3c3029;
}
body.dark [data-kind="media-button"]:hover {
  background: #554236;
}
body.dark:has([data-kind="video-frame"]) #toolbar {
  display: none;
}
body.dark:has([data-kind="video-frame"]) #viewport {
  height: 100dvh;
}
.ui-node[data-kind="image-button"] {
  padding: 0;
  border: 0;
  background: #202126;
  border-radius: 9px;
  overflow: hidden;
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.ui-node[data-kind="image-button"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ui-node[data-kind="image-button"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px #0007;
}
.ui-node[data-kind="search"] {
  padding: 8px 12px;
}
@media (prefers-reduced-motion: reduce) {
  .ui-node[data-kind="image-button"],
  body.dark button {
    transition: none;
  }
}
@media (max-width: 800px) {
  body:has([data-kind="video-frame"]) #ui {
    min-width: 0 !important;
    min-height: 0 !important;
  }
  [data-kind="video-frame"] [data-kind="panel"] > [data-kind="group"] {
    flex-wrap: wrap;
  }
}

/* Portable control appearances share the same meanings with AppKit. */
.ui-node[data-kind="button"],
.ui-node[data-kind="media-button"],
.ui-node[data-kind="link"] {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--control-icon-gap) !important;
  white-space: nowrap;
}
.ui-node button svg,
button.ui-node svg {
  width: var(--control-icon-size);
  height: var(--control-icon-size);
  flex: none;
}
button.ui-node[data-appearance]:not([data-appearance="default"]) {
  font-size: var(--control-font-size);
  font-weight: 500;
  border: 0;
  border-radius: 9px;
  line-height: normal;
  transition:
    background 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}
button.ui-node[data-appearance="secondary"] {
  background: #e8e7e3;
  color: #34332f;
}
button.ui-node[data-appearance="primary"] {
  background: #e4b88e;
  color: #201b17;
  box-shadow: 0 1px 2px #0002;
}
button.ui-node[data-appearance="primary"]:hover {
  background: #f2cca6;
}
button.ui-node[data-appearance="subtle"] {
  background: transparent;
  color: #686b74;
}
button.ui-node[data-appearance="subtle"]:hover {
  background: #00000008;
  color: #22242b;
}
button.ui-node[data-appearance="selected"] {
  background: #efe2d5;
  color: #714725;
}
.ui-node:is(button, a)[data-appearance="subtle"]:not([data-icon-only="true"]),
.ui-node:is(button, a)[data-appearance="selected"]:not([data-icon-only="true"]) {
  justify-content: flex-start !important;
}
body.dark button.ui-node[data-appearance="secondary"] {
  background: #24262d;
  color: #e8e7e5;
}
body.dark button.ui-node[data-appearance="secondary"]:hover {
  background: #30333b;
}
body.dark button.ui-node[data-appearance="subtle"] {
  background: transparent;
  color: #979da9;
}
body.dark button.ui-node[data-appearance="subtle"]:hover {
  background: #ffffff08;
  color: #f1f0ed;
}
body.dark button.ui-node[data-appearance="selected"] {
  background: #303435;
  color: #e4e7e1;
}
body.dark button.ui-node[data-appearance="primary"],
body.dark .ui-node[data-kind="link"][data-appearance="primary"] {
  background: #f5f7fc;
  color: #161819;
}
body.dark button.ui-node[data-appearance="primary"]:hover {
  background: #ffffff;
}
body.dark :is(button, select, input):focus-visible {
  outline: 2px solid #dce0d9;
  outline-offset: 4px;
}
body.dark :is(progress, input[type="range"]) {
  accent-color: #dce0d9;
}
body.dark .ui-node[data-kind="progress"]::-webkit-progress-value {
  background: #dce0d9;
}
body.dark .ui-node[data-kind="progress"]::-moz-progress-bar {
  background: #dce0d9;
}

body.dark input,
body.dark select {
  background: #1b1e24;
  border-color: #30343d;
}
body.dark input::placeholder {
  color: #787f8c;
}
body.dark .ui-node[data-kind="image-button"] {
  background: #17191f;
}
.ui-node[data-kind="image-button"] img {
  display: block;
  border-radius: 10px;
}
.ui-node[data-kind="image-button"]:focus-visible {
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  button.ui-node[data-appearance] {
    transition: none;
  }
  .ui-node[data-kind="image-button"]:hover {
    transform: none;
  }
}

/* Menu-free applications use their own navigation. Connection failures appear
   as an overlay without shifting the component layout. */
#toolbar:has(#menus:empty) {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10;
  min-height: 0;
  padding: 10px 14px;
  border: 1px solid #dad5c8;
  border-radius: 8px;
}
#toolbar:has(#menus:empty) #menus,
#toolbar:has(#menus:empty) #close {
  display: none;
}
#toolbar[data-connected="true"]:has(#menus:empty) {
  display: none;
}
body:has(#menus:empty) #viewport {
  height: 100dvh;
}

.ui-node[data-kind="link"] {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #24262d;
  color: #f3f1ed;
  font-size: var(--control-font-size);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.ui-node[data-kind="link"] svg { width: var(--control-icon-size); height: var(--control-icon-size); flex: none; }
.ui-node[data-kind="link"][data-appearance="primary"] { background: #e4b88e; color: #201b17; }
.ui-node[data-kind="link"]:focus-visible { outline: 3px solid #e4b88e; outline-offset: 4px; }
.ui-node[data-kind="link"]:hover { filter: brightness(1.15); }
/* Empty overlay regions let pointer events reach the picture or video beneath. */
.ui-node[data-kind="group"], .ui-node[data-kind="spacer"] { pointer-events: none; }
.ui-node[data-kind="scroll"], .ui-node[data-kind="panel"] { pointer-events: auto; }
.ui-node:is(button, a, input, select, label, [data-kind="editor"], [data-kind="selectable"], [data-kind="video"]) { pointer-events: auto; }
.ui-node[data-kind="video-frame"][data-overlay="true"] {
  border-radius: 0;
  background: #000;
}
[data-kind="video-frame"][data-overlay="true"] > [data-kind="group"] {
  transition: opacity .22s;
}
[data-kind="video-frame"][data-overlay="true"][data-controls-hidden="true"] > [data-kind="group"] {
  opacity: 0;
  pointer-events: none;
}
[data-kind="video-frame"][data-overlay="true"][data-controls-hidden="true"] > [data-kind="group"] * {
  pointer-events: none;
}
[data-kind="video-frame"][data-controls-hidden="true"] video { cursor: none; }
@media (prefers-reduced-motion: reduce) {
  [data-kind="video-frame"] > [data-kind="group"] { transition: none !important; }
}
.ui-node[data-kind="link"] { flex-direction: row !important; }

/* Portable glass surfaces and modal sheets; layout is still shared OCaml. */
.ui-node[data-kind="glass"], .ui-node[data-kind="sheet"] {
  pointer-events: auto;
  background: linear-gradient(145deg, #ffffff0c, #ffffff02), #1b1d1eef !important;
  backdrop-filter: blur(28px) saturate(115%);
  -webkit-backdrop-filter: blur(28px) saturate(115%);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 #ffffff12, inset 0 0 0 1px #ffffff20, 0 16px 48px #0003;
}
/* Keep video controls glass-styled without filtering the moving picture.
   Avoid the video/backdrop-filter interaction reported during HDR playback.
   Gallery and other non-player glass surfaces keep their live blur. */
[data-kind="video-frame"] .ui-node[data-kind="glass"] {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ui-node[data-kind="sheet"] {
  z-index: 30;
  position: relative !important;
  box-shadow: inset 0 0 0 1px #ffffff25, 0 24px 90px #0008, 0 0 0 100vmax #0009;
  animation: sheet-enter .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes sheet-enter { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.ui-node[data-kind="scroll"] { overflow-anchor: none; scrollbar-width: thin; scrollbar-color: #ffffff28 transparent; }
.ui-node[data-kind="image-button"]:hover { transform: none; box-shadow: 0 0 0 2px #ffffff70; }
.ui-node[data-kind="image-button"][data-appearance="selected"] { box-shadow: 0 0 0 2px #ffffff80; }
.ui-node[data-kind="image-button"]:focus-visible { outline: 3px solid #f1f2ed; outline-offset: 3px; }
body.dark button.ui-node[data-appearance]:not([data-appearance="default"]):not([data-kind="image-button"]) { border-radius: 24px; }
body.dark .ui-node[data-kind="timeline"] { accent-color: #dce0d9; }
body.dark dialog { color: #e9eae7; background: #1b1d1ef5; border-color: #ffffff24; border-radius: 24px; }
[data-ui-id="cinema-navigation"] { border-bottom: 1px solid #ffffff08; }
.ui-node[data-kind="search"] {
  font-size:18px; padding:12px 18px !important; border-radius:16px;
  color:#e9eae7; background:#0c0d0e60; border:1px solid #ffffff1c;
  outline:none; transition:background .18s, border-color .18s;
}
.ui-node[data-kind="search"]:focus { outline:none; border-color:#ffffff80; background:#0c0d0e90; }
[data-kind="sheet"][aria-label="Search"] { transition:height .2s ease; }
[data-ui-id="cinema-search-results"] { max-height:calc(100dvh - 200px) !important; }
[data-ui-id="cinema-player-controls"] [data-kind="text"] { text-shadow: 0 2px 12px #0008; }
[data-ui-id="cinema-player-controls"] > [data-kind="group"]:first-child > [data-kind="text"] { text-align: center; }
@media(max-width:700px) {
  #ui:has([data-ui-id^="cinema-"]), #ui:has([data-kind="sheet"]) { min-width:0 !important; min-height:0 !important; }
  [data-ui-id="cinema-shell"] { padding:0 12px 12px !important; }
  [data-ui-id="cinema-navigation"] { height:68px !important; gap:4px !important; }
  [data-ui-id="cinema-sign-in"] { padding:20px !important; }
  [data-kind="sheet"] { width:calc(100% - 24px) !important; height:calc(100% - 32px) !important; padding:16px !important; }
  [data-kind="sheet"][aria-label="Search"] { height:auto !important; }
  [data-kind="sheet"][aria-label="Search"] [data-kind="group"][style*="row"] { flex-wrap:nowrap; }
  [data-kind="sheet"] [data-kind="panel"], [data-kind="sheet"] [data-kind="glass"] { padding:14px !important; gap:12px !important; }
  [data-kind="sheet"] [data-kind="group"][style*="row"] { flex-wrap:wrap; }
  [data-kind="sheet"] [data-kind="image"][style*="152px"] { width:70px !important; height:58px !important; }
  [data-ui-id="cinema-player-controls"] { padding:12px 16px !important; }
  [data-ui-id="cinema-player-right"] [aria-label="Volume"] { display:none !important; }
  [data-ui-id="cinema-player-transport"] { gap:6px !important; }
  [data-ui-id="cinema-player-left"] [data-kind="text"] { font-size:11px !important; }
  [data-ui-id="cinema-player-right"] { gap:0 !important; }
  [data-ui-id="cinema-player-controls"] [data-kind="text"] { max-width:100% !important; }
}
@media(prefers-reduced-motion:reduce) {
  .ui-node { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}