:root {
    --bg1: #f6f1e8; --bg2: #ddd6ca;
    --panel: rgba(255,255,255,.82); --line: rgba(0,0,0,.09);
    --text: #2a2723; --muted: #7a736a; --accent: #3d8a4a; --btn: #fff;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg1: #2a2d34; --bg2: #141619;
      --panel: rgba(28,30,35,.85); --line: rgba(255,255,255,.08);
      --text: #e9e6e0; --muted: #9a958c; --accent: #6cc27a; --btn: #2b2e35;
    }
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; overflow: hidden; }
  body {
    font: 13px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text);
    background: radial-gradient(ellipse at 40% 35%, var(--bg1), var(--bg2));
  }
  #view { position: fixed; inset: 0; }
  #view canvas { display: block; }
  #panel {
    position: fixed; top: 12px; right: 12px; bottom: 12px; width: 290px;
    background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line); border-radius: 14px; overflow-y: auto; padding: 14px 14px 18px;
  }
  h1 { font-size: 15px; margin: 0 0 10px; letter-spacing: .02em; }
  h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 16px 0 6px; }
  .row { display: flex; gap: 6px; margin-bottom: 6px; }
  #tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 10px; }
  #tabs button { padding: 6px 2px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #tabs button.on { background: var(--text); color: var(--bg1); border-color: transparent; }
  button, select, input[type=text] {
    font: inherit; color: var(--text); background: var(--btn);
    border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px;
  }
  button { cursor: pointer; flex: 1; }
  button:hover { border-color: var(--accent); }
  button.main { background: var(--accent); color: #fff; border-color: transparent; font-weight: 600; }
  input[type=text], select { flex: 1; min-width: 0; }
  .slider { display: grid; grid-template-columns: 82px 1fr 38px 16px; align-items: center; gap: 6px; margin: 3px 0; }
  .slider .lock { flex: none; padding: 0; border: none; background: none; font-size: 11px; line-height: 1; opacity: .25; filter: grayscale(1); }
  .slider .lock:hover { opacity: .6; }
  .slider .lock.on { opacity: 1; filter: none; }
  .slider label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .slider output { text-align: right; font-variant-numeric: tabular-nums; }
  input[type=range] { width: 100%; accent-color: var(--accent); }
  .check { display: flex; align-items: center; gap: 6px; color: var(--muted); margin: 4px 0; }
  .slider select { grid-column: 2 / 4; padding: 3px 6px; }
  #favs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .fav { position: relative; }
  .fav img { width: 100%; display: block; border-radius: 6px; cursor: pointer; border: 1px solid var(--line); }
  .fav button { position: absolute; top: 3px; right: 3px; padding: 0 5px; font-size: 11px; line-height: 16px; border-radius: 5px; opacity: .85; }
  #status { color: var(--muted); font-size: 12px; min-height: 16px; }
  .note { color: var(--muted); font-size: 12px; margin: 2px 0 6px; }
  #hint { position: fixed; left: 14px; bottom: 12px; color: var(--muted); font-size: 12px; pointer-events: none; }
  @media (max-width: 700px) {
    #panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 46vh; }
    #hint { display: none; }
  }

/* cinema mode: panel away, letterbox bars, fade at the cuts */
body.cine #panel, body.cine #hint { display: none; }
body.cine #view { cursor: pointer; }
body.cine::before, body.cine::after { content: ''; position: fixed; left: 0; right: 0; height: calc((100vh - 100vw / 2.39) / 2); min-height: 0; background: #000; z-index: 5; pointer-events: none; }
body.cine::before { top: 0; }
body.cine::after { bottom: 0; }
#cineFade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 6; display: none; }
#cineTitle { position: fixed; left: 24px; bottom: calc((100vh - 100vw / 2.39) / 2 + 14px); color: #fff; font: 12px/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .7; z-index: 7; pointer-events: none; display: none; text-shadow: 0 1px 3px #0008; }
body.cine #cineFade, body.cine #cineTitle { display: block; }